883 lines
25 KiB
Vue
883 lines
25 KiB
Vue
<template>
|
||
<view class="page add-address">
|
||
<fu-custom class="bg-white" style="position: relative; z-index: 100;" :isBack="true" :isBottom="true">
|
||
<block slot="content" style="font-weight: bold;">{{edit_id?'编辑地址':'添加地址'}}</block>
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<block slot="right"><text v-if="edit_id" @click="delAddr" class="text-lg text-333">删除</text></block>
|
||
<!-- #endif -->
|
||
|
||
</fu-custom>
|
||
<!-- 表单信息 start -->
|
||
<view class="addAddr">
|
||
<view class="cell" v-if="serveList.length > 0">
|
||
<text class="title">标签</text>
|
||
<view class="flex align-center">
|
||
<view v-for='(item,index) in serveList' :key='index' class='cu-tag radius' :class='item.name == default_serve.name? index < 3? "bg-orange2":"bg-green radius-left" :"line-black"'
|
||
@click='changeServe(item)' v-show="item.name">
|
||
{{item.name}}
|
||
</view>
|
||
<view v-if="serveList.length== 4" class='cu-tag radius bg-green left-0 radius-right' @click='addServe(serveList[3].name)'>
|
||
编辑
|
||
</view>
|
||
<view class='cu-tag line-black radius' @click='addServe()' v-if="serveList.length<= 3">+</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<text class="title">收货人</text>
|
||
<input type="text" maxlength="8" v-model="name" placeholder="收货人" />
|
||
<view class="flex">
|
||
<view class="text-999 flex align-center" @click="chooseSex('1')">
|
||
<text :class="[sex == 1 ? 'cuIcon-roundcheckfill active' : 'cuIcon-round']" class="text-xl"></text>
|
||
<text :class="{'text-666': sex == 1}" class="margin-left-xs">先生</text>
|
||
</view>
|
||
<view class="text-999 margin-left flex align-center" @click="chooseSex('2')">
|
||
<text :class="[sex == 2 ? 'cuIcon-roundcheckfill active' : 'cuIcon-round']" class="text-xl"></text>
|
||
<text :class="{'text-666': sex == 2}" class="margin-left-xs">女士</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<text class="title"> 联系电话</text>
|
||
<input type="number" maxlength="11" v-model="phone" placeholder="联系电话" />
|
||
<!-- <text v-if="phone.length > 0" class=" cuIcon-close" @click="clear"
|
||
style="font-size: 36rpx;color:#999;"></text> -->
|
||
</view>
|
||
<view class="cell" v-if="isPublish">
|
||
<text class="title"> 所在地区</text>
|
||
<view class="flex flex-sub">
|
||
<input class="flex-sub" type="text" disabled v-model="address" placeholder="请选择省市区县、乡镇" />
|
||
<text class="cuIcon-locationfill" style="font-size: 40rpx; color: rgba(255, 147, 0, 1);" @click="chooseLocation"></text>
|
||
<!-- <text class=" cuIcon-right text-gray" style="font-size: 36rpx; "
|
||
@click="showMulLinkageThreePicker"></text> -->
|
||
</view>
|
||
</view>
|
||
<view class="cell" v-if="!isPublish">
|
||
<text class="title"> 所在地区</text>
|
||
<view class="flex flex-sub">
|
||
<input class="flex-sub" type="text" disabled v-model="address" placeholder="请选择省市区县、乡镇" />
|
||
<text class="cuIcon-locationfill" style="font-size: 40rpx; color: rgba(255, 147, 0, 1);" @click="_chooseLocation"></text>
|
||
<!-- <text class=" cuIcon-right text-gray" style="font-size: 36rpx; "
|
||
@click="showMulLinkageThreePicker"></text> -->
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<textarea class="text-area" type="text" v-model="addressDesc" maxlength="50" placeholder-class="placeholder"
|
||
placeholder="请输入详细地址：如道路、门牌号、小区、楼栋号等" />
|
||
</view>
|
||
|
||
<!-- <view class="cell justify-between" style="border: none; padding-bottom: 12rpx;">
|
||
<text class="title"> {{i18n["智能填写"]}}</text>
|
||
<view class="flex">
|
||
<text class="cuIcon-right text-333" style="font-size: 32rpx;"> </text>
|
||
</view>
|
||
</view>
|
||
<textarea class="text-ai" type="text" v-model="baiduAddress" maxlength="200" placeholder-class="placeholder"
|
||
:placeholder="i18n['请输入详细地址：如道路、门牌号、小区、楼栋号等']" />
|
||
<view class="flex justify-between">
|
||
<text></text>
|
||
<view class="btn" @tap="handleAddressRecognition">{{i18n["填写"]}}</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="flex justify-between bg-white" style="padding: 32rpx 32rpx; border-top: 1px solid #f5f6f7;">
|
||
<view class="flex align-center">设置默认地址</view>
|
||
<switch class="switch" :class="is_default ? 'checked-green' : ''" @change="handleSwitch"
|
||
:checked="is_default ? true : false"></switch>
|
||
<!-- <switch class='theme' @change="handleSwitch" :class="is_default?'checked':''" :checked="is_default?true:false"></switch> -->
|
||
</view>
|
||
<!-- 表单信息 end -->
|
||
<!-- 服务标签弹框 start -->
|
||
<fu-popup v-model="serve_show" mode="bottom" :safe-area-inset-bottom="true">
|
||
<view class="serve-pop flex align-center justify-center" :style="{bottom:keyboardheight+'px'}">
|
||
<input type="text" placeholder="请填写标签名称（最多5个字）" v-model='serveKeyword' maxlength="5" focus
|
||
:adjust-position='false' placeholder-class="placeholderServe">
|
||
<button @click='addServeInfo()'>添加</button>
|
||
</view>
|
||
</fu-popup>
|
||
<!-- 服务标签弹框 end -->
|
||
<!-- 底部占位 start -->
|
||
<!-- <view class="bottom-status"></view> -->
|
||
<!-- 底部占位 end -->
|
||
<!-- 提交按钮 start -->
|
||
<view class="bottom-action">
|
||
<view class="btn2" @click="beforeConfirm">保存</view>
|
||
</view>
|
||
<!-- 提交按钮 end -->
|
||
<!-- 地址选择插件 start -->
|
||
<w-picker
|
||
mode="region"
|
||
:value="defVal"
|
||
default-type="label"
|
||
themeColor="#FF6464"
|
||
@confirm="onConfirm($event)"
|
||
ref="region"
|
||
>选择所在地区</w-picker>
|
||
<!-- 地址选择插件 end -->
|
||
<!-- 断网监测 start -->
|
||
<fu-notwork></fu-notwork>
|
||
<!-- 断网监测 end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wPicker from '@/pages/my/components/w-picker/w-picker.vue'
|
||
// 高德地图sdk
|
||
import amapFile from '@/common/amap-wx.js';
|
||
export default {
|
||
computed: {
|
||
// 合并省市区信息字段
|
||
address() {
|
||
return this.province + this.city + this.district;
|
||
},
|
||
},
|
||
components:{
|
||
wPicker
|
||
},
|
||
data() {
|
||
return {
|
||
keyboardheight: 0, // 键盘高度
|
||
serveKeyword: '', // 服务标签关键字
|
||
serve_show: false, // 服务标签弹框
|
||
serveList: [], // 服务标签
|
||
default_serve: '', // 默认服务标签
|
||
phone: '', // 联系电话
|
||
name: '', // 收货人姓名
|
||
sex: 1, // 性别 1:男 2:女
|
||
is_default: true, // 是否设为默认地址
|
||
edit_id: null, // 是否是修改收货地址
|
||
myAmapFun: null, // 高德地图实例
|
||
province: '', // 省
|
||
city: '', //市
|
||
district: '', //区
|
||
provinceCode: '', // 省 code码
|
||
cityCode: '', //市 code码
|
||
districtCode: '', //区 code码
|
||
addressDesc: '', // 详细地址
|
||
baiduAddress: '',
|
||
lng: '',
|
||
lat: '',
|
||
customStyle: {
|
||
'backgroundColor': '#cccccc',
|
||
'color': '#ffffff',
|
||
},// 自定义按钮样式
|
||
defVal: [],
|
||
};
|
||
},
|
||
/**
|
||
* @description 页面入参
|
||
* @param {object} options = [id]
|
||
* @param {string} id = 修改的地址ID
|
||
*/
|
||
onLoad(options) {
|
||
this.setNavigationBarTitle('添加地址')
|
||
// 监听键盘高度
|
||
uni.onKeyboardHeightChange((res) => {
|
||
console.log("键盘监听", res);
|
||
this.keyboardheight = res.height;
|
||
});
|
||
// 初始化高德地图SDK,记得换成自己的key
|
||
this.myAmapFun = new amapFile.AMapWX({ key: '886bfe2d6c32bd8eac97c2e6d821ed0b' });
|
||
//如果是修改地址
|
||
if (options.id) {
|
||
this.edit_id = options.id;
|
||
// 换标题文字
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑地址'
|
||
});
|
||
// 获取要修改的地址信息
|
||
this.get_editAddress();
|
||
} else {
|
||
// 自动定位当前地址
|
||
// this.autoGetLocation();
|
||
// 获取默认标签
|
||
this.getLabelData()
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getPublishStatus()
|
||
},
|
||
methods: {
|
||
handleAddressRecognition() {
|
||
let baiduAddress = this.baiduAddress
|
||
if (!baiduAddress) {
|
||
this.$message.info('请先粘贴地址~');
|
||
return;
|
||
}
|
||
this.$api.post(global.apiUrls.postAddressRecognition, {address: baiduAddress}).then(res => {
|
||
let data = res.data;
|
||
console.log(data);
|
||
if (data.code == 1) {
|
||
this.name = data.data.name ? data.data.name.trim() : ''
|
||
this.phone = data.data.mobile || ''
|
||
this.addressDesc = data.data.address || ''
|
||
this.province = data.data.province;
|
||
this.city = data.data.city;
|
||
this.district = data.data.area;
|
||
} else {
|
||
this.$message.info(data.msg);
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 删除地址
|
||
* */
|
||
delAddr() {
|
||
this.$util.showModal({
|
||
title: '提示',
|
||
content: '确定删除该地址?',
|
||
confirmColor: this.$store.state.themeColor,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$api.post(global.apiUrls.post5cadd0d3a0c93, { address_id: this.edit_id })
|
||
.then(res => {
|
||
console.log(res);
|
||
this.$message.info(res.data.msg);
|
||
if (res.data.code == 1) {
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 800)
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
})
|
||
},
|
||
/**
|
||
* @func 获取服务标签列表
|
||
*/
|
||
getLabelData(val) {
|
||
this.$api.post(global.apiUrls.getAddressLabelList, {}).then(res => {
|
||
if (res.data.code == 1) {
|
||
console.log('服务标签列表', res.data.data)
|
||
this.serveList = res.data.data
|
||
let serve = uni.getStorageSync('DEFAULT_SERVE');
|
||
// 判断是否为编辑
|
||
if (this.edit_id) {
|
||
this.default_serve = {
|
||
id: 0,
|
||
name: val
|
||
}
|
||
var flag = this.serveList.filter((item) => {
|
||
return item.name == val
|
||
})
|
||
if (flag.length == 0) {
|
||
if(this.default_serve.name) this.serveList.push(this.default_serve);
|
||
}
|
||
} else {
|
||
if (serve && this.serveList !=0) {
|
||
this.default_serve = this.serveList[0]
|
||
this.serveList.push(JSON.parse(serve))
|
||
}
|
||
}
|
||
} else {
|
||
this.$message.info(res.data.msg);
|
||
}
|
||
}).catch(err => {
|
||
this.$message.info(err.msg);
|
||
})
|
||
},
|
||
/**
|
||
* @description 自定义服务标签弹窗显示
|
||
* @param {String} name 回显自定义标签关键词
|
||
*/
|
||
addServe(name) {
|
||
if (name) {
|
||
this.serveKeyword = name
|
||
}
|
||
this.serve_show = true //弹窗显示
|
||
},
|
||
/**
|
||
* @func 新增服务标签
|
||
*/
|
||
addServeInfo() {
|
||
let val = this.serveKeyword.trim()
|
||
if (val) {
|
||
console.log(this.serveList)
|
||
var flag = this.serveList.filter((item) => {
|
||
return item.name == val
|
||
})
|
||
console.log(flag)
|
||
if (flag.length == 0) {
|
||
this.serve_show = false // 弹窗隐藏
|
||
let serve = { id: 0, name: val }
|
||
// 存在自定义标签
|
||
if (this.serveList.length > 3) {
|
||
this.serveList[3] = serve
|
||
} else {
|
||
this.serveList.push(serve)
|
||
}
|
||
this.default_serve = serve
|
||
if (!this.edit_id) {
|
||
uni.setStorageSync('DEFAULT_SERVE', JSON.stringify(serve));
|
||
}
|
||
} else {
|
||
this.$message.info('标签已存在');
|
||
}
|
||
} else {
|
||
this.$message.info('请输入内容');
|
||
}
|
||
},
|
||
/**
|
||
* @description 切换服务标签
|
||
* @param {String} item = 服务标签关键字
|
||
*/
|
||
changeServe(item) {
|
||
this.default_serve = item;
|
||
},
|
||
/**
|
||
* @description 选择性别
|
||
* @param {String} type = 性别
|
||
*/
|
||
chooseSex(type) {
|
||
this.sex = type;
|
||
},
|
||
/**
|
||
* @func 获取修改地址信息
|
||
*/
|
||
get_editAddress() {
|
||
this.$api.post(global.apiUrls.post636fd7826b3ee, {
|
||
address_id: this.edit_id
|
||
}).then(res => {
|
||
console.log(res, '修改的信息');
|
||
if (res.data.code == 1) {
|
||
let data = res.data.data;
|
||
this.name = data.real_name; // 收货人姓名
|
||
this.phone = data.mobile; // 收货人电话
|
||
this.province = data.province; // 省
|
||
this.city = data.city; // 市
|
||
this.district = data.district; // 区
|
||
this.addressDesc = data.detail; // 详细地址
|
||
this.sex = data.sex; // 性别
|
||
this.is_default = data.is_default == '1' ? true : false; // 是否默认
|
||
this.defVal = [data.province,data.city,data.district];
|
||
// 服务标签
|
||
this.getLabelData(data.label_name)
|
||
|
||
} else {
|
||
this.$message.info(res.data.msg);
|
||
}
|
||
}).catch(err => {
|
||
this.$message.info(err.msg);
|
||
})
|
||
},
|
||
/**
|
||
* @func 显示地址选择弹窗
|
||
*/
|
||
showMulLinkageThreePicker() {
|
||
uni.hideKeyboard();
|
||
this.$refs.region.show();
|
||
},
|
||
/**
|
||
* @description 地址选择回调
|
||
* @param {Object} val = 地址信息对象
|
||
*/
|
||
onConfirm(val) {
|
||
this.province = val.obj.province.label;
|
||
this.city = val.obj.city.label;
|
||
this.district = val.obj.area.label;
|
||
this.provinceCode = val.value[0];
|
||
this.cityCode = val.value[1];
|
||
this.districtCode = val.value[2];
|
||
},
|
||
/**
|
||
* @func 切换是否为默认地址
|
||
*/
|
||
handleSwitch(e) {
|
||
this.is_default = e.detail.value;
|
||
},
|
||
/**
|
||
* @func 定位地址
|
||
*/
|
||
location() {
|
||
let _this = this;
|
||
//#ifdef MP-WEIXIN
|
||
uni.getSetting({
|
||
success(res) {
|
||
// 获取设置成功
|
||
console.log(res.authSetting);
|
||
if (!res.authSetting['scope.userLocation']) {
|
||
// 如果没开启权限提示打开
|
||
uni.openSetting({
|
||
success(res) {
|
||
// 打开成功，提示获取权限
|
||
console.log(res.authSetting);
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success(res) {
|
||
_this.chooseLocation();
|
||
},
|
||
fail(res) {
|
||
console.log(res);
|
||
this.$message.info('打开权限失败');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
_this.chooseLocation();
|
||
}
|
||
}
|
||
});
|
||
//#endif
|
||
this.chooseLocation();
|
||
},
|
||
/**
|
||
* @func 地图选点
|
||
*/
|
||
chooseLocation() {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: adr => {
|
||
uni.chooseLocation({
|
||
latitude: adr.latitude,
|
||
longitude: adr.longitude,
|
||
success: (res) => {
|
||
console.log(res, '地图');
|
||
|
||
this.myAmapFun.getRegeo({
|
||
location: res.longitude + ',' + res.latitude,
|
||
success: (data) => {
|
||
//成功回调
|
||
console.log('sdk回调', data);
|
||
let regeoData = data[0].regeocodeData.addressComponent;
|
||
this.lng = res.longitude;
|
||
this.lat = res.latitude;
|
||
this.province = regeoData.province;
|
||
this.city = Array.isArray(regeoData.city) && (regeoData.city.length == 0) ? regeoData.province: regeoData.city;
|
||
|
||
this.district = regeoData.district;
|
||
this.addressDesc = (res.address || '') + (res.name || '');
|
||
this.provinceCode = regeoData.adcode.substr(0,2)+'0000';
|
||
this.cityCode = regeoData.adcode.substr(0,4)+'00';
|
||
this.districtCode = regeoData.adcode+'';
|
||
|
||
|
||
|
||
},
|
||
fail: (info) => {
|
||
//失败回调
|
||
console.log(info)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @func 地图选点
|
||
*/
|
||
_chooseLocation() {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: adr => {
|
||
this.myAmapFun.getRegeo({
|
||
location: adr.longitude + ',' + adr.latitude,
|
||
success: (data) => {
|
||
//成功回调
|
||
console.log('sdk回调', data);
|
||
let regeoData = data[0].regeocodeData.addressComponent;
|
||
this.lng = adr.longitude;
|
||
this.lat = adr.latitude;
|
||
this.province = regeoData.province;
|
||
this.city = Array.isArray(regeoData.city) && (regeoData.city.length == 0) ? regeoData.province: regeoData.city;
|
||
|
||
this.district = regeoData.district || this.city;
|
||
this.addressDesc = ( data[0].name || '') + ( data[0].desc || '');
|
||
this.provinceCode = regeoData.adcode.substr(0,2)+'0000';
|
||
this.cityCode = regeoData.adcode.substr(0,4)+'00';
|
||
this.districtCode = regeoData.adcode+'';
|
||
|
||
|
||
|
||
},
|
||
fail: (info) => {
|
||
//失败回调
|
||
console.log(info)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @func 自动定位
|
||
*/
|
||
autoGetLocation() {
|
||
console.log("自动定位");
|
||
let that = this
|
||
uni.getLocation({
|
||
geocode: true,
|
||
success: (adr) => {
|
||
that.myAmapFun.getRegeo({
|
||
location: adr.longitude + ',' + adr.latitude,
|
||
success: (data) => {
|
||
//成功回调
|
||
console.log('自动定位 SDK回调', data);
|
||
let regeoData = data[0].regeocodeData.addressComponent;
|
||
this.lng = adr.longitude;
|
||
this.lat = adr.latitude;
|
||
that.province = regeoData.province;
|
||
that.city = Array.isArray(regeoData.city) && (regeoData.city.length == 0) ? regeoData.province: regeoData.city;
|
||
that.district = regeoData.district;
|
||
that.addressDesc = that.province + that.city + that.district + data[0].desc;
|
||
that.provinceCode = regeoData.adcode.substr(0,2)+'0000';
|
||
that.cityCode = regeoData.adcode.substr(0,4)+'00';
|
||
that.districtCode = regeoData.adcode+'';
|
||
},
|
||
fail: (info) => {
|
||
//失败回调
|
||
console.log(info)
|
||
}
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
//
|
||
beforeConfirm(){
|
||
this.$util.debounce(this.sub_sure,1500,true);
|
||
},
|
||
/**
|
||
* @func 提交表单
|
||
*/
|
||
sub_sure() {
|
||
// 表单验证
|
||
|
||
if (this.name.trim() == '') {
|
||
this.$message.info('请输入收货人姓名');
|
||
this.name = '';
|
||
return false;
|
||
};
|
||
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
|
||
let text = !this.phone ? '请输入手机号' : '手机号格式不正确';
|
||
this.$message.info(text);
|
||
return false;
|
||
}
|
||
if (this.address.trim() == '') {
|
||
this.$message.info('地区不能为空');
|
||
return false;
|
||
}
|
||
//判断是否含有特殊字符
|
||
let iconRule1 = /[`~!@#$%^&*_\+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&* ——\+={}|《》？：“”【】；‘’，。]/im;
|
||
|
||
// 判断是否含有emoji表情
|
||
let iconRule2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
|
||
if (this.addressDesc.trim() == '') {
|
||
this.$message.info('详细地址不能为空');
|
||
this.addressDesc = '';
|
||
return false;
|
||
}
|
||
// if (iconRule1.test(this.addressDesc)) {
|
||
// this.$message.info('详细地址不能含有特殊字符');
|
||
// // this.addressDesc = '';
|
||
// return false;
|
||
// }
|
||
// if (iconRule2.test(this.addressDesc)) {
|
||
// this.$message.info('详细地址不能含有表情');
|
||
// // this.addressDesc = '';
|
||
// return false;
|
||
// }
|
||
|
||
let data = {
|
||
real_name: this.name, // 收货人姓名
|
||
mobile: this.phone, // 收货人手机
|
||
is_default: this.is_default ? '1' : '0', // 是否默认地址
|
||
detail: this.addressDesc, // 详细地址
|
||
province: this.province, // 省
|
||
city: this.city, // 市
|
||
district: this.district, // 区
|
||
provinceCode: this.provinceCode, // 省 code码
|
||
cityCode: this.cityCode, //市 code码
|
||
districtCode: this.districtCode, //区 code码
|
||
sex:this.sex,
|
||
lng:this.lng,
|
||
lat:this.lat,
|
||
label_name: this.default_serve ? this.default_serve.name : '' // 标签name
|
||
}
|
||
if (!data.label_name) {
|
||
this.$message.info('请选择地址标签');
|
||
this.name = '';
|
||
return false;
|
||
};
|
||
console.log(data)
|
||
// 判断提交的接口
|
||
let url = global.apiUrls.post637defdbd53ef;
|
||
if (this.edit_id) {
|
||
data.address_id = this.edit_id
|
||
url = global.apiUrls.post637df1ea39d16;
|
||
}
|
||
console.log('提交的地址参数',data);
|
||
console.log('提交的地址',url);
|
||
// 提交请求
|
||
this.$api.post(url, data)
|
||
.then(res => {
|
||
console.log(res, '添加/编辑成功');
|
||
if (res.data.code == 1) {
|
||
// this.$message.info(res.data.msg);
|
||
// 通知商品详情页更新地址数据
|
||
uni.$emit('refreshAddress',res.data.data.address_id);
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 800);
|
||
} else {
|
||
this.$message.info(res.data.msg)
|
||
}
|
||
|
||
})
|
||
.catch(err => {
|
||
console.log("err: ", err);
|
||
})
|
||
},
|
||
/**
|
||
* @func 清除手机号
|
||
*/
|
||
clear() {
|
||
this.phone = '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #F6F7F9;
|
||
overflow: hidden;
|
||
}
|
||
.tag{
|
||
padding: 0 16rpx;
|
||
margin-right: 10rpx;
|
||
line-height: 52rpx;
|
||
border: 1rpx solid #333;
|
||
}
|
||
.bottom-status {
|
||
height: 156rpx;
|
||
height: calc(156rpx + constant(safe-area-inset-bottom));
|
||
height: calc(156rpx + env(safe-area-inset-bottom));
|
||
}
|
||
.cuIcon-right {
|
||
transform:rotate(-90deg);
|
||
-ms-transform:rotate(-90deg); /* IE 9 */
|
||
-moz-transform:rotate(-90deg); /* Firefox */
|
||
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
|
||
-o-transform:rotate(-90deg); /* Opera */
|
||
}
|
||
.text-area {
|
||
height: 140rpx !important;
|
||
background-color: #F6F6F6;
|
||
padding: 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
.text-ai {
|
||
width: 100%;
|
||
height: 180rpx !important;
|
||
background-color: #fff;
|
||
padding: 24rpx 0;
|
||
border-radius: 8rpx;
|
||
}
|
||
.btn {
|
||
margin-bottom: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 124rpx;
|
||
height: 56rpx;
|
||
border: 1px solid #006AB9;
|
||
opacity: 1;
|
||
color: #006AB9;
|
||
font-size: 24rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
/deep/ .uni-textarea-textarea{
|
||
line-height: 1.5;
|
||
}
|
||
.addAddr {
|
||
padding: 0 32upx;
|
||
background: #fff;
|
||
|
||
.uni-list-cell {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20upx 0;
|
||
box-sizing: border-box;
|
||
height: 100upx;
|
||
font-size: 30upx;
|
||
background: #fff;
|
||
}
|
||
|
||
.addr {
|
||
font-size: 32upx;
|
||
padding: 30upx 0;
|
||
border-bottom: 1px solid #f5f5f7;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.addr_title {
|
||
display: inline-block;
|
||
width: 180rpx;
|
||
}
|
||
|
||
.chose_addr {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 70%;
|
||
}
|
||
}
|
||
|
||
.cell {
|
||
font-size: 32upx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 32rpx 0;
|
||
border-bottom: 1px solid #f5f5f7;
|
||
|
||
.title {
|
||
display: inline-block;
|
||
width: 180rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
color: #333;
|
||
}
|
||
|
||
.text-area {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.address {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 32upx;
|
||
|
||
.title {
|
||
line-height: 110upx;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
padding: 20upx 0;
|
||
font-size: 26upx;
|
||
}
|
||
}
|
||
|
||
.placeholderClass {
|
||
font-size: 32rpx;
|
||
color: #BFBFBF;
|
||
}
|
||
|
||
.active {
|
||
color: #0CBC56;
|
||
}
|
||
|
||
switch::before,
|
||
switch::after {
|
||
content: "";
|
||
}
|
||
|
||
.bottom-action {
|
||
position: fixed;
|
||
bottom: 56rpx;
|
||
left: 32rpx;
|
||
width: 686rpx;
|
||
display: flex;
|
||
|
||
view {
|
||
height: 88rpx;
|
||
flex: 1;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
border-radius: 88rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btn2 {
|
||
background: rgba(255, 147, 0, 1);
|
||
}
|
||
}
|
||
|
||
/deep/ uni-switch.checked-green .uni-switch-input {
|
||
background-color: #39b54a !important;
|
||
border-color: #39b54a !important;
|
||
color: #ffffff !important;
|
||
}
|
||
/deep/ .switch {
|
||
transform: scale(0.7);
|
||
}
|
||
.serve-pop {
|
||
height: 100rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
|
||
input {
|
||
margin-left: 32rpx;
|
||
width: 528rpx;
|
||
height: 66rpx;
|
||
background: #F6F7F9;
|
||
opacity: 1;
|
||
border-radius: 35rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #99999A;
|
||
text-indent: 1em;
|
||
}
|
||
|
||
button {
|
||
width: 140rpx;
|
||
height: 66rpx;
|
||
background: #FF9300;
|
||
border-radius: 33rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.left-0 {
|
||
margin-left: 2rpx;
|
||
}
|
||
|
||
.radius-left {
|
||
border-top-left-radius: 20rpx;
|
||
border-bottom-left-radius: 20rpx;
|
||
}
|
||
|
||
.radius-right {
|
||
border-top-right-radius: 20rpx;
|
||
border-bottom-right-radius: 20rpx;
|
||
}
|
||
.bg-orange2{
|
||
// border: 1px solid #FF9300;
|
||
background: #59A6F4;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-green{
|
||
border: 1px solid #FF9300;
|
||
background: #FF9300;
|
||
color: #fff;
|
||
}
|
||
.placeholder{
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #BFBFBF;
|
||
}
|
||
.placeholderServe{
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #99999A;
|
||
}
|
||
</style>
|