feat: 蒙版提示

src/components/mask-tip/index.vue

+<template>
+  <u-mask :show="show" @click="handleClick" :zoom="false">
+    <view class="tip-view">
+      <image
+        class="tip-image"
+        :src="imageUrl"
+        :style="imageStyle"
+        mode="widthFix"
+      ></image>
+    </view>
+  </u-mask>
+</template>
+
+<script>
+/**
+ * @description 创建一个遮罩层，提示图片
+ * @property {Boolean} visible 是否显示遮罩（默认false）
+ * @property {Object} customStyle 自定义样式对象，见上方说明
+ * @example <answer-operation-tips :show.sync="show"></answer-operation-tips>
+ */
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    imageStyle: String,
+    imageName: String,
+    customStyle: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    imageUrl() {
+      return process.uniEnv.qn_base_url + this.imageName
+    },
+  },
+  methods: {
+    handleClick() {
+      console.log('--------------')
+      this.$emit('update:show', false)
+      this.$emit('click')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tip-view {
+}
+</style>

src/components/subject-statistics/index.vue

@@ -2,35 +2,24 @@
   <view class="statis">
     <image class="background-image" :src="meiriyilianImage"></image>
     <view class="content-view">
-      <!-- <view class="u-flex top">
-        <view class="u-flex avatar">
-          <view
-            class="avatar-list"
-            v-for="(item, index) in info.avatar"
-            :key="index"
-            ><image :src="item" mode="scaleToFill"
-          /></view>
-        </view>
-        <view class="notice">
-          <u-notice-bar
-            mode="horizontal"
-            type="none"
-            font-size="26"
-            :list="info.dynamic"
-            color="#FFFFFF"
-            :volume-icon="false"
-            autoplay
-            padding="0 10rpx"
-          ></u-notice-bar>
-        </view>
-      </view> -->
       <NoticeBar />
       <view class="u-flex center">
         <view v-for="(value, key) in detailLabels" :key="key" class="item-view">
           <view v-if="key == 'total'" class="line-view"></view>
-          <view class="left-view" @click="handleClick(key)">
+          <view
+            class="left-view"
+            @click="handleClick(key)"
+            hover-class="u-hover-class"
+          >
             <view class="count-view">{{ info[key] }}</view>
-            <view>{{ value }}</view>
+            <view
+              >{{ value
+              }}<u-icon
+                class="arrow-icon"
+                name="arrow-right"
+                color="#cccccc"
+              ></u-icon
+            ></view>
           </view>
           <view v-if="key == 'total'" class="line-view"></view>
         </view>
@@ -175,6 +164,9 @@ export default {
             font-size: 48rpx;
             margin-bottom: 6rpx;
           }
+          .arrow-icon {
+            margin-left: 4rpx;
+          }
         }
         .line-view {
           width: 2rpx;

src/pages/index/index.vue

@@ -53,6 +53,7 @@
       </view>
       <SubjectStatistics
         :info="info"
+        class="subject-statistics"
         @answer="handleAnswer"
         @click="handleClickItem"
       ></SubjectStatistics>
@@ -105,6 +106,16 @@
     <view>
       <u-toast ref="uToast" />
     </view>
+    <MaskTip
+      :show.sync="showMask"
+      imageName="mengceng1.png"
+      imageStyle="width:502rpx;margin-top:50rpx"
+    />
+    <MaskTip
+      :show.sync="showCountTip"
+      imageName="mengceng2.png"
+      :imageStyle="imageStyle"
+    />
   </view>
 </template>
 
@@ -112,13 +123,16 @@
 import SubjectStatistics from '@/components/subject-statistics'
 import ExperiencePop from '@/components/experience-pop'
 import ToastPop from '@/components/toast-pop'
+import MaskTip from '@/components/mask-tip'
 
 export default {
-  components: { SubjectStatistics, ExperiencePop, ToastPop },
+  components: { SubjectStatistics, ExperiencePop, ToastPop, MaskTip },
   data() {
     return {
       visible: false, // 免费体验弹窗
       show: false,
+      showMask: false, // 左上角选题库提示
+      showCountTip: false, // 题数可点击提示
       type: 'select',
       // provinceList: [],
       detail: { questionWarehouse: {} },
@@ -132,6 +146,7 @@ export default {
       isAdd: false, // 题库切换
       tapCount: 0, // 点击底部logo五次，显示机构id
       showOrgId: false, // 显示机构id
+      tipTop: 410,
     }
   },
   computed: {
@@ -254,19 +269,36 @@ export default {
         },
       ]
     },
+    imageStyle() {
+      return `width:640rpx;margin-top:${this.tipTop}rpx;margin-left:56rpx;`
+    },
+  },
+  watch: {
+    'detail.totalCount'(val) {
+      // 上次答题总数为0，这次答题总数大于0，弹出提示
+      let id = this.detail.questionWarehouse?.echoMap?.questionWarehouseId?.id
+      if (val > 0 && getApp().globalData.oldTotalCount == id + '-' + 0) {
+        this.$nextTick(() => {
+          const query = uni.createSelectorQuery().in(this)
+          query
+            .select('.subject-statistics')
+            .boundingClientRect((data) => {
+              this.tipTop = data?.top * 2 + 100
+              this.showCountTip = true
+            })
+            .exec()
+        })
+      }
+      getApp().globalData.oldTotalCount = id + '-' + val
+    },
   },
-  // watch: {
-  //   vuex_token(val, oldVal) {
-  //     // 监听token变化，如果更新则重新加载页面数据
-  //     val && !oldVal && this.initData()
-  //   },
-  // },
   onLoad() {
     getApp().trackPage('首页')
     if (this.vuex_token) {
       this.loading = true
       // this.getProvinceList()
     }
+    this.showMaskTip()
   },
   onShow() {
     if (this.vuex_token) {
@@ -284,6 +316,7 @@ export default {
       this.chagefinishCount()
     }
   },
+  onUnload() {},
   methods: {
     // initData() {
     //   // this.getProvinceList()
@@ -402,13 +435,7 @@ export default {
             },
           })
         } else {
-          this.$u.route({
-            url: 'pages/learn/detail',
-            params: {
-              // relationId: this.relationId,
-              id: this.info.id,
-            },
-          })
+          this.showBuyToast()
         }
       } else {
         this.show = true
@@ -488,13 +515,7 @@ export default {
         }
       } else if (this.info.id) {
         // 已选题库
-        this.$u.route({
-          url: 'pages/learn/detail',
-          params: {
-            // relationId: this.relationId,
-            id: this.info.id,
-          },
-        })
+        this.showBuyToast()
       } else {
         // 未选题库
         this.show = true
@@ -514,13 +535,7 @@ export default {
         })
       } else if (this.info.id) {
         // 已选题库未绑卡
-        this.$u.route({
-          url: 'pages/learn/detail',
-          params: {
-            // relationId: this.relationId,
-            id: this.info.id,
-          },
-        })
+        this.showBuyToast()
       } else {
         this.show = true
       }
@@ -549,13 +564,7 @@ export default {
       if (!this.checkToken()) {
         return
       }
-      this.$u.route({
-        url: 'pages/learn/detail',
-        params: {
-          // relationId: this.relationId,
-          id: this.info.id,
-        },
-      })
+      this.showBuyToast()
     },
     handleClickBlank() {
       this.tapCount++
@@ -581,6 +590,32 @@ export default {
         return false
       }
     },
+    showMaskTip() {
+      this.$nextTick(() => {
+        if (this.firstLauch) {
+          this.$u.vuex('firstLauch', false)
+          setTimeout(() => {
+            this.showMask = true
+          }, 2000)
+        }
+      })
+    },
+    showBuyToast() {
+      this.$refs.uToast.show({
+        title: '请先进行绑卡',
+        type: 'warning',
+        duration: 1500,
+        callback: () => {
+          this.$u.route({
+            url: 'pages/learn/detail',
+            params: {
+              // relationId: this.relationId,
+              id: this.info.id,
+            },
+          })
+        },
+      })
+    },
   },
 }
 </script>

src/pages/learn/detail.vue

@@ -82,17 +82,29 @@
         绑定学习卡
       </u-button>
     </view>
+    <MaskTip
+      :show.sync="show"
+      imageName="mengceng3.png"
+      :imageStyle="imageStyle"
+    />
   </view>
 </template>
 
 <script>
+import MaskTip from '@/components/mask-tip'
+
 export default {
+  components: {
+    MaskTip,
+  },
   data() {
     return {
       // relationId: 0, // 绑卡用
       info: {
         questionWarehouse: {},
       },
+      show: false,
+      tipTop: 452,
     }
   },
 
@@ -166,6 +178,9 @@ export default {
         },
       ]
     },
+    imageStyle() {
+      return `width:492rpx;margin-top:${this.tipTop}rpx;margin-left:244rpx;`
+    },
   },
   onLoad(e) {
     // if (e && e.relationId) {
@@ -190,6 +205,7 @@ export default {
         .queryQuestionWarehouseById(id)
         .then((res) => {
           this.info = res || { questionWarehouse: {} }
+          this.showTip()
         })
         .catch((err) => {
           this.loading = false
@@ -279,6 +295,18 @@ export default {
         }
       })
     },
+    showTip() {
+      this.$nextTick(() => {
+        const query = uni.createSelectorQuery().in(this)
+        query
+          .select('.price-view')
+          .boundingClientRect((data) => {
+            this.tipTop = data?.top * 2 - 128
+            this.show = true
+          })
+          .exec()
+      })
+    },
   },
 }
 </script>

src/pages/learn/score.vue

@@ -80,25 +80,22 @@
         </view>
       </view>
     </scroll-view>
-    <u-mask :show="show" @click="show = false">
-      <view class="tip-view">
-        <image class="tip-image" :src="jiantouImage"></image>
-        <view class="tip-message"
-          ><text class="tip-text"
-            >请点击右上角可分享至朋友圈或发送给指定朋友</text
-          >
-        </view>
-      </view>
-    </u-mask>
+    <MaskTip
+      :show.sync="show"
+      imageName="fenxiangmengceng.png"
+      imageStyle="width:424rpx;margin-left:244rpx;"
+    />
   </view>
 </template>
 
 <script>
 import CircleProgress from '@/components/circle-progress'
+import MaskTip from '@/components/mask-tip'
 
 export default {
   components: {
     CircleProgress,
+    MaskTip,
   },
   data() {
     return {
@@ -191,7 +188,7 @@ export default {
     }
     let trackProperties = {
       openId: this.openId,
-      nickname: this.userInfo.nickName
+      nickname: this.userInfo.nickName,
     }
     getApp().share(toShareProperties, trackProperties)
     return toShareProperties
@@ -234,7 +231,7 @@ export default {
             pageTotalPoint: Number(res.pageTotalPoint) || 0,
             category: echoMap.questionWarehouseId.title,
             type: '模拟考试',
-            passPoint: echoMap?.paperId?.passPoint || 80
+            passPoint: echoMap?.paperId?.passPoint || 80,
           }
         }
       })
@@ -250,6 +247,7 @@ export default {
     handleClick() {
       this.show = true
       setTimeout(() => {
+        // 防止分享的时候带着遮罩
         this.show = false
       }, 2500)
     },
@@ -405,30 +403,5 @@ export default {
       }
     }
   }
-  .tip-view {
-    margin-top: 116rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    .tip-image {
-      width: 96rpx;
-      height: 282rpx;
-      margin-right: 200rpx;
-      margin-bottom: 24rpx;
-    }
-    .tip-message {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .tip-text {
-        color: #ffffff;
-        font-size: 32rpx;
-        font-weight: bold;
-        text-align: left;
-        width: 420rpx;
-      }
-    }
-  }
 }
 </style>

src/store/index.js

@@ -20,7 +20,8 @@ let saveStateKeys = [
   'questionWarehouseId',
   'relationId', // 绑卡用
   'answerCount',
-  'orgId'
+  'orgId',
+  'firstLauch', // 初次使用
 ]
 
 // 保存变量到本地存储中
@@ -46,7 +47,7 @@ const store = new Vuex.Store({
     openId: lifeData.openId ? lifeData.openId : '',
     relationId: lifeData.relationId ? lifeData.relationId : '', // 绑卡用
     searchHistory: lifeData.searchHistory ? lifeData.searchHistory : [], // 搜索历史记录
-    answerCount: lifeData.answerCount ? lifeData.answerCount : {},// 已回答题数
+    answerCount: lifeData.answerCount ? lifeData.answerCount : {}, // 已回答题数
     lastIndex: lifeData.lastIndex ? lifeData.lastIndex : {}, // 上次做到第几题
     tipStatus: lifeData.tipStatus ? lifeData.tipStatus : false, // 滑动提示
     questionWarehouseId: lifeData.questionWarehouseId
@@ -56,7 +57,8 @@ const store = new Vuex.Store({
     // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
     vuex_version: '1.0.0',
     questionList: {}, // 练习列表
-    beginTime: null // 考试开始时间
+    beginTime: null, // 考试开始时间
+    firstLauch: lifeData.firstLauch == null ? true : false, // 初次使用
   },
   mutations: {
     $uStore(state, payload) {