301 lines
6.6 KiB
Vue
301 lines
6.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 表单 -->
|
|
<view class="form-block">
|
|
<view class="item">
|
|
<label>收货人</label>
|
|
<input class="form-input" type="text" v-model="name" placeholder="输入收货人姓名" />
|
|
</view>
|
|
<view class="item">
|
|
<label>手机号码</label>
|
|
<input class="form-input" type="number" v-model="phone" placeholder="输入手机号码"/>
|
|
</view>
|
|
<view class="item">
|
|
<label>所在地区</label>
|
|
<view class="picker-value" @click="show = true">
|
|
<block v-if="value.length > 0">
|
|
<text v-for="(item, index) in value" :key="index">{{item.name}}</text>
|
|
</block>
|
|
<block v-else>
|
|
<view class="picker-value-placeholder">请选择省市区</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<label>详细地址</label>
|
|
<input class="form-input" type="text" v-model="street" placeholder="输入详细地址"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-block">
|
|
<view class="item">
|
|
<label>设为默认</label>
|
|
<view class="form-switch">
|
|
<u-switch v-model="def" size="22" activeColor="#34CE98" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-block" v-if="this.$Route.query.id">
|
|
<view class="item remove" @click="deleteThis">
|
|
<label>删除地址</label>
|
|
<view class="form-switch">
|
|
<uni-icons type="forward" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 编辑信息 -->
|
|
<view class="footer">
|
|
<button type="default" @click="submit">{{this.$Route.query.id ? '保存' : '创建'}}</button>
|
|
</view>
|
|
<!-- 地址选择器 -->
|
|
<u-picker
|
|
:show="show"
|
|
ref="uPicker"
|
|
keyName="name"
|
|
:columns="columns"
|
|
confirmColor="#34CE98"
|
|
cancelColor="#666"
|
|
:defaultIndex="defaultIndex"
|
|
@cancel="show = false"
|
|
@confirm="confirm"
|
|
@change="changePicker"
|
|
></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { addresses, add, info, edit, del } from '@/apis/interfaces/address'
|
|
export default {
|
|
data() {
|
|
return {
|
|
show : false,
|
|
value : [],
|
|
columns : [
|
|
[{name: '省'}],
|
|
[{name: '市'}],
|
|
[{name: '区/县'}]
|
|
],
|
|
defaultIndex: [],
|
|
name : "",
|
|
phone : "",
|
|
street : "",
|
|
def : false,
|
|
};
|
|
},
|
|
created() {
|
|
uni.setNavigationBarTitle({
|
|
title: this.$Route.query.id ? '编辑地址': '创建地址'
|
|
})
|
|
if(this.$Route.query.id){
|
|
info(this.$Route.query.id).then(res =>{
|
|
let addressId = [
|
|
res.province.region_id,
|
|
res.city.region_id,
|
|
res.district.region_id,
|
|
]
|
|
this.name = res.name
|
|
this.phone = res.mobile
|
|
this.street = res.address
|
|
this.def = res.default
|
|
this.value = [
|
|
{ name:res.province.name, id: res.province.region_id},
|
|
{ name:res.city.name, id: res.city.region_id},
|
|
{ name:res.district.name, id: res.district.region_id}
|
|
]
|
|
this.getAddresses(addressId)
|
|
})
|
|
}else{
|
|
this.getAddresses()
|
|
}
|
|
},
|
|
methods:{
|
|
confirm(e){
|
|
this.show = false
|
|
this.value = e.value
|
|
},
|
|
changePicker(e){
|
|
const { columnIndex, index, values } = e
|
|
const parentId = values[columnIndex][index].id
|
|
switch(columnIndex){
|
|
case 0:
|
|
this.getCity(parentId)
|
|
break;
|
|
case 1:
|
|
this.getCounty(parentId)
|
|
break;
|
|
}
|
|
},
|
|
async getAddresses(values){
|
|
let parentId = "",
|
|
columnsArr = []
|
|
|
|
for(let i in this.columns){
|
|
await addresses({parent_id:parentId}).then(res => {
|
|
if(values){
|
|
parentId = values[i]
|
|
}else{
|
|
parentId = res[0].id
|
|
}
|
|
columnsArr.push(res)
|
|
this.$refs.uPicker.setColumnValues(i, res)
|
|
if(i == 2 && values){
|
|
let defIndex = columnsArr.map((val,index) => {
|
|
return val.findIndex(v => v.id === values[index])
|
|
})
|
|
this.defaultIndex = defIndex
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getCity(id) {
|
|
addresses({parent_id:id}).then(res => {
|
|
this.$refs.uPicker.setColumnValues(1, res)
|
|
this.getCounty(res[0].id)
|
|
})
|
|
},
|
|
getCounty(id){
|
|
addresses({parent_id:id}).then(res => {
|
|
this.$refs.uPicker.setColumnValues(2, res)
|
|
})
|
|
},
|
|
submit(){
|
|
let data = {
|
|
name : this.name,
|
|
mobile : this.phone,
|
|
province_id : this.value[0].id,
|
|
city_id : this.value[1].id,
|
|
district_id : this.value[2].id,
|
|
address : this.street,
|
|
is_default : this.def ? 1 : 0
|
|
}
|
|
|
|
let submitFun
|
|
|
|
if(this.$Route.query.id){
|
|
submitFun = edit(this.$Route.query.id, data)
|
|
}else{
|
|
submitFun = add(data)
|
|
}
|
|
|
|
submitFun.then(res => {
|
|
uni.showToast({
|
|
title: res,
|
|
icon : 'success',
|
|
mask : true
|
|
})
|
|
setTimeout(() => {
|
|
this.$Router.back()
|
|
},2000)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
deleteThis(){
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '确定删除地址？',
|
|
cancelText : '取消',
|
|
confirmText : '确认',
|
|
showCancel : true,
|
|
confirmColor: '#34CE98',
|
|
success : res => {
|
|
if(res.confirm){
|
|
del(this.$Route.query.id).then(res => {
|
|
uni.showToast({
|
|
title: res,
|
|
icon : 'success',
|
|
mask : true
|
|
})
|
|
setTimeout(() => {
|
|
this.$Router.back()
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
background: $window-color;
|
|
min-height: 100vh;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
}
|
|
// 提交按钮
|
|
.footer{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
padding: $padding;
|
|
background: white;
|
|
button{
|
|
border-radius: $radius/2;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: $title-size;
|
|
background: $main-color;
|
|
padding: 0;
|
|
color: white;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
// 表单
|
|
.form-block{
|
|
background-color: white;
|
|
border-radius: $radius;
|
|
margin-bottom: $margin;
|
|
.item{
|
|
position: relative;
|
|
padding: $padding $padding $padding 200rpx;
|
|
border-bottom: solid 1rpx $border-color;
|
|
min-height: 90rpx;
|
|
&.remove{
|
|
color: $text-price;
|
|
}
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
label{
|
|
position: absolute;
|
|
left: 0;
|
|
top: $padding;
|
|
padding-left: $padding;
|
|
line-height: 90rpx;
|
|
font-size: $title-size-lg;
|
|
}
|
|
.form-switch{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
}
|
|
.form-input,
|
|
.picker-value{
|
|
min-height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: $title-size-lg;
|
|
&-placeholder{
|
|
color: $text-gray-m;
|
|
}
|
|
@extend .nowrap;
|
|
text{
|
|
margin-right: 10rpx;
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|