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/create.vue

129 lines
3.1 KiB

<!--
* @Author: ch
* @Date: 2022-03-22 14:12:18
* @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:36
* @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" 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="$color-yellow3" 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 : {},
city : []
}
},
onShow(){
this.address.isDefault = this.$Route.query.first === 'true' ? true : false
},
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,
province,provinceCode,areaCode,area,city,cityCode
});
if(error){
$toast(error.message);
return false;
}
$toast('保存成功');
this.$Router.back();
}
}
};
</script>
<style lang="scss" scoped>
page {
background: $color-grey1;
}
.form{
background: $color-grey0;
margin-bottom: 20rpx;
&--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;
}
/deep/ {
.form--city .uiCell{
padding: 0 40rpx;
}
}
</style>