uni-app 13标星朋友和加入移出黑名单

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="true" bgColor="bg-white">
      <free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&#xe6fd;</text></free-icon-button>
    </free-nav-bar>
    <view class="px-3 py-4 flex align-center bg-white border-bottom">
      <free-avatar src="/static/images/demo/demo6.jpg" 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">{{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">账号：VmzhbjzhV</text>
        <text class="font-md text-light-muted">地区：广东广州</text>
      </view>
    </view>
    
    <free-list-item showRight :showLeftIcon="false">
      <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 tagList" :key="index">{{item}}</text>
      </view>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item 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 class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
      <text class="iconfont text-primary mr-1" v-if="!isBlack">&#xe64e;</text>
      <text class="font-md text-primary">{{isBlack ? '移除黑名单' : '发信息'}}</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';
  
  export default {
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeListItem,
      freeDivider,
      freeAvatar
    },
    data() {
      return {
        detail:{
          star:false,
        },
        isBlack:false,
        tagList:[],
        nickname:'昵称'
      }
    },
    onLoad() {
      uni.$on('saveRemarkTag',(e)=>{
        this.tagList = e.tagList
        this.nickname = e.nickname;
      })
    },
    beforeDestroy() {
      this.$refs.action.hide();
      uni.$off('saveRemarkTag')
    },
    computed:{
      tagPath(){
        return "mail/user-remark-tag/user-remark-tag"
      },
      actions(){
          return [{
            icon:"\ue6b3",
            title:"设置备注和标签",
            type:"navigate",
            path:this.tagPath
          },{
            icon:"\ue613",
            title:"把他推荐给朋友",
            type:"navigate",
            path:"chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({
              type: "card",
              data: '哈哈',
              options: {
                avatar: '',
                id: 0
              }
            }))
          },{
            icon:"\ue6b0",
            title:this.detail.star ? '取消星标好友' : "设为星标朋友",
            type:"event",
            event:"setStar"
          },{
            icon:"\ue667",
            title:"设置朋友圈和动态权限",
            type:"navigate",
            path:"mail/user-moments-auth/user-moments-auth"
          },{
            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: {
      openAction(){
        this.$refs.action.show()
      },
      navigate(url){
        console.log(url)
        uni.navigateTo({
          url: '/pages/'+url,
        });
      },
      // 操作菜单事件
            popupEvent(e){
        if(!e.type){
          return;
        }
        switch(e.type){
          case 'navigate':
          this.navigate(e.path);
          break;
          case 'event':
          this[e.event](e);
          break;
        }
        setTimeout(()=>{
          // 关闭弹出层
          this.$refs.action.hide();
        },150);
      },
      // 设为星标
      setStar(e){
        this.detail.star = !this.detail.star
      },
      // 加入黑名单
      setBlack(e){
        let msg  = '加入黑名单';
        if(this.isBlack){
          msg = '移出黑名单';
        }
        uni.showModal({
          content:'是否要'+msg,
          success:(res)=>{
            if(res.confirm){
              this.isBlack = !this.isBlack;
              e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
              uni.showToast({
                title:msg+'成功',
                icon:'none'
              })
            }
          }
        })
      }
    }
  }
</script>
<style>
</style>