shop-uniapp-240426/pages/user/address/addAddres.vue

<template>
	<view class="addAddress">
		<u-navbar :title="$t('nav.edit.address')" @leftClick="leftClick()"></u-navbar>
		<view class="container">
			<u--form labelPosition="left" label-width="66px" :model="addressInfo" :rules="rules" ref="uForm">
				<u-form-item :label="$t('page.editAddress.name')" prop="name" borderBottom ref="item1">
					<u--input v-model="addressInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item :label="$t('page.editAddress.phone')" prop="phone" borderBottom ref="item1">
					<u--input v-model="addressInfo.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item :label="$t('page.editAddress.region')" prop="region" borderBottom ref="item1">
					<u--input v-model="addressInfo.region" border="none"></u--input>
				</u-form-item>
				<u-form-item :label="$t('page.editAddress.detailed-address')" prop="detailAddress" borderBottom ref="item1">
					<u--input v-model="addressInfo.detailAddress" border="none"></u--input>
				</u-form-item>
			</u--form>
			<div class="settings-default">
				<text>{{ $t('page.editAddress.default-address') }}</text>
				<u-switch inactiveValue="false" activeValue="true" v-model="addressInfo.defaultFlag" activeColor="#e68534"></u-switch>
			</div>
			<u-button @click="submit()" type="primary" color="#e68534" :text="$t('page.editAddress.save')" shape="circle"></u-button>
			<u-button @click="leftClick()" :text="$t('page.editAddress.cancel')" shape="circle"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				addressInfo: {
					name: '',
					phone: '',
					region: '',
					detailAddress : '',
					defaultFlag : 'false'
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: this.$t('page.editAddress.name-message'),
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: this.$t('page.editAddress.phone-message'),
						trigger: ['blur', 'change']
					},
					'region': {
						type: 'string',
						required: true,
						message: this.$t('page.editAddress.region-message'),
						trigger: ['blur', 'change']
					},
					'detailAddress': {
						type: 'string',
						required: true,
						message: this.$t('page.editAddress.detailed-message'),
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onShow() {
			if(this.$route.query.id && this.$route.query.id != 'undefined'){
				this.getAddress()
			}else{
				this.$route.query.id = undefined
			}
		},
		methods: {
			getAddress(){		//获取地址列表
				this.request('addressOne', {}, {
					id : this.$route.query.id
				}).then(res=>{
					if(res.code == 200){
						this.addressInfo = res.result
					}
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if(this.$route.query.id && !this.addressInfo.id){
						return
					}
					
					this.request(this.addressInfo.id ? 'editAddress' : 'saveAddress', 
					{
						...this.addressInfo,
						default_flag : this.addressInfo.default_flag ? '1' : '0',
						"uid": 1
					}).then(res=>{
						if(res.code == 200){
							uni.$u.toast(this.$t('success-operation'))
							setTimeout(()=>{
								uni.navigateBack(-1)
							},500)
						}
					})
					
				})
			},
			leftClick(){
				let query = this.$route.query;
				if(query.url && query.oid && query.quantity){
					return uni.redirectTo({
						url:query.url + "?id=" + query.oid + "&quantity=" + query.quantity
					})
				}
				uni.navigateTo({
					url: '/pages/user/address/address'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addAddress {
		&::v-deep .container {
			box-sizing: border-box;
			padding: 0px 10px;
			margin-top: 54px;

			.u-form {
				box-sizing: border-box;
				background: white;
				border-radius: 15rpx;

				.u-form-item {
					padding: 0px 15px;

					.u-form-item__body {
						height: 40px;
					}
				}
			}

			.settings-default {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40px;
				background: white;
				margin-top: 10px;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 10px;
			}
		}

		&::v-deep .u-button {
			height: 40px;
			margin: 10px 0px;
		}
	}
</style>