可以修改头像

.gitignore

@@ -13,6 +13,8 @@ project.config.json
 app.js
 
 towxml
+we-cropper
+
 .idea
 api_docs
 

app.json

@@ -2,6 +2,7 @@
   "pages": [
     "pages/findmore/findmore",
     "pages/my_courses/my_courses",
+    "pages/login/login",
     "pages/course_setting/course_setting",
     "pages/exercises/exercises",
     "pages/courses/courses",
@@ -9,13 +10,13 @@
     "pages/setting/setting",
     "pages/classroom/classroom",
     "pages/about/about",
-    "pages/login/login",
+    
     "pages/test/test",
     "pages/course/course",
     "pages/files/files",
     "pages/mark_detail/mark_detail",
-    "pages/reset_password/reset_password"
+    "pages/reset_password/reset_password",
-
+    "pages/image_crop/image_crop"
   ],
   "window": {
     "backgroundTextStyle": "dark",

data/client.js

@@ -224,6 +224,29 @@ export class Client{
             });
         })
     }
+    upload_avatar({avatar_path, success, fail, complete}){
+        console.log("upload_avatar");
+        return new Promise((resolve, reject) => {
+            Account.upload_avatar({
+                session: this.session,
+                avatar_path: avatar_path,
+                login: this.current_user.login,
+                complete: complete,
+                success: res => {
+                    if (typeof success == "function") {
+                        success(res);
+                    }
+                    resolve(res);
+                },
+                fail: error => {
+                    if (typeof fail == "function") {
+                        fail(error);
+                    }
+                    reject(error);
+                }
+            })
+        });
+    }
 
     search_courses({limit=20, page=1, order="all", search="", success, fail, complete}={}){
         return new Promise((resolve, reject) => {
@@ -271,7 +294,7 @@ export class Client{
                 session: this.session,
                 page: page,
                 per_page: per_page,
-                user: this.current_user.login,
+                login: this.current_user.login,
                 complete: complete,
                 success: res=>{
                     if(typeof success == "function"){

data/eduapi.js

@@ -90,10 +90,10 @@ export class Account{
             complete: complete
         })
     }
-    static get_user_courses({session,user,category="",status="",sort_by="",sort_direction="",page=1, per_page=16, success, fail, complete}){
+    static get_user_courses({session,login,category="",status="",sort_by="",sort_direction="",page=1, per_page=16, success, fail, complete}){
         let data = {page: page, per_page: per_page, category:category, status: status, sort_by: sort_by, sort_direction: sort_direction};
         return session.request({
-            url: api_base_url + "/users/"+user +"/courses.json",
+            url: api_base_url + "/users/"+login +"/courses.json",
             method: "GET",
             data: data,
             success: success,
@@ -125,6 +125,33 @@ export class Account{
     }
     static set_password({}){
 
+    }
+    static upload_avatar({session, login, avatar_path, success, fail, complete}){
+        var avatar_data=null;
+        wx.getFileSystemManager().readFile({
+            filePath: avatar_path,
+            encoding: "base64",
+            success:res=> {
+                console.log("in success");
+                console.log(res);
+                avatar_data ="data:image/jpeg;base64,"+res.data;
+                console.log("upload_avatar");
+                console.info(avatar_data);
+                session.request({
+                    url: "https://www.educoder.net/api/users/accounts/"+login+"/avatar.json",
+                    method: "PUT",
+                    data: {image: avatar_data},
+                    success: success,
+                    fail: fail,
+                    complete: complete
+                })
+            },
+            fail: error=>{
+                console.error(error);
+            }
+        });
+
+
     }
 }
 

data/requests.js

@@ -49,11 +49,18 @@ export class Session {
 
   }
   uploadFile({url, filePath, name, header, formData, success, fail, complete}){
+    console.log("uploadFile");
+    console.log({
+      url: url,
+      filePath: filePath,
+      name: name,
+      header: {"content-type": "multipart/form-data", "Cookie": this.cookie_str, ...header},
+      formData: formData});
     return wx.uploadFile({
       url: url,
       filePath: filePath,
       name: name,
-      header: {...header, "content-type": "multipart/form-data", "Cookie": this.cookie_str},
+      header: {"content-type": "multipart/form-data", "Cookie": this.cookie_str, ...header},
       formData: formData,
       success: success,
       fail: fail,

pages/findmore/findmore.js

@@ -16,20 +16,20 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    app.client.get_home_page()
+      .then(res => {
+        console.info(res);
+        this.setData({ page_info: res.data, page_status: 1 });
+      }).catch(error => {
+        this.setData({ page_status: 2 });
+      })
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-    app.client.get_home_page()
+    
-    .then(res=>{
-      console.info(res);
-      this.setData({page_info: res.data, page_status: 1});
-    }).catch(error=>{
-      this.setData({page_status: 2});
-    })
   },
 
   /**
@@ -57,7 +57,7 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {
-
+    this.onLoad();
   },
 
   /**

pages/findmore/findmore.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "enablePullDownRefresh": true
 }

pages/image_crop/image_crop.js

@@ -0,0 +1,106 @@
+import WeCropper from '../../we-cropper/dist/we-cropper.min.js'
+
+
+const device = wx.getSystemInfoSync()
+const width = device.windowWidth
+const height = device.windowHeight - 30
+const app = getApp();
+
+Page({
+  data: {
+    cropperOpt: {
+      id: 'cropper',
+      width,
+      height,
+      scale: 2.5,
+      zoom: 8,
+      cut: {
+        x: (width - 300) / 2,
+        y: (height - 300) / 2,
+        width: 300,
+        height: 300
+      }
+    }
+  },
+
+  touchStart(e) {
+    console.log(e);
+    this.mycropper.touchStart(e)
+  },
+
+  touchMove(e) {
+    console.log(e);
+    this.mycropper.touchMove(e)
+  },
+
+  touchEnd(e) {
+    console.log(e);
+    this.mycropper.touchEnd(e)
+  },
+
+  getCropperImage() {
+    console.warn("ontap: getCropImage")
+    this.mycropper.getCropperImage((avatar) => {
+      console.log(avatar);
+      if (avatar) {
+        console.info("avatar");
+        console.log(avatar);
+        app.client.upload_avatar({
+          avatar_path: avatar,
+          success: res=>{
+            console.log("upload avatar success");
+            console.log(res);
+          },
+          fail: error=>{
+            console.error(error);
+          }
+        });
+      } else {
+        console.error('获取图片失败')
+      }
+    })
+  },
+
+  uploadTap() {
+    const self = this
+
+    wx.chooseImage({
+      count: 1,
+      success(res) {
+        const src = res.tempFilePaths[0]
+        self.mycropper.pushOrign(src)
+      }
+    })
+  },
+
+  onLoad(option) {
+    const {cropperOpt} = this.data
+    const {src} = option
+
+    if (src) {
+      Object.assign(cropperOpt, {src})
+      this.mycropper = new WeCropper(cropperOpt);
+      this.mycropper
+        .on('ready', function (ctx) { 
+          console.info("ready");
+          console.info(ctx);
+        })
+        .on('beforeImageLoad', (ctx) => {
+          console.info("beforeImageLoad");
+          wx.showToast({
+            title: '上传中',
+            icon: 'loading',
+            duration: 3000
+          })
+        })
+        .on('imageLoad', (ctx) => {
+          console.info("imageLoad")
+          wx.hideToast()
+        })
+        .on('beforeDraw', (ctx, instance) => {
+          console.log(`before canvas draw,i can do something`)
+          console.log(`current canvas context:`, ctx)
+        })
+    }
+  }
+})

pages/image_crop/image_crop.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "设置头像"
+}

pages/image_crop/image_crop.wxml

@@ -0,0 +1,12 @@
+<import src="/we-cropper/dist/we-cropper.wxml"/>
+<view class="cropper-wrapper">
+  <template is="we-cropper" data="{{...cropperOpt}}" />
+  <view class="operation flex-wrap">
+    <button class="upload" bindtap="uploadTap">
+    重新选择
+    </button>
+    <button type="primary" class="getCropperImage" bindtap="getCropperImage">
+    确定
+    </button>
+  </view>
+</view>

pages/image_crop/image_crop.wxss

@@ -0,0 +1,21 @@
+page{
+height: 100%
+}
+.cropper{
+position: absolute;
+top: 0;
+left: 0;
+}
+
+.operation{
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  align-items: center
+}
+
+.operation button{
+  width: 49%;
+}
+
+

pages/setting/setting.js

@@ -7,6 +7,37 @@ Page({
     show_join_course_modal: false,
     invite_code: ""
   },
+  /**on tap */
+  onTapAvatar: function({currentTarget:{dataset}}){
+    wx.showActionSheet({
+      itemList: ["查看图片","更改头像"],
+      success:res=>{
+        switch(res.tapIndex){
+          case 0:
+            wx.previewImage({
+              urls: [dataset.src],
+            });
+            break;
+          case 1:
+            console.log("点击更改头像");
+            wx.chooseImage({
+              count:1, 
+              success: function(res) {
+                console.log("choose image")
+                console.log(res);
+                const src = res.tempFilePaths[0]
+                wx.navigateTo({
+                  url: '../image_crop/image_crop?src='+src,
+                })
+              },
+            })
+            break;
+        }
+      }
+    })
+   
+  },
+
   logout: function(){
     app.client.logout({
       success:res=>{
@@ -73,6 +104,8 @@ Page({
       this.setData({current_user: app.client.current_user})
       if ("image_url" in app.client.current_user && app.client.current_user.image_url) {
         this.setData({ avatar_url: "https://www.educoder.net/images/" + app.client.current_user.image_url })
+      }else{
+        this.setData({ avatar_url: "" });
       }
     })
   },

pages/setting/setting.wxml

@@ -1,7 +1,7 @@
 <view class="setting">
   <view class="user-view bg_user">
     <!--open-data type="userAvatarUrl" class="avatar" default-avatar="../../images/avatar.png"></open-data-->
-    <image class="avatar" src="{{avatar_url?avatar_url:'../../images/avatar.png'}}"></image>
+    <image class="avatar" bindtap="onTapAvatar" data-src="{{avatar_url?avatar_url:'../../images/avatar.png'}}" src="{{avatar_url?avatar_url:'../../images/avatar.png'}}"></image>
     <text class="user-text"  bindtap="enter_usersetting">{{current_user.real_name}} | {{current_user.username}}</text>
   </view>
   <view class="nav-list">