mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
381 lines
9.8 KiB
Vue
381 lines
9.8 KiB
Vue
<template>
|
|
<view class="growth">
|
|
<u-navbar
|
|
title="专业力必修"
|
|
bgColor="rgba(0,0,0,0)"
|
|
:safeAreaInsetTop="true"
|
|
placeholder
|
|
leftIconColor="#fff"
|
|
autoBack
|
|
fixed
|
|
titleStyle="color:#fff"
|
|
>
|
|
<template slot="right">
|
|
<view class="select-growth" @click="show = true">
|
|
<u-image
|
|
width="30rpx"
|
|
height="30rpx"
|
|
src="@/static/images/growth/qiehuan.png"
|
|
></u-image>
|
|
<div style="margin-left: 4px">切换岗位</div>
|
|
</view>
|
|
</template>
|
|
</u-navbar>
|
|
|
|
<!-- 有数据 -->
|
|
<template v-if="selectData">
|
|
<view class="growth-name">
|
|
{{ selectData.growthName }}
|
|
</view>
|
|
<view class="growth-state">
|
|
<view
|
|
:style="{
|
|
color:
|
|
selectData.learningState === 0
|
|
? '#fe9400'
|
|
: selectData.learningState === 1
|
|
? '#6ba158'
|
|
: '#ff8726',
|
|
}"
|
|
>{{
|
|
selectData.learningState === 0
|
|
? "学习未开始"
|
|
: selectData.learningState === 1
|
|
? "学习已完成"
|
|
: "学习进行中"
|
|
}}</view
|
|
>
|
|
</view>
|
|
<view class="growth-tip">
|
|
<view class="growth-tip-content">
|
|
<view class="tip-title"> 说明 </view>
|
|
<view class="tip-content">
|
|
{{ selectData.description || "暂无说明" }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="growth-progress">
|
|
<view class="progress-title">
|
|
<view class="line"></view>
|
|
<view class="text">{{ `学习进度` }}</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
<view class="progress-total">
|
|
{{ `总任务：${selectData.totalTaskNum} 个` }}
|
|
</view>
|
|
<view class="progress-card">
|
|
<view class="progress-card-item">
|
|
<view
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<view class="label">必修进度</view>
|
|
<view class="rate">{{ requiredTaskCompletionRate }}%</view>
|
|
</view>
|
|
<view class="progress">
|
|
<u-line-progress
|
|
active-color="#0077EC"
|
|
:showText="false"
|
|
inactive-color="#E5E7EB"
|
|
:percentage="requiredTaskCompletionRate"
|
|
height="3"
|
|
></u-line-progress>
|
|
</view>
|
|
</view>
|
|
<view class="progress-card-item">
|
|
<view
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<view class="label">选修进度</view>
|
|
<view class="rate">{{ electiveTaskCompletionRate }}%</view>
|
|
</view>
|
|
<view class="progress">
|
|
<u-line-progress
|
|
active-color="#0077EC"
|
|
:showText="false"
|
|
inactive-color="#E5E7EB"
|
|
:percentage="electiveTaskCompletionRate"
|
|
height="3"
|
|
></u-line-progress>
|
|
</view>
|
|
</view>
|
|
<view class="progress-card-item">
|
|
<view
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<view class="label">总进度</view>
|
|
<view class="rate">{{ totalTaskCompletionRate }}%</view>
|
|
</view>
|
|
<view class="progress">
|
|
<u-line-progress
|
|
active-color="#0077EC"
|
|
:showText="false"
|
|
inactive-color="#E5E7EB"
|
|
:percentage="totalTaskCompletionRate"
|
|
height="3"
|
|
></u-line-progress>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="confirm" @click="loaddetail">
|
|
<view>{{
|
|
selectData.learningState == 2 ? "继续学习" : "开始学习"
|
|
}}</view>
|
|
</view>
|
|
</template>
|
|
<!-- 无数据 -->
|
|
<template v-else>
|
|
<u-empty marginTop="200rpx" mode="data"> </u-empty>
|
|
</template>
|
|
|
|
<u-picker
|
|
:show="show"
|
|
:columns="[list]"
|
|
keyName="growthName"
|
|
@cancel="show = false"
|
|
@confirm="select"
|
|
></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { studentGrowthList } from "@/api/modules/growth";
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectData: null,
|
|
list: [],
|
|
// 是否展示选框
|
|
show: false,
|
|
};
|
|
},
|
|
computed: {
|
|
// 完成进度
|
|
totalTaskCompletionRate() {
|
|
if (
|
|
this.selectData.totalTaskCompletedNum &&
|
|
this.selectData.totalTaskNum
|
|
) {
|
|
let num =
|
|
this.selectData.totalTaskCompletedNum / this.selectData.totalTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
// 选修进度
|
|
electiveTaskCompletionRate() {
|
|
if (
|
|
this.selectData.electiveTaskCompletedNum &&
|
|
this.selectData.electiveTaskNum
|
|
) {
|
|
let num =
|
|
this.selectData.electiveTaskCompletedNum /
|
|
this.selectData.electiveTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
// 必修进度
|
|
requiredTaskCompletionRate() {
|
|
if (
|
|
this.selectData.requiredTaskCompletedNum &&
|
|
this.selectData.requiredTaskNum
|
|
) {
|
|
let num =
|
|
this.selectData.requiredTaskCompletedNum /
|
|
this.selectData.requiredTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
},
|
|
onLoad: function (options) {
|
|
// 获取专业力必修
|
|
studentGrowthList().then((res) => {
|
|
this.list = res.data;
|
|
this.selectData = this.list[0];
|
|
});
|
|
},
|
|
methods: {
|
|
toBack() {
|
|
uni.navigateBack();
|
|
},
|
|
// 切换任务
|
|
select({ value }) {
|
|
this.selectData = value[0];
|
|
this.show = false;
|
|
},
|
|
// 学习任务跳转详情
|
|
loaddetail(task) {
|
|
let taskUrl = "";
|
|
if (this.selectData.template == 1) {
|
|
//路径图
|
|
let params = encodeURIComponent("routerId=" + this.selectData.id);
|
|
// "/pages/forward?to=/fe-student-h5-release/growthPath¶ms=" + params;
|
|
taskUrl = "/pages/forward?to=/student-h5/growthPath¶ms=" + params;
|
|
} else {
|
|
//任务列表
|
|
let params = encodeURIComponent("routerId=" + this.selectData.id);
|
|
taskUrl =
|
|
"/pages/forward?to=/student-h5/growthDetails¶ms=" + params;
|
|
}
|
|
uni.navigateTo({
|
|
url: taskUrl,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.growth {
|
|
background-image: url(@/static/images/growth/bg.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
min-height: 100vh;
|
|
font-family: PingFang SC;
|
|
.select-growth {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 188rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
.confirm {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 114rpx;
|
|
view {
|
|
width: 560rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
background: linear-gradient(0deg, #266eff 0%, #528bff 100%);
|
|
box-shadow: 0px 5rpx 15rpx 0rpx rgba(42, 112, 255, 0.5);
|
|
border-radius: 44rpx;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.growth-progress {
|
|
margin-top: 35rpx;
|
|
.progress-card {
|
|
background: #ffffff;
|
|
padding: 30rpx 27rpx 21rpx 27rpx;
|
|
margin: 42rpx 50rpx 0 50rpx;
|
|
box-shadow: 0px 10px 15px 0px rgba(44, 106, 231, 0.2);
|
|
border-radius: 16rpx;
|
|
.progress-card-item {
|
|
.label {
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.rate {
|
|
font-weight: 700;
|
|
|
|
font-size: 30rpx;
|
|
color: #0077ec;
|
|
}
|
|
.progress {
|
|
margin-top: 17rpx;
|
|
margin-bottom: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
.progress-total {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
margin-top: 14rpx;
|
|
}
|
|
.progress-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.line {
|
|
width: 40rpx;
|
|
height: 6rpx;
|
|
background: #ffffff;
|
|
border-radius: 3rpx;
|
|
opacity: 0.8;
|
|
margin: 0 32rpx;
|
|
}
|
|
.text {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
.growth-tip {
|
|
background-image: url(@/static/images/growth/card-top.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin: 38rpx 26rpx 0 26rpx;
|
|
padding: 45rpx 24rpx 0 24rpx;
|
|
.growth-tip-content {
|
|
background: linear-gradient(0deg, #dfe9ff 0%, #ffffff 100%);
|
|
border-radius: 0px 0px 16px 16px;
|
|
word-wrap: break-word;
|
|
.tip-title {
|
|
margin-left: 38rpx;
|
|
font-weight: 700;
|
|
color: #2f3f5a;
|
|
}
|
|
.tip-content {
|
|
margin: 0 37rpx 0 46rpx;
|
|
padding-bottom: 37rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 42px;
|
|
}
|
|
}
|
|
}
|
|
.growth-name {
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
line-height: 40rpx;
|
|
margin: 24rpx 98rpx 24rpx 47rpx;
|
|
}
|
|
.growth-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 28rpx;
|
|
justify-content: end;
|
|
view {
|
|
padding: 16rpx 26rpx;
|
|
background: #ffffff;
|
|
border-radius: 50rpx 0px 0px 50rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|