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生成个人二维码名片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。