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>

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

目录
相关文章
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
187 0
|
8月前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
123 4
|
8月前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
136 4
|
8月前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
156 1
|
8月前
|
JSON 前端开发 数据挖掘
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动
123 0
|
8月前
|
JSON 前端开发 数据格式
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(12)
上一节我们实现了商品详情页面的规格选择弹窗,这在任何购物类应用中都是最常用的功能之一。当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车内简单展示的功能
130 0
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
397 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
1512 11
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
246 2
|
搜索推荐
App Inventor 2 列表排序,函数式编程轻松实现高级排序算法
本文探讨了列表的函数式编程高级用法,允许根据自定义逻辑进行排序。不仅支持基本数据类型(文本和数字)的升序和降序排序,还能处理复杂结构类型中特定元素的排序。通过示例展示了如何定义比较函数来实现升序和降序,简化了排序操作。
231 0

热门文章

最新文章