frontend-app/pages/mine_package/mine_address_add/mine_address_add.vue

<template>
  <view class="address_add_warp">
    <Header
      :leftTitle="$t('address.add.title')"
      left-path-type="navigateTo"
      :leftPath="leftPath"
    />
    <view class="address_form">
      <view class="add_form_item add_form_item_but">
        <view class="add_form_title">收货人</view>
        <up-input
          placeholder="收货人"
          border="surround"
          v-model="form.name"
          :customStyle="{
            border: '0rpx',
          }"
        ></up-input>
      </view>
      <view class="add_form_item add_form_item_but">
        <view class="add_form_title">手机号码</view>
        <up-input
          placeholder="请填写收货人手机号"
          border="surround"
          v-model="form.mobile"
          :customStyle="{
            border: '0rpx',
          }"
          type="number"
        ></up-input>
      </view>
      <view class="add_form_item add_form_item_but">
        <view class="add_form_title">所在地区</view>
        <view class="region_warp" @click="regionShowCheck(true)">
          <view style="color: #808080; margin-left: 22rpx; font-size: 28rpx">{{
            (form.regionStr && form.regionStr.join("/")) || "所在地区"
          }}</view>
          <up-image
            src="/static/common/right_soild.png"
            width="14"
            height="14"
            bgColor="#f1f6ff00"
          ></up-image>
        </view>
      </view>
      <view class="add_form_item">
        <view class="add_form_title">详细地址</view>
        <up-input
          placeholder="门牌号、小区、楼栋号、单元室等"
          border="surround"
          v-model="form.address"
          :customStyle="{
            border: '0rpx',
            height: '100rpx',
          }"
        ></up-input>
      </view>
    </view>
    <!-- <view class="address_default">
			<view class="title">设为默认地址</view>
			<up-switch
			  v-model="form.isDefault"
			  activeColor="#FF7C41"
			  size="20"
			>
			</up-switch>
		</view> -->
    <view class="add_but" @click="addAddress"> 保存地址 </view>
    <up-toast ref="uToastRef"></up-toast>
    <up-picker
      :show="regionShow"
      ref="uPickerRef"
      :columns="regionColumns"
      @confirm="regionConfirm"
      :loading="regionLoading"
      @change="regionChange"
      keyName="label"
      itemHeight="34"
      @cancel="regionShow = false"
      @close="regionShow = false"
    ></up-picker>
  </view>
</template>

<script>
import { editAddress, getAddressDetail } from "@/api/address.js";
import { getCascadeRegion } from "@/api/common.js";
import Header from "@/components/header.vue";

export default {
  components: { Header },
  data() {
    return {
      form: {
        id: 0,
        name: null, // 收货人
        mobile: null, // 手机号码
        regionStr: null, // 所属地区
        countryId: null, // 国家ID
        provinceId: null, // 省份ID
        cityId: null, // 城市ID
        areaId: null, // 区域ID
        townshipId: null, // 街道ID
        address: null, // 详细地址
      },
      regionShow: false,
      regionColumns: [],
      regionLoading: false,
      // leftPath: "/pages/mine_package/mine_address/mine_address",
      leftPath: "",
    };
  },
  onLoad(option) {
    const id = option.id;
    const detail = option.detail;
    if (id && id !== 0) {
      this.getById(id);
    }
    const ids = option.ids;
    if (ids && ids !== 0) {
      this.leftPath =
        "/pages/order_package/order_submit/order_submit?ids=" +
        ids +
        "&addressShow=true";
    } else if (detail) {
      this.leftPath = "";
    } else {
      this.leftPath = "/pages/mine_package/mine_address/mine_address";
    }
  },
  methods: {
    /**
     * 用作编辑
     */
    async getById(id) {
      const parasm = {
        id,
      };
      const resp = await getAddressDetail(parasm);
      if (resp && resp.bizcode === 100) {
        const data = resp.data;

        this.form.id = id;
        this.form.name = data.name; // 收货人
        this.form.mobile = data.phone; // 手机号码
        this.form.countryId = data.countryId; // 国家ID
        this.form.provinceId = data.provinceId; // 省份ID
        this.form.cityId = data.cityId; // 城市ID
        this.form.areaId = data.areaId; // 区域ID
        this.form.townshipId = data.townshipId; // 街道ID
        this.form.address = data.address; //

        const regionStr = [];
        if (data.countryName) {
          regionStr.push(data.countryName);
        }
        if (data.provinceName) {
          regionStr.push(data.provinceName);
        }
        if (data.cityName) {
          regionStr.push(data.cityName);
        }
        if (data.areaName) {
          regionStr.push(data.areaName);
        }
        if (data.townshipName) {
          regionStr.push(data.townshipName);
        }

        this.form.regionStr = regionStr; // 所属地区
      }
    },

    // 选择地址的弹框
    async regionShowCheck(status) {
      if (status) {
        const nation = await this.getRegion(0);
        const province =
          nation && nation.length !== 0
            ? await this.getRegion(nation[0].id)
            : [];
        const city =
          province && province.length !== 0
            ? await this.getRegion(province[0].id)
            : [];
        const area =
          city && city.length !== 0 ? await this.getRegion(city[0].id) : [];
        console.log("选择地址的弹框", nation, province, city, area, status);
        this.regionColumns = [nation, province, city, area];
      } else {
        this.regionColumns = [[], [], [], []];
      }
      this.regionShow = status;
    },
    // 数据交互
    async getRegion(pId) {
      this.regionLoading = true;
      const params = {
        parentId: pId,
      };
      const resp = await getCascadeRegion(params);
      const arrOption = [];
      if (resp.bizcode === 100) {
        const data = resp.data;
        if (data && data.length !== 0) {
          data.map((item) => {
            arrOption.push({
              id: item.id,
              label: item.name,
              pId: pId,
            });
          });
        }
      }
      this.regionLoading = false;
      return arrOption;
    },
    // 地区改变
    async regionChange(e) {
      const { columnIndex, index, picker } = e;
      const selectData = this.regionColumns[columnIndex][index];
      const resultData = await this.getRegion(selectData.id);
      if (resultData && resultData.length !== 0) {
        const index = columnIndex + 1;
        this.regionColumns[index] = resultData;
      }
    },

    // 提交地址
    regionConfirm(e) {
      const { columnIndex, value, values, index } = e;
      const regionStr = [];
      const regionId = [];
      value.map((item) => {
        if (item) {
          regionStr.push(item.label);
          regionId.push(item.id);
        }
      });
      console.log("提交地址--1", value);
      this.form.regionStr = regionStr;
      if (regionId && regionId.length !== 0) {
        this.form.countryId = regionId[0] ? regionId[0] : null;
        this.form.provinceId = regionId[1] ? regionId[1] : null;
        this.form.cityId = regionId[2] ? regionId[2] : null;
        this.form.areaId = regionId[3] ? regionId[3] : null;
        this.form.townshipId = regionId[4] ? regionId[4] : null;
      }
	  
	  
      this.regionShowCheck(false);
    },

    // 添加地址
    async addAddress() {
      const params = {
        ...this.form,
      };
      if (!params.name) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入收货人",
        });
        return;
      }
      if (!params.mobile) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入收货人手机号",
        });
        return;
      }
      if (!params.regionStr) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请选择所在地区",
        });
        return;
      }
      if (!params.address) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入详细地址",
        });
        return;
      }
      if (!params.id || params.id === 0) {
        delete params.id;
      }
      if (!params.townshipId || params.townshipId === 0) {
        delete params.townshipId;
      }
      if (!params.areaId || params.areaId === 0) {
        delete params.areaId;
      }
      if (!params.cityId || params.cityId === 0) {
        delete params.cityId;
      }
      if (!params.provinceId || params.provinceId === 0) {
        delete params.provinceId;
      }
      if (!params.countryId || params.countryId === 0) {
        delete params.countryId;
      }
	  
      delete params.regionStr;
	  if(params.countryId != 47021){
		  this.$refs.uToastRef.show({
		    type: "error",
		    message: '选择地址错误'
		  });
		  return;
	  }
      const res = await editAddress(params);
      if (res && res.bizcode === 100) {
        this.$refs.uToastRef.show({
          type: "success",
          message: params.id && params.id !== 0 ? "修改成功" : "添加成功",
        });
        const leftPath = this.leftPath;
        console.log("参数--111-", leftPath);

        setTimeout(() => {
          if (leftPath) {
            uni.navigateTo({
              url: leftPath,
            });
          } else {
            uni.navigateBack();
          }
        }, 2000);
      }
    },
  },
};
</script>

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