2022.6.26

common/config.js

@@ -1,8 +1,8 @@
-const mode = 'devOnline'; //devLocal：本地测试、devOnline：线上测试、production：生产环境
+const mode = 'devLocal'; //devLocal：本地测试、devOnline：线上测试、production：生产环境
 let ROOTPATH = '';  //域名
 switch (mode) {
 	case 'devLocal':
-		ROOTPATH = "//vr.langye.net"
+		ROOTPATH = "http://h5.ali251.langye.net"
 		break;
 	case 'devOnline':
 		ROOTPATH = "//vr.langye.net"

common/http.api.js

@@ -3,10 +3,13 @@ let apiApp = {
 	login: '/api/mobile/user/wechat-login',
 	getAppId: '/api/mobile/user/wechat-login-url',
 	getQuestions: '/api/mobile/quiz/get-questions',
+	getPoints: '/api/mobile/map-point/point-list',
 	baseFormIndex: '/api/mobile/base-form/index',
 	baseFormShow: '/api/mobile/base-form/show',
 	baseFormSave: '/api/mobile/base-form/save',
-	baseFormDestroy: '/api/mobile/base-form/destroy'
+	baseFormDestroy: '/api/mobile/base-form/destroy',
+	saveQuiz: '/api/mobile/map-point/save-quiz',
+	pointDetail: '/api/mobile/map-point/point-detail',
 }
 
 // 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
@@ -16,12 +19,15 @@ const install = (Vue, vm) => {
 	let login = (params = {}) => vm.$u.get(apiApp.login, params);
 	let getAppId = (params = {}) => vm.$u.get(apiApp.getAppId, params);
   let getQuestions = (params = {}) => vm.$u.get(apiApp.getQuestions, params);
+	let getPoints = (params = {}) => vm.$u.get(apiApp.getPoints, params)
 	let baseFormIndex = (params = {}) => vm.$u.get(apiApp.baseFormIndex, params);
 	let baseFormShow = (params = {}) => vm.$u.get(apiApp.baseFormShow, params);
 	let baseFormSave = (data = {}) => vm.$u.post(apiApp.baseFormSave, data);
 	let baseFormDestroy = (params = {}) => vm.$u.post(apiApp.baseFormDestroy, params);
+	let saveQuiz = (params = {}) => vm.$u.post(apiApp.saveQuiz, params);
+	let pointDetail = (params = {}) => vm.$u.get(apiApp.pointDetail, params)
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
-	vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy };
+	vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail };
 }
 
 export default {

pages/answer/answer.vue

@@ -17,12 +17,12 @@
                   leave-to-class="fade-out">
         <div :style="{ 'display': progress !== 1 ? 'none' : '' }" v-show="progress === 1">
           <div class="question">
-            1921年，中国共产党召开了第一次全国代表大会，宣告中国共产党成立。你知道这次大会是在哪里召开的吗？
+            {{ questionTitle }}
           </div>
           <div class="answers">
-            <div class="answers__item" v-for="(item, index) in 4" @click="$u.throttle(() => answer(item, index))">
-              <div class="answers__item--num" :class="{ 'answers__item--num-active': index === flag }">{{num(index)}}</div>
-              <div class="answers__item--text" :class="{ 'answers__item--text-active': index === flag }">上海</div>
+            <div class="answers__item" v-for="(item, index) in questionAnswers" @click="$u.throttle(() => answer(item, index))">
+              <div class="answers__item--num" :class="{ 'answers__item--num-active': index === flag }">{{num(item.myindex)}}</div>
+              <div class="answers__item--text" :class="{ 'answers__item--text-active': index === flag }">{{item.title}}</div>
             </div>
           </div>
         </div>
@@ -32,13 +32,24 @@
                   enter-active-class="fade-in"
                   leave-to-class="fade-out">
         <div :style="{ 'display': progress !== 2 ? 'none' : '' }"  class="answers correct" v-show="progress === 2">
-          <div class="answers__img">
-            <u-image mode="widthFix" :width="194" :src="require('@/static/correct.png')"></u-image>
-          </div>
+          <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>
+            <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>
+
+            <div class="answers__text">
+              正确答案：{{ correctAnswer }}
+            </div>
+          </template>
 
           <div class="answers__btn" @click="$u.throttle(next)">
             <u-image mode="widthFix" :width="381" :src="require('@/static/next-btn.png')"></u-image>
@@ -50,17 +61,47 @@
                   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="194" :src="require('@/static/correct.png')"></u-image>
-          </div>
-
-          <div class="answers__text answers__result">
-            打卡成功，已完成<span>{{'3'}}</span>个红色场馆的打卡， 完成8家红色场馆打卡即可获得<span>荣誉证书</span>
-          </div>
-
-          <div class="answers__btn" @click="$u.throttle(next)">
-            <u-image mode="widthFix" :width="381" :src="require('@/static/back-home-btn.png')"></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>
+
+              <div class="answers__text">
+                正确答案：{{ correctAnswer }}
+              </div>
+            </template>
+          </template>
+
+          <template>
+            <template v-if="!isTotalEnd">
+              <div class="answers__text answers__result">
+                打卡成功，已完成<span>{{detail.point_answer_total + 1}}</span>个红色场馆的打卡， 完成{{detail.points.length}}家红色场馆打卡即可获得<span>荣誉证书</span>
+              </div>
+
+              <div class="answers__btn" @click="$u.throttle(toMap)">
+                <u-image mode="widthFix" :width="381" :src="require('@/static/back-home-btn.png')"></u-image>
+              </div>
+            </template>
+            <template v-else>
+              <div class="answers__text answers__result">
+                打卡成功，已完成所有红色场馆的打卡。 <br>快来生成你的证书吧!
+              </div>
+
+              <div class="answers__btn" @click="$u.throttle(toCertificate)">
+                <u-image mode="widthFix" :width="381" :src="require('@/static/certificate-btn.png')"></u-image>
+              </div>
+            </template>
+          </template>
         </div>
       </transition>
     </div>
@@ -71,21 +112,51 @@
 export default {
   data() {
     return {
+      isTotalEnd: false, //是否完成所有打卡
+      detail: {},
       now: 0,
       nowAnswer: {},
-      answers: [{},{},{}],
+      answers: [],
+      myAnswers: [],//回答答案数组
+      isCorrect: false,
 
       progress: 1,//1答题中2答案3结束
       flag: -1,//显示active index
     };
   },
   methods: {
+    async getDetail () {
+      const res = await this.$u.api.getPoints()
+      this.isTotalEnd = res.points.length == res.point_answer_total
+      this.detail = res
+    },
+    async getQuestions () {
+      const res = await this.$u.api.getQuestions({
+        point_id: this.vuex_point_id
+      })
+
+      this.answers = res.questions
+    },
+
     answer (item, index) {
       this.flag = index
+      this.myAnswers.push({
+        question_id: this.answers[this.now].id,
+        answer_ids: item.id
+      })
+      this.isCorrect = !!item.is_correct
 
       setTimeout(() => {
 
         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.$u.api.saveQuiz({
+            point_id: this.vuex_point_id,
+            answers: this.myAnswers
+          })
+        }
       },500)
     },
 
@@ -93,21 +164,42 @@ export default {
       this.now ++
       this.flag = -1
       this.progress = 1
+    },
+
+    toMap () {
+      uni.navigateTo({ url:'/pages/map/map' })
+    },
+
+    toCertificate () {
+      uni.navigateTo({ url:'/pages/certificate/certificate'})
     }
   },
   computed: {
+    correctAnswer () {
+      let correct = this.answers[this.now]?.options?.find(i => i.is_correct)
+      return `${this.num(correct?.myindex)}、${correct?.title}`
+    },
+    questionTitle () {
+      return this.answers[this.now]?.title
+    },
+    questionAnswers () {
+      return this.answers[this.now]?.options?.sort((a, b) => {
+        return a.myindex - b.myindex
+      })
+    },
+
     num () {
       return function (index) {
         let map = new Map([
-          [0,'A'],
-          [1,'B'],
-          [2,'C'],
-          [3,'D'],
-          [4,'E'],
-          [5,'F'],
-          [6,'G'],
-          [7,'H'],
-          [8,'I'],
+          [1,'A'],
+          [2,'B'],
+          [3,'C'],
+          [4,'D'],
+          [5,'E'],
+          [6,'F'],
+          [7,'G'],
+          [8,'H'],
+          [9,'I'],
         ])
         return map.get(index)
       }
@@ -153,6 +245,10 @@ export default {
         return `第${chineseNumber}题`;
       }
     }
+  },
+  onShow() {
+    this.getQuestions();
+    this.getDetail();
   }
 }
 </script>
@@ -272,7 +368,8 @@ export default {
       font-size: 32rpx;
       font-weight: 500;
       color: #666666;
-      line-height: 135rpx;
+      padding-top: 52rpx;
+      //line-height: 135rpx;
 
       & > span {
         font-size: 34rpx;
@@ -286,6 +383,7 @@ export default {
       line-height: 36rpx;
 
       padding: 0 calc(127rpx - 51rpx);
+      padding-top: 38rpx;
     }
   }
 }

pages/certificate/certificate.vue

@@ -1,9 +1,34 @@
 <template>
   <div class="body">
     <u-image class="bkg" :src="require('@/static/certificate-bkg.png')" mode="widthFix"></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 mode="widthFix" width="100vw" class="piaodai" :src="require('@/static/piaodai.png')"></u-image>
+    <u-image class="share" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')"> mode=</u-image>
+    <div class="content">
+      <u-image style="display:flex;align-items: center;margin: auto;" mode="widthFix" :width="335" :src="require('@/static/certificate-word.png')"></u-image>
 
-    <div class>
+      <div class="container">
+        <u-image class="container__jiangbei" :height="206" mode="heightFix" :src="require('@/static/jiangbei.png')"></u-image>
+        <u-image class="container__bkg" height="100%" width="100%" mode="scaleToFill" :src="require('@/static/container-bkg.png')"></u-image>
 
+        <div class="container__text">
+          <div class="container__text--title">
+            <span>王晓明</span>同学，
+          </div>
+          <div class="container__text--total">
+            你已完成2023年“我是党史记录人——红色少年行”未成年人研学线上打卡。
+          </div>
+          <div class="container__text--total">
+            学党史悟精神聚力量，你是第<span>2023</span>位完成者，快邀请你的同学一起完成线上打卡吧!
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      主办单位：中共苏州市委党史工作办公室 <br>
+      承办单位：江苏有线苏州分公司
     </div>
   </div>
 </template>
@@ -18,9 +43,85 @@ export default {
 
 <style lang="scss">
 .body {
+  min-height: 100vh;
 
   position: relative;
 }
+.footer {
+  text-align: center;
+  font-size: 18rpx;
+  font-weight: 400;
+  color: #F8DB97;
+
+  padding: 20rpx 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+/* ----------------------------------------------
+ * Generated by Animista on 2023-6-26 17:51:36
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation jello-horizontal
+ * ----------------------------------------
+ */
+@keyframes jello-horizontal {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  15% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  20% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  25% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  33% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  38% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  50% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.share {
+  animation: jello-horizontal 3.2s both infinite;
+
+  position: fixed;
+  left: 55rpx;
+  bottom: 86rpx;
+}
+.people {
+
+  position: absolute;
+  right: 23rpx;
+  bottom: 0;
+}
+.city {
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 154rpx;
+}
+.piaodai {
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -22rpx;
+}
 .bkg {
 
   position: absolute;
@@ -29,4 +130,70 @@ export default {
   right: 0;
   bottom: 0;
 }
+
+.content {
+
+  padding-top: 143rpx;
+  position: relative;
+
+  .container {
+
+    z-index: 2;
+    margin-top: 23rpx;
+    position: relative;
+    &__jiangbei {
+      display: flex;
+      justify-content: center;
+
+      z-index: 3;
+      position: relative;
+    }
+    &__bkg {
+
+      z-index: 1;
+      position: absolute;
+      top: 103rpx;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+
+    &__text {
+
+      z-index: 4;
+      padding: 61rpx 63rpx 0 104rpx;
+      position: relative;
+      &--title {
+        font-weight: 400;
+        color: #6F6F6F;
+        font-size: 28rpx;
+        line-height: 56rpx;
+
+        & > span {
+          color: #FD4949;
+          line-height: 56rpx;
+          text-decoration-color: #6F6F6F;
+          text-decoration: underline;
+
+        }
+      }
+      &--total {
+        text-indent: 56rpx;
+        font-weight: 400;
+        color: #6F6F6F;
+        font-size: 28rpx;
+        line-height: 56rpx;
+
+        & > span {
+          color: #FD4949;
+          line-height: 56rpx;
+          text-decoration-color: #6F6F6F;
+          text-decoration: underline;
+
+        }
+      }
+    }
+  }
+}
 </style>

pages/detail/detail.vue

@@ -7,7 +7,9 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      flag: true
+    };
   },
   methods: {
     toAnswer () {
@@ -16,18 +18,33 @@ export default {
       })
     },
 
+    async getImages (id) {
+      const res = await this.$u.api.baseFormIndex({
+        table_name: 'map_point_images',
+        'with_relations[0]': 'image',
+        'with_relations[1]': 'video',
+        'filter[0][key]': 'map_point_id',
+        'filter[0][op]': 'eq',
+        'filter[0][value]': id
+      })
+
+      return res
+    },
+
     async getDetail (id) {
-      const res = await this.$u.api.baseFormShow({
-        table_name: 'map_points',
+      const res = await this.$u.api.pointDetail({
+        //table_name: 'map_points',
         'with_relations[0]': 'image',
         'with_relations[1]': 'video',
+        'with_relations[2]': 'videoImage',
+        'with_relations[3]': 'mapPointContent',
         id
       })
 
       return res
     },
     async getVrs (id) {
-      const res = await this.$u.api.baseFormIndex({
+      const res = await this.$u.api.pointDetail({
         table_name: 'map_point_contents',
         'with_relations[0]': 'image',
         'with_relations[1]': 'video',
@@ -37,18 +54,32 @@ export default {
       })
 
       return res
+    },
+
+    hiddenLoad () {
+      uni.hideLoading()
     }
   },
-  onLoad(option) {
-    window.toAnswer = this.toAnswer
-
-    this.$nextTick(() => {
-      this.$refs['iframe'].onload = async () => {
-        let detail = await this.getDetail(option.id)
-        let vrs = await this.getVrs(option.id)
-        this.$refs['iframe'].contentWindow.setDomData({ detail , vrs })
-      }
-    })
+  onLoad () {
+    if (this.flag) {
+      uni.showLoading({
+        mask: true,
+        title: '加载中'
+      })
+      window.toAnswer = this.toAnswer
+      window.hideLoading = this.hiddenLoad
+
+      this.$nextTick(() => {
+        this.$refs['iframe'].onload = async () => {
+          let detail = await this.getDetail(this.vuex_point_id)
+          let vrs = detail.content
+          let images = await this.getImages(this.vuex_point_id)
+          this.$refs['iframe'].contentWindow.setDomData({ detail: detail.points , vrs: vrs, images: images.data })
+        }
+      })
+
+      this.flag = false
+    }
   },
 }
 </script>

pages/map/map.vue

@@ -13,13 +13,14 @@
              v-for="(item, index) in pointers"
              :key="index"
              :style="{ 'transform': `translate(calc(${area.w * item.x / 100}px - 50%),calc(${area.h * item.y / 100}px - 50%))` }"
-             @click="$u.throttle(() => toDetail(index))">
-          <div class="box" :style="{ 'transform': `rotate(${item.d}deg)` }">
-            <img :style="{ 'transform': `rotate(${-item.d}deg)` }" :src="item.image.url" alt="">
+             @click="$u.throttle(() => toDetail(item))">
+          <div class="box" :class="{ 'box--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--active': item.has_answer > 0 }"
                :style="{
                  'transform': translateText(item.d)
                }">
@@ -38,7 +39,7 @@
         </div>
         <div class="box">
           <div class="box__line-progress">
-            <u-line-progress :height="11" active-color="#b93736" :striped="true" :percent="70" :striped-active="true">
+            <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>
@@ -48,7 +49,7 @@
           </div>
           <div class="box__text">
             <span>完成</span>
-            <span style="font-style: italic;padding-right: 4rpx;" class="box__text--red">{{pointers.length}}</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>
           </div>
@@ -70,6 +71,7 @@
 export default {
   data() {
     return {
+      done: 0,
       isShowProgress: true,
       area: {
         w: 100,
@@ -100,9 +102,10 @@ export default {
     };
   },
   methods: {
-    toDetail (id) {
+    toDetail (item) {
+      this.$u.vuex('vuex_point_id', item.id)
       uni.navigateTo({
-        url: `/pages/detail/detail?id=${id}`
+        url: `/pages/detail/detail`
       })
     },
 
@@ -122,17 +125,12 @@ export default {
         }
       }
       this.pointers = []
-      const res = await this.$u.api.baseFormIndex({
-        table_name: 'map_points',
-        with_relations: ['image']
-      })
-      this.pointers = res.data.map((i, index) => {
+      const res = await this.$u.api.getPoints()
+      this.done = res.point_answer_total || 0
+      this.pointers = res.points?.map((i, index) => {
         return {
-          name: i.name,
-          x: typeof i.x === 'string' ? Number(i.x) : 0,
-          y: typeof i.y === 'string' ? Number(i.y) : 0,
-          d: convertToEquivalentAngle(30 * index + 1),
-          image: i.image
+          d: convertToEquivalentAngle(60 * index + 1),
+          ...i
         }
       })
     }
@@ -157,7 +155,7 @@ export default {
   mounted() {
 
   },
-  onShow() {
+  onLoad() {
     this.getPoints()
   }
 }
@@ -214,6 +212,11 @@ export default {
 
         padding: 12rpx 10rpx;
         position: absolute;
+
+        &--active {
+          background: #b93736;
+          color: #fff;
+        }
       }
       & .box {
         width: 116rpx;
@@ -227,26 +230,14 @@ export default {
         filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF);
         transform-origin: 50% calc(100% + 26rpx + 5rpx);
 
+       // overflow: hidden;
         position: absolute;
         top: calc(-116rpx - 26rpx);
         left: -50rpx;
 
-
-        //&__text {
-        //  background: #F5D8AD;
-        //  border-radius: 6rpx;
-        //  word-break: keep-all;
-        //  filter: drop-shadow(2rpx 4rpx 2rpx #90D2CF);
-        //  color: #C52A34;
-        //  font-size: 20rpx;
-        //  text-align: center;
-        //
-        //
-        //  transform: translate(-50%, -100%);
-        //  position: absolute;
-        //  top: 0;
-        //  left: 50%;
-        //}
+        &--active {
+          border-color: #b93736;
+        }
         & > img {
           width: 106rpx;
           height: 106rpx;
@@ -265,6 +256,24 @@ export default {
           bottom: 0;
           left: 50%;
         }
+        &--active::before {
+          content: '已打卡';
+          font-size: 20rpx;
+          color: #fff;
+          background: #b93736;
+          border-radius: 30rpx;
+          zoom: .8;
+          clip-path: circle(84rpx at 84% 178%);
+
+          padding: 6rpx 14rpx 5rpx 122rpx;
+          z-index: 2;
+          position: absolute;
+          top: -1rpx;
+          left: -96rpx;
+        }
+        &--active::after {
+          background: #b93736;
+        }
       }
     }
 

static/html/explanation.html

@@ -31,30 +31,7 @@
   <div class="vrbox">
     <div class="swiper-container" id="swiper-vr">
       <div class="swiper-wrapper">
-        <div class="swiper-slide"><a href="#">
-          <div class="imgbox">
-            <img src="skin/default/images/img1.jpg">
-          </div>
-          <div class="swiper-vrtitle"><span>习近平新时代中国特色社会主义思想指引下的苏州实践</span></div>
-          <div class="vr-marker">已看展</div>
-          <div class="shadow"></div>
-        </a></div>
-        <div class="swiper-slide"><a href="#">
-          <div class="imgbox">
-            <img src="skin/default/images/img1.jpg">
-          </div>
-          <div class="swiper-vrtitle"><span>光辉的历程·苏州篇章</span></div>
-          <div class="vr-marker">未看展</div>
-          <div class="shadow"></div>
-        </a></div>
-        <div class="swiper-slide"><a href="#">
-          <div class="imgbox">
-            <img src="skin/default/images/img1.jpg">
-          </div>
-          <div class="swiper-vrtitle"><span>光辉的历程·苏州篇章</span></div>
-          <div class="vr-marker">未看展</div>
-          <div class="shadow"></div>
-        </a></div>
+
       </div>
     </div>
   </div>
@@ -72,24 +49,6 @@
           <div class="swiper-list" data-num="0">
             <div class="swiper-container" id="swiper0">
               <div class="swiper-wrapper">
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                  <div class="playbtn" videourl = "skin/default/images/video-test1.mp4"></div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                  <div class="playbtn" videourl = "skin/default/images/video-test2.mp4"></div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                  <div class="playbtn" videourl = "skin/default/images/video-test1.mp4"></div>
-                </a></div>
               </div>
               <div class="swiper-pagination"></div>
             </div>
@@ -98,36 +57,7 @@
             <!-- 图片轮播 -->
             <div class="swiper-container" id="swiper1">
               <div class="swiper-wrapper">
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
-                <div class="swiper-slide"><a href="javascript:;">
-                  <div class="imgbox">
-                    <img src="skin/default/images/swiperimg.jpg">
-                  </div>
-                </a></div>
+
               </div>
               <div class="swiper-pagination"></div>
             </div>
@@ -140,11 +70,9 @@
       </div>
       <div class="studyContent">
         <!-- 详情 -->
-        <div class="tit-top"><img src="skin/default/images/title_museum.png"></div>
+        <div class="tit-top"><img src="skin/default/images/title_museum.png"><span class="tit-top-text"></span></div>
         <div class="contentbox">
           <div class="newstext">
-            <p>苏州革命博物馆建成于1993年，占地10000多平方米，展区分两层，面积4000平方米，共有两项基本陈列和两个临时展厅。整体建筑具有鲜明的革命纪念主题特色和浓厚的历史文化气息。</p>
-            <p>基本陈列“光辉的历程一中国共产党在苏州”，借助历史照片、文字和革命文物等，系统讲述了在中国共产党在苏州的百年光辉历程。大型多媒体半景画演示项目《阳澄烽火》，借助声、光、电等多种演示手段与1000平方米的巨型油画、500平方米的场景模型完美结合，细致还原了发生在抗日战争时期阳澄湖地区的“洋沟港战斗”目前，苏州革命博物馆荣获省爱国主义教育基地、省党史教育基地、省社会科学普及示范基地、省国防教育基地、省青少年科技教育示范基地及省级党员教育实境课堂示范点等称号</p>
           </div>
           <div class="lookMore">查看更多</div>
         </div>
@@ -175,49 +103,8 @@
 <link href="skin/default/css/swiper.min.css" rel="stylesheet" type="text/css">
 <script src="skin/default/js/swiper.min.js" type="text/javascript"></script>
 <script>
-  var swiper = new Swiper('#swiper-vr', {
-    loop:true,
-    autoplay: 3500,
-    autoplayDisableOnInteraction : false,
-    pagination: '#swiper-vr .swiper-pagination',
-    slidesPerView: 'auto',
-    paginationClickable: true,
-    spaceBetween: 12
-  });
-  var videolis = $("#swiper0 .swiper-slide").length;
-  var piclis = $("#swiper1 .swiper-slide").length;
-  $(".swiper-btn li.videonum").html(videolis);
-  $(".swiper-btn li.picnum").html(piclis);
+  var piclis,videolis
 
-  if(videolis >= 1 && piclis >= 1){
-    $(".swiper-list:first").show().siblings(".swiper-list").hide();
-  }
-  if(videolis==""){
-    $(".swiper-btn li.videonum").hide();
-  }
-  if(piclis==""){
-    $(".swiper-btn li.picnum").hide();
-  }
-  $('.swiper-btn li:first').addClass("on").siblings().removeClass('on');
-  var swiper1,swiper2;
-  swiper1 = createSwiper(0);
-
-  $('.swiper-btn li').each(function() {
-    var index = $(this).index();
-    $(this).attr('data-num',index);
-  });
-
-  $('.swiper-btn li').click(function() {
-    var shu = $(this).stop().attr('data-num');
-    $(this).stop().addClass('on');
-    $(this).siblings('li').stop().removeClass('on');
-    $('.swiper-list[data-num=' + shu + ']').stop().fadeIn().siblings(".swiper-list").stop().hide();
-    if(shu == 0){
-      swiper1 = createSwiper(0);
-    }else if(shu == 1){
-      swiper2 = createSwiper(1);
-    }
-  });
   // s1k2Autoplay();
 
   function s1k2Autoplay() {
@@ -281,16 +168,6 @@
     return swiper;
   }
 
-  $(".lookMore").click(function(){
-    $(".newstext").css("height","auto");
-    $(this).hide();
-  })
-
-  $(".playbtn").click(function(){
-    $(".videobox").empty(' ');
-    showVideo(this);
-    $(".showVideo").addClass("act");
-  })
   var html=" ";
   function showVideo(obj){
     var videourl = $(obj).attr("videourl");
@@ -305,8 +182,96 @@
 
 
   function setDomData (obj) {
-    let { detail, vrs } = obj;
-    console.log($('.newstext').children('p')[1].innerHTML = obj.a)
+    let { detail, vrs, images } = obj;
+    if (vrs.length > 0) {
+
+      $('.common-title').show();
+      $('#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>`
+      })
+      $('#swiper-vr .swiper-wrapper').append($(dom));
+      var swiper = new Swiper('#swiper-vr', {
+        loop:true,
+        autoplay: 3500,
+        autoplayDisableOnInteraction : false,
+        pagination: '#swiper-vr .swiper-pagination',
+        slidesPerView: 'auto',
+        paginationClickable: true,
+        spaceBetween: 12
+      });
+    } else {
+      $('.common-title').css('display', 'none');
+      $('#swiper-vr .swiper-wrapper').css('display', 'none');
+    }
+    if (images.length > 0) {
+      let dom = '';
+      images.forEach(item => {
+        dom += `<div class="swiper-slide"><a href="javascript:;">
+                  <div class="imgbox">
+                    <img src="${item.image?.url}">
+                  </div>
+                </a></div>`
+      })
+      $('#swiper1 .swiper-wrapper').append($(dom));
+
+      if(piclis==""){
+        $(".swiper-btn li.picnum").hide();
+      }
+      swiper1 = createSwiper(1);
+    }
+    $('#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}">
+                  </div>
+                  <div class="playbtn" videourl = "${detail.video?.url}"></div>
+                </a></div>`))
+
+    videolis = $("#swiper0 .swiper-slide").length;
+    piclis = $("#swiper1 .swiper-slide").length;
+    $(".swiper-btn li.videonum").html(videolis);
+    $(".swiper-btn li.picnum").html(piclis);
+    if(videolis==""){
+      $(".swiper-btn li.videonum").hide();
+    }
+    $(".lookMore").click(function(){
+      $(".newstext").css("height","auto");
+      $(this).hide();
+    })
+
+    $(".playbtn").click(function(){
+      $(".videobox").empty(' ');
+      showVideo(this);
+      $(".showVideo").addClass("act");
+    })
+
+    if(videolis >= 1 && piclis >= 1){
+      $(".swiper-list:first").show().siblings(".swiper-list").hide();
+    }
+
+    $('.swiper-btn li:first').addClass("on").siblings().removeClass('on');
+
+    $('.swiper-btn li').each(function() {
+      var index = $(this).index();
+      $(this).attr('data-num',index);
+    });
+
+    $('.swiper-btn li').click(function() {
+      var shu = $(this).stop().attr('data-num');
+      $(this).stop().addClass('on');
+      $(this).siblings('li').stop().removeClass('on');
+      $('.swiper-list[data-num=' + shu + ']').stop().fadeIn().siblings(".swiper-list").stop().hide();
+      if(shu == 0){
+        swiper1 = createSwiper(0);
+      }else if(shu == 1){
+        swiper2 = createSwiper(1);
+      }
+    });
+
+    $('.contentbox .newstext').append($(detail?.content))
+    $('.tit-top .tit-top-text').text(detail?.name)
+    window.parent.hideLoading()
   }
 </script>
 </body>

static/html/skin/default/css/css.css

@@ -133,6 +133,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     width:27.15rem;
 }
 .common-title{
+    display: none;
     width: 100%;
     padding:0 1.6rem;
     margin: 0 auto;
@@ -174,9 +175,14 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
 
 .vrbox .swiper-slide img{
     width: 21.9rem;
+    height: 15rem;
+    object-fit: contain;
     border-radius: .75rem;
 }
 .vrbox .swiper-slide .swiper-vrtitle{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
     position: relative;
     margin-top: .6rem;
     height: 4rem;
@@ -251,6 +257,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     position: relative;
 }
 .swiper-btn{
+    display: flex;
     position: absolute;
     left: 1.3rem;
     bottom: .8rem;
@@ -294,6 +301,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
 }
 .study-party .swiper-slide img{
     width: 100%;
+    height: 17rem;
     vertical-align: middle;
 }
 .study-party .swiper-slide .playbtn{
@@ -315,6 +323,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     opacity: 0;
 }
 .study-right{
+    height: 17rem;
     float: right;
     width: 30.511%;
 }
@@ -323,6 +332,8 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     padding: 1.8rem 1.6rem;
 }
 .tit-top{
+    display: flex;
+    align-items: center;
     width:100%;
     background-image: url(../images/bg2.png);
     background-repeat: no-repeat;
@@ -331,7 +342,15 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     margin-bottom: 1rem;
 }
 .tit-top img{
-    width:13.6rem;
+    height: 3rem;
+    width: 3rem;
+    object-fit: cover;
+}
+.tit-top-text {
+    color:  #c53135;
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-left: 1rem;
 }
 .contentbox{
     position:relative;
@@ -379,7 +398,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     background: url(../images/answerbg.png) no-repeat center top;
     background-size: 100% auto;
     padding-top: 4.2rem;
-    padding-left:8.8rem;
+    padding-left: 8.8rem;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -388,6 +407,7 @@ textarea::-webkit-input-placeholder{ color:#aaa; }
     color:#fbf2dd;
     line-height: 1.4rem;
     font-size:1rem;
+    zoom: .9;
 }
 .showVideo{
     position: fixed;

store/index.js

@@ -36,6 +36,8 @@ const store = new Vuex.Store({
 		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '1945|mGcboS5ApGYxvWUUJNk2ytorapfOU18d20AgiXqJ',
 		// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
 		vuex_version: '1.0.0',
+
+		vuex_point_id: '',
 	},
 	mutations: {
 		$uStore(state, payload) {