init
This commit is contained in:
shuhongfan
@@ -0,0 +1,130 @@
|
||||
.selectArea{
|
||||
::v-deep .uni-popup__wrapper {
|
||||
height: 1160rpx;
|
||||
background-color: white !important;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
height: 56rpx;
|
||||
padding: 30rpx 38rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/icon21.png');
|
||||
}
|
||||
}
|
||||
.seachBox{
|
||||
::v-deep .uni-searchbar{
|
||||
padding-left: 38rpx!important;
|
||||
.uni-searchbar__box{
|
||||
border-radius: 34rpx!important;
|
||||
}
|
||||
}
|
||||
.search-icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/search.png');
|
||||
}
|
||||
}
|
||||
.hot-city{
|
||||
margin-top: 31rpx;
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
padding-bottom: 40rpx;
|
||||
margin: 0 38rpx;
|
||||
.title{
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
.city-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.city-item{
|
||||
font-size: 24rpx;
|
||||
height: 64rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 34rpx;
|
||||
min-width: 148rpx;
|
||||
margin-top: 18rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
.city-item.active{
|
||||
border: 2rpx solid #E84134;
|
||||
color: #E84134;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.province-city-area{
|
||||
margin-top: -10rpx;
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 600rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.item {
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .uni-picker-view-wrapper{
|
||||
.uni-picker-view-mask{
|
||||
display: none;
|
||||
}
|
||||
.uni-picker-view-indicator{
|
||||
top: 46%!important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 90rpx;
|
||||
.label{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
height: 168rpx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn{
|
||||
width: 404rpx;
|
||||
height: 88rpx;
|
||||
background: #E84134;
|
||||
border-radius: 44rpx;
|
||||
color:white ;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<view class="selectArea">
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view class="header">
|
||||
<view class="header-title">选择省市区</view>
|
||||
<view class="close" @click="handleCancel"></view>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<!-- <view class="seachBox">
|
||||
<uni-search-bar placeholder="请输入城市/区县/街道名称搜索" cancelButton="none" @confirm="search" :focus="true"
|
||||
v-model="searchValue" @blur="blur" @focus="focus" @input="input">
|
||||
<template v-slot:searchIcon>
|
||||
<view class="search-icon"></view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
</view> -->
|
||||
<!-- 热门城市 -->
|
||||
<view class="hot-city">
|
||||
<view class="title">热门城市</view>
|
||||
<view class="city-box">
|
||||
<view class="city-item" :class="index===hotCityIndex?'active':''" v-for="(item,index) in cityList" :key="index"
|
||||
@click="handleHotCityClick(item,index)">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 省市区三级联动 -->
|
||||
<view class="province-city-area">
|
||||
<view class="label-box">
|
||||
<view class="label">省份</view>
|
||||
<view class="label">城市</view>
|
||||
<view class="label">区县</view>
|
||||
</view>
|
||||
<picker-view :value="areaIndex.data" :indicator-style="`height: 50px;`" @change="bindChange"
|
||||
@pickstart="handlePickStart" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in province.data" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in city.data" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in area.data" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="btn" @click="confirm">确定</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
getArea
|
||||
} from '@/pages/api/order.js'
|
||||
import {
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
const emits = defineEmits(["@getAreaData"]);
|
||||
const popup = ref()
|
||||
let props = defineProps({
|
||||
provinceId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
cityId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
countyId: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
})
|
||||
//省数据
|
||||
let province = reactive({
|
||||
data: []
|
||||
})
|
||||
let selectedProvince = reactive({
|
||||
data: {
|
||||
name: '北京市',
|
||||
id: '1'
|
||||
}
|
||||
})
|
||||
//市数据
|
||||
const city = reactive({
|
||||
data: []
|
||||
})
|
||||
let selectedCity = reactive({
|
||||
data: {
|
||||
name: '直辖市',
|
||||
id: '2'
|
||||
}
|
||||
})
|
||||
//区域数据
|
||||
const area = reactive({
|
||||
data: []
|
||||
})
|
||||
let selectedArea = reactive({
|
||||
data: {
|
||||
name: '东城区',
|
||||
id: '3'
|
||||
}
|
||||
})
|
||||
//记录三级联动每项的index以及默认展示
|
||||
let areaIndex = reactive({
|
||||
data: [0, 0, 0]
|
||||
})
|
||||
|
||||
//记录热门城市选中的索引
|
||||
let hotCityIndex = ref('')
|
||||
|
||||
const cityList = reactive([{
|
||||
label: '北京',
|
||||
provinceId: "1",
|
||||
cityId: "2",
|
||||
countyId: "3"
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
provinceId: "161792",
|
||||
cityId: "161793",
|
||||
countyId: "161794"
|
||||
},
|
||||
{
|
||||
label: '广州',
|
||||
provinceId: "483250",
|
||||
cityId: "483251",
|
||||
countyId: "483252"
|
||||
},
|
||||
{
|
||||
label: '深圳',
|
||||
provinceId: "483250",
|
||||
cityId: "487721",
|
||||
countyId: "487722"
|
||||
}
|
||||
])
|
||||
//负责记录组件中选中的三级对应的id
|
||||
let placeIdItem = reactive({
|
||||
provinceId: '',
|
||||
cityId: '',
|
||||
countyId: ''
|
||||
})
|
||||
//区分热门城市点击还是滑动三级组件
|
||||
let chooseType = ref('select')
|
||||
|
||||
// 监听后台获取的详情
|
||||
watch(props, (newValue, oldValue) => {
|
||||
placeIdItem.provinceId = newValue.provinceId
|
||||
placeIdItem.cityId = newValue.cityId
|
||||
placeIdItem.countyId = newValue.countyId
|
||||
})
|
||||
|
||||
const handleHotCityClick = (item,index) => {
|
||||
placeIdItem.provinceId = item.provinceId
|
||||
placeIdItem.cityId = item.cityId
|
||||
placeIdItem.countyId = item.countyId
|
||||
getAreaInfo('', province)
|
||||
getAreaInfo(placeIdItem.provinceId, city)
|
||||
getAreaInfo(placeIdItem.cityId, area)
|
||||
chooseType.value = 'click'
|
||||
hotCityIndex.value = index
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
getAreaInfo('', province)
|
||||
getAreaInfo(placeIdItem.provinceId || 1, city)
|
||||
getAreaInfo(placeIdItem.cityId || 2, area)
|
||||
}
|
||||
|
||||
//获取省市区
|
||||
const getAreaInfo = (parentId, type) => {
|
||||
getArea({
|
||||
parentId
|
||||
}).then((res) => {
|
||||
type.data = res.data
|
||||
if (type === province) {
|
||||
//用于解决响应式状态变更但是dom不更新的问题
|
||||
nextTick(() => {
|
||||
selectedProvince.data = res.data.filter(item => item.id == placeIdItem.provinceId)[0]|| res.data[0]
|
||||
areaIndex.data[0] = res.data.findIndex(item => item.id == placeIdItem.provinceId)
|
||||
})
|
||||
} else if (type === city) {
|
||||
nextTick(() => {
|
||||
selectedCity.data = res.data.filter(item => item.id == placeIdItem.cityId)[0]|| res.data[0]
|
||||
areaIndex.data[1] = res.data.findIndex(item => item.id == placeIdItem.cityId)
|
||||
})
|
||||
} else if (type === area) {
|
||||
nextTick(() => {
|
||||
selectedArea.data = res.data.filter(item => item.id == placeIdItem.countyId)[0]|| res.data[0]
|
||||
areaIndex.data[2] = res.data.findIndex(item => item.id == placeIdItem.countyId)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handlePickStart = () => {
|
||||
chooseType.value = 'select'
|
||||
}
|
||||
|
||||
//选择省市区
|
||||
const bindChange = (event) => {
|
||||
|
||||
if(chooseType.value ==='click') return
|
||||
//二级地址获取
|
||||
if (areaIndex.data[0] !== event.detail.value[0]) {
|
||||
getAreaInfo(province.data[event.detail.value[0]].id, city)
|
||||
getAreaInfo(Number(province.data[event.detail.value[0]].id) + 1, area)
|
||||
selectedProvince.data = province.data[event.detail.value[0]]
|
||||
} else if (areaIndex.data[1] !== event.detail.value[1]) {
|
||||
//三级地址获取
|
||||
getAreaInfo(city.data[event.detail.value[1]].id, area)
|
||||
selectedCity.data = city.data[event.detail.value[1]]
|
||||
} else {
|
||||
selectedArea.data = area.data[event.detail.value[2]]
|
||||
}
|
||||
areaIndex.data = event.detail.value
|
||||
hotCityIndex.value = ''
|
||||
}
|
||||
|
||||
// 打开弹层
|
||||
const handleOpen = () => {
|
||||
popup.value.open('bottom');
|
||||
};
|
||||
// 关闭弹层
|
||||
const handleCancel = () => {
|
||||
popup.value.close('bottom');
|
||||
}
|
||||
|
||||
//确认选择省市区
|
||||
const confirm = () => {
|
||||
handleCancel()
|
||||
emits("getAreaData", {
|
||||
province: selectedProvince.data,
|
||||
city: selectedCity.data,
|
||||
area: selectedArea.data
|
||||
})
|
||||
}
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
handleOpen,
|
||||
getList
|
||||
});
|
||||
</script>
|
||||
|
||||
<style src="./selectArea.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,166 @@
|
||||
.address-info{
|
||||
background-color: #F3F5F9 !important;
|
||||
height: 85vh;
|
||||
.approve-tips{
|
||||
height: 90rpx;
|
||||
background: #FAF4DE;
|
||||
padding: 5rpx 18rpx 8rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.circle{
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background-color:#E88649 ;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
font-size: 22rpx;
|
||||
color:#EA8A57 ;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 515rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.content.active{
|
||||
width: 650rpx;
|
||||
}
|
||||
.btn{
|
||||
width: 132rpx;
|
||||
height: 44rpx;
|
||||
background: #EA8A57;
|
||||
border-radius: 22rpx;
|
||||
color:white ;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
font-size: 22rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.approve-tips.isRealNameAuth{
|
||||
height: 60rpx;
|
||||
.content{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.address-box{
|
||||
height: 510rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin: 19rpx 19rpx 0rpx 19rpx;
|
||||
padding:32rpx 28rpx 0rpx ;
|
||||
.address-title{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.uni-input{
|
||||
width: 400rpx;
|
||||
}
|
||||
.uni-input.active{
|
||||
font-weight: bold;
|
||||
}
|
||||
.send-get-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.toAddress{
|
||||
width: 104rpx;
|
||||
height: 46rpx;
|
||||
border: 2rpx solid #888888;
|
||||
border-radius: 22rpx;
|
||||
text-align: center;
|
||||
line-height: 46rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.send,.get{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.send{
|
||||
background-color:#000000 ;
|
||||
}
|
||||
.get{
|
||||
background-color:#E63E32 ;
|
||||
}
|
||||
.subTitle{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.name-number{
|
||||
display: flex;
|
||||
margin-top: 56rpx;
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
padding-bottom: 29rpx;
|
||||
}
|
||||
.city-area{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
padding: 36rpx 0;
|
||||
.label{
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
}
|
||||
.active.label{
|
||||
color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
.arrow{
|
||||
width: 12rpx;
|
||||
height: 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../static/icon15.png');
|
||||
}
|
||||
}
|
||||
.address-detail{
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
.footer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 30rpx;
|
||||
.save-address{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label{
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
}
|
||||
.active,.checkbox{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.checkbox{
|
||||
background-image: url('../../static/checkbox.png');
|
||||
}
|
||||
.active{
|
||||
|
||||
background-image: url('../../static/checkboxActive.png');
|
||||
}
|
||||
}
|
||||
.reset-btn{
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
}
|
||||
.reset-btn.active{
|
||||
color: #151515;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user