40 changed files with 1829 additions and 4149 deletions
File diff suppressed because it is too large
@ -1,332 +0,0 @@ |
|||
<template> |
|||
<view style="border: 1px solid #e5e5e5"> |
|||
<view v-for="(item, index) in infoList" :key="index"> |
|||
<template v-for="(colItem, itemIndex) in item"> |
|||
<view v-if="colItem.showType === 1" :key="itemIndex" class="flex flex-col text-sm ml-4 border-b"> |
|||
<view class="my-3 flex justify-between items-center" @click="changeShow(index, itemIndex)"> |
|||
{{ colItem.name }} |
|||
<u-icon name="arrow-up" class="mx-2" color="#909399" v-if="colItem.show"></u-icon> |
|||
<u-icon name="arrow-down" class="mx-2" color="#909399" v-else></u-icon> |
|||
</view> |
|||
<view v-if="colItem.show"> |
|||
<!-- 单选 --> |
|||
<view v-if="colItem.type === 1"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-wrap"> |
|||
<label |
|||
class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mr-4 mb-3" |
|||
v-for="(item, index) in colItem.radioList" |
|||
:key="index" |
|||
> |
|||
<radio class="radio-style" :value="item" /> |
|||
<view>{{ item }}</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 多选 --> |
|||
<view v-if="colItem.type === 5"> |
|||
<u-checkbox-group> |
|||
<u-checkbox |
|||
class="mb-3" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
v-model="checkboxItem.checked" |
|||
v-for="(checkboxItem, checkboxIndex) in colItem.checkList" |
|||
:key="checkboxIndex" |
|||
:name="checkboxItem.name" |
|||
>{{ checkboxItem.name }} |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
<!-- 吸烟 --> |
|||
<view v-if="colItem.type === 10"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经戒烟，已戒 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="2" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
是，烟龄 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value2" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年，每天 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
:border="true" |
|||
v-model="colItem.value3" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/>只 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 饮酒 --> |
|||
<view v-if="colItem.type === 11"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经戒酒，已戒 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 饮茶 --> |
|||
<view v-if="colItem.type === 12"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经不喝，已不喝 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="2" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
是，已持续 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value2" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else :key="itemIndex" class="flex justify-between items-center text-sm border-b"> |
|||
<view class="ml-4 my-3">{{ colItem.name }}</view> |
|||
<!-- 日期: 年月日 --> |
|||
<view v-if="colItem.type === 2"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
v-model="colItem.show" |
|||
mode="time" |
|||
:params="paramsDay" |
|||
></u-picker> |
|||
</view> |
|||
<!-- 数字输入框 --> |
|||
<view v-if="colItem.type === 3" class="pr-7"> |
|||
<u-input placeholder="请输入" v-model="colItem.value" type="number" input-align="right" /> |
|||
</view> |
|||
<!-- 单列下拉选框 --> |
|||
<view v-if="colItem.type === 4"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-select |
|||
v-model="colItem.show" |
|||
mode="single-column" |
|||
:list="colItem.radioList" |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
:default-value="[14]" |
|||
></u-select> |
|||
</view> |
|||
<!-- 日期: 年月日时 --> |
|||
<view v-if="colItem.type === 6"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
v-model="colItem.show" |
|||
mode="time" |
|||
:params="paramsHour" |
|||
></u-picker> |
|||
</view> |
|||
<!-- 多列下拉选框 --> |
|||
<view v-if="colItem.type === 7"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-select |
|||
v-model="colItem.show" |
|||
mode="mutil-column" |
|||
:list="colItem.radioList" |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
:default-value="[70, 100]" |
|||
title="低血压/高血压" |
|||
></u-select> |
|||
</view> |
|||
<!-- input 文本输入框 --> |
|||
<view v-if="colItem.type === 8" class="pr-7"> |
|||
<u-input placeholder="请输入" v-model="colItem.value" input-align="right" /> |
|||
</view> |
|||
<!-- 地区选择器 --> |
|||
<view v-if="colItem.type === 9"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
mode="region" |
|||
v-model="colItem.show" |
|||
:params="paramsArea" |
|||
></u-picker> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="w-full h-2 bg-gray-100" v-if="index !== infoList.length - 1"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { infoList } from './config'; |
|||
|
|||
export default { |
|||
name: 'Info', |
|||
data() { |
|||
return { |
|||
headStyle: { |
|||
backgroundColor: '#fff', |
|||
height: '46px', |
|||
paddingLeft: '1rem', |
|||
fontSize: '0.875rem', |
|||
}, |
|||
bodyStyle: { paddingLeft: '1rem' }, |
|||
infoList, |
|||
paramsDay: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: false, |
|||
minute: false, |
|||
second: false, |
|||
}, |
|||
paramsHour: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: false, |
|||
second: false, |
|||
}, |
|||
paramsArea: { |
|||
province: true, |
|||
city: true, |
|||
area: false, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
changeShow(index, itemIndex) { |
|||
console.log('index, itemIndex: ', index, itemIndex); |
|||
this.infoList[index][itemIndex].show = !this.infoList[index][itemIndex].show; |
|||
}, |
|||
|
|||
change(e, index, itemIndex, type) { |
|||
console.log('e, index, itemIndex, type: ', e, index, itemIndex, type); |
|||
if (type === 1) { |
|||
// 单选 |
|||
this.infoList[index][itemIndex].value = e.target.value; |
|||
} else if (type === 2) { |
|||
// 日期选择器(年月日) |
|||
const value = e.year + '-' + e.month + '-' + e.day; |
|||
this.infoList[index][itemIndex].value = value; |
|||
} else if (type === 4) { |
|||
// 单列下拉选框 |
|||
this.infoList[index][itemIndex].value = e[0].value; |
|||
} else if (type === 5) { |
|||
// 多选 |
|||
let checkerList = this.infoList[index][itemIndex].value; |
|||
if (checkerList.length) { |
|||
const i = checkerList.findIndex(item => item === e.name); |
|||
if (i < 0) { |
|||
checkerList.push(e.name); |
|||
} else { |
|||
checkerList.splice(i, 1); |
|||
} |
|||
} else { |
|||
checkerList.push(e.name); |
|||
} |
|||
this.infoList[index][itemIndex].value = checkerList; |
|||
} else if (type === 6) { |
|||
// 日期选择器(年月日时) |
|||
const value = e.year + '-' + e.month + '-' + e.day + '-' + e.hour; |
|||
this.infoList[index][itemIndex].value = value; |
|||
} else if (type === 7) { |
|||
// 多列下拉选框 |
|||
this.infoList[index][itemIndex].value = e[0].value + '/' + e[1].value; |
|||
} else if (type === 9) { |
|||
// 地区选择 |
|||
this.infoList[index][itemIndex].value = e.province.label + e.city.label; |
|||
} else { |
|||
this.infoList[index][itemIndex].value = e; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
|
|||
<style> |
|||
.radio-style >>> .uni-radio-input { |
|||
width: 1rem !important; |
|||
height: 1rem !important; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1014 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 59 KiB |
@ -1,127 +0,0 @@ |
|||
<template> |
|||
<!-- 时间间隔栏 --> |
|||
<!-- <Barrier /> --> |
|||
|
|||
<scroll-view |
|||
style="height: 100%" |
|||
:lower-threshold="100" |
|||
:scroll-y="true" |
|||
:upper-threshold="100" |
|||
:scroll-into-view="scrollToTaskId" |
|||
@scroll="scroll" |
|||
@scrolltolower="handleScrollBottom" |
|||
@scrolltoupper="handleScrollTop" |
|||
id="scroll" |
|||
> |
|||
<!-- 时间轴 --> |
|||
<!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">已到顶部</u-divider> --> |
|||
<TimeBox /> |
|||
<!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">我也是有底线的</u-divider> --> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import Barrier from './component/Barrier.vue'; |
|||
import { mapState, mapMutations, mapGetters } from 'vuex'; |
|||
import { setPlaceholderTasks } from '@/utils/task'; |
|||
import TimeBox from './component/TimeBox.vue'; |
|||
|
|||
export default { |
|||
name: 'TimeLine', |
|||
components: { TimeBox }, |
|||
|
|||
data() { |
|||
return { top: 0 }; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('role', ['visibleRoles']), |
|||
...mapState('task', ['scrollTop', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'scrollToTaskId']), |
|||
...mapGetters('task', ['timeGranularity']), |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks', 'setScrollToTaskId']), |
|||
|
|||
// 滚动 |
|||
scroll(e) { |
|||
console.log('e: ', e); |
|||
this.top = e.detail.scrollTop; |
|||
this.setShrink(this.top > this.scrollTop); |
|||
this.setScrollTop(this.top); |
|||
}, |
|||
|
|||
// 滚动到顶部 |
|||
async handleScrollTop() { |
|||
if (!this.tasks || !this.tasks.length || this.showSkeleton) return; |
|||
const startTime = this.tasks[0].planStart - 0; |
|||
if (this.topEnd) { |
|||
// 没有数据时 自动加载数据 |
|||
console.warn('滚动到顶部没有数据时: '); |
|||
const addTasks = setPlaceholderTasks(startTime, true, this.timeGranularity); |
|||
this.setUpTasks(addTasks); |
|||
} else { |
|||
// 有数据时 |
|||
console.warn('滚动到顶部有数据时: '); |
|||
const detailId = this.tasks.findIndex(task => task.detailId); |
|||
const timeNode = this.tasks[detailId].planStart - 0; |
|||
const upQuery = { |
|||
timeNode, |
|||
queryType: 0, |
|||
queryNum: 6, |
|||
}; |
|||
await this.$emit('getTasks', upQuery); |
|||
} |
|||
}, |
|||
|
|||
// 滚动到底部 |
|||
async handleScrollBottom() { |
|||
if (!this.tasks || !this.tasks.length || this.showSkeleton) return; |
|||
const { tasks, timeGranularity } = this; |
|||
const startTime = tasks[tasks.length - 1].planStart - 0; |
|||
if (this.bottomEnd) { |
|||
// 没有数据时 自动加载数据 |
|||
console.warn('滚动到底部没有数据时: '); |
|||
const addTasks = setPlaceholderTasks(startTime, false, this.timeGranularity); |
|||
this.setDownTasks(addTasks); |
|||
} else { |
|||
// 时间基准点=最后一个任务的开始时间+当前时间颗粒度 |
|||
console.warn('滚动到底部有数据时: '); |
|||
const arr = []; |
|||
this.tasks.forEach(task => { |
|||
if (task.detailId) { |
|||
arr.push(task); |
|||
} |
|||
}); |
|||
const nextQueryTime = +this.$t.time.add(+arr[arr.length - 1].planStart, 1, timeGranularity); |
|||
const downQuery = { |
|||
timeNode: nextQueryTime, |
|||
queryType: 1, |
|||
queryNum: 6, |
|||
}; |
|||
await this.$emit('getTasks', downQuery); |
|||
} |
|||
}, |
|||
|
|||
// 设置自动滚动位置 |
|||
setScrollPosition() { |
|||
// 如果storage里有taskId 滚动到这个id的任务 |
|||
const taskId = this.$t.storage.getStorageSync('taskId'); |
|||
if (taskId) { |
|||
this.setScrollToTaskId(`a${taskId}`); |
|||
this.$t.storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储 |
|||
} else { |
|||
const item = this.tasks.find(task => task.detailId); |
|||
if (item) { |
|||
this.setScrollToTaskId(`a${item.id}`); |
|||
} else { |
|||
// 没有本地记录的taskId |
|||
// 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线 |
|||
const task = this.tasks.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity)); |
|||
task && this.setScrollToTaskId(`a${task.id}`); // 有这个task 就记录他的id |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,42 +0,0 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 14:22:54 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-20 11:46:04 |
|||
--> |
|||
<template> |
|||
<view class> |
|||
<!-- :class="{ active: cycleTasks.time.start === filter.startTime }" --> |
|||
<view class="cycle-time active"> |
|||
<!-- {{ $util.formatStartTimeToCycleTime(filter.time, cycleTasks.time.start) }} --> |
|||
2021年30周 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Barrier', |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.cycle-time { |
|||
padding: 8rpx 16rpx; |
|||
margin-bottom: 16rpx; |
|||
background: #fafafc; |
|||
color: $uni-text-color; |
|||
font-size: 28rpx; |
|||
position: sticky; |
|||
top: -1px; |
|||
left: 0; |
|||
z-index: 99; |
|||
|
|||
&.active { |
|||
background: $uni-color-primary; |
|||
color: $uni-text-color-inverse; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,185 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex justify-between" style="min-width: 90px; position: relative"> |
|||
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon> |
|||
<u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon> |
|||
<!-- <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon> --> |
|||
<u-icon name="xuanxiang" custom-prefix="custom-icon" size="21px" @click="operation"></u-icon> |
|||
|
|||
<!-- 右上角 ... 弹窗 --> |
|||
<view class="popup border shadow-md" v-if="show"> |
|||
<view class="flex justify-center pb-3 border-b-1"> |
|||
<span @click="createTask">新建任务</span> |
|||
</view> |
|||
<view class="flex pt-3 justify-center"> |
|||
<span>克隆任务</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 遮罩 --> |
|||
<view class="mask" v-if="maskShow" @click="closeMask"></view> |
|||
<!-- 新建任务弹窗 --> |
|||
<CreateTask |
|||
:startTime="startTime" |
|||
:endTime="endTime" |
|||
:task="task" |
|||
@showTime="showTime" |
|||
@closeMask="closeMask" |
|||
class="thirdPopup flex transition-transform" |
|||
v-if="createTaskShow" |
|||
/> |
|||
|
|||
<u-picker title="开始时间" mode="time" v-model="showStart" :params="params" @confirm="confirmStartTime"></u-picker> |
|||
<u-picker title="结束时间" mode="time" v-model="showEnd" :params="params" @confirm="confirmEndTime"></u-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import CreateTask from '../../Title/components/CreateTask.vue'; |
|||
|
|||
export default { |
|||
components: { CreateTask }, |
|||
|
|||
props: { |
|||
task: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
show: false, //右上角 ... 显示 |
|||
createTaskShow: false, //新建项目显示 |
|||
secondShow: false, //分享项目显示 |
|||
maskShow: false, //遮罩显示 |
|||
showStart: false, |
|||
showEnd: false, |
|||
startTime: '', // 新建任务的开始时间 |
|||
endTime: '', // 新建任务的截止时间 |
|||
params: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: true, |
|||
second: true, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
//操作 |
|||
operation() { |
|||
// this.$t.ui.showToast('操作'); |
|||
this.show = !this.show; |
|||
}, |
|||
|
|||
// 新建项目 |
|||
createTask() { |
|||
// 关闭 ... 弹窗 |
|||
this.show = false; |
|||
// 打开遮罩 |
|||
this.maskShow = true; |
|||
// 打开新建项目弹窗 |
|||
this.createTaskShow = true; |
|||
}, |
|||
|
|||
//点击遮罩，关闭弹窗 |
|||
closeMask() { |
|||
// 关闭遮罩 |
|||
this.maskShow = false; |
|||
// 关闭分享项目弹窗 |
|||
this.secondShow = false; |
|||
// 关闭新建项目弹窗 |
|||
this.createTaskShow = false; |
|||
}, |
|||
|
|||
showTime() { |
|||
this.showStart = !this.showStart; |
|||
}, |
|||
|
|||
// 选择开始时间 |
|||
confirmStartTime(e) { |
|||
this.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`; |
|||
this.showEnd = true; |
|||
}, |
|||
|
|||
// 选择结束时间 |
|||
confirmEndTime(e) { |
|||
this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.mask { |
|||
width: 100%; |
|||
height: 100vh; |
|||
z-index: 21; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.thirdPopup { |
|||
background: #ffffff; |
|||
position: fixed; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 33; |
|||
border-radius: 5px; |
|||
width: 90%; |
|||
} |
|||
|
|||
.popup { |
|||
width: 110px; |
|||
background: #fff; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 35px; |
|||
z-index: 99; |
|||
padding: 15px 0; |
|||
color: black; |
|||
animation: opacity 1s ease-in; |
|||
} |
|||
|
|||
@keyframes opacity { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.8; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
::v-deep .u-slot-content { |
|||
min-width: 0; |
|||
} |
|||
::v-deep .u-dropdown__content { |
|||
min-height: 120px !important; |
|||
height: auto !important; |
|||
overflow-y: auto; |
|||
background: #fff !important; |
|||
transition: none !important; |
|||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
::v-deep .u-dropdown__menu__item .u-flex { |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-wrap: nowrap; |
|||
border: 1px solid #afbed1; |
|||
padding: 0 8px; |
|||
} |
|||
::v-deep .u-dropdown__content__mask { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -1,142 +0,0 @@ |
|||
<template> |
|||
<view class="column"> |
|||
<!-- v-if="tasks && tasks.length" --> |
|||
<view> |
|||
<view :key="task.id" v-for="task in tasks" :id="`a${task.id}`"> |
|||
<view class="flex"> |
|||
<TimeStatus :task="task" /> |
|||
<view class="flex items-center justify-between flex-1 ml-2 task-column"> |
|||
<view v-if="task.process !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view> |
|||
<view v-else>{{ $moment(+task.planStart).format('D日') }}</view> |
|||
|
|||
<!-- 任务功能菜单 --> |
|||
<TaskTools v-if="task.process !== 4" :task="task" /> |
|||
</view> |
|||
</view> |
|||
<view class="border-l-2 border-gray-300 plugin"> |
|||
<view class="h-3" v-if="task.process === 4"></view> |
|||
<view class="ml-3 overflow-hidden shadow-lg task-box"> |
|||
<u-card |
|||
:show-foot="false" |
|||
:show-head="false" |
|||
:style="{ height: setHeight(task.panel) }" |
|||
class="h-16" |
|||
margin="0" |
|||
v-if="showSkeleton" |
|||
> |
|||
<view slot="body"> |
|||
<view> |
|||
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton> |
|||
</view> |
|||
</view> |
|||
</u-card> |
|||
|
|||
<u-card |
|||
@click="onClickTask(task.planStart - 0, task.id)" |
|||
:show-foot="false" |
|||
:show-head="false" |
|||
:style="{ height: setHeight(task.panel) }" |
|||
class="h-16" |
|||
margin="0" |
|||
v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" |
|||
> |
|||
任务面板插件 |
|||
<view slot="body"> |
|||
<view class="p-0 u-col-between"> |
|||
<view :key="pIndex" v-for="(row, pIndex) in task.plugins"> |
|||
<view class="grid gap-2" v-if="row.length"> |
|||
<Plugin |
|||
:class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]" |
|||
:task="task" |
|||
:key="plugin.pluginTaskId" |
|||
:plugin-task-id="plugin.pluginTaskId" |
|||
:plugin-id="plugin.pluginId" |
|||
:param="plugin.param" |
|||
:style-type="styleType || 0" |
|||
v-for="plugin in row" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-card> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 局部弹框操作栏 --> |
|||
<Tips /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'; |
|||
import Skeleton from '@/components/Skeleton/Skeleton'; |
|||
import TimeStatus from './TimeStatus.vue'; |
|||
import TaskTools from './TaskTools.vue'; |
|||
|
|||
export default { |
|||
name: 'TimeBox', |
|||
components: { TimeStatus, Skeleton, TaskTools }, |
|||
|
|||
data() { |
|||
return { currentComponent: '', styleType: 0 }; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('role', ['roleId']), |
|||
...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'showSkeleton']), |
|||
...mapGetters('task', ['startTimeFormat']), |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions('task', ['getGlobal']), |
|||
...mapMutations('task', ['setTipsContent', 'setTipsContent']), |
|||
|
|||
// 设置任务面板高度 |
|||
setHeight(panel) { |
|||
if (panel && panel.height) { |
|||
return panel.height + 'px'; |
|||
} else { |
|||
return 'auto'; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 点击了定期任务的面板 更新可变的日常任务 |
|||
* @param {number} planStart 任务计划开始时间 |
|||
* @param {string} taskId 任务id |
|||
*/ |
|||
onClickTask(planStart, taskId) { |
|||
const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit }; |
|||
this.getGlobal(param); |
|||
this.$t.storage.setStorageSync('taskId', taskId); |
|||
this.$t.storage.setStorageSync('roleId', this.roleId); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.task-box { |
|||
border-radius: 24rpx; |
|||
} |
|||
.column { |
|||
padding: 24px 14px; |
|||
} |
|||
.task-column { |
|||
height: 33px; |
|||
} |
|||
.plugin { |
|||
margin-top: 8px; |
|||
margin-bottom: 8px; |
|||
margin-left: 15px; |
|||
} |
|||
::v-deep .ml-2 { |
|||
margin-left: 16px; |
|||
} |
|||
|
|||
::v-deep .ml-3 { |
|||
margin-left: 20px; |
|||
} |
|||
</style> |
|||
@ -1,231 +0,0 @@ |
|||
<template> |
|||
<view class="u-font-14"> |
|||
<view |
|||
class="flex items-center justify-center rounded-full icon-column" |
|||
:style="{ color: orderStyle.color }" |
|||
@click="changeStatus(task.process, $event)" |
|||
> |
|||
<!-- 1进行中 2暂停中 3已完成 --> |
|||
<u-circle-progress |
|||
:percent="orderStyle.persent - 0" |
|||
:active-color="orderStyle.color" |
|||
bg-color="rgba(255,255,255,0)" |
|||
border-width="4" |
|||
:width="task.process !== 4 ? 66 : 50" |
|||
v-if="task.process === 1 || task.process === 2 || task.process === 3" |
|||
> |
|||
<view class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<view class="u-progress-info"> |
|||
<u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="15px"></u-icon> |
|||
<template v-else>{{ durationText }}</template> |
|||
</view> |
|||
</view> |
|||
</u-circle-progress> |
|||
<!-- 0未开始 4添加任务 --> |
|||
<view class="flex items-center justify-center rounded-full progress-box" v-else :class="task.process === 4 ? 'progress-box-4' : ''"> |
|||
<view class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<view class="u-progress-info"> |
|||
<span v-if="orderStyle.icon"> |
|||
<u-icon :name="orderStyle.icon" v-if="task.process !== 4" size="15px"></u-icon> |
|||
<u-icon :name="orderStyle.icon" v-else size="15px"></u-icon> |
|||
</span> |
|||
<template v-else>{{ durationText }}</template> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'TimeStatus', |
|||
props: { task: { type: Object, default: () => {} } }, |
|||
|
|||
data() { |
|||
return { |
|||
time: '', |
|||
start: [{ text: '确认开始任务', color: 'blue' }], |
|||
pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], |
|||
proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], |
|||
again: [{ text: '重新开始任务', color: 'blue' }], |
|||
timer: null, |
|||
durationText: 0, |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('task', ['tip']), |
|||
status() { |
|||
return this.task ? this.task.process : 0; |
|||
}, |
|||
taskName() { |
|||
return this.task ? this.task.name : ''; |
|||
}, |
|||
taskId() { |
|||
return this.task ? this.task.id : ''; |
|||
}, |
|||
// 图标文本颜色 |
|||
// 任务状态 0未开始 1进行中 2暂停中 3已完成 |
|||
orderStyle() { |
|||
let color = '#9CA3AF'; |
|||
let icon = 'play-right-fill'; |
|||
let persent = 100; |
|||
switch (this.status) { |
|||
case 1: // 进行中 |
|||
color = '#60A5FA'; |
|||
icon = ''; |
|||
if (+this.computeCyclePersent() > 100) { |
|||
persent = 96; |
|||
} else { |
|||
persent = this.computeCyclePersent(); |
|||
} |
|||
break; |
|||
case 2: // 暂停中 |
|||
color = '#F87171'; |
|||
icon = 'pause'; |
|||
persent = 50; // TODO: 暂时这样 暂停状态没有计算剩余多少时间 |
|||
break; |
|||
case 3: // 已结束 |
|||
color = '#34D399'; |
|||
icon = 'checkmark'; |
|||
persent = 100; |
|||
break; |
|||
case 4: // 添加任务 |
|||
color = '#60A5FA'; |
|||
icon = 'plus'; |
|||
persent = 100; |
|||
break; |
|||
default: |
|||
// 未开始 |
|||
color = '#9CA3AF'; |
|||
icon = 'play-right'; |
|||
persent = 100; |
|||
break; |
|||
} |
|||
return { color, icon, persent }; |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
// TODO: 计算在不在窗口内显示 |
|||
const time = this.computeDurationText(); |
|||
this.updateDurationText(time); |
|||
}, |
|||
|
|||
destroyed() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('task', ['setTip']), |
|||
|
|||
/** |
|||
* 点击了图标 修改任务状态 |
|||
* @param {object} event |
|||
*/ |
|||
changeStatus(process, event) { |
|||
if (process === 4) { |
|||
this.addTask(); |
|||
return; |
|||
} |
|||
// return false; |
|||
const { status, taskId, taskName, tip } = this; |
|||
tip.status = status; |
|||
tip.taskId = taskId; |
|||
tip.left = event.target.x; |
|||
tip.top = event.target.y; |
|||
tip.show = true; |
|||
tip.text = this.genetateTips(status, taskName); |
|||
|
|||
this.setTip(tip); |
|||
}, |
|||
|
|||
// 新建任务 |
|||
addTask() { |
|||
this.$t.ui.showToast('新建任务'); |
|||
}, |
|||
|
|||
// 计算圆环的弧度百分比 |
|||
computeCyclePersent() { |
|||
if (!this.task || !this.task.realStart || !this.task.planDuration) return 100; |
|||
const { realStart, planDuration } = this.task; |
|||
return (((Date.now() - +realStart) * 100) / +planDuration).toFixed(2); |
|||
}, |
|||
|
|||
/** |
|||
* 计算tip的标题内容 |
|||
*/ |
|||
genetateTips(status, content) { |
|||
switch (status) { |
|||
case 0: |
|||
return `确认开始任务"${content}"吗？`; |
|||
case 1: |
|||
return `请选择要执行的操作`; |
|||
case 2: |
|||
return `请选择要执行的操作`; |
|||
case 3: |
|||
return `是否要重新开始此任务`; |
|||
} |
|||
}, |
|||
|
|||
// 计算进行中状态剩余时间 |
|||
// 预计结束时间 = realStart(实际开始) + planDuration(计划时长) |
|||
// 剩余时间 = 预计结束时间 - 当前时间 |
|||
// 剩余时间 = realStart + planDuration - Date.now() |
|||
computeDurationText() { |
|||
const { realStart, planDuration } = this.task; |
|||
const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间 |
|||
const { num, time } = this.$t.time.computeDurationText(leftTime); |
|||
if (num <= 0) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
this.durationText = num; |
|||
return time; |
|||
}, |
|||
|
|||
updateDurationText(time) { |
|||
if (this.timer) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
if (!time) return; |
|||
setInterval(() => { |
|||
this.computeDurationText(); |
|||
}, time); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.icon-column { |
|||
height: 33px; |
|||
width: 33px; |
|||
} |
|||
.one { |
|||
height: 33px; |
|||
width: 33px; |
|||
} |
|||
|
|||
.progress-box { |
|||
background: rgba(255, 255, 255, 0); |
|||
width: 33px; |
|||
height: 33px; |
|||
border: 2px solid #9ca3af; |
|||
} |
|||
|
|||
.progress-box-4 { |
|||
width: 25px; |
|||
height: 25px; |
|||
border: 2px solid #60a5fa; |
|||
} |
|||
</style> |
|||
@ -1,7 +0,0 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 15:40:02 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 15:40:03 |
|||
--> |
|||
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,87 +0,0 @@ |
|||
<template> |
|||
<view class="bg-white px-2"> |
|||
<view v-for="(list, index) in lists" :key="index"> |
|||
<view class="flex flex-col"> |
|||
<text>{{ list.title }}</text> |
|||
<img :src="list.img" class="w-full" /> |
|||
<text>训练结果</text> |
|||
<view class="flex flex-nowrap mt-3 rounded-3xl overflow-hidden"> |
|||
<view v-for="i in lines" :key="i.value" class="flex-1" :class="i.value === 6 ? '' : 'box'"> |
|||
<view class="w-full h-2" :class="i.checked ? 'bg-blue-500' : 'bg-gray-100'" @click="chooseLevel(i.value)"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<EndLine /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
lines: [ |
|||
{ |
|||
value: 1, |
|||
checked: true, |
|||
}, |
|||
{ |
|||
value: 2, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 3, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 4, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 6, |
|||
checked: false, |
|||
}, |
|||
], |
|||
lists: [ |
|||
{ |
|||
title: '迷宫', |
|||
img: 'https://www.tall.wiki/staticrec/guide/2.png', |
|||
trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'], |
|||
}, |
|||
{ |
|||
title: '迷宫', |
|||
img: 'https://www.tall.wiki/staticrec/guide/2.png', |
|||
trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
chooseLevel(index) { |
|||
this.lines.forEach((line, i) => { |
|||
console.log('i: ', i, index); |
|||
if (i < index) { |
|||
line.checked = true; |
|||
} else { |
|||
line.checked = false; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background-color: $uni-bg-color-grey; |
|||
} |
|||
|
|||
.box { |
|||
margin-right: 2px; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 385 KiB |
@ -1,9 +0,0 @@ |
|||
<template> |
|||
<view>扫码</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<view> |
|||
<view v-for="(list, index) in lists" :key="index"> |
|||
<view class="flex flex-col px-3 bg-white pb-4"> |
|||
<text class="my-3">{{ list.title }}</text> |
|||
<img :src="list.img" class="w-full" /> |
|||
<text class="py-3">训练结果</text> |
|||
<view class="flex flex-nowrap mt-10 rounded-3xl relative"> |
|||
<view |
|||
class="bubble" |
|||
:style="{ |
|||
left: list.position.left, |
|||
color: list.position.color, |
|||
backgroundImage: `url(${list.position.bgPic})`, |
|||
backgroundSize: '100% 100%', |
|||
backgroundRepeat: 'no-repeat', |
|||
}" |
|||
> |
|||
{{ list.position.value }} |
|||
</view> |
|||
<view v-for="i in list.levels" :key="i.value" class="flex-1" :class="i.value === 6 ? '' : 'box'"> |
|||
<view |
|||
class="w-full h-2" |
|||
:class="i.checked ? list.position.boxBg : 'bg-gray-100'" |
|||
@click="chooseLevel($event, index, i.value)" |
|||
></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex flex-col px-3 bg-white mt-2"> |
|||
<view class="py-3 flex justify-between" @click="changeShow(index)"> |
|||
训练者 |
|||
<u-icon name="arrow-down" v-if="!list.showTrain"></u-icon> |
|||
<u-icon name="arrow-up" v-else></u-icon> |
|||
</view> |
|||
<view class="flex flex-wrap pb-3" v-if="list.showTrain"> |
|||
<u-radio-group v-model="list.train" class="mr-1"> |
|||
<u-radio class="mr-1" @change="radioChange" v-for="(item, trainIndex) in list.trainer" :key="trainIndex" :name="item"> |
|||
{{ item }} |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<EndLine /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
lists: [ |
|||
{ |
|||
title: '迷宫', |
|||
img: 'https://www.tall.wiki/staticrec/guide/1.png', |
|||
train: '', |
|||
showTrain: false, |
|||
trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'], |
|||
levels: [ |
|||
{ |
|||
value: 1, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 3, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 4, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 6, |
|||
checked: false, |
|||
}, |
|||
], |
|||
position: { |
|||
left: 0, |
|||
color: '#EDEDED', |
|||
value: '非常困难', |
|||
bgPic: 'https://www.tall.wiki/staticrec/guide/bubble-gray.png', |
|||
boxBg: '', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '迷宫', |
|||
img: 'https://www.tall.wiki/staticrec/guide/1.png', |
|||
train: '', |
|||
showTrain: false, |
|||
trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'], |
|||
levels: [ |
|||
{ |
|||
value: 1, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 3, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 4, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 6, |
|||
checked: false, |
|||
}, |
|||
], |
|||
position: { |
|||
left: 0, |
|||
color: '#EDEDED', |
|||
value: '非常困难', |
|||
bgPic: 'https://www.tall.wiki/staticrec/guide/bubble-gray.png', |
|||
boxBg: '', |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
chooseLevel(e, index, value) { |
|||
const position = this.lists[index].position; |
|||
position.left = e.target.offsetLeft + 'px'; |
|||
console.log('value: ', value, 0 < value < 3); |
|||
if (value < 3) { |
|||
position.color = '#EB5A0D'; |
|||
position.value = '非常困难'; |
|||
position.bgPic = 'https://www.tall.wiki/staticrec/guide/bubble-red.png'; |
|||
position.boxBg = 'bg-red-500'; |
|||
} else if (value < 5) { |
|||
position.color = '#1890FF'; |
|||
position.value = '略有困难'; |
|||
position.bgPic = 'https://www.tall.wiki/staticrec/guide/bubble-blue.png'; |
|||
position.boxBg = 'bg-blue-500'; |
|||
} else { |
|||
position.color = '#F4C130'; |
|||
position.value = '轻松完成'; |
|||
position.bgPic = 'https://www.tall.wiki/staticrec/guide/bubble-yellow.png'; |
|||
position.boxBg = 'bg-yellow-500'; |
|||
} |
|||
|
|||
this.lists[index].levels.forEach((line, i) => { |
|||
if (i < value) { |
|||
line.checked = true; |
|||
} else { |
|||
line.checked = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
radioChange(e) { |
|||
console.log(e); |
|||
}, |
|||
|
|||
changeShow(index) { |
|||
this.lists[index].showTrain = !this.lists[index].showTrain; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background-color: $uni-bg-color-grey; |
|||
} |
|||
|
|||
.box { |
|||
margin-right: 2px; |
|||
} |
|||
|
|||
.bubble { |
|||
position: absolute; |
|||
top: -40px; |
|||
width: 70px; |
|||
height: 30px; |
|||
line-height: 26px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<!-- <view> |
|||
<Info class="bg-white" /> |
|||
<EndLine /> |
|||
</view> --> |
|||
<!--scan.wxml--> |
|||
<view class="scan-view"> |
|||
<camera class="scan-camera" mode="scanCode" binderror="cameraError" bindscancode="scancode" frame-size="large"> |
|||
<!-- <cover-image class="cover-corner cover-left-top" src="/images/left-top.png"></cover-image> |
|||
<cover-image class="cover-corner cover-right-top" src="/images/right-top.png"></cover-image> |
|||
<cover-image class="cover-corner cover-left-bottom" src="/images/left-bottom.png"></cover-image> |
|||
<cover-image class="cover-corner cover-right-bottom" src="/images/right-bottom.png"></cover-image> --> |
|||
|
|||
<cover-view class="scan-animation" :animation="animation"></cover-view> |
|||
</camera> |
|||
<view class="text-white">扫二维码/条形码</view> |
|||
<!-- 这里可以处理其他内容 --> |
|||
<u-button type="primary">主要按钮</u-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 移动动画 |
|||
let animation = wx.createAnimation({}); |
|||
|
|||
export default { |
|||
data() { |
|||
return { animation }; |
|||
}, |
|||
onLoad() {}, |
|||
onShow() { |
|||
this.donghua(); |
|||
}, |
|||
methods: { |
|||
donghua() { |
|||
var that = this; |
|||
console.log('that: ', that); |
|||
// 控制向上还是向下移动 |
|||
let m = true; |
|||
|
|||
setInterval( |
|||
function () { |
|||
if (m) { |
|||
animation.translateY(250).step({ duration: 3000 }); |
|||
m = !m; |
|||
} else { |
|||
animation.translateY(-10).step({ duration: 3000 }); |
|||
m = !m; |
|||
} |
|||
// that.setData({ animation: animation.export() }); |
|||
}.bind(this), |
|||
3000, |
|||
); |
|||
}, |
|||
scancode(e) { |
|||
// 校验扫描结果，并处理 |
|||
let res = e.detail.result; |
|||
console.log('res: ', res); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background-color: $uni-bg-color-grey; |
|||
} |
|||
|
|||
.scan-view { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #010101; |
|||
position: fixed; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.scan-camera { |
|||
width: 500rpx; |
|||
height: 500rpx; |
|||
border-radius: 6rpx; |
|||
margin: 30rpx; |
|||
border: 1px solid #08fdfe; |
|||
} |
|||
|
|||
.cover-corner { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
position: absolute; |
|||
} |
|||
|
|||
.cover-left-top { |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.cover-right-top { |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.cover-left-bottom { |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.cover-right-bottom { |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.scan-animation { |
|||
position: absolute; |
|||
top: -10rpx; |
|||
left: 10rpx; |
|||
width: 480rpx; |
|||
height: 8rpx; |
|||
background-color: #08fdfe; |
|||
border-radius: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,40 @@ |
|||
<template> |
|||
<view class="flex flex-col items-center"> |
|||
<view class="wifi-bg my-5"> |
|||
<u-icon name="wifi"></u-icon> |
|||
</view> |
|||
<view class="font-semibold mb-5 text-base">ccsens_5G</view> |
|||
<view class="bg-white w-full flex justify-between items-center py-2 px-3"> |
|||
<text class="mr-3">WIFI密码</text> |
|||
<u-input v-model="value" placeholder="请输入" input-align="right" class="text-base" /> |
|||
</view> |
|||
<view class="flex w-full px-3 pt-10"> |
|||
<u-button type="primary" class="w-full">绑定</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { value: '' }; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background-color: $uni-bg-color-grey; |
|||
} |
|||
|
|||
.wifi-bg { |
|||
width: 8rem; |
|||
height: 8rem; |
|||
line-height: 8rem; |
|||
font-size: 5rem; |
|||
color: $uni-text-color-inverse; |
|||
background: $uni-bg-color-blue; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue