14 changed files with 758 additions and 32 deletions
@ -0,0 +1,34 @@ |
|||
/** |
|||
* 显示模态框 |
|||
* @param {string} msg |
|||
* @param {boolean} showCancel |
|||
* @param {string} confirmText |
|||
*/ |
|||
export const showModal = (msg, showCancel = false, confirmText = '知道了') => |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: msg, |
|||
showCancel, |
|||
confirmText, |
|||
confirmColor: '#1890ff', |
|||
}); |
|||
|
|||
/** |
|||
* 显示toast |
|||
* @param {string} msg |
|||
*/ |
|||
export const showToast = msg => |
|||
uni.showToast({ |
|||
title: msg, |
|||
icon: 'none', |
|||
duration: 3000, |
|||
}); |
|||
|
|||
// 显示加载动画
|
|||
export const showLoading = (msg = '努力加载中...') => uni.showLoading({ title: msg }); |
|||
|
|||
// 隐藏加载动画
|
|||
export const hideLoading = () => |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
}, 1000); |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<view> |
|||
<view class="cu-timeline"> |
|||
<view class="cu-time">昨天</view> |
|||
<view class="cu-item cur cuIcon-noticefill"> |
|||
<view class="content bg-green shadow-blur"> |
|||
<text>22:22</text>【广州市】快件已到达地球 |
|||
</view> |
|||
</view> |
|||
<view class="cu-item text-red cuIcon-attentionforbidfill"> |
|||
<view class="content bg-red shadow-blur">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cu-timeline"> |
|||
<view class="cu-time">06-17</view> |
|||
<view class="cu-item"> |
|||
<view class="content"> |
|||
<text>01:30</text>【喵星】 MX-12138 已揽收，准备发往银河系 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }" |
|||
class="segmented-control"> |
|||
<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]" |
|||
:key="index" :style="{ |
|||
backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' |
|||
}" |
|||
class="segmented-control__item" @click="_onClick(index)"> |
|||
<text :style="{color: |
|||
index === currentIndex |
|||
? styleType === 'text' |
|||
? activeColor |
|||
: '#fff' |
|||
: styleType === 'text' |
|||
? '#000' |
|||
: activeColor}" |
|||
class="segmented-control__text">{{ item }}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UniSegmentedControl', |
|||
props: { |
|||
current: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
values: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
activeColor: { |
|||
type: String, |
|||
default: '#007aff' |
|||
}, |
|||
styleType: { |
|||
type: String, |
|||
default: 'button' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0 |
|||
} |
|||
}, |
|||
watch: { |
|||
current(val) { |
|||
if (val !== this.currentIndex) { |
|||
this.currentIndex = val |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.currentIndex = this.current |
|||
}, |
|||
methods: { |
|||
_onClick(index) { |
|||
if (this.currentIndex !== index) { |
|||
this.currentIndex = index |
|||
this.$emit('clickItem', {currentIndex:index}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/uni.scss'; |
|||
|
|||
.segmented-control { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
height: 36px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.segmented-control__item { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
position: relative; |
|||
flex: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.segmented-control__item--button { |
|||
border-style: solid; |
|||
border-top-width: 1px; |
|||
border-bottom-width: 1px; |
|||
border-right-width: 1px; |
|||
border-left-width: 0; |
|||
} |
|||
|
|||
.segmented-control__item--button--first { |
|||
border-left-width: 1px; |
|||
border-top-left-radius: 5px; |
|||
border-bottom-left-radius: 5px; |
|||
} |
|||
|
|||
.segmented-control__item--button--last { |
|||
border-top-right-radius: 5px; |
|||
border-bottom-right-radius: 5px; |
|||
} |
|||
|
|||
.segmented-control__item--text { |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 3px; |
|||
} |
|||
|
|||
.segmented-control__text { |
|||
font-size: 16px; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<view> |
|||
<form class="padding-lr cu-form-group flex-direction"> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>出发时间</view> |
|||
<date-selector @change="getStartData" /> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>抵达时间</view> |
|||
<date-selector @change="getEndData" /> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-top"> |
|||
<view class="text-xl padding-tb-sm">出行交通方式（必选）</view> |
|||
<radio-group class="block" @change="RadioChange"> |
|||
<view class="cu-list menu text-left"> |
|||
<view class="cu-item" v-for="(transport,index) in transports" :key="index"> |
|||
<label class="flex justify-between align-center"> |
|||
<radio class="round margin-right-xs" :checked="index === current" :value="transport.value"></radio> |
|||
<view class="flex-sub" style="font-size: 34rpx;">{{ transport.name }}</view> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
</radio-group> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>乘坐航班车次或车牌号码及座位号（没有填无）</view> |
|||
<input placeholder="请输入" name="input" type="text" v-model="carNumber" /> |
|||
</view> |
|||
</form> |
|||
<view class="margin flex flex-wrap"> |
|||
<view @click="agree = !agree" class="iconfont agree-box" :class="[agree ? 'text-blue icon-check-square': 'text-gray icon-border']"></view> |
|||
<view class="text-df text-black flex-sub agree-text"> |
|||
以上信息是我本人填写，本人对信息的真实性和完整性负责。 |
|||
</view> |
|||
</view> |
|||
<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="addStroke">确认提交</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { showToast } from 'common/script/util'; |
|||
import UniCalendar from 'components/uni-calendar/uni-calendar.vue'; |
|||
import DateSelector from './components/date-selector.vue'; |
|||
|
|||
export default { |
|||
components: {UniCalendar,DateSelector}, |
|||
data() { |
|||
return { |
|||
transports: [ |
|||
{ |
|||
value: '0', |
|||
name: '铁路', |
|||
}, |
|||
{ |
|||
value: '1', |
|||
name: '飞机', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
name: '客运车辆', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
name: '自驾', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
name: '船', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
name: '其他', |
|||
} |
|||
], |
|||
carNumber: '', |
|||
current: 0, |
|||
agree: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
RadioChange: function(evt) { |
|||
for (let i = 0; i < this.transports.length; i++) { |
|||
if (this.transports[i].value === evt.target.value) { |
|||
this.current = i; |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 获取出发时间 |
|||
* @param {string} start 开始时间 |
|||
* @param {string} end 截止时间 |
|||
*/ |
|||
getData(start, end) { |
|||
console.log('出发时间 start, end: ', start, end); |
|||
}, |
|||
|
|||
/** |
|||
* 获取抵达时间 |
|||
* @param {string} start 开始时间 |
|||
* @param {string} end 截止时间 |
|||
*/ |
|||
getEndData(start, end) { |
|||
console.log('抵达时间 start, end: ', start, end); |
|||
}, |
|||
|
|||
/** |
|||
* 提交基本信息 |
|||
*/ |
|||
addStroke() { |
|||
if (!this.transports) { |
|||
showToast('请选择身份'); |
|||
return; |
|||
} |
|||
if (!this.carNumber) { |
|||
showToast('请输入学号'); |
|||
return; |
|||
} |
|||
if (!this.agree) { |
|||
showToast('请确定是否为本人填写'); |
|||
return; |
|||
} |
|||
console.log('信息提交'); |
|||
uni.reLaunch({ |
|||
url: `/pages/index/index`, |
|||
}); |
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.agree-box{ |
|||
width: 70rpx; |
|||
} |
|||
.agree-text{ |
|||
line-height: 60rpx; |
|||
} |
|||
.primary-btn{ |
|||
border-radius: 15rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<view> |
|||
<view @tap="$refs.calendar.open()" hover-class="cc-active"> |
|||
<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ date }}</text></view> |
|||
</view> |
|||
<uni-calendar |
|||
:insert="false" |
|||
:range="true" |
|||
:show-month="true" |
|||
@confirm="handleChange" |
|||
ref="calendar" |
|||
/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DateSelector', |
|||
data() { |
|||
const start = this.$moment().format('YYYY-MM-DD'); |
|||
const end = this.$moment().format('YYYY-MM-DD'); |
|||
return { |
|||
start, |
|||
end, |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
date() { |
|||
const { start, end } = this; |
|||
return start === end ? start : `${start} - ${end}`; |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 日历确认选择了时间段 |
|||
* @param {object} value 日历返回对象 |
|||
*/ |
|||
handleChange(value) { |
|||
const { before, after } = value.range; |
|||
this.start = before; |
|||
this.end = after; |
|||
this.menu = ''; |
|||
this.$emit('change', before, after); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.timer{ |
|||
font-size: 34rpx!important; |
|||
color: $gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<view> |
|||
<form class="padding-lr cu-form-group flex-direction"> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>当前所在地区</view> |
|||
<input placeholder="请输入当前所在地区" name="input" type="text" v-model="area" /> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>当前所在城市</view> |
|||
<input placeholder="请输入当前所在城市" name="input" type="text" v-model="city" /> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-top"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>当前状态</view> |
|||
<radio-group class="block" @change="StateChange"> |
|||
<view class="cu-list menu text-left"> |
|||
<view class="cu-item" v-for="(state,index) in status" :key="index"> |
|||
<label class="flex justify-between align-center"> |
|||
<radio class="round margin-right-xs" :checked="index === current" :value="state.value"></radio> |
|||
<view class="flex-sub" style="font-size: 34rpx;">{{ state.name }}</view> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
</radio-group> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm">就诊医院（若无填无）</view> |
|||
<input placeholder="请输入就诊医院" name="input" type="text" v-model="hospital" /> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-top"> |
|||
<view class="title padding-bottom-sm">最近14天是否有武汉居住史、旅游史或武汉亲戚来访</view> |
|||
<radio-group class="block" @change="TourChange"> |
|||
<view class="flex"> |
|||
<view class="flex-sub margin-tb-sm" v-for="(tour,index) in tours" :key="index"> |
|||
<label class="flex justify-between align-center"> |
|||
<radio class="round margin-right-xs" :checked="index === tourCurrent" :value="tour.value"></radio> |
|||
<text class="flex-sub" style="font-size: 34rpx;">{{ tour.name }}</text> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
</radio-group> |
|||
</view> |
|||
|
|||
<view class="cu-form-group flex flex-direction padding-top"> |
|||
<view class="title padding-bottom-sm">最近14天是否有新冠肺炎患者或疑似患者接触史</view> |
|||
<radio-group class="block" @change="TouchChange"> |
|||
<view class="flex"> |
|||
<view class="flex-sub margin-tb-sm" v-for="(touch,index) in touches" :key="index"> |
|||
<label class="flex justify-between align-center"> |
|||
<radio class="round margin-right-xs" :checked="index === touchCurrent" :value="touch.value"></radio> |
|||
<text class="flex-sub" style="font-size: 34rpx;">{{ touch.name }}</text> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
</radio-group> |
|||
</view> |
|||
<view class="cu-form-group flex flex-direction padding-tb"> |
|||
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>当前体温（℃）</view> |
|||
<input placeholder="请输入当前真实体温" name="input" type="number" v-model="temperature" /> |
|||
</view> |
|||
</form> |
|||
|
|||
<view class="margin flex flex-wrap"> |
|||
<view @click="agree = !agree" class="iconfont agree-box" :class="[agree ? 'text-blue icon-check-square': 'text-gray icon-border']"></view> |
|||
<view class="text-df text-black flex-sub agree-text"> |
|||
以上信息是我本人填写，本人对信息的真实性和完整性负责。 |
|||
</view> |
|||
</view> |
|||
<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="addStroke">确认提交</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { showToast } from 'common/script/util'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
area: '', |
|||
city: '', |
|||
status: [ |
|||
{ |
|||
value: '0', |
|||
name: '正常', |
|||
}, |
|||
{ |
|||
value: '1', |
|||
name: '发烧（377.3度以上）', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
name: '咳嗽', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
name: '咽喉疼痛', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
name: '流鼻涕', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
name: '头痛', |
|||
}, |
|||
{ |
|||
value: '6', |
|||
name: '其他', |
|||
} |
|||
], |
|||
hospital: '', |
|||
tours: [ |
|||
{ |
|||
value: 1, |
|||
name: '是' |
|||
}, |
|||
{ |
|||
value: 0, |
|||
name: '否' |
|||
} |
|||
], |
|||
touches: [ |
|||
{ |
|||
value: 1, |
|||
name: '是' |
|||
}, |
|||
{ |
|||
value: 0, |
|||
name: '否' |
|||
} |
|||
], |
|||
temperature: '', |
|||
current: 0, |
|||
tourCurrent: 0, |
|||
touchCurrent: 0, |
|||
agree: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 状态 |
|||
StateChange: function(evt) { |
|||
for (let i = 0; i < this.status.length; i++) { |
|||
if (this.status[i].value === evt.target.value) { |
|||
this.current = i; |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 旅游 |
|||
TourChange: function(evt) { |
|||
for (let i = 0; i < this.tours.length; i++) { |
|||
if (this.tours[i].value === evt.target.value) { |
|||
this.tourCurrent = i; |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 接触 |
|||
TouchChange: function(evt) { |
|||
for (let i = 0; i < this.touches.length; i++) { |
|||
if (this.touches[i].value === evt.target.value) { |
|||
this.touchCurrent = i; |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 提交基本信息 |
|||
*/ |
|||
addStroke() { |
|||
if (!this.area) { |
|||
showToast('请输入当前所在地区'); |
|||
return; |
|||
} |
|||
if (!this.city) { |
|||
showToast('请输入当前所在城市'); |
|||
return; |
|||
} |
|||
if (!this.status) { |
|||
showToast('请选择状态'); |
|||
return; |
|||
} |
|||
if (!this.temperature) { |
|||
showToast('请输入当前体温'); |
|||
return; |
|||
} |
|||
if (!this.agree) { |
|||
showToast('请确定是否为本人填写'); |
|||
return; |
|||
} |
|||
console.log('信息提交'); |
|||
uni.reLaunch({ |
|||
url: `/pages/index/index`, |
|||
}); |
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.agree-box{ |
|||
width: 70rpx; |
|||
} |
|||
.agree-text{ |
|||
line-height: 60rpx; |
|||
} |
|||
.primary-btn{ |
|||
border-radius: 15rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<!-- 头部菜单 --> |
|||
<view class="nav-wrap slide-bottom"> |
|||
<uni-segmented-control |
|||
:active-color="activeColor" |
|||
:current="current" |
|||
:values="values" |
|||
@clickItem="handleClickNav" |
|||
class="nav" |
|||
/> |
|||
</view> |
|||
<!-- 内容区 --> |
|||
<view class="content"> |
|||
<!-- 今日打卡地图显示 --> |
|||
<history-map v-if="current === 0" /> |
|||
<!-- 打卡记录 时间轴显示 --> |
|||
<timeline v-else /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
values: ['今日打卡', '打卡记录'], |
|||
activeColor: '#0897C7', |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClickNav({ currentIndex }) { |
|||
this.current = currentIndex; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding-top: 88rpx; |
|||
min-height: 100vh; |
|||
background-color: $white; |
|||
|
|||
.nav-wrap { |
|||
z-index: 999; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
background-color: $white; |
|||
.nav { |
|||
width: 540rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in new issue