fix: 优化提交订单页面js警告，充值订单跳转bug以及其他bug。refactor: 重构地址选择
This commit is contained in:
黄少君
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="goBack"
|
||||
/>
|
||||
<view>
|
||||
<Header>{{ title }}</Header>
|
||||
<view class="create-address">
|
||||
|
||||
<view class="list noBorder">
|
||||
<view class="list-main">
|
||||
<view class="list-label w-158">
|
||||
@ -15,15 +9,15 @@
|
||||
</view>
|
||||
<view
|
||||
class="list-content"
|
||||
@click="handleChooseAddress"
|
||||
@click="openAddressSelect"
|
||||
>
|
||||
<template v-if="addressData.address.cityId">
|
||||
{{ addressData.address.province }} {{ addressData.address.city }} {{ addressData.address.district }}
|
||||
<template v-if="form.address.cityId">
|
||||
{{ form.address.province }} {{ form.address.city }} {{ form.address.district }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="chooise">
|
||||
点击选择
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
<span class="choose">
|
||||
点击选择
|
||||
<uv-icon name="arrow-right" />
|
||||
</span>
|
||||
</template>
|
||||
</view>
|
||||
@ -38,7 +32,7 @@
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入详细地址"
|
||||
v-model="addressData.detail"
|
||||
v-model="form.detail"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@ -52,7 +46,7 @@
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入姓名"
|
||||
v-model="addressData.realName"
|
||||
v-model="form.realName"
|
||||
/>
|
||||
|
||||
</view>
|
||||
@ -68,23 +62,21 @@
|
||||
type="tel"
|
||||
placeholder="请输入电话"
|
||||
maxlength="11"
|
||||
v-model="addressData.phone"
|
||||
@input="phoneInput"
|
||||
v-model="form.phone"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-checkbox">
|
||||
<uv-checkbox-group v-model="isDefaultList">
|
||||
<uv-checkbox-group v-model="defaultAddress">
|
||||
<uv-checkbox
|
||||
shape="circle"
|
||||
label="设为默认地址"
|
||||
name="isDefault"
|
||||
labelColor="#999999"
|
||||
activeColor="#EE6D46"
|
||||
@change="changeDefault"
|
||||
></uv-checkbox>
|
||||
/>
|
||||
</uv-checkbox-group>
|
||||
</view>
|
||||
<view class="form-buttons">
|
||||
@ -92,38 +84,41 @@
|
||||
type="primary"
|
||||
text="提交"
|
||||
customStyle="margin-top: 10px"
|
||||
@click="onSave"
|
||||
></uv-button>
|
||||
@click="submit"
|
||||
/>
|
||||
</view>
|
||||
<uv-picker
|
||||
ref="addressPickerRef"
|
||||
:columns="columns"
|
||||
keyName="name"
|
||||
@change="handlePickerChange"
|
||||
@confirm="handlePickerConfirm"
|
||||
></uv-picker>
|
||||
</layout>
|
||||
<AddressSelect
|
||||
ref="addressSelectRef"
|
||||
@confirm="addressSelectConfirm" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
|
||||
import { computed, onMounted, ref, unref, } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useMainStore } from '@/store/modules/useMainStore'
|
||||
import { getAddressAddAndEdit, getAddressDel, } from '@/api/address'
|
||||
import { getAddressAddAndEdit } from '@/api/address'
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
import { storeToRefs } from "pinia";
|
||||
import UvPicker from "@/uni_modules/uv-picker/components/uv-picker/uv-picker.vue";
|
||||
import Header from "@/components/Header/index.vue";
|
||||
import UvCheckboxGroup from "@/uni_modules/uv-checkbox/components/uv-checkbox-group/uv-checkbox-group.vue";
|
||||
import UvCheckbox from "@/uni_modules/uv-checkbox/components/uv-checkbox/uv-checkbox.vue";
|
||||
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
|
||||
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
|
||||
import AddressSelect from '@/components/AddressSelect/index.vue'
|
||||
import { useInterface } from "@/hooks/useInterface";
|
||||
import { checkPhone } from "@/utils/utils";
|
||||
|
||||
const main = useMainStore()
|
||||
// ========================== hooks ================================================
|
||||
const {toast} = useInterface();
|
||||
const {getParams, push, goBack} = useRouter()
|
||||
|
||||
const {areaList, address} = storeToRefs(main)
|
||||
// const areaList = ref(main.areaList)
|
||||
const title = ref('')
|
||||
const title = computed(() => form.value.id ? '编辑地址' : '添加地址')
|
||||
const defaultAddress = ref([]) // 是否为默认地址 ['isDefault']默认 []非默认
|
||||
const actionType = ref(undefined) // 是否是选择地址
|
||||
|
||||
const editId = ref('')
|
||||
|
||||
const addressData = ref({
|
||||
// =========================== 表单相关 ==========================================
|
||||
// 表单
|
||||
const form = ref({
|
||||
id: undefined,
|
||||
realName: undefined,
|
||||
phone: undefined,
|
||||
detail: undefined,
|
||||
@ -136,209 +131,108 @@ const addressData = ref({
|
||||
}
|
||||
});
|
||||
|
||||
const isDefaultList = ref([])
|
||||
const changeDefault = (props) => {
|
||||
addressData.value.isDefault = props
|
||||
/**
|
||||
* 校验表单
|
||||
* @param form
|
||||
* @return {boolean}
|
||||
*/
|
||||
function checkForm(form) {
|
||||
if (!form.address?.cityId) {
|
||||
toast?.({title: "请选择收货地址"})
|
||||
return false
|
||||
}
|
||||
if (!form.detail) {
|
||||
toast?.({title: "请输入详细地址"})
|
||||
return false
|
||||
}
|
||||
if (!form.realName) {
|
||||
toast?.({title: "请输入姓名"})
|
||||
return false
|
||||
}
|
||||
if (!checkPhone(form.phone)) {
|
||||
toast?.({title: "请输入正确手机号"})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
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,
|
||||
})
|
||||
|
||||
const submitLoading = ref(false) // 是否正在提交
|
||||
|
||||
/**
|
||||
* 提交表单
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
async function submit() {
|
||||
if (!checkForm(form.value) || submitLoading.value) return
|
||||
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,
|
||||
}
|
||||
submitLoading.value = true
|
||||
await getAddressAddAndEdit({
|
||||
...form.value,
|
||||
postCode: undefined,
|
||||
isDefault: defaultAddress.value.length > 0 ? 1 : 0,
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
uni.hideLoading()
|
||||
main.restAddress()
|
||||
if (actionType.value == 'select') {
|
||||
push({url: '/pages/address/address'}, {data: {type: 'select'}, type: 'redirectTo'})
|
||||
} else {
|
||||
main.getAddressList(1)
|
||||
goBack()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'err')
|
||||
// closeToast()
|
||||
if (error.msg) {
|
||||
// showFailToast(error.msg);
|
||||
}
|
||||
toast?.({title: '保存成功'})
|
||||
goBack()
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
const addressPickerRef = ref()
|
||||
const provinces = ref([])
|
||||
const citys = ref([])
|
||||
const areas = ref([])
|
||||
const pickerValue = ref([0, 0, 0])
|
||||
const defaultValue = ref([0, 0, 0])
|
||||
|
||||
const columns = computed(() => {
|
||||
return [
|
||||
provinces.value, citys.value, areas.value
|
||||
]
|
||||
})
|
||||
|
||||
function handleSetDefaultColumns() {
|
||||
console.log(addressPickerRef.value)
|
||||
pickerValue.value[0] = provinces.value.findIndex((item, index) => index === defaultValue.value[0])
|
||||
citys.value = provinces.value[pickerValue.value[0]].children || []
|
||||
pickerValue.value[1] = citys.value.findIndex((item, index) => index === defaultValue.value[1])
|
||||
areas.value = citys.value[pickerValue.value[1]].children || []
|
||||
pickerValue.value[2] = areas.value.findIndex((item, index) => index === defaultValue.value[2])
|
||||
// 重置下位置
|
||||
// addressPickerRef.value.setColumnValues(0,provinces.value)
|
||||
// addressPickerRef.value.setColumnValues(1,citys.value)
|
||||
// addressPickerRef.value.setColumnValues(2,areas.value)
|
||||
nextTick(() => {
|
||||
addressPickerRef.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
|
||||
console.log('设置完毕')
|
||||
})
|
||||
}
|
||||
|
||||
function handlePickerChange(e) {
|
||||
const {columnIndex, index, indexs} = e
|
||||
// 改变了省
|
||||
if (columnIndex === 0) {
|
||||
citys.value = provinces.value[index]?.children || []
|
||||
areas.value = citys.value[0]?.children || []
|
||||
addressPickerRef.value.setIndexs([index, 0, 0], true)
|
||||
} else if (columnIndex === 1) {
|
||||
areas.value = citys.value[index]?.children || []
|
||||
addressPickerRef.value.setIndexs(indexs, true)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePickerConfirm(e) {
|
||||
const {indexs, value} = e
|
||||
defaultValue.value = indexs
|
||||
addressData.value.address = {
|
||||
province: value[0].name || '',
|
||||
city: value[1].name || '',
|
||||
district: value[2].name || '',
|
||||
cityId: value[1].id,
|
||||
}
|
||||
}
|
||||
|
||||
function handleFindDefault(data) {
|
||||
const provinceIndex = areaList.value.findIndex(item => item.name === data.province);
|
||||
const cityIndex = areaList.value[provinceIndex].children.findIndex(item => item.name === data.city);
|
||||
const areasIndex = areaList.value[provinceIndex].children[cityIndex].children.findIndex(item => item.name === data.district);
|
||||
defaultValue.value = [provinceIndex, cityIndex, areasIndex]
|
||||
}
|
||||
|
||||
function handleChooseAddress() {
|
||||
provinces.value = areaList.value
|
||||
handleSetDefaultColumns()
|
||||
unref(addressPickerRef).open()
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号验证
|
||||
* 设置编辑表单
|
||||
* @param addressItem
|
||||
*/
|
||||
function phoneInput(event) {
|
||||
const pattern = /[^\d]/g;
|
||||
nextTick(() => {
|
||||
addressData.value.phone = event.detail.value.replace(pattern, '');
|
||||
})
|
||||
function setFormDefault(addressItem) {
|
||||
form.value.id = addressItem.id
|
||||
form.value = {
|
||||
...form.value,
|
||||
...addressItem,
|
||||
address: {
|
||||
cityId: addressItem.cityId,
|
||||
city: addressItem.city,
|
||||
district: addressItem.district,
|
||||
province: addressItem.province,
|
||||
}
|
||||
}
|
||||
// 默认地址
|
||||
if (addressItem.isDefault) {
|
||||
defaultAddress.value = ['isDefault']
|
||||
}
|
||||
}
|
||||
|
||||
// ================================= 地址选择相关 ==================================
|
||||
const addressSelectRef = ref()
|
||||
|
||||
/**
|
||||
* 打开选择地址
|
||||
*/
|
||||
function openAddressSelect() {
|
||||
const {address} = unref(form)
|
||||
let defaultAddressStr = ''
|
||||
if (address.province && address.city && address.district) {
|
||||
defaultAddressStr = `${ address.province }-${ address.city }-${ address.district }`
|
||||
}
|
||||
unref(addressSelectRef).open(defaultAddressStr)
|
||||
}
|
||||
|
||||
/**
|
||||
* 地址选择confirm
|
||||
* @param areaList 地区 [省, 市, 区]
|
||||
*/
|
||||
function addressSelectConfirm(areaList) {
|
||||
if (areaList.length < 3) return
|
||||
const {address} = unref(form)
|
||||
address.province = areaList[0]?.name
|
||||
address.city = areaList[1]?.name
|
||||
address.cityId = areaList[2]?.id
|
||||
address.district = areaList[2]?.name
|
||||
}
|
||||
|
||||
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 = address.value.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,
|
||||
}
|
||||
}
|
||||
console.log(addressData.value)
|
||||
// 设置默认选择
|
||||
handleFindDefault(data)
|
||||
isDefaultList.value = data.isDefault ? ['isDefault'] : []
|
||||
} else {
|
||||
title.value = '新增地址'
|
||||
const params = getParams?.(options)
|
||||
actionType.value = params?.type
|
||||
if (params?.address) {
|
||||
setFormDefault(params?.address)
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
@ -358,8 +252,8 @@ onMounted(() => {
|
||||
flex: 0 0 158rpx;
|
||||
}
|
||||
|
||||
.chooise {
|
||||
.choose {
|
||||
@include useFlex(space-between, center);
|
||||
color: #999;
|
||||
color: #808080;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user