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-info">
				<view class="title">
					桌布租赁
				</view>
				<view class="box">
					<image class="image" :src="unit.pic" mode=""></image>

					<view class="info">
						<view class="price">
							￥<text>{{ 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 }}
					</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>
						押金：￥{{ price }}
					</view>
					<view v-if="coupon.price">
						优惠：-￥{{ coupon.price }}
					</view>
					<view v-if="coupon.price">
						实付款：￥{{ (price - coupon.price).toFixed(2) }}
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn">
				<view class="l" @click="addCart">
					加入租赁车
				</view>
				<view class="r" @click="orderPay">
					{{ submiitTitle }}
				</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'
	export default {
		components: {
			addressList,
			couponList,
		},
		props: {
			submiitTitle: {
				default: '立即租赁',
				type: String,
			},
			detail: {
				default: {}
			},
		},
		computed : {
			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 : '请选择',
			}
		},
		methods: {
			// 打开
			open() {
				this.$refs.popup.open('bottom')
				this.$refs.couponList.getData()
				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]
					}
				})
			},
			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,
				}, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
						});
						this.$refs.popup.close()
					}
				})
			},
			orderPay() {

				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.$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: 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;
				line-height: 50rpx;
			}
		}

		.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>