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.

584 lines
23 KiB
Vue

1 year ago
<template>
<view>
<form @submit="onSubmit">
<view class="weui-cells__group weui-cells__group_form">
<view class="weui-cells weui-cells_form">
<view class="weui-cell bb1">
<view class="weui-cell__hd">
<label class="weui-label">姓名</label>
</view>
<view class="weui-cell__bd">
<input
name="contacts"
type="text"
:value="address.contacts"
class="weui-input tr"
placeholder="请输入姓名"
placeholder-class="weui-input__placeholder"
/>
</view>
</view>
<view class="weui-cell bb1">
<view class="weui-cell__hd">
<label class="weui-label">手机号</label>
</view>
<view class="weui-cell__bd">
<input
name="contactsTel"
type="number"
:value="address.contactsTel"
class="weui-input tr"
placeholder="请输入手机号"
placeholder-class="weui-input__placeholder"
/>
</view>
</view>
<!-- <view class="weui-cell">
<view class="weui-cell__hd"><label class="weui-label">地区</label></view>
<view class="weui-cell__bd">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndexTemp}}" range="{{multiArrayTemp}}">
<view class="picker tr">
<view wx:if="{{multiSelected}}" style="text-align: left; display: inline-block">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}</view>
<view wx:else style="text-align: left;display: inline-block;color: #b2b2b2;">请选择地区</view>
</view>
</picker>
</view>
</view>-->
<view class="weui-cell">
<view class="weui-cell__hd p0">
<label class="weui-label m0">详细地址</label>
</view>
<view class="weui-cell__bd textarea tr">
<textarea
name="address"
:value="addressStr"
class="weui-textarea"
placeholder="请输入详细地址"
style
placeholder-class="weui-input__placeholder"
:auto-height="true"
></textarea>
</view>
<view>
<i class="iconfont icon-dingwei pl8" @click="chooseMap" style="padding: 8px 0 8px 8px"></i>
</view>
</view>
<!-- <view class="weui-cell"></view> -->
</view>
</view>
<view class="weui-cell mark mt16">
<view class="weui-cell__hd">
<label class="weui-label" style="width: 60px">标签</label>
</view>
<view class="weui-cell__bd tr">
<view
@tap="selectAddressClassify"
data-classify="0"
:class="'adTag ' + (addressClassify == 0 && addressClassify !== '' && addressClassify !== null ? 'active' : '')"
>
</view>
<view @tap="selectAddressClassify" data-classify="1" :class="'adTag ' + (addressClassify == 1 ? 'active' : '')">公司</view>
<view @tap="selectAddressClassify" data-classify="2" :class="'adTag ' + (addressClassify == 2 ? 'active' : '')">其它</view>
</view>
</view>
<button formType="submit" :disabled="btnLoading" class="loginOut normalBtn" style="font-weight: 400; margin-top: 70px; margin-bottom: 20px">保存</button>
<view class="tc f14" hover-class="thover" style="color: #576b95" @tap="delAddress" v-if="recordId"></view>
<!-- 2{{recordId}}3 -->
</form>
</view>
</template>
<script>
const app = getApp();
import { isEmptyCheck } from '../../../utils/commonUtil';
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
// pages/addAddress/index.js
export default {
data() {
return {
multiSelected: false,
multiIndex: [0, 0, 0],
multiIndexTemp: [0, 0, 0],
// multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
multiArray: [[], [], []],
multiArrayTemp: [[], [], []],
multiArrayRecord: [[], [], []],
title: '添加地址',
btnLoading: false,
address: {
contacts: '',
contactsTel: ''
},
addressClassify: '',
addressStr: '',
recordId: '',
locationObj: {
provinceName: '',
cityName: '',
districtName: ''
}
// provinceId: '',
// cityId: '',
// districtId: '',
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
console.log(options);
if (!isEmptyCheck(options.id)) {
this.recordId = options.id;
this.title = '修改地址';
this.setData({
recordId: options.id
});
this.getDetail();
} else {
this.getProvinceByPid();
}
uni.setNavigationBarTitle({
title: this.title
});
qqmapsdk = new QQMapWX({
key: '5PTBZ-YI7C6-MZGS3-ES7QN-4T5O2-EJFVR'
});
console.log(123);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
methods: {
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) {
console.log('用户点击确定');
uni.request({
url: app.globalData.ip + '/user/address/deleteUserAddress',
method: 'POST',
header: app.globalData.headers,
data: {
id: that.recordId
},
success: function (res) {
console.log(res);
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 2000
});
setTimeout(() => {
uni.navigateBack({
delta: -1
});
}, 2000);
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getProvinceByPid: function () {
var that = this;
uni.request({
url: app.globalData.ip + '/city/getProvince',
data: {},
header: app.globalData.headers,
method: 'POST',
success: function (res) {
console.log(res);
if (res.data.status == 200) {
that.multiArrayRecord[0] = [
{
id: -1,
name: '请选择'
}
].concat(res.data.data);
var nameArray = ['请选择'];
res.data.data.forEach((item, index) => {
nameArray.push(item.name);
});
that.multiArrayTemp[0] = nameArray;
that.setData({
multiArrayTemp: that.multiArrayTemp
});
//如果有省市回显处理
if (
app.globalData.isNotEmptyCheck(that.address.provinceId) &&
app.globalData.isNotEmptyCheck(that.address.cityId) &&
app.globalData.isNotEmptyCheck(that.address.districtId)
) {
that.multiArrayRecord[0].forEach((item, index) => {
if (item.id == that.address.provinceId) {
that.multiIndex[0] = index;
}
});
that.setData({
multiArray: that.multiArrayTemp,
multiIndex: that.multiIndex,
multiIndexTemp: that.multiIndex
});
that.getCityByPid2(1, that.address.provinceId);
}
} else {
app.globalData.showTips(that, res.data.msg);
}
}
});
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变携带值为', e.detail.value);
var that = this;
var multiSelected = false;
if (e.detail.value[0] > 0 && e.detail.value[1] > 0 && e.detail.value[2] > 0) {
multiSelected = true;
}
this.setData({
multiIndex: e.detail.value,
multiSelected: multiSelected,
multiArray: that.multiArrayTemp
});
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var that = this;
if (e.detail.column == 0) {
that.multiIndexTemp[0] = e.detail.value;
that.multiIndexTemp[1] = 0;
that.multiIndexTemp[2] = 0;
that.multiArrayTemp[1] = [];
that.multiArrayTemp[2] = [];
this.setData({
multiIndexTemp: that.multiIndexTemp,
multiArrayTemp: that.multiArrayTemp
});
}
if (e.detail.column < 2) {
this.getCityByPid(e.detail.column, e.detail.value);
}
},
getCityByPid: function (column, value) {
var that = this;
// var pid = that.data.userDetails.bankProvinceCode;
console.log(that.multiArrayRecord[column][value]);
var pid = that.multiArrayRecord[column][value].id;
uni.request({
url: app.globalData.ip + '/city/getCityByPid',
data: {
pid: pid
},
header: app.globalData.headers,
method: 'POST',
success: function (res) {
console.log(res);
if (res.data.status == 200) {
that.multiArrayRecord[column + 1] = [
{
id: -1,
name: '请选择'
}
].concat(res.data.data);
var nameArray = ['请选择'];
res.data.data.forEach((item, index) => {
nameArray.push(item.name);
});
that.multiArrayTemp[column + 1] = nameArray;
that.setData({
multiArrayTemp: that.multiArrayTemp
});
} else {
app.globalData.showTips(that, res.data.msg);
}
}
});
},
getCityByPid2: function (column, pid) {
var that = this;
uni.request({
url: app.globalData.ip + '/city/getCityByPid',
data: {
pid: pid
},
header: app.globalData.headers,
method: 'POST',
success: function (res) {
console.log(res);
if (res.data.status == 200) {
that.multiArrayRecord[column] = [
{
id: -1,
name: '请选择'
}
].concat(res.data.data);
var nameArray = ['请选择'];
res.data.data.forEach((item, index) => {
nameArray.push(item.name);
});
that.multiArrayTemp[column] = nameArray;
that.multiArrayRecord[column].forEach((item, index) => {
if (column == 1 && item.id == that.address.cityId) {
that.multiIndex[column] = index;
} else if (column == 2 && item.id == that.address.districtId) {
that.multiIndex[column] = index;
}
});
that.setData({
multiArray: that.multiArrayTemp,
multiArrayTemp: that.multiArrayTemp,
multiIndex: that.multiIndex,
multiIndexTemp: that.multiIndex
});
if (column == 1) {
that.getCityByPid2(2, that.address.cityId);
}
} else {
app.globalData.showTips(that, res.data.msg);
}
}
});
},
selectAddressClassify: function (e) {
var that = this;
var classify = e.currentTarget.dataset.classify;
console.log(classify);
that.setData({
addressClassify: classify
});
},
getDetail() {
var that = this;
uni.request({
url: app.globalData.ip + '/user/address/getUserAddressDetail?id=' + that.recordId,
method: 'GET',
header: app.globalData.headers,
data: {},
success: function (res) {
console.log(res);
if (app.globalData.isNotEmptyCheck(res.data.data)) {
that.setData({
address: res.data.data,
addressClassify: res.data.data.classify,
addressStr: res.data.data.address
});
if (
app.globalData.isNotEmptyCheck(res.data.data.provinceId) &&
app.globalData.isNotEmptyCheck(res.data.data.cityId) &&
app.globalData.isNotEmptyCheck(res.data.data.districtId)
) {
that.setData({
multiSelected: true
});
}
that.getProvinceByPid();
}
}
});
},
onSubmit(e) {
console.log(e);
var that = this;
that.setData({
btnLoading: true
});
if (app.globalData.isEmptyCheck(e.detail.value.contacts)) {
uni.showToast({
icon: 'none',
title: '请输入姓名',
duration: 3000
});
that.setData({
btnLoading: false
});
return;
}
var myreg = /^[1][3456789][0-9]{9}$/;
if (!myreg.test(e.detail.value.contactsTel) || e.detail.value.contactsTel == '') {
uni.showToast({
icon: 'none',
title: '请输入正确手机号',
duration: 3000
});
that.setData({
btnLoading: false
});
return;
}
// if (that.data.multiIndex[0] == 0 || that.data.multiIndex[1] == 0 || that.data.multiIndex[2] == 0) {
// wx.showToast({
// icon: "none",
// title: "请选择详细地区",
// duration: 3000,
// });
// that.setData({
// btnLoading: false,
// });
// return;
// }
if (!e.detail.value.address) {
uni.showToast({
icon: 'none',
title: '请输入详细地址',
duration: 3000
});
that.setData({
btnLoading: false
});
return;
}
// if (app.isEmptyCheck(that.data.addressClassify)) {
// wx.showToast({
// icon: "none",
// title: "请选择标签",
// duration: 3000,
// });
// that.setData({
// btnLoading: false,
// });
// return;
// }
var formData = e.detail.value;
formData['id'] = that.recordId;
formData['classify'] = that.addressClassify;
if (that.locationObj.provinceName) {
// formData["provinceId"] = that.data.multiArrayRecord[0][that.data.multiIndex[0]].id;
// formData["cityId"] = that.data.multiArrayRecord[1][that.data.multiIndex[1]].id;
// formData["districtId"] = that.data.multiArrayRecord[2][that.data.multiIndex[2]].id;
formData['provinceName'] = that.locationObj.provinceName;
formData['cityName'] = that.locationObj.cityName;
formData['districtName'] = that.locationObj.districtName;
} else {
uni.showToast({
icon: 'none',
title: '请选择地区',
duration: 3000
});
}
console.log(formData);
that.setData({
btnLoading: false
});
uni.request({
url: app.globalData.ip + '/user/address/addOrUpdateUserAddress',
method: 'POST',
header: app.globalData.headers,
data: formData,
success: function (res) {
console.log(res);
if (res.data.status == 200) {
uni.navigateBack({
delta: 1
});
} else {
uni.showToast({
icon: 'none',
title: res.data.msg,
duration: 2000
});
that.setData({
btnLoading: false
});
}
}
});
},
chooseMap: function () {
var that = this;
console.log('1111111');
// wx.chooseLocation({
uni.chooseLocation({
success: function (res) {
console.log('res', res);
that.addressStr = res.name;
qqmapsdk.reverseGeocoder({
location: `${res.latitude},${res.longitude}`,
success: function (res) {
console.log(res.result);
let address = res.result.address_component;
that.addressStr = `${address.province} ${address.city} ${address.district} ` + that.addressStr;
that.setData({
addressStr: that.addressStr,
locationObj: {
provinceName: res.result.address_component.province,
cityName: res.result.address_component.city,
districtName: res.result.address_component.district
}
});
},
fail: function (res) {
console.log(res);
}
});
},
fail: function (e) {
console.log(e);
}
});
},
goAddAddress: function () {
uni.navigateTo({
url: '/pages/addressBook/index'
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage1: function () {}
}
};
</script>
<style>
@import './index.css';
</style>