剪切图片另外更改bug

app.json

@@ -3,7 +3,8 @@
     "pages/index/index",
     "pages/details/details",
     "pages/setName/setName",
-    "pages/album/album"
+    "pages/album/album",
+    "pages/clip/clip"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/look/look.js

@@ -3,7 +3,7 @@ import httpRequestApi from '../../utils/APIRequest';
 export const lookInit =  (that) => {
   that.setData({
     lookData: {
-      nav: ['看动画', '学知识', '育儿经'],
+      nav: [],
       lookInd: 0,
       lookList: [],
     }
@@ -45,6 +45,12 @@ export const lookInit =  (that) => {
       })
     })
   }
+  httpRequestApi.getCategory().success((res)=>{
+    that.data.lookData.nav = res.data.data;
+    that.setData({
+      lookData: that.data.lookData
+    })
+  })
   //初始数据
   that.httpList(1)
 }

component/look/look.wxml

@@ -2,7 +2,7 @@
 <template name="look">
     <view class="nav">
         <block wx:for="{{lookData.nav}}" wx:key="{{index}}">
-            <view class="{{index == lookData.lookInd ? 'slecte-nav' : ''}}" bindtap="lookChoice" data-index="{{index}}">{{item}}</view>
+            <view class="{{index == lookData.lookInd ? 'slecte-nav' : ''}}" bindtap="lookChoice" data-index="{{index}}">{{item.name}}</view>
         </block>
     </view>
     <swiper current="{{lookData.lookInd}}" bindchange="lookSlide">

component/mys/mys.js

@@ -6,7 +6,8 @@ export function myInit(that) {
       myInd: 0,
       favoritesList: [],
       playLogList: [],
-      userName: ''
+      userName: '',
+      avatar: ''
     }
   })
   //点击切换
@@ -101,6 +102,7 @@ export function myInit(that) {
       //wx.setStorage('photoBox', res.data.data.photoBox)
       wx.setStorageSync('photoBox', res.data.data.photoBox)
       that.data.myData.userName = res.data.data.nickName;
+      that.data.myData.avatar = res.data.data.avatar
       that.setData({
         myData: that.data.myData
       })

component/mys/mys.wxml

@@ -9,7 +9,7 @@
         <swiper-item>
             <view class="my-information">
                 <view class="information-item">
-                    <image class="head" bindtap="setName" src=""></image>
+                    <image class="head" bindtap="setName" src="{{myData.avatar}}"></image>
                     <view class="set-name">
                         <text class="name">{{myData.userName}}</text>
                         <text bindtap="setName">点击修改头像和名字</text>

pages/clip/clip.js

@@ -0,0 +1,196 @@
+// pages/clip/clip.js
+const HOST = require('../../utils/const.js').apiUrl;
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imageUrl: '',
+    cropperW: '',
+    cropperH: '',
+    img_ratio: '',
+    IMG_W: '',
+    IMG_H: '',
+    clipImage: '',
+    left: '',
+    top: '',
+    clipW: 200
+  },
+
+  //拖拽事件
+  move: function ({ detail }) {
+    this.setData({
+      left: detail.x * 2,
+      top: detail.y * 2
+    })
+  },
+  //缩放事件
+  scale: function ({detail}) {
+    console.log(detail.scale)
+    this.setData({
+      clipW: 200 * detail.scale 
+    })
+  },
+  //生成图片
+  getImageInfo: function () {
+    wx.showLoading({
+      title: '图片生成中...',
+    })
+    const img_ratio = this.data.img_ratio;
+    const canvasW = (this.data.clipW / this.data.cropperW) * this.data.IMG_W
+    const canvasH = (this.data.clipW / this.data.cropperH) * this.data.IMG_H
+    const canvasL = (this.data.left / this.data.cropperW) * this.data.IMG_W
+    const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
+    // 将图片写入画布
+    const ctx = wx.createCanvasContext('myCanvas');
+    //绘制图像到画布
+    ctx.save(); // 先保存状态 已便于画完圆再用        
+    ctx.beginPath(); //开始绘制  
+    ctx.clearRect(0, 0, 1000, 1000)      
+    //先画个圆      
+    ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)       
+    ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 
+    // ctx.setFillStyle('#EEEEEE')
+    // ctx.fill()    
+    ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.clipW, this.data.clipW); // 推进去图片        
+    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+    ctx.draw(true, () => {
+      // 获取画布要裁剪的位置和宽度   
+      wx.canvasToTempFilePath({
+        x: 0,
+        y: 0,
+        width: this.data.clipW,
+        height: this.data.clipW,
+        destWidth: this.data.clipW,
+        destHeight: this.data.clipW,
+        quality: 0.5,
+        canvasId: 'myCanvas',
+        success:  (res) => {
+          wx.hideLoading()
+          this.setData({
+            clipImage: res.tempFilePath
+          })
+          //上传文件
+          wx.uploadFile({  
+            url: HOST + 'wx/file/upload',  
+            filePath: res.tempFilePath,  
+            name: 'uploadfile_ant',  
+            header: {  
+              "Content-Type": "multipart/form-data"  
+            },  
+            success: (res) => {  
+             console.log(res);
+             const data = JSON.parse(res.data);
+             if (data.success) {
+                wx.navigateTo({
+                  url: '/pages/setName/setName?imageUrl=' + data.data 
+                })
+             }
+            },  
+            fail: function (res) {  
+              wx.hideToast();  
+              wx.showModal({  
+                title: '错误提示',  
+                content: '上传图片失败'
+              })  
+            }  
+          }); 
+          //成功获得地址的地方
+          // wx.previewImage({
+          //   current: '', // 当前显示图片的http链接
+          //   urls: [res.tempFilePath] // 需要预览的图片http链接列表
+          // })
+        }
+      })
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log(options.imageUrl);
+    const imageUrl = options.imageUrl;
+    this.setData({
+      imageUrl
+    })
+    wx.getImageInfo({
+      src: imageUrl,
+      success: (res) => {
+        console.log(res);
+        //图片实际款高
+        const width = res.width;
+        const height = res.height;
+        //图片宽高比例
+        const img_ratio = width / height
+        this.setData({
+          img_ratio,
+          IMG_W: width,
+          IMG_H: height,
+        })
+        if (img_ratio >= 1) {
+          //宽比较大，横着显示
+          this.setData({
+            cropperW: 750,
+            cropperH: 750 / img_ratio,
+          })
+        } else {
+          //竖着显示
+          this.setData({
+            cropperW: 750 * img_ratio,
+            cropperH: 750
+          })
+        }
+      } 
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/clip/clip.json

@@ -0,0 +1 @@
+{}

pages/clip/clip.wxml

@@ -0,0 +1,13 @@
+<!--pages/clip/clip.wxml-->
+<view class="clip">
+    <image class="head-img" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx" src="{{imageUrl}}"></image>
+    <movable-area scale-area style="width:{{cropperW}}rpx;height:{{cropperH}}rpx">
+        <movable-view bindchange="move" bindscale="scale" direction="all" scale scale-min="0.5" scale-max="1.8">
+        </movable-view>
+    </movable-area>
+    <view class="btn">
+        <text>取消</text>
+        <text bindtap="getImageInfo">保存</text>
+    </view>
+</view>
+<canvas canvas-id="myCanvas" style="position:absolute; width:100%;height:100%;border: 1px solid red;left: -9999px; top: -9999px;"></canvas>

pages/clip/clip.wxss

@@ -0,0 +1,44 @@
+/* pages/clip/clip.wxss */
+.clip {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.head-img,
+movable-area {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);  
+}
+
+movable-view {
+    height: 200rpx; 
+    width: 200rpx; 
+    border: 2rpx solid #000;
+    border-radius: 50%;
+}
+
+
+.btn {
+    position: absolute;
+    left: 0;
+    bottom: 10rpx;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 88rpx;
+    width: 100%;
+}
+
+.btn text {
+   width: 40%;
+   height: 100%;
+   border-radius: 10rpx;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   background: skyblue;
+   color: #fff; 
+}

pages/details/details.wxml

@@ -3,24 +3,24 @@
     <view class="details-video">
         <video id="myVideo" src="{{playUrl}}" bindplay="addHistory" bindended="endplay" controls page-gesture objectFit="fill" autoplay></video>
     </view>
-    <scroll-view class="details-scroll" scroll-y>       
-        <view class="menu">
-            <view class="menu-item" style="width: 116rpx;" bindtap="favorites">
-                <image src="{{favoritesFlag ? '../../static/image/Collection.png' : '../../static/image/no-Collection.png'}}"></image>
-            </view>
-            <view class="menu-item">
-                <button open-type="share" plain><image src="../../static/image/share.png"></image></button>
-            </view>
-            <view class="menu-item" bindtap="commentAnthology">
-                <image src="../../static/image/Anthology.png"></image>
-            </view>
-            <view class="menu-item" bindtap="commentDetails">
-                <image src="../../static/image/details.png"></image>
-            </view>            
+    <view class="menu">
+        <view class="menu-item" style="width: 116rpx;" bindtap="favorites">
+            <image src="{{favoritesFlag ? '../../static/image/Collection.png' : '../../static/image/no-Collection.png'}}"></image>
         </view>
+        <view class="menu-item">
+            <button open-type="share" plain><image src="../../static/image/share.png"></image></button>
+        </view>
+        <view class="menu-item" bindtap="commentAnthology">
+            <image src="../../static/image/Anthology.png"></image>
+        </view>
+        <view class="menu-item" bindtap="commentDetails">
+            <image src="../../static/image/details.png"></image>
+        </view>            
+    </view>
+    <scroll-view class="details-scroll" scroll-y>       
         <view class="comment">
             <view class="anthology" hidden="{{anthologyHide}}">
-                <view wx:for="{{courseWareList}}" wx:key="{{index}}" bindtap="Anthology" data-index="{{index}}" class="collection">
+                <view wx:for="{{courseWareList}}" wx:key="{{index}}" bindtap="Anthology" data-index="{{index}}" class="collection {{index === currentVideo ? 'current' : ''}}">
                     {{item.sort}}
                 </view>
             </view>              

pages/details/details.wxss

@@ -4,7 +4,7 @@
     width: 100%;
     height: 100%;
     background: #eaeaea;
-    padding-top: 436rpx;
+    padding-top: 590rpx;
     box-sizing: border-box;
 }
 
@@ -27,15 +27,16 @@
 }
 
 .menu {
+    position: absolute;
+    left: 0;
+    top: 466rpx;
     display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin-top: 30rpx;
 }
 
 .menu-item {
     width: 90rpx;
     height: 120rpx;
+    margin: 0 46rpx;
 }
 
 .menu-item button {
@@ -92,6 +93,10 @@
     margin: 27rpx 0 0 18rpx;
 }
 
+.current {
+    background: red; 
+}
+
 .comment-details {
     width: 100%;
     margin-top: 27rpx;

pages/index/index.js

@@ -47,10 +47,12 @@ Page({
     },1000)
   },
   onLoad: function (options) {
-    if(options.return && options.ind) {
+    if(options.ind) {
+      let ind = options.ind;
+      let templates = this.data.tab[ind].templates;
       this.setData({
-        templates: options.return,
-        ind: options.ind
+        templates,
+        ind,
       })
     }
     this.init();

pages/setName/setName.js

@@ -23,7 +23,28 @@ Page({
       phone: detail.value,
     })
   },
-
+  //更改头像
+  setHead: function () {
+    wx.chooseImage({
+      count: 1, // 默认9
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success:  (res) => {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        const tempFilePaths = res.tempFilePaths;
+        //启动上传等待中...  
+        wx.showToast({  
+          title: '正在上传...',  
+          icon: 'loading',  
+          mask: true,  
+          duration: 1000 
+        }) 
+        wx.navigateTo({
+          url: '/pages/clip/clip?imageUrl=' + tempFilePaths[0] 
+        })
+      }
+    })
+  },
   //保存修改
   Savemodification: function () {
     //console.log(this.data.name,this.data.phone);
@@ -42,10 +63,13 @@ Page({
     httpRequestApi.setUserInfo({
       "mobileNo": phone,
       "nickName": name,
-      "avatar": ""
+      "avatar": this.data.headImg
     }).success(res => {
       if(res.data.success) {
-        wx.navigateBack();
+        //wx.navigateBack();
+        wx.navigateTo({
+          url: '/pages/index/index?ind=2'
+        })
       }
     })
   },
@@ -57,12 +81,18 @@ Page({
     //初始化获取个人信息
     httpRequestApi.getUserInfo().success(res => {
       const user = res.data.data;
+      const headImg = options.imageUrl ? options.imageUrl : user.avatar;
       this.setData({
         name: user.nickName,
         phone: user.mobileNo,
-        headImg: user.avatar
+        headImg
       })
     });
+    if (options.imageUrl) {
+      this.setData({
+        headImg: options.imageUrl
+      })
+    }
   },
 
   /**

pages/setName/setName.wxml

@@ -1,6 +1,6 @@
 <!--pages/setName/setName.wxml-->
 <view class="set">
-    <view class="set-head">
+    <view class="set-head" bindtap="setHead">
         <image src="{{headImg}}"></image>
         <text>点击头像进行更换</text>
     </view>

utils/APIRequest.js

@@ -13,6 +13,13 @@ class httpRequestApi {
             uid: wx.getStorageSync('uid'),
         }).url(url).data(data).send();
     }
+    //获取看nav切换
+    static getCategory() {
+        const url = httpApiUrl('wx/category');
+        return getInstance().header({
+            uid: wx.getStorageSync('uid'),
+        }).url(url).send();
+    }
     //获取课程详情
     static getCourseDetails(id) {
         const url = httpApiUrl(`wx/course/${id}`);