hotel-tablecloth-uniapp-24-08-29/pages_order/components/product/addLease.vue

<template>
	<uv-popup ref="addPopup" :round="30">

		<!-- 地址 -->
		<view class="address" @click="openAddress">
			<image src="/static/image/address/selectIcon.png" mode=""></image>
			<view class="">
				{{ address.name }}
			</view>
			<view class="">
				{{ address.addressDetail }}
			</view>
			<view class="icon">
				<uv-icon size="30rpx" name="arrow-right"></uv-icon>
			</view>
		</view>
		
		<uv-popup ref="addressPopup" :round="30">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
		</uv-popup>

		<addLeaseForm ref="addLeaseForm"/>

		<view class="btn" @click="submit">
			<button class="a">添加</button>
		</view>
	</uv-popup>
</template>

<script>
	import addLeaseForm from './addLeaseForm.vue'
	import addressList from '@/components/address/addressList.vue'
	export default {
		components : {
			addLeaseForm,
			addressList,
		},
		data() {
			return {
				address: {
					name: '请选择联系人',
					addressDetail: '',
				},
				addressTotal: 0,
			}
		},
		methods: {
			// 打开选择地址
			openAddress() {
				if (this.addressTotal == 0) {
					this.$refs.popup.close()
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				this.$refs.addressPopup.open('bottom')
			},
			// 选择地址
			selectAddress(e) {
				this.address = e
				this.$refs.addressPopup.close()
			},
			submit() {
				if(!this.address.id){
					return uni.showToast({
						title: '请选择地址'
					})
				}
				this.$refs.addLeaseForm.submit(form => {
					form.addressId = this.address.id, //地址id
					this.$api('tablecloth', form, res => {
						if (res.code == 200) {
							this.$emit('submit')
							this.$refs.addPopup.close()
						}
					})
				})
				
			},
			open() {
				this.$refs.addLeaseForm.closeForm()
				this.$refs.addPopup.open('bottom')

				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.address {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 20rpx solid #f3f3f3;
	
		image {
			width: 30rpx;
			height: 30rpx;
			margin: 20rpx;
		}
	
		view {
			margin: 20rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出不换行
		}
	
		.icon {
			margin-left: auto;
		}
	}
	.btn {
		display: flex;
		justify-content: center;
		width: 100%;
		
		.a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			height: 100rpx;
			color: #FFF;
			background-color: $uni-color;
			border: 1px solid red;
			border-radius: 100rpx;
			font-size: 30rpx;
		}
	}
</style>