cosmetics_shop_wxapp/loginPages/addaddress/index.vue

<template>
	<view class="addaddress">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue">
			<view slot="content">{{ status ? '修改地址' : '新增地址' }}</view>
		</cu-custom>
		<!-- section -->
		<view class="section">
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input :value="name" @input="e => (name = e.detail.value)" placeholder="收货人姓名" />
				</view>
				<view class="cu-form-group">
					<view class="title">电话</view>
					<input @input="e => (tel = e.detail.value)" placeholder="收货人电话" />
					<view class="cu-capsule radius">
						<view class="cu-tag bg-blue">+86</view>
						<view class="cu-tag line-blue">中国大陆</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">收货地址</view>
					<picker mode="region" @change="e => (region = e.detail.value)" :value="region">
						<view v-if="region.length > 0" class="picker">{{ region[0] }}，{{ region[1] }}，{{ region[2] }}</view>
						<view v-else class="text-grey picker">选择省 / 市 / 区</view>
					</picker>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">详细地址</view>
					<textarea maxlength="-1" :value="textarea" @input="e => (textarea = e.detail.value)" placeholder="街道门牌/楼层房间号等信息"></textarea>
					<text @click="addSelect" class="margin-left margin-top cuIcon-locationfill text-orange"></text>
				</view>
				<view class="cu-form-group">
					<view class="title">设置为默认收货地址</view>
					<switch @change="e => (checked = e.detail.value)" :checked="checked"></switch>
				</view>
			</form>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-content padding bg-white">
				<button @click="handler" class="cu-btn block">
					<text v-if="lock" class="cuIcon-loading2 iconfont-spin"></text>
					保存
				</button>
			</view>
		</view>
		<!-- 工具 -->
		<cu-modalA title="警告" :show.sync="show" :content="content" />
	</view>
</template>

<script>
import { getSetting, openSetting, chooseLocation } from '@/common/device/index.js';
import api from "./api.js";
export default {
	data() {
		return {
			status: false, //false 新增 true 修改
			lock: false,
			show: false,
			content: '',
			// 参数
			id:'',
			name: '',
			tel: '',
			checked: false,
			region: [],
			textarea: ''
		};
	},
	methods: {
		// 保存
		async handler() {
			if (this.lock) return false;
            let yarn=this.yarn();
			if(yarn) return false;
			let { name, tel, checked, region, textarea } = this; 
			if(region.length==0){
				this.show=true,
				this.content="请选择收货地址！";
				return false;
			}
			// 增加 
			var result ; 
			this.lock=true;
			if(this.status){
				result= await api.updateList({id:this.id,name,tel,default:checked,address:textarea,province:region[0],city:region[1],area:region[2]});
			}else{
				result=await api.addList({name,tel,default:checked,address:textarea,province:region[0],city:region[1],area:region[2]})
			}
			this.lock=false;
			if(result.code==0){
				uni.navigateBack({
					delta:1
				})
			}
		},
		// 验证
		yarn(){
			let rules = {
				name: [
					{
						required: true,
						message: '收货人姓名不能为空！'
					}
				],
				tel: [
					{
						required: true,
						message: '收货人电话不能为空！'
					},
					{
						reg: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
						message: '收货人电话格式不正确！'
					}
				],
				textarea: [
					{
						required: true,
						message: '详细地址不能为空！'
					}
				]
			};
			return Object.keys(rules).some(item=>{
				return rules[item].some(it=>{
					if((it.required && !this[item]) || (it.reg && !it.reg.test(this[item]))) {
						this.show=true,
						this.content=it.message;
						return true;
					}
					return false;
				})
			})
		},
		// 纤细地址定位
		async addSelect() {
			try {
				var address;
				var res = await getSetting();
				if (res.authSetting['scope.userLocation'] === false) {
					let result = await openSetting();
					if (result.authSetting['scope.userLocation'] === true) address = await chooseLocation();
				}
				if (res.authSetting['scope.userLocation.userLocation'] === undefined || result.authSetting['scope.userLocation.userLocation'] === true) {
					address = await chooseLocation();
				}
				this.textarea = address.address;
			} catch (err) {
				console.log(err.message);
			}
		}
	},
	onLoad(options) {
		let { data } = options;
		if(data){
			data=JSON.parse(data);
			Object.keys(data).forEach(item=>this[item]=data[item])
			this.status=true;
		}else{
			this.status=false;
		}
	}
};
</script>

<style lang="scss" scoped>
.addaddress {
	.footer {
		height: 140upx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.footer-content {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			button {
				background-color: #ee0a24;
				color: #fff;
				height: 80upx;
				border-radius: 80upx;
			}
		}
	}
}
</style>