gas-cylinder-h5/pages/order/booking.vue

<template>
	<view>
		<u-navbar title="订气" autoBack placeholder></u-navbar>
		<view class="card_shipping">
			<view class="space_between shipping_select" @click="selectShipping">
				<view class="shipping_title" v-if="!addInfo.id">选择收货地址</view>
				<view v-else>
					<view class="center_item">
						<view class="title_item">{{addInfo.name}}</view>
						<view class="title_item">{{hidePhone(addInfo.phone)}}</view>
					</view>
					<view class="title_address1">
						{{cityScreening(addInfo.city, areaData)}}{{cityScreening(addInfo.area, areaData)}}{{addInfo.address}}
					</view>
				</view>
				<view style="margin-right: 10rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="card_form">
			<x-form ref="personage" :list="list" :model="model" :rules="rules" @confirm="confirm"
				@clientele="clientele"></x-form>
		</view>
		<u-popup :show="receivingShow" closeable :round="10" mode="bottom" @close="close">
			<view class="card_addres">
				<view class="title_address">选择收货地址</view>
				<view class="card_add_booking">
					<view class="card_address" v-for="(item,index) in addressList" :key="index"
						@click="selectBooking(item)">
						<view class="card_group"
							:style="{border:item.flag ? '2rpx solid #2b85e4' : '2rpx solid #e7e6e4'}">
							<view class="item_radio" v-if="item.flag"></view>
						</view>
						<view style="width: 100%;">
							<view class="center_item">
								<view class="title_item">{{item.name}}</view>
								<view class="phone_title">
									<view class="title_item">{{hidePhone(item.phone)}}</view>
									<view class="tag_phone" v-if="item.isDefault">默认</view>
								</view>
							</view>
							<view class="center_item address_item">
								<view class="title_address1">
									{{cityScreening(item.city, areaData)}}{{cityScreening(item.area, areaData)}}{{item.address}}
								</view>
								<view @click.native.stop="goAmend(item)"><u-icon name="edit-pen" size="30"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn_add">
					<u-button type="primary" size="normal" text="新增收货地址" @click="rightClick"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		urbanArea
	} from '@/static/js/districtCode.js'
	export default {
		data() {
			return {
				areaData: urbanArea(), //原始数据
				list: [{
					field: 'commodity',
					label: '商品',
					placeholder: '请选择商品',
					type: 'select',
					required: true,
					options: [
						[{
								label: '液化石油气',
								value: 0,
							},
							{
								label: '二甲醚',
								value: 1,
							},
						]
					],
				}, {
					field: 'specification',
					label: '规格',
					placeholder: '请选择规格',
					type: 'select',
					required: true,
				}, {
					field: 'amount',
					label: '数量',
					placeholder: '请输入数量',
					type: 'input',
					required: true,
				}, {
					field: 'remark',
					label: '备注',
					placeholder: '请输入备注',
					type: 'textarea',
				}],
				model: {
					commodity: '',
					specification: '',
					amount: '',
					remark: '',
				},
				rules: {
					'commodity': {
						type: 'string',
						required: true,
						message: '请选择商品',
						trigger: ['blur', 'change']
					},
					'specification': {
						type: 'string',
						required: true,
						message: '请选择规格',
						trigger: ['blur', 'change']
					},
					'amount': {
						type: 'number',
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					},
				},
				receivingShow: false,
				addressList: [],
				value: '',
				addInfo: {},
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			selectShipping() {
				this.receivingShow = true
			},
			close() {
				this.receivingShow = false
			},
			getList() {
				this.$api.get('/api/applet/address').then(res => {
					if (res.code == 200) {
						this.addressList = res.data.list
						this.addressList.forEach(item => {
							item.flag = false
						})
					}
				})
			},
			// 选择收货地址
			selectBooking(value) {
				this.addressList.forEach(item => {
					if (value.id == item.id) {
						this.addInfo = item
						this.receivingShow = false
						item.flag = true
					} else {
						item.flag = false
					}
				})
				this.$forceUpdate()
			},
			// 新增地址
			rightClick() {
				uni.navigateTo({
					url: '/pages/mine/addAddress'
				});
			},
			// 修改地址
			goAmend(value) {
				this.$cache.setCache('addressInfo', value)
				uni.navigateTo({
					url: '/pages/mine/addAddress?revamp=' + true + '&id=' + value.id
				});
			},
			// 城市筛选
			cityScreening(value, list) {
				function getChildById(parentArray, id) {
					for (let i = 0; i < parentArray.length; i++) {
						if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
							return parentArray[i];
						} else if (parentArray[i].children && Array.isArray(parentArray[i]
								.children)) { // 判断当前元素是否有子节点且类型为数组
							const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
							if (result !== null) { // 若子节点存在结果，则返回该结果
								return result;
							}
						}
					}
					return null; // 没有找到符合条件的元素时返回null
				}
				var name = getChildById(list, value)
				if (name != null) {
					return name.label
				}
			},
			hidePhone(phoneNumber) {
				if (phoneNumber) {
					function hidePhoneNumber(phoneNumber) {
						return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(-4);
					}
					const hiddenPhoneNumber = hidePhoneNumber(phoneNumber);
					return hiddenPhoneNumber
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card_shipping {
		display: flex;
		width: 100%;
	}

	.shipping_select {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin: 20rpx 30rpx;
		width: 100%;
		height: 120rpx;
		border-radius: 6rpx;
		border: 1rpx solid #e7e6e4;
	}

	.shipping_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.card_form {
		margin: 10rpx 30rpx;
	}

	.card_add_booking {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.card_addres {
		height: 50vh;
	}

	.title_address {
		margin-top: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
	}

	.card_address {
		display: flex;
		margin: 30rpx 20rpx 20rpx 20rpx;
		padding: 10rpx;
		border-bottom: 1rpx solid #e7e6e4;
	}


	.center_item {
		display: flex;
		align-items: center;
	}

	.title_item {
		font-size: 26rpx;
		color: #606266;
	}

	.phone_title {
		position: relative;
		margin-left: 30rpx;
	}

	.tag_phone {
		position: absolute;
		right: -53rpx;
		top: -14rpx;
		padding: 2rpx 4rpx;
		border: 1rpx solid #2b85e4;
		font-size: 20rpx;
		color: #2b85e4;
	}

	.title_address1 {
		font-size: 30rpx;
		color: #303133;
		font-weight: 600;
	}

	.address_item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 6rpx;
	}

	.card_group {
		position: relative;
		flex: none;
		margin-right: 15rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.item_radio {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #2b85e4;
	}

	.btn_add {
		width: calc(100% - 40rpx);
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
	}
</style>