拼图

src/main.js

@@ -2,12 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-<<<<<<< HEAD
-import './assets/css/global.css'
-=======
->>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
 import "./plugins/axios.js"
-
 // import axios from "axios"
 //区别开发环境和测试环境
 // axios.defaults.baseURL=process.env.VUE_APP_APIURL

src/router/index.js

@@ -41,17 +41,6 @@ const routes = [
     name:'leader-mailbox-reply',
     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
   },
-<<<<<<< HEAD
-
-
-
-
-  //枣泉tongfeng
-  {
-    path:'/tongfeng/zaoquan/tongfeng_xijin',
-    name:'tongfeng_xijin',
-    component:()=>import('../views/tongfeng/zaoquan/tongfeng_xijin.vue')
-=======
   //枣泉矿井水系统
   {
     path:'/zaoquan/kuangjingshui/kuangjingshui',
@@ -78,20 +67,11 @@ const routes = [
     meta:{
       title:'拼图游戏'
     }
->>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
   },
   //路由重定向
   {
     path:'/',
-<<<<<<< HEAD
-<<<<<<< HEAD
-    redirect:{"name":"tongfeng_xijin"}
-=======
-    redirect:{"name":"puzzle-infos"}
->>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
-=======
     redirect:{"name":"puzzle"}
->>>>>>> 4dc4f2de13aeec9d60e608b6522969df45127964
   }
 ]
 

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

@@ -7,7 +7,7 @@
     <div class="wrap" ref="wrap">
       <div class="start-page">
         <div class="headers">
-          <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
+          <img src="../../../assets/images/ningdongyunying/puzzle/抬头1.png" />
           <div class="headers-left">5</div>
           <div class="headers-right">4</div>
           <div class="header-content">
@@ -24,20 +24,25 @@
             v-for="(item, index) in imgArr"
             :class="activeClass == index ? 'active' : ''"
             :key="index"
-            @click="getItem(index)"
+            @click="getItem(index, item.id)"
           >
             <div class="img-wrap-imgs">
-              <img :src="item.url" alt="" />
+              <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>
             </div>
             <!-- <button @click="startGame(index)">开始</button> -->
             <div class="contents-list-item-button" @click="startGame(index)">
               <img
-                src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
+                src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png" v-if="imgshow==item.sc"
               />
-              <p>图片名称</p>
+              <img
+                src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png" v-else
+              />
+              <p v-if="imgshow==item.sc">未解锁</p>
+              <p v-else>图片名称</p>
             </div>
           </div>
-
           <!-- <div class="img-wrap" v-if="!uploadimg">
           <div class="file-wrap" ref="filewrap">
             <input type="file" id="file" @change="onFileChange">
@@ -87,6 +92,7 @@
         </div>
         <!-- <div class="btn" @click="generateImg">生成战绩海报</div> -->
         <div class="btn" @click="onceAgain()">再来一次</div>
+        <div class="btn" @click="upresult(infos_id)">上传成绩</div>
       </div>
 
       <div class="preview-page last-page">
@@ -102,12 +108,18 @@
 <script>
 import * as echarts from "echarts"; //引入echarts
 import "echarts-liquidfill";
+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
 export default {
+  inject: ["reload"], //无痕刷新
   props: {
     msg: String,
   },
   data() {
     return {
+      token:"",
+      // token: sessionStorage.getItem("mytoken")
+      //   ? sessionStorage.getItem("mytoken")
+      //   : "", //token值保存在本地，有的话取值，没有为空
       startDx: 0, // 初始位移，用于返回上一页
       activeClass: -1,
       boxArractivelass: -1,
@@ -125,24 +137,19 @@ export default {
       matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
       //  matrixArr:this.shuffle(this.pieces, this.pool),
       imgArr: [
-        // { url: require("../assets/images/timg2.jpeg") },
-        // { url: require("../assets/images/timg3.jpeg") },
-        { url: require("../../../assets/images/puzzles/timg.jpeg") },
-        // { url: require("../assets/images/caixushen.jpg") },
-        // { url: require("../assets/images/yang.jpeg") },
-        // { url: require("../assets/images/re.jpeg") },
-        // { url: require("../assets/images/timg4.jpeg") },
-        // { url: require("../assets/images/timg6.jpeg") }
-        { url: require("../../../assets/images/puzzles/2020-10-22-pic2.jpeg") },
+        { 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
         },
-        { url: require("../../../assets/images/puzzles/2020-10-22-pic3.jpeg") },
-        // { url: require("../assets/images/2020-10-22-pic5.jpeg") },
-        // { url: require("../assets/images/2020-10-22-pic4.jpeg") },
-        // { url: require("../assets/images/2020-10-22-pic1.jpeg") },
-        // { url: require("../assets/images/2020-10-22-pic7.jpeg") },
-        // { url: require("../assets/images/2020-10-22-pic8.jpeg") }
       ],
       wall: 0,
       prevEl: null, // 上一个元素,
@@ -152,11 +159,15 @@ export default {
       canvasUrl: "",
       isVisible: false,
       shows: true,
+      infos_id: 0,//图片id
+      pshow:1,//是否显示p标签
+      imgshow:0,//是否显示img
     };
   },
   methods: {
-    getItem(index) {
+    getItem(index, id) {
       this.activeClass = index;
+      this.infos_id = id;
     },
     onFileChange(e) {
       var files = e.target.files || e.dataTransfer.files;
@@ -258,7 +269,8 @@ export default {
       this.dealtime--;
       if (this.dealtime < 1) {
         clearInterval(this.timer);
-        alert("挑战失败，请返回重新开始");
+        // alert("挑战失败，请返回重新开始");
+        this.$toast("挑战失败，请返回重新开始");
       }
     },
     // overtime(num) {
@@ -509,21 +521,60 @@ export default {
         ],
       });
     },
+    //上传成绩
+    upresult(id) {
+      // console.log(180 - this.dealtime);
+      let timeup=String(180 - this.dealtime)
+      let picid=String(id) 
+      // console.log(typeof(timeup));
+      // console.log(typeof(picid));
+      // console.log(timeup);
+      // console.log(id);
+      this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/jigsawPuzzle/completeJigsawPuzzle",{
+        completion_time:timeup,
+        picture_id:picid
+      }).then(res=>{
+        console.log(res);
+      })
+      this.reload(); //使用无痕刷新重新渲染页面
+    },
     //tabber返回按钮
     onClickLeft() {
       window.history.back();
     },
+    //获取图片信息
+    getpuzzle(id) {
+      // console.log(id);
+      this.$http
+        .post(
+          "http://ningdongyunying.nxjiewei.com:8011/api/jigsawPuzzle/pictureList",
+          {
+            special_id: id,
+          }
+        )
+        .then((res) => {
+          console.log(res);
+        });
+    },
   },
   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);
+    // sessionStorage.setItem("mytoken", this.token); //存入token值
     this.drawLiquidfill();
+    this.getpuzzle(this.$route.query.id);
+    // console.log(this.dealtime);
+    // console.log(1/this.imgArr.length);
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-#apps{
+#apps {
   overflow: hidden;
 }
 .van-nav-bar {
@@ -608,6 +659,11 @@ div {
   width: 100%;
   height: 97px;
 }
+.img-wrap-imgs > p {
+  margin-top: -18%;
+  color: #fff;
+  font-size: 13px;
+}
 .start-page .album-list .img-wrap.active {
   /* border: 4px solid #f00; */
 }

src/views/ningdongyunying/puzzle/puzzle.vue

@@ -3,16 +3,24 @@
     <div v-if="show">
       <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
     </div>
-    <div class="kj">
+    <div class="kj" v-for="(item,index) in listvalue" :key="index">
       <div class="kj-position">
         <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
-        <p class="mk">梅花井煤矿</p>
+        <p class="mk">{{item.title}}</p>
       </div>
-      <div class="kj-background " id="kj-backgrounds">
-        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
+      <div class="kj-background " id="kj-backgrounds"  v-for="items in item.special_list" :key="items.jigsaw_puzzle_sort_id">
+        <!-- <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>
+        </div>
+        <div class="kj-background-header" v-else>
+          <img src="../../../assets/images/ningdongyunying/puzzle/限时灰.png" alt="">
+          <p>有效时间:{{item.created_at}}</p>
+        </div>
         <div class="kj-content">
-          <p>专题标题专题标题专题标题专题标题专题标题</p>
-          <div class="kj-content-item" @click="jump">
+          <p>{{items.name}}</p>
+          <div class="kj-content-item" @click="jump(item.id)">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -21,12 +29,12 @@
         </div>
         <div class="kj-progress">
           <div class="kj-progress-item">
-            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
+            <van-progress :percentage="item.percent_complete" color="#00fff8" :show-pivot="false"/>
           </div>
-          <span>50%</span>
+          <span>{{item.percent_complete?item.percent_complete:"0"}}%</span>
         </div>
       </div>
-      <div class="kj-background">
+      <!-- <div class="kj-background">
         <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
         <div class="kj-content">
           <p>专题标题专题标题专题标题专题标题专题标题</p>
@@ -43,9 +51,9 @@
           </div>
           <span>50%</span>
         </div>
-      </div>
+      </div> -->
     </div>
-    <div class="kj">
+    <!-- <div class="kj">
       <div class="kj-position">
         <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
         <p class="mk">单位</p>
@@ -81,12 +89,12 @@
         </div>
         <div class="kj-progress">
           <div class="kj-progress-item">
-            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
+            <van-progress :percentage="0.8*100" color="#fea201" :show-pivot="false"/>
           </div>
           <span>50%</span>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -100,23 +108,58 @@ export default {
       token: sessionStorage.getItem("mytoken")
         ? sessionStorage.getItem("mytoken")
         : "", //token值保存在本地，有的话取值，没有为空
+      listvalue:[],
+      colors:1,
+      names:"",
+      passwords:"",
+      gettoken:""
     };
   },
+  created(){
+    // this.gettokens()
+  },
   mounted() {
     document.body.style.backgroundColor = "#39f"; //背景色
-    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
-    this.token = `Bearer ${this.gettoken}`; //获取token值
-    sessionStorage.setItem("mytoken", this.token); //存入token值
+    // 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.getspecial()
   },
   methods: {
     //tabber返回按钮
     onClickLeft() {
       window.history.back();
     },
-    jump(){
-      this.$router.push("/ningdongyunying/puzzle/puzzle-infos")
-    }
+    jump(id){
+      // console.log(id);
+      this.$router.push(`/ningdongyunying/puzzle/puzzle-infos?token=${this.token}&id=${id}`)
+    },
+    gettokens(){
+      let that=this;
+      that.names="123456";
+      that.passwords="Zhks123456+"
+      this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/oauth/token",{
+        username:that.names,
+        password:that.passwords
+      }).then(res=>{
+        // console.log(res.data.data.access_token);
+        this.gettoken=res.data.data.access_token;
+        this.token = `Bearer ${this.gettoken}`; //获取token值
+        sessionStorage.setItem("mytoken", this.token); //存入token值
+      })
+    },
+    getspecial(){
+      this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/jigsawPuzzle/specialList").then(res=>{
+        // console.log(res);
+        this.listvalue=res.data.data.data
+        console.log(this.listvalue);
+      }).catch(req=>{
+        console.log(req);
+      })
+    },
+    
   },
 };
 </script>
@@ -136,7 +179,6 @@ export default {
 }
 .kj {
   width: 90%;
-  height: 250px;
   margin: 5% auto 10%;
   background: #fff;
   border: 2px solid #242290;
@@ -175,19 +217,25 @@ export default {
 .kj-background-header {
   width: 54%;
   height: 19px;
-  background: url("../../../assets/images/ningdongyunying/puzzle/限时黄.png");
-  background-size: cover;
   margin-top: 3%;
   margin-left: 3%;
   font-size: 10px;
   text-align: center;
 }
+.kj-background-header >img{
+   width: 100%;
+   height: 20px;
+}
+.kj-background-header >p{
+  margin-top: -22px;
+}
 .kj-content {
   width: 95%;
   height: 40px;
   display: flex;
   justify-content: left;
   margin-left: 3%;
+  margin-top: 1%;
 }
 .kj-content > p {
   width: 85%;
@@ -253,4 +301,7 @@ export default {
 .kj-background1>.kj-content > p{
   color: black;
 }
+>>>.van-progress {
+  width: 100%;
+}
 </style>

vue.config.js

@@ -1,35 +1,38 @@
 const path = require('path')
 module.exports = {
-    // 基本路径
-    publicPath: './',
-    // 输出文件目录
-    outputDir: 'dist',
-    configureWebpack: {
-      externals: {
-      }
-    },
-    devServer: {
-      proxy: {
-        '/api': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          ws: true,
-          pathRewrite: {
-            '^/api': '/mock' 
-          }
+  // 基本路径
+  publicPath: './',
+  // 输出文件目录
+  outputDir: 'dist',
+  configureWebpack: {
+    externals: {
+    }
+  },
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': '/mock'
         }
       }
-    }
+    },
+    public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':8080',
+    disableHostCheck: true
+
+  }
   //   productionSourceMap: false,
-	// devServer: {
-	// 	proxy: {
-	// 		'/test': {
-	// 			target: "http://47.105.143.227:3000",//这个是你要访问的接口地址
-	// 			changeOrigin: true,
-	// 			pathRewrite: {//重写地址  比如说 你的接口地址是'https://188.62.63/xxyy/getUser' 你请求得时候地址只需要写'/test/getUser'
-	// 				'/test': '/xxyy'  
-	// 			}
-	// 		}
-	// 	}
-	// }
-  }
+  // devServer: {
+  // 	proxy: {
+  // 		'/test': {
+  // 			target: "http://47.105.143.227:3000",//这个是你要访问的接口地址
+  // 			changeOrigin: true,
+  // 			pathRewrite: {//重写地址  比如说 你的接口地址是'https://188.62.63/xxyy/getUser' 你请求得时候地址只需要写'/test/getUser'
+  // 				'/test': '/xxyy'  
+  // 			}
+  // 		}
+  // 	}
+  // }
+}