微信小程序 会议OA项目-其它页面04

news2024/10/5 16:27:45

目录

1.会议管理

        1.1 自定义tabs组件

        1.2 会议管理

2.投票管理

3.个人中心

1.会议管理

         1.1 自定义tabs组件

文档参考:自定义组件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

 

新建一个文件夹： 

 

        1.2 会议管理

tabs.json

{
  "component": true,
  "usingComponents": {}
}

tabs.wxml 

<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

 tabs.wxss

.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}

.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}

.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}

.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

tabs.js

var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

 

 list.json：

{
    "usingComponents": {
      "tabs":"/components/tabs/tabs"
    }
}

list.wxml:

 

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>

list.wxss :

/* pages/meeting/list/list.wxss */
.mobi-title {
  font-size: 12pt;
  color: #777;
  line-height: 110%;
  font-weight: bold;
  width: 100%;
  padding: 15rpx;
  background-color: #f3f3f3;
}

.mobi-icon {
  padding: 0rpx 3rpx;
  border-radius: 3rpx;
  background-color: #ff7777;
  position: relative;
  margin-right: 10rpx;
}

/*list*/
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 150rpx;
  height: 220rpx;
  justify-content: center;
  align-items: center;
}

.list-img .video-img {
  width: 120rpx;
  height: 120rpx;
  
}

.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 220rpx;
}

.list-title text {
  font-size: 11pt;
  color: #333;
  font-weight: bold;
}

.list-detail .list-tag {
  display: flex;
  height: 70rpx;
}

.list-tag .state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-tag .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-tag .list-num {
  font-size: 11pt;
  color: #ff6666;
}

.list-info {
  font-size: 9pt;
  color: #bbb;
  margin-top: 20rpx;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

 list.js:

// pages/meeting/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      tabs:['会议中','已完成','已取消','全部会议'],
      lists: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        },
        {
          'id': '1',
          'image': '/static/persons/4.jpg',
          'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
          'num':'150',
          'state':'已结束',
          'time': '10月09日 17:21',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/5.jpg',
          'title': '新质生活 · 品质时代 2016消费升级创新大会',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ],
      lists1: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        }
      ],
      lists2: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        }
      ],
      lists3: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        },
        {
          'id': '1',
          'image': '/static/persons/4.jpg',
          'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
          'num':'150',
          'state':'已结束',
          'time': '10月09日 17:21',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/5.jpg',
          'title': '新质生活 · 品质时代 2016消费升级创新大会',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ]
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },


    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    tabsItemChange(e){
        let tolists;
        if(e.detail.index==1){
            tolists = this.data.lists1;
        }else if(e.detail.index==2){
            tolists = this.data.lists2;
        }else{
            tolists = this.data.lists3;
        }
        this.setData({
            lists: tolists
        })
    }
})

效果：

 

 

 

2.投票管理

3.个人中心

index.wxml:

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image class="userInfo-head" src="/static/images/avatar.png"></image>
    <text class="userInfo-login">用户登录</text>
    <text class="userInfo-edit">修改</text>
    <!-- <image class="userInfo-set" src="/static/tabBar/component.png"></image> -->
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我主持的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我发布的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">消息</text>
        <text space="nbsp" class="cell-items-num">             1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">设置</text>
        <text space="nbsp" class="cell-items-num">             1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>

 index.wxss:

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.userInfo{
  display: flex;
  height: 300rpx;
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.userInfo-head{
  height: 200rpx;
  width: 200rpx;
  margin: 20rpx;
}
.userInfo-login{
  /* width: 400rpx; */
  /* display: flex; */
  /* align-items: center; */
  margin:100rpx 20rpx;
}
.userInfo-set{
  height: 100rpx;
  width: 100rpx;
  margin:120rpx 20rpx;
}
.userInfo-edit{
  color: gray;
  margin:100rpx 120rpx;
}

.cells{
  background-color: #fff;
  height: 270rpx;
}
.cell-items{
  height: 100rpx;
  display: flex;
  margin: 30rpx 0 0 0;
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items-icon{
  height: 90rpx;
  width: 90rpx;
}
.cell-items-title{
  font-weight: 700;
  font-size: 14px;
  margin: 20rpx 0 0 50rpx;
}
.cell-items-num{
  margin: 20rpx 0 0 300rpx;
}
.cell-items-detail{
  margin: 20rpx 0 0 20rpx;
}
.cells > hr{
  display: block;
  height: 1px;
  background-color: rgba(135, 206, 250, 0.075);
}

效果：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/126299.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

尚医通-数据字典-EasyExcel-导入 导出（十四）

尚医通-数据字典-EasyExcel-导入 导出（十四）

目录&#xff1a; &#xff08;1&#xff09;EasyExcel-写操作 &#xff08;2&#xff09;EasyExcel-读操作 &#xff08;3&#xff09;后台系统-数据字典-导出 &#xff08;4&#xff09; 后台系统-数据字典-导入 &#xff08;1&#xff09;EasyExcel-写操作 往数据字典里…
阅读更多...
家用摄像头选择（户内外）

家用摄像头选择（户内外）

不知道摄像头怎么选&#xff1f;看下面几篇就够了。 1、户外监控摄像头&#xff0c;哪个品牌的比较好&#xff1f; - 知乎 2、【室外篇】家用监控摄像头选购要素及不同场景下高性价比监控摄像头推荐 - 知乎 3、家用摄像头选什么牌子的好? - 知乎 优先选焦距 IP防水防尘&…
阅读更多...
超宽带（UWB）开发板BU0/DW1000性能测试

超宽带（UWB）开发板BU0/DW1000性能测试

简介 本实验目的是测试NodeMCU-BU01开发板测距的性能。 BU01是基于Decawave的DW1000设计的超宽带&#xff08;UWB&#xff09;收发器模组。BU01可以用于双向测距或TWR定位系统中&#xff0c;定位精度可达到10厘米&#xff0c;并支持高达6.8 Mbps的数据速率。 UWB技术是一种使…
阅读更多...
“ 1天投200次简历，依旧石沉大海 ” 这届年轻人的“求职焦虑”，如何缓解？

“ 1天投200次简历，依旧石沉大海 ” 这届年轻人的“求职焦虑”，如何缓解？

最近在新闻上看到这样一则热议事件&#xff1a;“1天投200次简历”&#xff1f;多方发力&#xff0c;缓解应届生“求职焦虑”。 教育部公布的数据显示&#xff0c;我国2022届全国普通高校毕业生数量为1076万人&#xff0c;而2023届预计达1158万人&#xff0c;同比将增加82万人…
阅读更多...
通过webpack配置【程序打包时间】

通过webpack配置【程序打包时间】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、webpack打包定义全局常量二、将全局常量设置为当前时间三、在console中输出BUILDTIME前言 大家都是做项目研发的&#xff0c;“打包”、“提测”、“发版”…
阅读更多...
低代码-零代码基础教育结合场景

低代码-零代码基础教育结合场景

在此次大会上&#xff0c;杭州市学军小学教育集团总校长张军林受邀出席。作为将低代码与校园教学管理成功结合运用的一所数字化小学&#xff0c;校长张军林在会上分享了他的数智化管理思想&#xff0c;并发布了学军小学智慧校园系统—学军大脑2.0。 “学军大脑2.0是基于钉钉宜…
阅读更多...
ES6-ES11笔记(2)

ES6-ES11笔记(2)

笔记 (https://www.bilibili.com/video/BV1uK411H7on?p30&vd_source3cf72bb393b8cc11b96c6d4bfbcbd890) 1.ES6 1.14集合介绍与API 1.14.1 set常用的api //声明一个set //set 里面的元素是唯一的,会自动去重 let s1 new Set(); //创建 //可以传入可以迭代的数据 let s…
阅读更多...
Windows服务器调整TLS1.2加密套件

Windows服务器调整TLS1.2加密套件

由于部分服务器默认不支持&#xff1a;TLS1.2加密条件&#xff0c;这会导致谷歌、火狐等浏览器无法访问网站&#xff0c;这种情况下需要调整加密条件。 支持TLS1.2协议的服务器操作系统需要&#xff1a;windows 2008R2 IIS7以上。 注意&#xff1a;微软说明windows 2003、win…
阅读更多...
软件测试期末复习（二）试题及答案

软件测试期末复习（二）试题及答案

文章目录试卷答案试卷 一、选择题(每题 2 分&#xff0c;共 20 分) 1、下面关于软件测试的说法&#xff0c;_______是错误的。 A 软件测试就是程序测试 B 软件测试贯穿于软件定义和开发的整个期间 C 需求规格说明、设计规格说明都是软件测试的对象 D 程序是软件测试的对象 2…
阅读更多...
github工具之OA综合利用python

github工具之OA综合利用python

文章目录0x01 下载地址0x02 主要功能0x03 使用方法0x04 参数使用OA v11.6 report_bi.func.php SQL注入漏洞OA v11.6 print.php 任意文件删除漏洞&#xff0c;删除auth.inc.php中OA v11.8 api.ali.php 任意文件上传漏洞OA v11.8 logincheck_code.php登陆绕过漏洞免责声明0x01 下…
阅读更多...
adb工具包环境变量配置

adb工具包环境变量配置

官方下载 Android SDK Platform-Tools 一、关于 adb Android SDK Platform-Tools 是 Android SDK 的一个组件。它包含与 Android 平台进行交互的工具&#xff0c;主要是 adb 和 fastboot。   adb是什么? 他的全称叫安卓调试桥&#xff0c;也就是Android debug bridge &…
阅读更多...
AAAI2023 | 针对联邦推荐场景的非定向攻击与防御

AAAI2023 | 针对联邦推荐场景的非定向攻击与防御

嘿&#xff0c;记得给“机器学习与推荐算法”添加星标TLDR&#xff1a;今天跟大家分享一篇通过利用聚类算法来操纵物品嵌入特征以此针对联邦推荐场景进行非定向攻击的工作&#xff0c;随后作者针对这一攻击又提出了一种基于一致性的对应防御机制&#xff0c;该论文已被AAAI2023…
阅读更多...
如何在Power BI中使用Python导入数据

如何在Power BI中使用Python导入数据

在这篇文章中&#xff0c;我们将学习如何在Power BI中使用Python编程语言进行数据源化。 简介 Python可以说是业界最流行、最普遍的编程语言之一。一方面&#xff0c;Python可用于网络和应用程序开发&#xff0c;另一方面&#xff0c;它在数据世界中也非常流行&#xff0c;特…
阅读更多...
生产制造业ERP管理系统能解决哪些仓库管理难题？

生产制造业ERP管理系统能解决哪些仓库管理难题？

仓库管理够不够好&#xff0c;安不安全&#xff0c;直接关系到生产制造企业的发展。要知道制造型企业的大部分“身家”&#xff0c;都在仓库里了。来料是否及时&#xff0c;物料是否齐套&#xff0c;库存是否安全&#xff0c;配件品质是否合格&#xff0c;库容是否足够&#xf…
阅读更多...
【蓝桥杯备赛系列 | 简单题】素数判断 字符串输入输出

【蓝桥杯备赛系列 | 简单题】素数判断 字符串输入输出

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 蓝桥杯竞赛专栏 | 简单题系列 &#xff08;一&#xff09; 作者&#xff1a; 计算机魔术师 版本&#xff1a; 1.0 &#xff08…
阅读更多...
[leetcode.10]正则表达式匹配

[leetcode.10]正则表达式匹配

&#xff08;1&#xff09;题目分析如下 题目要求完成一个正则表达式的匹配&#xff0c;其中s为目标串&#xff0c;p为正则串 .符号代表任何字符&#xff0c;*符号代表把前一个字符重复n次&#xff08;可能为0次&#xff09; &#xff08;2&#xff09;具体思路 一开始的时…
阅读更多...
c++算法基础必刷题目——贪心

c++算法基础必刷题目——贪心

文章目录贪心1、拼数2、排座椅3、矩阵消除游戏4、华华听月月唱歌贪心 贪心算法&#xff08;greedy algorithm &#xff0c;又称贪婪算法&#xff09;是指&#xff0c;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择。也就是说&#xff0c;不从整体最优上加以考虑&a…
阅读更多...
《图解TCP/IP》阅读笔记（第八章 8.5）—— WWW知多少？

《图解TCP/IP》阅读笔记（第八章 8.5）—— WWW知多少？

8.5 WWW 看到这章的名字&#xff0c;对于日常上网冲浪的我们而言&#xff0c;应该是再熟悉不过了。这不就是常见网址前的那三个字母&#xff0c;号称万维网&#xff08;WWW&#xff0c;World Wide Web&#xff09;的东西吗? 确实&#xff0c;我们本篇文章就要介绍与之相关的…
阅读更多...
Dimitra 2022: 年度回顾

Dimitra 2022: 年度回顾

大家好&#xff0c; 我首先要感谢 Dimitra 社区和我们所有的投资者在 2022 年期间的支持。俗话说&#xff0c;“这些都会过去”&#xff0c;2022 年的宏观加密环境尤其具有挑战性&#xff0c;一些非常糟糕的行为者给广泛的加密行业带来很多痛苦。 2023 年可能是监管框架最终显…
阅读更多...
公司来了个新测试开发，一副毛头小子的样儿，哪想到......

公司来了个新测试开发，一副毛头小子的样儿，哪想到......

最近公司来了个新同事&#xff0c;学历并不高&#xff0c;而且大学也不是计算机专业的&#xff0c;今年刚满25岁。。 本以为也是来干点基础的活混混日子的&#xff0c;结果没想到这个人上来就把现有项目的性能优化了一遍&#xff0c;直接给公司节省了不少成本&#xff0c;这种…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023