点赞页面开发

components/task-activity.vue

@@ -5,14 +5,14 @@
             <div v-if="item.timeStatus == 1 || (item.timeStatus == 2 && item.hideEndFlag == 2)">
                 <img :src="item.defaultBackgroundImage"/>
                 <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-t">{{item.ruleName}}</div>  
                     </div>
                     <!-- taskFrequency 单次or累计 finishFrequency 用户完成的频率  doctorFinishFrequency 当前完成次数 -->
                     <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">
                             {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆/人
                         </div>
@@ -25,6 +25,8 @@
                         <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 == 1">去学习</span> 
+                        <span class='has-bg' v-if="item.resourceType == 3">去参加</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>
@@ -231,8 +233,9 @@ export default {
                     height: 50px;
                 }
                 .task-l {
+                    width: 167px;
                     .task-t {
-                        padding-bottom: 20px;
+                        padding-bottom: 25px;
                         font-size: 16px;
                         color: #373839;
                         font-weight: 700;

pages/login-point/point-result.vue

 <template>
     <section class="point-container">
+        <div :class="{'point-bg': (status != 3)}">
             <div class="point-status">
-            <img src="../../static/images/point-success.png" />
+                <img v-if="status == 1 || status == 2" src="../../static/images/point-success-nobg.png" />
+                <img v-if="status == 3" src="../../static/images/point-success.png" />
+                <img v-if="status == 4" src="../../static/images/point-fail.png" />
             </div>
             <div class="status-text">
-            <p>点赞成功，感谢您为TA拿下5勤奋分</p>
-            <p>登陆云鹊医APP，您也可获得75勤奋分</p>
+                <p :class="{'fw': status != 3}">{{pointText1}}</p>
+                <p :class="{'fw': status != 3}">{{pointText2}}</p>
+            </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>打开APP</button>
-            <button>下载APP</button>
+                <button @click="openApp">打开APP</button>
+                <button @click="downloadApp">下载APP</button>
+            </div>
         </div>
     </section>
 </template>
 <script>
 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>
 <style lang="less" scoped>
 .point-container {
+    .point-bg {
+        width: 100%;
+        height: 100vh;
+        background-image:url('../../static/images/background.png');
+        background-size: 100% 100%;
+    }
     .point-status {
         padding: 45px 0 25px;
         text-align: center;
@@ -36,9 +86,32 @@ export default {
             font-weight: 700;
             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 {
         text-align: center;
+        background: #fff;
+        padding: 40px 0px 91px;
+        margin-top: -1px;
         button {
             display: inline-block;
             width: 335px;
@@ -47,14 +120,15 @@ export default {
             background: #fff;
             color: gba(255,255,255,1);
             font-size: 16px;
+            border: none;
         }
         button:first-child {
-            background: #449284;
+            background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
             color: #fff;
             margin-bottom: 12px;
         }
         button:last-child {
-            border: 1PX solid rgba(151,152,153,1);
+            border: 1PX solid rgba(230,77,69,1);
         }
     }
 }

pages/ranks/index.vue

@@ -25,7 +25,7 @@
                     <span class="dlot"></span>
                     <span class="num">前一名：<span class="score">21956</span>勤奋分</span>
                 </div>
-                <span class="line"></span>
+                <div class="line"></div>
                 <div class="rank-num">
                     <span class="dlot"></span>
                     <span class="num">后一名：<span class="score">21956</span>勤奋分</span>
@@ -49,16 +49,31 @@
                 </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>
 </template>
 <script>
 import Header from '../../components/header';
+import DetailBtn from '../../components/bussiness/detail-btn';
 export default {
     components: {
-       Header 
+       Header,
+       DetailBtn
     },
     data() {
         return {
+            needBT: false,
             shareTitle1: '我的排名',
             shareTitle2: '',
             isScroll: true,
@@ -92,6 +107,17 @@ export default {
                 return require('../../static/images/icon-copper.png')
             }
         },
+        // 全部奖品
+        allAward(){
+
+        },
+        goBack() {
+            if(this.$rocNative.isWeb) {
+                this.$router.go(-1);
+            } else {
+                this.$rocNative.goBack();
+            }
+        },
     }
 }
 </script>
@@ -148,12 +174,14 @@ export default {
             }
         }
         .rank-detail {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
             margin: 0 15px 15px;
             height: 30px;
             background: rgba(153,31,51,1);
             border-radius: 15px;
             .rank-num{
-                float: left;
                 padding: 0px 16px;
                 line-height: 30px;
                 font-size: 13px;
@@ -173,13 +201,11 @@ export default {
                     color: #FFE8A5;
                 }
             }
-            span.line {
-                float: left;
-                margin-top: 8px;
+            .line {
+                margin-top: 10px;
                 background: #fff;
                 width: 1PX;
                 height: 15px;
-                margin-top: 5px;
             }
         }
     }
@@ -218,42 +244,57 @@ export default {
             }
         }
         .ranking-list {
-            padding: 0 40px;
+            padding: 0 15px;
             .item {
                 display: flex;
                 font-size: 12px;
                 align-items: center;
-                padding: 10px 0;
+                padding: 10px 26px;
                 border-bottom: 1px solid #F8F9FA;
                 .ranking-icon {
                     width: 15px;
                     height: 15px;
                 }
                 .icon-num {
-                    width: 25px;
+                    width: 15px;
                     color: #373839;
                 }
-                .doctor-photo {
-                    width: 35px;
-                    height: 35px;
-                    border-radius: 100%;
-                    margin-left: 25px;
-                }
                 .doctor-name {
-                    color: #333333;
-                    font-size: 16px;
-                    font-weight: 700;
-                    margin-left: 10px;
-                    width: 130px;
+                    color: #373839;
+                    font-size: 12px;
+                    margin-left: 55px;
+                    // width: 130px;
                 }
                 .num {
-                    color: #373839;
-                    font-weight: 700;
-                    font-size: 18px;
+                    color:#FD5A2F;
+                    font-size: 12px;
                     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>
\ No newline at end of file