products/uni-shop/pages/add-address/add-address.vue

<template>
  <v-header :title="item.title" backgroundColor="#f8f9fb">
    <view class="add-address-container flex">

      <view class="add-address-group">
        <view
            v-for="(item,index) in inputData"
            :key="index"
            class="row aCenter address-item"
        >
          <view class="address-label">{{item.label}}</view>
          <view class="flex-all-1 overflow">
            <view class="screen_all aEnd" v-if="item.component==='switch'">
              <switch @change="switchChangeValue($event,item)" :checked="item.value" color="#41AE3C"></switch>
            </view>
            <address-picker @change="changeAddress($event,item)" :value="item.labelValue" v-else-if="item.component==='address'">
              <view class="row aCenter">
                <view class="flex-all-1 overflow">
                  <view class="line-1 address-input"
                    :class="{
                      'address-placeholder': !item.value
                    }"
                  >{{item.valueFormat || item.placeholder}}</view>
                </view>
                <text class="iconfont iconfont-more address-more"></text>
              </view>
            </address-picker>
            <input v-else v-model="item.value" :type="item.type || 'text'" :maxlength="item.maxLength" :placeholder="item.placeholder" class="address-input" placeholder-class="address-placeholder" />
          </view>
        </view>
      </view>


      <view class="flex-all-1"></view>

      <view class="button-container center">
        <view v-if="item.delete" @click="deleteAddress" class="add-address-button add-address-button-delete center">删除地址</view>
        <view @click="submit" class="add-address-button center">{{item.button}}</view>
      </view>

    </view>
  </v-header>
</template>

<script>
import vHeader from '../../components/v-header/main';
import inputData from "./data/input";
import addressPicker from '../../components/address-picker/main';
import params from '@/mixins/params';
import typeData from './data/type';
import test from '@/utils/test/index';
import notice from '@/utils/notice/index';
import modal from '@/utils/tool/modal';
import globalMixins from '@/mixins/global';
export default {

  data(){
    return {
      inputData: inputData(),
      item:{}
    }
  },

  methods:{
    changeAddress(item,cItem){
      cItem.value = item.code;
      cItem.labelValue = item.value;
      this.$set(cItem,'valueFormat',cItem.labelValue.join(''))
    },

    switchChangeValue(item,cItem){
      cItem.value = item.detail.value;
    },

    submit(){

      if (this.submitLoading) return;

      test.verificationPromise(this.inputData,true).then((data)=>{

        /* 设置地址 */
        let useAddressValue = this.inputData[2].labelValue;
        data.province_name = useAddressValue[0];
        data.city_name = useAddressValue[1];
        data.area_name = useAddressValue[2];
        data.city_id = data.province_id[1];
        data.area_id = data.province_id[2];
        data.province_id = data.province_id[0];
        // 设置是否默认
        data.is_default = data.is_default ? 1 :0;

        if (this.$params.type === 'save') {
          data.address_id = this.$params.id;
        }

        let requestData = data;

        return this.$request({
          url:this.$params.type ==='save' ? 'address/editAddress' :'address/addAddress',
          token:true,
          data,
          loading:'处理中',
          message:2,
          failMessage:true,
          next:({status}) => this.submitLoading = status
        }).then((data)=>{

          if (data.isSuccess) {

            if (this.$params.type !=='save') {
              requestData.id = data.data.id;
            } else {
              requestData.id = requestData.address_id;
              delete requestData.address_id;
            }

            notice.trigger('address',{
              [this.$params.type !=='save'?'add':'update']:true,
              item:requestData,
              toast:true,
              msg: data.msg
            });

            // 返回上一页
            return this.$router.navigateBack();

          }

        });

      });
    },

    deleteAddress(){
      if (this.submitLoading && !this.$params.id) return;

      modal.confirm({
        title:'是否删除此收货地址?',
        confirmText:'删除',
        confirmColor:'#FC3538',
        confirm:()=>{
          return this.$request({
            url:'address/delAddress',
            token:true,
            data:{
              address_id: this.$params.id
            },
            loading:'删除中',
            message:2,
            failMessage:true,
            next:({status}) => this.submitLoading = status
          }).then((data)=>{
            if (data.isSuccess) {
              notice.trigger('address',{
                delete:true,
                id:this.$params.id,
                toast:true,
                msg: data.msg
              });

              // 返回上一页
              return this.$router.navigateBack();
            }
          })
        }
      });

    }
  },

  mixins:[params,globalMixins],

  components:{
    vHeader,
    addressPicker
  },

  onLoad(){
    this.item = typeData[this.$params.type] || typeData.add;
    if (this.$params.type === 'save') {
      this.inputData = inputData(this.$memoryParams.item);
    }
  }
}
</script>

<style src="./style.scss" scoped lang="scss"></style>