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 class="cu-btn  block">保存</button></view>
		</view>
	</view>
</template>

<script>
import {getSetting,openSetting,chooseLocation} from "@/common/device/index.js"
export default {
	data() {
		return {
			status:false,//false 新增 true 修改
			// 参数
			name:"",
			tel:"",
			checked: true,
			region: [],
			textarea: ''
		};
	},
	methods: {
		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  {status}=options;
		this.status = 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>