feat:测试结束弹窗

src/components/answer-complete-pop/index.vue

+<template>
+  <u-popup
+    border-radius="24"
+    v-model="visible"
+    safe-area-inset-bottom
+    mode="center"
+    width="654rpx"
+    :mask-close-able="false"
+  >
+    <view class="pop-view">
+      <image mode="widthFix" class="image-view" :src="backgroundImage"></image>
+      <view :class="['head-view', { 'is-daily': isDaily }]">
+        <view class="pop-title">
+          <text>{{ info.title }}</text>
+        </view>
+        <view class="pop-message" v-if="isDaily">
+          <text>{{ info.message }}</text>
+        </view>
+      </view>
+      <view class="pop-content">
+        <view
+          v-for="(item, index) in numberList"
+          :key="index"
+          :class="['list-view', { 'is-daily': isDaily }]"
+        >
+          <view>{{ item }}</view>
+          <view class="label-view">{{ info.labels[index] }}</view>
+        </view>
+      </view>
+      <view class="pop-btn-view">
+        <u-button
+          :custom-style="customStyleCancel"
+          hover-class="none"
+          shape="circle"
+          @click="handleClickCancel"
+        >
+          {{ info.buttonTextCancel }}
+        </u-button>
+        <u-button
+          :custom-style="customStyleSave"
+          shape="circle"
+          type="primary"
+          @click="handleClickSure"
+        >
+          {{ info.buttonTextSure }}
+        </u-button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+/**
+ * @description 创建一个遮罩层，提示文字和图片
+ * @property {Boolean} visible 是否显示（默认false）
+ * @property {String} type pass:合格；fail:不合格；daily:每日一练
+ * @property {Array} numberList 展示数字
+ * @example <answer-complete-pop :numberList="[1, 2, 3]" type="pass" :visible.sync="visible"></answer-complete-pop>
+ */
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // pass:合格；fail:不合格；daily:每日一练
+    type: {
+      type: String,
+      default: '',
+    },
+    numberList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    info() {
+      switch (this.type) {
+        case 'pass':
+          return {
+            image: 'chegnjihege-f.png',
+            title: '成绩已合格',
+            message: '',
+            buttonTextCancel: '继续答题',
+            buttonTextSure: '现在交卷',
+            labels: ['做错题', '未做题', '分数'],
+          }
+        case 'fail':
+          return {
+            image: 'chengjibuhege-f.png',
+            title: '成绩不合格',
+            message: '',
+            buttonTextCancel: '继续答题',
+            buttonTextSure: '现在交卷',
+            labels: ['做错题', '未做题', '分数'],
+          }
+        case 'daily':
+          return {
+            image: 'lianxiwancheng-f.png',
+            title: '每日一练已完成',
+            message: '您每日一练已累计打卡',
+            buttonTextCancel: '查看记录',
+            buttonTextSure: '继续练习',
+            labels: ['分'],
+          }
+      }
+    },
+    isDaily() {
+      return this.type == 'daily'
+    },
+    backgroundImage() {
+      return process.uniEnv.qn_base_url + this.info.image
+    },
+    customStyleCancel() {
+      return {
+        width: '264rpx',
+        height: '96rpx',
+        color: '#9EA5BB',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+      }
+    },
+    customStyleSave() {
+      return {
+        backgroundColor: '#2953FF',
+        width: '264rpx',
+        height: '96rpx',
+        color: '#ffffff',
+        fontWeight: 'bold',
+        fontSize: '32rpx',
+      }
+    },
+  },
+  methods: {
+    changeVisibleValue(val) {
+      this.$emit('update:visible', val)
+    },
+    handleClickCancel() {
+      this.changeVisibleValue(false)
+      this.$emit('cancel')
+    },
+    handleClickSure() {
+      this.$emit('submit')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pop-view {
+  padding: 48rpx 24rpx;
+  min-height: 520rpx;
+  position: relative;
+  text-align: center;
+  .head-view {
+    width: 100%;
+    height: 432;
+    padding-top: 10rpx;
+    padding-bottom: 300rpx;
+    &.is-daily {
+      padding-top: 160rpx;
+      padding-bottom: 30rpx;
+    }
+    .pop-title {
+      font-size: 48rpx;
+      text-align: center;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .pop-message {
+      margin-top: 110rpx;
+      font-size: 28rpx;
+      text-align: center;
+      color: #5a6073;
+    }
+  }
+  .image-view {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  .pop-content {
+    margin-bottom: 140rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .list-view {
+      font-size: 56rpx;
+      color: #191c27;
+      font-weight: bold;
+      padding-top: 40rpx;
+      width: 30%;
+      &.is-daily {
+        color: #2953ff;
+        font-size: 80rpx;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 30rpx;
+        padding-top: 0rpx;
+      }
+      .label-view {
+        font-size: 28rpx;
+        color: #5a6073;
+        margin-bottom: 22rpx;
+        padding-top: 6rpx;
+        &.is-daily {
+          padding-left: 14rpx;
+        }
+      }
+    }
+  }
+
+  .line-view {
+    background-color: #e8ebf3;
+    height: 2rpx;
+    width: 100%;
+    margin-bottom: 40rpx;
+    margin-top: 40rpx;
+  }
+
+  .pop-btn-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 48rpx;
+    left: 40rpx;
+    right: 40rpx;
+  }
+}
+</style>

src/components/answer-operation-tips/index.vue

@@ -25,7 +25,7 @@
 /**
  * @description 创建一个遮罩层，提示文字和图片
  * @property {Boolean} visible 是否显示遮罩（默认false）
- * @property {Object} custom-style 自定义样式对象，见上方说明
+ * @property {Object} customStyle 自定义样式对象，见上方说明
  * @example <answer-operation-tips :show.sync="show"></answer-operation-tips>
  */
 export default {

src/components/pop-view/index.vue

@@ -43,9 +43,18 @@
 <script>
 export default {
   props: {
-    visible: Boolean,
-    title: String,
-    message: String,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
     buttonText: {
       // 确定按钮
       type: String,