From 36dbc9b1826725f4d45228ce22938846ebf8bba9 Mon Sep 17 00:00:00 2001
From: kuaileWu <1432334894@qq.com>
Date: Fri, 6 Jun 2025 15:18:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=8C=87=E5=8D=97=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                          |  14 ++-
 components/explainPageHeader.vue |  89 +++++++++++++
 pages.json                       |  10 +-
 pages/explain/explain.vue        | 265 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 371 insertions(+), 7 deletions(-)
 create mode 100644 components/explainPageHeader.vue
 create mode 100644 pages/explain/explain.vue

diff --git a/App.vue b/App.vue
index 47b65e0..9d7a82b 100644
--- a/App.vue
+++ b/App.vue
@@ -61,12 +61,14 @@
 					// #endif
 
 					// #ifdef MP-WEIXIN
-					uni.showModal({
-						title: '请扫描小程序二维码或点击小程序链接进入',
-						content: '',
-						showCancel: false,
-						success: ({ confirm, cancel }) => {}
-					})
+					// uni.showModal({
+					// 	title: '请扫描小程序二维码或点击小程序链接进入',
+					// 	content: '',
+					// 	showCancel: false,
+					// 	success: ({ confirm, cancel }) => {}
+					// })
+					uni.reLaunch({ url: '/pages/explain/explain' })
+					throw new Error('请扫描小程序二维码或点击小程序链接进入')
 					// #endif
 
 				}
diff --git a/components/explainPageHeader.vue b/components/explainPageHeader.vue
new file mode 100644
index 0000000..4252ebc
--- /dev/null
+++ b/components/explainPageHeader.vue
@@ -0,0 +1,89 @@
+<template>
+	<view class="">
+		<view class="headerbg"></view>
+		<view class="header-com" :style="{paddingTop:headerArea.status_height+'px'}">
+			<img class="logo" :src="cssUrl+'explain_logo.png'">
+			<view class="txt1 PfScSemibold">仁心大医·中医预约系统</view>
+			<view class="txt2 PfScMedium">打造智慧中医个人工作室</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:'explainPageHeader',
+		data() {
+			return {
+				cssUrl:this.cssUrl
+			}
+		},
+		props:{
+
+		},
+		computed:{
+			headerArea() {
+			  let area = uni.getSystemInfoSync();
+			  // #ifdef MP-WEIXIN
+			  return this.getHeaderInfo();
+			  // #endif
+			  // #ifndef MP-WEIXIN
+			  return {
+			    status_height: area.statusBarHeight
+			  };
+			  // #endif
+			}
+		},
+		methods: {
+			getHeaderInfo() {
+				let area = uni.getSystemInfoSync();
+				// #ifdef MP-WEIXIN
+				let menu = uni.getMenuButtonBoundingClientRect();
+				return {
+					status_height: menu.top
+				};
+				// #endif
+			},
+			getbarHeight() {
+
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.headerbg{
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100vw;
+		height: 398rpx;
+		background: linear-gradient(180deg, #4CAF50 1%, #62CA66 88%);
+	}
+	.header-com{
+		overflow: hidden;
+		width: 100%;
+		position: fixed;
+		z-index: 189;
+		.logo {
+			width: 100rpx;
+			height: 100rpx;
+			margin: 0 auto;
+			display: block;
+		}
+		.txt1{
+			font-size: 46rpx;
+			line-height: 42rpx;
+			color: #FFFFFF;
+			line-height: 46rpx;
+			text-align: center;
+			margin-top: 23rpx;
+		}
+		.txt2{
+			text-align: center;
+			margin-top: 14rpx;
+			font-size: 28rpx;
+			line-height: 42rpx;
+			color: #FFFFFF;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 0ef2fd1..5aaa838 100644
--- a/pages.json
+++ b/pages.json
@@ -2,7 +2,7 @@
     "pages": [{
             "path": "pages/index/index",
             "style": {
-                "navigationBarTitleText": "就诊人"
+                "navigationBarTitleText": "首页"
             }
         },
         {
@@ -74,6 +74,14 @@
             "style": {
                 "navigationBarTitleText": "就诊详情"
             }
+        },
+        {
+        	"path" : "pages/explain/explain",
+        	"style" :
+        	{
+        		"navigationBarTitleText" : "",
+                "navigationStyle": "custom"
+        	}
         }
     ],
     "globalStyle": {
diff --git a/pages/explain/explain.vue b/pages/explain/explain.vue
new file mode 100644
index 0000000..500148e
--- /dev/null
+++ b/pages/explain/explain.vue
@@ -0,0 +1,265 @@
+<template>
+	<view class="explain index">
+		<Header ref="headerref"></Header>
+		<view class="content">
+			<view class="nav-bar">
+				<view :class="'nav-item'+(navtype==2?' active PfScMedium':'')" @click="changeType(2)">
+					患者用法
+					<view class="nav-item-bt-border" v-if="navtype==2"></view>
+				</view>
+				<view :class="'nav-item'+(navtype==1?' active PfScMedium':'')" @click="changeType(1)">
+					医生指南
+					<view class="nav-item-bt-border" v-if="navtype==1"></view>
+				</view>
+			</view>
+
+			<view class="nav-type1-content" v-if="navtype == 1">
+				<view class="type1-item" v-for="(item, key) in doctorDescList" :key="key">
+					<img :src="cssUrl+'explain_'+(key+1)+'.svg'">
+					<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
+					<view class="type1-txt2">{{item.txt2}}</view>
+				</view>
+			</view>
+
+			<view class="nav-type2-content" v-if="navtype == 2">
+				<view class="step-header PfScSemibold">使用步骤</view>
+
+				<view class="step-item" v-for="(item, key) in patientStepDescList" :key="key">
+					<view class="step-left PfScMedium">
+						{{key+1}}
+					</view>
+					<view class="step-right">
+						<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
+						<view class="type1-txt2">{{item.txt2}}</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="step-bottom" v-if="navtype == 2">
+				<view class="step-bottom-desc">
+					<img :src="cssUrl+'explain_line_left.png'">
+					<text class="PfScSemibold">扫码约名医，疗程随时查</text>
+					<img :src="cssUrl+'explain_line_right.png'">
+				</view>
+
+				<view class="step-bottom-list">
+					<view class="step-bottom-item" v-for="(item, key) in stepBottomList" :key="key">
+						<img :src="cssUrl+item.img">
+						<text class="PfScMedium">{{item.txt}}</text>
+					</view>
+				</view>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import Header from '@/components/explainPageHeader.vue';
+
+	export default {
+		name:"index",
+		data() {
+			return {
+				pageLoad:false,
+				navtype:2,
+				cssUrl:this.cssUrl,
+				doctorDescList:[
+					{txt1:'医生个人品牌',txt2:'打造专属中医名片'},
+					{txt1:'处方余量管理',txt2:'自动扣除就诊次数'},
+					{txt1:'治疗时长闹钟',txt2:'智能计时免记录'},
+					{txt1:'床位标注',txt2:'医患实时同步位置'}
+				],
+				patientStepDescList:[
+					{txt1:'扫码或点击链接',txt2:'进入该医生的专属主页'},
+					{txt1:'预约就诊时间',txt2:'选择您方便的就诊时间段'},
+					{txt1:'就诊当天扫码报到',txt2:'扫描现场二维码，快速报到'},
+					{txt1:'查看疗程进度',txt2:'随时看治疗详情、剩余次数'},
+				],
+				stepBottomList:[
+					{txt:'名医直约',img:'explain_5.svg'},
+					{txt:'扫码即诊',img:'explain_6.svg'},
+					{txt:'疗程可查',img:'explain_7.svg'},
+				]
+			}
+		},
+		components:{
+			Header:Header
+		},
+		onLoad(e) {
+			console.log(e)
+		},
+		async onShow() {
+			this.pageLoad = true;
+		},
+		methods: {
+			changeType(type) {
+				this.navtype = type;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.explain{
+		height: 100vh;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		width: 100vw;
+		overflow-x: hidden;
+		overflow-y: auto;
+		.content{
+			top: 356rpx;
+			position: absolute;
+			z-index: 198;
+			width: 100%;
+			height: auto;
+			overflow: hidden;
+			background: #FFFFFF;
+			border-radius: 24rpx 24rpx 0 0;
+			.nav-bar{
+				display: flex;
+				border-radius: 24rpx 24rpx 0rpx 0rpx;
+				border-radius: 24rpx 24rpx 0rpx 0rpx;
+				box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);
+				padding: 0 62rpx;
+				box-sizing: border-box;
+				width: 100%;
+				height: 120rpx;
+				.nav-item{
+					width: 269px;
+					height: 120rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 32rpx;
+					color: #666666;
+					position: relative;
+					.nav-item-bt-border{
+						position: absolute;
+						width:100%;
+						z-index: 9;
+						height: 4rpx;
+						bottom: 0rpx;
+						left: 0;
+						background: #4DC56D;
+					}
+					&.active{
+						color: #4DC56D;
+					}
+				}
+			}
+			.nav-type1-content{
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				padding: 48rpx 42rpx;
+				column-gap: 48rpx;
+				row-gap: 48rpx;
+				margin: 14rpx 42rpx 0 42rpx;
+				box-sizing: border-box;
+				height: auto;
+				.type1-item{
+					flex-shrink: 0;
+					flex-grow: 1;
+					img{
+						width: 80rpx;
+						height: 80rpx;
+						display: block;
+						margin: auto;
+					}
+					.type1-txt1,.type1-txt2{
+						text-align: center;
+						font-size: 28rpx;
+					}
+					.type1-txt1{
+						line-height: 38rpx;
+						color: #000000;
+						margin-top: 24rpx;
+					}
+					.type1-txt2{
+						color: #6B7280;
+						margin-top: 6rpx;
+					}
+				}
+			}
+			.nav-type2-content{
+				padding: 48rpx 42rpx 0 42rpx;
+				margin: 24rpx 42rpx 46rpx 42rpx;
+				box-sizing: border-box;
+				height: auto;
+				overflow: hidden;
+				.step-header{
+					font-size: 36rpx;
+					color: #000000;
+					margin-bottom: 48rpx;
+				}
+				.step-item{
+					display: flex;
+					column-gap: 32rpx;
+					margin-bottom: 48rpx;
+					height: 84rpx;
+					.step-left{
+						width: 64rpx;
+						height: 64rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+						border-radius: 100%;
+						background: #39D067;
+					}
+					.step-right{
+						.type1-txt1{
+							font-size: 28rpx;
+							color: #000000;
+						}
+						.type1-txt2{
+							font-size: 28rpx;
+							color: #6B7280;
+							margin-top: 6rpx
+						}
+					}
+				}
+			}
+			.step-bottom{
+				width: 618rpx;
+				height: auto;
+				margin: 46rpx auto 0;
+				.step-bottom-desc{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					img{
+						width: 98rpx;
+						height: 6rpx;
+					}
+					text{
+						font-size: 34rpx;
+						color: #82C989;
+					}
+				}
+				.step-bottom-list{
+					display: flex;
+					justify-content: space-between;
+					margin-top: 30rpx;
+					padding:0 38rpx;
+					.step-bottom-item{
+						display: flex;
+						align-items: center;
+						column-gap: 8rpx;
+						img{
+							width: 28rpx;
+							height: 28rpx;
+						}
+						text{
+							font-size: 28rpx;
+							color: #82C989;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>