111

pages/card/card.vue

@@ -1,7 +1,14 @@
 <template>
+
+	<z-paging ref="paging" v-model="data" @query="queryList" bgColor="#F8f8f8" :refresher-enabled='false' :auto='true'>
+
+		<view @click="bind"
+			style="background: #f1f2f3;width: 100%;height: 35px;line-height: 35px;text-align: center;color: red;">
+			绑定新卡</view>
+
 		<view style="display: flex;flex-direction: column;height: 100%;padding-top: 10px;">
 
-		<view style="display: flex;flex-direction: column;align-items: center; padding-bottom: 50px;">
+			<view style="display: flex;flex-direction: column;align-items: center; ">
 				<view v-for="(item,index) in data"
 					style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">
 
@@ -13,18 +20,19 @@
 
 						<view v-if="item.showBtn" style="flex-shrink: 0;padding: 5px;font-size: 14px;">预约提货</view>
 					</view>
-				<view style="width: 100%;text-align: center;margin-top: 10px;margin-bottom: 10px;">{{item.state}}</view>
+					<view style="width: 100%;text-align: center;margin-top: 10px;margin-bottom: 10px;">{{item.state}}
+					</view>
 				</view>
 			</view>
-		<view @click="bind"
-			style="bottom: var(--window-bottom);z-index: 1;position: fixed;background: #f1f2f3;width: 100%;height: 35px;line-height: 35px;text-align: center;color: red;">
-			绑定新卡</view>
 
 			<uni-popup ref="inputDialog" type="dialog">
 				<uni-popup-dialog ref="inputClose" mode="input" title="绑定新卡" :value="page.remarks" placeholder="请输入卡号"
 					@confirm="dialogInputConfirm"></uni-popup-dialog>
 			</uni-popup>
 		</view>
+
+	</z-paging>
+
 </template>
 
 <script>
@@ -34,7 +42,13 @@
 				page: {
 					remarks: ''
 				},
-				data: [{
+				data: []
+			}
+		},
+		methods: {
+			queryList(pageNo, pageSize) {
+				setTimeout(() => {
+					this.$refs.paging.complete([{
 						showBtn: true,
 						time: "2023.10.20-2025.10.20",
 						name: "卡号:123456789",
@@ -70,10 +84,24 @@
 						time: "2023.10.20-2025.10.30",
 						name: "卡号:1234567809",
 						state: "已失效1"
-				}]
+					}, {
-			}
+						showBtn: false,
+						time: "2023.10.20-2025.10.30",
+						name: "卡号:1234567809",
+						state: "已失效1"
+					}, {
+						showBtn: false,
+						time: "2023.10.20-2025.10.30",
+						name: "卡号:1234567809",
+						state: "已失效1"
+					}, {
+						showBtn: false,
+						time: "2023.10.20-2025.10.30",
+						name: "卡号:1234567809",
+						state: "已失效1"
+					}]);
+				}, 2000)
 			},
-		methods: {
 			dialogInputConfirm(val) {
 				// 网络请求 绑定
 			},
@@ -94,10 +122,10 @@
 		align-items: center;
 	}
 
-	uni-page-body,
+	/* uni-page-body,
 	page {
 		width: 100%;
 		height: 100%;
 		height: calc(100% + var(--window-bottom); )
-	}
+	} */
 </style>