From 716b3fce334eab2ef01140c158f9aa31736650e5 Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Fri, 10 Nov 2023 13:58:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B9=E5=89=82=E6=A3=80=E7=B4=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                |  16 +
 pages/peanut/home.vue                     |   2 +-
 pages/prescription/prescription.vue       | 630 ++++++++++++++++++++++
 pages/prescription/prescriptionDetail.vue |  22 +
 4 files changed, 669 insertions(+), 1 deletion(-)
 create mode 100644 pages/prescription/prescription.vue
 create mode 100644 pages/prescription/prescriptionDetail.vue

diff --git a/pages.json b/pages.json
index 39bea34..5eafcb9 100644
--- a/pages.json
+++ b/pages.json
@@ -508,6 +508,22 @@
         		"navigationBarTitleText" : "脉穴详情",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/prescription/prescription",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "方药检索",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/prescription/prescriptionDetail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "方药详情",
+        		"enablePullDownRefresh" : false
+        	}
         }
     ],
 	"globalStyle": {
diff --git a/pages/peanut/home.vue b/pages/peanut/home.vue
index a8bc8c3..2fa0199 100644
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -14,7 +14,7 @@
 						<image src="../../static/icon/five1.png" mode="aspectFit" ></image>
 						<text>经穴检索</text>
 					</div>
-					<div class="item item1">
+					<div class="item item1" @click="onPageJump('../prescription/prescription')">
 						<image src="../../static/icon/five2.png" mode="aspectFit"></image>
 						<text>方药检索</text>
 					</div>
diff --git a/pages/prescription/prescription.vue b/pages/prescription/prescription.vue
new file mode 100644
index 0000000..068cd18
--- /dev/null
+++ b/pages/prescription/prescription.vue
@@ -0,0 +1,630 @@
+<template>
+	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module> -->
+		<z-nav-bar title="方药检索"></z-nav-bar>
+		<!-- <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
+			@cancel="cancel" @clear="clear">
+		</uni-search-bar> -->
+		<view class="oneCateList flexbox">
+			<text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
+				v-for="(item, index) in oneCateList" :key="item.id">{{item.title}}</text>
+		</view>
+		<view class="search_box">
+			<u-search placeholder="请输入方药名" @focus="focus" @clear="clear" v-model="searchValue" @input="input"
+				@blur="blur" @search="search"></u-search>
+		</view>
+		<view class="searchList" v-show="showSearchList">
+			<view class="itemBox" v-if="searchList.length > 0">
+				<view class="item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
+					{{item.title}}
+				</view>
+			</view>
+			<view v-else class="">
+				<u-divider text="未找到相关方药哦~"></u-divider>
+			</view>
+		</view>
+		<view v-show="!showSearchList" class="contentBox">
+			<view class="" v-if="false">
+				<!-- 常规格式 -->				
+				<view class="grid twoCateList" v-if="twoCateList.length > 0">
+					<u-grid :col="3" border class="u-grid-list">
+						<u-grid-item v-for="(item, index) in twoCateList" :key="item.id"
+							@click="setTwoCateIndex(item, index)">
+							<view :class="['grid-text',curTwoCateIndex == index ? 'cur' : '']">{{item.title}}</view>
+						</u-grid-item>
+					</u-grid>
+				</view>
+				<view class="titleList">
+					<u-grid :col="3" v-if="titleList.length > 0">
+						<u-grid-item v-for="(item, index) in titleList" :key="item.id" @click="gotoDetail(item)">
+							<view :class="['titleItem']">{{item.title}}</view>
+						</u-grid-item>
+					</u-grid>
+					<u-divider v-else text="暂无方药数据哦~"></u-divider>
+				</view>
+			</view>
+			<view class="mode2" v-else>
+				<!-- 经方样式 -->
+				<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView"
+					scroll-with-animation="true">
+					<view class="address-book" v-for="(item, index) in jingfangList" :key="index" :id="item.id">
+						<view class="address-book-index">{{ item.id }}</view>
+						<view class="contact-container" v-for="(item, index) in item.data" :key="index">
+							<view class="contact-detail-container">
+								<view class="contact-name">{{ item.title }}</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<view class="letter-nav">
+					<view class="item" v-for="(item, index) in indexList" :key="index" @click="toSelectIndex(item)">
+						{{ item }}
+					</view>
+				</view>
+
+			</view>
+		</view>
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	import $http from '@/config/requestConfig.js';
+	export default {
+		data() {
+			return {
+				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
+					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
+				],
+				playData: {},
+				searchValue: '',
+				oneCateList: [], // 一级分类标题1
+				twoCateList: [], // 二级分类标题
+				titleList: [], // 方药标题
+				curOneCateIndex: 0, // 当前选中的一级分类
+				curTwoCateIndex: 0, // 当前选中的二级分类
+				searchList: [], // 搜索结果数组
+				showSearchList: false,
+				toView: '',
+				jingfangList: [{
+						id: 'A',
+						data: [{
+								title: '阿联酋迪拉姆',
+							},
+							{
+								title: '阿尔巴尼亚列克',
+							},
+						]
+					},
+					{
+						id: 'B',
+						data: [{
+								title: '孟加拉国塔卡',
+							},
+							{
+								title: '保加利亚列瓦',
+							},
+						]
+					},
+
+					{
+						id: 'C',
+						data: [{
+								title: '加拿大元',
+							},
+							{
+								title: '瑞士法郎',
+							},
+						]
+					},
+					{
+						id: 'D',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'E',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'F',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'G',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'H',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'I',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'J',
+						data: [{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+							{
+								title: '丹麦克朗',
+							},
+							{
+								title: '多米尼加比索',
+							},
+						]
+					},
+					{
+						id: 'Z',
+						data: [{
+								title: 'z',
+							},
+							{
+								title: 'zzz',
+							},
+						]
+					}
+
+				], // 经方数组
+			}
+		},
+		onLoad() {
+			this.getCateList()
+		},
+		onHide() {
+			this.showSearchList = false
+			this.searchList = []
+		},
+		methods: {
+			toSelectIndex(item) {
+				this.toView = item
+			},
+			// 方药详情
+			gotoDetail(item) {
+				uni.navigateTo({
+					url: "./acupointDetail?id=" + item.id
+				})
+			},
+			// 获取方药名称
+			getTitles(id) {
+				$http.request({
+					url: "book/point/getPointsByCategoryId",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						// loadAnimate: 'none', // 请求加载动画
+						'pointCategoryId': id
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '内容获取成功')
+					if (res.code == 0 && res.points.length > 0) {
+						this.titleList = res.points
+					} else {
+						this.titleList = []
+					}
+				}).catch(e => {
+					this.titleList = []
+					console.log(e)
+				})
+			},
+			setTwoCateIndex(item, index) {
+				let id = item.id
+				this.curTwoCateIndex = index
+				this.getTitles(id)
+			},
+			setOneCateIndex(item, index) {
+				let id = item.id
+				this.curOneCateIndex = index
+				this.curTwoCateIndex = 0
+				this.getTowCateList(id)
+			},
+			getTowCateList(id) {
+				$http.request({
+					url: "book/point/getPointCategoryByPid",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						loadAnimate: 'none', // 请求加载动画
+						'id': id
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '二级分类获取成功')
+					if (res.code == 0 && res.category.length > 0) {
+						this.twoCateList = res.category
+						this.getTitles(this.twoCateList[0].id)
+					} else {
+						this.twoCateList = []
+						this.titleList = []
+					}
+				}).catch(e => {
+					this.twoCateList = []
+					this.titleList = []
+					console.log(e)
+				})
+			},
+			getCateList(id) {
+				id ? '' : id = 0
+				this.twoCateList = []
+				this.curTwoCateIndex = 0
+				// 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
+				$http.request({
+					url: "book/point/getPointCategoryByPid",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						loadAnimate: 'none', // 请求加载动画
+						'id': id
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '脉穴分类获取成功')
+					if (res.code == 0 && res.category.length > 0) {
+						this.oneCateList = res.category
+						this.getTowCateList(this.oneCateList[0].id)
+					} else {
+						this.oneCateList = []
+					}
+				}).catch(e => {
+					this.oneCateList = []
+					console.log(e)
+				})
+			},
+			getSearch() {
+				$http.request({
+					url: "book/point/searchPointList",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						loadAnimate: 'none', // 请求加载动画
+						'keywords': this.searchValue
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '搜索结果')
+					if (res.code == 0 && res.points.length > 0) {
+						this.searchList = res.points
+					}
+				}).catch(e => {
+					// this.titleList = []	
+					this.searchList = []
+					console.log(e)
+				})
+			},
+			search(res) {
+				console.log(res, 'res')
+				// uni.showToast({
+				// 	title: '搜索：' + res,
+				// 	icon: 'none'
+				// })
+
+			},
+			input(res) {
+				console.log('----input:', res)
+				if (res == '') {
+					this.searchList = []
+				} else {
+					this.getSearch()
+				}
+			},
+			clear(res) {
+				// uni.showToast({
+				// 	title: 'clear事件，清除值为：',
+				// 	icon: 'none'
+				// })
+				this.showSearchList = false
+			},
+			blur(res) {
+				if (res == '') {
+					this.showSearchList = false
+					this.searchList = []
+				} else {
+					this.getSearch()
+				}
+			},
+			focus(e) {
+				// uni.showToast({
+				// 	title: 'focus事件，输出值为：' + e.value,
+				// 	icon: 'none'
+				// })
+				this.showSearchList = true
+			},
+			// cancel(res) {
+			// 	uni.showToast({
+			// 		title: '点击取消，输入值为：' + res.value,
+			// 		icon: 'none'
+			// 	})
+			// }
+		},
+		onBackPress() {
+			// #ifdef APP-PLUS
+			plus.key.hideSoftKeybord();
+			// #endif
+		},
+		components: {
+			musicPlay
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mode2 {
+		position: relative;
+	}
+
+	.address-book-index {
+		background-color: #f8f9fa; padding: 10rpx 0; text-indent: 2%;
+	}
+
+	.contact-img {
+		width: 20px;
+		height: 20px;
+	}
+
+	.scroll-container {
+		height: calc(100vh - 70rpx);
+	}
+
+	.letter-nav {
+		position: absolute;
+		right: 25rpx;
+		top: 40rpx;
+
+		.item {
+			font-size: 28rpx; margin-bottom: 10rpx;
+		}
+	}
+
+	.contact-container {
+		display: flex;
+		align-items: center;
+		margin: 2%;
+	}
+
+	.contact-detail-container {
+		margin-left: 2%;
+		.contact-name{
+			padding: 10rpx;
+		}
+
+	}
+
+	.searchList {
+		.item {
+			font-size: 28rpx;
+			padding: 20rpx;
+			border-bottom: 1px solid #dadbde;
+		}
+	}
+
+	.scroll-view_H {
+		background-color: #fff;
+		white-space: nowrap;
+		padding: 10rpx;
+	}
+
+	.oneCateList {
+		margin-bottom: 20rpx;
+		justify-content: space-between;
+
+		text {
+			text-align: center;
+			display: inline-block;
+			width: 32%;
+			padding: 20rpx 0;
+			font-size: 34rpx;
+			border-radius: 10rpx;
+		}
+
+		.cur {
+			background-color: #55aa7f;
+			color: #fff;
+		}
+	}
+
+	.contentBox {
+
+		.twoCateList {
+			font-size: 28rpx;
+			margin-top: 20rpx;
+
+			.grid-text {
+				padding: 30rpx 20rpx;
+				text-align: center;
+			}
+
+			.cur {
+				color: #55aa7f;
+			}
+
+			// .u-grid-list{border: 0.5px solid #dadbde;}
+		}
+
+		.titleList {
+			font-size: 26rpx;
+			margin-top: 20rpx;
+			padding: 10rpx;
+			border-radius: 10rpx;
+			background-color: #f8f9fa;
+
+			.titleItem {
+				padding: 20rpx 0;
+			}
+		}
+	}
+
+
+	.container {
+		padding: 10rpx;
+		min-height: 100vh;
+		overflow: hidden;
+		background-color: #fff;
+	}
+
+	.search_box {
+		margin: 0 auto;
+		overflow: hidden;
+		margin-top: 20rpx;
+		align-items: center;
+		width: calc(100% - 10px);
+		margin-top: 0;
+		margin-bottom: 40rpx;
+
+		.search {
+			height: 56upx;
+			display: flex;
+			width: 86%;
+			margin: 0 auto;
+			align-items: center;
+			padding: 0upx 40upx;
+			background-color: #fff;
+			border-radius: 20upx;
+			box-shadow: 0 0px 10px 1px #54a96633;
+		}
+
+		.prompt {
+			color: #838383;
+			font-size: 24rpx;
+
+		}
+
+		.icon_search {
+			background-image: url('@/static/icon/map_ic_search.png');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: cover;
+			width: 36upx;
+			height: 36upx;
+			margin-right: 20upx;
+		}
+	}
+
+	.flexbox {
+		display: flex;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/prescription/prescriptionDetail.vue b/pages/prescription/prescriptionDetail.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/pages/prescription/prescriptionDetail.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>