hotel-tablecloth-uniapp-24-08-29/components/user/cartSubmitSelect.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>
					{{ address.name }}
				</view>
				<view class="">
					{{ address.addressDetail }}
				</view>
				<view class="icon">
					<uv-icon size="30rpx" name="arrow-right"></uv-icon>
				</view>
			</view>

			<!-- 优惠劵 -->
			<!-- <view style="padding: 0 20rpx;
			background-color: #fff;">
				<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="payInfoMessage">
				<view style="font-weight: 900;">
					下单说明：
				</view>
				<view class="">
					租金：从物品确认收货开始计算￥{{ configList.depositPrice }}元/天
				</view>
				<view class="">
					押金：将按照面积计算每平方厘米￥1元
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="expense-detail">
				<view class="title">
					费用明细
				</view>
				<view class="detail" v-if="price">
					<view>
						应付款：￥{{ price }}
					</view>
					<!-- <view v-if="depositPrice">
						押金：￥{{ depositPrice }}
					</view> -->
					
					<view 
					:key="index"
					v-for="(depositItem, index) in depositPriceList">
						<view class="">
							押金：￥{{ depositItem.price }}
						</view>
						<view class="">
							x{{ depositItem.num }}
						</view>
					</view>
					
					<!-- <view v-if="washPrice">
						水洗费：￥{{ washPrice.toFixed(2) }}
					</view> -->
					
					<view 
					:key="index"
					v-for="(washItem, index) in washPriceList">
						<view class="">
							水洗费：￥{{ washItem.price }}
						</view>
						<view class="">
							x{{ washItem.num }}
						</view>
					</view>
					
					<view v-if="rentPrice">
						租金：￥{{ rentPrice }}
					</view>
					<view v-if="getPrice().coupon">
						优惠：-￥{{ getPrice().coupon }}
					</view>
					<view v-if="getPrice().price">
						实付款：￥{{ getPrice().price }}
					</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>
				
				<uv-cell
				icon="coupon" 
				title="租金优惠"
				v-if="coupon.leaseCouponFlag"
				iconStyle="font-size: 34rpx;"
				rightIconStyle="font-size: 34rpx;">
					<template #value>
						<view class="coupon">
							满{{ coupon.leaseCouponCondition }}立减{{ coupon.leaseCouponPrice }}
						</view>
					</template>
				</uv-cell>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn">
				<view class="r" @click="orderPay">
					{{ submiitTitle }}
				</view>
			</view>

		</view>

		<uv-popup ref="couponPopup" 
		:round="30">
			<couponList 
			ref="couponList" 
			height="60vh" 
			:depositPrice="depositPrice"
			:washPrice="washPrice"
			:rentPrice="rentPrice"
			:useType="0"
			@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 './couponList.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			addressList,
			couponList,
		},
		props: {
			submiitTitle: {
				default: '立即下单',
				type: String,
			},
			price : {//总金额
				default : 0
			},
			depositPrice: {//押金
				default: 0
			},
			depositPriceList : {//押金列表
				default: []
			},
			washPrice: {//水洗费
				default: 0
			},
			washPriceList : {//水洗列表
				default: []
			},
			rentPrice: {//租金
				default: 0
			},
		},
		computed : {
			...mapState(['configList']),
		},
		data() {
			return {
				address: {
					name: '请选择联系人',
					addressDetail: '',
				},
				addressTotal: 0,
				coupon : {
					// price : 0,
				},
				couponText : '请选择',
			}
		},
		methods: {
			// 打开
			open() {
				this.$refs.popup.open('bottom')
				// this.$refs.couponList.getData()
				// this.$refs.couponPopup.close()
				this.confCoupon()

				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
			// 计算优惠金额
			getPrice(){
				// 减免押金
				if(this.coupon.couponFlag && 
				this.coupon.couponCondition <= this.depositPrice){
					return {
						coupon : this.coupon.couponPrice,
						price : (this.price - this.coupon.couponPrice).toFixed(2),
					}
				}
				// 减免租金
				if(this.coupon.leaseCouponFlag && 
				this.coupon.leaseCouponCondition <= this.rentPrice){
					return {
						coupon : this.coupon.leaseCouponPrice,
						price : (this.price - this.coupon.leaseCouponPrice).toFixed(2),
					}
				}
				
				return {}
			},
			// 选择优惠劵
			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() {
				this.$emit('submit', {
					addressId : this.address.id,
					couponId : this.coupon.id
				})
			},
			confCoupon(){
				this.$api('confCoupon', res => {
					if(res.code == 200){
						this.coupon = res.result
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		max-height: 80vh;
		overflow: hidden;
		overflow-y: auto;
		padding-top: 30rpx;

		.address {
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			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;
			padding: 20rpx;
			background-color: #fff;
			font-size: 28rpx;
		}

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