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

Posted 2021-12-15 2019ab

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;

下图是我测试的截图

感谢大家观看，我们下次见