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

简介: 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>

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

目录
相关文章
|
4天前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
21 0
|
4天前
uni-app 20收藏列表开发
uni-app 20收藏列表开发
37 0
uni-app 20收藏列表开发
|
4天前
uni-app 4.5开发聊天列表组件(一)
uni-app 4.5开发聊天列表组件(一)
26 0
|
4天前
|
XML Java Android开发
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
56 1
|
4天前
|
XML Java Android开发
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
45 0
|
4天前
|
XML Java Android开发
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
102 0
|
4天前
uni-app 162初始化会话列表功能
uni-app 162初始化会话列表功能
15 0
|
4天前
uni-app 149我的朋友圈分页列表实现
uni-app 149我的朋友圈分页列表实现
12 0
|
4天前
uni-app 148朋友圈列表分页功能实现
uni-app 148朋友圈列表分页功能实现
22 0
|
4天前
|
API
uni-app 147我的朋友圈列表api开发
uni-app 147我的朋友圈列表api开发
15 0