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

<template>
  <div class="app-delivery-module">
    <!-- 配送公共组件 -->
    <!-- 收花人 -->
    <div class="module-com">
        <AppBindInfo></AppBindInfo>
      <!-- <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">收花人姓名</div>
        <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">
        <div class="tui-title">收花人电话</div>
        <input
          v-model="form.receiveMobile"
          placeholder-class="phcolor"
		      placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveMobile"
          placeholder="请输入电话"
          type="number"
        />
      </tui-list-cell> -->
      <tui-list-cell class="line-cell code-wrap" :hover="false">
            <div class="tui-title">取货方式</div>
            <div>
              <button class="admin-button-com blue mini-btn">
                自取
              </button>
              <button style="margin-left:10px;" class="admin-button-com default mini-btn">
                配送
              </button>
            </div>
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
        <div class="tui-title">配送城市</div>
        <div
          class="tui-input"
          v-if="form.receiveProvince || form.receiveCity"
        >{{ form.receiveProvince + '-' + form.receiveCity }}</div>
        <div class="tui-placeholder" v-else>请选择</div>
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
        <div class="tui-title">详细地址</div>
        <div class="tui-input" v-if="form.receiveAddress">{{ form.receiveAddress }}</div>
        <div class="tui-placeholder" v-else>请选择地址</div>
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">门牌号</div>
        <input
          v-model="form.receiveFloor"
          placeholder-class="phcolor"
		      placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveFloor"
          placeholder="楼号门牌号（选填）"
        />
      </tui-list-cell>
      <tui-list-cell class="line-cell" :hover="false" :arrow="true">
        <div class="tui-title">配送时间</div>
        <picker mode="date" :value="form.reachTime" @change="selTimeFn" class="tui-input">
          <div v-if="form.reachTime">{{ form.reachTime }}</div>
          <div class="tui-placeholder" v-else>请选择送达时间</div>
        </picker>
      </tui-list-cell>
       <div class="delivery-time">
        <button
          class="button-com"
          :class="[form.reachPeriod == 0 ? 'red' : 'default']"
          @click="timeTodaySelFn(0)"
        >上午</button>
        <button
          class="button-com"
          :class="[form.reachPeriod == 1 ? 'red' : 'default']"
          @click="timeTodaySelFn(1)"
        >下午</button>
        <button
          class="button-com"
          :class="[form.reachPeriod == 2 ? 'red' : 'default']"
          @click="timeTodaySelFn(2)"
        >晚上</button>
      </div>
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">运费</div>
        <input
          v-model="form.receiveFloor"
          placeholder-class="phcolor"
		      placeholder-style="color:#ccc"
          class="tui-input"
          name="receiveFloor"
          placeholder="运费(元)"
        />
      </tui-list-cell>
    </div>
    <!-- 订花人 -->
    <!-- <div class="module-com"> -->
      <!-- <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">订花人电话</div>
        <input
          v-model="form.bookMobile"
          placeholder-class="phcolor"
		  placeholder-style="color:#ccc"
          class="tui-input"
          name="bookMobile"
          placeholder="花送到了通知您（选填）"
          type="number"
        />
      </tui-list-cell> -->
      
      <!-- 具体时间 -->
     
    <!-- </div> -->
    <!-- 贺卡 -->
    <!-- <div class="module-com gift-wrap input-line-wrap">
      <tui-list-cell class="line-cell" :hover="false">
        <div class="gift-content">
          <div class="flex-center">
            <checkbox
              class="ljd-checkbox"
              id="needGift"
              :checked="form.needCard == 1 ? true : false"
              @change="needCardChange"
            ></checkbox>
            <label for="needGift" class="need-gift">需要贺卡</label>
          </div>
          <div class="gitf-textarea">
            <textarea
              v-model="form.cardInfo"
              class="tui-textarea"
              placeholder-class="phcolor"
			  placeholder-style="color:#ccc"
              name="cardInfo"
              placeholder="请填写贺卡内容，留空将寄出空白贺卡"
              auto-height
            />
          </div>
        </div>
      </tui-list-cell>
    </div> -->
    <!-- 备注 -->
    <div class="module-com remark-wrap">
      <tui-list-cell class="line-cell" :hover="false">
        <div class="tui-title">其它备注</div>
        <input
          v-model="form.remark"
          placeholder-class="phcolor"
          class="tui-input"
          name="remark"
          placeholder="（选填）"
        />
      </tui-list-cell>
    </div>
    <!-- 省市联动 -->
    <simple-address
      ref="simpleAddress"
      :region="orderShop.region"
      :pickerValueDefault="cityPickerValueDefault"
      @onConfirm="onCityConfirm"
    ></simple-address>
    <!-- 选择地区 -->
    <app-area-sel :show.sync="showRegion" :city="form.receiveCity" @change="changeAreaFn" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
import AppDatePicker from "@/components/app-date-picker";
// import AppTextarea from '@/components/app-textarea'
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import AppBindInfo from "@/components/app-bind-info";
export default {
  name: "app-delivery-module",
  components: {
    AppAreaSel,
    TuiListCell,
    AppDatePicker,
    // AppTextarea,
    SimpleAddress,
    AppBindInfo
  },
  props: {
    // anonymous: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      region: [],
      showRegion: false,
      form: {
        receiveUserName: "", // 收花人姓名；到店自提的姓名
        receiveMobile: "", // 收花人手机；到店自提的电话；
        receiveProvince: "", // 收花人省份
        receiveCity: "", // 收花人城市
        receiveAddress: "", // 收花人城市
        receiveFloor: "", // 收花人门楼号和牌号
        receiveFullAddress: "", // 收花人完整地址，从腾讯地图接口获取
        // bookName: '', // 订花人姓名
        bookMobile: "", // 订花人手机号
        reachTime: 0, // 配送时间
        reachPeriod: "0", // 配送时段，0上午1下午2晚上
        needCard: "1", // 是否要贺卡 0不要 1要
        cardInfo: "", // 贺卡信息
        remark: "" // 备注
      },
      region: {
        latitude: 0,
        longitude: 0
      },
      // 省市联动
      cityPickerValueDefault: [0, 0]
      // pickerText: ''
    };
  },
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" })
  },
  watch: {
    orderShop(val) {
      console.log("val", val);
      this.form.receiveProvince = val.shop.province ? val.shop.province : "";
      this.form.receiveCity = val.shop.city ? val.shop.city : "";
    }
  },
  mounted() {
    if (!this.$util.isEmpty(this.orderShop)) {
      this.form.receiveProvince = this.orderShop.shop.province
        ? this.orderShop.shop.province
        : "";
      this.form.receiveCity = this.orderShop.shop.city
        ? this.orderShop.shop.city
        : "";
    }
    // if (this.anonymous) {
    // this.form.anonymous = "0";
    // }
  },
  methods: {
    selTimeFn(e) {
      this.form.reachTime = e.detail.value;
    },
    // 选择地址
    selRegionFn() {
      if (!this.form.receiveCity) {
        this.$msg("请先选择城市！");
        return false;
      }
      this.showRegion = true;
      // let that = this
      // uni.chooseLocation({
      // 	success: res => {
      // 		this.form.receiveFullAddress = res.address
      // 		this.region.latitude = res.latitude
      // 		this.region.longitude = res.longitude
      // 	}
      // })
    },
    changeAreaFn(e) {
      console.log("changeAreaFn", e);
      this.form.receiveAddress = e.title;
      this.form.receiveFullAddress = e.address;
      this.region.latitude = e.location.lat;
      this.region.longitude = e.location.lng;
      this.$emit("changeAddress", e);
    },
    // -----
    timeTodaySelFn(index) {
      this.form.reachPeriod = index;
    },
    needCardChange() {
      this.form.needCard = this.form.needCard == 1 ? 0 : 1;
    },
    // anonymityChange() {
    //   this.form.anonymous = this.form.anonymous == 1 ? 0 : 1;
    // },
    // 省市联动
    openAddres() {
      this.$refs.simpleAddress.open();
    },
    onCityConfirm(e) {
      this.form.receiveAddress = e.label;
      this.form.receiveProvince = e.provinceName;
      this.form.receiveCity = e.cityName;
      // this.pickerText = JSON.stringify(e)
    }
  }
};
</script>

<style lang="scss" scoped>
.app-delivery-module {
  .module-com {
    margin-bottom: 20px;
    background-color: #fff;
    .module-tit {
      padding: 20px 18px;
      font-size: 28px;
      font-weight: 600;
      border-bottom: 1px solid $borderColor;
    }
    .module-det {
      padding: 0 30px;
    }
  }
  // 公共
  .line-cell {
    .tui-title {
      width: 210px;
      color: $fontColor2;
    }
    .tui-input {
      width: calc(100% - 210px);
      font-size: 28px;
    }
    .tui-placeholder {
      color: #ccc;
    }
    .phcolor {
      color: #ccc;
    }
  }
  // 今天时间选择
  .delivery-time {
    @include disFlex(center, center);
    background-color: #fff;
    padding: 20px 0;
    // border-top: 1px solid $borderColor;
    .button-com {
      padding-top: 14px;
      padding-bottom: 10px;
      margin: 0 10px;
    }
  }
  // 贺卡
  .gift-wrap {
    .gift-content {
      width: 100%;
    }
    .need-gift {
      margin-left: 14px;
      color: $fontColor2;
    }
    .gitf-textarea {
      margin-top: 40px;
    }
  }

  // 匿名派送
  .none-name-delivery {
    // padding-left: 30px;
    // padding: 26px 30px;
    // margin-top: 40px;
    margin-bottom: 20px;
    background-color: #fff;
    .none-name-text {
      margin-left: 14px;
      color: $fontColor2;
    }
  }
}
</style>