|
|
@@ -1,65 +1,106 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <!-- :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="headers">
|
|
|
- <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
|
|
|
- <div class="headers-left">5</div>
|
|
|
- <div class="headers-right">4</div>
|
|
|
- <div class="header-content">
|
|
|
- <div
|
|
|
- style="width: 100px; height: 100px"
|
|
|
- ref="hygrometer"
|
|
|
- id="hygrometer"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="contents">
|
|
|
- <div class="contents-list">
|
|
|
- <div class="contents-list-item">
|
|
|
- <div class="contents-list-item-img">
|
|
|
- <img src="../../../assets/images/puzzles/timg.jpeg" />
|
|
|
- <p>最快时长 1:23:25</p>
|
|
|
- </div>
|
|
|
- <div class="contents-list-item-button">
|
|
|
- <img
|
|
|
- src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
|
|
|
- />
|
|
|
- <p>图片名称</p>
|
|
|
+ <div class="wrap" ref="wrap">
|
|
|
+ <div class="start-page">
|
|
|
+ <div class="headers" >
|
|
|
+ <img src="../../../assets/images/ningdongyunying/puzzle/抬头1.png" />
|
|
|
+ <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"
|
|
|
+ >{{jindu}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="contents-list-item">
|
|
|
- <div class="contents-list-item-img">
|
|
|
- <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
|
|
|
+ <div class="album-list">
|
|
|
+ <div
|
|
|
+ class="img-wrap"
|
|
|
+ v-for="(item, index) in imgArr"
|
|
|
+ :class="activeClass == index ? 'active' : ''"
|
|
|
+ :key="index"
|
|
|
+ @click="getItem(index, item.id)"
|
|
|
+ >
|
|
|
+ <div class="img-wrap-imgs">
|
|
|
+ <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.complete_status"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png" v-else
|
|
|
+ />
|
|
|
+ <p v-if="imgshow==item.complete_status">未解锁</p>
|
|
|
+ <p v-else>{{item.name}}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="contents-list-item-button">
|
|
|
- <img
|
|
|
- src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
|
|
|
- />
|
|
|
- <p>未破解</p>
|
|
|
+ <!-- <div class="img-wrap" v-if="!uploadimg">
|
|
|
+ <div class="file-wrap" ref="filewrap">
|
|
|
+ <input type="file" id="file" @change="onFileChange">
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="btn" id="start" @click="startGame(activeClass)">开始游戏</div> -->
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="contents-list-item">
|
|
|
- <div class="contents-list-item-img">
|
|
|
- <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
|
|
|
- </div>
|
|
|
- <div class="contents-list-item-button">
|
|
|
+ <div class="footed">
|
|
|
+ <div class="footed-img">
|
|
|
<img
|
|
|
- src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
|
|
|
+ src="../../../assets/images/ningdongyunying/puzzle/下边云.png"
|
|
|
/>
|
|
|
- <p>未破解</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="footed">
|
|
|
- <div class="footed-img">
|
|
|
- <img src="../../../assets/images/ningdongyunying/puzzle/下边云.png" />
|
|
|
+ <div class="play-page">
|
|
|
+ <div class="deloy">
|
|
|
+ 倒计时：<span id="time">{{ dealtime }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <Cutdown ref="child" :success="issuccess" @overtime="overtime"></Cutdown> -->
|
|
|
+ <div class="play-area" id="playArea">
|
|
|
+ <!-- :style="{backgroundImage:'url('+selectedImg+')',transform: `translate(${matrixArr[item].x}vw, ${matrixArr[item].y}vh)`}" -->
|
|
|
+ <div
|
|
|
+ v-for="item in boxArr"
|
|
|
+ :index="item"
|
|
|
+ :key="item"
|
|
|
+ :class="[
|
|
|
+ 'piece',
|
|
|
+ 'piece-' + item,
|
|
|
+ item == boxArractivelass ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ backgroundImage: 'url(' + selectedImg + ')' }"
|
|
|
+ @click="changePositon($event, item)"
|
|
|
+ :ref="'piece' + item"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" id="change" @click="reOrder()">重新排序</div>
|
|
|
+ <div class="btn" id="back" @click="goBack()">返回</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="result-page">
|
|
|
+ <div class="success-text">恭喜闯关成功~!</div>
|
|
|
+ <div class="total-time">
|
|
|
+ 用时: <span id="use_time">{{ 180 - dealtime }}</span
|
|
|
+ >s
|
|
|
+ </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">
|
|
|
+ <img :src="canvasUrl" alt="图片" />
|
|
|
+ <div class="btn play-again" @click="reStart()">重新再来</div>
|
|
|
+ <div class="btn share-other" @click="isVisible = true">我要分享</div>
|
|
|
+ </div>
|
|
|
+ <div class="share-bg" v-if="isVisible" @click="isVisible = false" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -67,18 +108,347 @@
|
|
|
<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 {
|
|
|
- shows: true,
|
|
|
+ token:"",
|
|
|
+ // token: sessionStorage.getItem("mytoken")
|
|
|
+ // ? sessionStorage.getItem("mytoken")
|
|
|
+ // : "", //token值保存在本地，有的话取值，没有为空
|
|
|
+ startDx: 0, // 初始位移，用于返回上一页
|
|
|
+ activeClass: -1,
|
|
|
+ boxArractivelass: -1,
|
|
|
+ prevIndex: null,
|
|
|
+ curIndex: 0,
|
|
|
+ curposArr: [],
|
|
|
+ clickStartBtn: false,
|
|
|
+ uploadimg: "",
|
|
|
+ selectedImg: "",
|
|
|
+ boxArr: new Array(9).fill(1).map((item, index) => {
|
|
|
+ return index;
|
|
|
+ }),
|
|
|
+ pieces: document.querySelectorAll(".piece"),
|
|
|
+ pool: this.generateMatrix(3, 28, 20),
|
|
|
+ matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
|
|
|
+ // matrixArr:this.shuffle(this.pieces, this.pool),
|
|
|
+ imgArr: [],
|
|
|
+ wall: 0,
|
|
|
+ prevEl: null, // 上一个元素,
|
|
|
+ dealtime: 180,
|
|
|
+ timer: null,
|
|
|
+ issuccess: false,
|
|
|
+ canvasUrl: "",
|
|
|
+ isVisible: false,
|
|
|
+ shows: false,
|
|
|
+ infos_id: 0,//图片id
|
|
|
+ pshow:1,//是否显示p标签
|
|
|
+ imgshow:null,//是否显示img
|
|
|
+ jindu: sessionStorage.getItem("mjindu")
|
|
|
+ ? sessionStorage.getItem("myjindu")
|
|
|
+ : 0, //token值保存在本地，有的话取值，没有为空
|
|
|
+ complete_num:0,//已完成
|
|
|
+ no_complete_num:0,//未完成
|
|
|
+ jindus:0
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- document.body.style.backgroundColor = "#39f"; //背景色
|
|
|
- this.drawLiquidfill();
|
|
|
- },
|
|
|
methods: {
|
|
|
- drawLiquidfill() {
|
|
|
+ getItem(index, id) {
|
|
|
+ this.activeClass = index;
|
|
|
+ this.infos_id = id;
|
|
|
+ },
|
|
|
+ onFileChange(e) {
|
|
|
+ var files = e.target.files || e.dataTransfer.files;
|
|
|
+ if (!files.length) return;
|
|
|
+ this.createImage(files[0]);
|
|
|
+ },
|
|
|
+ createImage(file) {
|
|
|
+ // var image = new Image();
|
|
|
+ var reader = new FileReader();
|
|
|
+ var vm = this;
|
|
|
+
|
|
|
+ reader.onload = (e) => {
|
|
|
+ vm.uploadimg = e.target.result;
|
|
|
+ // console.log(123,e.target.result)
|
|
|
+ this.imgArr.push({
|
|
|
+ url: e.target.result,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ },
|
|
|
+ startGame(picIndex) {
|
|
|
+ // if (this.activeClass == -1) {
|
|
|
+ // alert("请选择图片");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // this.dealtime = 180;
|
|
|
+ this.timer = setInterval(this.timeStart, 1000);
|
|
|
+ this.startDx = this.startDx - 100;
|
|
|
+ this.transformX(this.$refs.wrap, this.startDx + "vw");
|
|
|
+ this.selectedImg = this.imgArr[picIndex].picture;
|
|
|
+ // console.log(this.selectedImg);
|
|
|
+ this.shuffle(document.querySelectorAll(".piece"), this.pool);
|
|
|
+ // console.log(222);
|
|
|
+ },
|
|
|
+ reOrder() {
|
|
|
+ //this.matrixArr = this.upsetArr(this.generateMatrix(3, 28, 20));
|
|
|
+ this.shuffle(document.querySelectorAll(".piece"), this.pool);
|
|
|
+ },
|
|
|
+ // 点击高亮并且切换对应位置 (想办法交换对应索引位置的x,y值即可)
|
|
|
+ changePositon(e, item) {
|
|
|
+ //点击小图片切换位置方法
|
|
|
+ let reg = /active/g;
|
|
|
+ // console.log(e, item);
|
|
|
+ this.boxArractivelass = item;
|
|
|
+ let pieces = document.querySelectorAll(".piece");
|
|
|
+ if (!this.wall) {
|
|
|
+ this.wall = 1;
|
|
|
+ this.prevEl = e.target;
|
|
|
+ for (var i = 0, len = pieces.length; i < len; i++) {
|
|
|
+ // 使用replace为了避免元素后期加入其他类名
|
|
|
+ pieces[i].className = pieces[i].className.replace(" active", "");
|
|
|
+ }
|
|
|
+ !reg.test(this.className) && (this.className += " active");
|
|
|
+ // this.className= this.className.replace(' active', '');
|
|
|
+ } else {
|
|
|
+ this.wall = 0;
|
|
|
+ var prevIndex = +this.prevEl.getAttribute("index"),
|
|
|
+ curIndex = +e.target.getAttribute("index");
|
|
|
+
|
|
|
+ // 置换数组
|
|
|
+ this.swap(this.pool, prevIndex, curIndex);
|
|
|
+ // console.log("prevIndex", "curIndex", prevIndex, curIndex);
|
|
|
+ this.prevEl.style.transform =
|
|
|
+ "translate(" +
|
|
|
+ this.pool[prevIndex].x +
|
|
|
+ "vw," +
|
|
|
+ this.pool[prevIndex].y +
|
|
|
+ "vh" +
|
|
|
+ ")";
|
|
|
+ e.target.style.transform =
|
|
|
+ "translate(" +
|
|
|
+ this.pool[curIndex].x +
|
|
|
+ "vw," +
|
|
|
+ this.pool[curIndex].y +
|
|
|
+ "vh" +
|
|
|
+ ")";
|
|
|
+ // 清除样式
|
|
|
+ // this.prevEl.className= this.prevEl.className.replace(' active', '');
|
|
|
+ this.boxArractivelass = -1;
|
|
|
+ // 校验是否成功
|
|
|
+ if (this.isTestSuccess(this.pool)) {
|
|
|
+ // 清除计时器
|
|
|
+ // alert('success');
|
|
|
+ // this.clickStartBtn = true;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.startDx -= 100;
|
|
|
+ this.issuccess = true;
|
|
|
+
|
|
|
+ // $('#playArea')[0].classList.add('active');
|
|
|
+ // $('#use_time').html(180-dealtime);
|
|
|
+ // setTimeout(function() {
|
|
|
+ this.transformX(this.$refs.wrap, this.startDx + "vw");
|
|
|
+ // }, 1200);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ timeStart() {
|
|
|
+ this.dealtime--;
|
|
|
+ if (this.dealtime < 1) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ // alert("挑战失败，请返回重新开始");
|
|
|
+ this.$toast("挑战失败，请返回重新开始");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // overtime(num) {
|
|
|
+ // this.step = num;
|
|
|
+ // },
|
|
|
+ // 滑动元素
|
|
|
+ transformX(el, dx) {
|
|
|
+ el.style.transform = "translateX(" + dx + ")";
|
|
|
+ },
|
|
|
+ resetTime() {
|
|
|
+ this.dealtime = 180;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ // 清理定时器,返回
|
|
|
+ // this.clickStartBtn = false;
|
|
|
+ this.startDx += 100;
|
|
|
+ this.transformX(this.$refs.wrap, this.startDx + "vw");
|
|
|
+ this.resetTime();
|
|
|
+ },
|
|
|
+ onceAgain() {
|
|
|
+ this.shuffle(document.querySelectorAll(".piece"), this.pool);
|
|
|
+ this.startDx = -100;
|
|
|
+ this.transformX(this.$refs.wrap, this.startDx + "vw");
|
|
|
+ this.resetTime();
|
|
|
+ this.dealtime = 180;
|
|
|
+ this.timer = setInterval(this.timeStart, 1000);
|
|
|
+ // this.$refs.child.initTime();
|
|
|
+ },
|
|
|
+ reStart() {
|
|
|
+ this.startDx = this.startDx + 300;
|
|
|
+ this.transformX(this.$refs.wrap, this.startDx + "vw");
|
|
|
+ this.resetTime();
|
|
|
+ // this.dealtime = 180;
|
|
|
+ // this.timer = setInterval(this.timeStart, 1000);
|
|
|
+ },
|
|
|
+ // 生成战绩海报
|
|
|
+ generateImg() {
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+
|
|
|
+ if (canvas.getContext) {
|
|
|
+ var winW = window.innerWidth,
|
|
|
+ winH = window.innerHeight,
|
|
|
+ ctx = canvas.getContext("2d");
|
|
|
+ canvas.width = winW;
|
|
|
+ canvas.height = winH;
|
|
|
+
|
|
|
+ // 绘制背景
|
|
|
+ // ctx.fillStyle = '#06c';
|
|
|
+ var linear = ctx.createLinearGradient(0, 0, 0, winH);
|
|
|
+ linear.addColorStop(0, "#a1c4fd");
|
|
|
+ linear.addColorStop(1, "#c2e9fb");
|
|
|
+ ctx.fillStyle = linear;
|
|
|
+ ctx.fillRect(0, 0, winW, winH);
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ // 绘制顶部图像
|
|
|
+ var imgH = 0;
|
|
|
+ var that = this;
|
|
|
+ var img = new Image();
|
|
|
+ img.src = that.selectedImg;
|
|
|
+ img.setAttribute("crossOrigin", "Anonymous");
|
|
|
+ img.onload = function () {
|
|
|
+ // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
|
|
|
+ imgH = (0.5 * winW * this.height) / this.width;
|
|
|
+ // ctx.drawImage(img, 0.2 * winW, 0.1 * winH, 0.6 * winW, imgH);
|
|
|
+ ctx.drawImage(img, 0.2 * winW, 20, 0.6 * winW, imgH);
|
|
|
+ // drawText();
|
|
|
+ // ctx.save();
|
|
|
+ ctx.fillStyle = "#fff";
|
|
|
+ ctx.font = 20 + "px Helvetica";
|
|
|
+ ctx.textBaseline = "hanging";
|
|
|
+ ctx.textAlign = "center";
|
|
|
+ ctx.moveTo(10, 10);
|
|
|
+ ctx.fillText(
|
|
|
+ "我只用了" + (180 - that.dealtime) + "s," + "快来挑战！",
|
|
|
+ winW / 2,
|
|
|
+ 0.1 * winH + imgH
|
|
|
+ // 80+imgH
|
|
|
+ // 100
|
|
|
+ );
|
|
|
+ // ctx.restore();
|
|
|
+ // drawTip();
|
|
|
+
|
|
|
+ // ctx.save();
|
|
|
+ ctx.fillStyle = "#000";
|
|
|
+ ctx.font = 14 + "px Helvetica";
|
|
|
+ ctx.textBaseline = "hanging";
|
|
|
+ ctx.textAlign = "center";
|
|
|
+ ctx.moveTo(-30, 10);
|
|
|
+ ctx.fillText("关注下方二维码开始游戏", winW / 2, 0.18 * winH + imgH);
|
|
|
+ // ctx.restore();
|
|
|
+ // drawCode();
|
|
|
+
|
|
|
+ var imgCode = new Image();
|
|
|
+ imgCode.src = require("../../../assets/images/puzzles/code.jpg");
|
|
|
+ imgCode.onload = function () {
|
|
|
+ ctx.drawImage(
|
|
|
+ imgCode,
|
|
|
+ 0.35 * winW,
|
|
|
+ 0.25 * winH + imgH,
|
|
|
+ 0.3 * winW,
|
|
|
+ 0.3 * winW
|
|
|
+ );
|
|
|
+
|
|
|
+ // 生成预览图
|
|
|
+ var img = new Image();
|
|
|
+ img.src = that.convertCanvasToImage(canvas, 1).src;
|
|
|
+ img.setAttribute("crossOrigin", "Anonymous");
|
|
|
+ img.className = "previewImg";
|
|
|
+ img.onload = function () {
|
|
|
+ that.canvasUrl = this.src;
|
|
|
+ that.startDx = that.startDx - 100;
|
|
|
+ that.transformX(that.$refs.wrap, that.startDx + "vw");
|
|
|
+ };
|
|
|
+ };
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ alert("浏览器不支持canvas！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 生成n维矩阵
|
|
|
+ generateMatrix(n, dx, dy) {
|
|
|
+ var arr = [],
|
|
|
+ index = 0;
|
|
|
+ for (var i = 0; i < n; i++) {
|
|
|
+ for (var j = 0; j < n; j++) {
|
|
|
+ arr.push({ x: j * dx, y: i * dy, index: index });
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+
|
|
|
+ shuffle(els, arr) {
|
|
|
+ this.upsetArr(arr);
|
|
|
+ for (var i = 0, len = els.length; i < len; i++) {
|
|
|
+ var el = els[i];
|
|
|
+ el.setAttribute("index", i); // 将打乱后的数组索引缓存到元素中
|
|
|
+ el.style.transform =
|
|
|
+ "translate(" + arr[i].x + "vw," + arr[i].y + "vh" + ")";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // https://www.xiabingbao.com/post/javascript/js-random-array.html
|
|
|
+ upsetArr(arr) {
|
|
|
+ // console.log("arr", JSON.stringify(arr));
|
|
|
+ // 方法1:
|
|
|
+ return arr.sort(function () {
|
|
|
+ return Math.random() > 0.5 ? -1 : 1;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 置换数组(对应索引的x,y值进行交换)
|
|
|
+ swap(arr, indexA, indexB) {
|
|
|
+ // let targetArr = [];
|
|
|
+ // arr.map(item => {
|
|
|
+ // if (item.index == indexA || item.index == indexB) {
|
|
|
+ // targetArr.push(item);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // [targetArr[0].x, targetArr[1].x] = [targetArr[1].x, targetArr[0].x];
|
|
|
+ // [targetArr[0].y, targetArr[1].y] = [targetArr[1].y, targetArr[0].y];
|
|
|
+
|
|
|
+ // return targetArr;
|
|
|
+ // var cache = arr[indexA];
|
|
|
+ // arr[indexA] = arr[indexB];
|
|
|
+ // arr[indexB] = cache;
|
|
|
+
|
|
|
+ // ES6的解耦交换方式： [arr[index], arr[n]] = [arr[n], arr[index]];
|
|
|
+ [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
|
|
|
+ },
|
|
|
+
|
|
|
+ // 校验是否成功方法
|
|
|
+ isTestSuccess(arr) {
|
|
|
+ return arr.every(function (item, i) {
|
|
|
+ return item.index === i;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 将canvas转化为图片
|
|
|
+ convertCanvasToImage(canvas, quality) {
|
|
|
+ var image = new Image();
|
|
|
+ image.src = canvas.toDataURL("image/png", quality);
|
|
|
+ return image;
|
|
|
+ },
|
|
|
+
|
|
|
+ drawLiquidfill(num) {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
let hygrometer = echarts.init(document.getElementById("hygrometer"));
|
|
|
// 使用指定的配置项和数据显示图表
|
|
|
@@ -92,12 +462,12 @@ export default {
|
|
|
name: "puzzle",
|
|
|
type: "liquidFill",
|
|
|
radius: "80px",
|
|
|
- data: [0.45],
|
|
|
- direction: "none",//取消移动方向
|
|
|
- amplitude: 0,//波的振幅
|
|
|
- waveAnimation: false,//动画效果
|
|
|
- animationDuration: 0,
|
|
|
- animationDurationUpdate: 0,
|
|
|
+ data: [this.jindu],
|
|
|
+ // direction: "none", //取消移动方向
|
|
|
+ // amplitude: 0, //波的振幅
|
|
|
+ // waveAnimation: false, //动画效果
|
|
|
+ // animationDuration: 0,
|
|
|
+ // animationDurationUpdate: 0,
|
|
|
label: {
|
|
|
normal: {
|
|
|
color: "#ff7900",
|
|
|
@@ -143,11 +513,90 @@ 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.getxinxi(this.$route.query.id)
|
|
|
+ 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);
|
|
|
+ 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);
|
|
|
+ // 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);
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
<style scoped>
|
|
|
+#apps {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
.van-nav-bar {
|
|
|
background: #39f;
|
|
|
}
|
|
|
@@ -160,6 +609,264 @@ export default {
|
|
|
[class*="van-hairline"]:after {
|
|
|
border: none;
|
|
|
}
|
|
|
+.wrap {
|
|
|
+ display: flex;
|
|
|
+ width: 400vw;
|
|
|
+ transition: transform 1s cubic-bezier(0.52, 0.37, 0.16, 1.32);
|
|
|
+}
|
|
|
+
|
|
|
+div {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 10px 60px;
|
|
|
+ width: 300px;
|
|
|
+ background-color: #06c;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 8px auto 10px;
|
|
|
+}
|
|
|
+#back {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.play-page,
|
|
|
+.result-page,
|
|
|
+.start-page,
|
|
|
+.start-page .title {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.play-page,
|
|
|
+.preview-page,
|
|
|
+.result-page,
|
|
|
+.start-page {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 91vh;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .title {
|
|
|
+ line-height: 4em;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .album-list {
|
|
|
+ width: 90%;
|
|
|
+ height: 65vh;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 5px solid #0938d0;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.start-page .album-list::after {
|
|
|
+ content: "";
|
|
|
+ width: 45%;
|
|
|
+}
|
|
|
+.start-page .album-list .img-wrap {
|
|
|
+ margin-bottom: 5%;
|
|
|
+ width: 45%;
|
|
|
+ margin-top: 3%;
|
|
|
+ /* height: 22vh; */
|
|
|
+ /* overflow: hidden; */
|
|
|
+}
|
|
|
+.img-wrap-imgs {
|
|
|
+ border: 4px solid #f6c039;
|
|
|
+ height: 105px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.img-wrap-imgs > img {
|
|
|
+ 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; */
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .album-list .img-wrap img {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .album-list .img-wrap .file-wrap {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .album-list .img-wrap .file-wrap::before {
|
|
|
+ content: "+";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 60px;
|
|
|
+ color: #ccc;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page .album-list .img-wrap .file-wrap input {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page-ft {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.start-page-ft a {
|
|
|
+ color: #06c;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page {
|
|
|
+ background-color: #39f;
|
|
|
+}
|
|
|
+.play-page .deloy {
|
|
|
+ padding: 10px 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.play-page .play-area {
|
|
|
+ position: relative;
|
|
|
+ width: 84vw;
|
|
|
+ height: 60vh;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 20px auto;
|
|
|
+ outline: #ccc solid 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area.active {
|
|
|
+ outline-color: #1f8b40;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 28vw;
|
|
|
+ height: 20vh;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ /* background-image: url(../assets/images/caixushen.jpg); */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 84vw 60vh;
|
|
|
+ transition: transform 0.6s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece.active {
|
|
|
+ border: 3px solid red;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-0 {
|
|
|
+ background-position: 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-1 {
|
|
|
+ background-position: -28vw 0;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-2 {
|
|
|
+ background-position: -56vw 0;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-3 {
|
|
|
+ background-position: 0 -20vh;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-4 {
|
|
|
+ background-position: -28vw -20vh;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-5 {
|
|
|
+ background-position: -56vw -20vh;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-6 {
|
|
|
+ background-position: 0 -40vh;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-7 {
|
|
|
+ background-position: -28vw -40vh;
|
|
|
+}
|
|
|
+
|
|
|
+.play-page .play-area .piece-8 {
|
|
|
+ background-position: -56vw -40vh;
|
|
|
+}
|
|
|
+
|
|
|
+.result-page {
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ background-color: #39f;
|
|
|
+}
|
|
|
+
|
|
|
+.result-page .success-text {
|
|
|
+ padding-top: 160px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #e4d721;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.result-page .total-time {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.last-page {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.last-page img {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.play-again {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 5px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 48%;
|
|
|
+}
|
|
|
+
|
|
|
+.share-other {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 5px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 48%;
|
|
|
+}
|
|
|
+
|
|
|
+.share-bg {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url("../../../assets/images/puzzles/share.png") no-repeat
|
|
|
+ rgba(0, 0, 0, 0.8);
|
|
|
+ background-position: top right;
|
|
|
+ z-index: 11;
|
|
|
+ /* background-size:75%; */
|
|
|
+}
|
|
|
+
|
|
|
.footed {
|
|
|
width: 100%;
|
|
|
position: fixed;
|
|
|
@@ -207,47 +914,6 @@ export default {
|
|
|
left: 35%;
|
|
|
top: 27%;
|
|
|
}
|
|
|
-.contents {
|
|
|
- width: 90%;
|
|
|
- margin: 0 auto 8%;
|
|
|
- background: #1559de;
|
|
|
- border: 2px solid #0938d0;
|
|
|
-}
|
|
|
-.contents-list {
|
|
|
- width: 97%;
|
|
|
- margin: 1% auto;
|
|
|
- background: #39f;
|
|
|
- border: 2px solid #0938d0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.contents-list::after {
|
|
|
- content: "";
|
|
|
- width: 45%;
|
|
|
-}
|
|
|
-.contents-list-item {
|
|
|
- width: 45%;
|
|
|
- text-align: center;
|
|
|
- margin-top: 3%;
|
|
|
- margin-bottom: 5%;
|
|
|
-}
|
|
|
-.contents-list-item-img {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px solid transparent;
|
|
|
- height: 97px;
|
|
|
-}
|
|
|
-.contents-list-item-img > img {
|
|
|
- width: 100%;
|
|
|
- height: 97px;
|
|
|
-}
|
|
|
-.contents-list-item-img > p {
|
|
|
- margin-top: -19%;
|
|
|
- border-bottom: 1px solid transparent;
|
|
|
- font-size: 13px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
.contents-list-item-button {
|
|
|
width: 65%;
|
|
|
text-align: center;
|
|
|
@@ -261,4 +927,4 @@ export default {
|
|
|
font-size: 13px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
