修改

pagesHome/notarization/index.vue

@@ -1,7 +1,28 @@
 <template>
 	<view class="content">
-		<view class="one">
-			赋强公证
+		<view class="top">
+			<u-search shape="square" :show-action="false" placeholder="搜索公证名称" @focus="toChange"></u-search>
+		</view>
+		<view class="bottom">
+			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+				<view class="list-scroll-view">
+					<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
+						<view class="left">
+							{{item.name||'暂无'}}
+						</view>
+						<view class="right">
+							<view class="name textOver">{{item.name||'暂无'}}</view>
+							<view class="money">
+								<text>收费标准</text>
+								<text>￥{{item.money||'0'}}</text>
+							</view>
+						</view>
+					</view>
+					<view class="is_bottom" v-if="is_bottom">
+						<text>{{config.bottom_title||'没有更多了！'}}</text>
+					</view>
+				</view>
+			</scroll-view>
 		</view>
 	</view>
 </template>
@@ -14,46 +35,167 @@
 	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
 	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
 	// 基本信息
-	const config = ref({ logo: [], file: [] });
+	const config = ref({ logoUrl: [] });
+	// 列表
 	const list = ref([]);
 	const total = ref(0);
-	const menuList = ref([]);
+	const skip = ref(0);
+	const limit = ref(6);
+	const page = ref(0);
+	// 数据是否触底
+	const is_bottom = ref(false);
+	const scrollTop = ref(0);
 	onShow(async () => {
 		await searchConfig();
-		await searchOther();
+		await clearPage();
+		await search();
+	})
+	onPullDownRefresh(async () => {
+		await clearPage();
 		await search();
+		uni.stopPullDownRefresh();
 	})
 	// config信息
 	const searchConfig = async () => {
 		config.value = uni.getStorageSync('config');
-	};
-	// 其他查询信息
-	const searchOther = async () => {
-		
 	};
 	// 查询
 	const search = async () => {
 		const info = {
-			skip: 0,
-			limit: 2,
-			status: '0'
+			skip: skip.value,
+			limit: limit.value,
+			is_use: '0'
 		}
-		// const res = await $api('car', 'GET', info);
-		// if (res.errcode === 0) {
-		// 	list.value = list.value.concat(res.data)
-		// 	total.value = res.total
-		// } else {
-		// 	uni.showToast({
-		// 		title: res.errmsg || '',
-		// 		icon: 'error',
-		// 	});
-		// }
+		const res = await $api('business', 'GET', info);
+		if (res.errcode === 0) {
+			list.value = list.value.concat(res.data)
+			total.value = res.total
+		} else {
+			uni.showToast({
+				title: res.errmsg || '',
+				icon: 'error',
+			});
+		}
+	};
+	// 搜索
+	const toChange = () => {
+		uni.navigateTo({
+			url: `/pagesHome/type/index`
+		})
+	};
+	const toCommon = (item) => {
+		uni.navigateTo({
+			url: `/pagesHome/search/index?type=${item.type || ''}`
+		})
+	};
+	// 查看详情
+	const toView = (item) => {
+		uni.navigateTo({
+			url: `/pagesHome/car/index?id=${item.id || item._id}`
+		})
+	};
+	// 分页
+	const toPage = () => {
+		if (total.value > list.value.length) {
+			uni.showLoading({
+				title: '加载中',
+				mask: true
+			})
+			page.value = page.value + 1;
+			skip.value = page.value * limit.value;
+			search();
+			uni.hideLoading();
+		} else is_bottom.value = true
+	};
+	// 清空列表
+	const clearPage = () => {
+		list.value = []
+		skip.value = 0
+		limit.value = 6
+		page.value = 0
 	};
 </script>
 <style lang="scss" scoped>
 	.content {
 		display: flex;
 		flex-direction: column;
-		background-color: var(--f1Color);
+		width: 100vw;
+		height: 100vh;
+
+		.top {
+			margin: 2vw;
+		}
+
+		.bottom {
+			position: relative;
+			flex-grow: 1;
+			background-color: var(--f1Color);
+
+			.list {
+				width: 48%;
+				margin: 2vw 0 0 0;
+				border-radius: 5px;
+				border: 1px solid var(--f5Color);
+				background-color: var(--mainColor);
+
+				.left {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 100%;
+					height: 35vw;
+					border-radius: 5px 5px 0 0;
+					font-size: var(--font14Size);
+					color: var(--mainColor);
+					font-weight: bold;
+					border: 1px solid var(--f5Color);
+					background: linear-gradient(to bottom, #2979ff, #ffffff);
+				}
+
+				.right {
+					.name {
+						font-size: var(--font16Size);
+						padding: 2vw 2vw 0 2vw;
+					}
+
+					.money {
+						padding: 2vw;
+						color: var(--fF0Color);
+						font-size: var(--font16Size);
+
+						text:first-child {
+							font-size: var(--font12Size);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			margin: 0 3vw;
+		}
+	}
+
+	.is_bottom {
+		width: 100%;
+		text-align: center;
+
+		text {
+			padding: 2vw 0;
+			display: inline-block;
+			color: var(--f85Color);
+			font-size: var(--font12Size);
+		}
 	}
 </style>