cxb-minapp-vue3/src/pages/user/address/edit.vue

<template>
  <nut-form :model-value="formData" ref="ruleForm">
    <nut-form-item label="联系人" prop="name"
                   required
                   :rules="[{ required: true, message: '请填写姓名' }]">
      <nut-input class="nut-input-text" @blur="customBlurValidate('name')"
                 v-model="formData.name"
                 placeholder="请输入姓名" type="text"/>
    </nut-form-item>

    <nut-form-item label="手机号码" prop="phone" required :rules="[
      { required: true, message: '请填写联系电话' },
      { validator: asyncValidator, message: '电话格式不正确' }
    ]">
      <nut-input class="nut-input-text" v-model="formData.phone" placeholder="请填写手机号码" type="text"/>
    </nut-form-item>
    <nut-form-item label="收货地址"
                   required
                   prop="address"
                   :rules="[{ required: true, message: '请选择收货地址' }]"
    >
      <div class="nut-input-text"
           @click="addressData.visible = true"
      >
        {{ formData.address.toString() === '' ? '省市区县、省镇等' : formData.address.toString() }}
      </div>


      <nut-cascader
          title="地址选择"
          v-model:visible="addressData.visible"
          v-model="formData.address"
          @change="change"
          @pathChange="pathChange"
          valueKey="name"
          text-key="name"
          labelKey="id"
          childrenKey="children"
          :options="addressData.options"
          lazy
          :lazyLoad="addressData.lazyLoad"
      ></nut-cascader>
    </nut-form-item>
    <nut-form-item label="详细地址" prop="detail" required :rules="[{ required: true, message: '请填写详细地址' }]">
      <nut-input class="nut-input-text" v-model="formData.detail" placeholder="街道、楼牌号等" type="text"/>
    </nut-form-item>
    <div class="p-4">
      <div class="flex  items-center justify-between">
        <div class="flex flex-col gap-2">
          <div>设置为默认地址</div>
          <div class="text-xs text-gray">提醒：下单会优先使用该地址</div>
        </div>
        <nut-switch v-model="formData.is_default"></nut-switch>

      </div>
    </div>

    <div class="fixed bottom-0 p-safe w-full ">
      <div class="px-3 flex flex-col gap-3">
        <nut-button block  type="primary" @click="submit">保存</nut-button>
        <nut-button block type="default" @click="handleDelete">删除</nut-button>
      </div>
    </div>
  </nut-form>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import {decodeBase64} from "~/utils/http/helper";
// import {FormItemRuleWithoutValidator} from "uniapp-nutui";
import {addressNewCreate, deleteAddress, getCityNewFiveList} from "~/apis/user";
import type {AddressModel} from "~/apis/model/address.model";
import type {FormItemRuleWithoutValidator} from "nutui-uniapp";
import {useAddressStore} from "~/stores/addressStore";
const addressStore = useAddressStore()

const formData = reactive({
  uid: '',
  address_id: '',
  name: '',
  detail: '',
  phone: '',
  address: [],
  is_default: false,
  // village: '',
  // village_id: '',
  code_list: ''
});

const basicData = reactive({
  addressObject: [],
  isDefaultVal: true,
  province: '',
  provinceId: '',
  city: '',
  cityId: '',
  country: '',
  countryId: '',
  // 街道
  // village: '',
  // villageId: '',
  // code_list: ''
});


onLoad((options) => {
  // console.log(options.data)
  // const base64Data = 'eyJhZGRyZXNzX2lkIjoiMjQzIiwidWlkIjoiOTkyOSIsInJlYWxfbmFtZSI6IkhFTExPIiwicGhvbmUiOiIxMzQ4ODY4OTg4NSIsInByb3ZpbmNlIjoi5YyX5LqsIiwiY2l0eSI6IuWMl+S6rOW4giIsImNpdHlfaWQiOiIyIiwiZGlzdHJpY3QiOiLpobrkuYnljLoiLCJ2aWxsYWdlIjoi5ruo5rKz5bCP5Yy656ys5LiA56S+5Yy65bGF5rCR5aeU5ZGY5LyaIiwidmlsbGFnZV9pZCI6Ijc2NjczIiwiZGV0YWlsIjoiMTExMSIsInBvc3RfY29kZSI6IjAiLCJsb25naXR1ZGUiOiIwIiwibGF0aXR1ZGUiOiIwIiwiaXNfZGVmYXVsdCI6IjEiLCJpc19kZWwiOiIwIiwiY3JlYXRlX3RpbWUiOiIyMDIzLTA5LTA0IDE4OjI3OjAzIiwiY29kZV9saXN0IjoiMSw2NzQ0OSwzNSw0OTMifQ'
  // if (options.data) {j
  const data: AddressModel = JSON.parse(decodeBase64(options.data))
  // const data: AddressModel = JSON.parse(decodeBase64(base64Data))
  if (data) {
    formData.address_id = data.address_id
    formData.uid = data.uid
    formData.name = data.real_name
    formData.phone = data.phone
    formData.detail = data.detail
    // console.log(data.province)
    formData.address = [data.province, data.city, data.district, data.village]
    // console.log(formData.address)
    formData.is_default = data.is_default === '1'
    formData.code_list = data.code_list
    formData.village = data.village
    formData.village_id = data.village_id
  }
  // }
})
const addressData = reactive({
  visible: false,
  // value: ['北京'],
  options: [
    // { value: '北京', text: '北京', id: 1, pid: null },
  ],
  lazyLoad(node: any, resolve: (children: any) => void) {
    // const {pid, id} = node
    getCityNewFiveList(node.id).then(res => {
      resolve(res)
    })
  }
})
const customBlurValidate = (prop: string) => {
  ruleForm.value.validate(prop).then(({valid, errors}: any) => {
    if (valid) {
      console.log('success', formData);

    } else {
      console.log('error submit!!', errors);
    }
  });
};

// 函数校验
const customValidator = (val: string) => /^\d+$/.test(val);
const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
  return (rule?.reg as RegExp).test(val);
};
const nameLengthValidator = (val: string) => val?.length >= 2;
// Promise 异步校验
const asyncValidator = (val: string) => {
  return new Promise((resolve) => {
    // console.log('模拟异步验证中...');
    setTimeout(() => {
      // console.log('验证完成');
      resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
    }, 1000);
  });
};
const ruleForm = ref<any>(null);

function change(...args: any) {
  basicData.addressObject = args[1]
}

function pathChange(...args: any) {
  console.log('pathChange', ...args);
}


const submit = () => {
  ruleForm.value.validate().then(({valid, errors}: any) => {
    if (valid) {
      console.log('success', formData);
      const province = formData.address[0]
      const city = formData.address[1]
      const district = formData.address[2]
      // const village = formData.address[3]

      let provinceId = ''
      let cityId = ''
      let districtId = ''
      let countryId = ''

      let villageId = ''
      let village = ''
      // const province =
      // let code_list = ''
      if (basicData.addressObject.length > 0) {
        console.log(basicData.addressObject)
        provinceId = basicData.addressObject[0].id
        cityId = basicData.addressObject[1].id
        districtId = basicData.addressObject[2].id
        countryId = basicData.addressObject[3].id
        if (formData.address[3]) {
          // codeList = mProvinceId + "," + mCityId + "," + mCountyId + "," + mVillageId;
          formData.code_list = provinceId + ',' + cityId + ',' + districtId + ',' + countryId
        } else {
          formData.code_list = provinceId + ',' + cityId + ',' + districtId
        }
        if (formData.address[4]) {
          formData.viilage_id = basicData.addressObject[4].id
          formData.village = basicData.addressObject[4].value
        }
      }
      addressNewCreate({
        province,
        city,
        district,
        is_default: formData.is_default ? '1' : '0',
        phone: formData.phone,
        real_name: formData.name,
        detail: formData.detail,
        code_list: formData.code_list,
        // city_id: '2',
        city_id: cityId,
        village_id: formData.village_id,
        village: formData.village,
        address_id: formData.address_id
      }).then(res => {
        // console.log(res)
        if (res) {
          uni.showToast({
            title: '保存成功'
          })

          addressStore.setCurrentAddressId(res.address_id)
          setTimeout(() => {
          //   uni.redirectTo({
          //     url: '/pages/user/address/index'
          //   })
            uni.navigateBack()
          }, 500)
        }
      }).catch(message => {
        console.log(message)
        uni.showToast({
          icon: "none",
          title: message
        })
      })
      // formData.address
      console.log(formData.address.length)
    } else {
      console.log('error submit!!', errors);
    }
  });
};

function handleDelete() {
  if (formData && formData.address_id) {
    uni.showModal({
      title: '温馨提示',
      content: '是否删除该地址',
      success: function (res) {
        if (res.confirm) {
          deleteAddress(formData.address_id).then(res => {
              uni.showToast({
                title: '删除成功',
                icon: 'none'
              })
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/user/address/index'
                })
              }, 500)
          }).catch(error => {
            uni.showToast({
              title: error,
              icon: 'none'
            })
          })

        }
      }
    })
  }
}
</script>

<route lang="yaml">
style:
  navigationBarTitleText: 收货地址
</route>