uni-app 172标签列表和标签用户列表

app/router.js

// 标签列表
  router.get('/tag/list',controller.tag.list);
  // 标签用户列表
  router.get('/tag/read/:id',controller.tag.read);

app/controller/group.js

'use strict';

const Controller = require('egg').Controller;

class TagController extends Controller {
    // 标签列表
    async list() {
        const { ctx, app } = this;
        let current_user_id = ctx.authUser.id;

        let rows = await app.model.Tag.findAll({
            where: {
                user_id: current_user_id
            },
            attributes: ['id', 'name']
        });

        ctx.apiSuccess(rows);
    }

    // 标签用户列表
    async read() {
        const { ctx, app } = this;
        let current_user_id = ctx.authUser.id;

        let id = parseInt(ctx.params.id);

        let rows = await app.model.Tag.findOne({
            where: {
                user_id: current_user_id,
                id
            },
            attributes: ['id', 'name'],
            include: [{
                model: app.model.Friend,
                attributes: ['nickname'],
                where: {
                    isblack: 0
                },
                include: [{
                    model: app.model.User,
                    as: "friendInfo",
                    attributes: ['id', 'nickname', 'avatar', 'username']
                }]
            }]
        });

        ctx.apiSuccess(rows.friends);

    }

}

module.exports = TagController;

/pages/mail/tag-read/tag-read.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="标签列表" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item v-for="(item,index) in list" :key="index" :title="item.name" :cover="item.avatar || '/static/images/userpic.png'"  @click="handle(item)" :showRight="true" :showRightIcon="true">
    </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';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeListItem
    },
    computed:{
      
    },
    data() {
      return {
        id:0,
        list:[],
      }
    },
    // 监听下拉刷新
    onPullDownRefresh() {
      this.getData().then(res=>{
        uni.showToast({
            title:'刷新成功',
            icon:'none'
        });
        uni.stopPullDownRefresh();
      })
    },
    onLoad(e) {
      this.id = e.id;
      this.getData();
    },
    
    methods: {
      getData(){
        return new Promise((result,reject)=>{
          $H.get('/tag/read/'+this.id).then(res=>{
            this.list = res.map(item=>{
              return {
                id:item.friendInfo.id,
                name:item.nickname || item.friendInfo.nickname || item.friendInfo.username,
                avatar:item.friendInfo.avatar,
              }
            })
            result(res);
          })
        });
        
      },
      handle(item){
        uni.navigateTo({
          url:'../user-base/user-base?user_id='+item.id,
        })
      }
    }
  }
</script>

<style>

</style>

/pages/mail/tag-list/tag-list.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="标签列表" showBack :showRight="false">
    </free-nav-bar>
    
    <free-list-item v-for="(item,index) in list" :key="index" :title="item.name"  @click="handle(item)" :showRight="true" :showRightIcon="true">
    </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';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  export default {
    mixins:[auth],
    components: {
      freeNavBar,
      freeListItem
    },
    computed:{
      
    },
    data() {
      return {
        form:{
          friend_id:0,
          nickname:"",
          lookme:1,
          lookhim:1
        },
        list:[],
      }
    },
    // 监听下拉刷新
    onPullDownRefresh() {
      this.getData().then(res=>{
        uni.showToast({
            title:'刷新成功',
            icon:'none'
        });
        uni.stopPullDownRefresh();
      })
    },
    onLoad(e) {
      this.getData();
    },
    
    methods: {
      getData(){
        return new Promise((result,reject)=>{
          $H.get('/tag/list').then(res=>{
            this.list = res
            result(res);
          })
        });
        
      },
      handle(item){
        uni.navigateTo({
          url:'../tag-read/tag-read?id='+item.id
        });
      }
    }
  }
</script>

<style>

</style>

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