拼图完成

src/views/ningdongyunying/puzzle/puzzle-infos.vue

@@ -2,20 +2,20 @@
   <!-- :style="{transform: `translateX(${clickStartBtn?-100:0}vw)`}" -->
   <div id="apps">
     <div v-if="shows">
-      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
+      <van-nav-bar title="智慧拼图" left-arrow @click-left="onClickLeft" />
     </div>
     <div class="wrap" ref="wrap">
       <div class="start-page">
-        <div class="headers">
+        <div class="headers" >
           <img src="../../../assets/images/ningdongyunying/puzzle/抬头1.png" />
-          <div class="headers-left">5</div>
-          <div class="headers-right">4</div>
+          <div class="headers-left">{{complete_num}}</div>
+          <div class="headers-right">{{no_complete_num}}</div>
           <div class="header-content">
             <div
               style="width: 100px; height: 100px"
               ref="hygrometer"
               id="hygrometer"
-            ></div>
+            >{{jindu}}</div>
           </div>
         </div>
         <div class="album-list">
@@ -27,20 +27,20 @@
             @click="getItem(index, item.id)"
           >
             <div class="img-wrap-imgs">
-              <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" v-if="imgshow==item.sc" />
-              <img :src="item.url" alt=""  v-else />
-              <p v-if="pshow==item.sc">最快时间：10s</p>
+              <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" v-if="imgshow==item.complete_status" />
+              <img :src="item.picture" alt=""  v-else />
+              <p v-if="pshow==item.complete_status">用时:{{item.completion_time}}s</p>
             </div>
             <!-- <button @click="startGame(index)">开始</button> -->
             <div class="contents-list-item-button" @click="startGame(index)">
               <img
-                src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png" v-if="imgshow==item.sc"
+                src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png" v-if="imgshow==item.complete_status"
               />
               <img
                 src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png" v-else
               />
-              <p v-if="imgshow==item.sc">未解锁</p>
-              <p v-else>图片名称</p>
+              <p v-if="imgshow==item.complete_status">未解锁</p>
+              <p v-else>{{item.name}}</p>
             </div>
           </div>
           <!-- <div class="img-wrap" v-if="!uploadimg">
@@ -136,21 +136,7 @@ export default {
       pool: this.generateMatrix(3, 28, 20),
       matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
       //  matrixArr:this.shuffle(this.pieces, this.pool),
-      imgArr: [
-        { url: require("../../../assets/images/puzzles/timg.jpeg"), id: 1 ,sc:1},
-        {
-          url: require("../../../assets/images/puzzles/2020-10-22-pic2.jpeg"),
-          id: 2,sc:0
-        },
-        {
-          url: require("../../../assets/images/puzzles/2020-10-22-pic47.jpeg"),
-          id: 3,sc:1
-        },
-        {
-          url: require("../../../assets/images/puzzles/2020-10-22-pic3.jpeg"),
-          id: 4,sc:0
-        },
-      ],
+      imgArr: [],
       wall: 0,
       prevEl: null, // 上一个元素,
       dealtime: 180,
@@ -158,10 +144,16 @@ export default {
       issuccess: false,
       canvasUrl: "",
       isVisible: false,
-      shows: true,
+      shows: false,
       infos_id: 0,//图片id
       pshow:1,//是否显示p标签
-      imgshow:0,//是否显示img
+      imgshow:null,//是否显示img
+      jindu: sessionStorage.getItem("mjindu")
+        ? sessionStorage.getItem("myjindu")
+        : 0, //token值保存在本地，有的话取值，没有为空
+      complete_num:0,//已完成
+      no_complete_num:0,//未完成
+      jindus:0
     };
   },
   methods: {
@@ -197,8 +189,8 @@ export default {
       this.timer = setInterval(this.timeStart, 1000);
       this.startDx = this.startDx - 100;
       this.transformX(this.$refs.wrap, this.startDx + "vw");
-      this.selectedImg = this.imgArr[picIndex].url;
-
+      this.selectedImg = this.imgArr[picIndex].picture;
+      // console.log(this.selectedImg);
       this.shuffle(document.querySelectorAll(".piece"), this.pool);
       //   console.log(222);
     },
@@ -456,7 +448,7 @@ export default {
       return image;
     },
 
-    drawLiquidfill() {
+    drawLiquidfill(num) {
       // 基于准备好的dom，初始化echarts实例
       let hygrometer = echarts.init(document.getElementById("hygrometer"));
       // 使用指定的配置项和数据显示图表
@@ -470,7 +462,7 @@ export default {
             name: "puzzle",
             type: "liquidFill",
             radius: "80px",
-            data: [0.45],
+            data: [this.jindu],
             // direction: "none", //取消移动方向
             // amplitude: 0, //波的振幅
             // waveAnimation: false, //动画效果
@@ -536,12 +528,14 @@ export default {
       }).then(res=>{
         console.log(res);
       })
+      this.getxinxi(this.$route.query.id)
       this.reload(); //使用无痕刷新重新渲染页面
     },
     //tabber返回按钮
     onClickLeft() {
       window.history.back();
     },
+    
     //获取图片信息
     getpuzzle(id) {
       // console.log(id);
@@ -554,18 +548,44 @@ export default {
         )
         .then((res) => {
           console.log(res);
+          this.imgArr=res.data.data.data
         });
     },
+    //进度信息
+    getxinxi(id){
+      // console.log(id);
+      this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/jigsawPuzzle/getPercentCompleteData",{
+        special_id:id
+      }).then(res=>{
+        // console.log(res.data.data);
+        // console.log(res.data.data.complete_num);
+        var jindus=res.data.data.percent_complete/100;
+        this.no_complete_num=res.data.data.no_complete_num;
+        this.complete_num=res.data.data.complete_num;
+        this.jindu=jindus;
+        sessionStorage.setItem("myjindu", this.jindu); //存入token值
+        // console.log(this.jindu);
+        this.drawLiquidfill(this.jiudu)
+        // this.PercentCompleteData=res.data.data
+      })
+      // this.reload(); //使用无痕刷新重新渲染页面
+    },
   },
+  created(){
+    this.getxinxi(this.$route.query.id)
+  },
+
   mounted() {
     document.body.style.backgroundColor = "#39f"; //背景色
     // this.gettoken = getAllUrlParams(window.location.href).token;
     // this.token = `Bearer ${this.gettoken}`; //获取token值
     this.token=getAllUrlParams(window.location.href).token;
-    console.log(this.token);
+    // console.log(this.token);
     // sessionStorage.setItem("mytoken", this.token); //存入token值
     this.drawLiquidfill();
     this.getpuzzle(this.$route.query.id);
+    this.shows = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
+    console.log(this.shows);
     // console.log(this.dealtime);
     // console.log(1/this.imgArr.length);
   },
@@ -633,6 +653,8 @@ div {
 
 .start-page .album-list {
   width: 90%;
+  height: 65vh;
+  overflow: auto;
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;

src/views/ningdongyunying/puzzle/puzzle.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div v-if="show">
-      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
+    <div v-if="shows">
+      <van-nav-bar title="智慧拼图" left-arrow @click-left="onClickLeft" />
     </div>
     <div class="kj" v-for="(item,index) in listvalue" :key="index">
       <div class="kj-position">
@@ -12,15 +12,15 @@
         <!-- <div class="kj-background-header">有效时间:{{item.created_at}}</div> -->
         <div class="kj-background-header" v-if="colors==items.status">
           <img src="../../../assets/images/ningdongyunying/puzzle/限时黄.png" alt="">
-          <p>有效时间:{{item.created_at}}</p>
+          <p>有效时间:{{`${items.start_time?items.start_time:"暂未"}-${items.end_time?items.end_time:"开始"}`}}</p>
         </div>
         <div class="kj-background-header" v-else>
           <img src="../../../assets/images/ningdongyunying/puzzle/限时灰.png" alt="">
-          <p>有效时间:{{item.created_at}}</p>
+          <p>有效时间:{{`${items.start_time?items.start_time:"暂未"}-${items.end_time?items.end_time:"开始"}`}}</p>
         </div>
         <div class="kj-content">
           <p>{{items.name}}</p>
-          <div class="kj-content-item" @click="jump(item.id)">
+          <div class="kj-content-item" @click="jump(items.id)">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -29,9 +29,9 @@
         </div>
         <div class="kj-progress">
           <div class="kj-progress-item">
-            <van-progress :percentage="item.percent_complete" color="#00fff8" :show-pivot="false"/>
+            <van-progress :percentage="items.percent_complete" color="#00fff8" :show-pivot="false"/>
           </div>
-          <span>{{item.percent_complete?item.percent_complete:"0"}}%</span>
+          <span>{{items.percent_complete}}%</span>
         </div>
       </div>
       <!-- <div class="kj-background">
@@ -104,7 +104,7 @@ import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsul
 export default {
   data() {
     return {
-      show: true,
+      shows: false,
       token: sessionStorage.getItem("mytoken")
         ? sessionStorage.getItem("mytoken")
         : "", //token值保存在本地，有的话取值，没有为空
@@ -112,7 +112,8 @@ export default {
       colors:1,
       names:"",
       passwords:"",
-      gettoken:""
+      gettoken:"",
+      jindu:0
     };
   },
   created(){
@@ -120,11 +121,11 @@ export default {
   },
   mounted() {
     document.body.style.backgroundColor = "#39f"; //背景色
-    // this.gettoken = getAllUrlParams(window.location.href).token;
-    // this.token = `Bearer ${this.gettoken}`; //获取token值
-    // sessionStorage.setItem("mytoken", this.token); //存入token值
-    // this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
-    this.gettokens()
+    this.gettoken = getAllUrlParams(window.location.href).token;
+    this.token = `Bearer ${this.gettoken}`; //获取token值
+    sessionStorage.setItem("mytoken", this.token); //存入token值
+    this.shows = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
+    // this.gettokens()
     this.getspecial()
   },
   methods: {
@@ -134,7 +135,7 @@ export default {
     },
     jump(id){
       // console.log(id);
-      this.$router.push(`/ningdongyunying/puzzle/puzzle-infos?token=${this.token}&id=${id}`)
+      this.$router.push(`/ningdongyunying/puzzle/puzzle-infos?token=${this.token}&id=${id}&tabbar=${this.shows}`)
     },
     gettokens(){
       let that=this;
@@ -152,14 +153,12 @@ export default {
     },
     getspecial(){
       this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/jigsawPuzzle/specialList").then(res=>{
-        // console.log(res);
+        console.log(res.data.data.data);
         this.listvalue=res.data.data.data
-        console.log(this.listvalue);
       }).catch(req=>{
         console.log(req);
       })
     },
-    
   },
 };
 </script>
@@ -215,7 +214,7 @@ export default {
   border: 1px solid transparent;
 }
 .kj-background-header {
-  width: 54%;
+  width: 56%;
   height: 19px;
   margin-top: 3%;
   margin-left: 3%;
@@ -227,7 +226,7 @@ export default {
    height: 20px;
 }
 .kj-background-header >p{
-  margin-top: -22px;
+  margin-top: -21px;
 }
 .kj-content {
   width: 95%;
@@ -268,7 +267,7 @@ export default {
   color: #fff;
 }
 .kj-background-header1 {
-  width: 54%;
+  width: 56%;
   height: 19px;
   background: url("../../../assets/images/ningdongyunying/puzzle/限时灰.png");
   background-size: cover;
@@ -289,7 +288,7 @@ export default {
   border: 1px solid transparent;
 }
 .kj-background1>.kj-background-header{
-  width: 54%;
+  width: 56%;
   height: 19px;
   background: url("../../../assets/images/ningdongyunying/puzzle/限时蓝.png");
   background-size: cover;