cyzh-SoundOfMusic-H5/pages/activityList/mine/order/address.vue

<template>
	<view>
		 <view class="container">
			 <view class="flex align-center" style="padding: 20upx 30upx;">
				 <view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;">收货人：</view>
				 <u-input v-model="address.consignee" placeholder="收货人姓名" :clearable="false" />
			 </view>
			 <view class="flex align-center" style="padding: 20upx 30upx;">
				 <view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;">联系方式：</view>
				 <u-input v-model="address.phone" placeholder="收货人手机号" :clearable="false" />
			 </view>
			 <view  class="flex align-center" style="padding: 20upx 30upx;" >
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;">所在地区：</view>
				<view @click="regionShow=true" class="flex align-center" :class="address.area ? '': 'eg'" style="height: 70upx;">
					 <text v-if="address.area">{{address.area}}</text>
					 <text v-else>{{region}}</text>
				</view>
				<city-select v-model="regionShow" @city-change="getRegion"></city-select>
			 </view>
			 <view class="flex align-center" style="padding: 20upx 30upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;">详细地址：</view>
				<u-input v-model="address.detail" placeholder="具体到门牌号" :clearable="false" />
			 </view>
		 </view>
		 <view class="margin">
			 <u-button @click="confirm" class="custom-style" shape="circle">确定</u-button>
		 </view>
	</view>
</template>

<script>
	import citySelect from '@/components/basic/u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				region:"例:广东省广州市天河区",
				regionShow:false,
				address:{
					userId:"",
					consignee:"",
					phone:"",
					area:"",
					detail:""
				}
			}
		},
		onLoad(options) {
			this.address.userId=options.userId || '-1'
			this.getAddress()
		},
		methods: {
			async getAddress(){
				let res=await this.$u.api.user.userAddress({userId:this.address.userId})
				if (!this.$u.test.isEmpty(res.records)) {
					this.address=res.records[0]
				}
			},
			getRegion(data) {
				this.address.area = data.province.label + '-' + data.city.label + '-' + data.area.label
			},
			confirm(){
				if (this.$u.test.isEmpty(this.address.userId)) {
					this.$u.toast("系统错误，用户为登录")
					return
				}
				if (this.$u.test.isEmpty(this.address.phone)) {
					this.$u.toast("请输入收货人手机号")
					return
				}
				if (this.$u.test.isEmpty(this.address.consignee)) {
					this.$u.toast("请输入收货人姓名")
					return
				}
				if (this.$u.test.isEmpty(this.address.area)) {
					this.$u.toast("请输入所在地区")
					return
				}
				if (this.$u.test.isEmpty(this.address.detail)) {
					this.$u.toast("请输入详细地址")
					return
				}
				this.$u.api.user.userAddressSubmit(this.address).then(res=>{
					this.address.id=res
					uni.navigateBack({
						delta:1
					})
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		margin: 20upx;
		border-radius: 16upx;
	}
	.eg {
		color: #c0c4d6;
	}
	.custom-style {
		background-color: #5b3ee7;
		color: #ffffff;
	}
</style>