翻页

2024-01-31 15:24:52 +08:00
parent c1e414bcab
commit 5ae322d192
17 changed files with 912 additions and 449 deletions
--- a/pages/prescript/CNMedicineText.vue
+++ b/pages/prescript/CNMedicineText.vue
@@ -0,0 +1,191 @@
+<template>
+	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar title="中药搜索"></z-nav-bar>
+		<view class="contentBox">
+			<view class="search_box">
+				<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="keyword"
+					@custom='souYao' @clear="souYao"></u-search>
+			</view>
+			<view class="titleList">
+				<u-grid :col="1" v-if="titleList.length > 0">
+					<u-grid-item v-for="(item, index) in titleList" :key="item.id" @click="gotoCNDetail(item)"
+						style="align-items: flex-start;border-bottom: 2px solid #fff;">
+						<view :class="['titleItem']">{{item.name}}</view>
+					</u-grid-item>
+				</u-grid>
+				<u-divider v-else text="暂无药物数据哦~"></u-divider>
+			</view>
+
+		</view>
+		<view>
+			<view v-if="status==0" style="text-align: center;padding: 20rpx 0;">
+				<u-loading-icon style="display: inline-block;"></u-loading-icon>
+				<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>
+					努力加载中
+				</font>
+			</view>
+			<view v-if="status==1" style="padding: 20rpx 0;">
+				<u-divider text="全部加载完成"></u-divider>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import $http from '@/config/requestConfig.js';
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		components: {
+
+		},
+		data() {
+			return {
+				keyword: '',
+				titleList: [],
+				status: 3,
+				page: 1,
+				totalPage: 1,
+			}
+		},
+		onLoad() {
+			this.titleList = []
+		},
+		onHide() {
+			this.page = 1
+		},
+
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			// this.contentShow = 1
+			this.page = 1
+			this.goToSearch()
+			uni.stopPullDownRefresh();
+		},
+		onReachBottom() {
+			// this.loadingNow = true
+			console.log('到底了')
+			if (this.page + 1 <= this.totalPage) {
+				this.page++
+				this.goToSearch()
+			} else {
+				this.status = 1
+			}
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		methods: {
+			// 搜索
+			goToSearch() {
+				$http.request({
+					url: "book/materials/getMaterialsList",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						// loadAnimate: 'none', // 请求加载动画
+						"limit": 20,
+						"current": this.page,
+						"name": this.keyword,
+						"type": "", // 植物、矿物、动物
+						"effect": '', //功效 
+						"taste": '', //味
+						"property": '', //性
+						"tropism": '' //归经
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '内容获取成功')
+					if (res.code == 0 && res.result.records.length > 0) {
+						for (var i = 0; i < res.result.records.length; i++) {
+							this.titleList.push(res.result.records[i])
+						}
+
+						this.totalPage = res.result.pages
+						if (this.page == this.totalPage) {
+							this.status = 1
+						} else {
+							this.status = 3
+						}
+
+
+					} else {
+						this.titleList = []
+					}
+				}).catch(e => {
+					this.titleList = []
+					console.log(e)
+				})
+			},
+
+			// 点击搜索
+			souYao() {
+				this.page = 1
+				this.titleList = []
+				this.goToSearch()
+			},
+			
+			// 跳转详情
+			gotoCNDetail(item) {
+				uni.navigateTo({
+					url: "./CNMedicineSearchDetail?id=" + item.id
+				})
+			},
+
+		},
+		onBackPress() {
+			// #ifdef APP-PLUS
+			plus.key.hideSoftKeybord();
+			// #endif
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		padding: 10rpx;
+		height: 100vh;
+		background-color: #fff;
+	}
+
+	.contentBox {
+
+		.titleList {
+			font-size: 26rpx;
+			margin-top: 20rpx;
+			padding: 10rpx;
+			border-radius: 10rpx;
+			background-color: #f8f9fa;
+
+			.titleItem {
+				padding: 20rpx 10rpx;
+			}
+
+			.JFtitleItem {
+				background-color: #ffffff;
+				padding: 20rpx 10rpx;
+				width: 100%;
+				border-bottom: 0.5px solid #f8f9fa;
+			}
+		}
+
+
+	}
+
+	.search_box {
+		margin: 0 auto;
+		overflow: hidden;
+		align-items: center;
+		width: calc(100% - 10px);
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+
+
+
+
+	}
+</style>