shop_app/components/order/chooseAddr.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}}&nbsp;&nbsp;{{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">
					<van-empty image="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/address.png" description="暂无地址信息" />
				</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>