hotel-tablecloth-uniapp-24-08-29/pages_order/order/createWash.vue

<template>
	<view class="page">
		<navbar title="我要水洗" leftClick @leftClick="$utils.navigateBack" />
		
		
		<!-- <view class="tabs">
			<uv-tabs :list="tabs" 
			:activeStyle="{color : '#FD5100', fontWeight : 600}" 
			lineColor="#FD5100" lineHeight="8rpx"
			lineWidth="50rpx" 
			:current="current"
			:scrollable="false" 
			@click="clickTabs"></uv-tabs>
		</view> -->

		<!-- 选择租赁物品 -->
		<view class="box d">
			
			<!-- <uv-radio-group shape="circle" v-model="radiovalue"> -->
			
			<uv-checkbox-group shape="circle" v-model="checkboxValue"
			>
				<view 
				v-for="(item, index) in list" 
				:key="index" 
				@click="selectItem(item)"
				class="item">
					<view class="checkbox">
						<uv-checkbox
						:name="item.id" 
						:disabled="!!item.statusInfo" 
						activeColor="#FA5A0A" 
						size="40rpx" 
						@click.stop
						icon-size="35rpx"></uv-checkbox>
					</view>

					<image class="image" :src="item.goodsPic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
						mode=""></image>

					<view class="info">
						<view class="title">
							<view class="text-ellipsis">{{ item.goodsName }}</view>
							<view style="flex-shrink: 0;"
							v-if="item.leaseFlag == 1">
								数量：{{ item.num }}
							</view>
						</view>
						<view class="unit">
							规格：{{ item.sku }}
						</view>
						
						<view class="wan" v-if="item.statusInfo">
							{{ item.statusInfo }}
						</view>
						<view class="price" v-else>
							<view class="" v-if="item.zujin">
								租金￥
								<text>{{ item.zujin }}</text>
								元
							</view>
							<view class="" v-if="item.washPrice">
								水洗费￥
								<text>
								{{ 
									((item.washUnitPrice || 0) * item.selectNum)
									.toFixed(2)
								}}
								</text>
								元
							</view>
						</view>
						<view class="unit">
							<uv-number-box 
							v-model="item.selectNum"
							v-if="item.leaseFlag == 1"
							:max="item.num"
							></uv-number-box>
							
							
							<uv-number-box 
							v-model="item.selectNum"
							@change="e => valChange(item, e)"
							v-else
							></uv-number-box>
						</view>
					</view>
				</view>
			</uv-checkbox-group>
			<!-- </uv-radio-group> -->
		</view>

		<!-- <view class="btn" @click="submit">
			<button class="a">水洗下单<text v-if="price">（{{price}}￥）</text></button>
		</view> -->
		
		<view class="action">
			<view class="icon">
				<image src="/static/image/cart/2.png" mode=""></image>
				<view class="num">{{ checkboxValue.length }}</view>
			</view>
			<view class="price">
				<view class="count">
					合计
					<view>
						￥
						<text>{{ price }}</text>
					</view>
				</view>
				<view class="text">
					<!-- 共{{ checkboxValue.length }}件，已享受更低优惠 -->
					含租金{{ rentPrice && rentPrice.toFixed(2) }}￥，
					水洗费{{ washPrice && washPrice.toFixed(2) }}￥
				</view>
			</view>
			<view class="btn2" @click="goCleaning">结算</view>
		</view>
		
		<cartSubmitSelect
		@submit="ordersPay"
		:price="price"
		:washPrice="washPrice"
		:rentPrice="rentPrice"
		:washPriceList="washPriceList"
		submiitTitle="立即水洗"
		ref="cartSubmitSelect"/>
		
		<view 
		@click="$refs.addLease.open()"
		class="plus-create">
			<uv-icon
			name="plus"
			color="#fff"
			size="40rpx"
			></uv-icon>
		</view>
		
		<addLease ref="addLease" @submit="getData"/>
	</view>
</template>

<script>
	import cartSubmitSelect from '@/components/user/cartSubmitSelect.vue'
	import mixinsList from '@/mixins/list.js'
	import mixinLease from '@/mixins/lease.js'
	import addLease from '../components/product/addLease.vue'
	export default {
		mixins : [mixinsList, mixinLease],
		components: {
			cartSubmitSelect,
			addLease,
		},
		data() {
			return {
				checkboxValue : [],
				radiovalue : 0,
				// statusText : ['正常', '换货中', '退货中'],
				tabs: [{
						name: '选择租赁物品'
					},
					{
						name: '选择我的物品'
					},
				],
				current : 0,//当前选中的标签页
				mixinsListApi : 'getLeasePage',
				rentPrice : 0,//需要支付的租金
			}
		},
		computed : {
			price(){
				let price = parseFloat(this.washPrice) + parseFloat(this.rentPrice)
				if(price){
					return (this.washPrice + this.rentPrice).toFixed(2)
				}
				return 0
			},
			washPrice(){//计算总水洗费
				if(this.checkboxValue.length == 0){
					return 0
				}
				
				let price = 0
				
				this.list.forEach(n => {
					if(this.checkboxValue.includes(n.id)){
						price += (n.washUnitPrice || 0) * n.selectNum
					}
					// if(this.radiovalue == n.id){
					// 	price += (n.washUnitPrice || 0) * n.selectNum
					// }
				})
				return price
			},
			washPriceList(){
				let checkboxValue = this.checkboxValue
				if (!checkboxValue.length) {
					return []
				}
				
				let list = []
				
				this.list.forEach(n => {
					if (checkboxValue.includes(n.id)) {
						
						let len = list.length
						
						for(let i = 0;i < len;i++){
							let item = list[i]
							if(item.price == n.washUnitPrice){
								item.num += n.selectNum
								return
							}
						}
						
						list.push({
							price : n.washUnitPrice,
							num : n.selectNum,
						})
					}
				})
				
				return list
			},
			zujin(){//计算总租金【弃用】
				// if(this.checkboxValue.length == 0){
				// 	return 0
				// }
				if(this.list.length == 0){
					return 0
				}
				
				let price = 0
				
				this.list.forEach(n => {
					// if(this.checkboxValue.includes(n.id)){
						price += n.zujin || 0
					// }
				})
				return price
			},
		},
		onLoad(args) {
			if(args.id){
				// this.checkboxValue = [args.id]
				this.current = 1
			}
		},
		onShow() {
			this.getData()
			this.getRentPrice()
		},
		methods: {
			valChange(item, e) {
				if(item.leaseFlag != 0){
					return
				}
				this.$api('editLeaseNum', {
					id: item.id,
					num: e.value,
				})
			},
			// 选择物品
			selectItem(item){
				if(this.radiovalue == item.id){
					this.radiovalue = 0
					return
				}
				this.radiovalue = item.id
			},
			//点击tab栏
			clickTabs({
				index,
				name
			}) {
				this.current = index
				this.queryParams.pageSize = 10
				this.checkboxValue = []
				// this.mixinsListApi = ['orderPage', 'orderPage'][index]
				this.getData()
			},
			// 发请求之前处理参数
			beforeGetData(){
				let data = {}
				
				// data.leaseFlag = this.current ? 0 : 1;
				
				return data
			},
			getDataThen(list){
				// list[0] && list[0].d = true
				list.forEach(n => {
					n.statusInfo = this.isLeaseStatus(n)
					n.selectNum = n.num
				})
			},

			// 去结算按钮
			goCleaning() {
				if (this.checkboxValue.length < 1) {
					uni.showToast({
						title: "请勾选商品",
						icon: 'none'
					})
					return
				}
				
				// if (this.radiovalue == 0) {
				// 	uni.showToast({
				// 		title: "请勾选商品",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				this.$refs.cartSubmitSelect.open('bottom')
			},
			//商品下单
			ordersPay({ addressId, couponId }) {
				var self = this
				// var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id
			
				let data = []
				let records = this.list
				for (var i = 0; i < records.length; i++) {
					if (this.checkboxValue.includes(records[i].id)) {
						data.push({
							leaseId: records[i].id, //租赁id
							addressId, //地址id
							type : 1,
							num : records[i].selectNum
						})
					}
					
					// if (this.radiovalue == records[i].id) {
					// 	data.push({
					// 		leaseId: records[i].id, //租赁id
					// 		addressId, //地址id
					// 		type : 1,
					// 		num : records[i].selectNum
					// 	})
					// }
				}
			
				this.$api('orderCreate', {
					req: JSON.stringify(data)
				}, res => {
					if (res.code == 200) {
						let form = {
							id: res.result.id
						}
						
						if(couponId){
							form.couponId = couponId
						}
						
						
						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);
										// self.$refs.confirmationPopup.close()
										uni.redirectTo({
											url: '/pages/index/order'
										})
										uni.showToast({
											icon: 'none',
											title: "支付失败"
										})
									}
								});
							}
						})
					}
				})
			},
			// 获取需要支付的租金
			getRentPrice(){
				this.$api('getRentPrice', res => {
					if(res.code == 200){
						this.rentPrice = res.result || 0
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 200rpx;
		.tabs{
			position: sticky;
			top: calc(var(--status-bar-height) + 120rpx);
			background-color: #fff;
			// padding-top: 20rpx;
		}
		.btn {
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 20rpx;
			width: 100%;

			.a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70%;
				height: 100rpx;
				color: #FFF;
				background-color: $uni-color;
				border: 1px solid red;
				border-radius: 100rpx;
				font-size: 30rpx;
			}
		}
		
		.d{
			.item {
				background-color: #fff;
				display: flex;
				padding: 30rpx;
				width: 690rpx;
			
				.checkbox {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
				}
			
				.image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			
				.info {
					flex: 1;
			
					.title {
						display: flex;
						padding: 6rpx 20rpx;
						justify-content: space-between;
						.text-ellipsis{
							width: 280rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}
					}
			
					.unit {
						font-size: 24rpx;
						padding: 6rpx 20rpx;
						color: #717171;
					}
			
			
					.price {
						color: $uni-color;
						font-size: 24rpx;
						padding: 6rpx 20rpx;
						display: flex;
						justify-content: space-between;
			
						text {
							font-weight: 900;
						}
					}
					.wan{
						color: $uni-color;
						font-size: 26rpx;
						padding: 10rpx 20rpx;
					}
				}
			}
		}
		.action {
			width: 700rpx;
			position: fixed;
			bottom: 20rpx;
			left: 25rpx;
			background-color: #fff;
			height: 130rpx;
			border-radius: 65rpx;
			box-shadow: 0 0 6rpx 6rpx #00000010;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		
			.icon {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				margin: 0 20rpx;
		
				image {
					width: 80rpx;
					height: 80rpx;
				}
		
				.num {
					position: absolute;
					right: 10rpx;
					top: 0rpx;
					background-color: $uni-color;
					color: #fff;
					font-size: 18rpx;
					border-radius: 50%;
					height: 30rpx;
					width: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		
			.price {
				.count {
					display: flex;
					font-size: 26rpx;
					align-items: center;
		
					view {
						color: $uni-color;
						margin-left: 10rpx;
		
						text {
							font-size: 32rpx;
							font-weight: 900;
						}
					}
				}
		
				.text {
					font-size: 22rpx;
					color: #717171;
				}
			}
		
			.btn2 {
				margin-left: auto;
				background-color: $uni-color;
				height: 100%;
				padding: 0 50rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.plus-create{
			position: fixed;
			right: 50rpx;
			bottom: 30vh;
			background-color: $uni-color;
			color: #FFF;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
		}
	}
</style>