book-hi/pages-mine/pages/review-image.vue

<template>
	<view class="review-detail">
		<!-- 复审列表 -->
		<view class="review-list">
			<view class="review-item" v-for="(item, index) in reviewList" :key="index">
				<!-- 标题 -->
				<view class="review-title">
					<text class="title-text">{{ item.bookName }}</text>
					<text class="title-tag" v-if="item.reviewAudit && item.reviewAuditSts==3">复审结果：{{ item.reviewAudit }}</text>
					<text class="title-tag success-tag" v-if="item.reviewAuditSts==1">复审结果：良好</text>
				</view>

				<!-- 文字说明 -->
				<view class="review-desc" v-if="item.reviewRemark">
					<text class="desc-label">文字说明：{{ item.reviewRemark }}</text>
				</view>

				<!-- 图片网格 -->
				<view class="image-grid">
					<view class="image-item" v-for="(img, imgIndex) in item.reviewImg" :key="imgIndex" @click="previewImage(item.reviewImg, imgIndex)">
						<u-image :src="img" width="100%" height="200rpx" border-radius="10rpx"
							mode="aspectFill"></u-image>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="info-block">
			<view class="info-row">
				<text class="info-label">订单编号</text>
				<view class="info-value-row">
					<text class="info-value">{{ orderInfo.orderId }}</text>
					<text class="copy-btn" @click="copyOrderNo">复制</text>
				</view>
			</view>
			<view class="info-row">
				<text class="info-label">发货人</text>
				<text class="info-value">{{ orderInfo.sendName }} {{ orderInfo.sendMobile }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">取件地址</text>
				<text class="info-value">{{ orderInfo.sendAddress }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: "",
			// 复审列表数据（假数据）
			reviewList: [
				{
					title: "科学百科",
					tag: "复审结果：笔记杂乱/习题做完",
					images: [
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
					],
					showAll: false,
				},
				{
					title: "科学百科",
					tag: "复审结果：笔记杂乱/习题做完",
					images: [
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
					],
					showAll: false,
				},
				{
					title: "科学百科",
					tag: "复审结果：笔记杂乱/习题做完",
					images: [
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
						"https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
					],
					showAll: false,
				},
			],
			// 订单信息（假数据）
			orderInfo: {
				orderId: "14847984",
				senderName: "张潇潇",
				senderPhone: "18888888888",
				address:
					"hi是u发hi跟带回家大饭店计算度假村计算度假村计算度假村计算度假村计算度假村计算度假村几集",
			},
		};
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId;
			this.getReviewDetail();
		}
	},
	methods: {
		// 预览图片
		previewImage(images, current) {
			uni.previewImage({
				urls: images,
				current: current,
			});
		},

		// 复制订单号
		copyOrderNo() {
			uni.setClipboardData({
				data: this.orderInfo.orderId.toString(),
				success: () => {
					uni.$u.toast("复制成功");
				},
				fail: () => {
					uni.$u.toast("复制失败");
				},
			});
		},

		// 获取复审详情（接口调用）
		getReviewDetail() {
			uni.$u.http
				.post("/token/order/reviewDetail?orderId=" + this.orderId)
				.then((res) => {
					if (res.code === 200) {
						// 处理返回的数据
						this.reviewList = res.data.reviewDetailList;
						this.orderInfo = res.data;
					}
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.review-detail {
	min-height: 100vh;
	background: #f8f8f8;
	padding-bottom: 30rpx;
}

.review-item {
	background: #ffffff;
	padding: 30rpx;
}

.review-title {
	// display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
	line-height: 50rpx;

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #101010;
		margin-right: 20rpx;
	}

	.title-tag {
		font-size: 24rpx;
		color: #666666;
		background-color: #f2f2f2;
		padding: 8rpx 16rpx;
		border-radius: 6rpx;
		width: fit-content;
	}

	.success-tag {
		color: #38c148;
		background-color: #e8f5e9;
	}
}

.review-desc {
	margin-bottom: 20rpx;

	.desc-label {
		font-size: 26rpx;
		color: #333333;
	}
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.image-item {
	border-radius: 10rpx;
	overflow: hidden;
}

.show-all-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;

	.show-all-text {
		font-size: 28rpx;
		color: #38c148;
		margin-right: 10rpx;
	}
}

.info-block {
	background: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
}

.info-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 24rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 140rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
		word-break: break-all;
	}

	.info-value-row {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.copy-btn {
		font-size: 28rpx;
		color: #38c148;
		margin-left: 20rpx;
		flex-shrink: 0;
	}
}
</style>