You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
6.9 KiB
259 lines
6.9 KiB
4 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="edgeInsetTop"></view>
|
||
|
|
<view class="cu-form-group" v-show="addressType">
|
||
|
|
<view class="title">联系人</view>
|
||
|
|
<input type="text" placeholder="姓名" v-model="addressData.name"></input>
|
||
|
|
</view>
|
||
|
|
<view class="cu-form-group" v-show="addressType">
|
||
|
|
<view class="title">手机号</view>
|
||
|
|
<input type="number" placeholder="手机号码" maxlength="11" v-model="addressData.mobile"></input>
|
||
|
|
</view>
|
||
|
|
<!-- 1.1.5升级 -->
|
||
|
|
<view class="cu-form-group area">
|
||
|
|
<view class="click" @tap="btnClick"></view>
|
||
|
|
<view class="title">所在地区</view>
|
||
|
|
<input type="text" :value="addressData.formatted_address" placeholder="选择地区" disabled />
|
||
|
|
</view>
|
||
|
|
<view class="cu-form-group align-start">
|
||
|
|
<view class="title">详细地址</view>
|
||
|
|
<!-- 1.1.5升级 -->
|
||
|
|
<textarea
|
||
|
|
maxlength="-1"
|
||
|
|
@input="getInputtips"
|
||
|
|
@focus="focusInputtips"
|
||
|
|
@confirm="confirmInputtips"
|
||
|
|
@blur="blurInputtips"
|
||
|
|
:placeholder-style="addressData.adcode==''?'color: #bbb':''"
|
||
|
|
:adjust-position="false"
|
||
|
|
v-model="addressData.address_full"
|
||
|
|
:disabled="addressData.adcode==''?true:false"
|
||
|
|
:placeholder="addressData.adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'"/>
|
||
|
|
</view>
|
||
|
|
<view class="cu-form-group margin-top-bj" v-show="addressType">
|
||
|
|
<view class="title">设为默认</view>
|
||
|
|
<switch @change="switchChange" :class="addressData.default == 1?'checked':''" :checked="addressData.default == 1"></switch>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
|
||
|
|
<view class="item" v-for="(item,index) in addressList.tips" :key="index" @tap="addressTisp(item)">
|
||
|
|
<view>{{item.address}}</view>
|
||
|
|
<text>{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<!-- 1.0.5升级 -->
|
||
|
|
<!-- 1.0.6升级 -->
|
||
|
|
<view class="padding-bj flex flex-direction margin-top" v-show="addressType">
|
||
|
|
<button @tap="confirm" class="cu-btn wanl-bg-orange lg">完成</button>
|
||
|
|
</view>
|
||
|
|
<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
addressData: {
|
||
|
|
name: '',
|
||
|
|
mobile: '',
|
||
|
|
default: 0,
|
||
|
|
//地区
|
||
|
|
country: '', // 国家
|
||
|
|
province: '', //省份
|
||
|
|
city: '', // 城市
|
||
|
|
citycode: '', // 城市代码
|
||
|
|
district: '', // 县
|
||
|
|
adcode: '', // 地区代码
|
||
|
|
formatted_address: '', //详细地区
|
||
|
|
//详情
|
||
|
|
address: '', //详细地址
|
||
|
|
address_name: '', // 地址名称
|
||
|
|
address_full: '', // 完整地址名称
|
||
|
|
location: '' //经纬度
|
||
|
|
},
|
||
|
|
addressList: {
|
||
|
|
location: '',
|
||
|
|
adcode: '',
|
||
|
|
tips: {}
|
||
|
|
},
|
||
|
|
addressType: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
let title = '新增地址 ';
|
||
|
|
if (option.type === 'newadd') {
|
||
|
|
this.addressData.default = 1
|
||
|
|
}
|
||
|
|
if (option.type === 'edit') {
|
||
|
|
title = '编辑地址'
|
||
|
|
this.addressData = JSON.parse(option.data)
|
||
|
|
// 1.1.6 升级
|
||
|
|
if(this.addressData.address){
|
||
|
|
this.addressData.address_full = this.addressData.address_name + this.addressData.address;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.manageType = option.type;
|
||
|
|
this.$wanlshop.title(title);
|
||
|
|
},
|
||
|
|
onNavigationBarButtonTap() {
|
||
|
|
this.confirm()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
switchChange(e) {
|
||
|
|
if (e.detail.value) {
|
||
|
|
this.addressData.default = 1;
|
||
|
|
} else {
|
||
|
|
this.addressData.default = 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
btnClick() {
|
||
|
|
this.$refs.wanlAddress.show()
|
||
|
|
},
|
||
|
|
successSelectAddress(address) {
|
||
|
|
this.addressData.country = address.country;
|
||
|
|
this.addressData.province = address.province;
|
||
|
|
this.addressData.city = address.city;
|
||
|
|
this.addressData.citycode = address.citycode;
|
||
|
|
this.addressData.district = address.district;
|
||
|
|
this.addressData.formatted_address = address.formatted_address;
|
||
|
|
this.addressData.location = address.location;
|
||
|
|
this.addressData.adcode = address.adcode;
|
||
|
|
this.addressList.location = address.location;
|
||
|
|
this.addressList.adcode = address.adcode;
|
||
|
|
},
|
||
|
|
//调用高德地图搜索相关地址
|
||
|
|
getInputtips(event) {
|
||
|
|
let keywords = event.detail.value;
|
||
|
|
if (keywords) {
|
||
|
|
uni.request({
|
||
|
|
url: 'https://restapi.amap.com/v3/assistant/inputtips',
|
||
|
|
data: {
|
||
|
|
key: this.$wanlshop.config('amapkey'),
|
||
|
|
keywords: keywords,
|
||
|
|
location: this.addressList.location,
|
||
|
|
city: this.addressList.adcode
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
let addressList = [];
|
||
|
|
// 1.1.8升级
|
||
|
|
if(res.res.infocode == 10001){
|
||
|
|
this.$wanlshop.msg('获取位置失败：错误' + res.res.info);
|
||
|
|
}else{
|
||
|
|
res.data.tips.forEach(item => {
|
||
|
|
if (item.address.length == 0) {
|
||
|
|
item.address = '暂未收录地址';
|
||
|
|
item.location = '113.294701,22.666562';
|
||
|
|
}
|
||
|
|
addressList.push(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.addressList.tips = addressList;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 详细地址失去焦点
|
||
|
|
blurInputtips(event) {
|
||
|
|
this.addressData.address = event.detail.value;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.addressType = true;
|
||
|
|
}, 10);
|
||
|
|
},
|
||
|
|
// 详细地址已完成
|
||
|
|
confirmInputtips(event) {
|
||
|
|
this.addressType = true;
|
||
|
|
},
|
||
|
|
// 详细地址获取焦点
|
||
|
|
focusInputtips(event) {
|
||
|
|
this.addressType = false;
|
||
|
|
},
|
||
|
|
// 详细地址替换
|
||
|
|
addressTisp(data) {
|
||
|
|
this.addressData.adcode = data.adcode;
|
||
|
|
this.addressData.address = data.address;
|
||
|
|
this.addressData.address_name = data.name;
|
||
|
|
// 1.0.5升级
|
||
|
|
if(data.address){
|
||
|
|
this.addressData.address_full = this.addressData.address_name + this.addressData.address;
|
||
|
|
}
|
||
|
|
this.addressData.location = data.location;
|
||
|
|
this.addressType = true;
|
||
|
|
},
|
||
|
|
//提交
|
||
|
|
confirm() {
|
||
|
|
let data = this.addressData;
|
||
|
|
if (!data.name) {
|
||
|
|
this.$wanlshop.msg('请填写收货人姓名');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
|
||
|
|
this.$wanlshop.msg('请输入正确的手机号码');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!data.city) {
|
||
|
|
this.$wanlshop.msg('请选择地区');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!data.address) {
|
||
|
|
this.$wanlshop.msg('请填写详细信息');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$wanlshop.prePage().refreshList(data, this.manageType);
|
||
|
|
this.$wanlshop.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
|
||
|
|
this.$wanlshop.back(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.cu-form-group {
|
||
|
|
padding: 0 25rpx;
|
||
|
|
}
|
||
|
|
/* 1.1.5升级 */
|
||
|
|
.cu-form-group.area{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.cu-form-group.area .click{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 99;
|
||
|
|
right: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.cu-form-group .title {
|
||
|
|
min-width: calc(4em + 15px);
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cu-form-group input,
|
||
|
|
.cu-form-group textarea {
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cu-btn.lg {
|
||
|
|
font-size: 32rpx;
|
||
|
|
height: 86rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsScroll {
|
||
|
|
width: 100%;
|
||
|
|
height: 500rpx;
|
||
|
|
padding: 0 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsScroll .item {
|
||
|
|
margin: 25rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsScroll .item view {
|
||
|
|
color: #B8B8B8;
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsScroll .item text {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
</style>
|