302 lines
9.1 KiB
Vue
302 lines
9.1 KiB
Vue
<template>
|
||
<!-- 头部导航栏 -->
|
||
<nav-bar :title='title' :handleToLink="handleToLink"></nav-bar>
|
||
<view class="address-info">
|
||
<!-- 实名认证 -->
|
||
<view v-if="type !== 'get' && editOrAdd!=='add'" class="approve-tips"
|
||
:class="isRealNameAuth?'isRealNameAuth':''">
|
||
<view class="circle"></view>
|
||
<view class="content" :class="[type === 'get'?'active':'']">
|
||
{{
|
||
!isRealNameAuth?'根据国家法律法规要求，寄件人名称须与实名信息一致。您可以在下单前认证或现场出示证件':'根据国家法律法规要求，寄件人名称须与实名信息一致。'
|
||
}}
|
||
|
||
</view>
|
||
<view class="btn" @click="handleTorealName" v-if="!isRealNameAuth && type!=='get'">实名认证</view>
|
||
</view>
|
||
<!-- 地址信息 -->
|
||
<view class="address-box">
|
||
<view class="title">
|
||
<view class="address-title" v-if="type === 'address'">联系人信息</view>
|
||
<view class="send-get-title" v-else>
|
||
<view class="send" v-if="type==='send'">寄</view>
|
||
<view class="get" v-else-if="type==='get'">收</view>
|
||
<view class="subTitle">
|
||
{{type==='send'?'寄':'收'}}件人信息
|
||
</view>
|
||
<view class="toAddress" @click="toAddress">
|
||
地址簿
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 姓名，电话 -->
|
||
<view class="name-number">
|
||
<input placeholder-class="phcolor" class="uni-input" :class="formName!==''?'active':''" placeholder="姓名"
|
||
@input="handleFormName" :value="formName" maxlength="10" />
|
||
<input placeholder-class="phcolor" class="uni-input" type='number' :class="formPhone!==''?'active':''"
|
||
placeholder="电话" @input="handleFormPhone" :value="formPhone" />
|
||
</view>
|
||
<!-- 城市/地区 -->
|
||
<view class="city-area" @click="handledSelectArea">
|
||
<view class="label" :class="areaLabel!=='城市/地区'?'active':''">{{areaLabel}}</view>
|
||
<view class="arrow"></view>
|
||
</view>
|
||
<!-- 详细地址 -->
|
||
<view class="address-detail">
|
||
<input placeholder-class="phcolor" class="uni-input" :class="formAddressInfo!==''?'active':''"
|
||
placeholder="详细地址（例如：**街**号）" :value="formAddressInfo" @input="handleFormAddressInfo"
|
||
maxlength="33" />
|
||
</view>
|
||
<!-- 底部按钮区域 -->
|
||
<view class="footer">
|
||
<view class="save-address" @click="handleSaveToAddress">
|
||
<view class="checkbox" :class="{active:isFromAddress?isDefaultAddress:isSaveToAddress}"></view>
|
||
<view class="label"> {{isFromAddress?'设为默认寄件地址':'保存到地址簿'}}</view>
|
||
</view>
|
||
<view class="reset-btn" @click="reset" :class="isReset?'active':''">清空</view>
|
||
</view>
|
||
</view>
|
||
<BtnFooter btnText='确定' :isActive="isConfirm" @confirm="submit"></BtnFooter>
|
||
<!-- 选择省市区弹窗 -->
|
||
<SelectArea ref='selectArea' @getAreaData="getAreaData" :provinceId="provinceId" :cityId="cityId"
|
||
:countyId="countyId" :editOrAdd="editOrAdd"></SelectArea>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
computed
|
||
// onLoad
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app';
|
||
import BtnFooter from '@/components/BtnFooter/index.vue'
|
||
import SelectArea from './components/selectArea.vue'
|
||
import {
|
||
addAddress,
|
||
getAddressInfoDetail,
|
||
editAddress
|
||
} from '@/pages/api/address.js'
|
||
import {
|
||
getUserInfo,
|
||
} from '@/pages/api/my.js';
|
||
|
||
const formName = ref('')
|
||
const formPhone = ref('')
|
||
const formAddressInfo = ref('')
|
||
let provinceId = ref('')
|
||
let cityId = ref('')
|
||
let countyId = ref('')
|
||
let title = ref('') //导航栏标题
|
||
const isSaveToAddress = ref(false) //是否保存到地址簿
|
||
const isDefaultAddress = ref(false) //是否设置为默认地址
|
||
const isFromAddress = ref() //是否来自地址簿
|
||
const selectArea = ref()
|
||
const type = ref('send') //寄件人，收件人，地址簿
|
||
const addressType = ref() //寄件，收件
|
||
const editOrAdd = ref()
|
||
const id = ref('') //查询地址详情的id
|
||
const isConfirm = computed(() => {
|
||
return (Boolean(formName.value) && Boolean(formPhone.value) && Boolean(formAddressInfo.value) && areaLabel
|
||
.value !== '城市/地区')
|
||
}) //是否可以提交确定
|
||
const isReset = computed(() => {
|
||
return Boolean(formName.value) || Boolean(formPhone.value) || Boolean(formAddressInfo.value) || Boolean(
|
||
provinceId.value)
|
||
})
|
||
const areaLabel = ref('城市/地区') //省市区选择的值
|
||
const isRealNameAuth = ref(true) //用户是否进行了实名认证
|
||
onLoad((options) => {
|
||
if (options.id) {
|
||
getAddressInfo(options.id)
|
||
}
|
||
editOrAdd.value = options.editOrAdd
|
||
id.value = options.id || ''
|
||
type.value = options.type
|
||
isFromAddress.value = options.isFromAddress
|
||
title.value = options.type === 'address' ? '编辑地址' : options.type === 'send' ? '寄件人地址填写' : '收件人地址填写'
|
||
isDefaultAddress.value = options.isDefault === '0' ? false : true
|
||
})
|
||
onMounted(() => {
|
||
if (editOrAdd.value === 'add') {
|
||
selectArea.value.getList()
|
||
}
|
||
isRealName()
|
||
})
|
||
//跳转到地址簿
|
||
const toAddress = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/address/index?type=' + type.value
|
||
})
|
||
}
|
||
//跳转到实名认证
|
||
const handleTorealName = () => {
|
||
uni.navigateTo({
|
||
url: '/subPages/realName-authentication/index'
|
||
});
|
||
}
|
||
//获取用户是否实名认证了
|
||
const isRealName = () => {
|
||
getUserInfo().then((res) => {
|
||
if (res) {
|
||
isRealNameAuth.value = Boolean(res.data.idCardNoVerify)
|
||
}
|
||
|
||
})
|
||
}
|
||
//查询地址簿详情
|
||
const getAddressInfo = async (id) => {
|
||
await getAddressInfoDetail(id).then((res) => {
|
||
const {
|
||
name,
|
||
phoneNumber,
|
||
address,
|
||
city,
|
||
county,
|
||
province,
|
||
isShow,
|
||
isDefault
|
||
} = res.data
|
||
formName.value = name
|
||
formPhone.value = phoneNumber
|
||
formAddressInfo.value = address
|
||
areaLabel.value = province.name + ' ' + city.name + ' ' + county.name
|
||
provinceId.value = province.id
|
||
cityId.value = city.id
|
||
countyId.value = county.id
|
||
isSaveToAddress.value = isShow
|
||
isDefaultAddress.value = isDefault
|
||
})
|
||
selectArea.value.getList()
|
||
}
|
||
|
||
//是否保存到地址簿、是否设置为默认地址
|
||
const handleSaveToAddress = () => {
|
||
if (isFromAddress.value) {
|
||
isDefaultAddress.value = !isDefaultAddress.value
|
||
} else {
|
||
isSaveToAddress.value = !isSaveToAddress.value
|
||
}
|
||
|
||
}
|
||
|
||
//打开选择省市区弹窗
|
||
const handledSelectArea = () => {
|
||
selectArea.value.handleOpen()
|
||
}
|
||
//处理姓名表单输入
|
||
const handleFormName = (event) => {
|
||
formName.value = event.detail.value
|
||
}
|
||
//处理电话表单输入
|
||
const handleFormPhone = (event) => {
|
||
formPhone.value = event.detail.value
|
||
}
|
||
//处理详细地址表单输入
|
||
const handleFormAddressInfo = (event) => {
|
||
formAddressInfo.value = event.detail.value
|
||
}
|
||
//获取省市区组件的值
|
||
const getAreaData = (value) => {
|
||
provinceId.value = value.province.id
|
||
cityId.value = value.city.id
|
||
countyId.value = value.area.id
|
||
areaLabel.value = value.province.name + ' ' + value.city.name + ' ' + value.area.name
|
||
}
|
||
//重置表单
|
||
const reset = () => {
|
||
formAddressInfo.value = ''
|
||
formName.value = ''
|
||
formPhone.value = ''
|
||
areaLabel.value = '城市/地区'
|
||
}
|
||
const handleToLink = () => {
|
||
uni.navigateBack()
|
||
}
|
||
//提交表单
|
||
const submit = () => {
|
||
console.log()
|
||
if (!isConfirm.value) {
|
||
uni.showToast({
|
||
title: '请将信息填写完整',
|
||
icon: 'none'
|
||
})
|
||
} else if (!(/^1[3456789]\d{9}$/.test(formPhone.value))) {
|
||
uni.showToast({
|
||
title: '请填写正确的手机号码格式',
|
||
icon: 'none'
|
||
})
|
||
} else if (formName.value.length < 2) {
|
||
uni.showToast({
|
||
title: '姓名字数长度为2-10',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
if (editOrAdd.value === 'add' && !id.value) {
|
||
addAddress({
|
||
name: formName.value,
|
||
phoneNumber: formPhone.value,
|
||
address: formAddressInfo.value,
|
||
provinceId: provinceId.value,
|
||
cityId: cityId.value,
|
||
countyId: countyId.value,
|
||
type: type.value === 'send' ? 1 : 2,
|
||
isShow: isFromAddress.value ? 1 : isSaveToAddress.value ? 1 : 0,
|
||
isDefault: isDefaultAddress.value ? 1 : 0
|
||
}).then((res) => {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success'
|
||
})
|
||
if (isFromAddress.value === 'true') {
|
||
uni.redirectTo({
|
||
url: '/pages/address/index'
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/express-delivery/index?id=' + res.data.id + '&type=' + type
|
||
.value
|
||
})
|
||
}
|
||
})
|
||
} else if (editOrAdd.value === 'edit' && id.value) {
|
||
editAddress({
|
||
name: formName.value,
|
||
phoneNumber: formPhone.value,
|
||
address: formAddressInfo.value,
|
||
provinceId: provinceId.value,
|
||
cityId: cityId.value,
|
||
countyId: countyId.value,
|
||
type: addressType.value,
|
||
isShow: isFromAddress.value ? 1 : isSaveToAddress.value ? 1 : 0,
|
||
id: id.value,
|
||
isDefault: isDefaultAddress.value ? 1 : 0
|
||
}).then((res) => {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success'
|
||
})
|
||
if (isFromAddress.value === 'true') {
|
||
uni.redirectTo({
|
||
url: '/pages/address/index'
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/express-delivery/index?id=' + res.data.id + '&type=' + type
|
||
.value
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style src="./index.scss" lang="scss" scoped></style>
|
||
<style src="./components/selectArea.scss" lang="scss"></style>
|