1111

pages/card/card_detail.vue

@@ -1,5 +1,7 @@
 <template>
 
+	<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;">
@@ -8,7 +10,8 @@
 						<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;">
+						<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;">
@@ -16,7 +19,7 @@
 						</view>
 					</view>
 					<image src='../../static/gift2.png'
-					style="width: 40px;height: 40px;padding-right: 20px;flex-shrink: 0;">
+						style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;">
 					</image>
 				</view>
 
@@ -33,13 +36,13 @@
 						<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.list" style="display: flex;flex-direction: row;margin-top: 15px;">
+					<view v-for="(item,index) in data.goodsVos"
-					<image src="../../static/logo.png" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
+						style="display: flex;flex-direction: row;margin-top: 15px;">
-					<view style="margin-left: 10px;margin-right: 10px;">
+						<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
-						<text class="text" style="flex: 1;font-weight: 500;">background: #FFFFFF;border-radius:
+						<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
-							20rpx;padding: 15px;margin: 10px 15px;
+							<text class="text" style="font-weight: 500;">{{item.goods}}
 							</text>
-						<view style="font-size: 12px;color: #666666;">可用数量：{{item.lNum}}</view>
+							<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>
@@ -47,14 +50,17 @@
 			</view>
 
 			<view style="height: 60px;"></view>
-		<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 class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;">
+				<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: #191919;">
 					预约记录</view>
-			<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: royalblue;">预约提货</view>
+				<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;font-size: 22rpx;color: royalblue;">预约提货
 				</view>
 			</view>
+		</view>
+
+	</loading-state>
 </template>
 
 <script>
@@ -65,70 +71,34 @@
 					sid: ''
 				},
 				data: {
-					time: "2023.10.20-2025.10.20",
+					time: "",
-					name: "卡号:123456789",
+					name: "",
-					pname: "闭包名称",
+					pname: "",
-					state: "已失效",
+					state: "",
 					showBtn: false,
-					list: [{
+					showRecord: false,
-						goods: '大白菜',
+					goodsVos: []
-						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
-					}]
 				}
 			}
 		},
 		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-left: 30rpx;
-		padding-right: 25rpx;
+		padding-right: 30rpx;
 		padding-top: 10rpx;
 		padding-bottom: 10rpx;
 		border-radius: 50rpx;
-		height: 20px;
+		height: 15px;
 		margin-left: 25rpx;
 	}
 </style>