提交 0f26e7fc 编写于 作者: huangwensu's avatar huangwensu

活动首页编辑

上级 c7b69edf
......@@ -5,12 +5,16 @@
<div class="step-text">{{stepText}}</div>
<div class="step-time">{{stepTime}}</div>
</div>
<img :src="imgSrc"/>
<img :class="{'img-style':stepFlag}" :src="imgSrc"/>
</div>
</template>
<script>
export default {
props: {
stepFlag: {
type: Boolean,
default: false
},
imgSrc: {
type: String,
default: ''
......@@ -32,6 +36,7 @@ export default {
</script>
<style lang="less" scoped>
.step-container {
position: relative;
display: flex;
flex-direction: row;
padding: 20px 10px 20px 0px;
......@@ -64,5 +69,12 @@ export default {
height: 40px;
margin-left: 70px;
}
img.img-style {
position: absolute;
right: 10px;
top: 0px;
width: 65px;
height: 65px;
}
}
</style>
\ No newline at end of file
......@@ -8,69 +8,30 @@
<img src="../static/images/task-one.png" />
<div class="task-l">
<div class="task-t">{{item.ruleName}}</div>
<div class="task-b">
<span v-if="handleData(item.rewardJsonInfo)[0].rewardType == 1">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆<span v-if="item.taskFrequency != 2 && (item.resourceType != 8 || (item.resourceType == 8 && item.resourceId == 2)) ">/次</span>
</span>
<span v-if="handleData(item.rewardJsonInfo)[0].rewardType == 2">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}元现金红包<span v-if="item.taskFrequency != 2">/次</span>
</span>
<span v-if="handleData(item.rewardJsonInfo)[0].rewardType == 3">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}分勤奋分<span v-if="item.taskFrequency != 2">/次</span>
</span>
<span v-if="handleData(item.rewardJsonInfo)[0].rewardType == 4">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}条短信额度<span v-if="item.taskFrequency != 2">/次</span>
</span>
</div>
</div>
<!-- taskFrequency 单次or累计 finishFrequency 用户完成的频率 doctorFinishFrequency 当前完成次数 -->
<div class="task-r">
<span v-if="item.timeStatus == 2">已结束</span>
<span v-if="item.taskFrequency == 1
&& item.timeStatus == 1
&& (item.finishFrequency == item.doctorFinishFrequency)
&& (item.resourceType != 8 || (item.resourceType == 8 && item.resourceId == 1))
">
已完成
</span>
<span class='has-bg'
v-if="item.taskFrequency == 1
&& item.timeStatus == 1
&& (item.finishFrequency == item.doctorFinishFrequency)
&& item.resourceType == 8
&& item.resourceId == 2">
继续完成
</span>
<span class='has-bg'
v-if="item.taskFrequency == 1
&& item.timeStatus == 1
&& (item.finishFrequency > item.doctorFinishFrequency)
&& item.doctorFinishFrequency
&& item.resourceType != 8">
继续完成
</span>
<span class='has-bg'
v-if="item.taskFrequency == 1
&& item.timeStatus == 1
&& (item.finishFrequency > item.doctorFinishFrequency)
&& item.doctorFinishFrequency
&& item.resourceType == 8
&& item.resourceId == 2">
去完成
</span>
<span class='has-bg'
v-if="item.taskFrequency == 1
&& item.timeStatus == 1
&& !item.doctorFinishFrequency">
去完成
</span>
<div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType != 8">限量 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}</div>
<div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType == 8 && item.resourceId == 2">获奖次数 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}</div>
<!-- <div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType != 8">限量 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}</div>
<div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType == 8 && item.resourceId == 2">获奖次数 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}</div> -->
<div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 1">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆/人
</div>
<div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 2">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}元现金红包/人
</div>
<div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 3">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}分勤奋分/人
</div>
<div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 4">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}条短信额度/人
</div>
<span class='has-bg' v-if="item.resourceType == 7">去邀请</span>
<div class="task-b" v-if="item.taskFrequency == 2 && (item.cumulativeFrequency > item.nowCumulativeFrequency)">进度 {{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</div>
<span v-if="item.taskFrequency == 2 && item.timeStatus == 1 && (item.cumulativeFrequency == item.nowCumulativeFrequency)">已完成</span>
<span class='has-bg' v-if="item.taskFrequency == 2 && item.timeStatus == 1 && (item.cumulativeFrequency > item.nowCumulativeFrequency) && item.nowCumulativeFrequency">继续完成</span>
<span class='has-bg' v-if="item.taskFrequency == 2 && item.timeStatus == 1 && !item.nowCumulativeFrequency">去完成</span>
<div class="task-b" v-if="item.taskFrequency == 2 && (item.cumulativeFrequency > item.nowCumulativeFrequency)">进度 {{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</div>
</div>
</div>
</div>
......@@ -271,6 +232,7 @@ export default {
}
.task-l {
.task-t {
padding-bottom: 20px;
font-size: 16px;
color: #373839;
font-weight: 700;
......@@ -278,7 +240,6 @@ export default {
.task-b {
font-size: 12px;
color: #979899;
padding-top: 5px;
span {
color: #979899;
}
......@@ -298,15 +259,18 @@ export default {
background: #C7C8C9;
border-radius: 25px;
text-align: center;
margin-top: 5px;
}
span.has-bg {
background: #FB6D5E;
// background: #FB6D5E;
background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius:35px;
}
.task-b {
text-align: center;
font-size: 12px;
color: #979899;
padding-top: 5px;
// padding-top: 5px;
}
}
}
......
<template>
<div class="container">
<header
<Header
:token="token"
:is-scroll="isScroll"
:share-title1="shareTitle1"
......@@ -8,14 +8,28 @@
:share-icon-url="shareIconUrl"
/>
<!-- 勤奋分进度 -->
<div>
<status-bar />
<div class="progress-container">
<div class="score-info">
<div v-if="!userMobile" class="text">
<img src="../static/images/task-four.png" />
<span class="tc">我的勤奋分<span>{{12345}}</span></span>
<span class="bt" @click="selfInfo">个人明细 ></span>
</div>
<div v-if="userMobile" class="text">
<span class="tc">登录可参加活动</span>
<span class="bt" @click="goToLogin">去登录 ></span>
</div>
</div>
<status-bar
class="progress-bar"
:isLogin="isLogin"/>
</div>
<!-- 活动阶段 -->
<img class="title-text" src="../static/images/step-title.png"/>
<div class="activity-step">
<div class="step bt">
<step
:stepFlag="stepFlag"
:imgSrc="imgSrc1"
:numText="numText1"
:stepText="stepText1"
......@@ -47,7 +61,7 @@
<script>
import TaskActivity from '../components/task-activity';
import Header from '../components/header';
import Header from '../components/header/index';
import Step from '../components/step';
import StatusBar from '../components/bussiness/status-bar';
import { getNcovRealReports } from "@/service";
......@@ -61,9 +75,11 @@ export default {
},
data() {
return {
isLogin: false,
userMobile: '',
stepFlag: true,
isWeb: true,
activityId: 9,
userMobile: '',
token: '',
shareTitle1: '',
shareTitle2: '',
......@@ -97,12 +113,21 @@ export default {
this.infoData = res.data || this.infoData;
}
});
},
// 去登录
goToLogin() {
},
// 查看个人明细
selfInfo() {
},
// 活动任务
activityTaskJump(data) {
//this.jumpPage(data.href, data.id);
},
}
}
</script>
......@@ -115,6 +140,44 @@ export default {
.title-text {
width: 100%;
}
.progress-container {
margin: 0 10px 15px;
.score-info {
padding: 0 17px;
height: 48px;
background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%);
border-radius:10px 10px 0px 0px;
.text {
line-height: 48px;
img {
float: left;
width: 30px;
height: 30px;
padding: 10px 10px 0px 0px;
}
span.tc {
font-size: 14px;
font-weight: 700;
color: #fff;
span {
padding-left: 10px;
font-size: 18px;
color: #FFE8A5;
}
}
span.bt {
font-size: 12px;
float: right;
color:#FFE8A5;
}
}
}
.progress-bar {
padding: 5px 17px;
height: 87px;
border-radius: 0px 0px 10px 10px;
}
}
.activity-step {
margin: 0 10px 15px;
border-radius: 5px;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册