310 lines
6.9 KiB
Vue
310 lines
6.9 KiB
Vue
<template>
|
|
<layout>
|
|
<uv-navbar
|
|
:fixed="false"
|
|
:title="title"
|
|
left-arrow
|
|
@leftClick="goBack"
|
|
/>
|
|
<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-group v-model="isDefaultList">
|
|
<uv-checkbox
|
|
shape="circle"
|
|
label="设为默认地址"
|
|
name="isDefault"
|
|
labelColor="#999999"
|
|
activeColor="#EE6D46"
|
|
@change="changeDefault"
|
|
></uv-checkbox>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
<view class="form-buttons">
|
|
<uv-button
|
|
type="primary"
|
|
text="提交"
|
|
customStyle="margin-top: 10px"
|
|
@click="onSave"
|
|
></uv-button>
|
|
</view>
|
|
|
|
</layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { useMainStore } from '@/store/store'
|
|
import { getAddressAddAndEdit, getAddressDel, } from '@/api/address'
|
|
import { useRouter } from "@/hooks/useRouter";
|
|
|
|
const main = useMainStore()
|
|
const {getParams, push, goBack} = useRouter()
|
|
|
|
|
|
const areaList = ref(main.areaList)
|
|
const title = ref('')
|
|
|
|
const editId = ref('')
|
|
const defaultAddress = ref('')
|
|
|
|
const addressData = ref({
|
|
"realName": '',
|
|
"postCode": '',
|
|
"isDefault": false,
|
|
"detail": '',
|
|
"phone": '',
|
|
"cityId": '',
|
|
"city": '',
|
|
"district": '',
|
|
"province": '',
|
|
});
|
|
|
|
const isDefaultList = ref([])
|
|
const changeDefault = (props) => {
|
|
addressData.value.isDefault = props
|
|
}
|
|
const actionType = ref('')
|
|
const onSave = async () => {
|
|
if (!addressData.value.address?.cityId) {
|
|
uni.showToast({
|
|
title: "请选择收货地址",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
if (!addressData.value.detail) {
|
|
uni.showToast({
|
|
title: "请输入详细地址!",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
if (!addressData.value.realName) {
|
|
uni.showToast({
|
|
title: "请输入姓名!",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
if (!addressData.value.phone || !(/^1[34578]\d{9}$/.test(addressData.value.phone))) {
|
|
uni.showToast({
|
|
title: "请输入正确手机号!",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
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.address.cityId,
|
|
city: addressData.value.address.city,
|
|
district: addressData.value.address.district,
|
|
province: addressData.value.address.province,
|
|
}
|
|
})
|
|
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
uni.hideLoading()
|
|
main.restAddress()
|
|
if (actionType.value == 'select') {
|
|
push({url: '/pages/address/address'}, {data: {type: 'select'}})
|
|
} else {
|
|
push({url: '/pages/address/address'})
|
|
}
|
|
} catch (error) {
|
|
console.log(error, 'err')
|
|
// closeToast()
|
|
if (error.msg) {
|
|
// showFailToast(error.msg);
|
|
}
|
|
}
|
|
|
|
|
|
};
|
|
|
|
const onDelete = async () => {
|
|
getAddressDel()
|
|
main.getAddressList(1)
|
|
|
|
};
|
|
|
|
const result = (values) => {
|
|
addressData.value.address = {
|
|
province: values.province.name || '',
|
|
city: values.city.name || '',
|
|
district: values.district.name || '',
|
|
cityId: 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,
|
|
detail: data.detail,
|
|
isDefault: data.isDefault ? 1 : 0,
|
|
address: {
|
|
cityId: data.cityId,
|
|
district: data.district,
|
|
province: data.province,
|
|
city: data.city
|
|
}
|
|
}
|
|
isDefaultList.value = data.isDefault ? ['isDefault'] : [],
|
|
defaultAddress.value = {
|
|
province: {
|
|
name: data.province
|
|
},
|
|
city: {
|
|
name: data.city
|
|
},
|
|
district: {
|
|
name: data.district
|
|
}
|
|
}
|
|
})
|
|
|
|
onLoad(async (options) => {
|
|
const params = getParams(options)
|
|
let id = params.id
|
|
actionType.value = params.type
|
|
// main.restAddress()
|
|
await main.getAddressCityList()
|
|
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,
|
|
detail: data.detail,
|
|
isDefault: data.isDefault,
|
|
address: {
|
|
cityId: data.cityId,
|
|
city: data.city,
|
|
district: data.district,
|
|
province: data.province,
|
|
}
|
|
}
|
|
defaultAddress.value = {
|
|
province: {
|
|
name: data.province
|
|
},
|
|
city: {
|
|
name: data.city
|
|
},
|
|
district: {
|
|
name: data.district
|
|
}
|
|
}
|
|
isDefaultList.value = data.isDefault ? ['isDefault'] : []
|
|
} else {
|
|
title.value = '新增地址'
|
|
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.create-address {
|
|
background: #fff;
|
|
}
|
|
|
|
.form-checkbox {
|
|
padding-left: 35rpx;
|
|
}
|
|
|
|
.w-158 {
|
|
flex: 0 0 158rpx;
|
|
}
|
|
</style>
|