uni-app 137删除好友功能

后端

router.js

// 删除好友
  router.post('/friend/destroy',controller.friend.destroy);

app/controller/friend.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 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:[{
//             as:"friendInfo",
//             model:app.model.User,
//             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.res = 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
          }
      });
      return ctx.apiSuccess('ok');
  }
}

module.exports = FriendController;

前端

/pages/mail/user-base/user-base.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white">
      <free-icon-button slot="right" v-if="detail.friend"><text class="iconfont font-md"
          @click="openAction"></text></free-icon-button>
    </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">
      <view class="flex align-center">
        <text class="font-md text-dark mr-3">朋友圈</text>
        <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: this.tagPath
        }, {
          icon: "\ue613",
          title: "把他推荐给朋友",
          type: "navigate",
          path: "mail/send-card/send-card"
        }, {
          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('该用户不存在');
          }
          this.detail = res;
          console.log(res);
        });
      },
      openAction() {
        this.$refs.action.show()
      },
      navigate(url) {
        console.log(url)
        uni.navigateTo({
          url: '/pages/' + url,
        });
      },
      // 操作菜单事件
      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>

感谢大家观看，我们下次见