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"></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;
下图是我测试的截图
感谢大家观看，我们下次见