8 changed files with 281 additions and 15 deletions
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<view class="my-2"> |
|||
<view v-if="train.contentDetails.length" class="text-xs"> |
|||
<!-- 训练目标 训练元素 训练原理 训练步骤 --> |
|||
<view v-for="(purpose, purposeIndex) in train.contentDetails" :key="purposeIndex"> |
|||
<view class="font-bold">{{ |
|||
purpose.type === 0 |
|||
? '训练目标' |
|||
: purpose.type === 1 |
|||
? '训练元素' |
|||
: purpose.type === 2 |
|||
? '训练原理' |
|||
: purpose.type === 3 |
|||
? '训练步骤' |
|||
: '' |
|||
}}</view> |
|||
<view v-for="detail in purpose.details" :key="detail.id"> |
|||
<view v-if="detail.content" class="text-gray-200"> |
|||
{{ detail.content }} |
|||
</view> |
|||
<view v-if="detail.supplementaries" class="text-gray-200"> |
|||
<view v-for="(img, imgIndex) in detail.supplementaries" :key="imgIndex"> |
|||
<img :src="img.src" class="w-full" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 训练结果 --> |
|||
<view v-if="purpose.trains.length"> |
|||
<view v-for="(trainResult, resultIndex) in purpose.trains" :key="trainResult.trainRecordId"> |
|||
<ResultLevel :trains="trainResult" :resultIndex="resultIndex" v-if="trainResult.resultType === 0" /> |
|||
<view v-if="trainResult.resultType === 1">过程记录</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import ResultLevel from './ResultLevel'; |
|||
|
|||
export default { |
|||
components: { ResultLevel }, |
|||
props: { train: { type: Object, default: null } }, |
|||
}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex flex-nowrap mt-10 rounded-3xl relative"> |
|||
<view |
|||
class="bubble" |
|||
:style="{ |
|||
left: level.left || 0, |
|||
color: level.color || '#EDEDED', |
|||
backgroundImage: `url(${level.bgPic || 'https://www.tall.wiki/staticrec/yanyuan/bubble-gray.png'})`, |
|||
backgroundSize: '100% 100%', |
|||
backgroundRepeat: 'no-repeat', |
|||
}" |
|||
> |
|||
{{ trains.finishResult === 1 ? '非常困难' : trains.finishResult === 2 ? '略有困难' : '轻松完成' }} |
|||
</view> |
|||
<view v-for="i in levels" :key="i.value" class="flex-1" :class="i.value === 3 ? '' : 'box'"> |
|||
<view class="w-full h-2" :class="i.checked ? level.boxBg : 'bg-gray-100'"></view> |
|||
</view> |
|||
</view> |
|||
<!-- 时间 --> |
|||
<view class="text-sm text-gray-400 flex flex-nowrap items-center"> |
|||
<view class="num mr-2">{{ resultIndex + 1 }}</view> |
|||
1分钟50秒 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { trains: { type: Object, default: null }, resultIndex: { type: Number, default: 0 } }, |
|||
|
|||
data() { |
|||
return { |
|||
// trains: { |
|||
// finishResult: 3, |
|||
// finishTime: 15, |
|||
// }, |
|||
levels: [ |
|||
{ |
|||
value: 0.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 1, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 1.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 3, |
|||
checked: false, |
|||
}, |
|||
], |
|||
width: 0, |
|||
level: {}, |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query |
|||
.selectAll('.box') |
|||
.boundingClientRect(data => { |
|||
this.width = data[0].width; |
|||
this.setLevel(); |
|||
}) |
|||
.exec(); |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
setLevel() { |
|||
if (!this.trains.finishResult) return; |
|||
|
|||
if (this.trains.finishResult <= 0.5) { |
|||
this.setParam(1, 0); |
|||
} else if (this.trains.finishResult <= 1) { |
|||
this.setParam(1, 1); |
|||
} else if (this.trains.finishResult <= 1.5) { |
|||
this.setParam(2, 2); |
|||
} else if (this.trains.finishResult <= 2) { |
|||
this.setParam(2, 3); |
|||
} else if (this.trains.finishResult <= 2.5) { |
|||
this.setParam(3, 4); |
|||
} else { |
|||
this.setParam(3, 5); |
|||
} |
|||
this.setBox(); |
|||
}, |
|||
|
|||
setParam(type, value) { |
|||
const { level, width } = this; |
|||
if (type == 1) { |
|||
level.color = '#EB5A0D'; |
|||
level.value = '非常困难'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-red.png'; |
|||
level.boxBg = 'bg-red-500'; |
|||
} |
|||
if (type == 2) { |
|||
level.color = '#F4C130'; |
|||
level.value = '略有困难'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-yellow.png'; |
|||
level.boxBg = 'bg-yellow-500'; |
|||
} |
|||
if (type == 3) { |
|||
level.color = '#1890FF'; |
|||
level.value = '轻松完成'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-blue.png'; |
|||
level.boxBg = 'bg-blue-500'; |
|||
} |
|||
level.left = value * width + 'px'; |
|||
}, |
|||
|
|||
setBox() { |
|||
let index = 0; |
|||
this.levels.forEach((line, i) => { |
|||
if (this.trains.finishResult > i / 2) { |
|||
index = i + 1; |
|||
} |
|||
if (this.trains.finishResult === i / 2) { |
|||
index = i; |
|||
} |
|||
if (i < index) { |
|||
line.checked = true; |
|||
} else { |
|||
line.checked = false; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box { |
|||
margin-right: 2px; |
|||
} |
|||
|
|||
.bubble { |
|||
position: absolute; |
|||
top: -40px; |
|||
width: 70px; |
|||
height: 30px; |
|||
line-height: 26px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.num { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
border-radius: 50%; |
|||
border: 1px solid $uni-bg-color-blue; |
|||
color: $uni-bg-color-blue; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue