完成选择默认头像功能

actions/user_center.go

@@ -35,6 +35,7 @@ type ChangeAvatar struct {
 // Get /user_center/avatar
 func (a *ChangeAvatar) Get() error {
 	return a.Render("user_center/avatar.html", renders.T{
+		"title":      "修改头像",
 		"sub_active": "change_avatar",
 	})
 }

apis/user_center.go

@@ -31,6 +31,7 @@ func (a *UserInfo) Get() interface{} {
 		"status":   1,
 		"username": a.User.Username,
 		"email":    a.User.Email,
+		"avatar":   a.User.Avatar,
 		"avatars": []string{
 			a.User.AvatarImgSrc(128),
 			a.User.AvatarImgSrc(64),
@@ -164,7 +165,7 @@ type UploadAvatarImage struct {
 	binding.Binder
 }
 
-// Get /api/user_center/upload_avatar
+// Post /api/user_center/upload_avatar
 func (a *UploadAvatarImage) Post() interface{} {
 	filename, err := saveImage(a.Req(), []string{"avatar"}, 500*1024)
 	if err != nil {
@@ -190,3 +191,57 @@ func (a *UploadAvatarImage) Post() interface{} {
 		},
 	}
 }
+
+// DefaultAvatars 默认头像
+type DefaultAvatars struct {
+	Base
+	binding.Binder
+}
+
+// Get /api/user_center/default_avatars
+func (a *DefaultAvatars) Get() interface{} {
+	var defaultAvatars = []string{
+		"gopher_aqua.jpg",
+		"gopher_boy.jpg",
+		"gopher_brown.jpg",
+		"gopher_gentlemen.jpg",
+		"gopher_girl.jpg",
+		"gopher_strawberry_bg.jpg",
+		"gopher_strawberry.jpg",
+		"gopher_teal.jpg",
+	}
+
+	return map[string]interface{}{
+		"status":          1,
+		"default_avatars": defaultAvatars,
+	}
+}
+
+// SetAvatar 设置头像
+type SetAvatar struct {
+	Base
+	binding.Binder
+}
+
+// Put /api/user_center/set_avatar
+func (a *SetAvatar) Put() interface{} {
+	var form struct {
+		Avatar string `json:"avatar"`
+	}
+
+	a.ReadJSON(&form)
+
+	c := a.DB.C(models.USERS)
+	c.Update(bson.M{"_id": a.User.Id_}, bson.M{"$set": bson.M{"avatar": form.Avatar}})
+
+	a.User.Avatar = form.Avatar
+
+	return map[string]interface{}{
+		"status": 1,
+		"avatars": []string{
+			a.User.AvatarImgSrc(128),
+			a.User.AvatarImgSrc(64),
+			a.User.AvatarImgSrc(32),
+		},
+	}
+}

routes.go

@@ -55,9 +55,11 @@ func setRoutes(t *tango.Tango) {
 		g.Get("/comments/:commentID", new(apis.Comment))
 		g.Put("/comments/:commentID", new(apis.Comment))
 
+		g.Get("/user_center/default_avatars", new(apis.DefaultAvatars))
 		g.Get("/user_center/user_info", new(apis.UserInfo))
 		g.Put("/user_center/profile", new(apis.UserProfile))
 		g.Put("/user_center/change_password", new(apis.UserChangePassword))
-		g.Post("/user_center/set_avatar", new(apis.UploadAvatarImage))
+		g.Post("/user_center/upload_avatar", new(apis.UploadAvatarImage))
+		g.Put("/user_center/set_avatar", new(apis.SetAvatar))
 	})
 }

static/js/application.js

@@ -54,3 +54,22 @@ function put(url, body) {
 
   return fetch(url, opts).then(getJson);
 }
+
+function getAll(selector) {
+  return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+}
+
+$(document).ready(function() {
+  const $burgers = getAll('.burger');
+
+ if ($burgers.length > 0) {
+   $burgers.forEach($el => {
+     $el.addEventListener('click', () => {
+       const target = $el.dataset.target;
+       const $target = document.getElementById(target);
+       $el.classList.toggle('is-active');
+       $target.classList.toggle('is-active');
+     });
+   });
+ }
+});

templates/base.html

@@ -46,14 +46,14 @@
             <img src="https://is.golangtc.com/logo/golangtc.png?height=60">
           </a>
 
-          <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+          <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
           </a>
         </div>
 
-        <div id="navbarBasicExample" class="navbar-menu">
+        <div id="navbarMain" class="navbar-menu">
           <div class="navbar-start">
             <a class="navbar-item" href="/">
               主题

templates/user_center/avatar.html

@@ -27,28 +27,37 @@
       this.state = {
         loading: true,
         currentTab: 'upload',
-        avatars: []
+        avatar: '',
+        avatars: [],
+        defaultAvatars: []
       }
     }
 
     componentDidMount() {
       get('/api/user_center/user_info').then((data) => {
         this.setState({
           loading: false,
+          avatar: data.avatar,
           avatars: data.avatars
         })
       });
     }
 
-    setTab = (tab) => {
-      this.setState({currentTab: tab});
+    setDefaultTab = () => {
+      if (!this.state.defaultAvatars.length) {
+        get('/api/user_center/default_avatars').then((data) => {
+          this.setState({
+            defaultAvatars: data.default_avatars,
+          })
+        });
+      }
+
+      this.setState({currentTab: 'default'});
     }
 
     handleUploadSubmit = (e) => {
       e.preventDefault();
 
-      console.log('submit');
-
       if (!document.forms["upload"].image.files.length) {
         alert("请选择图片");
         return
@@ -58,7 +67,7 @@
       let formData = new FormData();
       formData.append('image', file);
 
-      postForm("/api/user_center/set_avatar", formData).then((data) => {
+      postForm("/api/user_center/upload_avatar", formData).then((data) => {
         if (data.status) {
           this.setState({avatars: data.avatars});
         } else {
@@ -67,8 +76,30 @@
       });
     }
 
+    handleChooseAvatarSubmit = (e) => {
+      e.preventDefault();
+
+      const {avatar} = this.state;
+
+      if (!avatar)  {
+        alert('请选择头像');
+        return;
+      }
+
+      put('/api/user_center/set_avatar', {
+        avatar: this.state.avatar
+      }).then((data) => {
+        this.setState({avatars: data.avatars});
+      });
+    }
+
+    handleChooseAvatarChange = (e) => {
+      console.log(e.target.value);
+      this.setState({avatar: e.target.value});
+    }
+
     render() {
-      const {currentTab, avatars} = this.state;
+      const {currentTab, avatar, avatars} = this.state;
       let images = [];
       avatars.map((src, index) => {
         images.push(<li><img src={src} /></li>)
@@ -82,7 +113,8 @@
 
       if (currentTab == 'upload') {
         uploadClass = 'is-active';
-        form = <form onSubmit={this.handleUploadSubmit} name="upload">
+
+        form = (<form onSubmit={this.handleUploadSubmit} name="upload">
           <div className="field is-horizontal">
             <div className="field-label is-normal">
               <label className="label">选择图片</label>
@@ -112,9 +144,53 @@
               </div>
             </div>
           </div>
-        </form>
+        </form>);
       } else if (currentTab == 'default') {
         defalutClass = 'is-active';
+
+        let defaultImages = [];
+        this.state.defaultAvatars.map((filename) => {
+          let src = "https://is.golangtc.com/avatar/" + filename + "?width=32&height=32&mode=fill";
+          let checked = avatar == filename;
+          defaultImages.push(<label className="radio">
+            <input
+              type="radio"
+              name="default_avatar"
+              value={filename}
+              defaultChecked={checked}
+              onChange={this.handleChooseAvatarChange} />
+            <img src={src} />
+          </label>);
+        });
+
+        form = (<form onSubmit={this.handleChooseAvatarSubmit}>
+          <div className="field is-horizontal">
+            <div className="field-label">
+              选择头像
+            </div>
+            <div className="field-body">
+              <div className="field">
+                <div className="control">
+                  {defaultImages}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="field is-horizontal">
+            <div className="field-label">
+            </div>
+            <div className="field-body">
+              <div className="field">
+                <div className="control">
+                  <button className="button is-primary">
+                    确认
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>);
       } else {
         gravatarClass = 'is-active';
       }
@@ -131,7 +207,7 @@ <h1 className="subtitle">当前头像</h1>
               <a onClick={ () => this.setState({currentTab: 'upload'}) }>上传头像</a>
             </li>
             <li className={defalutClass}>
-              <a onClick={ () => this.setState({currentTab: 'default'}) }>选择默认头像</a>
+              <a onClick={this.setDefaultTab}>选择默认头像</a>
             </li>
             <li className={gravatarClass}>
               <a onClick={ () => this.setState({currentTab: 'gavatar'}) }>从 Gravatar 获取</a>