111

pages/card/card.vue

@@ -1,30 +1,38 @@
 <template>
-	<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;">
+	<z-paging ref="paging" v-model="data" @query="queryList" bgColor="#F8f8f8" :refresher-enabled='false' :auto='true'>
-			<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;">
 
-				<view class="use" :style="{'background':item.showBtn?'#ce644e':'#999999'}" style="">
-					<view style="flex: 1;display: flex;flex-direction: column;">
-						<view style="font-size: 15px;padding: 2px;padding-left: 5px;">{{item.name}}</view>
-						<view style="font-size: 13px;padding-left: 5px;padding-bottom: 2px;">{{item.time}}</view>
-					</view>
-
-					<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>
-		</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;">
+			style="background: #f1f2f3;width: 100%;height: 35px;line-height: 35px;text-align: center;color: red;">
 			绑定新卡</view>
 
-		<uni-popup ref="inputDialog" type="dialog">
+		<view style="display: flex;flex-direction: column;height: 100%;padding-top: 10px;">
-			<uni-popup-dialog ref="inputClose" mode="input" title="绑定新卡" :value="page.remarks" placeholder="请输入卡号"
+
-				@confirm="dialogInputConfirm"></uni-popup-dialog>
+			<view style="display: flex;flex-direction: column;align-items: center; ">
-		</uni-popup>
+				<view v-for="(item,index) in data"
-	</view>
+					style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">
+
+					<view class="use" :style="{'background':item.showBtn?'#ce644e':'#999999'}" style="">
+						<view style="flex: 1;display: flex;flex-direction: column;">
+							<view style="font-size: 15px;padding: 2px;padding-left: 5px;">{{item.name}}</view>
+							<view style="font-size: 13px;padding-left: 5px;padding-bottom: 2px;">{{item.time}}</view>
+						</view>
+
+						<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>
+			</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,46 +42,66 @@
 				page: {
 					remarks: ''
 				},
-				data: [{
+				data: []
-					showBtn: true,
-					time: "2023.10.20-2025.10.20",
-					name: "卡号:123456789",
-					state: "已失效",
-					sid: ""
-				}, {
-					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"
-				}, {
-					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"
-				}]
 			}
 		},
 		methods: {
+			queryList(pageNo, pageSize) {
+				setTimeout(() => {
+					this.$refs.paging.complete([{
+						showBtn: true,
+						time: "2023.10.20-2025.10.20",
+						name: "卡号:123456789",
+						state: "已失效",
+						sid: ""
+					}, {
+						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"
+					}, {
+						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"
+					}, {
+						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)
+			},
 			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>