You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
250 lines
6.8 KiB
Vue
250 lines
6.8 KiB
Vue
<template>
|
|
<div class="p-root-person-addressForm g_w_all g_h_all g_bg_f_5 g_kuaishou">
|
|
<g-panel-form-slot v-if="!currentId || showPage" :list="[
|
|
{
|
|
icon: '',
|
|
label: '姓名',
|
|
value: submitInfo.contacts,
|
|
placeholder: '请输入姓名',
|
|
path: '',
|
|
tip: 'slot-name',
|
|
type: 'slot',
|
|
pColumn: 10,
|
|
},
|
|
{
|
|
icon: '',
|
|
label: '手机号',
|
|
value: submitInfo.contactsTel,
|
|
placeholder: '请输入手机号',
|
|
path: '',
|
|
pColumn: 10,
|
|
tip: 'slot-mobile',
|
|
type: 'slot',
|
|
},
|
|
{
|
|
icon: '',
|
|
label: '详细地址',
|
|
value: submitInfo.addressStr,
|
|
path: '',
|
|
tip: 'slot-choose-address',
|
|
type: 'slot',
|
|
suffix: 'icon-dizhi1',
|
|
placeholder: '请选择详细地址',
|
|
fontSize: '16px',
|
|
pColumn: 17,
|
|
require: false,
|
|
},
|
|
]" @changeAddress="getAddress" @chooseAddress="getAddressInfo" @changeName="(e) => (submitInfo.contacts = e)"
|
|
@changeMobile="(e) => (submitInfo.contactsTel = e)">
|
|
</g-panel-form-slot>
|
|
<div
|
|
class="g_flex_row_between flex_center g_pt_16 g_pb_16 g_pl_10 g_pr_10 g_bg_f g_ml_10 g_mr_10 g_radius_6 g_mt_16">
|
|
<div class="g_fs_16">标签</div>
|
|
<div class="g_flex_row_start">
|
|
<div @click="addressClassify = 0" :class="addressClassify === 0 ? 'active' : ''"
|
|
class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14">家</div>
|
|
<div @click="addressClassify = 1" :class="addressClassify === 1 ? 'active' : ''"
|
|
class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14 g_ml_8">公司
|
|
</div>
|
|
<div @click="addressClassify = 2" :class="addressClassify === 2 ? 'active' : ''"
|
|
class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14 g_ml_8">其它
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px; ">
|
|
<radio-group class="dib">
|
|
<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" color="#3578f6"
|
|
style="transform: scale(0.7)" />
|
|
</radio-group>
|
|
我已阅读并同意
|
|
<navigator url="/root/person/agreeUser" class="aLink">《用户服务协议》</navigator>
|
|
及
|
|
<navigator url="/root/person/agreePrive" class="aLink">《隐私政策》</navigator>
|
|
</view>
|
|
|
|
<div class="g_pt_70">
|
|
<g-button btnText="保存" type="primary" @clickBtn="submitForm"></g-button>
|
|
</div>
|
|
<div class="g_text_c g_f_14 g_mt_12" style="color: #576b95" @click="delAddress" v-if="currentId">删除该地址</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
var QQMapWX = require("../../utils/qqmap-wx-jssdk.min.js");
|
|
const app = getApp();
|
|
// pages/messageDetail/index.js
|
|
export default {
|
|
onShareAppMessage() {
|
|
return this.G.shareFun();
|
|
},
|
|
data() {
|
|
return {
|
|
submitInfo: {},
|
|
qqmapsdk: null,
|
|
addressClassify: null,
|
|
showPage: true,
|
|
currentId: null,
|
|
addressStr: '',
|
|
switchChecked: false
|
|
};
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
console.log(options);
|
|
if (options.id) {
|
|
this.currentId = options.id;
|
|
this.getDetail();
|
|
}
|
|
this.qqmapsdk = new QQMapWX({
|
|
key: "LHQBZ-MLTEG-BO4QK-QJ2TH-NLGZJ-7GFAS",
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
switchChange() {
|
|
console.log(this.switchChecked);
|
|
this.switchChecked = !this.switchChecked;
|
|
},
|
|
getAddress(e) {
|
|
console.log(e);
|
|
},
|
|
getAddressInfo(e) {
|
|
console.log(e);
|
|
let that = this
|
|
that.addressStr = e.address;
|
|
this.qqmapsdk.reverseGeocoder({
|
|
location: `${e.lat},${e.lng}`,
|
|
success: function(res) {
|
|
console.log(res.result);
|
|
let address = res.result.address_component;
|
|
that.submitInfo.addressStr =
|
|
`${address.province} ${address.city} ${address.district} ` + that.addressStr;
|
|
that.submitInfo.provinceName = res.result.address_component.province;
|
|
that.submitInfo.cityName = res.result.address_component.city;
|
|
that.submitInfo.districtName = res.result.address_component.district;
|
|
that.submitInfo.address = that.addressStr;
|
|
that.$forceUpdate();
|
|
console.log('that.submitInfo', that.submitInfo);
|
|
},
|
|
fail: function(res) {
|
|
console.log(res);
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
getDetail() {
|
|
var that = this;
|
|
that.G.Post(that.api.user_getAddressDetail + `?id=${that.currentId}`, {}, (res) => {
|
|
console.log(res);
|
|
that.submitInfo.addressStr = `${res.provinceName} ${res.cityName} ${res.districtName} ` + res
|
|
.address;
|
|
that.submitInfo.contacts = res.contacts;
|
|
that.submitInfo.contactsTel = res.contactsTel;
|
|
that.addressClassify = res.classify;
|
|
that.showPage = true;
|
|
console.log(that.submitInfo);
|
|
});
|
|
},
|
|
selectAddressClassify(e) {
|
|
var that = this;
|
|
|
|
var classify = e.currentTarget.dataset.classify;
|
|
console.log(classify);
|
|
this.addressClassify = classify;
|
|
},
|
|
delAddress: function(e) {
|
|
var that = this;
|
|
// var record = e.currentTarget.dataset.record;
|
|
// console.log(record);
|
|
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: `确定要删除该地址吗？`,
|
|
cancelColor: "#666666",
|
|
confirmColor: "#ff4400",
|
|
success(res) {
|
|
if (res.confirm) {
|
|
that.G.Post(that.api.user_delAddress, {
|
|
id: that.currentId
|
|
}, (res) => {
|
|
console.log(res);
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
}, 2000);
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log("用户点击取消");
|
|
}
|
|
},
|
|
});
|
|
},
|
|
submitForm() {
|
|
var that = this;
|
|
console.log(this.submitInfo);
|
|
// this.submitInfo.provinceName = "河南省";
|
|
// this.submitInfo.cityName = "郑州市";
|
|
// this.submitInfo.districtName = "金水区";
|
|
if (!this.submitInfo.contacts) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请输入姓名",
|
|
});
|
|
return;
|
|
}
|
|
var myreg = /^[1][3456789][0-9]{9}$/;
|
|
if (!myreg.test(this.submitInfo.contactsTel) || this.submitInfo.contactsTel == "") {
|
|
wx.showToast({
|
|
icon: "none",
|
|
title: "请输入正确手机号",
|
|
});
|
|
|
|
return;
|
|
}
|
|
if (that.addressClassify == null) {
|
|
wx.showToast({
|
|
icon: "none",
|
|
title: "请选择标签",
|
|
});
|
|
|
|
return;
|
|
} else {
|
|
this.submitInfo.classify = this.addressClassify;
|
|
}
|
|
if (this.currentId) {
|
|
this.submitInfo.id = this.currentId;
|
|
}
|
|
this.G.Post(this.api.user_addAddress, this.submitInfo, (res) => {
|
|
console.log(res);
|
|
wx.navigateBack({
|
|
delta: 1,
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.p-root-person-addressForm {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.active {
|
|
background: #3578f6;
|
|
color: #fff;
|
|
border: 1rpx solid #3578f6;
|
|
}
|
|
</style> |