#7 #505

students/1714080903207/Puzzle/app.js

@@ -6,6 +6,9 @@ App({
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
 
+    const device = wx.getSystemInfoSync();
+    this.globalData.device = device;
+
     // 登录
     wx.login({
       success: res => {

students/1714080903207/Puzzle/app.json

@@ -4,7 +4,7 @@
     "pages/record/record",
     "pages/play/play",
     "pages/gameSetout/gameSetout",
-    "pages/help/help"
+    "pages/Jigsaw/Jigsaw"
   ],
   "window": {
     "backgroundTextStyle": "light",

students/1714080903207/Puzzle/app.wxss

@@ -7,7 +7,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 200rpx 0;
+  padding: 100rpx 0;
   box-sizing: border-box;
 } 
 page{
@@ -43,3 +43,13 @@ page{
     text-align: left;
     font-size: 14px;
 }
+
+.container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: space-between; */
+    /* padding: 200rpx 0;  */
+    box-sizing: border-box;
+}

students/1714080903207/Puzzle/pages/Jigsaw/Jigsaw.js

@@ -0,0 +1,96 @@
+// pages/newJigsaw/newJigsaw.js
+let app = getApp();
+const device = app.globalData.device;
+const width = device.windowWidth;
+const screanHeight = device.windowHeight;
+
+const util = require('../../utils/util');
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgUrl: '', // 本地图片路径
+    imgPath: '', // 服务器图片路径
+    iwidth: 0, // 图片显示宽度
+    left: 0, // 图片距左边距离
+
+    col: 3,
+    row: 3,
+
+    blank: 8, //空白格
+    total: 0, // 格子总数
+    mwidth: 0, // 单个格子宽度
+    mheight: 0, // 单个格子高度
+
+    isShare: false, // 是否已经分享
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (e) {
+    // console.log('00000000000',e);
+    let img = e.img;
+    let iwidth = parseInt(width * 0.7);
+    let left = (width - iwidth) / 2;
+
+    this.setData({
+      iwidth: iwidth,
+      imgUrl: img,
+      left: left,
+    });
+    this.createGridding();
+
+  },
+
+
+  // 创建相应数量的网格
+  createGridding: function () {
+    let col = this.data.col, // 列数
+      row = this.data.row; // 行数
+    let total = col * row;
+    let iwidth = this.data.iwidth;
+    let mwidth = iwidth / col,
+      mheight = iwidth / row;
+    // console.log('11111111', total, mwidth, mheight);
+    this.setData({
+      total: total,
+      mwidth: mwidth,
+      mheight: mheight
+    })
+  },
+
+
+  // 返回首页
+  goIndex: function () {
+    wx.switchTab({
+      url: '/pages/index/index',
+    })
+  },
+
+  // 取消
+  cancel: function () {
+
+      wx.navigateBack({
+        delta: 1
+      })
+  },
+
+  changeBlank: function (e) {
+    this.data.blank = e.currentTarget.id;
+    console.log('87684', this.data.blank);
+  },
+  begin: function (e) {
+    let obj = {};
+    obj.img = this.data.imgUrl;
+    obj.col = this.data.col;
+    obj.rowNum = this.data.row;
+    obj.blank = this.data.blank;
+    wx.navigateTo({
+      url: '/pages/play/play?task=' + JSON.stringify(obj),
+    })
+  }
+
+})

students/1714080903207/Puzzle/pages/Jigsaw/Jigsaw.wxml

@@ -0,0 +1,23 @@
+<!--pages/newJigsaw/newJigsaw.wxml-->
+<view class="container">
+    <view class="imgView" style="height:{{iwidth+2}}px">
+        <image id="oriImg" src="{{imgUrl}}" mode="aspectFit" style="left:{{left}}px;width:{{iwidth}}px;height:{{iwidth}}px"></image>
+        <view id="gridding" style="left:{{left-1}}px;width:{{iwidth+2}}px;height:{{iwidth+2}}px;">
+            <view class="griddingView" id='0' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='1' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='2' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='3' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='4' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='5' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='6' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='7' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+            <view class="griddingView" id='8' style="width:{{mwidth}}px;height:{{mheight}}px;" bindtap='changeBlank'></view>
+        </view>
+    </view>
+
+    <view class="handleView">
+        <button size="mini" type='default' bindtap='cancel' wx:if="{{!isShare}}">取 消</button>
+        <button size="mini" type='primary' bindtap='begin'>开始</button>
+    </view>
+
+</view>

students/1714080903207/Puzzle/pages/Jigsaw/Jigsaw.wxss

@@ -0,0 +1,66 @@
+/* pages/newJigsaw/newJigsaw.wxss */
+
+.imgView{
+     width: 100%;  
+     position: relative;
+     /* padding: 10px 0; */
+}
+.imgView image{
+    position: absolute;
+    top: 1px;
+    /* width: 300px; */
+    /* height: 300px; */
+}
+.imgView #gridding{
+    position: absolute;
+    top: 0px;
+    border: 1px solid #aaa;
+    /* width: 302px; */
+    /* height: 302px; */
+    box-sizing: border-box;
+
+    display: flex;
+    flex-wrap: wrap;
+}
+.griddingView{
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+}
+
+.setView{
+    width: 90%;
+    margin-top: 10px; 
+    border: 1px solid #ddd;
+    border-radius: 3px;
+}
+.setView .weui-label{
+    width: 125px;
+}
+
+.handleView{
+    width: 100vw;
+    display: flex;
+    padding: 10px 0;
+    justify-content: space-between;
+}
+
+ .canvasView{
+    width: 100vw; 
+    display: flex; 
+    padding: 10px 0; 
+    justify-content: center; 
+    /* display: none; */
+}
+.canvasView canvas{
+     border: 1px solid #aaa; 
+    /* flex:1; */
+}
+.canvasView1{
+     width: 100vw;
+    display: flex; 
+    padding: 10px 0; 
+    justify-content: center;   
+}
+.canvasView1 canvas{
+    border: 1px solid #aaa;
+} 

students/1714080903207/Puzzle/pages/gameSetout/gameSetout.js

@@ -1,4 +1,4 @@
-import WeCropper from '../../utils//we-cropper.min.js';
+import WeCropper from '../../utils/we-cropper.min.js';
 
 // const device = wx.getSystemInfoSync() // 获取设备信息
 // pages/editimg/editimg.js
@@ -95,7 +95,7 @@ Page({
       if (src) {
         //跳转到任务创建页
         wx.navigateTo({
-          url: '/pages/newJigsaw/newJigsaw?img=' + src,
+          url: '/pages/Jigsaw/Jigsaw?img=' + src,
         })
       }
 

students/1714080903207/Puzzle/pages/gameSetout/gameSetout.wxml

@@ -1,8 +1,4 @@
 <!--pages/gameSetout/gameSetout.wxml-->
-<!-- 选择图片  默认图片
-  单图，双图
-  隐藏
-  自己， 好友 -->
 
 <view class="container">
     <template name="we-cropper">
@@ -23,4 +19,5 @@
             <button type="primary" size='mini' class="boxshaw getCropperImage" bindtap="getCropperImage">确 定</button>
         </view>
     </view>
-</view>
+</view>
+

students/1714080903207/Puzzle/pages/gameSetout/gameSetout.wxss

@@ -1 +1,6 @@
-/* pages/gameSetout/gameSetout.wxss */
+/* pages/gameSetout/gameSetout.wxss */
+.cropper-buttons{
+    display: flex;
+    padding: 10px;
+    justify-content:center;
+}