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

code.vue


<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>

userinfo.vue

<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.js

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

app/controller/user.js

'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;

下图是我测试的截图

uni-app 109生成个人二维码名片
感谢大家观看,我们下次见

上一篇:docker高级笔记(1)


下一篇:sequence