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

<template>
	<uv-popup ref="popup" :round="30" 
	@change="$refs.couponPopup.close()"
	bgColor="#f7f7f7">
		<view class="content">

			<!-- 地址 -->
			<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>
			
			<!-- 是否有桌布 -->
			<!-- <view class="submit-unit"
			style="margin-top: 20rpx;">
				<view class="title">
					您有{{ detail.categoryName }}吗？
				</view>
				<view class="list">
					<view :class="{act : typeIndex == index}" v-for="(item, index) in type"
						@click="typeIndex = index" :key="index">
						{{ item }}{{ detail.categoryName }}
					</view>
				</view>
			</view> -->
			
			<!-- 我要购买、租赁 -->
			<!-- <view class="submit-unit"
			style="margin-top: 20rpx;">
				<view class="list">
					<view :class="{act : buyIndex == index}" 
					v-for="(item, index) in buyType"
						@click="buyIndex = index" 
						:key="index">
						{{ item }}
					</view>
				</view>
			</view> -->
			
			
			<view class="payInfoMessage"
			v-if="buyIndex == 0">
				<view style="font-weight: 900;">
					下单说明：
				</view>
				<view class="">
					租金：从物品确认收货开始计算￥{{ configList.depositPrice }}元/天
				</view>
				<view class="">
					押金：将按照面积计算每平方厘米￥1元
				</view>
			</view>

			<!-- 商品信息和数量 -->
			<view v-if="typeIndex == 0">
				<view class="submit-info">
					<view class="title">
						{{ detail.categoryName }}租赁
					</view>
					<view class="box">
						<image class="image" :src="unit.pic" mode=""></image>
				
						<view class="info">
							<view class="price">
								租金￥<text>{{ unit.price }}</text>元/天
							</view>
							<view class="price"
							style="font-size: 22rpx;">
								押金￥<text
							style="font-size: 22rpx;">{{ detail.depositPrice }}</text>元
							</view>
							<view class="unit">
								请选择规格
							</view>
							<view class="">
								<uv-number-box 
								@change="valChange" 
								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 }}
							<text v-if="item.colour">,{{ item.colour }}</text>
						</view>
					</view>
				</view>
				
				<!-- 优惠劵 -->
				<!-- <view style="padding: 0 20rpx;">
					<uv-cell 
					icon="coupon" 
					title="优惠劵"
					iconStyle="font-size: 34rpx;"
					rightIconStyle="font-size: 34rpx;"
					:value="couponText"
					@click="$refs.couponPopup.open('bottom')"
					isLink>
					</uv-cell>
				</view> -->
				
				
				
				<!-- 费用明细 -->
				<view class="expense-detail">
					<view class="title">
						费用明细
					</view>
					<view class="detail" v-if="detail.depositPrice">
						<view>
							应付款：￥{{ price }}
						</view>
						<view>
							<view class="">
								押金：￥{{ detail.depositPrice }}
							</view>
							<view class="">
								x{{ num }}
							</view>
						</view>
						<view v-if="coupon.couponCondition <= price
						&& coupon.couponFlag">
							优惠：-￥{{ coupon.couponPrice }}
						</view>
						<view v-if="coupon.couponCondition <= price
						&& coupon.couponFlag">
							实付款：￥{{ (price - coupon.couponPrice).toFixed(2) }}
						</view>
					</view>
					
					<uv-cell
					icon="coupon" 
					title="押金优惠"
					v-if="coupon.couponFlag"
					iconStyle="font-size: 34rpx;"
					rightIconStyle="font-size: 34rpx;">
						<template #value>
							<view class="coupon">
								满{{ coupon.couponCondition }}立减{{ coupon.couponPrice }}
							</view>
						</template>
					</uv-cell>
				</view>
				
			</view>
			
			<addLeaseForm :categoryId="detail.categoryId" ref="addLeaseForm" v-if="typeIndex == 1"/>

			<!-- 提交按钮 -->
			<view class="submit">
				<view class="submit-btn">
					<view class="l" @click="addCart" v-if="typeIndex == 0">
						加入租赁车
					</view>
					<view class="r" @click="orderPay">
						{{ submiitTitle }}
					</view>
				</view>
			</view>

		</view>

		<uv-popup ref="couponPopup" :round="30">
			<couponList 
			ref="couponList" 
			height="60vh" 
			:depositPrice="price"
			@select="selectCoupon" />
		</uv-popup>

		<uv-popup ref="addressPopup" :round="30">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
		</uv-popup>
	</uv-popup>
</template>

<script>
	import addressList from '@/components/address/addressList.vue'
	import couponList from '@/components/user/couponList.vue'
	import addLeaseForm from './addLeaseForm.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			addressList,
			couponList,
			addLeaseForm,
		},
		props: {
			submiitTitle: {
				default: '立即下单',
				type: String,
			},
			detail: {
				default: {}
			},
		},
		computed : {
			...mapState(['configList']),
			price(){
				return (this.detail.depositPrice * this.num).toFixed(2)
			},
		},
		data() {
			return {
				unitIndex: 0,
				address: {
					name: '请选择联系人',
					addressDetail: '',
				},
				num: 1,
				unit: {},
				addressTotal: 0,
				coupon : {
					price : 0,
				},
				couponText : '请选择',
				typeIndex : 0,//是否有桌布
				type : ['没有', '我有'],//是否有桌布
				buyIndex : 0,//是否有桌布
				buyType : ['我要租赁', '我要购买'],//是否购买
			}
		},
		methods: {
			// 打开
			open() {
				this.$refs.popup.open('bottom')
				// this.$refs.couponList.getData()
				this.confCoupon()
				if (!this.unit.id) {
					this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
				}

				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
			confCoupon(){
				this.$api('confCoupon', res => {
					if(res.code == 200){
						this.coupon = res.result
					}
				})
			},
			valChange(){
				// this.coupon = {
				// 	price : 0,
				// }
				// this.couponText = '请选择'
			},
			// 选择优惠劵
			selectCoupon(e){
				this.couponText = e.couponName
				this.coupon = e
				this.$refs.couponPopup.close()
			},
			// 关闭
			close() {
				this.$refs.popup.close()
			},
			// 打开选择地址
			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()
			},
			// 选择规格
			selectUnit(item, index) {
				this.unit = item
				this.unitIndex = index
			},
			addCart() {
				this.$api('cartAdd', {
					id: this.detail.id,
					skuId: this.unit.id,
					num : this.num,
				}, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
						});
						this.$refs.popup.close()
					}
				})
			},
			// 添加我的物品
			submitAddLease() {
				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) {
							uni.redirectTo({
								url: '/pages_order/order/createWash?id=1'
							})
						}
					})
				})
				
			},
			orderPay() {
				
				// 添加我的物品
				if(this.typeIndex == 1){
					return this.submitAddLease()
				}
				
				
				// 租赁物品

				let data = [
					{
						id: this.detail.id, //商品id
						skuId: this.unit.id, //规格id
						addressId: this.address.id, //地址id
						sku: this.unit.title, //规格
						num: this.num,
					}
				]
				
				if(this.unit.colour){
					data[0].sku = data[0].sku + ',' + this.unit.colour
				}


				if (this.$utils.verificationAll(data[0], {
						skuId: '请选择规格',
						addressId: '请选择地址',
					})) {
					return
				}

				this.$api('orderCreate', {req:JSON.stringify(data)}, res => {
					if (res.code == 200) {
						let form = {
							id: res.result.id,
						}
						if(this.coupon.id){
							form.couponId = this.coupon.id
						}
						this.$api('orderPay', form, res => {
							if (res.code == 200) {
								uni.requestPayment({
									provider: 'wxpay', // 服务提提供商
									timeStamp: res.result.timeStamp, // 时间戳
									nonceStr: res.result.nonceStr, // 随机字符串
									package: res.result.packageValue,
									signType: res.result.signType, // 签名算法
									paySign: res.result.paySign, // 签名
									success: function(res) {
										// console.log('支付成功', res);
										uni.redirectTo({
											url: '/pages/index/order'
										})
										
									},
									fail: function(err) {
										console.log('支付失败', err);
										uni.redirectTo({
											url:'/pages/index/order'
										})
										// self.$refs.confirmationPopup.close()
										uni.showToast({
											icon: 'none',
											title: "支付失败"
										})
									}
								});
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		max-height: 70vh;
		overflow: hidden;
		overflow-y: auto;
		padding-bottom: 120rpx;

		.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;
			}
		}
		
		
		.payInfoMessage{
			line-height: 50rpx;
			background-color: #fff;
			padding: 20rpx;
			margin: 10rpx 0;
			font-size: 26rpx;
		}

		.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;
				line-height: 50rpx;
				view{
					display: flex;
					justify-content: space-between;
				}
			}
			.coupon{
				text-align: center;
				color: #5c5;
			}
		}
		
		.submit{
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			.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>