chenJinxu
/
HealthStudentWeb
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

对接部分成长接口

test
wzl 11 月之前
父節點
e03100f30b
當前提交
3b2f900533
共有 3 個檔案被更改，包括 225 行新增 和 106 行删除
統一視圖
Diff Options
Show Stats Download Patch File Download Diff File
  1. +70
    -0
      src/api/development.js
  2. +97
    -82
      src/views/development/index.vue
  3. +58
    -24
      src/views/development/taskDetail.vue

+ 70
- 0
src/api/development.js 查看文件

@@ -0,0 +1,70 @@
import request from '@/config/request';

async function http(config) {
return new Promise(resolve => {
request(config)
.then(res => {
resolve(res.data);
})
.catch(err => {
console.log(err);
resolve(false);
});
});
}

export const apiDevelopment = {
LevelList,
LevelDetail,
CurrentTask
};

export default apiDevelopment;

// personId 这个用于临时测试用
const personId = 15;

/**
* 等级列表
* @returns
*/
function LevelList() {
return http({
url: '/api/Level/List',
method: 'get',
params: {
personId: personId
}
});
}

/**
* 等级详情
* @param
* \{ levelId ，personId \}
*
* @returns
*/
function LevelDetail(params) {
return http({
url: '/api/Level/LevelDetail',
method: 'get',
params: {
personId: personId,
...params
}
});
}

/**
* 任务列表
*/
function CurrentTask() {
return http({
url: '/api/Task/CurrentTask',
method: 'get',
params: {
personId: personId
}
});
}

+ 97
- 82
src/views/development/index.vue 查看文件

@@ -9,35 +9,38 @@
<div class="button min-text">了解详情</div> <div class="button min-text">了解详情</div>
</div> </div>
</router-link> </router-link>
<div class="gap">当前任务</div>
<div class="task">
<div class="image">
<img src="@/assets/development/images/task.png" alt="" />
</div>
<div class="task-detail">
<div class="task-title">
<div>
<span>幸运熊计划LV</span>
<span>{{ task.level < 10 ? `0${task.level}` : task.level }}</span>
</div>
<div class="mid-text bold">{{ task.detail }}</div>
<div v-if="task">
<div class="gap">当前任务</div>
<div class="task">
<div class="image">
<img src="@/assets/development/images/task.png" alt="" />
</div> </div>
<div class="task-times">
<div class="task-time" v-for="(item, index) in task.taskList" :key="index" @click="toTask(item)">
<div class="task-time-info">
<div class="task-time-text">{{ item.title }}</div>
<div class="task-time-button min-text" v-if="item.status === 0">查看进度</div>
<div class="task-time-button min-text" v-else>上传打卡</div>
<div class="task-detail">
<div class="task-title">
<div>
<span>{{ task.planName }}</span>
<span>{{ task.levelLv }}</span>
</div> </div>
<div class="task-time-icon">
<div class="task-time-icon-active" v-if="item.status === 0">
<div class="image">
<img src="@/assets/development/images/active.png" alt="" />
<div class="mid-text bold">{{ task.serialNumber }}</div>
</div>
<div class="task-times">
<div class="task-time" v-for="(item, index) in task.taskDatas" :key="index" @click="toTask(item)">
<div class="task-time-info">
<div class="task-time-text">{{ item.name }}</div>
<div class="task-time-button min-text" v-if="item.status !== 3">
{{ item.sourceType === 3 ? '完成问卷' : item.sourceType === 2 ? '查看进度' : '上传打卡' }}
</div> </div>
</div> </div>
<div class="task-time-icon-unactive" v-else>
<div class="image">
<img src="@/assets/development/images/unactive.png" alt="" />
<div class="task-time-icon">
<div class="task-time-icon-active" v-if="item.status === 2">
<div class="image">
<img src="@/assets/development/images/active.png" alt="" />
</div>
</div>
<div class="task-time-icon-unactive" v-else>
<div class="image">
<img src="@/assets/development/images/unactive.png" alt="" />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -51,11 +54,11 @@
v-for="(item, index) in levels" v-for="(item, index) in levels"
:key="index" :key="index"
:class="{ :class="{
unlock: item.level === task.level + 1,
now: item.level === task.level,
active: item.level < task.level
unlock: item.status === 3,
now: item.status === 1,
active: item.status === 2
}" }"
@click="toDetail(item, task)"
@click="toDetail(item)"
> >
<div class="bg"> <div class="bg">
<div class="image"> <div class="image">
@@ -64,16 +67,18 @@
</div> </div>
<div class="level-info"> <div class="level-info">
<div class="level-info-level"> <div class="level-info-level">
<div class="level-info-text">LV{{ item.level < 10 ? `0${item.level}` : item.level }}</div>
<div class="level-info-text">{{ item.levelName }}</div>
<div class="level-info-status"> <div class="level-info-status">
{{ {{
item.level > task.level + 1
item.status === 0
? '未解锁' ? '未解锁'
: item.level === task.level + 1
: item.status === 3
? '可查看' ? '可查看'
: item.level === task.level
: item.status === 1
? '进行中' ? '进行中'
: '已完成'
: item.status === 2
? '已完成'
: '未知'
}} }}
</div> </div>
</div> </div>
@@ -84,7 +89,7 @@
</div> </div>
<div class="tip"> <div class="tip">
<div class="image"> <div class="image">
<img :src="active" alt="" v-if="item.level <= task.level + 1" />
<img :src="active" alt="" v-if="item.status === 1 || item.status === 2 || item.status === 3" />
<img :src="unactive" alt="" v-else /> <img :src="unactive" alt="" v-else />
</div> </div>
</div> </div>
@@ -94,6 +99,7 @@
</template> </template>


<script> <script>
import development from '@/api/development';
const active = require('@/assets/development/images/leveTip.png'); const active = require('@/assets/development/images/leveTip.png');
const unactive = require('@/assets/development/images/leveTipGray.png'); const unactive = require('@/assets/development/images/leveTipGray.png');


@@ -102,54 +108,62 @@ export default {
return { return {
active, active,
unactive, unactive,
task: {
level: 2,
detail: '学讲礼貌',
taskList: [
{
title: '格言朗读',
status: 1
},
{
title: '佩戴习惯',
status: 0
}
]
},
levels: [
{
level: 1,
title: '美好开始',
desc: '赢取启蒙熊',
image: require('@/assets/development/images/leve_1.png')
},
{
level: 2,
title: '学讲礼貌',
desc: '赢取启蒙熊',
image: require('@/assets/development/images/leve_2.png')
},
{
level: 3,
title: '学讲礼貌',
desc: '赢取启蒙熊',
image: require('@/assets/development/images/leve_3.png')
},
{
level: 4,
title: '学讲礼貌',
desc: '赢取启蒙熊',
image: require('@/assets/development/images/leve_4.png')
}
]
task: null,
levels: []
}; };
}, },
created() {}, created() {},
mounted() {},
mounted() {
this.initData();
},
methods: { methods: {
async initData() {
this.getTasks();
this.getLevels();
},
async getLevels() {
let re = await development.LevelList();

if (re) {
if (re.succeed) {
if (re.data && Array.isArray(re.data) && re.data.length > 0) {
let list = re.data.map(item => {
return {
id: item.id,
level: item.level,
levelName: item.levelLv,
title: item.target,
desc: `赢取${item.reward}`,
status: item.status,
image: require(`@/assets/development/images/leve_${item.level}.png`)
};
});
this.levels = list;
}
} else {
this.$message.error(re.message);
}
}
},
async getTasks() {
let re = await development.CurrentTask();
if (re) {
if (re.succeed) {
if (re.data && Array.isArray(re.data) && re.data.length > 0) {
this.task = re.data[0];
}
} else {
this.$message.error(re.message);
}
}
},
toTask(item) { toTask(item) {
console.log(item);
if (item.status === 0) {
if(item.status === 3){
return
}
if (item.sourceType === 3) {
this.$toast('问卷调查');
} else if (item.sourceType === 2) {
this.$router.push({ this.$router.push({
name: 'taskWearing', name: 'taskWearing',
params: {} params: {}
@@ -161,12 +175,12 @@ export default {
}); });
} }
}, },
toDetail(item, task) {
console.log(item);
console.log(task);
toDetail(item) {
this.$router.push({ this.$router.push({
name: 'taskDetail', name: 'taskDetail',
params: {}
params: {
id: item.id
}
}); });
} }
} }
@@ -263,6 +277,7 @@ export default {
letter-spacing: 5px; letter-spacing: 5px;
} }
.task-time-button { .task-time-button {
align-self: flex-end;
padding: 0px 30px; padding: 0px 30px;
color: white; color: white;
background-color: #000; background-color: #000;


+ 58
- 24
src/views/development/taskDetail.vue 查看文件

@@ -6,53 +6,87 @@
<img src="@/assets/development/images/banner2.png" alt="" /> <img src="@/assets/development/images/banner2.png" alt="" />
</div> </div>
</div> </div>
<div class="content">
<div class="gap"></div>
<div class="max-title">离完成任务解锁奖励</div>
<div class="max-title">又近了一步！</div>
<div class="gap"></div>
<div class="text center">
你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
你一定可以实现你的目标！
</div>
<div class="gap"></div>
<div class="progress">
<div class="bg" width="100%"></div>
<div class="text" :style="`left:${progress}%;`">3</div>
<div class="content" v-if="detail">
<div v-if="detail.status === 1 || detail.status === 2">
<div class="gap"></div>
<div class="max-title">离完成任务解锁奖励</div>
<div class="max-title">又近了一步！</div>
<div class="gap"></div>
<div class="text center">
你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
你一定可以实现你的目标！
</div>
<div class="gap"></div>
<div class="progress">
<div class="bg" width="100%"></div>
<div class="text" :style="`left:${detail.taskData.progress}%;`">{{ detail.taskData.finishCount }}</div>
</div>
<div class="gap"></div>
</div> </div>
<div class="gap"></div> <div class="gap"></div>
<div class="gap"></div>
<div class="mid-title center">任务即将达成</div>
<div class="mid-title center" v-if="detail.status === 2">已完成</div>
<div class="mid-title center" v-else-if="detail.status === 1">任务即将达成</div>
<div class="mid-title center" v-else-if="detail.status === 3">未开始</div>
<div class="mid-title center" v-else-if="detail.status === 0">未解锁</div>
<div class="mid-title center" v-else>未知</div>
<div class="gap"></div> <div class="gap"></div>
<div class="mid-title">目标</div> <div class="mid-title">目标</div>
<div class="text">美好开始</div>
<div class="text">{{ detail.target }}</div>
<div class="gap"></div> <div class="gap"></div>
<div class="mid-title">目标解释</div> <div class="mid-title">目标解释</div>
<div class="text">
帮助孩子了解自己；认识什么叫“德智体美劳全面发展”； 和孩子一起找到通往幸福的魔法钥匙 ⸺ 情绪共生力。
</div>
<div class="text">{{ detail.targetDesc }}</div>
<div class="gap"></div> <div class="gap"></div>
<div class="mid-title">任务</div> <div class="mid-title">任务</div>
<div class="text">1:帮助孩子阅读一封信和计划玩法拆解</div>
<div class="text">2:一起安装手办柜，放上熊，并合影</div>
<div class="text" v-for="(item, index) in tasks" :key="index">{{ item }}</div>
</div> </div>
</div> </div>
</template> </template>


<script> <script>
import NavBar from '@/components/NavBar'; import NavBar from '@/components/NavBar';
import develeopMent from '@/api/development';
export default { export default {
components: { components: {
NavBar NavBar
}, },
data() { data() {
return { return {
id: 1,
detail: null,
progress: 50 progress: 50
}; };
}, },
computed: {},
mounted() {},
methods: {}
computed: {
tasks() {
return this.detail ? this.detail.taskDesc.split('\r\n') : [];
}
},
mounted() {
let id = this.$route.params.id;
if (id) {
this.id = id;
} else {
this.$toast('参数错误');
setTimeout(() => {
this.$router.back();
}, 3000);
}
this.initData();
},
methods: {
async initData() {
let re = await develeopMent.LevelDetail({
levelId: this.id
});
if (re) {
if (re.succeed) {
this.detail = re.data;
} else {
this.$toast(re.message);
}
}
}
}
}; };
</script> </script>




Write Preview
Loading…
取消
儲存