From 6264fe5c866d9c196b0490009f2ce3dd6ccea6bb Mon Sep 17 00:00:00 2001
From: wangjiahai <1556608@qq.com>
Date: Wed, 22 Nov 2023 16:55:50 +0800
Subject: [PATCH] 1111

---
 pages/card/card_detail.vue | 178 +++++++++++++++----------------------
 1 file changed, 74 insertions(+), 104 deletions(-)

diff --git a/pages/card/card_detail.vue b/pages/card/card_detail.vue
index ab270e0..62a96fe 100644
--- a/pages/card/card_detail.vue
+++ b/pages/card/card_detail.vue
@@ -1,60 +1,66 @@
 <template>
 
-	<view>
-		<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
-		<view style="display: flex;flex-direction: column;margin-top: -40vw;">
-			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
-				<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
-					<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
-						{{data.state}}
-					</view>
-					<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;">
-						{{data.name}}
-					</view>
-					<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
-						{{data.time}}
+	<loading-state ref="pageView" @request="request">
+
+		<view>
+			<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
+			<view style="display: flex;flex-direction: column;margin-top: -40vw;">
+				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
+					<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
+						<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
+							{{data.state}}
+						</view>
+						<view
+							style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;box-sizing: border-box;">
+							{{data.name}}
+						</view>
+						<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
+							{{data.time}}
+						</view>
 					</view>
+					<image src='../../static/gift2.png'
+						style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;">
+					</image>
 				</view>
-				<image src='../../static/gift2.png'
-					style="width: 40px;height: 40px;padding-right: 20px;flex-shrink: 0;">
-				</image>
-			</view>
-
-			<view
-				style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
-				<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
-				<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
-			</view>
-
-			<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;">
 
 				<view
-					style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;">
-					<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
-					<view style="margin-left: 10px;font-size: 14px;">商品明细</view>
+					style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
+					<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
+					<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
 				</view>
-				<view v-for="(item,index) in data.list" style="display: flex;flex-direction: row;margin-top: 15px;">
-					<image src="../../static/logo.png" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
-					<view style="margin-left: 10px;margin-right: 10px;">
-						<text class="text" style="flex: 1;font-weight: 500;">background: #FFFFFF;border-radius:
-							20rpx;padding: 15px;margin: 10px 15px;
-						</text>
-						<view style="font-size: 12px;color: #666666;">可用数量：{{item.lNum}}</view>
+
+				<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;">
+
+					<view
+						style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;">
+						<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
+						<view style="margin-left: 10px;font-size: 14px;">商品明细</view>
+					</view>
+					<view v-for="(item,index) in data.goodsVos"
+						style="display: flex;flex-direction: row;margin-top: 15px;">
+						<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
+						<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
+							<text class="text" style="font-weight: 500;">{{item.goods}}
+							</text>
+							<view style="font-size: 12px;color: #666666;">可用数量：{{item.lnum}}</view>
+						</view>
+						<view style="flex-shrink: 0;font-size: 12px;color: #666666;">x{{item.num}}</view>
 					</view>
-					<view style="flex-shrink: 0;font-size: 12px;color: #666666;">x{{item.num}}</view>
 				</view>
 			</view>
-		</view>
 
-		<view style="height: 60px;"></view>
-		<view
-			style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
-			<view style="flex: 1;"></view>
-			<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;">
-				预约记录</view>
-			<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: royalblue;">预约提货</view>
+			<view style="height: 60px;"></view>
+			<view v-if="data.showBtn||data.showRecord"
+				style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
+				<view style="flex: 1;"></view>
+				<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: #191919;">
+					预约记录</view>
+				<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: royalblue;">预约提货
+				</view>
+			</view>
 		</view>
-	</view>
+
+	</loading-state>
 </template>
 
 <script>
@@ -65,70 +71,34 @@
 					sid: ''
 				},
 				data: {
-					time: "2023.10.20-2025.10.20",
-					name: "卡号:123456789",
-					pname: "闭包名称",
-					state: "已失效",
+					time: "",
+					name: "",
+					pname: "",
+					state: "",
 					showBtn: false,
-					list: [{
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}, {
-						goods: '大白菜',
-						pic: '',
-						num: 10,
-						lNum: 1
-					}]
+					showRecord: false,
+					goodsVos: []
 				}
 			}
 		},
 		onLoad(options) {
 			this.page.sid = options.sid
+			this.request()
 		},
 		methods: {
-
+			request() {
+				let _this = this
+				_this.$api.cardDetail(this.page.sid).then((resp) => {
+					_this.data = resp
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(2)
+					})
+				}).catch(e => {
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(1)
+					})
+				})
+			}
 		}
 	}
 </script>
@@ -152,12 +122,12 @@
 
 	.btn {
 		border: 1px solid;
-		padding-left: 25rpx;
-		padding-right: 25rpx;
+		padding-left: 30rpx;
+		padding-right: 30rpx;
 		padding-top: 10rpx;
 		padding-bottom: 10rpx;
 		border-radius: 50rpx;
-		height: 20px;
+		height: 15px;
 		margin-left: 25rpx;
 	}
 </style>
\ No newline at end of file