uni-app 109生成个人二维码名片

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar>
    
    <view class="p-5">
      <view class="bg-white rounded p-4">
        <view class="flex align-center mb-4">
          <free-avatar :src="detail.avatar || '/static/images/demo/demo6.jpg'"></free-avatar>
          <view class="pl-4 flex flex-column">
            <text class="font-md">{{detail.name}}</text>
            <text class="font text-light-muted">地区</text>
          </view>
        </view>
        <view class="flex flex-column align-center justify-center">
          <image :src="src" mode="" style="width: 550rpx;height: 550rpx;" class="bg-secondary mb-4"></image>
          <text class="font text-light-muted">扫一扫上面的二维码，加我的微信</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import {mapState} from 'vuex';
  import $C from '@/common/free-lib/config.js';
  export default {
    components:{
      freeNavBar,
      freeAvatar
    },
    computed:{
      ...mapState({
        user:state=>state.user.user
      })
    },
    data() {
      return {
        detail:{
          id:0,
          name:"",
          avatar:''
        }
      }
    },
    onLoad(e) {
      if(e.params){
        console.log(e);
        this.detail = JSON.parse(e.params);
        this.src = `${$C.codeUrl}/${e.type}_qrcode/${this.detail.id}?token=${this.user.token}`;
      }
    },
    methods: {
      
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="个人资料" showBack :showRight="false"></free-nav-bar>
    <free-list-item title="头像" showRight :showLeftIcon="false" @click="update('avatar')">
      <free-avatar slot="right" :src="avatar"></free-avatar>
    </free-list-item>
    <free-list-item title="昵称" showRight :showLeftIcon="false" @click="update('nickname')">
      <text slot="right" class="font text-muted">{{nickname}}</text>
    </free-list-item>
    <free-list-item title="账号" showRight :showLeftIcon="false"  @click="update('username')">
      <text slot="right" class="font text-muted">{{username}}</text>
    </free-list-item>
    <free-list-item title="二维码名片" showRight :showLeftIcon="false" @click='openCode'>
      <text slot="right" class="iconfont font-md">&#xe647;</text>
    </free-list-item>
    
    <free-confirm :title="confirmTitle" ref="confirm">
      <input type="text" class="border-bottom font-md" :placeholder="placeholder" v-model="confirmText"/>
    </free-confirm>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeConfirm from '@/components/free-ui/free-confirm.vue';
  import { mapState } from 'vuex';
  export default {
    components:{
      freeNavBar,
      freeAvatar,
      freeListItem,
      freeConfirm
    },
    data() {
      return {
        avatar:'/static/images/demo/demo6.jpg',
        nickname:'昵称',
        username:'账号',
        confirmText:'',
        confirmType:'',
        inputtext:''
      }
    },
    computed:{
      ...mapState({
        user:state=>state.user.user
      }),
      confirmTitle(){
        return this.confirmType=='username' ? '修改账号' : '修改昵称';
      },
      placeholder(){
        return this.confirmType=='username' ? '输入账号' : '输入昵称';
      }
    },
    methods: {
      update(key){
        switch(key){
          case 'avatar':
            uni.chooseImage({
              count:1,
              sizeType:['compressed'],
              success:(res)=>{
                this.avatar = res.tempFilePaths[0];
              }
            })
          break;
          default:
          this.confirmType = key;
          // this.confirmText = this.user[key];
          if(key === 'nickname'){
            this.confirmText = this.nickname;
          }else{
            this.confirmText = this.username;
          }
          this.$refs.confirm.show((close)=>{
            if(this.confirmText===''){
              return uni.showToast({
                title:'不能为空',
                icon:'none'
              })
            }
            // this.user[key] = this.confirmText;
            if(key === 'nickname'){
              this.nickname = this.confirmText;
            }else{
              this.username = this.confirmText;
            }
            uni.showToast({
              title:'修改成功',
              icon:'none'
            });
            close();
          });
          break;
        }
      },
      // 二维码名片
        openCode(){
        uni.navigateTo({
          url:'../code/code?params='+encodeURIComponent(JSON.stringify({
            id:this.user.id,
            name:this.user.nickname || this.user.username,
            avatar:this.user.avatar
          }))+'&type=user',
        })
      }
    }
  }
</script>
<style>
</style>

// 生成个人二维码
  router.get('/user_qrcode/:id',controller.user.qrcode);

'use strict';
const Controller = require('egg').Controller;
const crypto = require('crypto');
class UserController extends Controller{
    // 注册
    async reg(){
        let {ctx,app} = this;
       // 参数验证
       ctx.validate({
          username:{type: 'string', required: true,range:{min:5,max:20},desc: '用户名'},
          password:{type: 'string', required: true, desc: '密码',
              defaultVal:{
                  set(val){
                    const hmac = crypto.createHash("sha256", app.config.crypto.secret);
                    hmac.update(val);
                    let hash = hmac.digest("hex");
                    this.setDataValue('password',hash);
                  }
              }
          },
          repassword:{type: 'string', required: true, desc: '确认密码'}
        },{
            equals:[
                ['password','repassword']
            ]
        });
    //   return  this.ctx.body = 123;
       let {username,password} = ctx.request.body;
       // 验证用户是否已存在
       if(await app.model.User.findOne({
           where:{
               username
           }
       })){
           ctx.throw(400,'用户名已存在');
       }
       // 创建用户
       const user = await app.model.User.create({
           username,
           password
       })
       return this.ctx.body=user;
       if(!user){
           ctx.throw(400,'创建用户失败');
       }
       ctx.apiSuccess(user);
    //   this.ctx.body ='注册';   
    }
    
    // 登录
    async login(){
        const {ctx,app} = this;
        // 参数验证
         ctx.validate({
          username:{type: 'string', required: true,desc: '用户名'},
          password:{type: 'string', required: true, desc: '密码'},
        });
        let {username,password} = ctx.request.body;
        //  验证用户是否已存在 验证用户状态是否禁用
        let user = await app.model.User.findOne({
            where:{
                username,
                status:1
            }
        });
        if(!user){
            ctx.throw(400,'用户不存在或用户已被禁用');
        };
        // 验证密码
        await this.checkPassword(password,user.password);
        
        user = JSON.parse(JSON.stringify(user));
     
        // 生成token
        let token = ctx.getToken(user);
        user.token = token;
        delete user.password;
        
        // 加入到缓存
        if(!await this.service.cache.set('user_'+user.id,token)){
            ctx.throw(400,'登录失败');
        }
        // 返回用户信息和token
        return ctx.apiSuccess(user);
    }
    
    // 验证密码
    async checkPassword(password, hash_password) {
        // 先对需要验证的密码进行加密
        const hmac = crypto.createHash("sha256", this.app.config.crypto.secret);
        hmac.update(password);
        password = hmac.digest("hex");
        let res = password === hash_password;
        if(!res){
            this.ctx.throw(400,'密码错误');
        }
        return true;
    }
    
    // 退出登录
    async logout(){
        const {ctx,service} = this;
        // 拿到当前用户
        let current_user_id = ctx.authUser.id;
        // 移除redis当前用户信息
        if(!await service.cache.remove('user_'+current_user_id)){
            ctx.throw(400,'退出登录失败');
        }
        ctx.apiSuccess('退出成功');
    }
    
    // 生成个人二维码
    async qrcode(){
      const {ctx,app} = this;
      ctx.qrcode(JSON.stringify({
          id: ctx.params.id,
          type: "user",
          event: "navigateTo"
      }));
    }
}
module.exports = UserController;