uni-app 25后端api开发和前后端交互(51-60)

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar title="通讯录"></free-nav-bar>
    <!-- 通讯录列表 -->
      <scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'"  :scroll-into-view="scrollInto">
        <free-list-item v-for="(item,index) in topList" :key="item.id"  :title="item.title" :cover="item.cover" :showRight="item.id==='friend'"  @click=""  :showRightIcon='false'>
          <free-badge slot="right" :value="applyCount"></free-badge>
        </free-list-item>
        
        <view v-for="(item,index) in list" :key="index" v-if="item.data.length>0" :id="'item-'+item.letter">
          <view class="py-2 px-3 border-bottom bg-light">
            <text class="font-md text-dark">{{item.letter}}</text>
          </view>
          <free-list-item v-for="(item2,index2) in item.data" :key="index2"  :title="item2" cover="/static/images/mail/friend.png" @click=""></free-list-item>
        </view>
      </scroll-view>
      <!-- 侧边导航条 -->
      <view class="position-fixed right-0 bottom-0 flex  flex-column" :style="'top:'+top+'rpx;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" >
        <view class="flex-1 flex align-center justify-center" v-for="(item,index) in list" :key="index">
          <text class="font-sm text-muted">{{item.letter}}</text>
        </view>
      </view>
      
      <!-- <block v-if="current"> -->
      <view class="position-fixed rounded-circle bg-light border flex align-center justify-center" style="width: 150rpx;height: 150rpx; left: 300rpx;" :style="'top:'+modalTop+'px;'" v-if="current!=''">
        <text class="font-lg" >{{current}}</text>
      </view>
      <!-- </block> -->
  </view>
</template>
<script>
  import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeBadge from '@/components/free-ui/free-badge.vue';
  import { mapState } from 'vuex'; 
  import auth from '@/common/mixin/auth.js';
  export default {
    mixins:[auth],
    components:{
      freeNavBar,
      freeListItem,
      freeBadge
    },
    computed:{
      ...mapState({
        applyCount:state=>state.user.apply.count
      }),
      modalTop(){
        return (this.scrollHeight-uni.upx2px(150))/2;
      },
      itemHeight(){
        let count = this.list.length;
        if(count<1){
          return 0;
        }
        return this.scrollHeight/count;
      }
    },
    onLoad() {
      let res = uni.getSystemInfoSync();
      this.top = res.statusBarHeight + uni.upx2px(90);
      this.scrollHeight = res.windowHeight-this.top;
    },
    data() {
      return {
        scrollInto:'',
        top:0,
        scrollHeight:0,
        current:'',
        topList:[
          {
            id:'friend',
            title:"新的朋友",
            cover:"/static/images/mail/friend.png",
            event:""
          },
          {
            id:'group',
            title:"群聊",
            cover:"/static/images/mail/group.png",
            event:""
          },
          {
            id:'tag',
            title:"标签",
            cover:"/static/images/mail/tag.png",
            event:""
          }
        ],
        list:[{
          "letter":"A",
          "data":[
            "阿苏",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉"
          ]
        },{
          "letter":"B",
          "data":[
            "baba",
            "霸占",
            "吧拉"
          ]
        },
        {
          "letter":"C",
          "data":[
            "吃好",
            "车霸占",
            "才吧拉"
          ]
        },
        {
          "letter":"D",
          "data":[
            "Dd",
            "dd",
            "滴滴滴"
          ]
        }]
      }
    },
    methods: {
      touchstart(e){
        this.changeScrollInto(e);
      },
      touchmove(e){
        this.changeScrollInto(e);
      },
      touchend(){
        this.current = '';
      },
      // 联动
      changeScrollInto(e){
        // let Y = e.touches[0].pageY;
        // let index = Math.floor(Y / this.itemHeight);
        // let item = this.list[index];
        // if(item){
        //  this.scrollInto = 'item-'+item.letter;
        //  this.current = item.letter;
        // }
        
        let Y = e.touches[0].pageY
      
        // #ifdef MP
          Y = Y - this.top
        // #endif
        
        let index = Math.floor(Y / this.itemHeight)
        let item = this.list[index]
        if(item){
          this.scrollInto = 'item-'+item.letter
          this.current = item.letter
        }
      }
    }
  }
</script>
<style>
</style>

import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
export default{
  state:{
    user:false,
    apply:{
      rows:[],
      count:0,
    }
  },
  actions:{
    // 登录后处理
    login({state,dispatch},user){
      // 存到状态种
      state.user=user;
      // 存储到本地存储中
      $U.setStorage('token',user.token);
      $U.setStorage('user',JSON.stringify(user));
      $U.setStorage('user_id',user.id);
      // 更新角标提示
      dispatch('updateMailBadge');
    },
    // 退出登录
    logout({state}){
      // 清除登录状态
      state.user = false;
      // 清除本地存储数据
      $U.removeStorage('token');
      $U.removeStorage('user');
      $U.removeStorage('user_id');
      // 跳转到登录页
      uni.reLaunch({
        url:'/pages/common/login/login'
      })
    },
    // 初始化登录状态
    initLogin({ state,dispatch }){
      // 拿到存储的数据
      let user = $U.getStorage('user');
      if(user){
        // 初始化登录状态
        state.user=JSON.parse(user);
          // 连接socket
        // 获取离线信息
        // 获取好友申请列表
        dispatch('getApply');
      }
    },
    // 获取好友申请列表
    getApply({ state,dispatch },page=1){
      $H.get('/apply/'+page).then(res=>{
        console.log(res);
        state.apply = res;
        
        // 更新通讯录角标提示
        dispatch('updateMailBadge');
      });
    },
    // 更新通讯录角标提示
    updateMailBadge({ state }){
      let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
      console.log(state.apply.count);
      if(state.apply.count>0){
        return uni.setTabBarBadge({
          index:1,
          text:count
        })
      }
      
      uni.removeTabBarBadge({
        index:1
      })
      
    }
  },
}

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="好友申请列表" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
      <free-main-button slot="right" v-if="item.status==='pending'" name="同意"></free-main-button>
      <text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
    </free-list-item>
  </view>
</template>
<script>
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import $H from '@/common/free-lib/request.js';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeDivider
    },
    filters:{
      formatTitle(value){
        let obj = {
          agree:'已通过',
          refuse:'已拒绝',
          ignore:'已忽略'
        }
        return obj[value.status];
      }
    },
    computed:{
      ...mapState({
        applyList:state=>state.user.apply.rows
      })
    },
    data() {
      return {
        form:{
          friend_id:0,
          nickname:"",
          lookme:1,
          lookhim:1
        },
        id:0
      }
    },
    onLoad(e) {
      
    },
    methods: {
      
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="好友申请列表" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
      <free-main-button slot="right" v-if="item.status==='pending'" name="同意"></free-main-button>
      <text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
    </free-list-item>
    <!-- 上拉加载 -->
    <view class="flex align-center justify-center py-4 bg-light">
      <text class="text-muted font">{{loadmore}}</text>
    </view>
  </view>
</template>
<script>
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import $H from '@/common/free-lib/request.js';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeDivider
    },
    filters:{
      formatTitle(value){
        let obj = {
          agree:'已通过',
          refuse:'已拒绝',
          ignore:'已忽略'
        }
        return obj[value.status];
      }
    },
    computed:{
      ...mapState({
        applyList:state=>state.user.apply.rows
      })
    },
    data() {
      return {
        form:{
          friend_id:0,
          nickname:"",
          lookme:1,
          lookhim:1
        },
        id:0,
        page:1,
        loadmore:'上拉加载更多',// 没有更多了，加载中...
      }
    },
    // 监听下拉刷新
    onPullDownRefresh() {
      this.page = 1;
      this.$store.dispatch('getApply',this.page).then(res=>{
        uni.showToast({
          title:'刷新成功',
          icon:'none'
        })
        uni.stopPullDownRefresh()
      })
    },
    onLoad(e) {
      
    },
    // 监听触底事件
    onReachBottom() {
      if(this.loadmore !== '上拉加载更多'){
        return;
      }
      this.loadmore = '加载中...';
      this.page = this.page+1;
      this.$store.dispatch('getApply',this.page).then(res=>{
        console.log(res)
        
        this.loadmore = this.applyList.length == this.page*10 ? '上拉加载更多' : '没有更多了';
      }).catch(err=>{
        this.page = this.page-1;
        this.loadmore = '上拉加载更多';
      })
    },
    methods: {
      
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="好友申请列表" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
      <free-main-button slot="right" v-if="item.status==='pending'" name="同意" @click='handle(item)'></free-main-button>
      <text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
    </free-list-item>
    <!-- 上拉加载 -->
    <view class="flex align-center justify-center py-4 bg-light">
      <text class="text-muted font">{{loadmore}}</text>
    </view>
  </view>
</template>
<script>
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import $H from '@/common/free-lib/request.js';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeDivider
    },
    filters:{
      formatTitle(value){
        let obj = {
          agree:'已通过',
          refuse:'已拒绝',
          ignore:'已忽略'
        }
        return obj[value.status];
      }
    },
    computed:{
      ...mapState({
        applyList:state=>state.user.apply.rows
      })
    },
    data() {
      return {
        form:{
          friend_id:0,
          nickname:"",
          lookme:1,
          lookhim:1
        },
        id:0,
        page:1,
        loadmore:'上拉加载更多',// 没有更多了，加载中...
      }
    },
    // 监听下拉刷新
    onPullDownRefresh() {
      this.page = 1;
      this.$store.dispatch('getApply',this.page).then(res=>{
        uni.showToast({
          title:'刷新成功',
          icon:'none'
        })
        uni.stopPullDownRefresh()
      })
    },
    onLoad(e) {
      
    },
    // 监听触底事件
    onReachBottom() {
      if(this.loadmore !== '上拉加载更多'){
        return;
      }
      this.loadmore = '加载中...';
      this.page = this.page+1;
      this.$store.dispatch('getApply',this.page).then(res=>{
        console.log(res)
        
        this.loadmore = this.applyList.length == this.page*10 ? '上拉加载更多' : '没有更多了';
      }).catch(err=>{
        this.page = this.page-1;
        this.loadmore = '上拉加载更多';
      })
    },
    onShow() {
      this.page = 1;
      this.$store.dispatch('getApply',this.page)
    },
    methods: {
      handle(item){
        uni.navigateTo({
          url:'../add-friend/add-friend?id='+item.id,
        })
      }
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="添加好友" showBack :showRight="false">
    </free-nav-bar>
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">备注名</text>
      <input type="text" class="font-md border bg-white px-3" placeholder="请填写备注名" style="height: 100rpx;" v-model="form.nickname"/>
    </view>
    <free-divider></free-divider>
    <free-list-item title="不让他看我" :showLeftIcon="false"
    showRight :showRightIcon="false">
      <switch slot="right" :checked="!!form.lookme" color="#08C060" @change="form.lookme = form.lookme ? 0 : 1"/>
    </free-list-item>
    <free-list-item title="不看他" :showLeftIcon="false"
    showRight :showRightIcon="false">
      <switch slot="right" :checked="!!form.lookhim" color="#08C060" @change="form.lookhim = form.lookhim ? 0 : 1"/>
    </free-list-item>
    <free-divider></free-divider>
    <view class="py-3 flex align-center justify-center bg-white"
    hover-class="bg-light" @click="submit">
      <text class="font-md text-primary">{{ id > 0 ? '同意' : '点击添加' }}</text>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import $H from '@/common/free-lib/request.js';
  import auth from '@/common/mixin/auth.js';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeListItem,
      freeDivider
    },
    data() {
      return {
        form:{
          friend_id:0,
          nickname:"",
          lookme:1,
          lookhim:1
        },
        id:0
      }
    },
    onLoad(e) {
      if(e.params){
        this.form = JSON.parse(e.params)
      }
      if(e.id){
        this.id = e.id
      }
    },
    methods: {
      submit(){
        // 添加好友
        if(this.id == 0){
          return $H.post('/apply/addfriend',this.form).then(res=>{
            uni.showToast({
              title: '申请成功',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 1
            });
          })
        }
        // 处理好友申请
        $H.post('/apply/handle/'+this.id,{
          ...this.form,
          status:"agree"
        }).then(res=>{
          uni.showToast({ title: '处理成功', icon: 'none' });
          uni.navigateBack({ delta: 1 });
          // this.$store.dispatch('getMailList')
        })
      }
    }
  }
</script>
<style>
</style>

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar title="通讯录"></free-nav-bar>
    <!-- 通讯录列表 -->
      <scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'"  :scroll-into-view="scrollInto">
        <free-list-item v-for="(item,index) in topList" :key="item.id"  :title="item.title" :cover="item.cover" :showRight="item.id==='friend'"  @click="navigate(item.path)"  :showRightIcon='false'>
          <free-badge v-if="applyCount>0" slot="right" :num="applyCount"></free-badge>
        </free-list-item>
        
        <view v-for="(item,index) in list" :key="index" v-if="item.list.length>0" :id="'item-'+item.title">
          <view class="py-2 px-3 border-bottom bg-light">
            <text class="font-md text-dark">{{item.title}}</text>
          </view>
          <free-list-item v-for="(item2,index2) in item.list" :key="index2"  :title="item2.name" :cover="item2.avatar ? item2.avatar : '/static/images/userpic.png'" @click=""></free-list-item>
        </view>
      </scroll-view>
      <!-- 侧边导航条 -->
      <view class="position-fixed right-0 bottom-0 flex  flex-column" :style="'top:'+top+'rpx;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" >
        <view class="flex-1 flex align-center justify-center" v-for="(item,index) in list" :key="index">
          <text class="font-sm text-muted">{{item.title}}</text>
        </view>
      </view>
      
      <!-- <block v-if="current"> -->
      <view class="position-fixed rounded-circle bg-light border flex align-center justify-center" style="width: 150rpx;height: 150rpx; left: 300rpx;" :style="'top:'+modalTop+'px;'" v-if="current!=''">
        <text class="font-lg" >{{current}}</text>
      </view>
      <!-- </block> -->
  </view>
</template>
<script>
  import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeBadge from '@/components/free-ui/free-badge.vue';
  import { mapState } from 'vuex'; 
  import auth from '@/common/mixin/auth.js';
  export default {
    mixins:[auth],
    components:{
      freeNavBar,
      freeListItem,
      freeBadge
    },
    computed:{
      ...mapState({
        applyCount:state=>state.user.apply.count,
        list:state=>state.user.mailList
      }),//state.user.apply.count
      modalTop(){
        return (this.scrollHeight-uni.upx2px(150))/2;
      },
      itemHeight(){
        let count = this.list.length;
        if(count<1){
          return 0;
        }
        return this.scrollHeight/count;
      }
    },
    onLoad() {
      let res = uni.getSystemInfoSync();
      this.top = res.statusBarHeight + uni.upx2px(90);
      this.scrollHeight = res.windowHeight-this.top;
      this.$store.dispatch('getMailList');
    },
    data() {
      return {
        scrollInto:'',
        top:0,
        scrollHeight:0,
        current:'',
        topList:[
          {
            id:'friend',
            title:"新的朋友",
            cover:"/static/images/mail/friend.png",
            path:"mail/apply-list/apply-list"
          },
          {
            id:'group',
            title:"群聊",
            cover:"/static/images/mail/group.png",
            path:""
          },
          {
            id:'tag',
            title:"标签",
            cover:"/static/images/mail/tag.png",
            path:""
          }
        ]
        
      }
    },
    methods: {
      touchstart(e){
        this.changeScrollInto(e);
      },
      touchmove(e){
        this.changeScrollInto(e);
      },
      touchend(){
        this.current = '';
      },
      // 联动
      changeScrollInto(e){
        // let Y = e.touches[0].pageY;
        // let index = Math.floor(Y / this.itemHeight);
        // let item = this.list[index];
        // if(item){
        //  this.scrollInto = 'item-'+item.letter;
        //  this.current = item.letter;
        // }
        
        let Y = e.touches[0].pageY
      
        // #ifdef MP
          Y = Y - this.top
        // #endif
        
        let index = Math.floor(Y / this.itemHeight)
        let item = this.list[index]
        if(item){
          this.scrollInto = 'item-'+item.letter
          this.current = item.letter
        }
      }
    }
  }
</script>
<style>
</style>

import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
export default {
  state: {
    user: false,
    apply: {
      rows: [],
      count: 0,
    },
    mailList:[]
  },
  actions: {
    // 登录后处理
    login({
      state,
      dispatch
    }, user) {
      // 存到状态种
      state.user = user;
      // 存储到本地存储中
      $U.setStorage('token', user.token);
      $U.setStorage('user', JSON.stringify(user));
      $U.setStorage('user_id', user.id);
      // 更新角标提示
      dispatch('updateMailBadge');
    },
    // 退出登录
    logout({
      state
    }) {
      // 清除登录状态
      state.user = false;
      // 清除本地存储数据
      $U.removeStorage('token');
      $U.removeStorage('user');
      $U.removeStorage('user_id');
      // 跳转到登录页
      uni.reLaunch({
        url: '/pages/common/login/login'
      })
    },
    // 初始化登录状态
    initLogin({
      state,
      dispatch
    }) {
      // 拿到存储的数据
      let user = $U.getStorage('user');
      if (user) {
        // 初始化登录状态
        state.user = JSON.parse(user);
        // 连接socket
        // 获取离线信息
        // 获取好友申请列表
        dispatch('getApply');
      }
    },
    // 获取好友申请列表
    getApply({
      state,
      dispatch
    }, page = 1) {
      $H.get('/apply/' + page).then(res => {
        if (page === 1) {
          state.apply = res
        } else {
          // 下拉刷新
          state.apply.rows = [...state.apply.rows, ...res.rows]
          state.apply.count = res.count
        }
        // 更新通讯录角标提示
        dispatch('updateMailBadge');
      });
    },
    // 更新通讯录角标提示
    updateMailBadge({
      state
    }) {
      let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
      console.log(state.apply.count);
      if (state.apply.count > 0) {
        return uni.setTabBarBadge({
          index: 1,
          text: count
        })
      }
      uni.removeTabBarBadge({
        index: 1
      })
    },
    // 获取通讯录列表
    getMailList({state}){
      $H.get('/friend/list').then(res=>{
        state.mailList = res.rows.newList ? res.rows.newList : [];
      })
    }
  },
}

<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">&#xe6fd;</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">
      <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.tagList" :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">
      <text class="iconfont text-primary mr-1" v-if="!detail.isBlack">&#xe64e;</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:[]
        },
      }
    },
    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"
      },
      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"
          },{
            icon:"\ue638",
            title:this.detail.isblack ? '移出黑名单' : "加入黑名单",
            type:"event",
            event:"setBlack"
          },{
            icon:"\ue61c",
            title:"投诉",
            type:"navigate",
            path:"mail/user-report/user-report"
          },{
            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;
        }
        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.detail.isBlack){
          msg = '移出黑名单';
        }
        uni.showModal({
          content:'是否要'+msg,
          success:(res)=>{
            if(res.confirm){
              this.detail.isBlack = !this.detail.isBlack;
              e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
              uni.showToast({
                title:msg+'成功',
                icon:'none'
              })
            }
          }
        })
      }
    }
  }
</script>
<style>
</style>

<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">&#xe6fd;</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">
      <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.tagList"
          :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">&#xe64e;</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: []
        },
      }
    },
    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"
      },
      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"
        }, {
          icon: "\ue638",
          title: this.detail.isblack ? '移出黑名单' : "加入黑名单",
          type: "event",
          event: "setBlack"
        }, {
          icon: "\ue61c",
          title: "投诉",
          type: "navigate",
          path: "mail/user-report/user-report"
        }, {
          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;
        }
      },
      // 设为星标
      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();
        }
      }
    }
  }
</script>
<style>
</style>

<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">&#xe6fd;</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">
      <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.tagList"
          :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">&#xe64e;</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"
      },
      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+"&params="+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"
        }, {
          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;
        }
      },
      // 设为星标
      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();
        }
      }
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="设置朋友圈动态权限" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item title="不让他看我" :showLeftIcon="false" showRight :showRightIcon="false">
      <switch slot="right" :checked="!!form.lookme" @change="change('lookme')" color="#08C060"/>
    </free-list-item>
    <free-list-item title="不看他" :showLeftIcon="false" showRight :showRightIcon="false">
      <switch slot="right" :checked="!!form.lookhim" @change="change('lookhim')" color="#08C060"/>
    </free-list-item>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import $H from '@/common/free-lib/request.js';
  export default {
    components:{
      freeNavBar,
      freeListItem
    },
    data() {
      return {
        id:0,
        form:{
          lookme:1,
          lookhim:1
        }
      }
    },
    onLoad(e) {
      if(e.user_id){
        this.id= e.user_id
      }
      if(e.params){
        this.form= JSON.parse(e.params);
      }
    },
    methods: {
      change(key){
        this.form[key] = this.form[key] ? 0 : 1;
        this.submit()
      },
      submit(){
        $H.post('/friend/setmomentauth/'+this.id,this.form).then(res=>{
          uni.showToast({
            title:'修改成功',
            icon:'none'
          })
        })
      }
    }
  }
</script>
<style>
</style>

<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">&#xe6fd;</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">&#xe64e;</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.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+"&params="+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"
        }, {
          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;
        }
      },
      // 设为星标
      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();
        }
      }
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="设置备注和标签" showBack :showRight="true">
      <free-main-button name="完成" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
    
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">备注名</text>
      <input type="text" class="font-md border bg-white px-3" placeholder="请填写备注名" style="height: 100rpx;" v-model="nickname"/>
    </view>
    
    <view class="flex flex-column">
      <text class="font-sm text-secondary px-3 py-2">标签</text>
      <view class="border bg-white px-3 flex align-center flex-wrap pt-3 pb-2" @click="openTagSet">
        <view class="border border-main rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in tagList" :key="index">
          <text class="font main-text-color">{{item}}</text>
        </view>
      </view>
    </view>
    
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import auth from '@/common/mixin/auth.js';
  import $H from '@/common/free-lib/request.js';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeMainButton
    },
    data() {
      return {
        id:0,
        nickname:"",
        tagList:['朋友','同学','家人']
      }
    },
    onLoad(e) {
      if(!e.params){
        return this.backToast()
      }
      let params = JSON.parse(e.params)
      this.id = params.user_id
      this.nickname = params.nickname
      this.tagList = params.tags == '' ? [] : params.tags.split(',')
      uni.$on('updateTag',(e)=>{
        this.tagList = e
      })
    },
    beforeDestroy() {
      uni.$off('updateTag')
    },
    methods: {
      openTagSet(){
        uni.navigateTo({
          url: '../user-tag-set/user-tag-set?detail='+JSON.stringify(this.tagList)
        });
      },
      // 完成
      submit(){
        uni.$emit('saveRemarkTag',{
          nickname:this.nickname,
          tagList:this.tagList
        });
        // uni.navigateBack({
        //  delta:1
        // })
        $H.post('/friend/setremarktag/'+this.id,{
          nickname:this.nickname,
          tags:this.tagList.join(',')
        }).then(res=>{
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
          uni.navigateBack({
            delta: 1
          });
        })
      }
    }
  }
</script>
<style>
</style>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="用户投诉" showBack :showRight="true" bgColor="bg-white">
      <free-main-button name="投诉" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
  
    <picker mode="selector" :range="range" @change="change">
      <view>
        <free-list-item :showLeftIcon="false" :title="form.category ? form.category : '请选择分类'" showRight></free-list-item>
      </view>
    </picker>
    <textarea placeholder="请填写投诉内容..." class="bg-white p-2 font-md" v-model="form.content" style="width: 100%;" />
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import $H from '@/common/free-lib/request.js';
  import auth from '@/common/mixin/auth.js';
  export default {
    mixins:[auth],
    components:{
      freeNavBar,
      freeMainButton,
      freeListItem
    },
    data() {
      return {
        range:['分类一','分类二','分类三','分类四','分类五'],
        form:{
          reported_id:0,
          reported_type:'user',
          category:'',
          content:''
        }
      }
    },
    onLoad(e) {
      if(!e.params){
        return this.backToast()
      }
      let params = JSON.parse(e.params);
      this.form.reported_id = params.user_id,
      this.form.reported_type = params.type
    },
    methods: {
      change(e){
        this.form.category = this.range[e.detail.value];
      },
      submit(){
        if(!this.form.category){
          return uni.showToast({
            title:'请选择分类',
            icon:'none'
          })
        }
        if(!this.form.content){
          return uni.showToast({
            title:'请填写投诉内容',
            icon:'none'
          })
        }
        
        // 请求服务器
        $H.post('/report/save',this.form).then(res=>{
          console.log(res)
          uni.navigateBack({
            delta:1
          });
          uni.showToast({
            title:'投诉成功',
            icon:'none'
          })
        })
        
      }
    }
  }
</script>
<style>
</style>