feat:每日一练UI

pages2/dailyPractice/index.vue

@@ -1,35 +1,59 @@
 <template>
     <view class="daily_practice">
         <nav-bar title="每日一练"></nav-bar>
-        <view class="contents">
-            <view class="remind">
-                <view>订阅</view>
-            </view>
-            <view class="insist">
-                <view>坚持打卡{{ dayExamDetail.recordCount }} 天</view>
-            </view>
-            <view class="names">
-                <view class="name_title">{{ dayExamDetail.examName || ''}}</view>
-                <view class="percentage">
-                    <text v-if=" dayExamDetail.examRecord == 1">恭喜你，今天的打卡已完成~</text>
-                    <text v-else>打卡进度超过了{{ dayExamDetail.recordPercentage || '0%' }}的学员,快来打卡呀~</text>
+        <view class="content_up">
+            <view class="reminds">
+                <view class="remind_lefts">
+                    <image src="/pages2/static/daily/logo_icon.png" class="logo_icon"></image>
+                    <view class="left_infos">
+                        <text class="one">订阅消息</text>
+                        <text class="two">开启订阅通知，每天打卡不错过</text>
+                    </view>
+                </view>
+                <view class="remind_rights">
+                    <!-- 1已订阅 0未订阅 -->
+                    <view class="subscription" @click="getSubscription()">{{ dayExamDetail.subscription == 1 ? '已订阅' : '订阅'}}</view>
                 </view>
             </view>
-            <view class="toPractice" @click="goPractice()">
-                {{ dayExamDetail.examRecord == 1 ? '今日已完成' : '快来做题' }}
+            <view class="punch_days">
+                <view class="print_day">
+                    <view class="print_left">
+                        <text class="one">打卡天数</text>
+                        <text class="two" v-if=" dayExamDetail.examRecord == 1">恭喜你，今天的打卡已完成</text>
+                        <text class="two" v-else>打卡进度超过了{{ dayExamDetail.recordPercentage || '0%' }}的学员</text>
+                    </view>
+                    <view class="print_right">
+                        <text class="nums">{{ dayExamDetail.recordCount }}</text>天
+                    </view>
+                </view>
+                <view class="middle_line">
+                    <view class="half_cir_left"></view>
+                    <view class="half_cir_rig"></view>
+                </view>
+                <view class="examNames">
+                    <view class="exam_name">{{ dayExamDetail.examName || '' }}</view>
+                    <image src="/pages2/static/daily/daily_one.png" class="daily_one"></image>
+                </view>
+                <view class="learn_btns">
+                    <view class="toLearn" @click="goPractice()">{{ dayExamDetail.examRecord == 1 ? '今日已完成' : '快来做题' }}</view>
+                </view>
             </view>
+        </view>
+        <view class="contents">
+            <view class="c_title">打卡记录</view>
             <view class="punch_calendar">
                 <view class="card_box">
                     {{ curMonth + '月'}}
                 </view>
-                <u-line color="#EEEEEE" />
+                <!-- <u-line color="#EEEEEE" /> -->
                 <view class="weeks">
                     <view v-for="(item, index) in weekLists" :key="index" class="card_date">{{ item }}</view>
                 </view>
                 <view class="day_dailys">
-                    <view v-for="(item, index) in date_num" :key="index" class="date_num">
-                        <view class="items">
-                            {{ item.date }}
+                    <view v-for="(item, index) in date_num" :key="index" class="date_nums">
+                        <view class="date_items">
+                            <image v-if="item.sign" src="/pages2/static/daily/punch.png" class="pun_icon"></image>
+                            <text v-else>{{ item.date }}</text>
                         </view>
                     </view>
                 </view>
@@ -122,6 +146,7 @@ export default {
                     if (this.dayRecordList.length) {
                         this.date_num.forEach((item, index) => {
                             let findV = this.dayRecordList.find(e => e.day == item.date)
+                            console.log('findV', findV);
                             if (findV) {
                                 this.$set(this.date_num[index], 'sign', true)
                             } else {
@@ -141,7 +166,26 @@ export default {
                 +'&moduleId=' + moduleExamId + '&chapterId=' + chapterExamId + '&entryType=daily'
             })
         },
-        
+        // 订阅消息
+        getSubscription() {
+            this.$http({
+                url: '/bank/question/today/exam/subscription',
+                method: 'post',
+                data: {
+                    goodsId: this.goodsId,
+                    orderGoodsId: this.orderGoodsId,
+                    subscriptionStatus: this.dayExamDetail.subscription == 0 ? 1 : 0,
+                }
+            }).then((res) => {
+                if (res.data.code == 200) {
+                    this.$u.toast('订阅成功')
+                } else {
+                    this.$u.toast('订阅失败，请重新订阅')
+                }
+            }).catch((err) => {
+                this.$u.toast('订阅失败，请重新订阅')
+            })
+        },
     },
 }
 </script>
@@ -149,31 +193,179 @@ export default {
 <style lang="scss">
 .daily_practice {
     width: 100%;
-    padding: 32rpx;
 }
-.contents {
-    .toPractice {
-        width: 600rpx;
-        height: 100rpx;
-        line-height: 100rpx;
+.content_up {
+    width: 100%;
+    height: 646rpx;
+    background: linear-gradient(#3577E8, #FAFAFA);
+    padding: 0rpx 26rpx 0rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .reminds {
+        width: 100%;
+        height: 112rpx;
+        border-radius: 14rpx;
+        background-color: #fff;
+        padding: 0rpx 24rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 38rpx;
+        margin-bottom: 26rpx;
+    }
+    .remind_lefts {
+        display: flex;
+        align-items: center;
+    }
+    .logo_icon {
+        width: 88rpx;
+        height: 88rpx;
+        margin-right: 16rpx;
+    }
+    .left_infos {
+        display: flex;
+        flex-direction: column;
+        .one {
+            font-size: 32rpx;
+            font-family: PingFang SC-Heavy, PingFang SC;
+            font-weight: 800;
+            color: #222222;
+            margin-bottom: 2rpx;
+        }
+        .two {
+            font-size: 24rpx;
+            font-family: PingFang SC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #999999;
+        }
+    }
+    .subscription {
+        width: 136rpx;
+        height: 64rpx;
+        line-height: 64rpx;
         text-align: center;
+        background: #07C160;
+        border-radius: 8rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Heavy, PingFang SC;
+        font-weight: 800;
+        color: #FFFFFF;
+    }
+
+    .punch_days {
+        width: 100%;
+        height: 470rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+        .print_day {
+            padding: 40rpx 40rpx 6rpx 40rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .print_left {
+            display: flex;
+            flex-direction: column;
+            .one {
+                margin-bottom: 8rpx;
+                font-size: 36rpx;
+                font-weight: 800;
+                color: #556176;
+            }
+            .two {
+                font-size: 26rpx;
+                font-weight: 500;
+                color: #808DA4;
+            }
+        }
+        .print_right {
+            font-size: 28rpx;
+            font-weight: 500;
+            color: #222222;
+            .nums {
+                font-size: 76rpx;
+                font-family: DIN-Medium, DIN;
+                margin-right: 6rpx;
+            }
+        }
+        .middle_line {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .half_cir_left {
+                width: 16rpx;
+                height: 32rpx;
+                border-radius: 0rpx 16rpx 16rpx 0rpx;
+                background: #D9D9D9;
+                opacity: 1;
+            }
+            .half_cir_rig {
+                width: 16rpx;
+                height: 32rpx;
+                border-radius: 16rpx 0rpx 0rpx 16rpx;
+                background: #D9D9D9;
+                opacity: 1;
+            }
+        }
+        .examNames {
+            width: 100%;
+            padding: 0rpx 24rpx 0rpx 40rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .exam_name {
+                width: 440rpx;
+                font-size: 32rpx;
+                font-weight: 800;
+                color: #556176;
+                line-height: 38rpx;
+            }
+            .daily_one {
+                width: 160rpx;
+                height: 160rpx;
+            }
+        }
+        .learn_btns {
+            padding-left: 40rpx;
+            .toLearn {
+                width: 240rpx;
+                height: 88rpx;
+                line-height: 88rpx;
+                text-align: center;
+                background: #3577E8;
+                border-radius: 260rpx;
+                font-size: 30rpx;
+                font-weight: bold;
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+.contents {
+    width: 100%;
+    height: 100%;
+    background-color: #FAFAFA;
+    padding: 0rpx 26rpx 100rpx 26rpx;
+    .c_title {
         font-size: 32rpx;
-        color: #222;
-        border: 2rpx solid #666;
+        font-weight: 500;
+        color: #222222;
+        margin-bottom: 34rpx;
+        padding-top: 56rpx;
     }
 }
 .punch_calendar {
     width: 100%;
     background: #ffffff;
-	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
-	border-radius: 22rpx;
-	margin-top: 16rpx;
-	padding-bottom: 15rpx;
+	border-radius: 24rpx;
+	padding: 38rpx 34rpx 0rpx;
     .card_box {
-        height: 60rpx;
-        line-height: 60rpx;
-        // margin-left: 20rpx;
-        text-align: center;
+        width: 100%;
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #222222;
     }
     .t1 {
         color: #007AFF;
@@ -183,12 +375,16 @@ export default {
         width: 100%;
         display: flex;
         justify-content:center;
-        margin-top: 20rpx;
+        margin-top: 32rpx;
+        margin-bottom: 24rpx;
     }
     .card_date {
         width: 14%;
         text-align: center;
         color: #7f8caf;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #888691;
     }
     .day_dailys {
         width: 100%;
@@ -196,15 +392,19 @@ export default {
         margin-top: 40rpx;
         flex-wrap: wrap;
     }
-    .date_num {
+    .date_nums {
         width: 14%;
         text-align: center;
         position: relative;
         display: inline-block;
-        margin-top: 20rpx;
-        .items {
-            width: 100%;
+        margin-bottom: 32rpx;
+        .date_items {
+            width: 100%; 
         }
-    }
+        .pun_icon {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }   
 }
 </style>