下单，地址管理
This commit is contained in:
唐明明
@@ -1,19 +1,303 @@
|
||||
<template>
|
||||
<view>
|
||||
编辑地址
|
||||
<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
|
||||
|
||||
console.log(e.value)
|
||||
|
||||
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">
|
||||
|
||||
<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: 0 $padding 0 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: 0;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user