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

<template>
  <div class="app-delivery-module">
    <!-- 配送公共组件 -->
    <!-- 收花人 -->
    <div class="module-com">

      <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"
          type="number"
          name="receiveMobile"
          placeholder="请填写手机号"
        />
      </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.province || form.city"
        >{{ form.province + '-' + form.city }}</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.address">{{ form.address }}</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.floor"
          placeholder-class="phcolor"
		      placeholder-style="color:#ccc"
          class="tui-input"
          name="floor"
          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.bookName"
          placeholder-class="phcolor"
		      placeholder-style="color:#ccc"
          class="tui-input"
          name="bookName"
          placeholder="请填写姓名（选填）"
        />
      </tui-list-cell>

      <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"
          type="number"
          name="bookMobile"
          placeholder="请填写手机号（选填）"
        />
      </tui-list-cell>

      <tui-list-cell class="line-cell" :hover="false">
        <div class="none-name-delivery flex-center" style="padding-left:0rpx;">
          <div class="tui-title">派送方式</div>
          <checkbox-group @change="anonymityChange" style="padding-left:70rpx;">
          <checkbox class="ljd-checkbox" value="1" id="noneNameText" ></checkbox>
          <label for="noneNameText" class="none-name-text">匿名派送</label>
          </checkbox-group>
        </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"
          placeholder-style="color:#ccc"
          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.city" @change="changeAreaFn" />
  </div>
</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";
export default {
  name: "app-delivery-module",
  components: {
    AppAreaSel,
    TuiListCell,
    AppDatePicker,
    SimpleAddress,
    AppBindInfo
  },
  props: {},
  data() {
    return {
      region: [],
      showRegion: false,
      form: {
        receiveUserName: "", // 收花人姓名；到店自提的姓名
        receiveMobile: "", // 收花人手机；到店自提的电话；
        province: "", // 收花人省份
        city: "", // 收花人城市
        address: "", // 收花人城市
        floor: "", // 收花人门楼号和牌号
        fullAddress: "", // 收花人完整地址，从腾讯地图接口获取
        bookName: '', // 订花人姓名
        bookMobile: "", // 订花人手机号
        reachTime: 0, // 配送时间
        reachPeriod: "0", // 配送时段，0上午1下午2晚上
        needCard: "1", // 是否要贺卡 0不要 1要
        cardInfo: "", // 贺卡信息
        remark: "",// 备注
        anonymity:0
      },
      region: {
        latitude: 0,
        longitude: 0
      },
      // 省市联动
      cityPickerValueDefault: [0, 0]
    };
  },
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" })
  },
  watch: {
    orderShop(val) {
      console.log("val", val);
      this.form.province = val.shop.province ? val.shop.province : "";
      this.form.city = val.shop.city ? val.shop.city : "";
    }
  },
  mounted() {
    if (!this.$util.isEmpty(this.orderShop)) {
      this.form.province = this.orderShop.shop.province
        ? this.orderShop.shop.province
        : "";
      this.form.city = this.orderShop.shop.city
        ? this.orderShop.shop.city
        : "";
    }
  },
  methods: {
    selTimeFn(e) {
      this.form.reachTime = e.detail.value;
    },
    // 选择地址
    selRegionFn() {
      if (!this.form.city) {
        this.$msg("请选择城市");
        return false;
      }
      this.showRegion = true;
    },
    changeAreaFn(e) {
      console.log("changeAreaFn", e);
      this.form.address = e.title;
      this.form.fullAddress = 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.anonymity = this.form.anonymity == 1 ? 0 : 1;
    },
    // 省市联动
    openAddres() {
      this.$refs.simpleAddress.open();
    },
    onCityConfirm(e) {
      this.form.address = e.label;
      this.form.province = e.provinceName;
      this.form.city = e.cityName;
    }
  }
};
</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>