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

<!--
 * @Author: ch
 * @Date: 2022-03-22 14:12:18
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 22:07:44
 * @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 space="2" v-model="address.isDefault" activeColor="#FF875B" inactiveColor="#F3F3F3" />
			</template>
		</UiCell>
		<UiCell class="form--item  form--item__last del-address" @click="delAddress" title="删除收货地址" :rightIcon="false"></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 {ApiPutAddress, ApiDeleteAddress} from '@/common/api/base';

export default {
	components: { UiCell, UiButton, BsSelectCity },
	data (){
		return {
			address : {},
			city : []
		}
	},
	onShow(){
		this.address = this.$store.state.address.find(i => i.id == this.$Route.query.id);
		this.city = [
				{code : this.address.provinceCode, name : this.address.province},
				{code : this.address.cityCode, name : this.address.city},
				{code : this.address.areaCode, name : this.address.area},
			]
	},
	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 ApiPutAddress({
				...this.address,
				province,provinceCode,areaCode,area,city,cityCode
			});
			if(error){
				$toast(error.message);
				return false;
			}
			$toast('保存成功');
			this.$Router.back();
		},
		async delAddress(){
			this.$msb.confirm({
				content: '您确定要删除该地址吗？',
				confirm: async ()=> {
					const {error} = await ApiDeleteAddress({idList : this.$Route.query.id});
					if(error){
						uni.$u.toast(error.message);
						return false;
					}
					this.$Router.back();
                }
			})
		}
	}
	
};
</script>

<style lang="scss" scoped>
page {
	background: $color-grey1;
}
.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/ {
	.del-address .ui-cell--title{
		color: $color-yellow3;
	}
	.form--city .ui-cell{
		padding: 0 40rpx;
	}
}
</style>