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.
448 lines
10 KiB
448 lines
10 KiB
<template>
|
|
<view class="page-bottom-fixed backcor9">
|
|
<form @submit="form_submit" class="form-container">
|
|
<view class="pd-main height100">
|
|
<view class="form-gorup backcolorfff">
|
|
<view class="form-gorup-item-left">
|
|
<view class="form-gorup-title marb10">联系人<text class="form-group-tips-must">*</text></view>
|
|
<input type="text" name="name" v-model="userAddress.name" maxlength="5"
|
|
placeholder-class="fcor666" class="fcor666 " placeholder="联系人2~5个字符">
|
|
</view>
|
|
<view class="form-gorup-item-right">
|
|
<view class="form-gorup-title marb10">联系电话<text class="form-group-tips-must">*</text></view>
|
|
<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
|
|
placeholder-class="fcor666" class="fcor666" placeholder="手机号">
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-gorup backcolorfff">
|
|
|
|
<!-- <view> -->
|
|
<!-- <view class="form-gorup-title">省市区<text class="form-group-tips-must">必选</text></view> -->
|
|
<!-- <view class="dis-flex flex-sp" @click="chooseAddress">
|
|
<input type='text' placeholder='请选择地址' :disabled="true" name='region'
|
|
:value='userAddress.region' class="fcor666 flex-1">
|
|
<view class="icon-ymt to-right font14 fcor666">
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view> -->
|
|
<!-- -->
|
|
<view class="">
|
|
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
|
<view class="dis-flex flex-sp form-gorup-title">
|
|
<view class=" flex-1">点击选择省市区<text class="form-group-tips-must">必选</text></view>
|
|
<!-- <input type='text' placeholder='请选择地址' :disabled="false" name='region'
|
|
v-model='userAddress.region' class=" flex-1 fcor333" placeholder-class="fcor333" style="font-size: 16px;">
|
|
-->
|
|
<view class="icon-ymt to-right font14 fcor666">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</pick-regions>
|
|
<view class="font15 fcor666" style="height: 20px;line-height: 20px;">{{userAddress.region || '请选择'}}</view>
|
|
</view>
|
|
|
|
|
|
<!-- </view> -->
|
|
|
|
<view style="clear: both;">
|
|
<view class="form-gorup-title">详细地址<text class="form-group-tips-must">*</text>
|
|
|
|
</view>
|
|
<input type="text" name="address" v-model="userAddress.address" maxlength="40"
|
|
placeholder-class="fcor666" :class="'fcor666 bs-bb '" placeholder="详细地址1~40个字符">
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="default-checkbox " @click="defaultChange">
|
|
<radio :checked="userAddress.is_default" style="transform:scale(0.7)" color="#FF1A34" />
|
|
<text class="">设为默认地址</text>
|
|
</view>
|
|
|
|
<view class="bottom-fixed padding-main">
|
|
<button class=" " type="default" form-type="submit">保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
|
|
|
import {insertDeliveryAddress,findDeliveryAddressById,updateDeliveryAddress } from '@/Utils/physicalObject.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userAddress: {
|
|
name: "",
|
|
tel: "",
|
|
region: '',
|
|
address: "",
|
|
is_default: false,
|
|
},
|
|
dataParams: null,
|
|
//
|
|
region: [],
|
|
regionId:'',
|
|
//没用上
|
|
defaultRegion: ['北京市', '市辖区', '东城区'],
|
|
defaultRegionCode: '120101',
|
|
|
|
|
|
};
|
|
},
|
|
|
|
components: {
|
|
pickRegions
|
|
|
|
},
|
|
|
|
onLoad(params) {
|
|
this.dataParams = params
|
|
},
|
|
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() {
|
|
uni.setNavigationBarTitle({
|
|
title: '地址'+(((this.dataParams.id || null) == null) ? '添加' : '编辑')
|
|
});
|
|
if(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) {
|
|
this.region = region;
|
|
this.userAddress.region = this.region.map(item => item.name).join(',');
|
|
this.regionId = this.region[2].code;
|
|
console.log(this.userAddress.region,"获取选择的地区")
|
|
},
|
|
// 获取数据
|
|
init() {
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 默认地址设置改变
|
|
defaultChange(e) {
|
|
this.userAddress.is_default = !this.userAddress.is_default
|
|
},
|
|
|
|
|
|
|
|
// 数据提交
|
|
form_submit() {
|
|
// 数据校验
|
|
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() {
|
|
let pages = getCurrentPages(); // 当前页面
|
|
let beforePage = pages[pages.length - 2]; // 上一页
|
|
uni.navigateBack({
|
|
success:function(){
|
|
beforePage.$vm.initData();
|
|
// console.log("返回成功!");
|
|
}
|
|
})
|
|
},
|
|
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: 0;
|
|
bottom: 0;
|
|
border: none;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
}
|
|
|
|
.page-bottom-fixed {
|
|
height: 100vh;
|
|
padding-bottom: 120rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*表单*/
|
|
.form-container {
|
|
height: 100%;
|
|
|
|
.form-gorup {
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: auto;
|
|
|
|
input {
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.form-gorup-title {
|
|
padding: 20rpx 0;
|
|
margin-bottom: 5rpx;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.form-gorup-item-left {
|
|
float: left;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.form-group-tips-must {
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #f00;
|
|
}
|
|
|
|
/*
|
|
* 三级联动
|
|
*/
|
|
// .select-address {
|
|
// box-sizing: border-box;
|
|
// height: 70rpx;
|
|
// line-height: 70rpx;
|
|
// padding: 0 10rpx;
|
|
// height: auto;
|
|
// overflow: auto;
|
|
// .fl{
|
|
// float: left;
|
|
// }
|
|
// }
|
|
// .select-address .section {
|
|
// width: 33.33%;
|
|
// box-sizing: border-box;
|
|
|
|
// }
|
|
// .select-address .section:not(:first-child) {
|
|
// padding: 0 5rpx;
|
|
// }
|
|
|
|
/**
|
|
* 地址信息
|
|
*/
|
|
// .default-checkbox image {
|
|
// width: 35rpx;
|
|
// height: 35rpx !important;
|
|
// }
|
|
// .address-value {
|
|
// padding-right: 110rpx;
|
|
// }
|
|
// .map-icon {
|
|
// bottom: 0;
|
|
// right: 0;
|
|
// width: 90rpx;
|
|
// height: 80rpx;
|
|
// line-height: 80rpx;
|
|
// }
|
|
// .auto-discern {
|
|
// bottom: 20rpx;
|
|
// right: 20rpx;
|
|
// z-index: 2;
|
|
// }
|
|
// .auto-discern button {
|
|
// line-height: inherit;
|
|
// padding: 5rpx 20rpx !important;
|
|
// }
|
|
|
|
/*
|
|
* 身份信息
|
|
*/
|
|
// .idcard-container {
|
|
// background: #e6e6e6;
|
|
// }
|
|
// .idcard-container .form-upload-data .item image {
|
|
// width: 256rpx;
|
|
// height: 170rpx;
|
|
// border: 1px dashed #c2c2c2;
|
|
// }
|
|
</style>
|
|
|