2023-12-3

pages/card/card.vue

@@ -1,29 +1,45 @@
 <template>
 
-	<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
+	<view style="display: flex;flex-direction: column;">
-	<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'>
+
+		<view class="top">
+
+			<view class="btn" @click="bind">
+				<image src="@/static/binding.png" style="width: 20px;height: 20px;"></image>
+				<text
+					style="line-height: 35px;font-size: 18px; text-align: center;color: #FE6B00;margin-left: 10px;">绑定新卡</text>
+			</view>
 
-		<view @click="bind"
-			style="background: #f1f2f3;width: 100%;height: 35px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
-			<image src="../../static/btn_bj.png" style="width: 15px;height: 15px;"></image>
-			<text style="line-height: 35px;text-align: center;color: red;margin-left: 5px;">绑定新卡</text>
 		</view>
 
-		<view style="display: flex;flex-direction: column;padding-top: 10px;">
+		<view style="display: flex;flex-direction: column;
+				background-color: #fff;
+				height: 50vh; z-index: 100;
+				border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -20px;">
+			<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :auto='true' hight="30px"
+				:autoHeight='false'>
 
-			<view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;align-items: center;"
+
+
+				<view v-for="(item,index) in data" :key="index"
+					style="display: flex;flex-direction: column;align-items: center;margin-top: 10px; "
 					:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
-				<view
+
+
+					<!-- 	<view
 						style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">
 
 						<view class="use">
 							<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;"
 								src="../../static/card_line.png"></image>
-						<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;"></image>
+							<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;">
+							</image>
 							<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;">
-							<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">{{item.name}}
+								<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">
+									{{item.name}}
+								</view>
+								<view style="font-size: 12px;padding-left: 5px;padding-bottom: 6px;">{{item.time}}
 								</view>
-							<view style="font-size: 12px;padding-left: 5px;padding-bottom: 6px;">{{item.time}}</view>
 							</view>
 
 							<view v-if="item.showBtn" @click.stop="booking(item.sid)"
@@ -38,16 +54,46 @@
 								{{item.state}}
 							</view>
 						</view>
+					</view> -->
+
+
+					<view class="item" :class="{ item2: !item.showBtn }"
+						style="display: flex;flex-direction: row;width: 85%; margin-left: 10px; margin-right: 10px;  padding: 16px; ">
+
+						<view style="display: flex;flex-direction: row; align-items: center; flex: 1;">
+
+							<image src="@/static/pack.png" mode="aspectFill" v-show="item.showBtn"
+								style="width: 50px;height: 50px;margin-right: 10px;" />
+								
+								<image src="@/static/pack2.png" mode="aspectFill"  v-show="!item.showBtn"
+									style="width: 50px;height: 50px;margin-right: 10px;" />
+
+							<view style="display: flex;flex-direction: column;margin-right: 10px; ">
+
+								<text style="font-size: 12px;color: #333;"> {{item.name}}</text>
+								<text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text>
+
+								<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
+									<text style="font-size: 12px;color: #FF7100;"> {{item.pname}}</text>
+									<text
+										style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding:  3px 10px; font-size: 13px; color: #FF6000;">
+										{{item.state}}</text>
+
 								</view>
 							</view>
 
-			<uni-popup ref="inputDialog" type="dialog">
+						</view>
-				<uni-popup-dialog ref="inputClose" mode="input" title="绑定新卡" :value="page.remarks" placeholder="请输入卡号"
+						<view style="font-size: 12px;color:#fff;
-					@confirm="dialogInputConfirm"></uni-popup-dialog>
+							border-radius: 15px; height: 18px;padding: 3px 8px;
-			</uni-popup>
+						 background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
+					</view>
+
+
 				</view>
 
 			</z-paging>
+		</view>
+	</view>
 
 </template>
 
@@ -58,7 +104,7 @@
 				page: {
 					remarks: ''
 				},
-				data: []
+				data: [],
 			}
 		},
 		onLoad() {
@@ -66,6 +112,7 @@
 				// 相当与下拉刷新
 				this.$refs.paging.reload(true);
 			})
+
 		},
 		onUnload() {
 			uni.$off('order');
@@ -121,6 +168,43 @@
 </script>
 
 <style>
+	.top {
+		width: 100%;
+		height: 60vh;
+		/* 加载背景图 */
+		background-image: url(../../static/OIP-C.jpg);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+
+	.btn {
+		margin-top: 45vh;
+		width: 83%;
+		margin-left: 30px;
+		margin-right: 30px;
+		background-color: #FFF;
+		border-radius: 20px;
+		display: flex;
+		height: 40px;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.item {
+		/* 加载背景图 */
+		background-image: url(../../static/card_item.png);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+	
+	.item2 {
+		/* 加载背景图 */
+		background-image: url(../../static/card_item2.png);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+
 	.use {
 		display: flex;
 		flex-direction: row;