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.
539 lines
12 KiB
539 lines
12 KiB
<template>
|
|
<view class="page-bottom-fixed backcor9">
|
|
<form @submit="form_submit" class="form-container">
|
|
<view class="pd-main border-box height100" style="overflow-y: auto;">
|
|
<view class="form-gorup backcolorfff">
|
|
<view class="dis-flex">
|
|
<view class="form-gorup-title marRight10">收货人:
|
|
</view>
|
|
<input type="text" name="name" v-model="userAddress.name" placeholder-class="corf6"
|
|
class="fcor666 flex-1 bs-bb" placeholder="名字">
|
|
</view>
|
|
|
|
|
|
<view class="width100 mart10 border-b">
|
|
|
|
</view>
|
|
|
|
<view class="dis-flex">
|
|
<view class="form-gorup-title marRight10">手机号码:
|
|
</view>
|
|
<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
|
|
placeholder-class="corf6" class="fcor666 flex-1" placeholder="手机号">
|
|
</view>
|
|
|
|
|
|
<!-- -->
|
|
</view>
|
|
|
|
<view class="form-gorup backcolorfff">
|
|
<view class="">
|
|
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
|
<view class="dis-flex ">
|
|
<view class=" form-gorup-title">所在地区:</view>
|
|
<view class="dis-flex flex-1 flex-end">
|
|
<view class=" pickRes fcor666">{{userAddress.region || '请选择'}}</view>
|
|
<view class="icon-ymt to-right font14 fcor666"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</pick-regions>
|
|
|
|
</view>
|
|
|
|
<view class="width100 mart10 border-b">
|
|
|
|
</view>
|
|
|
|
|
|
<!-- <view style="clear: both;"> -->
|
|
<view class="dis-flex">
|
|
<view class="form-gorup-title marRight10">详细地址:</view>
|
|
|
|
<uni-combox @location="location" placeholderClass="corf6" :candidates="candidates" class="flex-1" :isAddress="true" :isShowIcon="false" placeholder="请输入详细地址" v-model="userAddress.address">
|
|
|
|
<view class="selector-item" v-for="(item,index) in candidates" :key="index" @click="getSelect(item)">
|
|
<view class="text1 name">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="text1 address mart5">
|
|
{{item.address}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</uni-combox>
|
|
<!-- <input type="text" name="address" v-model="userAddress.address" maxlength="40"
|
|
placeholder-class="corf6" :class="'fcor666 bs-bb flex-1'" placeholder="详细地址1~40个字符"> -->
|
|
</view>
|
|
|
|
|
|
<!-- </view> -->
|
|
|
|
</view>
|
|
|
|
<view class="default-checkbox " @click="defaultChange">
|
|
<radio :checked="userAddress.is_default" style="transform:scale(1.1)" color="#FF1A34" />
|
|
<text class="font18">设为默认地址</text>
|
|
</view>
|
|
|
|
<view class="bottom-fixed ">
|
|
<button class="btn " type="default" form-type="submit">保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
|
import UniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
|
|
|
|
import {
|
|
insertDeliveryAddress,
|
|
findDeliveryAddressById,
|
|
updateDeliveryAddress,
|
|
baiduApiMapSearch
|
|
} from '@/Utils/physicalObject.js'
|
|
let app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
userAddress: {
|
|
name: "",
|
|
tel: "",
|
|
region: '',
|
|
address: "",
|
|
is_default: false,
|
|
},
|
|
dataParams: null,
|
|
//
|
|
region: [],
|
|
regionId: '',
|
|
//没用上
|
|
// defaultRegion: ['北京市', '市辖区', '东城区'],
|
|
defaultRegionCode: '',
|
|
|
|
candidates:[
|
|
// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",},
|
|
// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",},
|
|
// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",}
|
|
],
|
|
|
|
|
|
};
|
|
},
|
|
|
|
components: {
|
|
pickRegions,
|
|
"uni-combox":UniCombox
|
|
|
|
},
|
|
|
|
onLoad(params) {
|
|
console.log(params)
|
|
this.dataParams = params
|
|
},
|
|
watch: {
|
|
'userAddress.name': {
|
|
handler(n) {
|
|
if (n.length > 5) {
|
|
setTimeout(() => {
|
|
this.userAddress.name = this.userAddress.name.substr(0, 5)
|
|
}, 0)
|
|
}
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
|
|
// regionName() {
|
|
// // 转为字符串
|
|
// // console.log('==============='+this.region.map(item => item))
|
|
// // this.userAddress.region = this.region.map(item => item.name).join(',')
|
|
// return this.region.map(item => item.name).join(',')
|
|
// }
|
|
},
|
|
onReady() {
|
|
let str = ""
|
|
if (this.dataParams && this.dataParams.id) {
|
|
str = "地址编辑"
|
|
} else {
|
|
str = "地址添加"
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title: str,
|
|
});
|
|
if (this.dataParams && this.dataParams.id) {
|
|
this.findAddressById(this.dataParams.id)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
findAddressById(id) {
|
|
let params = {
|
|
id: id
|
|
}
|
|
findDeliveryAddressById(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
let resData = res.return_data;
|
|
this.userAddress = {
|
|
name: resData.consignee,
|
|
tel: resData.phone,
|
|
region: resData.regionName,
|
|
address: resData.address,
|
|
is_default: resData.whetherDefault,
|
|
}
|
|
// console.log(this.defaultRegionCode)
|
|
this.defaultRegionCode = resData.regionId;
|
|
this.regionId = resData.regionId;
|
|
// console.log(this.defaultRegionCode)
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取选择的地区
|
|
handleGetRegion(region) {
|
|
|
|
// let region = JSON.parse(JSON.stringify(reg))
|
|
this.region = region;
|
|
this.regionId = this.region[2].code;
|
|
if (region[0].code == region[1].code && region[0].code == region[2].code) {
|
|
this.userAddress.region = this.region[0].name
|
|
} else {
|
|
this.userAddress.region = this.region.map(item => item.name).join(',');
|
|
}
|
|
|
|
console.log(this.userAddress.region, "获取选择的地区", this.regionId, this.region)
|
|
},
|
|
// 获取数据
|
|
init() {
|
|
|
|
},
|
|
|
|
//点击了定位图标
|
|
location(){
|
|
this.userAddress.address = this.userAddress.address.replace(/\s+/g, "")
|
|
|
|
if(app.globalData.latitude&&app.globalData.longitude){
|
|
this.baiduApiMap(app.globalData.longitude,app.globalData.latitude,this.userAddress.address)
|
|
}else{
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
app.globalData.latitude = res.latitude;
|
|
app.globalData.longitude = res.longitude;
|
|
this.baiduApiMap(app.globalData.longitude,app.globalData.latitude,this.userAddress.address)
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
baiduApiMap(lng,lat,query){
|
|
let params;
|
|
if(query==""){
|
|
params={
|
|
lng,lat
|
|
}
|
|
}else{
|
|
params={
|
|
lng,lat,query
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
baiduApiMapSearch(params).then(res=>{
|
|
|
|
console.log(res)
|
|
if (res.return_code == '000000') {
|
|
|
|
if(res.return_data&&res.return_data.length>0){
|
|
this.candidates = res.return_data;
|
|
|
|
}else{
|
|
this.candidates=[]
|
|
}
|
|
|
|
}else{
|
|
this.candidates=[]
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
|
|
})
|
|
},
|
|
getSelect(desc){
|
|
|
|
console.log(desc)
|
|
this.defaultRegionCode = desc.adcode ;
|
|
this.userAddress.address = desc.address;
|
|
|
|
},
|
|
|
|
// 默认地址设置改变
|
|
defaultChange(e) {
|
|
this.userAddress.is_default = !this.userAddress.is_default
|
|
},
|
|
|
|
|
|
|
|
// 数据提交
|
|
form_submit() {
|
|
|
|
this.userAddress.name = this.userAddress.name.replace(/\s+/g, "")
|
|
this.userAddress.tel = this.userAddress.tel.replace(/\s+/g, "")
|
|
this.userAddress.address = this.userAddress.address.replace(/\s+/g, "")
|
|
// 数据校验
|
|
var validation = [{
|
|
fields: "name",
|
|
msg: "请填写联系人"
|
|
},
|
|
{
|
|
fields: "tel",
|
|
msg: "请填写联系电话",
|
|
vali: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
|
},
|
|
{
|
|
fields: "region",
|
|
msg: "请选择省市区"
|
|
},
|
|
{
|
|
fields: "address",
|
|
msg: "请填写详细地址"
|
|
}
|
|
];
|
|
|
|
this.fields_check(this.userAddress, validation)
|
|
|
|
let isVali = this.fields_check(this.userAddress, validation);
|
|
if (isVali) {
|
|
if (this.dataParams.id) {
|
|
this.updateAddress(this.dataParams.id)
|
|
} else {
|
|
this.addAddress()
|
|
}
|
|
|
|
|
|
}
|
|
|
|
},
|
|
updateAddress(id) {
|
|
let _this = this;
|
|
let params = {
|
|
"id": id,
|
|
"address": _this.userAddress.address,
|
|
"consignee": _this.userAddress.name,
|
|
"phone": _this.userAddress.tel,
|
|
"regionId": _this.regionId,
|
|
"regionName": _this.userAddress.region,
|
|
"whetherDefault": _this.userAddress.is_default
|
|
}
|
|
updateDeliveryAddress(params).then(res => {
|
|
let title;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
} else {
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
//调用上一个页面中的方法
|
|
this.backPageRefresh();
|
|
})
|
|
},
|
|
backPageRefresh() {
|
|
uni.navigateBack({})
|
|
},
|
|
addAddress() {
|
|
let _this = this;
|
|
let params = {
|
|
"address": _this.userAddress.address,
|
|
"consignee": _this.userAddress.name,
|
|
"phone": _this.userAddress.tel,
|
|
"regionId": _this.regionId,
|
|
"regionName": _this.userAddress.region,
|
|
"whetherDefault": _this.userAddress.is_default
|
|
}
|
|
// console.log(params,this.userAddress)
|
|
insertDeliveryAddress(params).then(res => {
|
|
let title;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
} else {
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
|
|
//调用上一个页面中的方法
|
|
_this.backPageRefresh()
|
|
|
|
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 字段数据校验
|
|
* data 待校验的数据, 一维json对象
|
|
* validation 待校验的字段, 格式 [{fields: 'mobile', msg: '请填写手机号码', is_can_zero: 1(是否可以为0)}, ...]
|
|
*/
|
|
fields_check(data, validation) {
|
|
|
|
for (var i in validation) {
|
|
var temp_value = data[validation[i]["fields"]];
|
|
if (!temp_value) {
|
|
uni.showToast({
|
|
title: validation[i]['msg'],
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if (validation[i]["vali"]) {
|
|
// console.log(validation[i]["vali"].test(this.userAddress.tel),this.userAddress.tel)
|
|
if (!(validation[i]["vali"].test(this.userAddress.tel))) {
|
|
uni.showToast({
|
|
title: "请输入正确格式的手机号码",
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
|
|
}
|
|
return true;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.padding-main {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.bottom-fixed {
|
|
position: fixed;
|
|
left: 10%;
|
|
bottom: var(--window-bottom);
|
|
border: none;
|
|
width: 80%;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
|
|
.btn {
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
background-color: #3da7e7;
|
|
margin-bottom: 15px;
|
|
color: #ffffff;
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
|
|
.page-bottom-fixed {
|
|
height: calc(100vh - var(--window-top));
|
|
padding-bottom: 75px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/*表单*/
|
|
.form-container {
|
|
height: 100%;
|
|
|
|
.form-gorup {
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
// overflow: auto;
|
|
|
|
.pickRes,
|
|
input {
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
font-size: 18px;
|
|
// height: 30px;
|
|
// min-height: 60px;
|
|
// line-height: 30px;
|
|
// padding: 8px 0;
|
|
}
|
|
|
|
}
|
|
|
|
.form-gorup-title {
|
|
padding: 20rpx 0;
|
|
margin-bottom: 5rpx;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
width: 74px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.form-gorup-item-left {
|
|
float: left;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.form-group-tips-must {
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #f00;
|
|
}
|
|
|
|
|
|
.selector-item {
|
|
|
|
font-size: 16px;
|
|
text-align: center;
|
|
border-bottom: solid 1px #DDDDDD;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
.name{
|
|
height: 18px;
|
|
line-height: 18px;
|
|
color: #3da7e7;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
|
|
}
|
|
.address{
|
|
font-size: 14px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
color: #666666;
|
|
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|