yshop-pro-uniapp/pages/createAddress/createAddress.vue

<template>
  <layout>
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <view class="create-address">

      <view class="list noBorder">
        <view class="list-main">
          <view class="list-label w-158">
            收货地址
          </view>
          <view class="list-content">
            <city-select
              ref="cityselect"
              :defaultValue="defaultAddress"
              @callback="result"
              :items="main.areaList"
            ></city-select>

          </view>
        </view>
      </view>
      <view class="list">
        <view class="list-main">
          <view class="list-label w-158">
            详细地址
          </view>
          <view class="list-content">
            <input
              type="text"
              placeholder="请输入详细地址"
              v-model="addressData.detail"
            >

          </view>
        </view>
      </view>
      <view class="list">
        <view class="list-main">
          <view class="list-label w-158">
            姓名
          </view>
          <view class="list-content">
            <input
              type="text"
              placeholder="请输入姓名"
              v-model="addressData.realName"
            >

          </view>
        </view>
      </view>
      <view class="list">
        <view class="list-main">
          <view class="list-label w-158">
            电话
          </view>
          <view class="list-content">
            <input
              type="number"
              placeholder="请输入电话"
              v-model="addressData.phone"
            >
          </view>
        </view>
      </view>
    </view>
    <view class="form-checkbox">
      <uv-checkbox
        shape="circle"
        label="设为默认地址"
        name="isDefault"
        labelColor="#999999"
        activeColor="#EE6D46"
        v-model="addressData.isDefault"
      ></uv-checkbox>
    </view>
    <div class="form-buttons">

      <uv-button
        type="primary"
        text="提交"
        customStyle="margin-top: 10px"
        @click="onSave"
      ></uv-button>
    </div>

  </layout>
</template>

<script setup>
import { ref, watch } from 'vue'
import { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import {
  getAddressDel,
  getAddressDefault,
  getAddressAddAndEdit,
  getAddressList,
  getAddressCityList,
} from '@/api/address'
// import { closeToast, showLoadingToast, showToast, showSuccessToast, showFailToast } from 'vant'

const main = useMainStore()

const areaList = ref(main.areaList)
const title = ref('')

const editId = ref('')
const defaultAddress = ref('')

const addressData = ref({
  "realName": '',
  "postCode": '',
  "isDefault": '',
  "detail": '',
  "phone": '',
  "cityId": '',
  "city": '',
  "district": '',
  "province": '',
});


const onSave = async () => {

  uni.showLoading({
    title: '保存中',
    mask: true,
  })


  try {
    let res = await getAddressAddAndEdit({
      id: editId.value,
      realName: addressData.value.realName,
      postCode: addressData.value.postCode,
      isDefault: addressData.value.isDefault ? 1 : 0,
      detail: addressData.value.detail,
      phone: addressData.value.phone,
      address: {
        cityId: addressData.value.cityId,
        city: addressData.value.city,
        district: addressData.value.district,
        province: addressData.value.province,
      }
    })

    uni.showToast({
      title: "保存成功",
      icon: "none",
      duration: 2000
    });
    uni.hideLoading()
    main.getAddressList()

  } catch (error) {
    // closeToast()
    if (error.msg) {
      // showFailToast(error.msg);
    }
  }


};

const onDelete = async () => {
  getAddressDel()
  main.getAddressList()

};

const result = (values) => {
  console.log(this)
  console.log(values)
  addressData.value.address = {
    province: values.province.name || '',
    city: values.city.name || '',
    district: values.district.name || '',
    city_id: values.city.id,
  }
}

watch(() => main.areaList, (next) => {
  areaList.value = next
})

watch(() => main.address, (next) => {
  let data = next.filter(item => item.id == editId.value)[0]
  if (!data) return
  addressData.value = {
    realName: data.realName,
    phone: data.phone,
    province: data.province,
    city: data.city,
    district: data.district,
    detail: data.detail,
    cityId: data.cityId,
    isDefault: data.isDefault,
  }
  defaultAddress.value = {
    province: {
      name: data.province
    },
    city: {
      name: data.city
    },
    district: {
      name: data.district
    }
  }
})

onLoad((option) => {
  const { id } = option

  main.getAddressCityList()
  main.getAddressList()

  if (id) {
    editId.value = id
    title.value = '编辑地址'
    let data = main.address.filter(item => item.id == id)[0]
    if (!data) return
    addressData.value = {
      realName: data.realName,
      phone: data.phone,
      province: data.province,
      city: data.city,
      county: data.county,
      detail: data.detail,
      cityId: data.cityId,
      isDefault: data.isDefault,
    }
    defaultAddress.value = {
      province: {
        name: data.province
      },
      city: {
        name: data.city
      },
      district: {
        name: data.district
      }
    }

  } else {
    title.value = '新增地址'

  }
})

</script>

<style lang="less">
.create-address {
  background: #fff;
}

.w-158 {
  flex: 0 0 158rpx;
}
</style>