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));// 生成tokenlet token = ctx.getToken(user);user.token = token;delete user.password;// 加入到缓存if(!await this.service.cache.set('user_'+user.id,token)){ctx.throw(400,'登录失败');}// 返回用户信息和tokenreturn 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生成个人二维码名片的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。