362 lines
9.3 KiB
Vue
362 lines
9.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="whole">
|
||
<view class="rowBox box">
|
||
<view class="row">
|
||
<text>姓名</text>
|
||
<input v-model="item.name" placeholder="请输入姓名" />
|
||
</view>
|
||
<view class="row">
|
||
<text>手机号</text>
|
||
<input v-model="item.mobile" placeholder="请输入手机号" @blur="trimValue" />
|
||
</view>
|
||
<view class="row">
|
||
<text>所在地区</text>
|
||
<view class="area">
|
||
<view class="picker">
|
||
<uni-data-picker
|
||
placeholder="请选择"
|
||
popup-title="请选择"
|
||
:localdata="areaList"
|
||
v-model="item.area_id"
|
||
@change="chooseArea"
|
||
:map="{text:'name',value:'id'}">
|
||
</uni-data-picker>
|
||
</view>
|
||
|
||
<view class="icon" @click="showMap">
|
||
<up-icon name="map-fill" size="18" :color="Color" />
|
||
<view>定位</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<text>详细地址</text>
|
||
<input v-model="item.address" placeholder="请填写具体地址" />
|
||
</view>
|
||
</view>
|
||
<view class="default box">
|
||
<up-checkbox :checked="item.is_default === 1" class="check" :activeColor="Color" @change="onChange" shape="circle" usedAlone label="设为默认地址"></up-checkbox>
|
||
</view>
|
||
|
||
<view class="smart">
|
||
<view class="tit">智能填写</view>
|
||
<view class="paste">
|
||
<textarea v-model="pasteText" class="textarea" placeholder="粘贴如：浙江省杭州市西湖区西湖名胜风景区，王小二，13688668866，将为您识别"></textarea>
|
||
<view style="display: flex;justify-content: flex-end;">
|
||
<view class="btn kong" @click="pasteText = ''">清空</view>
|
||
<view class="btn" @click="parseAddr">识别</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="savebtn" @click="saveBtn">保存地址</view>
|
||
</view>
|
||
|
||
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, watch } from 'vue'
|
||
import { areaList } from '@/components/areaList.js'
|
||
import { showToast, judgePrivacy, getAreaCode } from '@/components/common.js'
|
||
import { get, post } from '@/api/request.js'
|
||
import privacyPopup from '@/components/privacyPopup/index.vue'
|
||
import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
|
||
|
||
export default {
|
||
components: {
|
||
privacyPopup, uniDataPicker
|
||
},
|
||
setup() {
|
||
const data = reactive({
|
||
item: {
|
||
postal_code: '',
|
||
is_default: 0
|
||
},
|
||
pasteText: '',
|
||
showPrivacy: false,
|
||
Color: uni.getStorageSync('theme_color')
|
||
})
|
||
async function getInfo(id) {
|
||
let res = await get(`/api/v1/address/${id}`)
|
||
data.item = res.data
|
||
arealist.value = [res.data.province, res.data.city, res.data.area]
|
||
}
|
||
|
||
// 保存
|
||
async function saveBtn() {
|
||
var reg_tel = /(^1[3-9]\d{9}$)|(^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/
|
||
if (!data.item.mobile || !reg_tel.test(data.item.mobile)) {
|
||
showToast('请输入正确联系方式')
|
||
return
|
||
}
|
||
let res = ''
|
||
if (data.item.id) {
|
||
res = await post(`/api/v1/address/${data.item.id}`, { ...data.item }, 'PUT')
|
||
showToast('编辑成功')
|
||
} else {
|
||
res = await post(`/api/v1/address`, { ...data.item })
|
||
showToast('添加成功')
|
||
if (uni.getStorageSync('pay') == 1) {
|
||
let pages = getCurrentPages()
|
||
let nowPage = pages[pages.length - 1] //当前页页面实例
|
||
let prevPage = pages[pages.length - 3]
|
||
if (data.item.id !== '') {
|
||
prevPage.$vm.address = {
|
||
...res.data,
|
||
detailedAddress: area.value + data.item.address
|
||
}
|
||
} else {
|
||
prevPage.$vm.address = {}
|
||
}
|
||
uni.navigateBack({
|
||
delta: 2
|
||
})
|
||
uni.removeStorageSync('pay')
|
||
return
|
||
} else {
|
||
// 跳转到退款寄件
|
||
const pages = getCurrentPages()
|
||
const prevPage = pages[pages.length - 2]
|
||
prevPage.$vm.address = {
|
||
...res.data,
|
||
detailedAddress: area.value + data.item.address
|
||
}
|
||
}
|
||
}
|
||
uni.removeStorageSync('address')
|
||
setTimeout(function() {
|
||
uni.navigateBack(-1)
|
||
}, 500)
|
||
}
|
||
|
||
// 选择所在地区
|
||
const showArea = ref(false)
|
||
const area = ref('')
|
||
let arealist = ref([])
|
||
watch(arealist, (newValue, oldValue) => {
|
||
console.log(arealist.value)
|
||
let name = []
|
||
arealist.value.forEach((item) => {
|
||
name.push(item.name)
|
||
})
|
||
data.item.province_id = arealist.value[0] ? arealist.value[0].id : ''
|
||
data.item.city_id = arealist.value[1] ? arealist.value[1].id : ''
|
||
data.item.area_id = arealist.value[2] ? arealist.value[2].id : ''
|
||
area.value = name.join('')
|
||
})
|
||
|
||
function chooseArea(e) {
|
||
let list = []
|
||
for (let i = 0; i < e.detail.value.length; i++) {
|
||
if (e.detail.value[i].text === '') {
|
||
showToast('请选择完整地区信息')
|
||
return
|
||
}
|
||
list.push({id: e.detail.value[i].value, name: e.detail.value[i].text})
|
||
}
|
||
|
||
arealist.value = list
|
||
showArea.value = false
|
||
}
|
||
|
||
// 设为默认地址
|
||
function onChange(e) {
|
||
data.item.is_default = e ? 1 : 0
|
||
}
|
||
|
||
function parseAddr() {
|
||
if(data.pasteText) {
|
||
uni.showLoading({
|
||
title: '正在识别...'
|
||
})
|
||
post('/api/v1/address/parse', {address: data.pasteText}).then(async(res) => {
|
||
data.item.name = res.data.name || ''
|
||
data.item.mobile = res.data.mobile || ''
|
||
data.item.address = (res.data.street || '') + (res.data.addr || '')
|
||
data.item.provinceName = res.data.province || ''
|
||
data.item.cityName = res.data.city || ''
|
||
data.item.countyName = res.data.region || ''
|
||
arealist.value = await getAreaCode(data.item.provinceName, data.item.cityName, data.item.countyName)
|
||
uni.hideLoading()
|
||
showToast('地址解析成功')
|
||
})
|
||
}
|
||
}
|
||
|
||
function trimValue(e) {
|
||
let reg = /[\t\r\f\n\s]*/g
|
||
if (e.detail.value) {
|
||
data.item.mobile = e.detail.value.replace(reg, '')
|
||
}
|
||
}
|
||
|
||
async function showMap() {
|
||
if(await judgePrivacy()) {
|
||
data.showPrivacy = true
|
||
return false
|
||
}
|
||
uni.chooseLocation({
|
||
success(ress) {
|
||
if(ress.address) {
|
||
post('/api/v1/address/parse', {address: ress.address + ress.name}).then(async(res) => {
|
||
data.item.address = (res.data.street || '') + (res.data.addr || '')
|
||
data.item.provinceName = res.data.province || ''
|
||
data.item.cityName = res.data.city || ''
|
||
data.item.countyName = res.data.region || ''
|
||
arealist.value = await getAreaCode(data.item.provinceName, data.item.cityName, data.item.countyName)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getInfo,
|
||
areaList,
|
||
area,
|
||
showArea,
|
||
chooseArea,
|
||
onChange,
|
||
saveBtn,
|
||
parseAddr,
|
||
trimValue,
|
||
showMap,
|
||
getAreaCode
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
// await this.$onLaunched
|
||
if (options.id) {
|
||
this.getInfo(options.id)
|
||
}
|
||
if (options.type) {
|
||
let item = uni.getStorageSync('address')
|
||
this.item = {
|
||
name: item.userName,
|
||
mobile: item.telNumber,
|
||
address: item.detailInfo,
|
||
postal_code: item.postalCode,
|
||
is_default: 0,
|
||
provinceName: item.provinceName,
|
||
cityName: item.cityName,
|
||
countyName: item.countyName
|
||
}
|
||
await this.getAreaCode(item.provinceName, item.cityName, item.countyName)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole{
|
||
padding: 24rpx;
|
||
.box{
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.rowBox{
|
||
padding: 0 20rpx;
|
||
.row{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
height: 90rpx;
|
||
text{
|
||
width: 160rpx;
|
||
flex-shrink: 0;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.picker{
|
||
width: calc(100% - 60rpx);
|
||
overflow: hidden;
|
||
}
|
||
input{
|
||
flex: 1;
|
||
}
|
||
.area{
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
justify-content: space-between;
|
||
width: calc(100% - 160rpx);
|
||
.icon{
|
||
width: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
color: v-bind('Color');
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
&:not(:last-child){
|
||
border-bottom: 2rpx solid #e5e5e5;
|
||
}
|
||
}
|
||
}
|
||
.default{
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
padding: 30rpx 20rpx;
|
||
}
|
||
.savebtn{
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: calc(100% - 60rpx);
|
||
height: 85rpx;
|
||
line-height: 85rpx;
|
||
background-color: v-bind('Color');
|
||
border-radius: 43rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin: 20rpx 0;
|
||
}
|
||
.smart{
|
||
margin-top: 40rpx;
|
||
.tit{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.paste{
|
||
background-color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
padding: 18rpx 24rpx 24rpx;
|
||
box-sizing: border-box;
|
||
.textarea{
|
||
width: 100%;
|
||
padding: 10rpx;
|
||
height: 120rpx;
|
||
}
|
||
.btn{
|
||
color: #fff;
|
||
background-color: v-bind('Color');
|
||
border-radius: 50rpx;
|
||
margin: 10rpx 0 0 10rpx;
|
||
height: 50rpx;
|
||
width: 110rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
&.kong{
|
||
border: 1px solid #666;
|
||
color: #666;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .picker uni-text{
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|