282 lines
9.7 KiB
Vue
282 lines
9.7 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
|
|
<template>
|
|
<view>
|
|
<view>
|
|
<navbar :title="title" custom-class='!bg-[#fff]' :leftArrow="false"></navbar>
|
|
</view>
|
|
|
|
<view>
|
|
<view>
|
|
<view class="flex items-center mx-36rpx">
|
|
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">联系人</view>
|
|
<view>
|
|
<wd-input v-model="form.contact" size="large" placeholder="请填写联系人" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
|
</view>
|
|
</view>
|
|
<view class="h-2rpx bg-#F2F2F2"></view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="flex items-center mx-36rpx">
|
|
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">电话</view>
|
|
<view>
|
|
<wd-input v-model="form.telephone" size="large" placeholder="请填写联系电话" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
|
</view>
|
|
</view>
|
|
<view class="h-2rpx bg-#F2F2F2"></view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="flex items-center mx-36rpx">
|
|
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">省市区</view>
|
|
<view class="add-address">
|
|
<wd-col-picker v-model="address" :columns="area" :column-change="columnChange" auto-complete @confirm="Add.handleConfirmAddress" placeholder="请选择省市区"> </wd-col-picker>
|
|
</view>
|
|
</view>
|
|
<view class="h-2rpx bg-#F2F2F2"></view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="flex items-center mx-36rpx">
|
|
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">地址</view>
|
|
<view>
|
|
<wd-input v-model="form.address" size="large" placeholder="请填写具体地址" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="h-12rpx bg-#F7F7F7"></view>
|
|
|
|
<view class="flex justify-between items-center mx-36rpx mt-32rpx">
|
|
<view class="text-30rpx leading-42rpx text-#303133">设为默认地址</view>
|
|
<view class="">
|
|
<wd-switch v-model="isDefaultAddress" active-color="#4C9F44"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fixed bottom-70rpx left-0 right-0">
|
|
<view
|
|
v-if="addressId === 0"
|
|
class="bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
|
|
@click="Add.handleAddAddress">
|
|
确定
|
|
</view>
|
|
|
|
<view class="flex items-center justify-between mx-30rpx" v-if="addressId > 0">
|
|
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#F6F7F8] text-#303133 rounded-8rpx mr-30rpx" @click="Add.handleDeleteAddress">删除地址</view>
|
|
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] text-#FFFFFF rounded-8rpx" @click="Add.handleAddAddress">确定</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 删除地址 -->
|
|
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useMessage } from 'wot-design-uni'
|
|
import { useColPickerData } from '@/hooks/useColPickerData'
|
|
import { addUserAddress, IAddUserAddressParams, deleteUserAddress, userAddressDetails, editUserAddress } from '@/api/user'
|
|
import { toast } from '@/utils/toast'
|
|
import { mobile } from '@/utils/test'
|
|
import { router } from '@/utils/tools'
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
// 弹出框
|
|
const message = useMessage('wd-message-box-slot')
|
|
|
|
// 页面标题
|
|
const title = ref<string>('新增地址')
|
|
|
|
// 地址id
|
|
const addressId = ref<number>(0)
|
|
|
|
// 表单信息
|
|
const form = reactive<IAddUserAddressParams>({
|
|
contact: '',
|
|
telephone: '',
|
|
province: '',
|
|
province_id: 0,
|
|
city: '',
|
|
city_id: 0,
|
|
district: '',
|
|
district_id: 0,
|
|
address: '',
|
|
is_default: 0,
|
|
id: 0
|
|
})
|
|
|
|
// 省市区数据
|
|
const { colPickerData, findChildrenByCode } = useColPickerData()
|
|
const address = ref<string[]>([])
|
|
const area = ref<any[]>([])
|
|
const columnChange = async ({ selectedItem, resolve, finish }) => {
|
|
await Add.handleSleep(0)
|
|
|
|
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
|
|
if (areaData && areaData.length) {
|
|
resolve(
|
|
areaData.map((item) => {
|
|
return {
|
|
value: item.value,
|
|
label: item.text
|
|
}
|
|
})
|
|
)
|
|
} else {
|
|
finish()
|
|
}
|
|
}
|
|
|
|
// 是否默认地址
|
|
const isDefaultAddress = ref<boolean>(false)
|
|
|
|
onLoad((args) => {
|
|
if (args.id) {
|
|
// 编辑地址
|
|
title.value = '修改地址'
|
|
addressId.value = Number(args.id)
|
|
Add.handleGetAddressDetails()
|
|
}
|
|
})
|
|
|
|
const Add = {
|
|
// 确认省市区
|
|
handleConfirmAddress: (e) => {
|
|
form.province = e.selectedItems[0]?.label || ''
|
|
form.province_id = Number(e.selectedItems[0]?.value) || 0
|
|
form.city = e.selectedItems[1]?.label || ''
|
|
form.city_id = Number(e.selectedItems[1]?.value) || 0
|
|
form.district = e.selectedItems[2]?.label || ''
|
|
form.district_id = Number(e.selectedItems[2]?.value) || 0
|
|
},
|
|
|
|
// 获取地址详情
|
|
handleGetAddressDetails: async () => {
|
|
const res = await userAddressDetails({
|
|
id: addressId.value
|
|
})
|
|
form.contact = res.address_details.contact
|
|
form.telephone = res.address_details.telephone
|
|
form.province = res.address_details.province
|
|
form.province_id = res.address_details.province_id
|
|
console.log("🚀 ~ form.province_id :", form.province_id )
|
|
form.city = res.address_details.city
|
|
form.city_id = res.address_details.city_id
|
|
form.district = res.address_details.district
|
|
form.district_id = res.address_details.district_id
|
|
form.address = res.address_details.address
|
|
form.is_default = res.address_details.is_default
|
|
isDefaultAddress.value = res.address_details.is_default === 1 ? true : false
|
|
address.value = [
|
|
String(res.address_details.province_id),
|
|
String(res.address_details.city_id),
|
|
String(res.address_details.district_id)
|
|
]
|
|
console.log("🚀 ~ address.value:", address.value)
|
|
},
|
|
|
|
// 删除地址
|
|
handleDeleteAddress: async () => {
|
|
console.log("🚀 ~ 删除地址:", message)
|
|
|
|
message.confirm({
|
|
title: '删除地址',
|
|
msg: '确定要删除该地址吗？',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
cancelButtonProps: {
|
|
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
|
},
|
|
confirmButtonProps: {
|
|
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
|
}
|
|
}).then(async (res) => {
|
|
// 点击确认按钮回调事件
|
|
await deleteUserAddress({
|
|
id: addressId.value
|
|
})
|
|
toast.info('删除成功')
|
|
uni.$emit('refreshAddressList')
|
|
router.navigateBack(500)
|
|
}).catch((res) => {
|
|
console.log("🚀 ~ res2:", res)
|
|
// 点击取消按钮回调事件
|
|
})
|
|
|
|
},
|
|
|
|
// 添加地址
|
|
handleAddAddress: async () => {
|
|
if (!form.contact) {
|
|
toast.info('请填写联系人')
|
|
return
|
|
}
|
|
|
|
if (!mobile(form.telephone)) {
|
|
toast.info('请填写正确手机号格式')
|
|
return
|
|
}
|
|
|
|
if (!form.province || !form.city || !form.district) {
|
|
toast.info('请选择省市区')
|
|
return
|
|
}
|
|
|
|
if (!form.address) {
|
|
toast.info('请填写具体地址')
|
|
return
|
|
}
|
|
|
|
form.is_default = isDefaultAddress.value ? 1 : 0
|
|
|
|
if (addressId.value > 0 ) {
|
|
// 编辑地址
|
|
form.id = addressId.value
|
|
await editUserAddress(form)
|
|
} else {
|
|
await addUserAddress(form)
|
|
}
|
|
|
|
uni.$emit('refreshAddressList')
|
|
router.navigateBack(500)
|
|
},
|
|
|
|
handleSleep: async (second: number = 1) => {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve(true)
|
|
}, 1000 * second)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.add-address {
|
|
:deep() {
|
|
.wd-cell {
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|