zhangqi
/
circulation_ancientCoins_new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

使用指南说明页面

master
kuaileWu 3 months ago
parent
05817d5db3
commit
36dbc9b182
4 changed files with 371 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      App.vue
  2. 89
      components/explainPageHeader.vue
  3. 10
      pages.json
  4. 265
      pages/explain/explain.vue

14
App.vue
View File

@ -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
}

89
components/explainPageHeader.vue
View File

@ -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>

10
pages.json
View File

@ -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": {

265
pages/explain/explain.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save