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" :scrollable="false" @click="clickTabs"></uv-tabs>
		</view>

		<!-- 选择租赁物品 -->
		<view class="box d">
			<uv-checkbox-group shape="circle" v-model="checkboxValue"
			>
				<view v-for="(item, index) in list" :key="index"  class="item">
					<view class="checkbox">
						<!-- <uv-checkbox 
						:name="item.id" 
						:disabled="item.status != 0 
						|| !item.startTime && item.leaseFlag
						|| item.isWash" 
						activeColor="#FA5A0A" 
						size="40rpx" 
						icon-size="35rpx"></uv-checkbox> -->
						<uv-checkbox
						:name="item.id" 
						:disabled="!!item.statusInfo" 
						activeColor="#FA5A0A" 
						size="40rpx" 
						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>{{ item.goodsName }}</view>
							<view>
								<!-- <uv-number-box v-model="item.num" @change="e => valChange(item, e)"></uv-number-box> -->
								数量：{{ item.num }}
							</view>
						</view>
						<view class="unit">
							规格：{{ item.sku }}
							<!-- <uv-icon name="arrow-down"></uv-icon> -->
						</view>
						<!-- <view class="wan" 
						v-if="!item.startTime 
						&& item.leaseFlag 
						&& item.status == 0">
							确认收货后，方可水洗
						</view>
						<view class="wan" v-else-if="item.status != 0">
							{{ statusText[item.status] }}
						</view>
						<view class="wan" v-else-if="item.isWash">
							水洗中
						</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.washPrice }}</text>
								元
							</view>
						</view>
					</view>
				</view>
			</uv-checkbox-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/1.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 }}件，已享受更低优惠 -->
					含租金{{zujin}}￥，水洗费{{washPrice}}￥
				</view>
			</view>
			<view class="btn2" @click="goCleaning">结算</view>
		</view>
		
		<cartSubmitSelect
		@submit="ordersPay"
		:price="price"
		:washPrice="washPrice"
		:rentPrice="zujin"
		submiitTitle="立即水洗"
		ref="cartSubmitSelect"/>
		
	</view>
</template>

<script>
	import cartSubmitSelect from '@/components/user/cartSubmitSelect.vue'
	import mixinsList from '@/mixins/list.js'
	import mixinLease from '@/mixins/lease.js'
	export default {
		mixins : [mixinsList, mixinLease],
		components: {
			cartSubmitSelect,
		},
		data() {
			return {
				checkboxValue : [],
				statusText : ['正常', '换货中', '退货中'],
				tabs: [{
						name: '选择租赁物品'
					},
					{
						name: '选择我的物品'
					},
				],
				type: 1,
				mixinsListApi : 'getLeasePage',
			}
		},
		computed : {
			price(){
				return this.washPrice + this.zujin
			},
			washPrice(){
				if(this.checkboxValue.length == 0){
					return 0
				}
				
				let price = 0
				
				this.list.forEach(n => {
					if(this.checkboxValue.includes(n.id)){
						price += n.washPrice || 0
					}
				})
				return price
			},
			zujin(){
				if(this.checkboxValue.length == 0){
					return 0
				}
				
				let price = 0
				
				this.list.forEach(n => {
					if(this.checkboxValue.includes(n.id)){
						price += n.zujin || 0
					}
				})
				return price
			},
		},
		onShow() {
			this.getData()
		},
		methods: {
			//点击tab栏
			clickTabs({
				index,
				name
			}) {
				this.type = index ? 0 : 1;
				this.queryParams.pageSize = 10
				this.checkboxValue = []
				// this.mixinsListApi = ['orderPage', 'orderPage'][index]
				this.getData()
			},
			// 发请求之前处理参数
			beforeGetData(){
				let data = {}
				
				data.leaseFlag = this.type
				
				return data
			},
			getDataThen(list){
				// list[0] && list[0].d = true
				list.forEach(n => {
					n.statusInfo = this.isLeaseStatus(n)
				})
			},

			// 去结算按钮
			goCleaning() {
				if (this.checkboxValue.length < 1) {
					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,
						})
					}
				}
			
				this.$api('orderCreate', {
					req: JSON.stringify(data)
				}, res => {
					if (res.code == 200) {
						let form = {
							id: res.result.id
						}
						
						if(couponId){
							form.couponId = couponId
						}
						
						// 不管有没有支付，都要清除购物车数据
						// self.$api('cartDel', {
						// 	id: deleteCartIds
						// }, res => {
						// 	if (res.code == 200) {
						// 		self.getData()
						// 	}
						// })
						
						
						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: "支付失败"
										})
									}
								});
							}
						})
					}
				})
			},
		}
	}
</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;
				}
			
				.image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			
				.info {
					flex: 1;
			
					.title {
						display: flex;
						padding: 10rpx 20rpx;
						justify-content: space-between;
			
					}
			
					.unit {
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						color: #717171;
						display: flex;
						align-items: center;
					}
			
			
					.price {
						color: $uni-color;
						font-size: 24rpx;
						padding: 10rpx 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;
			}
		}
	}
</style>