如下图是我测试的截图
前台
/pages/mail/user-base/user-base.vue
<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"> <view slot="right"> <free-icon-button v-if="detail.friend"><text class="iconfont font-md" @click="openAction"></text></free-icon-button> </view> </free-nav-bar> <view class="px-3 py-4 flex align-center bg-white border-bottom"> <free-avatar :src="detail.avatar" size="120"></free-avatar> <view class="flex flex-column ml-3 flex-1"> <view class="font-lg font-weight-bold flex justify-between"> <text class="font-lg font-weight-bold mb-1">{{detail.nickname}}</text> <image v-if="detail.star" src="/static/images/star.png" style="width: 40rpx;height: 40rpx;"></image> </view> <text class="font-md text-light-muted mb-1">账号:{{detail.username}}</text> <!-- <text class="font-md text-light-muted">地区:广东广州</text> --> </view> </view> <free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="navigate(tagPath)"> <view class="flex align-center"> <text class="font-md text-dark mr-3">标签</text> <text class="font-md text-light-muted mr-2" v-for="(item,index) in detail.tags" :key="index">{{item}}</text> </view> </free-list-item> <free-divider></free-divider> <free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="openMoments"> <view class="flex align-center"> <text class="font-md text-dark mr-3">朋友圈</text> <template v-if="detail.moments[0]"> <text v-if="detail.moments[0].content && !detail.moments[0].image.length" class="font-md text-secondary">{{detail.moments[0].content}}</text> <image v-for="(item,index) in detail.moments[0].image" :key="index" :src="item" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image> </template> <!-- <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image> <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image> <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image> --> </view> </free-list-item> <free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item> <free-divider></free-divider> <view v-if="detail.friend" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="doEvent"> <text class="iconfont text-primary mr-1" v-if="!detail.isBlack"></text> <text class="font-md text-primary">{{detail.isblack ? '移除黑名单' : '发信息'}}</text> </view> <view v-else class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="navigate(addFriend())"> <text class="font-md text-primary">添加好友</text> </view> <!-- 扩展菜单 --> <free-popup ref="action" bottom transformOrigin="center bottom" maskColor> <scroll-view style="height: 580rpx;" scroll-y="true" class="bg-white" :show-scrollbar="false"> <free-list-item v-for="(item,index) in actions" :key="index" :title="item.title" :showRight="false" :border="false" @click="popupEvent(item)"> <text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text> </free-list-item> </scroll-view> </free-popup> </view> </template> <script> import freeNavBar from '@/components/free-ui/free-nav-bar.vue'; import freeIconButton from '@/components/free-ui/free-icon-button.vue'; import freeChatItem from '@/components/free-ui/free-chat-item.vue'; import freePopup from '@/components/free-ui/free-popup.vue'; import freeListItem from '@/components/free-ui/free-list-item.vue'; import freeDivider from '@/components/free-ui/free-divider.vue'; import freeAvatar from '@/components/free-ui/free-avatar.vue'; import auth from '@/common/mixin/auth.js'; import $H from '@/common/free-lib/request.js'; export default { mixins: [auth], components: { freeNavBar, freeIconButton, freeChatItem, freePopup, freeListItem, freeDivider, freeAvatar }, data() { return { detail: { id: 0, username: '', nickname: '', avatar: '', sex: '', sign: '', area: '', friend: false, lookhim: 1, lookme: 1, star: 0, isblack: 0, tags: [] }, } }, onShow() { this.getData(); }, onLoad(e) { uni.$on('saveRemarkTag', (e) => { this.detail.tagList = e.detail.tagList this.nickname = e.nickname; }) if (!e.user_id) { return this.backToast(); } this.detail.id = e.user_id; // 获取当前用户资料 this.getData(); }, beforeDestroy() { this.$refs.action.hide(); uni.$off('saveRemarkTag') }, computed: { tagPath() { return "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({ user_id:this.detail.id, nickname:this.detail.nickname, tags:this.detail.tags ? this.detail.tags.join(',') : '' }) }, actions() { return [{ icon: "\ue6b3", title: "设置备注和标签", type: "navigate", path: "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({ user_id:this.detail.id, nickname:this.detail.nickname, tags:this.detail.tags ? this.detail.tags.join(',') : '' }) }, { icon: "\ue613", title: "把他推荐给朋友", type: "navigate", path: "chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({ type: "card", data: this.detail.nickname || this.detail.username, options: { avatar: this.detail.avatar, id: this.detail.id } })) }, { icon: "\ue6b0", title: this.detail.star ? '取消星标好友' : "设为星标朋友", type: "event", event: "setStar" }, { icon: "\ue667", title: "设置朋友圈和动态权限", type: "navigate", path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"¶ms="+JSON.stringify({ lookme:this.detail.lookme, lookhim:this.detail.lookhim, }) }, { icon: "\ue638", title: this.detail.isblack ? '移出黑名单' : "加入黑名单", type: "event", event: "setBlack" }, { icon: "\ue61c", title: "投诉", type: "navigate", path: "mail/user-report/user-report?params="+JSON.stringify({ user_id:this.detail.id, type:'user' }) }, { icon: "\ue638", title: "删除", type: "event", event: "deleteItem" }] } }, methods: { addFriend() { let obj = { friend_id: this.detail.id, nickname: this.detail.nickname, lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 1, lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 1, }; return 'mail/add-friend/add-friend?params=' + JSON.stringify(obj); }, getData() { $H.get('/friend/read/' + this.detail.id).then(res => { if (!res) { return this.backToast('该用户不存在'); } if(res.moments && res.moments[0]){ res.moments[0].image = res.moments[0].image.split(','); } this.detail = res; console.log(res); }); }, openAction() { this.$refs.action.show() }, navigate(url) { console.log(url); uni.navigateTo({ url: '/pages/' + url, }); }, openMoments(){ uni.navigateTo({ url: '../../find/moments/moments?key=moment¶ms='+encodeURIComponent(JSON.stringify({ id:this.detail.id, name:this.detail.nickname || this.detail.username, avatar:this.detail.avatar })), }) }, // 操作菜单事件 popupEvent(e) { if (!e.type) { return; } setTimeout(() => { // 关闭弹出层 this.$refs.action.hide() }, 300) switch (e.type) { case 'navigate': this.navigate(e.path); break; case 'event': this[e.event](e); break; } }, // 删除好友 deleteItem(){ uni.showModal({ title: '是否要删除好友?', success: res => { if(res.confirm){ $H.post('/friend/destroy',{friend_id:this.detail.id}).then(res=>{ uni.showToast({ title:'删除好友成功', icon:'none' }); uni.reLaunch({ url:'/pages/tabbar/index/index' }) }) } }, fail: () => {}, complete: () => {} }); }, // 设为星标 setStar(e) { let star = this.detail.star == 0 ? 1 : 0; $H.post('/friend/setstar/' + this.detail.id, { star }).then(res => { this.detail.star = star; e.title = this.detail.star ? '取消标星好友' : '设为标星好友'; }); }, // 加入黑名单 setBlack(e) { let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单'; uni.showModal({ content: '是否要' + msg, success: (res) => { if (res.confirm) { let isblack = this.detail.isblack == 0 ? 1:0 $H.post('/friend/setblack/' + this.detail.id, { isblack }).then(res => { this.detail.isblack = isblack; }); // this.detail.isBlack = !this.detail.isBlack; // e.title = this.isBlack ? '移出黑名单' : '加入黑名单'; uni.showToast({ title: msg + '成功', icon: 'none' }) } } }) }, // 发送消息 doEvent(e){ if(this.detail.isblack){ return this.setBlack(); } uni.navigateTo({ url:'../../chat/chat/chat?params='+encodeURIComponent(JSON.stringify({ id:this.detail.id, name:this.detail.nickname ? this.detail.nickname : this.detail.username, avatar:this.detail.avatar, chat_type:'user' })) }) } } } </script> <style> </style>
/pages/find/moments/moments.vue
<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> <image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image> <image :src="avatar" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image> <text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">{{nickname}}</text> </view> <!-- 朋友圈列表样式 --> <free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list> <!-- 评论框 --> <free-popup ref="action" bottom transformOrigin="center bottom"> <view style="height: 105rpx;" class="bg-light border-top flex align-center"> <textarea fixed class="bg-white rounded p-2 font-md" style="height: 45rpx;width: 420rpx;" value="" placeholder="" v-model="content" :focus="true"/> <free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg"></text></free-icon-button> <free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button> </view> <!-- 表情包 --> <scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light"> <view class="flex flex-wrap"> <view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)"> <text>{{item}}</text> </view> </view> </scroll-view> </free-popup> <!-- 上拉加载 --> <view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10"> <text class="text-muted font">{{loadmore}}</text> </view> </view> </template> <script> import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue'; import freeMomentList from '@/components/free-ui/free-moment-list.vue'; import freePopup from '@/components/free-ui/free-popup.vue'; import freeIconButton from '@/components/free-ui/free-icon-button.vue'; import freeMainButton from '@/components/free-ui/free-main-button.vue'; import $H from '@/common/free-lib/request.js'; import { mapState } from 'vuex'; export default { components:{ freeTransparentBar, freeMomentList, freePopup, freeIconButton, freeMainButton }, data() { return { content:'', scrollTop:0, faceModal:false, faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"], commentIndex:-1, page:1, loadmore:'上拉加载更多', key:'moment_timeline', list:[], params:'', reply_user:false } }, onPageScroll(e) { this.scrollTop = e.scrollTop; }, onReachBottom() { if(this.loadmore !== '上拉加载更多'){ return; } this.page += 1; this.loadmore = '加载中...'; this.getData().catch(err=>{ this.page -= 1; uni.showToast({ title:'加载失败', icon:'none' }); this.loadmore = '上拉加载更多'; }) }, onLoad(e) { if(e.key){ this.key = e.key; } if(e.params){ this.params = JSON.parse(decodeURIComponent(e.params)); } this.page = 1; this.getData(); uni.$on('momentNotice',this.momentNotice) }, destroyed() { uni.$off('momentNotice',this.momentNotice) }, onPullDownRefresh() { this.page = 1; this.getData().then(res=>{ uni.showToast({ title:'刷新成功', icon:'none' }); uni.stopPullDownRefresh(); }).catch(err=>{ uni.showToast({ title:'刷新失败', icon:'none' }); uni.stopPullDownRefresh(); }); }, computed:{ ...mapState({ user:state=>state.user.user }), nickname(){ if(!this.params){ return this.user.nickname || this.user.username; } return this.params.name; }, avatar(){ let avatar = ''; if(!this.params){ avatar = this.user.avatar; }else{ avatar = this.params.avatar } return avatar || '/static/images/demo/demo6.jpg'; } }, methods: { momentNotice(e){ this.page = 1; this.getData().then(res=>{ uni.showToast({ title:'刷新成功', icon:'none' }); }); }, // 点击操作菜单 doAction(e){ uni.showActionSheet({ itemList: ['点赞','评论'], success: res => { if(res.tapIndex === 0){ // 点赞 this.doSupport(e) }else{ this.content=''; this.faceModal=false; this.commentIndex = e.index; this.reply_user = false; this.$refs.action.show(); // this.doComment(e) } } }); }, // 获取数据 getData(){ return new Promise((result,reject)=>{ let page = this.page; let params = this.key === ''; if(this.params && this.key == 'moment'){ params = '?user_id='+this.params.id; } $H.get(`/${this.key}/${this.page}${params}`).then(res=>{ this.list = page === 1 ? res : [...this.list,...res]; this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了' result(res); }).catch(err=>{ reject(err); }) }) }, // 点赞 doSupport(e){ $H.post('/moment/like',{id:e.item.moment_id}).then(res=>{ let i = e.item.likes.findIndex(item=>item.id === this.user.id); if(i !== -1){ // 取消点赞 e.item.likes.splice(i,1); }else{ // 点赞 e.item.likes.push({ id:this.user.id, name:this.user.nickname || this.user.username }) } uni.showToast({ title:i !== -1 ? '取消点赞成功' : '点赞成功', icon:'none' }); }) }, // 添加表情 addFace(item){ this.content += item; }, // 开启关闭表情包面板 changeFaceModeal(){ uni.hideKeyboard(); setTimeout(()=>{ this.faceModal = !this.faceModal; },100); }, // 发送 send(){ console.log(this.reply_user); let item = this.list[this.commentIndex]; $H.post('/moment/comment',{ id:item.moment_id, content:this.content, reply_id:this.reply_user ? this.reply_user.id : 0 }).then(res=>{ item.comments.push({ content:this.content, user:{ id:this.user.id, name:this.user.nickname || this.user.username }, replay:this.reply_user ? this.reply : null }) uni.showToast({ title:'评论成功', icon:'none' }) }) this.$refs.action.hide(); }, replyEvent(e){ this.content = ''; this.faceModal = false, this.commentIndex = e.index, this.reply_user = e.reply; this.$refs.action.show(); }, // 选择发表朋友圈类型 clickRight(){ let list = [{ name:'图文', key:'image' }, { name:'视频', key:'video' }, { name:'文字', key:'content' }]; uni.showActionSheet({ itemList:list.map(v=>v.name), success:res=>{ uni.navigateTo({ url: '../add-moment/add-moment?type='+list[res.tapIndex].key, }); } }) } }, } </script> <style> </style>
后台
app/controller/frends.js
'use strict'; const Controller = require('egg').Controller; const SortWord = require('sort-word'); class FriendController extends Controller { // 通讯录 async list() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; // 获取并统计我的好友 let friends = await app.model.Friend.findAndCountAll({ where: { user_id: current_user_id }, include: [{ model: app.model.User, as: "friendInfo", attributes: ['id', 'username', 'nickname', 'avatar'] }] }); let res = friends.rows.map(item => { let name = item.friendInfo.nickname ? item.friendInfo.nickname : item.friendInfo.username; if (item.nickname) { name = item.nickname } return { id: item.id, user_id: item.friendInfo.id, name, username: item.friendInfo.username, avatar: item.friendInfo.avatar } }); // 排序 if (res.length > 0) { friends.rows = new SortWord(res, 'name'); } ctx.apiSuccess(friends); } // 查看用户资料 async read() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; let user_id = ctx.params.id ? parseInt(ctx.params.id) : 0; let user = await app.model.User.findOne({ where: { id: user_id, status: 1 }, attributes: { exclude: ['password'] }, include: [{ model: app.model.Moment, order: [ ['id', 'desc'] ], limit: 1 }] }); if (!user) { ctx.throw(400, '用户不存在'); } let res = { id: user.id, username: user.username, nickname: user.nickname ? user.nickname : user.username, avatar: user.avatar, sex: user.sex, sign: user.sign, area: user.area, friend: false } let friend = await app.model.Friend.findOne({ where: { friend_id: user_id, user_id: current_user_id }, include: [{ model: app.model.Tag, attributes: ['name'] }] }); if (friend) { res.friend = true if (friend.nickname) { res.nickname = friend.nickname; } res = { ...res, lookme: friend.lookme, lookhim: friend.lookhim, star: friend.star, isblack: friend.isblack, tags: friend.tags.map(item => item.name), moments: user.moments }; } ctx.apiSuccess(res); } // 移入/移除黑名单 async setblack() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; let id = ctx.params.id ? parseInt(ctx.params.id) : 0; // 参数验证 ctx.validate({ isblack: { type: 'int', range: { in: [0, 1] }, required: true, desc: '移入/移除黑名单' }, }); let friend = await app.model.Friend.findOne({ where: { friend_id: id, user_id: current_user_id } }); if (!friend) { ctx.throw(400, '该记录不存在'); } friend.isblack = ctx.request.body.isblack; await friend.save(); ctx.apiSuccess('ok'); } // 设置/取消星标好友 async setstar() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; let id = ctx.params.id ? parseInt(ctx.params.id) : 0; // 参数验证 ctx.validate({ star: { type: 'int', range: { in: [0, 1] }, required: true, desc: '设置/取消星标好友' }, }); let friend = await app.model.Friend.findOne({ where: { friend_id: id, user_id: current_user_id, isblack: 0 } }); if (!friend) { ctx.throw(400, '该记录不存在'); } friend.star = ctx.request.body.star; await friend.save(); ctx.apiSuccess('ok'); } // 设置朋友圈权限 async setMomentAuth() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; let id = ctx.params.id ? parseInt(ctx.params.id) : 0; // 参数验证 ctx.validate({ lookme: { type: 'int', range: { in: [0, 1] }, required: true }, lookhim: { type: 'int', range: { in: [0, 1] }, required: true }, }); let friend = await app.model.Friend.findOne({ where: { user_id: current_user_id, friend_id: id, isblack: 0 } }); if (!friend) { ctx.throw(400, '该记录不存在'); } let { lookme, lookhim } = ctx.request.body; friend.lookhim = lookhim; friend.lookme = lookme; await friend.save(); ctx.apiSuccess('ok'); } // 设置备注和标签 async setremarkTag(){ const { ctx, app } = this; let current_user_id = ctx.authUser.id; let id = ctx.params.id ? parseInt(ctx.params.id) : 0; // 参数验证 ctx.validate({ nickname: { type: 'string', required: false, desc: "昵称" }, tags: { type: 'string', required: true, desc: "标签" }, }); // 查看该好友是否存在 let friend = await app.model.Friend.findOne({ where: { user_id: current_user_id, friend_id: id, isblack: 0 }, include: [{ model: app.model.Tag }] }); if (!friend) { ctx.throw(400, '该记录不存在'); } let { tags, nickname } = ctx.request.body; // // 设置备注 friend.nickname = nickname; await friend.save(); // 获取当前用户所有标签 let allTags = await app.model.Tag.findAll({ where: { user_id: current_user_id } }); let allTagsName = allTags.map(item => item.name); // 新标签 let newTags = tags.split(','); // 需要添加的标签 let addTags = newTags.filter(item => !allTagsName.includes(item)); addTags = addTags.map(name => { return { name, user_id: current_user_id } }); // 写入tag表 let resAddTags = await app.model.Tag.bulkCreate(addTags); // 找到新标签的id newTags = await app.model.Tag.findAll({ where: { user_id: current_user_id, name: newTags } }); let oldTagsIds = friend.tags.map(item => item.id); let newTagsIds = newTags.map(item => item.id); let addTagsIds = newTagsIds.filter(id => !oldTagsIds.includes(id)); let delTagsIds = oldTagsIds.filter(id => !newTagsIds.includes(id)); // 添加关联关系 addTagsIds = addTagsIds.map(tag_id => { return { tag_id, friend_id: friend.id } }); app.model.FriendTag.bulkCreate(addTagsIds); // 删除关联关系 app.model.FriendTag.destroy({ where: { tag_id: delTagsIds, friend_id: friend.id } }); ctx.apiSuccess('ok'); } // 删除好友 async destroy(){ const { ctx,app } = this; let current_user_id = ctx.authUser.id; ctx.validate({ friend_id:{ type:'int', required:true, desc:'好友id' } }); let {friend_id} = ctx.request.body; await app.model.Friend.destroy({ where:{ user_id:current_user_id, friend_id } }); app.model.Friend.destroy({ where:{ user_id:friend_id, friend_id:current_user_id } }); this.deleteTimeLineMoment(friend_id,current_user_id); this.deleteTimeLineMoment(current_user_id,friend_id); return ctx.apiSuccess('ok'); } // 删除 非好友的朋友圈时间轴记录 async deleteTimeLineMoment(friend_id,user_id){ const { app,ctx } = this; let moments = await app.model.moments.findAll({ where:{ user_id:friend_id }, attributes:['id'] }); moments = moments.map(item=>item.id); await app.model.MomentTimeline.destroy({ where:{ user_id, moment_id:moments } }); } } module.exports = FriendController;
app/model/user.js
// app/model/user.js 'use strict'; const crypto = require('crypto'); module.exports = app => { const { STRING, INTEGER, DATE, ENUM, TEXT } = app.Sequelize; // 配置(重要:一定要配置详细,一定要!!!) const User = app.model.define('user', { id: { type: INTEGER(20).UNSIGNED, primaryKey: true, autoIncrement: true }, username: { type: STRING(30), allowNull: false, defaultValue: '', comment: '用户名称', unique: true }, nickname: { type: STRING(30), allowNull: false, defaultValue: '', comment: '昵称', }, email: { type: STRING(160), comment: '用户邮箱', unique: true }, password: { type: STRING(200), allowNull: false, defaultValue: '', set(val){ const hmac = crypto.createHash("sha256", app.config.crypto.secret); hmac.update(val); let hash = hmac.digest("hex"); this.setDataValue('password',hash); } }, avatar: { type: STRING(200), allowNull: true, defaultValue: '' }, phone: { type: STRING(20), comment: '用户手机', unique: true }, sex: { type: ENUM, values: ['男', '女', '保密'], allowNull: true, defaultValue: '男', comment: '用户性别' }, status: { type: INTEGER(1), allowNull: false, defaultValue: 1, comment: '状态 0禁用 1启用' }, sign: { type: STRING(200), allowNull: true, defaultValue: '', comment: '个性签名' }, area: { type: STRING(200), allowNull: true, defaultValue: '', comment: '地区' }, created_at: DATE, updated_at: DATE }); // 定义关联关系 User.associate = function(model){ User.hasMany(app.model.Friend,{ as:"bfriends", // 当前用户的被好友 foreignKey:'friend_id' }); User.hasMany(app.model.Friend,{ as:"friends", // 当前用户的好友 foreignKey:'user_id' }); User.hasMany(app.model.Moment,{ foreignKey:'user_id' }); }; return User; };
感谢大家观看,我们下次见