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生成个人二维码名片相关推荐

Java zxing生成vcard二维码名片
一)背景最近想做个vcard个人名片的二维码,从网上查了相关在线生成二维码功能,也能实现功能.但自己因为想用java的方式来实现,网上最多的案例都是依赖zxing jar实现,但由于要生成统一的vc ...
用WeX5做一个二维码名片应用！有源码！
本文由起步科技原创.未经许可,禁止转载! 作者:起步科技前端研究员小茄,专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术. 前言二维码现在是无处不在,无孔不入 ...
[分享] 30分钟做一个二维码名片应用，有源码！
2019独角兽企业重金招聘Python工程师标准>>> 前言 30分钟带你用Wex5做一个微信公众号上使用的二维码名片,相应技术点有详细讲解,高清有码!(点击下载全部源码) 二维码现 ...
二维码名片的格式 - vcard
转自:http://blog.csdn.net/johnsuna/article/details/8482454 二维码名片的格式 - vcard 如果你希望生成的二维码名片可以被智能设备识别,并可以 ...
vcard规范二维码名片的格式
转自:http://blog.csdn.net/johnsuna/article/details/8482454 二维码名片的格式 - vcard 如果你希望生成的二维码名片可以被智能设备识别,并可以 ...
【转】二维码名片的格式 - vcard
如果你希望生成的二维码名片可以被智能设备识别,并可以直接导入到通讯录中,那么就应遵循某种标准格式.常见的是生成vcard标准格式.一个简单的vcard名片格式例子参考如下: BEGIN:VCARD V ...
IOS抖音短视频APP开发关于扫描二维码，并根据文本生成二维码
IOS抖音短视频APP开发关于扫描二维码,(根据光线强弱显示隐藏闪光灯)并根据文本生成二维码. WeakSelf; //IOS抖音短视频APP开发构建扫描样式视图 _scanView = [[WSLS ...
Android应用--QR的生成（二维码）
二维码的定义: 二维码 (2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上) 分布的黑白相间的图形记录数据符号信息的. 在许多种类的二维条码中,常用的 ...
分享几个在线生成网址二维码的API接口
现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...

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

uni-app 109生成个人二维码名片相关推荐

最新文章

热门文章