【Add】增加积分订单详情

pages.json

@@ -113,6 +113,12 @@
       "style": {
         "navigationBarTitleText": "兑换记录"
       }
+    },
+    {
+      "path": "pages/score/orders_detail",
+      "style": {
+        "navigationBarTitleText": "兑换详情"
+      }
     },
 	{
 	  "path": "pages/score/completion",

pages/score/orders.vue

@@ -8,24 +8,26 @@
 		<view class="to_bottom" v-if="!orderList.length"> -----还没有记录啦-----</view>
 		<view class="order_list">
 			<view class="order_item" v-for="(item,index) in orderList" :key="index">
-				<view class="box_left">
-					<image class="product_image" :src="item.product_thumb" mode=""></image>
-				</view>
-				<view class="box_right">
-					<view class="product_title">
-						<view class="product_name">{{item.product_name}}</view>
-						<view class="order_status">
-							{{item.state}}
-						</view>
+				<view @click.stop="goDetail(item.id)">
+					<view class="box_left">
+						<image class="product_image" :src="item.product_thumb" mode=""></image>
 					</view>
-					<view class="spec_number">
-						<view class="product_spec">{{item.product_spec}}</view>
-						<view class="buy_num">共{{item.buy_num}}件</view>
-					</view>
-					<view class="pay_info">
-						<!-- 赠品信息 -->
-						<view class="coupon_info" v-if="item.is_rebate">赠品</view>
-  						<view class="pay_total">{{item.score_total}} 积分</view>
+					<view class="box_right">
+						<view class="product_title">
+							<view class="product_name">{{item.product_name}}</view>
+							<view class="order_status">
+								{{item.state}}
+							</view>
+						</view>
+						<view class="spec_number">
+							<view class="product_spec">{{item.product_spec}}</view>
+							<view class="buy_num">共{{item.buy_num}}件</view>
+						</view>
+						<view class="pay_info">
+							<!-- 赠品信息 -->
+							<view class="coupon_info" v-if="item.is_rebate">赠品</view>
+							<view class="pay_total">{{item.score_total}} 积分</view>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -161,7 +163,12 @@
 						this.orderList = re.data.data;
 					}
 				});
-			}
+			},
+			goDetail(id) {
+			  uni.navigateTo({
+			    url: "/pages/score/orders_detail?order_id=" + id,
+			  });
+			},
 		}
 	}
 </script>

pages/score/orders_detail.vue

@@ -0,0 +1,307 @@
+<template>
+	<view>
+		<view class="addr_item">
+			<view class="contact_user" style="display: flex; justify-content: space-between; width: 100%">
+				<view style="display: flex">
+					<text class="contact_name">{{ order_datail.order_addr?.contact_name }}</text>
+					<text class="contact_phone">{{ order_datail.order_addr?.contact_phone }}</text>
+				</view>
+				<view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+					<text v-if="order_datail.order_addr?.shop_type">({{ $CONSTANTS.SHOP_TYPES[order_datail.order_addr?.shop_type] }})&nbsp;</text>
+					{{ order_datail.order_addr?.contact_shop }}
+				</view>
+			</view>
+			<view class="contact_addr">{{ order_datail.order_addr?.contact_province }} {{ order_datail.order_addr?.contact_city }} {{ order_datail.order_addr?.contact_area }} {{ order_datail.order_addr?.contact_addr }}</view>
+		</view>
+		<view class="car_list">
+			<view class="business_name"> {{ order_datail?.business_name }}</view>
+			<view class="car_item" @click="_navToProduct(order_datail?.product_id)">
+				<view class="box_left">
+					<image class="car_image" :src="order_datail?.product_thumb" mode=""></image>
+				</view>
+				<view class="box_center">
+					<view class="car_name">{{ order_datail?.product_name }}</view>
+					<view class="car_spec">{{ order_datail?.product_spec }}</view>
+					<view class="car_price">
+						<text class="price">{{ order_datail?.score_total }} 积分</text>
+					</view>
+				</view>
+				<view class="box_right">
+					<view class="buy_num_box">
+						<view class="buy_num">共{{ order_datail?.buy_num }}件</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="price_content">
+			<view class="price_content_item">
+				<view>订单编号</view>
+				<view style="display: flex; align-items: center">
+					<view>{{ order_datail?.order_code }}&nbsp;</view>
+					<view v-if="order_datail?.order_code" class="copy_btn"
+						@click="_copyorderCode(order_datail?.order_code)">&nbsp;复制</view>
+				</view>
+			</view>
+			<view class="price_content_item">
+				<view>下单时间&nbsp;</view>
+				<view>{{ order_datail?.insert_time }}</view>
+			</view>
+			<view class="price_content_item" v-if="order_datail?.track_number">
+				<view>物流编号&nbsp;</view>
+				<view style="display: flex; align-items: center">
+					<view>{{order_datail?.track_number}}</view>
+					<view class="copy_btn" @click="_copyorderCode(order_datail?.track_number)">&nbsp;复制</view>
+				</view>
+			</view>
+			<view class="price_content_item">
+				<view>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;</view>
+				<view style="text-align: right;">{{ order_datail?.remark }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				order_datail: {},
+			};
+		},
+		onLoad(param) {
+			this._getOrderDetail(param.order_id); // 获取并打印订单详情
+		},
+		methods: {
+			_getOrderDetail(orderId) {
+				this.$http
+					.request("api/score_orders/get_detail", {
+						id: orderId
+					})
+					.then((response) => {
+						if (response.code == "success") {
+							this.order_datail = response.data; // 打印订单详情
+						}
+					})
+					.catch((error) => {
+						uni.showToast({
+							title: "获取订单详情失败",
+							icon: "error",
+							duration: 2000,
+						});
+					});
+			},
+			_navToProduct(id) {
+				if (id) {
+					uni.navigateTo({
+						url: "/pages/score/product?id=" + id,
+					});
+				}
+			},
+			_copyorderCode(info) {
+				//uni.setClipboardData方法就是讲内容复制到粘贴板
+				console.log("info", info);
+				uni.setClipboardData({
+					data: info?.toString(), //要被复制的内容
+					success: () => {
+						//复制成功的回调函数
+						uni.showToast({
+							//提示
+							title: "复制成功",
+						});
+					},
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="less" scoped>
+	.addr_item {
+		font-size: 24rpx;
+		overflow: hidden;
+		line-height: 40rpx;
+		padding: 20rpx 35rpx;
+		border-radius: 15rpx;
+		padding-bottom: 0rpx;
+		margin-bottom: 10rpx;
+		background-color: #ffffff;
+
+		.contact_user {
+			font-size: 24rpx;
+			line-height: 50rpx;
+
+			.contact_name {
+				font-size: 26rpx;
+				font-weight: bold;
+				margin-right: 16rpx;
+			}
+
+			.contact_shop {
+				float: right;
+			}
+		}
+
+		.contact_addr {
+			font-size: 24rpx;
+			line-height: 30rpx;
+			padding: 10rpx 5rpx;
+		}
+	}
+
+	.car_list {
+		display: block;
+		overflow: hidden;
+		margin: 0rpx auto;
+		margin-top: 20rpx;
+		background: #ffffff;
+		margin-bottom: 20rpx;
+
+		.business_name {
+			padding: 8rpx 35rpx;
+			border-bottom: 1px solid #f3f3f3;
+			font-size: 32rpx;
+			z-index: 1;
+			display: flex;
+			align-items: center;
+
+			.business_icon {
+				width: 48rpx;
+				height: 48rpx;
+				margin-right: 10rpx;
+			}
+		}
+
+		.car_item {
+			height: 170rpx;
+			display: block;
+			overflow: hidden;
+			margin: 0rpx auto;
+			padding: 20rpx 35rpx;
+			border-bottom: 2rpx solid #dddddd;
+
+			.box_left {
+				float: left;
+				width: 140rpx;
+				height: 190rpx;
+				margin-top: 10rpx;
+
+				.car_image {
+					width: 140rpx;
+					height: 140rpx;
+					border-radius: 5rpx;
+				}
+			}
+
+			.box_center {
+				float: left;
+				width: 300rpx;
+				margin-left: 25rpx;
+
+				.car_name {
+					max-height: 70rpx;
+					font-size: 30rpx;
+					line-height: 40rpx;
+					overflow: hidden;
+					white-space: nowrap;
+					/* 不换行 */
+					overflow: hidden;
+					/* 隐藏超出的内容 */
+					text-overflow: ellipsis;
+					/* 用省略号表示被隐藏的部分 */
+				}
+
+				.car_spec {
+					color: #999999;
+					font-size: 24rpx;
+					line-height: 60rpx;
+					max-height: 60rpx;
+					overflow: hidden;
+				}
+
+				.promo_title {
+					max-height: 80rpx;
+					font-size: 20rpx;
+					line-height: 40rpx;
+					overflow: hidden;
+					padding: 0rpx 0rpx;
+					color: #dd524d;
+				}
+
+				.car_price {
+					font-size: 30rpx;
+					line-height: 60rpx;
+
+					.price {
+						color: red;
+					}
+				}
+			}
+
+			.box_right {
+				float: right;
+				width: 185rpx;
+
+				.buy_num_box {
+					float: right;
+					color: #333333;
+					overflow: hidden;
+					font-size: 24rpx;
+					margin-top: 130rpx;
+					text-align: center;
+
+					.buy_num {
+						float: left;
+						width: 100rpx;
+						height: 30rpx;
+						font-size: 24rpx;
+						line-height: 30rpx;
+						padding: 0rpx 0rpx;
+						border-radius: 8rpx;
+					}
+				}
+			}
+		}
+
+		.car_item:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.price_content {
+		background-color: #fff;
+		bottom: var(--window-bottom);
+		padding: 40rpx 35rpx 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+
+		.price_content_title {
+			margin-bottom: 20rpx;
+			border-bottom: 1px dashed #f3f3f3;
+		}
+
+		.price_content_item {
+			margin-bottom: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 24rpx;
+			color: #00000073;
+
+			.price {
+				color: red;
+			}
+		}
+
+		.copy_btn {
+			border-radius: 20rpx;
+			background-color: #f3f3f3;
+			font-size: 24rpx;
+			width: 100rpx;
+			height: 45rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+</style>