经穴检索

2023-11-07 17:13:44 +08:00
parent 454b2803c2
commit 84fca53ebe
27 changed files with 1990 additions and 37 deletions
--- a/pages/acupoint/acupointDetail.vue
+++ b/pages/acupoint/acupointDetail.vue
@@ -0,0 +1,159 @@
+<template>
+	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar :title="'穴位详情-' + acupointDetail.title"></z-nav-bar>
+		<view class="uni-margin-wrap" v-if="acupointDetail && acupointDetail.imageList.length > 0">
+			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+				:duration="duration">
+				<swiper-item v-for="(item, index) in acupointDetail.imageList" :key="index">
+					<view class="swiper-item">
+						<image :src="item" mode="aspectFit"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="contentBox">			
+			<view class="content">
+				<uni-section class="mb-10" titleFontSize="18px" title="穴位名称" type="line">
+					<view class="item">
+						{{acupointDetail.title}}
+					</view>
+				</uni-section>
+				<uni-section class="mb-10" titleFontSize="18px" title="别名" type="line">
+					<view class="item" v-if="acupointDetail.alias && acupointDetail.alias != ''">
+						{{acupointDetail.alias}}
+					</view>
+					<view class="item" v-else>
+						暂无
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="所属经络" type="line">
+					<view class="item">
+						{{acupointDetail.meridian}}
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="定位" type="line">
+					<view class="item">
+						{{acupointDetail.position}}
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="解剖" type="line">
+					<view class="item" v-if="acupointDetail.anatomy && acupointDetail.anatomy != ''">
+						{{acupointDetail.anatomy}}
+					</view>
+					<view class="item" v-else>
+						暂无
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="主治" type="line">
+					<view class="item">
+						{{acupointDetail.indication}}
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="配伍" type="line">
+					<view class="item" v-if="acupointDetail.compatibility && acupointDetail.compatibility != ''">
+						{{acupointDetail.compatibility}}
+					</view>
+					<view class="item" v-else>
+						暂无
+					</view>
+				</uni-section>
+				
+				<uni-section class="mb-10" titleFontSize="18px" title="文献" type="line">
+					<view class="item" v-if="acupointDetail.literature && acupointDetail.literature != ''">
+						{{acupointDetail.literature}}
+					</view>
+					<view class="item" v-else>
+						暂无
+					</view>
+				</uni-section>
+				
+			</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 {
+				playData: {},
+				acupointDetail: {
+					imageList:[]
+				},
+				acupointId: null,
+				indicatorDots: true,
+				autoplay: true,
+				interval: 5000,
+				duration: 500
+			}
+		},
+		onLoad(e) {
+			this.acupointId = e.id
+		},
+		onShow() {
+			this.getDetail()
+		},
+		methods: {
+			// 穴位详情
+			getDetail() {
+				$http.request({
+					url: "book/point/getPointDetail",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
+					data: {
+						// loadAnimate: 'none', // 请求加载动画
+						'pointId': this.acupointId
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log(res, '内容获取成功')
+					if (res.code == 0) {
+						this.acupointDetail = res.point
+					}
+				}).catch(e => {
+					// this.titleList = []		
+					console.log(e)
+				})
+			}
+		},
+		components: {
+			musicPlay
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.contentBox{padding-bottom: 20rpx;}
+	.mb-10{ margin-bottom: 10px;}
+	.content{font-size: 28rpx;}
+	.swiper-item{
+		image{margin: 0 auto; height:200rpx;}
+		
+	}
+	.uni-margin-wrap{ margin-bottom: 20rpx; padding-top: 20rpx;
+		background-color: #fff;
+	}
+	.container {
+		padding: 10rpx;
+		// background-color: #fff;
+		.item{color: #666; padding:10rpx 20rpx; padding-bottom: 20rpx; line-height: 46rpx;}
+	}
+
+	.flexbox {
+		display: flex;
+	}
+	
+	/deep/ .uni-section-header__decoration.line{background-color: #18bc37;}
+</style>