shop-app/pages/account/address/create.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 14:12:18
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 23:09:52
 * @Description: file content
-->
<template>
	<view class="container">
		<view class="form">
			<UiCell class="form--item" title="收货人" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" v-model="address.name" :maxlength="10" placeholder="请输入收货人姓名"/>
				</template>
			</UiCell>
			<UiCell class="form--item" title="手机号码" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" v-model="address.phone" placeholder="请输入收货手机号码"/>
				</template>
			</UiCell>
			<BsSelectCity class="form--item form--city" v-model="city"></BsSelectCity>
			<UiCell class="form--item form--item__last" title="详细地址" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" v-model="address.detailAddress" placeholder="请输入详细地址"/>
				</template>
			</UiCell>
		</view>
		<UiCell class="form--item form--item__last" title="设为默认地址" >
			<template slot="right-icon">
				<u-switch v-model="isDefault"  activeColor="#FF875B" inactiveColor="#F3F3F3" />
			</template>
		</UiCell>
		<UiButton class="saveBtn" type="solid" size="max" @click="save">保存</UiButton>
	</view>
</template>

<script>
import BsSelectCity from '../../../components/BsSelectCity.vue';
import UiButton from '../../../components/UiButton.vue';
import UiCell from '../../../components/UiCell.vue';
import {IsPhone} from '@/common/utils';
import {ApiPostAddress} from '@/common/api/base';

export default {
	components: { UiCell, UiButton, BsSelectCity },
	data (){
		return {
			address : {},
			isDefault : false,
			city : []
		}
	},
	onShow(){
		if(this.$Route.query.first === 'true'){
			this.isDefault = true;
		}
	},
	methods: {
		async save(){
			const $toast = uni.$u.toast;
			if(!this.address.name){
				$toast('请填写收货人姓名');
				return false;
			}
			if(!this.address.phone || !IsPhone(this.address.phone)){
				$toast('请填写正确的手机号');
				return false;
			}
			if(!this.city.length){
				$toast('请选择地区');
				return false;
			}
			if(!this.address.detailAddress){
				$toast('请填写详细地址');
				return false;
			}
			const areaCode = this.city[2].code;
			const area = this.city[2].name;
			const city = this.city[1].name;
			const cityCode = this.city[1].code;
			const provinceCode = this.city[0].code;
			const province = this.city[0].name;
			const {error} = await ApiPostAddress({
				...this.address,
				isDefault : this.isDefault,
				province,provinceCode,areaCode,area,city,cityCode
			});
			if(error){
				$toast(error.message);
				return false;
			}
			$toast('保存成功');
			this.$Router.back();
		}
	}
	
};
</script>
<style lang="scss">
page {
	background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.form{
	background: $color-grey0;
	margin: 20rpx 0;
	&--item{
		padding: 0 40rpx;
		&__last{
			border: 0;
		}
	}
	&--city{
		padding:0 ;
	}
	&--itemInput{
		flex: 1;
		font-size: $font-size-base;
		padding-left: 40rpx;
	}
}
.saveBtn{
	position: fixed;
	bottom: 89rpx;
	left: 30rpx;
	width: 670rpx;
}
/deep/ {
	.form--city .ui-cell{
		padding: 0 40rpx;
	}
}
</style>