baokan_mp/pages/score/orders_detail.vue

<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>