front-end/hdApp/src/components/app-delivery.vue

<template>
  <view class="app-delivery-module">

    <view class="module-com">

      <tui-list-cell class="line-cell" :hover="false">
        <view class="tui-title required">配送方式</view>
        <button @tap="form.sendType = 3" class="admin-button-com middle" :class="form.sendType == 3 ? 'blue' : 'default'">骑手送</button>
        <button @tap="form.sendType = 2" class="admin-button-com middle" style="margin-left:15upx;" :class="form.sendType == 2 ? 'blue' : 'default'">自己送</button>
        <button @tap="form.sendType = 1" class="admin-button-com middle" style="margin-left:15upx;" :class="form.sendType == 1 ? 'blue' : 'default'">到店自取</button>
      </tui-list-cell>

      <template>
          <tui-list-cell class="line-cell" :hover="false" :arrow="true">
            <view class="tui-title required" v-if="form.sendType == 1">取花日期</view>
            <view class="tui-title required" v-else>配送日期</view>
            <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
              <view v-if="form.reachDate">{{ form.reachDate }}</view>
              <view v-else>今天</view>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title required" v-if="form.sendType == 1">取花时间</view>
            <view class="tui-title required" v-else>配送时间</view>
            <picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
              <view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
            </picker>
          </tui-list-cell>
      </template>

      <tui-list-cell class="line-cell" :hover="false">
        <view class="tui-title required">订花人姓名</view>
        <input v-model="form.bookName" placeholder-class="phcolor" placeholder-style="color:#ccc;" style="width:282upx;" class="tui-input" name="bookName" placeholder="请填写姓名" />
        <button class="admin-button-com default middle" @click="form.bookName='游客'" style="margin-right:10upx;">填游客</button>
      </tui-list-cell>

      <tui-list-cell class="line-cell" :hover="false">
        <view class="tui-title">订花人手机</view>
        <input v-model="form.bookMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" type="number" name="bookMobile" placeholder="请填写手机号" />
      </tui-list-cell>

      <tui-list-cell class="line-cell" :hover="false">
        <view class="tui-title">贺卡内容</view>
        <input v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="cardInfo" placeholder="选填" />
      </tui-list-cell>

      <template v-if="form.sendType != 1">


        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">收花人姓名</view>
          <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">收花人手机</view>
          <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" type="number" name="receiveMobile" placeholder="请填写手机号" />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selectCityFn">
          <view class="tui-title">所在城市</view>
          <view class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</view> <view class="tui-placeholder" v-else>请选择</view>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">详细地址</view>
          <input v-model="form.address" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="address" placeholder="请填写地址" @input="changeAddress()" />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">楼号门牌</view>
          <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="选填" @input="changeFloor()" />
        </tui-list-cell>

      </template>

      <template v-if="form.sendType != 1">
        <tui-list-cell class="line-cell" :hover="false">
          <view class="none-name-delivery flex-center" style="padding-left:0upx;">
            <view class="tui-title">匿名派送</view>
            <checkbox-group @change="anonymityChange" style="padding-left:70upx;">
            <checkbox class="ljd-checkbox" value="1" style="transform:scale(0.6,0.6)" id="noneNameText" ></checkbox>
            <label for="noneNameText" class="none-name-text">需要</label>
            </checkbox-group>
          </view>
        </tui-list-cell>
      </template>

      <tui-list-cell class="line-cell" :hover="false">
        <view class="tui-title">备注</view>
        <input v-model="form.remark" placeholder-class="phcolor" class="tui-input" placeholder-style="color:#ccc" name="remark" placeholder="选填" />
      </tui-list-cell>

    </view>
    <!-- 省市联动 -->
    <simple-address ref="simpleAddress" :region="regionTree" :pickerValueDefault="cityPickerValueDefault" @onConfirm="getCityConfirm" ></simple-address>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
import AppDatePicker from "@/components/app-date-picker";
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import AppBindInfo from "@/components/app-bind-info";
import {getShop} from "@/api/common"
import {getRegion} from "@/api/shop"
export default {
  name: "app-delivery-module",
  components: {
    AppAreaSel,
    TuiListCell,
    AppDatePicker,
    SimpleAddress,
    AppBindInfo
  },
  props: {},
  data() {
    return {
      region: [],
      showRegion: false,
      form: {
        sendType:3,
        receiveUserName: "",
        receiveMobile: "",
        province: "",
        city: "",
        address: "",
        showAddress:"",
        floor: "",
        fullAddress: "",
        bookName: '',
        bookMobile: "",
        reachDate: '',
        reachPeriod: "12:00",
        cardInfo: "",
        remark: "",
        anonymity:0
      },
      region: {latitude:10,longitude:11},
      regionTree:[],
      cityPickerValueDefault: [0, 0],
      timeOptions: [
			['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
			['00', '05', '10','15','20','25','30','35','40','45','50','55']
		],
    };
  },
  mounted() {
    let that = this
    getRegion().then(res=>{
      if(res.code == 1){
        that.regionTree = res.data.region

        getShop().then(res=>{
          if(res.code == 1){
            if(res.data.info){
              that.form.province = res.data.info.province
              that.form.city = res.data.info.city
            }
          }
        })

      }
    })

  },
  methods: {
    changeAddress(){
      this.form.showAddress = this.form.city+this.form.address+this.form.floor
    },
    changeFloor(){
      this.form.showAddress = this.form.city+this.form.address+this.form.floor
    },
    bindTimeChange(event){
      let val = event.detail.value
      let before = Number(val[0])
      let after = Number(val[1])
      let timeOptions = this.timeOptions
      this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after]
    },
    selTimeFn(e) {
      this.form.reachDate = e.detail.value;
    },
    timeTodaySelFn(index) {
      this.form.reachPeriod = index;
    },
    anonymityChange() {
      this.form.anonymity = this.form.anonymity == 1 ? 0 : 1;
    },
    selectCityFn() {
      this.$refs.simpleAddress.open();
    },
    getCityConfirm(e) {
      this.form.province = e.provinceName;
      this.form.city = e.cityName;
    }
  }
};
</script>
<style lang="scss" scoped>
.app-delivery-module {
  .module-com {
    margin-bottom: 20upx;
    background-color: #fff;
    .module-tit {
      padding: 20upx 18upx;
      font-size: 28upx;
      font-weight: 600;
      border-bottom: 1px solid $borderColor;
    }
    .module-det {
      padding: 0 30upx;
    }
  }
  // 公共
  .line-cell {
    .tui-title {
      width: 210upx;
      color: $fontColor2;
    }
    .tui-input {
      width: calc(100% - 210upx);
      font-size: 28upx;
    }
    .tui-placeholder {
      color: #ccc;
    }
    .phcolor {
      color: #ccc;
    }
  }
  .delivery-time {
    @include disFlex(center, center);
    .button-com {
      padding-top: 14upx;
      padding-bottom: 10upx;
      margin-right:10upx;
    }
  }
  // 贺卡
  .gift-wrap {
    .gift-content {
      width: 100%;
    }
    .need-gift {
      margin-left: 14upx;
      color: $fontColor2;
    }
    .gitf-textarea {
      margin-top: 40upx;
    }
  }

  // 匿名派送
  .none-name-delivery {
    margin-bottom: 20upx;
    background-color: #fff;
    .none-name-text {
      margin-left: 10upx;
      color: $fontColor2;
    }
  }
}
</style>