|
|
@@ -0,0 +1,536 @@
|
|
|
+<template>
|
|
|
+ <zj-page-layout :hasFooter="true">
|
|
|
+ <u-notice-bar direction="column" icon=" " :text="['地址信息仅用于上门服务，隐私信息将完全保密']"></u-notice-bar>
|
|
|
+
|
|
|
+ <view class="form-container">
|
|
|
+ <view class="clipboard">
|
|
|
+ <view class="box">
|
|
|
+ <u--textarea v-model="clipboard" border="none" placeholder="试试粘贴“收件人姓名，手机号，详细地址”，可快速识别您的用户及地址信息"></u--textarea>
|
|
|
+ <view class="btns">
|
|
|
+ <u-button text="清空" size="small" @click="clipboard = ''"></u-button>
|
|
|
+ <u-button type="primary" text="识别" size="small" @click="shibie"></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">联系人</view>
|
|
|
+ <view class="right input"><input type="text" placeholder="请输入联系人" v-model="formData.name"></view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">手机号码</view>
|
|
|
+ <view class="right input"><input type="number" placeholder="请输入手机号码" v-model="formData.phone"></view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">所在地区</view>
|
|
|
+ <view class="right">
|
|
|
+ <picker @change="onRegionChange" v-model="regionValue" mode="region">
|
|
|
+ <view class="picker">
|
|
|
+ <view v-if="regionValue.length">{{regionValue[0] + '/' +regionValue[1] + '/' +regionValue[2]}}</view>
|
|
|
+ <view v-else style="color: #666666;">请选择省/市/区</view>
|
|
|
+ <text class="iconfont icon-jinru"></text>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">所在街道</view>
|
|
|
+ <view class="right">
|
|
|
+ <picker @change="onStreetChange" :value="streetValue" :range="streetList" range-key="name" :disabled="!regionValue[2]">
|
|
|
+ <view class="picker">
|
|
|
+ <view v-if="streetValue !== ''">{{streetList[streetValue].name}}</view>
|
|
|
+ <view v-else style="color: #666666;">请选择街道</view>
|
|
|
+ <text class="iconfont icon-jinru"></text>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">详细地址</view>
|
|
|
+ <view class="right textarea">
|
|
|
+ <textarea placeholder="请输入详细地址" auto-height v-model="formData.address"></textarea>
|
|
|
+ <view class="r" @tap="getLocation"><text class="iconfont icon-dingwei1"></text>定位</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="title">门牌号</view>
|
|
|
+ <view class="right input"><input type="text" placeholder="请输入门牌号" maxlength="15" v-model="formData.houseNo"></view>
|
|
|
+ </view>
|
|
|
+ <view class="row mt20">
|
|
|
+ <view class="title">设为默认</view>
|
|
|
+ <view class="right default"><switch @change="switchChange" color="#3D8FFD" v-model="formData.defaultAddr" :checked="formData.defaultAddr" style="transform:scale(0.7)" /></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template slot="footer">
|
|
|
+ <view class="footer-btn-group">
|
|
|
+ <u-button text="删除" @click="handleDelete" v-if="editId"></u-button>
|
|
|
+ <u-button text="保存" type="primary" @click="submitForm"></u-button>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </zj-page-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {mapState} from 'vuex';
|
|
|
+ import {getArea} from '@/common/utils/util.js';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ editId: null, // 编辑的id
|
|
|
+ regionValue: [], // 省市区值
|
|
|
+ streetList: [],
|
|
|
+ streetValue: '',
|
|
|
+ formData: { // 表单数据
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ area: '',
|
|
|
+ street: '',
|
|
|
+ address: '',
|
|
|
+ houseNo: '',
|
|
|
+ defaultAddr: false,
|
|
|
+ },
|
|
|
+ canClickSave: true, // 能否点击提交
|
|
|
+ clipboard: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapState(['userInfo', 'isLogin', 'userId'])
|
|
|
+ },
|
|
|
+ onLoad({id, addressData}) {
|
|
|
+ this.editId = id;
|
|
|
+ if(id) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '编辑地址'
|
|
|
+ })
|
|
|
+ this.getAddressData();
|
|
|
+ }
|
|
|
+ if(addressData) {
|
|
|
+ addressData = JSON.parse(addressData);
|
|
|
+ this.formData = {
|
|
|
+ name: addressData.name,
|
|
|
+ phone: addressData.phone,
|
|
|
+ province: addressData.province,
|
|
|
+ city: addressData.city,
|
|
|
+ area: addressData.area,
|
|
|
+ address: addressData.address,
|
|
|
+ houseNo: addressData.houseNo,
|
|
|
+ defaultAddr: addressData.defaultAddr,
|
|
|
+ }
|
|
|
+ this.regionValue = [addressData.province, addressData.city, addressData.area];
|
|
|
+ this.getStreetList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getRegion(address) {
|
|
|
+ const result = new Promise((resolve, reject) => {
|
|
|
+ this.$axios({
|
|
|
+ url: '/lbs/amap/region/query2',
|
|
|
+ method: 'post',
|
|
|
+ server: 'pc',
|
|
|
+ params: {
|
|
|
+ address
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ resolve(res.data);
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ async shibie() {
|
|
|
+ // 莫阿宝，13686123158，广东省广州市天河区棠下街道天河软件园
|
|
|
+ // console.log(this.smart(this.clipboard));
|
|
|
+ const data = this.smart(this.clipboard);
|
|
|
+
|
|
|
+ this.formData.name = data.name || '';
|
|
|
+ this.formData.phone = data.phone || '';
|
|
|
+
|
|
|
+ if(data.address) {
|
|
|
+ let addressData = await this.getRegion(data.address);
|
|
|
+ this.formData.province = addressData.provinceName || '';
|
|
|
+ this.formData.city = addressData.cityName || '';
|
|
|
+ this.formData.area = addressData.areaName || '';
|
|
|
+ this.formData.address = data.address.replace(`${addressData.provinceName || ''}${addressData.cityName || ''}${addressData.areaName || ''}${addressData.name || ''}`, '') || '';
|
|
|
+ this.regionValue = [addressData.provinceName || '', addressData.cityName || '', addressData.areaName || ''];
|
|
|
+ addressData.name && this.getStreetList(addressData.name);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ smart(data) {
|
|
|
+ data = this.stripscript(data); //过滤特殊字符
|
|
|
+
|
|
|
+ let obj = {};
|
|
|
+ let copyData = JSON.parse(JSON.stringify(data)).split(" ");
|
|
|
+
|
|
|
+ copyData.forEach((item, index) => {
|
|
|
+ if (item) {
|
|
|
+ let addressObj = this.smartData(item);
|
|
|
+ console.log(addressObj)
|
|
|
+
|
|
|
+ obj = Object.assign(obj, addressObj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+
|
|
|
+ smartData(data) {
|
|
|
+ let smartObj = {};
|
|
|
+ //address= data.replace(/\s/g, ''); //去除空格
|
|
|
+
|
|
|
+ // 手机号匹配（提取出手机号）
|
|
|
+ let phone = data.match(/(86-[1][0-9]{10}) | (86[1][0-9]{10})|([1][0-9]{10})/g);
|
|
|
+
|
|
|
+ // 如果存在手机号
|
|
|
+ if (phone) {
|
|
|
+ smartObj.phone = phone[0];
|
|
|
+
|
|
|
+ if(data != phone[0]) {
|
|
|
+ // 如果手机号是开头或结尾
|
|
|
+ if(data.startsWith(phone[0]) || data.endsWith(phone[0])) {
|
|
|
+ let remainData = data.replace(phone[0], ''); // 除了手机号，剩下的内容
|
|
|
+ // 如果还有剩下的内容
|
|
|
+ if(remainData) {
|
|
|
+ if (new RegExp(/省|市|区/).test(remainData)) {
|
|
|
+ smartObj.address = remainData;
|
|
|
+ } else {
|
|
|
+ smartObj.name = remainData;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果手机号在中间
|
|
|
+ else {
|
|
|
+ let remainDatas = data.replace(phone[0], '&&').split('&&'); // 除了手机号，剩下的内容
|
|
|
+ for(let i = 0; i < remainDatas.length; i++) {
|
|
|
+ if(new RegExp(/省|市|区/).test(remainDatas[i])) {
|
|
|
+ smartObj.address = remainDatas[i];
|
|
|
+ }else {
|
|
|
+ smartObj.name = remainDatas[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果不存在手机号
|
|
|
+ else {
|
|
|
+ if (new RegExp(/省|市|区/).test(data)) {
|
|
|
+ smartObj.address = data;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ smartObj.name = data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return smartObj;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 过滤特殊字符
|
|
|
+ stripscript(s) {
|
|
|
+ s = s.replace(/(\d{3})-(\d{4})-(\d{4})/g, "$1$2$3");
|
|
|
+ s = s.replace(/(\d{3}) (\d{4}) (\d{4})/g, "$1$2$3");
|
|
|
+ var pattern = new RegExp(
|
|
|
+ "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“’。，、？-]"
|
|
|
+ );
|
|
|
+ var rs = "";
|
|
|
+ for (var i = 0; i < s.length; i++) {
|
|
|
+ rs = rs + s.substr(i, 1).replace(pattern, " ");
|
|
|
+ }
|
|
|
+ rs = rs.replace(/[\r\n]/g, "");
|
|
|
+ return rs;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 获取地址信息
|
|
|
+ getAddressData() {
|
|
|
+ this.$axios({
|
|
|
+ url: '/user/address/detail',
|
|
|
+ method: 'get',
|
|
|
+ params: {
|
|
|
+ userAddressId: this.editId
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.formData = {
|
|
|
+ name: res.data.name,
|
|
|
+ phone: res.data.phone,
|
|
|
+ province: res.data.province,
|
|
|
+ city: res.data.city,
|
|
|
+ area: res.data.area,
|
|
|
+ address: res.data.address,
|
|
|
+ houseNo: res.data.houseNo,
|
|
|
+ defaultAddr: res.data.defaultAddr,
|
|
|
+ }
|
|
|
+ this.regionValue = [res.data.province, res.data.city, res.data.area];
|
|
|
+ this.getStreetList(res.data.street);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 地图选点
|
|
|
+ getLocation() {
|
|
|
+ let that = this;
|
|
|
+ uni.chooseLocation({
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res);
|
|
|
+ let SSQ_value = getArea(res.address);
|
|
|
+ if(!SSQ_value.Province) {
|
|
|
+ SSQ_value.Province = SSQ_value.City;
|
|
|
+ }
|
|
|
+ that.formData.province = SSQ_value.Province;
|
|
|
+ that.formData.city = SSQ_value.City;
|
|
|
+ that.formData.area = SSQ_value.Country;
|
|
|
+ let regionValue = [];
|
|
|
+ regionValue.push(SSQ_value.Province);
|
|
|
+ regionValue.push(SSQ_value.City);
|
|
|
+ regionValue.push(SSQ_value.Country);
|
|
|
+ that.regionValue = regionValue;
|
|
|
+ that.formData.address = res.address.slice(res.address.indexOf(SSQ_value.Country) + SSQ_value.Country.length) + res.name;
|
|
|
+ that.getStreetList();
|
|
|
+ that.streetValue = '';
|
|
|
+ that.formData.street = '';
|
|
|
+ },
|
|
|
+ fail: function(res) {
|
|
|
+ uni.getSetting({
|
|
|
+ success: function(res) {
|
|
|
+ if (!res.authSetting['scope.userLocation']) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '是否授权当前位置',
|
|
|
+ content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
|
|
|
+ success(tip) {
|
|
|
+ if (tip.confirm) {
|
|
|
+ uni.openSetting({
|
|
|
+ success: function(data) {
|
|
|
+ if (data.authSetting["scope.userLocation"] === true) {
|
|
|
+ that.$successToast('授权成功');
|
|
|
+ setTimeout(() => {
|
|
|
+ that.getLocation();
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换省市区
|
|
|
+ onRegionChange(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ this.regionValue = e.detail.value;
|
|
|
+ this.formData.province = this.regionValue[0];
|
|
|
+ this.formData.city = this.regionValue[1];
|
|
|
+ this.formData.area = this.regionValue[2];
|
|
|
+ this.getStreetList();
|
|
|
+ this.streetValue = '';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取街道列表
|
|
|
+ getStreetList(street) {
|
|
|
+ this.$axios({
|
|
|
+ url: '/common/street',
|
|
|
+ method: 'get',
|
|
|
+ params: {
|
|
|
+ province: this.regionValue[0],
|
|
|
+ city: this.regionValue[1],
|
|
|
+ area: this.regionValue[2],
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.streetList = res.data;
|
|
|
+ if(street) {
|
|
|
+ let index = this.findElem(this.streetList, 'name', street);
|
|
|
+ this.streetValue = index;
|
|
|
+ this.formData.street = street;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换街道
|
|
|
+ onStreetChange(e) {
|
|
|
+ console.log(e.detail.value);
|
|
|
+ this.streetValue = e.detail.value;
|
|
|
+ this.formData.street = this.streetList[this.streetValue].name;
|
|
|
+ },
|
|
|
+
|
|
|
+ findElem(array, attr, val) {
|
|
|
+ for (var i = 0; i < array.length; i++) {
|
|
|
+ if (array[i][attr] == val) {
|
|
|
+ return i; //返回当前索引值
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ switchChange(e) {
|
|
|
+ console.log(e.detail.value);
|
|
|
+ this.formData.defaultAddr = e.detail.value;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 验证数据
|
|
|
+ vailateData() {
|
|
|
+ if(!this.formData.name) {
|
|
|
+ this.$toast('请填写姓名');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.formData.phone) {
|
|
|
+ this.$toast('请填写手机号码');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!(/^1[3456789]\d{9}$/.test(this.formData.phone))) {
|
|
|
+ this.$toast('请填写正确的手机号码');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.formData.province) {
|
|
|
+ this.$toast('请选择所在地区');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.formData.street) {
|
|
|
+ this.$toast('请选择所在街道');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.formData.address) {
|
|
|
+ this.$toast('请填写详细地址');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ submitForm() {
|
|
|
+ if (!this.canClickSave) return false;
|
|
|
+ this.canClickSave = false;
|
|
|
+ setTimeout(() => { this.canClickSave = true }, 3000)
|
|
|
+ if(!this.vailateData())return;
|
|
|
+
|
|
|
+ let params = this.formData;
|
|
|
+ params.userId = this.userId;
|
|
|
+ let url = '';
|
|
|
+ if(this.editId) {
|
|
|
+ params.userAddressId = this.editId;
|
|
|
+ url = '/user/address/update';
|
|
|
+ }else {
|
|
|
+ url = '/user/address/save';
|
|
|
+ }
|
|
|
+ this.$axios({
|
|
|
+ url: url,
|
|
|
+ type: 'json',
|
|
|
+ params,
|
|
|
+ isLoading: 1,
|
|
|
+ }).then(res => {
|
|
|
+ this.$successToast(this.editId? '编辑成功':'添加成功');
|
|
|
+ this.$backPage(1, 1000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ handleDelete() {
|
|
|
+ this.$modal({
|
|
|
+ content: '确定要删除该地址吗？',
|
|
|
+ }).then(() => {
|
|
|
+ this.$axios({
|
|
|
+ url: '/user/address/del',
|
|
|
+ params: {
|
|
|
+ userAddressId: this.editId
|
|
|
+ },
|
|
|
+ isLoading: 1,
|
|
|
+ }).then(res => {
|
|
|
+ this.$successToast('删除成功');
|
|
|
+ this.$backPage(1, 1000);
|
|
|
+ })
|
|
|
+ }).catch(() => {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .form-container {
|
|
|
+ .clipboard {
|
|
|
+ padding: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .box {
|
|
|
+ background: #f5f5f5;
|
|
|
+ ::v-deep .u-textarea {
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ .btns {
|
|
|
+ padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ ::v-deep .u-button {
|
|
|
+ width: 100rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ background: #FFFFFF;
|
|
|
+ min-height: 88rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ .title {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 160rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .picker {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ image {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .textarea {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ textarea {
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ .r {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .default {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ switch {
|
|
|
+ margin-right: -20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
Moss