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>

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

目录
相关文章
|
5月前
uni-app 20收藏列表开发
uni-app 20收藏列表开发
55 0
uni-app 20收藏列表开发
|
5月前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
51 0
|
5月前
uni-app 4.5开发聊天列表组件(一)
uni-app 4.5开发聊天列表组件(一)
61 0
|
2月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
4月前
|
搜索推荐
App Inventor 2 列表排序,函数式编程轻松实现高级排序算法
本文探讨了列表的函数式编程高级用法,允许根据自定义逻辑进行排序。不仅支持基本数据类型(文本和数字)的升序和降序排序,还能处理复杂结构类型中特定元素的排序。通过示例展示了如何定义比较函数来实现升序和降序,简化了排序操作。
47 0
|
3月前
4. 解决uni-app开发过程中view、image等标签出现诸如“出现错误:类型“{ class: string; }”的参数不能赋给类型“.......”
4. 解决uni-app开发过程中view、image等标签出现诸如“出现错误:类型“{ class: string; }”的参数不能赋给类型“.......”
194 0
|
5月前
uni-app 94群聊列表分页(二)
uni-app 94群聊列表分页(二)
36 1
uni-app 94群聊列表分页(二)
|
5月前
uni-app 76聊天类封装(十一)-更新会话列表(二)
uni-app 76聊天类封装(十一)-更新会话列表(二)
36 1
|
5月前
uni-app 78渲染和监听聊天会话列表
uni-app 78渲染和监听聊天会话列表
41 1
|
5月前
uni-app 93 群聊列表分页(一)
uni-app 93 群聊列表分页(一)
77 0
uni-app 93 群聊列表分页(一)