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>
|