Skip to content

P
pica-new-compaign
提交 0d939657 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

点赞页面开发

上级 a388269d
隐藏空白字符变更
内嵌 并排
正在显示 包含 159 行增加 和 41 行删除
components/task-activity.vue
浏览文件 @ 0d939657
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
<div v-if="item.timeStatus == 1 || (item.timeStatus == 2 && item.hideEndFlag == 2)"> <div v-if="item.timeStatus == 1 || (item.timeStatus == 2 && item.hideEndFlag == 2)">
<img :src="item.defaultBackgroundImage"/> <img :src="item.defaultBackgroundImage"/>
<div class="task-item" @click="linkPage(item)"> <div class="task-item" @click="linkPage(item)">
<img src="../static/images/task-one.png" /> <img v-if="item.resourceType == 7" src="../static/images/task-one.png" />
<img v-if="item.resourceType == 1" src="../static/images/task-two.png" />
<img v-if="item.resourceType == 3" src="../static/images/task-five.png" />
<div class="task-l"> <div class="task-l">
<div class="task-t">{{item.ruleName}}</div> <div class="task-t">{{item.ruleName}}</div>
</div> </div>
<!-- taskFrequency 单次or累计 finishFrequency 用户完成的频率 doctorFinishFrequency 当前完成次数 --> <!-- taskFrequency 单次or累计 finishFrequency 用户完成的频率 doctorFinishFrequency 当前完成次数 -->
<div class="task-r"> <div class="task-r">
<!-- <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"> <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 1">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆/人 {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆/人
</div> </div>
...@@ -25,6 +25,8 @@ ...@@ -25,6 +25,8 @@
<div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 4"> <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 4">
{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}条短信额度/人 {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}条短信额度/人
</div> </div>
<span class='has-bg' v-if="item.resourceType == 1">去学习</span>
<span class='has-bg' v-if="item.resourceType == 3">去参加</span>
<span class='has-bg' v-if="item.resourceType == 7">去邀请</span> <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> <div class="task-b" v-if="item.taskFrequency == 2 && (item.cumulativeFrequency > item.nowCumulativeFrequency)">进度 {{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</div>
...@@ -231,8 +233,9 @@ export default { ...@@ -231,8 +233,9 @@ export default {
height: 50px; height: 50px;
} }
.task-l { .task-l {
width: 167px;
.task-t { .task-t {
padding-bottom: 20px; padding-bottom: 25px;
font-size: 16px; font-size: 16px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
......
pages/login-point/point-result.vue
浏览文件 @ 0d939657
<template> <template>
<section class="point-container"> <section class="point-container">
<div class="point-status"> <div :class="{'point-bg': (status != 3)}">
<img src="../../static/images/point-success.png" /> <div class="point-status">
</div> <img v-if="status == 1 || status == 2" src="../../static/images/point-success-nobg.png" />
<div class="status-text"> <img v-if="status == 3" src="../../static/images/point-success.png" />
<p>点赞成功，感谢您为TA拿下5勤奋分</p> <img v-if="status == 4" src="../../static/images/point-fail.png" />
<p>登陆云鹊医APP，您也可获得75勤奋分</p> </div>
</div> <div class="status-text">
<div class="btn"> <p :class="{'fw': status != 3}">{{pointText1}}</p>
<button>打开APP</button> <p :class="{'fw': status != 3}">{{pointText2}}</p>
<button>下载APP</button> </div>
<div class="point-award">
<div v-if="status != 3" class="award-con">
<div>达到100勤奋分，即有资格瓜分100W云鹊豆</div>
<img src="../../static/images/point-award.png" />
</div>
</div>
<div class="btn">
<button @click="openApp">打开APP</button>
<button @click="downloadApp">下载APP</button>
</div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
props: {
status: {
type: String | Number,
default: 4
}
},
data() {
return {
pointText1: "",
pointText2: ""
}
},
created() {
if(this.status == 1) {
this.pointText1 = "点赞成功，感谢您为TA拿下5勤奋分",
this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
}else if(this.status == 2) {
this.pointText1 = "点赞成功",
this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆"
}else if(this.status == 3) {
this.pointText1 = "点赞成功，该活动已结束",
this.pointText2 = "登陆云鹊医APP，查看更多精彩内容"
}else if(this.status = 4) {
this.pointText1 = "抱歉！您的点赞次数已达3次上限！",
this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
}
},
methods: {
openApp() {
},
downloadApp() {
}
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.point-container { .point-container {
.point-bg {
width: 100%;
height: 100vh;
background-image:url('../../static/images/background.png');
background-size: 100% 100%;
}
.point-status { .point-status {
padding: 45px 0 25px; padding: 45px 0 25px;
text-align: center; text-align: center;
...@@ -36,9 +86,32 @@ export default { ...@@ -36,9 +86,32 @@ export default {
font-weight: 700; font-weight: 700;
color:#373839 color:#373839
} }
p.fw {
color: #fff;
}
}
.point-award {
.award-con {
background: #fff;
border-radius: 20px 20px 0px 0px;
padding: 0px 18px;
div {
padding: 14px;
font-size: 15px;
color: #DD364F;
text-align: center;
font-weight: 700;
}
img {
width: 100%;
}
}
} }
.btn { .btn {
text-align: center; text-align: center;
background: #fff;
padding: 40px 0px 91px;
margin-top: -1px;
button { button {
display: inline-block; display: inline-block;
width: 335px; width: 335px;
...@@ -47,14 +120,15 @@ export default { ...@@ -47,14 +120,15 @@ export default {
background: #fff; background: #fff;
color: gba(255,255,255,1); color: gba(255,255,255,1);
font-size: 16px; font-size: 16px;
border: none;
} }
button:first-child { button:first-child {
background: #449284; background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
color: #fff; color: #fff;
margin-bottom: 12px; margin-bottom: 12px;
} }
button:last-child { button:last-child {
border: 1PX solid rgba(151,152,153,1); border: 1PX solid rgba(230,77,69,1);
} }
} }
} }
......
pages/ranks/index.vue
浏览文件 @ 0d939657
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<span class="dlot"></span> <span class="dlot"></span>
<span class="num">前一名：<span class="score">21956</span>勤奋分</span> <span class="num">前一名：<span class="score">21956</span>勤奋分</span>
</div> </div>
<span class="line"></span> <div class="line"></div>
<div class="rank-num"> <div class="rank-num">
<span class="dlot"></span> <span class="dlot"></span>
<span class="num">后一名：<span class="score">21956</span>勤奋分</span> <span class="num">后一名：<span class="score">21956</span>勤奋分</span>
...@@ -49,16 +49,31 @@ ...@@ -49,16 +49,31 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 奖品 -->
<div class="award-container">
<div class="award-title">
<div>排名前10名奖品</div>
<span @click="allAward">全部奖品 ></span>
</div>
<div class="awards"><img src="../../static/images/all-award.png" /></div>
</div>
<DetailBtn
v-show="true"
:needBT="needBT"
@btnClick="goBack" />
</section> </section>
</template> </template>
<script> <script>
import Header from '../../components/header'; import Header from '../../components/header';
import DetailBtn from '../../components/bussiness/detail-btn';
export default { export default {
components: { components: {
Header Header,
DetailBtn
}, },
data() { data() {
return { return {
needBT: false,
shareTitle1: '我的排名', shareTitle1: '我的排名',
shareTitle2: '', shareTitle2: '',
isScroll: true, isScroll: true,
...@@ -92,6 +107,17 @@ export default { ...@@ -92,6 +107,17 @@ export default {
return require('../../static/images/icon-copper.png') return require('../../static/images/icon-copper.png')
} }
}, },
// 全部奖品
allAward(){
},
goBack() {
if(this.$rocNative.isWeb) {
this.$router.go(-1);
} else {
this.$rocNative.goBack();
}
},
} }
} }
</script> </script>
...@@ -148,12 +174,14 @@ export default { ...@@ -148,12 +174,14 @@ export default {
} }
} }
.rank-detail { .rank-detail {
display: flex;
flex-direction: row;
justify-content: center;
margin: 0 15px 15px; margin: 0 15px 15px;
height: 30px; height: 30px;
background: rgba(153,31,51,1); background: rgba(153,31,51,1);
border-radius: 15px; border-radius: 15px;
.rank-num{ .rank-num{
float: left;
padding: 0px 16px; padding: 0px 16px;
line-height: 30px; line-height: 30px;
font-size: 13px; font-size: 13px;
...@@ -173,13 +201,11 @@ export default { ...@@ -173,13 +201,11 @@ export default {
color: #FFE8A5; color: #FFE8A5;
} }
} }
span.line { .line {
float: left; margin-top: 10px;
margin-top: 8px;
background: #fff; background: #fff;
width: 1PX; width: 1PX;
height: 15px; height: 15px;
margin-top: 5px;
} }
} }
} }
...@@ -218,42 +244,57 @@ export default { ...@@ -218,42 +244,57 @@ export default {
} }
} }
.ranking-list { .ranking-list {
padding: 0 40px; padding: 0 15px;
.item { .item {
display: flex; display: flex;
font-size: 12px; font-size: 12px;
align-items: center; align-items: center;
padding: 10px 0; padding: 10px 26px;
border-bottom: 1px solid #F8F9FA; border-bottom: 1px solid #F8F9FA;
.ranking-icon { .ranking-icon {
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
.icon-num { .icon-num {
width: 25px; width: 15px;
color: #373839; color: #373839;
} }
.doctor-photo {
width: 35px;
height: 35px;
border-radius: 100%;
margin-left: 25px;
}
.doctor-name { .doctor-name {
color: #333333; color: #373839;
font-size: 16px; font-size: 12px;
font-weight: 700; margin-left: 55px;
margin-left: 10px; // width: 130px;
width: 130px;
} }
.num { .num {
color: #373839; color:#FD5A2F;
font-weight: 700; font-size: 12px;
font-size: 18px;
margin-left: auto; margin-left: auto;
} }
} }
} }
} }
.award-container {
margin: 0px 0px 60px 0px;
.award-title {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15px 10px;
div {
font-size: 18px;
color: #28344C;
font-weight: 700;
}
span {
font-size: 12px;
color: #979899;
}
}
.awards {
img {
width: 100%;
}
}
}
} }
</style> </style>
\ No newline at end of file
static/images/point-fail.png
查看替换文件 @ a388269d 浏览文件 @ 0d939657
static/images/point-fail.png

4.4 KB | W: | H:

static/images/point-fail.png

2.9 KB | W: | H:

static/images/point-fail.png
static/images/point-fail.png
static/images/point-fail.png
static/images/point-fail.png
  • 2-up
  • Swipe
  • Onion skin
static/images/point-success.png
查看替换文件 @ a388269d 浏览文件 @ 0d939657
static/images/point-success.png

5.1 KB | W: | H:

static/images/point-success.png

12.4 KB | W: | H:

static/images/point-success.png
static/images/point-success.png
static/images/point-success.png
static/images/point-success.png
  • 2-up
  • Swipe
  • Onion skin
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或