@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<uni-card :is-shadow="false" :border="false" style="width: 40vw" padding="10px"> |
||||
|
<template v-slot:title> |
||||
|
<view class="text-center u-font-16 font-bold uni-mt-10"> |
||||
|
患者信息 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<uni-forms ref="formRef" :modelValue="formData" :rules="rules"> |
||||
|
<uni-forms-item label="姓名" name="name"> |
||||
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item name="gender" label="性别"> |
||||
|
<uni-data-checkbox v-model="formData.gender" :localdata="genders" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="身份证" name="idCard"> |
||||
|
<uni-easyinput type="text" v-model="formData.idCard" placeholder="请输入身份证号" /> |
||||
|
</uni-forms-item> |
||||
|
<uni-forms-item label="民族" name="nation"> |
||||
|
<uni-easyinput type="text" v-model="formData.nation" placeholder="请输入民族" /> |
||||
|
</uni-forms-item> |
||||
|
</uni-forms> |
||||
|
|
||||
|
<template v-slot:actions> |
||||
|
<view class="flex primary justify-center uni-pb-10" @click="$emit('on-scan')"> |
||||
|
扫描身份证 |
||||
|
</view> |
||||
|
<view class="flex justify-between uni-mb-16"> |
||||
|
<u-button size="medium" shape="circle" @click="onCancel">取消</u-button> |
||||
|
<u-button size="medium" type="primary" shape="circle" class="bg-main" @click="onConfirm">确定</u-button> |
||||
|
</view> |
||||
|
</template> |
||||
|
</uni-card> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
|
||||
|
const emits = defineEmits(['on-cancel', 'on-confirm', 'on-scan']) |
||||
|
|
||||
|
const formData = reactive({ |
||||
|
name: '', |
||||
|
gender: 0, |
||||
|
idCard: '', |
||||
|
nation: '汉' |
||||
|
}) |
||||
|
|
||||
|
const rules = { |
||||
|
name: { rules: [{ required: true, errorMessage: '请输入姓名' }] }, |
||||
|
idCard: { |
||||
|
rules: [ |
||||
|
{ required: true, errorMessage: '请输入身份证号' }, |
||||
|
{ |
||||
|
validateFunction(_rule, value: string, _data, callback: Function) { |
||||
|
const reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/ |
||||
|
if (!reg.test(value)) { |
||||
|
callback('身份证格式不正确') |
||||
|
} |
||||
|
return true |
||||
|
} |
||||
|
}] |
||||
|
}, |
||||
|
nation: { rules: [{ required: true, errorMessage: '请输入民族' }] }, |
||||
|
} |
||||
|
|
||||
|
const genders = [ |
||||
|
{ label: '男', value: 0, text: '男' }, |
||||
|
{ label: '女', value: 1, text: '女' } |
||||
|
] |
||||
|
|
||||
|
const formRef = ref() |
||||
|
|
||||
|
function onCancel() { |
||||
|
emits('on-cancel') |
||||
|
} |
||||
|
|
||||
|
function onConfirm() { |
||||
|
if (!formRef.value) return |
||||
|
formRef.value.validate().then(res => { |
||||
|
console.log(res); |
||||
|
emits('on-confirm', formData) |
||||
|
}).catch(error => { |
||||
|
console.log(error); |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
@ -0,0 +1,9 @@ |
|||||
|
<template> |
||||
|
<div class="DetailBase">DetailBase</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
const props = defineProps(); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<view class="float-btn"> |
||||
|
<u-image @click="toggle" class="icon-btn icon-menu" src="@/static/images/menu.png" mode="aspectFill"></u-image> |
||||
|
|
||||
|
<u-image v-show="showChild" class="icon-btn icon-user" src="@/static/images/user.png" mode="aspectFill"></u-image> |
||||
|
<u-image v-show="showChild" class=" icon-btn icon-heart" src="@/static/images/heart.png" mode="aspectFill"></u-image> |
||||
|
<u-image v-show="showChild" class="icon-btn icon-bed" src="@/static/images/bed.png" mode="aspectFill"></u-image> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const showChild = ref(false) |
||||
|
|
||||
|
function toggle() { |
||||
|
showChild.value = !showChild.value |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.float-btn { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
position: fixed; |
||||
|
right: 20px; |
||||
|
bottom: 250rpx; |
||||
|
|
||||
|
.icon-btn { |
||||
|
width: 140rpx !important; |
||||
|
height: 140rpx !important; |
||||
|
} |
||||
|
|
||||
|
.icon-user { |
||||
|
position: absolute; |
||||
|
right: 10%; |
||||
|
top: -100%; |
||||
|
} |
||||
|
|
||||
|
.icon-heart { |
||||
|
position: absolute; |
||||
|
right: 100%; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.icon-bed { |
||||
|
position: absolute; |
||||
|
right: 10%; |
||||
|
top: 100%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,37 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="bg-main-v border-radius-9-up u-p-r-40 flex "> |
||||
|
<image class="icon-car" src="@/static/images/car.png" mode="aspectFill" /> |
||||
|
<text class="font-bold text-white">{{ carNo }}</text> |
||||
|
</view> |
||||
|
<view class="bg-white border-radius-9-down u-p-l-40 u-p-r-40 u-p-t-20 u-p-b-20"> |
||||
|
<uni-easyinput class="search-circle" v-model="searchValue" type="text" prefixIcon="search" :inputBorder="false" placeholder="搜索患者" |
||||
|
@confirm="onSearch" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const carNo = ref('PC0001') |
||||
|
const searchValue = ref('') |
||||
|
|
||||
|
function onSearch() { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.icon-car { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
margin: 20rpx 20rpx 20rpx 40rpx; |
||||
|
} |
||||
|
|
||||
|
.search-circle :deep(.uni-easyinput__content) { |
||||
|
background-color: #f5f5f8 !important; |
||||
|
border-radius: 35rpx; |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -0,0 +1,3 @@ |
|||||
|
export const LOCAL_KEY = { |
||||
|
LOADED: 'loaded', // 用来显示启动页 有本地数据不显示启动页 没有才显示
|
||||
|
} |
@ -1,17 +1,47 @@ |
|||||
{ |
{ |
||||
"pages": [{ |
"pages": [ |
||||
"path": "pages/index/index", |
{ |
||||
"style": { |
"path": "pages/loading/loading", |
||||
"navigationBarTitleText": "uni-app" |
"style": { |
||||
} |
"navigationStyle": "custom", |
||||
}], |
"navigationBarTitleText": "" |
||||
"globalStyle": { |
} |
||||
"navigationBarTextStyle": "black", |
}, |
||||
"navigationBarTitleText": "uni-app", |
{ |
||||
"navigationBarBackgroundColor": "#F8F8F8", |
"path": "pages/index/index", |
||||
"backgroundColor": "#F8F8F8", |
"style": { |
||||
"app-plus": { |
"navigationBarTitleText": "uni-app", |
||||
"background": "#efeff4" |
"navigationStyle": "custom" |
||||
} |
} |
||||
} |
}, |
||||
|
{ |
||||
|
"path": "pages/patient-list/patient-list", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "患者列表" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/detail1/detail1", |
||||
|
"style": { |
||||
|
"navigationStyle": "custom", |
||||
|
"navigationBarTitleText": "患者详情" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/detail2/detail2", |
||||
|
"style": { |
||||
|
"navigationStyle": "custom", |
||||
|
"navigationBarTitleText": "患者详情" |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"globalStyle": { |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"navigationBarTitleText": "暴风眼质控", |
||||
|
"navigationBarBackgroundColor": "#F8F8F8", |
||||
|
"backgroundColor": "#F8F8F8", |
||||
|
"app-plus": { |
||||
|
"background": "#efeff4" |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
@ -0,0 +1,211 @@ |
|||||
|
<template> |
||||
|
<view class="bg-main-r"> |
||||
|
<uni-nav-bar dark left-icon="left" background-color="transparent" :border="false" title="患者详情" @clickRight="onClickRight" |
||||
|
@clickLeft="onClickLeft"> |
||||
|
<template v-slot:right> |
||||
|
<view class="flex nav-right"> |
||||
|
切换至详情 <u-image class="icon-change" src="@/static/images/change.png" mode="aspectFill"></u-image> |
||||
|
</view> |
||||
|
</template> |
||||
|
</uni-nav-bar> |
||||
|
|
||||
|
<view class="flex justify-between head"> |
||||
|
<view class="column text-white"> |
||||
|
<text class="u-font-xl font-bold">暴风眼质控</text> |
||||
|
<text>高效 便捷 精准</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn-create"> |
||||
|
<image class="icon-plus" src="@/static/images/plus.png" mode="scaleToFill" /> |
||||
|
急诊溶栓记录 |
||||
|
</view> |
||||
|
<!-- <view></view> --> |
||||
|
<image class="icon-doctor" src="@/static/images/doctor.png" mode="scaleToFill" /> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex u-m-l-40 u-m-r-40 align-top content"> |
||||
|
<view class="flex-1 u-m-r-20 column"> |
||||
|
<view class="item-card u-m-r-20 bg-white"> |
||||
|
<view class="flex justify-between u-m-b-16"> |
||||
|
<view class="u-font-xl font-bold flex-1"> |
||||
|
<text class="u-m-r-20">{{ '脏兵' }}</text> |
||||
|
<text class="u-m-r-20">{{ '男' }}</text> |
||||
|
<text>{{ '24 ' }}</text> |
||||
|
</view> |
||||
|
<uni-icons type="compose" color="#888" size="24" /> |
||||
|
</view> |
||||
|
<u-tag text="AS急性脑卒中" type="primary" size="mini" /> |
||||
|
<view class="u-tips-color u-font-sm u-p-t-20"> |
||||
|
身份证:<text>1222222222</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-card u-m-r-20 bg-white u-m-t-30"> |
||||
|
<view class="flex justify-between u-m-b-16"> |
||||
|
<view class="u-font-xl font-bold flex-1"> |
||||
|
<text class="u-m-r-20">{{ '脏兵' }}</text> |
||||
|
</view> |
||||
|
<uni-icons type="compose" color="#888" size="24" /> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex justify-between"> |
||||
|
<u-tag text="AS急性脑卒中" type="primary" size="mini" /> |
||||
|
<view class="u-tips-color">距发病时间 <text class="primary">194′′</text></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="u-tips-color u-font-sm u-p-t-20 flex justify-between"> |
||||
|
<view> |
||||
|
身份证:<text>1222222222</text> |
||||
|
</view> |
||||
|
<view>距CT25′′剩余9′′</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="item-card u-m-r-20 bg-white u-m-t-30"> |
||||
|
<view class="flex justify-between u-m-b-16"> |
||||
|
<view class="u-font-xl font-bold flex-1"> |
||||
|
mRS评分:<text class="u-m-r-20 primary">{{ '4' }}</text> |
||||
|
NIHSS评分:<text class="u-m-r-20 primary">{{ '4' }}</text> |
||||
|
</view> |
||||
|
<uni-icons type="compose" color="#888" size="24" /> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex justify-between u-m-b-16"> |
||||
|
<view class="u-font-xl font-bold flex-1"> |
||||
|
舒张压/收缩压:<text class="u-m-r-20 primary">{{ '4' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<u-tag text="AS急性脑卒中" type="primary" size="mini" /> |
||||
|
|
||||
|
<view class="u-tips-color u-font-sm u-p-t-20 flex "> |
||||
|
身高:<text class="u-m-r-20">1222222222</text> |
||||
|
体重:<text class="u-m-r-20">1222222222</text> |
||||
|
BMI:<text class="u-m-r-20">1222222222</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="u-tips-color u-font-sm u-p-t-20 flex "> |
||||
|
脉搏:<text class="u-m-r-20">1222222222</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<!-- timeline --> |
||||
|
<view class="flex-1 item-card"> |
||||
|
<u-time-line> |
||||
|
<u-time-line-item node-top="4"> |
||||
|
<template v-slot:node> |
||||
|
<uni-icons type="smallcircle" color="#00C767" size="16" /> |
||||
|
</template> |
||||
|
<template v-slot:content> |
||||
|
<view class="flex justify-between"> |
||||
|
<text class="font-xl font-bold">分诊</text> |
||||
|
<text>结束</text> |
||||
|
</view> |
||||
|
<view class="u-m-t-20">时间</view> |
||||
|
</template> |
||||
|
</u-time-line-item> |
||||
|
<u-time-line-item node-top="4"> |
||||
|
<template v-slot:node> |
||||
|
<uni-icons type="smallcircle" color="#00C767" size="16" /> |
||||
|
</template> |
||||
|
<template v-slot:content> |
||||
|
<view class="flex justify-between"> |
||||
|
<text class="font-xl font-bold">分诊</text> |
||||
|
<text>结束</text> |
||||
|
</view> |
||||
|
<view class="u-m-t-20">时间</view> |
||||
|
</template> |
||||
|
</u-time-line-item> |
||||
|
<u-time-line-item node-top="4"> |
||||
|
<template v-slot:node> |
||||
|
<uni-icons type="smallcircle" color="#00C767" size="16" /> |
||||
|
</template> |
||||
|
<template v-slot:content> |
||||
|
<view class="flex justify-between"> |
||||
|
<text class="font-xl font-bold">分诊</text> |
||||
|
<text>结束</text> |
||||
|
</view> |
||||
|
<view class="u-m-t-20">时间</view> |
||||
|
</template> |
||||
|
</u-time-line-item> |
||||
|
</u-time-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- float button --> |
||||
|
<FloatButton /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
function onClickLeft() { |
||||
|
|
||||
|
console.log('left'); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function onClickRight() { |
||||
|
uni.$u.openPage('detail2') |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg-main-r { |
||||
|
height: 60vh; |
||||
|
|
||||
|
:deep(.uni-navbar__header-btns) { |
||||
|
width: 200rpx !important; |
||||
|
} |
||||
|
|
||||
|
.icon-change { |
||||
|
width: 40rpx !important; |
||||
|
height: 40rpx !important; |
||||
|
margin-left: 0.5em; |
||||
|
opacity: .9 !important; |
||||
|
} |
||||
|
|
||||
|
.item-card { |
||||
|
padding: 1em; |
||||
|
border-radius: 6px; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.head { |
||||
|
height: 140rpx; |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
|
||||
|
.btn-create { |
||||
|
background-color: #fff; |
||||
|
height: 3em; |
||||
|
padding: 0 3em; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-radius: 1.5em; |
||||
|
|
||||
|
.icon-plus { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon-doctor { |
||||
|
position: relative; |
||||
|
z-index: 0; |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
transform: scale(1.1) translate3d(-50%, 24%, 0); |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
position: relative; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<uni-nav-bar left-icon="left" background-color="#fff" :border="false" title="患者详情" @clickRight="onClickRight"> |
||||
|
<template v-slot:right> |
||||
|
<view class="flex nav-right"> |
||||
|
切换至概览 <u-image class="icon-change" src="@/static/images/change-dark.png" mode="aspectFill"></u-image> |
||||
|
</view> |
||||
|
</template> |
||||
|
</uni-nav-bar> |
||||
|
|
||||
|
<view class="flex u-m-40 u-m-r-40 align-top content"> |
||||
|
<view class="flex-2 u-m-r-20 column"> |
||||
|
<uni-section type="line" title="患者信息" titleFontSize="16px"> |
||||
|
<template v-slot:right> |
||||
|
<view class="u-tips-color"> |
||||
|
<text class="u-m-r-20">{{ '藏寨' }}</text> |
||||
|
<text class="u-m-r-20">{{ '男' }}</text> |
||||
|
<text>{{ '24' }}</text> |
||||
|
</view> |
||||
|
</template> |
||||
|
</uni-section> |
||||
|
|
||||
|
<view class="item-card u-m-r-20 bg-white border-success"> |
||||
|
<view class="flex"> |
||||
|
<view class="flex-1"> |
||||
|
<view class=" font-bold flex-1 u-tips-color u-m-b-20"> |
||||
|
<text class="u-m-r-20">患者基本信息</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" /> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" /> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" /> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-icons type="right" color="#999" size="16" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-card u-m-r-20 u-m-t-30 bg-white border-primary"> |
||||
|
<view class="flex"> |
||||
|
<view class="flex-1"> |
||||
|
<view class=" font-bold flex-1 u-tips-color u-m-b-20"> |
||||
|
<text class="u-m-r-20">急救信息记录</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="primary" size="mini" /> |
||||
|
<u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="primary" size="mini" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-icons type="right" color="#999" size="16" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- right --> |
||||
|
<view class="flex-3"> |
||||
|
<uni-section type="line" title="患者基本信息" titleFontSize="16px"> </uni-section> |
||||
|
<DetailBase /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- float button --> |
||||
|
<FloatButton /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
function onClickRight() { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
:deep(.uni-navbar__header-btns) { |
||||
|
width: 200rpx !important; |
||||
|
} |
||||
|
|
||||
|
.icon-change { |
||||
|
width: 40rpx !important; |
||||
|
height: 40rpx !important; |
||||
|
margin-left: 0.5em; |
||||
|
opacity: .9 !important; |
||||
|
} |
||||
|
|
||||
|
.item-card { |
||||
|
padding: 1em 1em 1em 1.2em; |
||||
|
border-radius: 20rpx; |
||||
|
background-color: #fff; |
||||
|
border-left: 10rpx solid; |
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
height: 140rpx; |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
|
||||
|
.btn-create { |
||||
|
background-color: #fff; |
||||
|
height: 3em; |
||||
|
padding: 0 3em; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-radius: 1.5em; |
||||
|
|
||||
|
.icon-plus { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon-doctor { |
||||
|
position: relative; |
||||
|
z-index: 0; |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
transform: scale(1.1) translate3d(-50%, 24%, 0); |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
position: relative; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
</style> |
@ -1,29 +1,26 @@ |
|||||
<template> |
<template> |
||||
<view class="container"> |
<u-button type="primary" hover-class="button-hover" @click="send"> |
||||
|
发消息 |
||||
<view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view> |
</u-button> |
||||
<text class="intro">详见:</text> |
|
||||
<uni-link :href="href" :text="href"></uni-link> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script lang="ts" setup> |
||||
export default { |
import { onLoad } from '@dcloudio/uni-app' |
||||
data() { |
|
||||
return { |
|
||||
href: 'https://uniapp.dcloud.io/component/README?id=uniui' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
} |
onLoad(() => { |
||||
} |
|
||||
</script> |
document.addEventListener('UniAppJSBridgeReady', () => { |
||||
|
console.log(uni); |
||||
|
|
||||
|
}, false) |
||||
|
|
||||
<style> |
}) |
||||
.container { |
|
||||
padding: 20px; |
function send() { |
||||
font-size: 14px; |
|
||||
line-height: 24px; |
window.postMessage('hello', '*') |
||||
} |
// uni.postMessage({ |
||||
</style> |
// data: { action: "msg ok" } |
||||
|
// }) |
||||
|
} |
||||
|
</script> |
||||
|
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<view class="relative column align-center justify-center full-height bg-white"> |
||||
|
<u-button class="last-time" shape="circle" size="mini" :plain="true" @click="openPage('patient-list')"> |
||||
|
跳过 {{ leftTime }} |
||||
|
</u-button> |
||||
|
|
||||
|
<image class="loading-img" src="@/static/images/loading-img.png" mode="scaleToFill" /> |
||||
|
|
||||
|
<u-button class="bg-main u-m-t-50 btn-create" shape="circle" type="primary" @click="handleCreate">创建患者</u-button> |
||||
|
|
||||
|
<uni-popup ref="popupRef" background-color="transparent"> |
||||
|
<CreatePatient @on-scan="uploadImage" @on-cancel="onCancel" @on-confirm="onConfirm" /> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const leftTime = ref(6) |
||||
|
const popupRef = ref() |
||||
|
let timer: number | undefined |
||||
|
|
||||
|
function init() { |
||||
|
const localFirst = uni.getStorageSync(uni.$u.LOCAL_KEY.LOADED) |
||||
|
if (localFirst) { |
||||
|
openPage('patient-list') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
uni.setStorageSync(uni.$u.LOCAL_KEY.LOADED, 'true') |
||||
|
|
||||
|
timer = setInterval(() => { |
||||
|
if (leftTime.value === 0) { |
||||
|
clearInterval(timer) |
||||
|
timer = undefined |
||||
|
openPage('patient-list') |
||||
|
return |
||||
|
} |
||||
|
leftTime.value -= 1 |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
// 创建患者 |
||||
|
function handleCreate() { |
||||
|
if (timer) { |
||||
|
clearInterval(timer) |
||||
|
timer = undefined |
||||
|
} |
||||
|
popupRef.value.open() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function uploadImage() { |
||||
|
uni.chooseImage({ |
||||
|
count: 1, |
||||
|
sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有 |
||||
|
sourceType: ['album', 'camera'], //从相册选择 |
||||
|
success: function (res) { |
||||
|
console.log(JSON.stringify(res.tempFilePaths)); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onCancel() { |
||||
|
popupRef.value.close() |
||||
|
} |
||||
|
|
||||
|
function onConfirm() { |
||||
|
// TODO: 提交 |
||||
|
openPage('detail1') |
||||
|
|
||||
|
onCancel() |
||||
|
} |
||||
|
|
||||
|
// 打开页面 |
||||
|
function openPage(name) { |
||||
|
uni.$u.openPage(name, true) |
||||
|
} |
||||
|
|
||||
|
init() |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.last-time { |
||||
|
position: absolute; |
||||
|
right: 48rpx; |
||||
|
top: 68rpx; |
||||
|
} |
||||
|
|
||||
|
.loading-img { |
||||
|
width: 196*3rpx; |
||||
|
height: 215*3rpx; |
||||
|
margin-bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-create { |
||||
|
width: 560rpx; |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<view class="u-p-40"> |
||||
|
<SearchList /> |
||||
|
|
||||
|
<uni-section title="患者列表" type="line" class="uni-my-5" titleFontSize="16px"></uni-section> |
||||
|
<uni-grid :column="4" :highlight="true" :square="false" :show-border="false" @change="onClickItem"> |
||||
|
<uni-grid-item v-for="(item, index) in data" :index="index" :key="index" class="u-p-20"> |
||||
|
<view class="list-item flex"> |
||||
|
<view class="flex-1"> |
||||
|
<view class="text-title"> |
||||
|
<text>{{ item.name }}</text> |
||||
|
<text>{{ item.age }}</text> |
||||
|
<text>{{ item.sex }}</text> |
||||
|
</view> |
||||
|
<view class="text-summary"> |
||||
|
<u-tag :text="item.status" mode="light" size="mini" /> |
||||
|
<text class="time">{{ item.time }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view> |
||||
|
<uni-icons type="forward" size="12"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-grid-item> |
||||
|
</uni-grid> |
||||
|
|
||||
|
<image class="create-user" src="@/static/images/create-user.png" mode="scaleToFill" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import type { IPatient } from '@/store/modules/service'; |
||||
|
import { useServiceStore } from '@/store/modules/service'; |
||||
|
|
||||
|
const serviceStore = useServiceStore() |
||||
|
|
||||
|
const data: IPatient[] = [ |
||||
|
{ name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵4', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
{ name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' }, |
||||
|
] |
||||
|
|
||||
|
function onClickItem(event) { |
||||
|
const item = data[event.detail.index] |
||||
|
serviceStore.setCurrentPatient(item) |
||||
|
uni.$u.openPage('detail1') |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list-item { |
||||
|
width: 100%; |
||||
|
background-color: #fff; |
||||
|
border-radius: 6px; |
||||
|
padding: 1.5em 1em; |
||||
|
margin-right: 1.2em; |
||||
|
|
||||
|
.text-title { |
||||
|
font-size: 15px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 0.6em; |
||||
|
|
||||
|
text { |
||||
|
margin-right: 1em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-summary { |
||||
|
color: #888; |
||||
|
font-size: 13px; |
||||
|
|
||||
|
.time { |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.create-user { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
bottom: 10px; |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
} |
||||
|
</style> |
Before Width: | Height: | Size: 401 B |
Before Width: | Height: | Size: 470 B |
Before Width: | Height: | Size: 511 B |
Before Width: | Height: | Size: 476 B |
Before Width: | Height: | Size: 472 B |
Before Width: | Height: | Size: 545 B |
Before Width: | Height: | Size: 365 B |
Before Width: | Height: | Size: 587 B |
Before Width: | Height: | Size: 565 B |
@ -1,20 +0,0 @@ |
|||||
@font-face { |
|
||||
font-family: "customicons"; /* Project id 2878519 */ |
|
||||
src:url('/static/customicons.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.customicons { |
|
||||
font-family: "customicons" !important; |
|
||||
} |
|
||||
|
|
||||
.youxi:before { |
|
||||
content: "\e60e"; |
|
||||
} |
|
||||
|
|
||||
.wenjian:before { |
|
||||
content: "\e60f"; |
|
||||
} |
|
||||
|
|
||||
.zhuanfa:before { |
|
||||
content: "\e610"; |
|
||||
} |
|
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 9.3 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 9.3 KiB |
@ -0,0 +1,207 @@ |
|||||
|
!(function (e, n) { |
||||
|
'object' == typeof exports && 'undefined' != typeof module |
||||
|
? (module.exports = n()) |
||||
|
: 'function' == typeof define && define.amd |
||||
|
? define(n) |
||||
|
: ((e = e || self).uni = n()) |
||||
|
})(this, function () { |
||||
|
'use strict' |
||||
|
try { |
||||
|
var e = {} |
||||
|
Object.defineProperty(e, 'passive', { |
||||
|
get: function () { |
||||
|
!0 |
||||
|
}, |
||||
|
}), |
||||
|
window.addEventListener('test-passive', null, e) |
||||
|
} catch (e) {} |
||||
|
var n = Object.prototype.hasOwnProperty |
||||
|
function i(e, i) { |
||||
|
return n.call(e, i) |
||||
|
} |
||||
|
var t = [] |
||||
|
function r() { |
||||
|
return window.__dcloud_weex_postMessage || window.__dcloud_weex_ |
||||
|
} |
||||
|
var o = function (e, n) { |
||||
|
var i = { options: { timestamp: +new Date() }, name: e, arg: n } |
||||
|
if (r()) { |
||||
|
if ('postMessage' === e) { |
||||
|
var o = { data: [n] } |
||||
|
return window.__dcloud_weex_postMessage |
||||
|
? window.__dcloud_weex_postMessage(o) |
||||
|
: window.__dcloud_weex_.postMessage(JSON.stringify(o)) |
||||
|
} |
||||
|
var a = { type: 'WEB_INVOKE_APPSERVICE', args: { data: i, webviewIds: t } } |
||||
|
window.__dcloud_weex_postMessage |
||||
|
? window.__dcloud_weex_postMessageToService(a) |
||||
|
: window.__dcloud_weex_.postMessageToService(JSON.stringify(a)) |
||||
|
} |
||||
|
if (!window.plus) return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: i, pageId: '' }, '*') |
||||
|
if (0 === t.length) { |
||||
|
var d = plus.webview.currentWebview() |
||||
|
if (!d) throw new Error('plus.webview.currentWebview() is undefined') |
||||
|
var s = d.parent(), |
||||
|
w = '' |
||||
|
;(w = s ? s.id : d.id), t.push(w) |
||||
|
} |
||||
|
if (plus.webview.getWebviewById('__uniapp__service')) |
||||
|
plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: i, webviewIds: t } }, '__uniapp__service') |
||||
|
else { |
||||
|
var u = JSON.stringify(i) |
||||
|
plus.webview |
||||
|
.getLaunchWebview() |
||||
|
.evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(u, ',').concat(JSON.stringify(t), ');')) |
||||
|
} |
||||
|
}, |
||||
|
a = { |
||||
|
navigateTo: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, |
||||
|
n = e.url |
||||
|
o('navigateTo', { url: encodeURI(n) }) |
||||
|
}, |
||||
|
navigateBack: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, |
||||
|
n = e.delta |
||||
|
o('navigateBack', { delta: parseInt(n) || 1 }) |
||||
|
}, |
||||
|
switchTab: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, |
||||
|
n = e.url |
||||
|
o('switchTab', { url: encodeURI(n) }) |
||||
|
}, |
||||
|
reLaunch: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, |
||||
|
n = e.url |
||||
|
o('reLaunch', { url: encodeURI(n) }) |
||||
|
}, |
||||
|
redirectTo: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, |
||||
|
n = e.url |
||||
|
o('redirectTo', { url: encodeURI(n) }) |
||||
|
}, |
||||
|
getEnv: function (e) { |
||||
|
r() ? e({ nvue: !0 }) : window.plus ? e({ plus: !0 }) : e({ h5: !0 }) |
||||
|
}, |
||||
|
postMessage: function () { |
||||
|
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {} |
||||
|
o('postMessage', e.data || {}) |
||||
|
}, |
||||
|
}, |
||||
|
d = /uni-app/i.test(navigator.userAgent), |
||||
|
s = /Html5Plus/i.test(navigator.userAgent), |
||||
|
w = /complete|loaded|interactive/ |
||||
|
var u = window.my && navigator.userAgent.indexOf(['t', 'n', 'e', 'i', 'l', 'C', 'y', 'a', 'p', 'i', 'l', 'A'].reverse().join('')) > -1 |
||||
|
var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent) |
||||
|
var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent) |
||||
|
var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent) |
||||
|
var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent) |
||||
|
var p = window.qa && /quickapp/i.test(navigator.userAgent) |
||||
|
var f = window.ks && window.ks.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent) |
||||
|
var l = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent) |
||||
|
var _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent) |
||||
|
var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent) |
||||
|
for ( |
||||
|
var h, |
||||
|
P = function () { |
||||
|
;(window.UniAppJSBridge = !0), document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', { bubbles: !0, cancelable: !0 })) |
||||
|
}, |
||||
|
b = [ |
||||
|
function (e) { |
||||
|
if (d || s) |
||||
|
return ( |
||||
|
window.__dcloud_weex_postMessage || window.__dcloud_weex_ |
||||
|
? document.addEventListener('DOMContentLoaded', e) |
||||
|
: window.plus && w.test(document.readyState) |
||||
|
? setTimeout(e, 0) |
||||
|
: document.addEventListener('plusready', e), |
||||
|
a |
||||
|
) |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (m) |
||||
|
return ( |
||||
|
window.WeixinJSBridge && window.WeixinJSBridge.invoke |
||||
|
? setTimeout(e, 0) |
||||
|
: document.addEventListener('WeixinJSBridgeReady', e), |
||||
|
window.wx.miniProgram |
||||
|
) |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (v) |
||||
|
return ( |
||||
|
window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QQJSBridgeReady', e), |
||||
|
window.qq.miniProgram |
||||
|
) |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (u) { |
||||
|
document.addEventListener('DOMContentLoaded', e) |
||||
|
var n = window.my |
||||
|
return { |
||||
|
navigateTo: n.navigateTo, |
||||
|
navigateBack: n.navigateBack, |
||||
|
switchTab: n.switchTab, |
||||
|
reLaunch: n.reLaunch, |
||||
|
redirectTo: n.redirectTo, |
||||
|
postMessage: n.postMessage, |
||||
|
getEnv: n.getEnv, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (g) return document.addEventListener('DOMContentLoaded', e), window.swan.webView |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (c) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (p) { |
||||
|
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QaJSBridgeReady', e) |
||||
|
var n = window.qa |
||||
|
return { |
||||
|
navigateTo: n.navigateTo, |
||||
|
navigateBack: n.navigateBack, |
||||
|
switchTab: n.switchTab, |
||||
|
reLaunch: n.reLaunch, |
||||
|
redirectTo: n.redirectTo, |
||||
|
postMessage: n.postMessage, |
||||
|
getEnv: n.getEnv, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (f) |
||||
|
return ( |
||||
|
window.WeixinJSBridge && window.WeixinJSBridge.invoke |
||||
|
? setTimeout(e, 0) |
||||
|
: document.addEventListener('WeixinJSBridgeReady', e), |
||||
|
window.ks.miniProgram |
||||
|
) |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (l) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (_) |
||||
|
return ( |
||||
|
window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) : document.addEventListener('JDJSBridgeReady', e), |
||||
|
window.jd.miniProgram |
||||
|
) |
||||
|
}, |
||||
|
function (e) { |
||||
|
if (E) return window.xhs.miniProgram |
||||
|
}, |
||||
|
function (e) { |
||||
|
return document.addEventListener('DOMContentLoaded', e), a |
||||
|
}, |
||||
|
], |
||||
|
y = 0; |
||||
|
y < b.length && !(h = b[y](P)); |
||||
|
y++ |
||||
|
); |
||||
|
h || (h = {}) |
||||
|
var B = 'undefined' != typeof uni ? uni : {} |
||||
|
if (!B.navigateTo) for (var S in h) i(h, S) && (B[S] = h[S]) |
||||
|
return (B.webView = h), B |
||||
|
}) |
@ -1,167 +1,172 @@ |
|||||
<template> |
<template> |
||||
<view class="uni-section"> |
<view class="uni-section"> |
||||
<view class="uni-section-header" @click="onClick"> |
<view class="uni-section-header" @click="onClick"> |
||||
<view class="uni-section-header__decoration" v-if="type" :class="type" /> |
<view class="uni-section-header__decoration" v-if="type" :class="type" /> |
||||
<slot v-else name="decoration"></slot> |
<slot v-else name="decoration"></slot> |
||||
|
|
||||
<view class="uni-section-header__content"> |
<view class="uni-section-header__content"> |
||||
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text> |
<text :style="{ 'font-size': titleFontSize, 'color': titleColor }" class="uni-section__content-title" |
||||
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text> |
:class="{ 'distraction': !subTitle }">{{ title }}</text> |
||||
</view> |
<text v-if="subTitle" :style="{ 'font-size': subTitleFontSize, 'color': subTitleColor }" |
||||
|
class="uni-section-header__content-sub">{{ subTitle }}</text> |
||||
<view class="uni-section-header__slot-right"> |
</view> |
||||
<slot name="right"></slot> |
|
||||
</view> |
<view class="uni-section-header__slot-right"> |
||||
</view> |
<slot name="right"></slot> |
||||
|
</view> |
||||
<view class="uni-section-content" :style="{padding: _padding}"> |
</view> |
||||
<slot /> |
|
||||
</view> |
<view class="uni-section-content" :style="{ padding: _padding }"> |
||||
</view> |
<slot /> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
/** |
/** |
||||
* Section 标题栏 |
* Section 标题栏 |
||||
* @description 标题栏 |
* @description 标题栏 |
||||
* @property {String} type = [line|circle|square] 标题装饰类型 |
* @property {String} type = [line|circle|square] 标题装饰类型 |
||||
* @value line 竖线 |
* @value line 竖线 |
||||
* @value circle 圆形 |
* @value circle 圆形 |
||||
* @value square 正方形 |
* @value square 正方形 |
||||
* @property {String} title 主标题 |
* @property {String} title 主标题 |
||||
* @property {String} titleFontSize 主标题字体大小 |
* @property {String} titleFontSize 主标题字体大小 |
||||
* @property {String} titleColor 主标题字体颜色 |
* @property {String} titleColor 主标题字体颜色 |
||||
* @property {String} subTitle 副标题 |
* @property {String} subTitle 副标题 |
||||
* @property {String} subTitleFontSize 副标题字体大小 |
* @property {String} subTitleFontSize 副标题字体大小 |
||||
* @property {String} subTitleColor 副标题字体颜色 |
* @property {String} subTitleColor 副标题字体颜色 |
||||
* @property {String} padding 默认插槽 padding |
* @property {String} padding 默认插槽 padding |
||||
*/ |
*/ |
||||
|
|
||||
export default { |
export default { |
||||
name: 'UniSection', |
name: 'UniSection', |
||||
emits:['click'], |
emits: ['click'], |
||||
props: { |
props: { |
||||
type: { |
type: { |
||||
type: String, |
type: String, |
||||
default: '' |
default: '' |
||||
}, |
}, |
||||
title: { |
title: { |
||||
type: String, |
type: String, |
||||
required: true, |
required: true, |
||||
default: '' |
default: '' |
||||
}, |
}, |
||||
titleFontSize: { |
titleFontSize: { |
||||
type: String, |
type: String, |
||||
default: '14px' |
default: '14px' |
||||
}, |
}, |
||||
titleColor:{ |
titleColor: { |
||||
type: String, |
type: String, |
||||
default: '#333' |
default: '#333' |
||||
}, |
|
||||
subTitle: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
subTitleFontSize: { |
|
||||
type: String, |
|
||||
default: '12px' |
|
||||
}, |
|
||||
subTitleColor: { |
|
||||
type: String, |
|
||||
default: '#999' |
|
||||
}, |
|
||||
padding: { |
|
||||
type: [Boolean, String], |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
computed:{ |
|
||||
_padding(){ |
|
||||
if(typeof this.padding === 'string'){ |
|
||||
return this.padding |
|
||||
} |
|
||||
|
|
||||
return this.padding?'10px':'' |
|
||||
} |
|
||||
}, |
}, |
||||
watch: { |
subTitle: { |
||||
title(newVal) { |
type: String, |
||||
if (uni.report && newVal !== '') { |
default: '' |
||||
uni.report('title', newVal) |
}, |
||||
} |
subTitleFontSize: { |
||||
} |
type: String, |
||||
}, |
default: '12px' |
||||
methods: { |
}, |
||||
onClick() { |
subTitleColor: { |
||||
this.$emit('click') |
type: String, |
||||
} |
default: '#999' |
||||
} |
}, |
||||
} |
padding: { |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
_padding() { |
||||
|
if (typeof this.padding === 'string') { |
||||
|
return this.padding |
||||
|
} |
||||
|
|
||||
|
return this.padding ? '10px' : '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
title(newVal) { |
||||
|
if (uni.report && newVal !== '') { |
||||
|
uni.report('title', newVal) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onClick() { |
||||
|
this.$emit('click') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
<style lang="scss" > |
<style lang="scss" > |
||||
$uni-primary: #2979ff !default; |
$uni-primary: linear-gradient(180deg, #7bc0ff, #4d88ff); |
||||
|
|
||||
|
.uni-section { |
||||
|
background-color: transparent; |
||||
|
|
||||
|
.uni-section-header { |
||||
|
position: relative; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
padding: 12px 10px; |
||||
|
font-weight: normal; |
||||
|
|
||||
|
&__decoration { |
||||
|
margin-right: 6px; |
||||
|
background: $uni-primary; |
||||
|
|
||||
|
&.line { |
||||
|
width: 6px; |
||||
|
height: 14px; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
.uni-section { |
&.circle { |
||||
background-color: #fff; |
width: 8px; |
||||
.uni-section-header { |
height: 8px; |
||||
position: relative; |
border-top-right-radius: 50px; |
||||
|
border-top-left-radius: 50px; |
||||
|
border-bottom-left-radius: 50px; |
||||
|
border-bottom-right-radius: 50px; |
||||
|
} |
||||
|
|
||||
|
&.square { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__content { |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
display: flex; |
display: flex; |
||||
/* #endif */ |
/* #endif */ |
||||
flex-direction: row; |
flex-direction: column; |
||||
align-items: center; |
flex: 1; |
||||
padding: 12px 10px; |
color: #333; |
||||
font-weight: normal; |
|
||||
|
|
||||
&__decoration{ |
|
||||
margin-right: 6px; |
|
||||
background-color: $uni-primary; |
|
||||
&.line { |
|
||||
width: 4px; |
|
||||
height: 12px; |
|
||||
border-radius: 10px; |
|
||||
} |
|
||||
|
|
||||
&.circle { |
|
||||
width: 8px; |
|
||||
height: 8px; |
|
||||
border-top-right-radius: 50px; |
|
||||
border-top-left-radius: 50px; |
|
||||
border-bottom-left-radius: 50px; |
|
||||
border-bottom-right-radius: 50px; |
|
||||
} |
|
||||
|
|
||||
&.square { |
|
||||
width: 8px; |
|
||||
height: 8px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&__content { |
.distraction { |
||||
/* #ifndef APP-NVUE */ |
flex-direction: row; |
||||
display: flex; |
align-items: center; |
||||
/* #endif */ |
|
||||
flex-direction: column; |
|
||||
flex: 1; |
|
||||
color: #333; |
|
||||
|
|
||||
.distraction { |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
} |
|
||||
&-sub { |
|
||||
margin-top: 2px; |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
&__slot-right{ |
&-sub { |
||||
font-size: 14px; |
margin-top: 2px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.uni-section-content{ |
&__slot-right { |
||||
font-size: 14px; |
font-size: 14px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
.uni-section-content { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* 打开页面 |
||||
|
* @param {string} pageName 页面的名称 同文件名 文件夹名 |
||||
|
* @param {boolean} isRedirect 是否是重定向 替换模式 |
||||
|
* @param {string} query 查询参数 不带? 如 name=wally&age=17 |
||||
|
*/ |
||||
|
export function openPage(pageName: string, isRedirect = false, query?: string) { |
||||
|
const path = query ? `/pages/${pageName}/${pageName}?${query}` : `/pages/${pageName}/${pageName}` |
||||
|
if (isRedirect) { |
||||
|
uni.redirectTo({ url: path }) |
||||
|
} else { |
||||
|
uni.navigateTo({ url: path }) |
||||
|
} |
||||
|
} |