323 lines
7.3 KiB
Vue
323 lines
7.3 KiB
Vue
<template>
|
|
<view>
|
|
<up-popup :show="showPopup" mode="bottom" :round="10" @close="close" catchtouchmove="preventD">
|
|
<view class="topTitle">选择地址</view>
|
|
<view class="listbox">
|
|
<view class="row flex1" v-for="(item, index) in addrList" :key="item.id" @click="selectAddr(item)">
|
|
<span class="iconfont icon-checked" v-if="item.id === addr_id"></span>
|
|
<span class="iconfont icon-circle" v-else></span>
|
|
<view class="txt">
|
|
<text>{{item.name}} {{item.mobile}}</text><text v-if="item.is_default === 1" class="default">默认</text><br>
|
|
<text>
|
|
{{item.province && item.province.name}}{{item.city && item.city.name}}{{item.area && item.area.name}}{{item.address}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="addrList.length === 0">
|
|
<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/address.png" text="暂无地址信息"></up-empty>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom flex" @click="showAddr = true"><van-icon name="plus" color="#fff" size="18" />添加新地址</view>
|
|
|
|
<!-- 新增、编辑地址 -->
|
|
<up-popup :show="showAddr" mode="bottom" :round="10" close-on-click-overlay closeable @close="showAddr = false">
|
|
<view class="addrbox">
|
|
<view class="title">添加地址</view>
|
|
<view class="box">
|
|
<view class="row_it flex1">
|
|
<text>收件人</text>
|
|
<input v-model="addrData.name" class="inpt" placeholder="请输入收件人姓名" />
|
|
</view>
|
|
<view class="row_it flex1">
|
|
<text>联系电话</text>
|
|
<input v-model="addrData.mobile" class="inpt" placeholder="请输入收件人联系电话" />
|
|
</view>
|
|
<view class="row_it flex1" @click="showArea = true">
|
|
<text>位置</text>
|
|
<view style="flex: 1;">
|
|
<uni-data-picker
|
|
placeholder="请选择"
|
|
popup-title="请选择"
|
|
:localdata="areaList"
|
|
v-model="addrData.area_id"
|
|
@change="chooseArea"
|
|
:map="{text:'name',value:'id'}">
|
|
</uni-data-picker>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="row_it flex1">
|
|
<text>详细地址</text>
|
|
<input v-model="addrData.address" class="inpt" placeholder="请输入详细地址" />
|
|
</view>
|
|
</view>
|
|
<view class="anniu">
|
|
<view class="btn flex" @click="commitAddress()">保存并使用</view>
|
|
</view>
|
|
|
|
</view>
|
|
</up-popup>
|
|
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
import { showToast } from '../common.js'
|
|
import { get, post } from '@/api/request.js'
|
|
import { areaList } from '@/components/areaList.js'
|
|
import { Style } from '@/utils/list.js'
|
|
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
addrId: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
showPopup: false,
|
|
addrList: [
|
|
{}
|
|
],
|
|
addr_id: '',
|
|
showAddr: false,
|
|
curAddrId: '',
|
|
curAddrIndex: '',
|
|
addrData: {
|
|
comment: ''
|
|
},
|
|
areaNames: '',
|
|
areaId: '',
|
|
showArea: false,
|
|
Color: uni.getStorageSync('theme_color')
|
|
})
|
|
|
|
async function getAddrList() {
|
|
await get(`/api/v1/address`).then((res) => {
|
|
data.addrList = res.data
|
|
})
|
|
}
|
|
|
|
function selectAddr(item) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要修改当前订单的地址吗？',
|
|
confirmColor: '#42b983',
|
|
success(res) {
|
|
if(res.confirm) {
|
|
data.addr_id = item.id
|
|
close()
|
|
context.emit('choose', item)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function commitAddress() {
|
|
if(!data.addrData.name) {
|
|
showToast('请输入收件人姓名')
|
|
return
|
|
}
|
|
if(!data.addrData.mobile) {
|
|
showToast('请输入收件人联系电话')
|
|
return
|
|
}
|
|
if(!data.addrData.area_id) {
|
|
showToast('请选择位置信息')
|
|
return
|
|
}
|
|
if(!data.addrData.address) {
|
|
showToast('请输入详细地址')
|
|
return
|
|
}
|
|
let params = {
|
|
name: data.addrData.name,
|
|
mobile: data.addrData.mobile,
|
|
province_id: data.addrData.province_id,
|
|
city_id: data.addrData.city_id,
|
|
area_id: data.addrData.area_id,
|
|
address: data.addrData.address,
|
|
postal_code: '',
|
|
is_default: 0
|
|
}
|
|
post(`/api/v1/address`, params).then(async (res) => {
|
|
await getAddrList()
|
|
data.showAddr = false
|
|
resetPopup()
|
|
})
|
|
}
|
|
|
|
function chooseArea(e) {
|
|
console.log(e)
|
|
if(e.detail.value.length) {
|
|
let list = []
|
|
for (let i = 0; i < e.detail.value.length; i++) {
|
|
if (e.detail.value[i].text === '') {
|
|
showToast('请选择完整地区信息')
|
|
return
|
|
}
|
|
list.push({id: e.detail.value[i].value, name: e.detail.value[i].text})
|
|
}
|
|
|
|
data.addrData.province_id = list[0].id
|
|
data.addrData.city_id = list[1].id
|
|
data.addrData.area_id = list[2].id
|
|
} else {
|
|
data.addrData.province_id = ''
|
|
data.addrData.city_id = ''
|
|
data.addrData.area_id = ''
|
|
}
|
|
}
|
|
|
|
function resetPopup() {
|
|
data.curAddrId = ''
|
|
data.addrData.name = ''
|
|
data.addrData.mobile = ''
|
|
data.addrData.address = ''
|
|
data.areaId = ''
|
|
data.areaNames = ''
|
|
}
|
|
|
|
function close() {
|
|
data.showPopup = false
|
|
context.emit('close')
|
|
}
|
|
|
|
function preventD() {
|
|
return
|
|
}
|
|
|
|
watch(props, (newProps) => {
|
|
if (newProps.show) {
|
|
data.addr_id = newProps.addrId
|
|
data.showPopup = true
|
|
getAddrList()
|
|
}
|
|
})
|
|
|
|
return {
|
|
areaList,
|
|
...toRefs(data),
|
|
close,
|
|
selectAddr,
|
|
getAddrList,
|
|
resetPopup,
|
|
commitAddress,
|
|
chooseArea,
|
|
preventD
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex1{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.topTitle{
|
|
font-size: 30rpx;
|
|
color: #303030;
|
|
font-weight: bold;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
}
|
|
.listbox{
|
|
height: 65vh;
|
|
overflow: auto;
|
|
background: #fff;
|
|
.row{
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
.txt{
|
|
padding: 24rpx 0;
|
|
width: calc(100% - 60rpx);
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
text{
|
|
line-height: 50rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
.default{
|
|
padding: 2rpx 8rpx;
|
|
font-size: 22rpx;
|
|
color: v-bind('Color');
|
|
border: 1px solid v-bind('Color');
|
|
border-radius: 6rpx;
|
|
line-height: 1;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom{
|
|
width: 92%;
|
|
height: 90rpx;
|
|
background: v-bind('Color');
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
border-radius: 90rpx;
|
|
margin: 24rpx auto;
|
|
}
|
|
|
|
.addrbox{
|
|
padding: 0 30rpx 40rpx;
|
|
.title{
|
|
font-size: 30rpx;
|
|
color: #303030;
|
|
font-weight: bold;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
}
|
|
.box{
|
|
padding-bottom: 200rpx;
|
|
.row_it{
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
text{
|
|
width: 130rpx;
|
|
display: block;
|
|
}
|
|
.inpt{
|
|
width: calc(100% - 130rpx);
|
|
}
|
|
}
|
|
}
|
|
.anniu{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.btn{
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
width: 100%;
|
|
border-radius: 80rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid v-bind('Color');
|
|
color: #fff;
|
|
background: v-bind('Color');
|
|
}
|
|
}
|
|
}
|
|
.icon-checked{
|
|
color: v-bind('Color');
|
|
}
|
|
</style>
|