2022.6.27

2 years ago · edb142e583
parent f380221fff
commit edb142e583
11 changed files with 100 additions and 49 deletions
--- a/pages/answer/answer.vue
+++ b/pages/answer/answer.vue
@ -1,7 +1,7 @@
 <template>
  <div class="body">
    <div class="bkg">
-      <u-image mode="widthFix" width="100vw" :src="require('@/static/answer-bkg.png')"></u-image>
+      <u-image mode="aspectFill" height="100vh" width="100vw" :src="require('@/static/answer-bkg.png')"></u-image>
    </div>

    <div class="container">
@ -61,21 +61,17 @@
                  enter-active-class="fade-in"
                  leave-to-class="fade-out">
        <div :style="{ 'display': progress !== 3 ? 'none' : '' }"  class="answers correct" v-show="progress === 3">
+          <div class="answers__img">
+            <u-image mode="widthFix" :width="answerImgWidth" :src="answerImg"></u-image>
+          </div>
          <template>
            <template v-if="isCorrect">
-              <div class="answers__img">
-                <u-image mode="widthFix" :width="194" :src="require('@/static/correct.png')"></u-image>
-              </div>
-
              <div class="answers__text">
                恭喜你，答对了！
              </div>
            </template>
-            <template v-else>
-              <div class="answers__img">
-                <u-image mode="widthFix" :width="194" :src="require('@/static/error.png')"></u-image>
-              </div>

+            <template v-else>
              <div class="answers__text">
                正确答案：{{ correctAnswer }}
              </div>
@ -127,7 +123,6 @@ export default {
  methods: {
    async getDetail () {
      const res = await this.$u.api.getPoints()
-      this.isTotalEnd = res.points?.length == res.point_answer_total
      this.detail = res
    },
    async getQuestions (id) {
@ -151,7 +146,7 @@ export default {
        this.progress = this.now === (this.answers?.length - 1) ? 3 : 2

        if (this.progress === 3) {
-          this.isTotalEnd = this.detail.points?.length == ( Number(this.detail.point_answer_total) + 1)
+          this.isTotalEnd = this.detail.points?.length == this.totalDone
          this.$u.api.saveQuiz({
            point_id: this.$route.query?.id ? this.$route.query.id : this.vuex_point_id,
            answers: this.myAnswers
@ -175,6 +170,24 @@ export default {
    }
  },
  computed: {
+    answerImgWidth () {
+      if (this.isTotalEnd) {
+        return 370
+      }
+      if (this.isCorrect) {
+        return 194
+      }
+      return 184
+    },
+    answerImg () {
+      if (this.isTotalEnd) {
+        return require('@/static/error2.png')
+      }
+      if (this.isCorrect) {
+        return require('@/static/correct.png')
+      }
+      return require('@/static/error.png')
+    },
    totalDone () {
      if (this.detail && this.detail.points) {
        let id = this.$route.query?.id ? this.$route.query.id : this.vuex_point_id
@ -276,7 +289,7 @@ export default {
 }

 .container {
-  min-height: 936rpx;
+  min-height: 790rpx;

  padding-bottom: 96rpx;
  position: relative;
@ -378,6 +391,7 @@ export default {
      font-weight: 500;
      color: #666666;
      padding-top: 52rpx;
+      text-align: center;
      //line-height: 135rpx;

      & > span {
@ -390,6 +404,7 @@ export default {
      font-weight: 500;
      font-size: 20rpx;
      line-height: 36rpx;
+      word-break: break-word;

      padding: 0 calc(127rpx - 51rpx);
      padding-top: 38rpx;
--- a/pages/certificate/certificate.vue
+++ b/pages/certificate/certificate.vue
@ -1,8 +1,8 @@
 <template>
  <div class="body" id="signed">
-    <u-image class="bkg" :src="require('@/static/certificate-bkg.png')" mode="widthFix"></u-image>
+    <u-image class="bkg" width="100vw" height="100vh" :src="require('@/static/certificate-bkg.png')"></u-image>
    <u-image class="city" mode="widthFix" width="100vw" :src="require('@/static/city.png')"></u-image>
-    <u-image class="people" mode="widthFix" :width="298" :src="require('@/static/people.png')"></u-image>
+    <u-image class="people" mode="widthFix" :width="278" :src="require('@/static/people.png')"></u-image>
    <u-image mode="widthFix" width="100vw" class="piaodai" :src="require('@/static/piaodai.png')"></u-image>
    <u-image id="share-img" v-show="!isHidden" class="share-img" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')" @click="$u.throttle(share)"> mode=</u-image>
    <div class="content">
@ -184,6 +184,7 @@ export default {

 <style lang="scss">
 .body {
+  overflow: hidden;
  min-height: 100vh;

  position: relative;
@ -247,7 +248,7 @@ export default {

  position: absolute;
  right: 23rpx;
-  bottom: 0;
+  bottom: -120rpx;
 }
 .city {

@ -317,6 +318,7 @@ export default {
          text-decoration-color: #6F6F6F;
          text-decoration: underline;

+          padding: 0 8rpx;
        }
      }
      &--total {
@ -332,6 +334,7 @@ export default {
          text-decoration-color: #6F6F6F;
          text-decoration: underline;

+          padding: 0 4rpx;
        }
      }
    }
--- a/pages/detail/detail.vue
+++ b/pages/detail/detail.vue
@ -12,6 +12,13 @@ export default {
    };
  },
  methods: {
+    showVr (id) {
+      this.$u.api.baseFormShow({
+        table_name: 'map_point_contents',
+        id
+      })
+    },
+
    toAnswer () {
      uni.navigateTo({
        url: `/pages/answer/answer?id=${this.$route.query?.id}`
@ -66,6 +73,7 @@ export default {
        mask: true,
        title: '加载中'
      })
+      window.showVr = this.showVr
      window.toAnswer = this.toAnswer
      window.hideLoading = this.hiddenLoad

--- a/pages/map/map.vue
+++ b/pages/map/map.vue
@ -3,7 +3,7 @@
    <div class="top">
      <u-image mode="scaleToFill" width="100%" height="100%" :src="require('@/static/map-title-bkg.png')"></u-image>
    </div>
-    <div class="container">
+    <div class="container" id="img-container">
      <img ref="image"
           src="static/map.png"
           alt="" @load="load">
@ -23,19 +23,6 @@
               </div>
            <div class="box__text" :class="{ 'box__text--active': item.has_answer > 0 }" :style="{ 'transform': (item.d > 100 || item.d < -100) ? 'translate(-50rpx, 136rpx)' : '' }">{{ item.name }}</div>
          </div>
-
-<!--          <div class="box" :class="{ 'box&#45;&#45;active': item.has_answer > 0 }" :style="{ 'transform': `rotate(${item.d}deg)` }">-->
-<!--            <img :style="{ 'transform': `rotate(${-item.d}deg)` }" :src="item.image ? item.image.url : ''" alt="">-->
-
-<!--          </div>-->
-
-<!--          <div class="text"-->
-<!--               :class="{ 'text&#45;&#45;active': item.has_answer > 0 }"-->
-<!--               :style="{-->
-<!--                 'transform': translateText(item.d)-->
-<!--               }">-->
-<!--              {{ item.name }}-->
-<!--          </div>-->
        </div>
      </div>
    </div>
@ -45,23 +32,31 @@
                leave-to-class="fade-out">
      <div class="progress" v-show="isShowProgress">
        <div class="close">
-          <u-icon name="close-circle" :size="25" color="#666666" @click="isShowProgress = false"></u-icon>
+          <u-icon name="close-circle" :size="28" color="#555" @click="isShowProgress = false"></u-icon>
        </div>
        <div class="box">
          <div class="box__line-progress">
+            <u-image class="box__line-progress--bkg" width="100%" mode="widthFix" :src="require('@/static/progress-img.png')"></u-image>
            <u-line-progress :height="11" active-color="#b93736" :striped="true" :percent="(done/pointers.length)*100" :striped-active="true">
              <template #default>
                <div class="box__line-progress--img">
-                  <u-image mode="heightFix" :height="97" :src="require('@/static/line-progress-img.png')"></u-image>
+                  <u-image mode="heightFix" :height="83" :src="require('@/static/line-progress-img.png')"></u-image>
                </div>
              </template>
            </u-line-progress>
          </div>
          <div class="box__text">
-            <span>完成</span>
-            <span style="font-style: italic;padding-right: 4rpx;" class="box__text--red">{{pointers.length - done}}</span>
-            <span>家红色场馆打卡</span><br><span>即可获得</span>
-            <span class="box__text--red">荣誉证书</span>
+            <span>已完成</span>
+            <span style="font-style: italic;padding-right: 4rpx;" class="box__text--red">{{done}}</span>
+            <span>家红色场馆打卡</span>
+            <template v-if="done !== pointers.length">
+              <br><span>即可获得</span>
+              <span class="box__text--red">荣誉证书</span>
+            </template>
+            <template v-else>
+              <br><span>生成我的</span>
+              <span class="box__text--red" @click="$u.throttle(toCertificate)">荣誉证书</span>
+            </template>
          </div>
        </div>
      </div>
@ -112,6 +107,11 @@ export default {
    };
  },
  methods: {
+    toCertificate () {
+      uni.navigateTo({
+        url: '/pages/certificate/certificate'
+      })
+    },
    toDetail (item) {
      this.$u.vuex('vuex_point_id', item.id)
      uni.navigateTo({
@ -122,6 +122,16 @@ export default {
    load () {
      this.area.w = this.$refs['image'].getBoundingClientRect().width
      this.area.h = this.$refs['image'].getBoundingClientRect().height
+
+      this.$nextTick(() => {
+        let element = document.getElementById("img-container"); // 获取需要滚动的元素
+        let scrollLeft = element.scrollWidth / 2 - element.offsetWidth / 2; // 计算横向滚动条滚动的位置
+        let scrollTop = element.scrollHeight / 2 - element.offsetHeight / 2; // 计算纵向滚动条滚动的位置
+        element.scrollLeft = scrollLeft; // 设置横向滚动条的位置
+        element.scrollTop = scrollTop; // 设置纵向滚动条的位置
+
+      })
+
    },

    async getPoints () {
@ -203,13 +213,14 @@ export default {
  & > img {
    width: auto;
    height: 100%;
+    object-fit: contain;
    transition: all .2s;

    padding: 20rpx 0;
-    transform: translateX(-50%);
+    //transform: translateX(-50%);
    position: absolute;
    top: 0;
-    left: 50%;
+    left: 0;
  }
  & .area {
    padding: 20rpx 0;
@ -253,7 +264,7 @@ export default {
        position: absolute;
        &__text {
          width: 200rpx;
-          word-break: break-word;
+          word-break: break-all;
          background: #F5D8AD;
          border-radius: 6rpx;
          filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF);
@ -282,6 +293,7 @@ export default {
          justify-content: center;
          align-items: center;
          filter: drop-shadow(2rpx 4rpx 4rpx #90D2CF);
+          overflow: hidden;

          & > img {
            width: 106rpx;
@ -301,9 +313,8 @@ export default {
          background: #b93736;
          border-radius: 30rpx;
          zoom: .8;
-          clip-path: circle(84rpx at 84% 178%);

-          padding: 6rpx 14rpx 5rpx 122rpx;
+          padding: 10rpx 14rpx 5rpx 124rpx;
          z-index: 2;
          position: absolute;
          top: -1rpx;
@ -448,6 +459,15 @@ export default {
      display: flex;
      align-items: center;

+      position: relative;
+      &--bkg {
+        display: flex;
+
+        transform: translateY(calc(-100% - 7rpx));
+        position: absolute;
+        top: 50%;
+        left: 0;
+      }
      &--img {
        overflow: auto;

@ -459,7 +479,7 @@ export default {

    &__text {
      text-align: center;
-      zoom: .85;
+      zoom: .95;
      font-size: 16rpx;
      font-weight: 400;
      color: #666666;
--- a/static/error.png
+++ b/static/error.png
--- a/static/error2.png
+++ b/static/error2.png
--- a/static/html/explanation.html
+++ b/static/html/explanation.html
@ -104,7 +104,8 @@
 <script src="skin/default/js/swiper.min.js" type="text/javascript"></script>
 <script>
  var piclis,videolis
-
+  $('.common-title').eq(0).hide();
+  $('#swiper-vr .swiper-wrapper').hide();
  // s1k2Autoplay();

  function s1k2Autoplay() {
@ -180,6 +181,10 @@
    $(".videobox video").remove();
  });

+  function toOut(url, id) {
+    window.location.href = url
+    window.parent.showVr(id)
+  }

  function setDomData (obj) {
    let { detail, vrs, images } = obj;
@ -189,7 +194,7 @@
      $('#swiper-vr .swiper-wrapper').show();
      let dom = '';
      vrs.forEach(item => {
-        dom +=`<div class="swiper-slide"><a href="${item.url}"><div class="imgbox"><img src="${item.image?.url}"></div><div class="swiper-vrtitle"><span>${item?.name}</span></div><div class="vr-marker">${item.has_read > 0 ? '已看展' : '未看展'}</div><div class="shadow"></div></a></div>`
+        dom +=`<div class="swiper-slide"><a href="#" onclick="toOut('${item.url}','${item.id}')"><div class="imgbox"><img src="${item.image?.url}"></div><div class="swiper-vrtitle"><span>${item?.name}</span></div><div class="vr-marker">${item.has_read > 0 ? '已看展' : '未看展'}</div><div class="shadow"></div></a></div>`
      })
      $('#swiper-vr .swiper-wrapper').append($(dom));
      var swiper = new Swiper('#swiper-vr', {
@ -202,8 +207,8 @@
        spaceBetween: 12
      });
    } else {
-      $('.common-title').css('display', 'none');
-      $('#swiper-vr .swiper-wrapper').css('display', 'none');
+      $('.common-title').eq(0).hide();
+      $('#swiper-vr .swiper-wrapper').hide();
    }
    if (images.length > 0) {
      let dom = '';
@ -223,7 +228,7 @@
    }
    $('#swiper0 .swiper-wrapper').append($(`<div class="swiper-slide"><a href="javascript:;">
                  <div class="imgbox">
-                    <img src="${detail.video_image ? detail.video_image?.url : images[0]?.image?.url}">
+                    <img src="${detail.video_image ? detail.video_image?.url : detail.image?.url}">
                  </div>
                  <div class="playbtn" videourl = "${detail.video?.url}"></div>
                </a></div>`))
@ -246,7 +251,7 @@
      $(".showVideo").addClass("act");
    })

-    if(videolis >= 1 && piclis >= 1){
+    if(videolis >= 1 || piclis >= 1){
      $(".swiper-list:first").show().siblings(".swiper-list").hide();
    }

--- a/static/html/skin/default/css/css.css
+++ b/static/html/skin/default/css/css.css
@ -133,7 +133,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
    width:27.15rem;
 }
 .common-title{
-    display: none;
+
    width: 100%;
    padding:0 1.6rem;
    margin: 0 auto;
@ -241,7 +241,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
    font-style: normal;
 }
 .vrbox .swiper-slide-active .shadow{
-    display: none;
+
 }
 .study-swiperbox{
    padding: 0 1.6rem;
--- a/static/line-progress-img.png
+++ b/static/line-progress-img.png
--- a/static/map.png
+++ b/static/map.png
--- a/static/progress-img.png
+++ b/static/progress-img.png