You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/account/address/edit.vue

172 lines
4.4 KiB

<!--
* @Author: ch
* @Date: 2022-03-22 14:12:18
* @LastEditors: ch
* @LastEditTime: 2022-05-07 19:07:02
* @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 : {},
oldPhone : '',
city : []
}
},
onShow(){
this.address = this.$store.state.address.find(i => i.id == this.$Route.query.id);
// 记住修改前手机号
this.oldPhone = this.address.phone;
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 != this.oldPhone && !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(){
uni.showModal({
content : '您确定要删除该地址吗?',
cancelColor : '#999',
confirmColor : '#3A83FB',
success : async ({confirm}) =>{
if(confirm){
const {error} = await ApiDeleteAddress({idList : this.$Route.query.id});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$Router.back();
}
}
})
// 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">
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/ {
.del-address .ui-cell--title{
color: $color-yellow3;
}
.form--city .ui-cell{
padding: 0 40rpx;
}
}
</style>