city-gather/src/subPack-common/editAddress/index.vue

<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'common-editAddress',
  islogin: true,
  style: {
    navigationBarTitleText: '编辑新增收获地址',
    navigationStyle: 'custom',
  },
})

const route = useRoute()
const title = computed(() => {
  if (route.query?.type === '1')
    return '新增收获地址'
  return '编辑收获地址'
})

const modelForm = ref<Api.addressList>({
  consigneeName: '',
  consigneeMobile: '',
  detailAddress: '',
  defaulted: 1,
  latitude: 0,
  longitude: 0,
  province: '',
  city: '',
  id: 0,
})
function handleSelectAddress() {
  uni.chooseLocation({
    success: (res) => {
      modelForm.value.latitude = res.latitude
      modelForm.value.longitude = res.longitude
      modelForm.value.province = res.address
      modelForm.value.city = res.name
      console.log(modelForm.value, '地址')
    },
    fail: (e) => {
      console.log('获取地址失败', e)
    },
  })
}
async function getData() {
  const res = await Apis.sys.addressesDetail({ pathParams: { addressId: Number(route.query?.id) } })
  modelForm.value = res
}
onMounted(() => {
  if (route.query?.type === '2') {
    getData()
  }
})
async function handleSubmit() {
  if (!modelForm.value.consigneeName) {
    useGlobalToast().show('请输入收货人姓名')
    return
  }
  if (!modelForm.value.consigneeMobile) {
    useGlobalToast().show('请输入手机号码')
    return
  }
  if (!modelForm.value.province) {
    useGlobalToast().show('请选择所在地区')
    return
  }
  if (!modelForm.value.detailAddress) {
    useGlobalToast().show('请输入详细地址')
  }
  if (Number(route.query?.type) === 1) {
    await Apis.sys.Addaddresses({ data: modelForm.value })

    useGlobalToast().show({ msg: '添加成功' })
  }
  else {
    await Apis.sys.updateAddresses({ pathParams: modelForm.value.id, data: modelForm.value })
    useGlobalToast().show({ msg: '修改成功' })
  }
  setTimeout(() => {
    router.back()
  }, 2000)
}
async function handleDel() {
  useGlobalMessage().confirm({
    title: '删除地址',
    msg: '确定要删除该地址吗？',
    success: async () => {
      await Apis.sys.deleteAddresses({ pathParams: { ids: route.query?.id } })
      useUserStore().getSelectedAddress()
      router.back()
    },
  })
}
</script>

<template>
  <view>
    <wd-navbar
      :title="title" :bordered="false" :z-index="99"

      safe-area-inset-top left-arrow placeholder fixed @click-left="router.back()"
    />
    <view class="px24rpx py20rpx">
      <view class="rounded-16rpx bg-white p24rpx">
        <view class="flex items-center">
          <view class="mr40rpx w112rpx flex-shrink-0 text-28rpx">
            收货人
          </view>
          <view class="flex-1">
            <wd-input v-model="modelForm.consigneeName" no-border placeholder="姓名" />
          </view>
        </view>
        <view class="mt28rpx flex items-center">
          <view class="mr40rpx w112rpx flex-shrink-0 text-28rpx">
            手机号码
          </view>
          <view class="flex-1">
            <wd-input v-model="modelForm.consigneeMobile" :maxlength="11" no-border placeholder="11位手机号码" />
          </view>
        </view>
        <view class="mt28rpx flex items-center">
          <view class="mr40rpx w112rpx flex-shrink-0 text-28rpx">
            所在地区
          </view>
          <view class="flex flex-1 items-center justify-between" @click="handleSelectAddress">
            <view v-if="!modelForm.province" class="text-28rpx text-[var(--them-color)]">
              点击选择地址
            </view>
            <view v-else class="text-24rpx">
              <view class="font-semibold">
                {{ modelForm.province }}
              </view>
              <view class="mt12rpx text-#AAAAAA">
                {{ modelForm.city }}
              </view>
            </view>
            <wd-icon name="arrow-right" size="22px" color="#aaa" />
          </view>
        </view>
        <view class="mt28rpx flex items-center">
          <view class="mr40rpx w112rpx flex-shrink-0 text-28rpx">
            详细地址
          </view>
          <view class="flex-1">
            <wd-input v-model="modelForm.detailAddress" no-border placeholder="如楼号/单元号/门牌号" />
          </view>
        </view>
      </view>
      <view class="mt84rpx px100rpx">
        <wd-button type="primary" block size="large" @click="handleSubmit">
          保存收货地址
        </wd-button>
        <view v-if="title == '编辑收获地址'" class="mt24rpx">
          <wd-button plain block size="large" @click="handleDel">
            删除收获地址
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>

</style>