front-end/hdApp/src/admin/shop/addressAdd.vue

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

    <form @submit="formSubmit">

    <view class="module-com">

        <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" :arrow="true" @click="selRegionFn">
          <view class="tui-title">所在地址</view>
          <view class="tui-input" v-if="form.address">{{ form.address }}</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.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">
            <div class="tui-title">默认地址</div>
            <view><switch style="transform:scale(0.7,0.7)" :checked="form.default == 0 ? false : true" @change="defaultChangeFn" /></view>
          </tui-list-cell>

        <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>


        <div style="text-align:center;margin-top:10upx;">
        <button class="admin-button-com default big" style="width:230upx;margin-right:60upx;">取消</button>
            <button class="admin-button-com blue big" style="width:230upx;" formType="submit">确认</button>
        </div>

    </view>

    </form>

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

    <!-- 选择详细地址 -->
    <app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />

  </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"
import {addAddress} from "@/api/address"
export default {
  name: "app-delivery-module",
  components: {
    AppAreaSel,
    TuiListCell,
    AppDatePicker,
    SimpleAddress,
    AppBindInfo
  },
	props: {
		info: {
			type: Object,
			default: {}
		},
  },
  data() {
    return {
      fillMobile:0,
      region: [],
      showRegion: false,
      form: {
        province: "",
        city: "",
        address: "",
        showAddress:"",
        floor: "",
        fullAddress: "",
        remark: "",
        lat:'',
        long:'',
        default:0
      },
      region: {latitude: 0,longitude: 0},
      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: {
    defaultChangeFn(e) {
      this.form.default = e.detail.value ? 1 : 0;
    },
    formSubmit () {
        let that = this
        if (this.$util.isEmpty(this.form.address)){
          this.$msg('请填写所在地址')
          return false
        }
        if (this.$util.isEmpty(this.form.lat) || this.$util.isEmpty(this.form.long)){
          this.$msg('请填写所在地址')
          return false
        }
        addAddress(this.form).then(res=>{
          if(res.code == 1){
            that.$msg(res.msg)
            setTimeout(function(){
              uni.navigateBack()
            },1500)
          }
        })
    },
    selRegionFn() {
      if (!this.form.city) {
        this.$msg("请选择城市");
        return false;
      }
      this.showRegion = true;
    },
    changeAreaFn(e) {
      this.form.address = e.title;
      this.form.showAddress = e.address;
      this.form.lat = e.location.lat;
      this.form.long = e.location.lng;
    },
    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>