✨ 设置->资料与账号功能开发

components/layouts/pc/header.vue

@@ -155,7 +155,7 @@
               })
               break;
             case 'github':
-              window.open("https://github.com/Hugh-rymcu");
+              window.open("https://github.com/rymcu");
               return false;
               break;
             default:
@@ -180,10 +180,7 @@
             break;
           case 'user-info':
             _ts.$router.push({
-              name: 'account',
-              params: {
-                id: _ts.user.idUser
-              }
+              path: '/user/settings/account'
             })
             break;
           case 'logout':
@@ -210,7 +207,7 @@
       }
     },
     mounted() {
-      this.restaurants = this.loadAll();
+      // this.restaurants = this.loadAll();
       let user = this.user;
       if (user) {
         this.getUnreadNotifications();

nuxt.config.js

@@ -51,6 +51,7 @@ export default {
   ** https://nuxtjs.org/guide/plugins
   */
   plugins: [
+    {src: '~/plugins/avataaars/generator/generateAvatar'},
     {src: '~/plugins/extend'},
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},

package-lock.json

@@ -9495,6 +9495,11 @@
         }
       }
     },
+    "save-svg-as-png": {
+      "version": "1.4.17",
+      "resolved": "https://registry.npm.taobao.org/save-svg-as-png/download/save-svg-as-png-1.4.17.tgz",
+      "integrity": "sha1-KURCACdyok8dsb+KKq999KsM3FU="
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -11049,6 +11054,11 @@
       "resolved": "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU="
     },
+    "vuejs-avataaars": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/vuejs-avataaars/download/vuejs-avataaars-4.0.1.tgz",
+      "integrity": "sha1-Ak1rLcTu/pf/pKBeLiiNS5UDTSw="
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.5.1.tgz",

package.json

@@ -16,7 +16,9 @@
     "express": "^4.17.1",
     "js-cookie": "^2.2.1",
     "nuxt": "^2.14.0",
-    "vditor": "^3.4.1"
+    "save-svg-as-png": "^1.4.17",
+    "vditor": "^3.4.1",
+    "vuejs-avataaars": "^4.0.1"
   },
   "devDependencies": {
     "@nuxtjs/proxy": "^2.0.1",

pages/user/settings.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-row type="flex" justify="center" :gutter="8">
+    <el-col v-if="isLogin" :span="20">
+      <el-col :span="4">
+        <el-menu
+          :default-active="getActiveMenu"
+          class="el-menu-vertical-demo"
+          @select="handleSelectMenu">
+          <el-menu-item index="account">
+            <i class="el-icon-s-data"></i>
+            <span slot="title">资料与账号</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :span="20">
+        <nuxt :nuxt-child-key="$route.name" />
+      </el-col>
+    </el-col>
+    <el-col v-else class="text-center">
+      <el-alert
+        title="用户无权限"
+        type="warning"
+        center
+        show-icon
+        :closable="false">
+      </el-alert>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: "Settings",
+    computed: {
+      getActiveMenu () {
+        return this.$store.state.activeMenu;
+      },
+      isLogin () {
+        return this.$store.state.oauth;
+      }
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      handleSelectMenu(item) {
+        let _ts = this;
+        let activeMenu = _ts.$store.state.activeMenu;
+        if (activeMenu !== item) {
+          _ts.$store.commit('setActiveMenu', item);
+          _ts.$router.push(
+            {
+              path: `/user/settings/${item}`
+            }
+          )
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

pages/user/settings/account.vue

@@ -0,0 +1,253 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-form :model="user" :rules="rules" ref="user" label-width="100px">
+        <el-form-item style="align-items: center;text-align: center;">
+          <el-upload
+            class="avatar-uploader"
+            :action="tokenURL.URL"
+            :multiple="true"
+            :with-credentials="true"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :data="uploadOption"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload">
+            <div v-if="svgShow">
+              <Avataaars
+                id="avatarSvg"
+                style="width: 178px; height: 178px;"
+                :avatarStyle='avatar.acatarStyle'
+                :topType='avatar.topType'
+                :accessoriesType='avatar.accessoriesType'
+                :hairColor='avatar.hairColor'
+                :facialHairType='avatar.facialHairType'
+                :clotheType='avatar.clotheType'
+                :clotheColor='avatar.clotheColor'
+                :eyeType='avatar.eyeType'
+                :eyebrowType='avatar.eyebrowType'
+                :mouthType='avatar.mouthType'
+                :skinColor='avatar.skinColor'>
+              </Avataaars>
+            </div>
+            <div v-else>
+              <el-avatar v-if="avatarUrl" class="avatar" :src="avatarUrl"></el-avatar>
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </div>
+          </el-upload>
+          <el-button style="margin-top: 1rem;" type="primary" round @click="genAvatar">随机</el-button>
+        </el-form-item>
+        <el-form-item label="昵称" prop="nickname">
+          <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input type="email" v-model="user.email" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio-group v-model="user.sex">
+            <el-radio border label="0">保密</el-radio>
+            <el-radio border label="1">男</el-radio>
+            <el-radio border label="2">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="个人介绍" prop="signature">
+          <el-input type="textarea" v-model="user.signature"></el-input>
+        </el-form-item>
+        <el-form-item style="text-align: right;">
+          <el-button type="primary" round @click="updateUserInfo">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import Avataaars from 'vuejs-avataaars';
+  import saveSvg from 'save-svg-as-png';
+
+  const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
+  export default {
+    name: "account",
+    components: {
+      Avataaars
+    },
+    computed: {
+      uploadHeaders() {
+        let token = this.$store.state.uploadHeaders;
+        return {'X-Upload-Token': token}
+      },
+      idUser() {
+        return this.$store.state.oauth.idUser
+      }
+    },
+    data() {
+      return {
+        user: {},
+        rules: {
+          nickname: [
+            {required: true, message: '请输入昵称', trigger: 'blur'},
+            {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
+          ],
+          email: [
+            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
+            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
+          ]
+        },
+        loading: false,
+        svgShow: false,
+        tokenURL: {
+          URL: '',
+          token: ''
+        },
+        avatarUrl: '',
+        avatar: {},
+        fileList: [],
+        uploadOption: {
+          type: 0
+        }
+      }
+    },
+    methods: {
+      genAvatar() {
+        let _ts = this;
+        _ts.$set(_ts, 'svgShow', true);
+        const avatar = generateRandomAvatar();
+        _ts.$set(_ts, 'avatar', avatar);
+      },
+      handleAvatarSuccess(res) {
+        let _ts = this;
+        if (res && res.data && res.data.url) {
+          let user = _ts.user;
+          user.avatarUrl = res.data.url;
+          _ts.$set(_ts, 'user', user);
+          _ts.$set(_ts, 'svgShow', false);
+          _ts.$set(_ts, 'avatarUrl', res.data.url);
+        } else {
+          _ts.$message.error('上传失败!');
+        }
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isPNG = file.type === 'image/png';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!(isJPG || isPNG)) {
+          this.$message.error('上传图标只能是 JPG 或者 PNG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传图标大小不能超过 2MB!');
+        }
+        return (isJPG || isPNG) && isLt2M;
+      },
+      getData() {
+        let _ts = this;
+        _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message.error(res.message);
+            } else {
+              _ts.$set(_ts, 'user', res.user);
+              _ts.$set(_ts, 'avatarUrl', res.user.avatarUrl);
+            }
+          }
+        })
+      },
+      checkNickname() {
+        let _ts = this;
+        _ts.$axios.$get('/api/user-info/check-nickname', {
+          params: {
+            idUser: _ts.user.idUser,
+            nickname: _ts.user.nickname
+          }
+        }).then(function (res) {
+          if (res && res.message) {
+            _ts.$message.error(res.message);
+          }
+        })
+      },
+      updateUserInfo() {
+        let _ts = this;
+        let svgShow = _ts.svgShow;
+        let user = _ts.user;
+        if (svgShow) {
+          saveSvg.svgAsPngUri(document.getElementById('avatarSvg'), {}).then(uri => {
+            if (uri) {
+              user.avatarType = 1;
+              user.avatarUrl = uri;
+              _ts.updateUser(user);
+            } else {
+              _ts.$message.error('头像上传失败 !');
+            }
+          });
+        } else {
+          _ts.updateUser(user);
+        }
+      },
+      updateUser(user) {
+        let _ts = this;
+        _ts.$refs['user'].validate((valid) => {
+          if (valid) {
+            _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
+              if (res) {
+                if (res.message) {
+                  _ts.$message.error(res.message);
+                } else {
+                  _ts.$set(_ts, 'user', res.user);
+                  _ts.$set(_ts, 'avatarUrl', res.user.avatarUrl);
+                  _ts.$set(_ts, 'svgShow', false);
+                  // _ts.$store.commit('setUserInfo', res.user);
+                  _ts.$message.success('更新成功 !');
+                }
+              }
+            })
+          } else {
+            _ts.$message.error('数据异常 !');
+          }
+        });
+      }
+    },
+    mounted() {
+      let _ts = this;
+      this.$store.commit('setActiveMenu', 'account');
+      this.$axios.$get('/api/upload/simple/token').then(function (res) {
+        if (res) {
+          _ts.$store.commit('setUploadHeaders', res.uploadToken);
+          _ts.$set(_ts, 'tokenURL', {
+            token: res.uploadToken || '',
+            URL: res.uploadURL || '',
+          })
+        }
+      });
+      this.getData();
+    }
+  }
+</script>
+
+<style scoped>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>

plugins/avataaars/data/accessories.js

@@ -0,0 +1,9 @@
+module.exports = [
+  'Blank',
+  'Kurt',
+  'Prescription01',
+  'Prescription02',
+  'Round',
+  'Sunglasses',
+  'Wayfarers'
+]

plugins/avataaars/data/clothes.js

@@ -0,0 +1,12 @@
+module.exports = [
+  'BlazerShirt',
+  'BlazerSweater',
+  'CollarSweater',
+  'GraphicShirt',
+  'Graphics',
+  'Hoodie',
+  'Overall',
+  'ShirtCrewNeck',
+  'ShirtScoopNeck',
+  'ShirtVNeck'
+]

plugins/avataaars/data/clothesColor.js

@@ -0,0 +1,17 @@
+module.exports = [
+  'Black',
+  'Blue01',
+  'Blue02',
+  'Blue03',
+  'Gray01',
+  'Gray02',
+  'Heather',
+  'PastelBlue',
+  'PastelGreen',
+  'PastelOrange',
+  'PastelRed',
+  'PastelYellow',
+  'Pink',
+  'Red',
+  'White'
+]

plugins/avataaars/data/clothesGraphic.js

@@ -0,0 +1,13 @@
+module.exports = [
+  'Skull',
+  'SkullOutline',
+  'Bat',
+  'Cumbia',
+  'Deer',
+  'Diamond',
+  'Hola',
+  'Selena',
+  'Pizza',
+  'Resist',
+  'Bear'
+]

plugins/avataaars/data/eyebrow.js

@@ -0,0 +1,15 @@
+module.exports = [
+  'Angry',
+  'AngryNatural',
+  'Default',
+  'DefaultNatural',
+  'FlatNatural',
+  'FrownNatural',
+  'RaisedExcited',
+  'RaisedExcitedNatural',
+  'SadConcerned',
+  'SadConcernedNatural',
+  'UnibrowNatural',
+  'UpDown',
+  'UpDownNatural'
+]

plugins/avataaars/data/eyes.js

@@ -0,0 +1,14 @@
+module.exports = [
+  'Close',
+  'Cry',
+  'Default',
+  'Dizzy',
+  'EyeRoll',
+  'Happy',
+  'Hearts',
+  'Side',
+  'Squint',
+  'Surprised',
+  'Wink',
+  'WinkWacky'
+]

plugins/avataaars/data/facialHair.js

@@ -0,0 +1,8 @@
+module.exports = [
+  'BeardLight',
+  'BeardMagestic',
+  'BeardMedium',
+  'Blank',
+  'MoustacheFancy',
+  'MoustacheMagnum'
+]

plugins/avataaars/data/facialHairColor.js

@@ -0,0 +1,10 @@
+module.exports = [
+  'Auburn',
+  'Black',
+  'Blonde',
+  'BlondeGolden',
+  'Brown',
+  'BrownDark',
+  'Platinum',
+  'Red'
+]

plugins/avataaars/data/hairColor.js

@@ -0,0 +1,12 @@
+module.exports = [
+  'Auburn',
+  'Black',
+  'Blonde',
+  'BlondeGolden',
+  'Brown',
+  'BrownDark',
+  'PastelPink',
+  'Platinum',
+  'Red',
+  'SilverGray'
+]

plugins/avataaars/data/hatColor.js

@@ -0,0 +1,17 @@
+module.exports = [
+  'Black',
+  'Blue01',
+  'Blue02',
+  'Blue03',
+  'Gray01',
+  'Gray02',
+  'Heather',
+  'PastelBlue',
+  'PastelGreen',
+  'PastelOrange',
+  'PastelRed',
+  'PastelYellow',
+  'Pink',
+  'Red',
+  'White'
+]

plugins/avataaars/data/mouth.js

@@ -0,0 +1,14 @@
+module.exports = [
+  'Concerned',
+  'Default',
+  'Disbelief',
+  'Eating',
+  'Grimace',
+  'Sad',
+  'ScreamOpen',
+  'Serious',
+  'Smile',
+  'Tongue',
+  'Twinkle',
+  'Vomit'
+]

plugins/avataaars/data/skin.js

@@ -0,0 +1,9 @@
+module.exports = [
+  'Tanned',
+  'Yellow',
+  'Pale',
+  'Light',
+  'Brown',
+  'DarkBrown',
+  'Black'
+]

plugins/avataaars/data/top.js

@@ -0,0 +1,38 @@
+module.exports = [
+  'Eyepatch',
+  'Hat',
+  'Hijab',
+  'LongHairBigHair',
+  'LongHairBob',
+  'LongHairBun',
+  'LongHairCurly',
+  'LongHairCurvy',
+  'LongHairDreads',
+  'LongHairFrida',
+  'LongHairFro',
+  'LongHairFroBand',
+  'LongHairMiaWallace',
+  'LongHairNotTooLong',
+  'LongHairShavedSides',
+  'LongHairStraight',
+  'LongHairStraight2',
+  'LongHairStraightStrand',
+  'NoHair',
+  'ShortHairDreads01',
+  'ShortHairDreads02',
+  'ShortHairFrizzle',
+  'ShortHairShaggy',
+  'ShortHairShaggyMullet',
+  'ShortHairShortCurly',
+  'ShortHairShortFlat',
+  'ShortHairShortRound',
+  'ShortHairShortWaved',
+  'ShortHairSides',
+  'ShortHairTheCaesar',
+  'ShortHairTheCaesarSidePart',
+  'Turban',
+  'WinterHat1',
+  'WinterHat2',
+  'WinterHat3',
+  'WinterHat4'
+]

plugins/avataaars/generator/generateAvatar.js

@@ -0,0 +1,59 @@
+const accessories = require('./../data/accessories');
+const clothes = require('./../data/clothes');
+const clothesColor = require('./../data/clothesColor');
+const clothesGraphic = require('./../data/clothesGraphic');
+const eyebrows = require('./../data/eyebrow');
+const eyes = require('./../data/eyes');
+const facialHair = require('./../data/facialHair');
+const facialHairColors = require('./../data/facialHairColor');
+const hairColors = require('./../data/hairColor');
+const hatColors = require('./../data/hatColor');
+const mouth = require('./../data/mouth');
+const skin = require('./../data/skin');
+const top = require('./../data/top');
+
+const getRandom = (length) => {
+  return Math.floor(Math.random() * length)
+};
+
+const generateRandomAvatar = (avatarType) => {
+  const accessory = accessories[getRandom(accessories.length)];
+  const facialHairStyle = facialHair[getRandom(facialHair.length)];
+  const facialHairColor = facialHairColors[getRandom(facialHairColors.length)];
+  const hatColor = hatColors[getRandom(hatColors.length)];
+  const hairColor = hairColors[getRandom(hairColors.length)];
+  const clothingColor = clothesColor[getRandom(clothesColor.length)];
+  const clothingGraphic = clothesGraphic[getRandom(clothesGraphic.length)];
+  const clothing = clothes[getRandom(clothes.length)];
+  const eyebrow = eyebrows[getRandom(eyebrows.length)];
+  const eyesStyle = eyes[getRandom(eyes.length)];
+  const mouthStyle = mouth[getRandom(mouth.length)];
+  const skinStyle = skin[getRandom(skin.length)];
+  const topStyle = top[getRandom(top.length)];
+
+  let avatarStyle = 'Transparent';
+  if (Math.floor(Math.random() * 2) === 1) {
+    avatarStyle = 'Circle'
+  }
+  let avatarOption = {
+    avatarStyle: avatarType || avatarStyle,
+    topType: topStyle,
+    accessoriesType: accessory,
+    hairColor: hairColor,
+    hatColor: hatColor,
+    facialHairType: facialHairStyle,
+    facialHairColor: facialHairColor,
+    clotheType: clothing,
+    clotheColor: clothingColor,
+    graphicType: clothingGraphic,
+    eyeType: eyesStyle,
+    eyebrowType: eyebrow,
+    mouthType: mouthStyle,
+    skinColor: skinStyle
+  };
+
+  return avatarOption;
+  // return `https://avataaars.io/?avatarStyle=${avatarType || avatarStyle}&topType=${topStyle}&accessoriesType=${accessory}&hairColor=${hairColor}&hatColor=${hatColor}&facialHairType=${facialHairStyle}&facialHairColor=${facialHairColor}&clotheType=${clothing}&clotheColor=${clothingColor}&graphicType=${clothingGraphic}&eyeType=${eyesStyle}&eyebrowType=${eyebrow}&mouthType=${mouthStyle}&skinColor=${skinStyle}`
+};
+
+module.exports = { generateRandomAvatar }

store/index.js

@@ -4,7 +4,8 @@ export const state = () => {
   return {
     activeMenu: 'index',
     oauth: null,
-    locale: 'zh_CN'
+    locale: 'zh_CN',
+    uploadHeaders: ''
   }
 }
 
@@ -14,6 +15,9 @@ export const mutations = {
   },
   setActiveMenu (state, activeMenu) {
     state.activeMenu = activeMenu
+  },
+  setUploadHeaders(state, data){
+    state.uploadHeaders = data
   }
 }