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

<template>
	<uv-popup ref="popup" 
	:round="30" 
	bgColor="#f7f7f7">
		<view class="content">
			
			<!-- 地址 -->
			<view class="address"
			@click="openAddress">
				<image src="../../static/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>
			
			<!-- 商品信息和数量 -->
			<view class="submit-info">
				<view class="title">
					桌布租赁
				</view>
				<view class="box">
					<image
					class="image"
					:src="unit.pic" 
					mode=""></image>
					
					<view class="info">
						<view class="price">
							￥<text>{{ unit.depositPrice }}</text>元
						</view>
						<view class="unit">
							请选择规格
						</view>
						<view class="">
							<uv-number-box v-model="num"></uv-number-box>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 规格 -->
			<view class="submit-unit">
				<view class="title">
					规格选择
				</view>
				<view class="list">
					<view :class="{act : unitIndex == index}" 
					v-for="(item, index) in detail.hotelGoodsSkuList"
					@click="selectUnit(item, index)"
					:key="index">
						{{ item.title }}
					</view>
				</view>
			</view>
			
			
			
			<!-- 费用明细 -->
			<view class="expense-detail">
				<view class="title">
					费用明细
				</view>
				<view class="detail">
					押金：￥{{ unit.depositPrice }}
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-btn">
				<view class="l"
				@click="addCart">
					加入租赁车
				</view>
				<view class="r">
					{{ submiitTitle }}
				</view>
			</view>
			
		</view>
		
		<uv-popup ref="addressPopup" :round="30">
			<addressList
			ref="addressList"
			height="60vh"
			@select="selectAddress"
			/>
		</uv-popup>
	</uv-popup>
</template>

<script>
	import addressList from '../address/addressList.vue'
	export default {
		components : {
			addressList,
		},
		props : {
			submiitTitle : {
				default : '立即租赁',
				type : String,
			},
			detail : {
				default : {}
			}
		},
		data() {
			return {
				unitIndex : 0,
				address : {
					name : '请选择联系人',
					addressDetail : '',
				},
				num : 1,
				unit : {},
			}
		},
		methods: {
			// 打开
			open(){
				this.$refs.popup.open('bottom')
				if(!this.unit.id){
					this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
				}
			},
			// 关闭
			close(){
				this.$refs.popup.close()
			},
			// 打开选择地址
			openAddress(){
				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					if (res.total == 0) {
						return uni.navigateTo({
							url: '/pages_order/mine/address'
						})
					}
					this.$refs.addressPopup.open('bottom')
				})
			},
			// 选择地址
			selectAddress(e){
				this.address = e
				this.$refs.addressPopup.close()
			},
			// 选择规格
			selectUnit(item, index){
				this.unit = item
				this.unitIndex = index
			},
			addCart(){
				this.$api('cartAdd', {
					id : this.detail.id,
					skuId : this.unit.id,
				}, res => {
					if(res.code == 200){
						uni.showToast({
							title: '添加成功',
						});
						this.$refs.popup.close()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.content{
	max-height: 80vh;
	overflow: hidden;
	overflow-y: auto;
	.address{
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		image{
			width: 30rpx;
			height: 30rpx;
			margin: 20rpx;
		}
		view{
			margin: 20rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
		.icon{
			margin-left: auto;
		}
	}
	.submit-info{
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		.title{
			font-size: 30rpx;
			padding: 10rpx;
			font-weight: 600;
		}
		.box{
			display: flex;
			margin-top: 10rpx;
			.image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.info{
				flex: 1;
				.unit{
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					color: #717171;
					display: flex;
					align-items: center;
				}
				.price{
					color: $uni-color;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
					text{
						font-size: 36rpx;
						font-weight: 900;
					}
				}
			}
		}
	}
	.submit-unit{
		padding: 30rpx;
		background-color: #fff;
		.title{
			font-size: 28rpx;
			font-weight: 600;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			font-size: 22rpx;
			.act{
				color: $uni-color;
				border: 1px solid $uni-color;
				background-color: #F9E7DE;
			}
			view{
				border-radius: 15rpx;
				width: 320rpx;
				background-color: #F3F3F3;
				border: 1px solid #F3F3F3;
				margin: 10rpx;
				display: flex;
				justify-content: center;
				padding: 15rpx 0;
			}
		}
	}
	.expense-detail{
		padding: 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		.title{
			font-weight: 600;
		}
		.detail{
			background-color: #F6F6F6;
			color: #717171;
			margin: 10rpx 0;
			padding: 10rpx 20rpx;
		}
	}
	.submit-btn{
		width: 600rpx;
		height: 80rpx;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid $uni-color;
		overflow: hidden;
		.l{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $uni-color;
		}
		.r{
			background: $uni-color;
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>