hotelHomestayWx/pagesHouse/Mine/ordersList/details/details.vue

<template>
	<!-- <view class="page" :style="{'min-height':h+'px'}"> -->
	<view class="page">
		<view class="" style="height: 100%; padding-bottom: 260rpx;">
			<view class="head">
				<text v-if='list.state==0' class="orange">待支付</text>
				<text v-else-if='list.state==1' class="red">已支付</text>
				<text v-else-if='list.state==-1' class="red">已取消</text>
				<text v-else-if='list.state==-2' class="green">退款中</text>
				<text v-else-if='list.state==3' class="green">已完成</text>
				<text v-else-if='list.state==-3' class="green">已退款</text>
				<text v-else-if='list.state==4' class="red">待使用</text>
				<text v-else-if='list.state==5' class="green">已预约</text>
				<text v-else :class="statusClass[list.state]">{{status[list.state]}}</text>
				<!-- <text>￥</text> -->
				<!-- <text>{{list.totalPrice}}</text> -->
			</view>

			<view class="ticketInfo">
				<view class="hander-titles">
					<view class="image">
						<image src="https://i.ringzle.com/file/20240225/0db2e93d80054b459c6e40466fa852c0.png" mode="">
						</image>
					</view>
					<view class="names">
						{{list.fishermanName}}
					</view>
					<view class="rights">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="ticketInfo-hander">
					<view class="image">
						<image :src="list.pic" mode="aspectFill"></image>
					</view>
					<view class="" style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;">
						<view class="name" style="display: flex; justify-content: space-between;">
							<view class="">
								{{list.thingName}}
							</view>
							<view class="" style="display: flex;align-items: center;;" @click="cardBtn(list)">
								<!-- <text style="color: #01B9F9; font-size: 26rpx ; font-weight: 500;">
							</text><u-icon name="arrow-right" color="#808080" size="26rpx"></u-icon> -->
								￥{{list.totalPrice}}
							</view>
						</view>
						<view class="date">
							<view class="">
								价格：<text>￥{{list.totalPrice}}/人</text>
							</view>
							<view class="">
								数量：<text>X{{list.num}}</text>
							</view>
						</view>

					</view>
				</view>

				<view class="ticketInfo-demo">

				</view>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo " style="padding-bottom: 30rpx;">
				<view class="tit">订单信息</view>

				<u-cell :border="true">
					<text slot="icon" class="txt">订单编号</text>
					>
					<text slot="title" class="val">{{list.orderCode}}</text>
					<text slot="right-icon" class="icon"
						style="border: 1rpx solid #007A69; border-radius: 50rpx; box-sizing: border-box; color: #007A69;padding: 2rpx 10rpx; font-size: 22rpx; font-weight: Regular;"
						@tap="copyOrderNo(list)">复制</text>
				</u-cell>

				<u-cell :border="true">
					<text slot="icon" class="txt">下单时间</text>
					>
					<text slot="title" class="val">{{list.orderTime}}</text>
				</u-cell>
				<u-cell :border="true">
					<text slot="icon" class="txt">联系人</text>
					>
					<text slot="title" class="val">{{list.userName}}</text>
				</u-cell>
				<u-cell :border="true">
					<text slot="icon" class="txt">联系方式</text>
					>
					<text slot="title" class="val">{{list.phone}}</text>

				</u-cell>
				<u-cell :border="true">
					<text slot="icon" class="txt">支付方式</text>
					>
					<text slot="title" class="val">微信支付</text>
				</u-cell>
			</view>
		</view>
		<view class="btns">
			<template @click="handleDetail(list)" v-if="list.state==4||list.state==5">
				<view class="detail del">
					核销订单
				</view>
			</template>
			<template @click="Detail(list)" v-else>
				<view class="detail">
					删除订单
				</view>
			</template>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				list: {},
				statusClass: [
					'',
					'green',
					'blue',
					'grey',
					'grey',
				],

			}
		},
		onLoad(option) {
			// console.log(JSON.parse(option.list));
			this.list = JSON.parse(option.list)
			console.log('-----', this.list);

		},
		methods: {
			copyOrderNo(item) {
				let that = this;
				// #ifdef H5
				this.$copyText(item.orderCode).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: item.orderCode,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},

			// 删除订单
			toStatus() {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.page {
		box-sizing: border-box;
		// height: 100%;
		background-color: #F5F8FA;
	}



	.ticketInfo-demo {
		// border-bottom: 2rpx solid #EFEFEF;
		margin-top: 40rpx;

		.demo-layout {
			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 80rpx;
		}
	}







	.orderInfo {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		width: 96%;
		margin: 0 auto 20rpx;

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #808080;
			width: 115rpx;
			font-weight: Regular;
		}

		.icon {
			font-size: 28rpx;
			color: #333;
			font-weight: Regular;
		}

		.val {
			font-size: 28rpx;
			color: #333;
			font-weight: Regular;
			margin: 0 20rpx 0 30rpx;
		}

	}

	.ticketInfo {
		box-sizing: border-box;
		width: 96%;
		margin: 0 auto 20rpx;
		padding: 40rpx 24rpx 4rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;

		.hander-titles {
			display: flex;
			height: 32rpx;
			line-height: 32rpx;
			margin: 20rpx 0 30rpx 0;

			.image {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.names {
				font-size: 32rpx;
				color: #333333;
				font-weight: Bold;
				margin: 0rpx 16rpx 0rpx 10rpx;
			}

		}

		.ticketInfo-hander {
			display: flex;

			.image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.name {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			width: 100%;
		}

		.date {
			// padding: 20rpx 0 32rpx;
			padding-top: 20rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}



		.topHead {
			width: 96%;
			margin: 0 auto;
			background-color: #F5F8FA;
			padding: 28rpx 0 28rpx 84rpx;
			border-radius: 16rpx;
			position: relative;

			text {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				border-radius: 16rpx 0 0 16rpx;
				width: 48rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #484F61;
				text-align: center;
				height: 100%;
				padding: 15rpx 10rpx 0;

			}

			.p {
				font-size: 28rpx;
				color: #333;

				&:nth-of-type(1) {
					font-weight: 600;
					margin-bottom: 16rpx;
				}
			}


		}

		.code {
			margin-top: 40rpx;
			text-align: center;
			position: relative;

			.cover,
			.sx {
				position: absolute;
				background-color: rgba(255, 255, 255, 0.5);
				width: 340rpx;
				height: 340rpx;
				top: 66rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.sx {
				width: 120rpx;
				height: 120rpx;
				top: 150rpx;
				background: transparent;
			}

			.txt {
				font-size: 28rpx;
			}

			image {
				width: 340rpx;
				height: 340rpx;
				margin: 30rpx 0;
			}
		}
	}

	.head {
		box-sizing: border-box;
		padding: 34rpx 24rpx 40rpx;
		// display: flex;
		// position: relative;
		// z-index: 2;

		text {
			color: #fff;

			&:nth-child(1),
			&:nth-child(3) {
				font-size: 44rpx;
				font-weight: Bold;
			}

			&:nth-child(2) {
				flex: 1;
				text-align: right;
				width: 100px;
				font-size: 36rpx;
			}
		}

		.red {
			color: indianred;
		}

		.green {
			color: #111111;
		}

		.blue {
			color: #1372FF;
		}

		.grey {
			color: #4C5F76;
		}

		.orange {
			color: #FF9100;
		}
	}




	.btns {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 32rpx 32rpx 50rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);


		&>view {
			// width: calc(50% - 15rpx);
			width: 100%;
			height: 80rpx;
			border-radius: 46rpx;
			// border: 1rpx solid #999999;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #FFFFFF;
			// background-color: #F6F6F6;
			background-color: #007A69;
		}
	}
</style>