feat: 添加组件配置文件并优化页面结构
- 新增 components.d.json 文件,包含所有组件的属性配置 - 添加 card-item-plugin 组件及其相关文件(json、ts、wxml、wxss) - 在 app.json 中添加新的生产流程管理页面路径 - 添加多个SVG图标文件用于菜单项 - 重构 popup-plugin 组件样式和关闭逻辑 - 更新 tab-bar-plugin 的激活状态逻辑 - 优化 search-popup 使用全局样式类 - 在首页添加菜单配置和页面跳转功能 - 调整组件样式细节和间距
This commit is contained in:
@@ -1,6 +1,10 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"tab-bar-plugin": "/pages/components/tab-bar-plugin/tab-bar-plugin",
|
||||
"pagination-plugin": "/pages/components/pagination-plugin/pagination-plugin",
|
||||
"select-plugin": "/pages/components/select-plugin/select-plugin",
|
||||
"search-popup": "/pages/components/search-popup/search-popup"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
// pages/index/index.ts
|
||||
|
||||
import { menuConfig } from "@/utils/menuConfig";
|
||||
import { Subscribe } from "@/utils/subscribe";
|
||||
import { getDataSet, toObject } from "@/utils/util";
|
||||
|
||||
// const app = getApp();
|
||||
// const Storage = app.Storage;
|
||||
@@ -8,15 +10,123 @@ Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {},
|
||||
data: {
|
||||
BGColors: [
|
||||
"linear-gradient( 135deg, #FDEB71 10%, #F8D800 100%)",
|
||||
"linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%)",
|
||||
"linear-gradient( 135deg, #FEB692 10%, #EA5455 100%)",
|
||||
"linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)",
|
||||
"linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%)",
|
||||
"linear-gradient( 135deg, #FFF6B7 10%, #F6416C 100%)",
|
||||
"linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%)",
|
||||
"linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)",
|
||||
"linear-gradient( 135deg, #F97794 10%, #623AA2 100%)",
|
||||
"linear-gradient( 135deg, #FCCF31 10%, #F55555 100%)",
|
||||
"linear-gradient( 135deg, #F761A1 10%, #8C1BAB 100%)",
|
||||
"linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%)",
|
||||
"linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%)",
|
||||
"linear-gradient( 135deg, #FAD7A1 10%, #E96D71 100%)",
|
||||
"linear-gradient( 135deg, #FFD26F 10%, #3677FF 100%)",
|
||||
"linear-gradient( 135deg, #A0FE65 10%, #FA016D 100%)",
|
||||
"linear-gradient( 135deg, #FFDB01 10%, #0E197D 100%)",
|
||||
"linear-gradient( 135deg, #FEC163 10%, #DE4313 100%)",
|
||||
"linear-gradient( 135deg, #92FFC0 10%, #002661 100%)",
|
||||
"linear-gradient( 135deg, #EEAD92 10%, #6018DC 100%)",
|
||||
"linear-gradient( 135deg, #F6CEEC 10%, #D939CD 100%)",
|
||||
"linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%)",
|
||||
"linear-gradient( 135deg, #F1CA74 10%, #A64DB6 100%)",
|
||||
"linear-gradient( 135deg, #E8D07A 10%, #5312D6 100%)",
|
||||
"linear-gradient( 135deg, #EECE13 10%, #B210FF 100%)",
|
||||
"linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%)",
|
||||
],
|
||||
params: {
|
||||
curr_page: 1,
|
||||
page_count: 20,
|
||||
},
|
||||
total: 100,
|
||||
current1: ["checkbox1", "checkbox2"],
|
||||
current2: "checkbox1",
|
||||
options: [
|
||||
{ label: "多选", value: "checkbox1" },
|
||||
{ label: "多选", value: "checkbox2" },
|
||||
{
|
||||
label:
|
||||
"多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行",
|
||||
value: "checkbox3",
|
||||
maxLabelRow: 2,
|
||||
},
|
||||
{
|
||||
label: "多选",
|
||||
value: "checkbox4",
|
||||
content:
|
||||
"描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息",
|
||||
maxContentRow: 2,
|
||||
},
|
||||
{ label: "多选", value: "checkbox11" },
|
||||
{ label: "多选", value: "checkbox21" },
|
||||
{
|
||||
label:
|
||||
"多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行",
|
||||
value: "checkbox31",
|
||||
maxLabelRow: 2,
|
||||
},
|
||||
{
|
||||
label: "多选",
|
||||
value: "checkbox41",
|
||||
content:
|
||||
"描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息",
|
||||
maxContentRow: 2,
|
||||
},
|
||||
],
|
||||
authInfo: {} as any,
|
||||
menuList: [] as any,
|
||||
},
|
||||
|
||||
change() {
|
||||
Subscribe.set("isLogin", "zzzuz");
|
||||
Subscribe.set("isLogin", "hello");
|
||||
// wx.navigateTo({ url: "/pages/my/my" });
|
||||
},
|
||||
changePage(e: any) {
|
||||
this.data.params.curr_page = e.detail.curr_page;
|
||||
this.setData({ params: this.data.params });
|
||||
},
|
||||
changeSelect(e: any) {
|
||||
console.log(e);
|
||||
},
|
||||
navToMy() {
|
||||
wx.navigateTo({ url: "/pages/my/my" });
|
||||
},
|
||||
init() {
|
||||
this.data.authInfo = {};
|
||||
const companyInfo = toObject(wx.getStorageSync("company_info"));
|
||||
this.data.menuList.length = 0;
|
||||
menuConfig.forEach((el) => {
|
||||
const children: any[] = [];
|
||||
el.children.forEach((ell) => {
|
||||
// todo 权限判断
|
||||
// if (!ell.auth || this.data.authInfo[ell.auth]) {
|
||||
children.push(ell);
|
||||
// }
|
||||
});
|
||||
if (children.length) {
|
||||
this.data.menuList.push({
|
||||
...el,
|
||||
children: children,
|
||||
});
|
||||
}
|
||||
});
|
||||
// this.getIndex();
|
||||
this.setData({
|
||||
authInfo: this.data.authInfo,
|
||||
menuList: this.data.menuList,
|
||||
hideTabKeys: companyInfo.staff_type == 3 ? ["2"] : [],
|
||||
});
|
||||
},
|
||||
nav(e: any) {
|
||||
const url = getDataSet(e).url;
|
||||
wx.navigateTo({ url });
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
@@ -30,7 +140,10 @@ Page({
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
onShow() {
|
||||
wx.hideHomeButton();
|
||||
this.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
|
||||
@@ -1,6 +1,38 @@
|
||||
<page-plugin>
|
||||
<page-plugin loading="{{true}}" isLogin="{{true}}" isAuth="{{true}}">
|
||||
<text>pages/index/index.wxml</text>
|
||||
<t-button bind:tap="change">change</t-button>
|
||||
<t-button bind:tap="navToMy">my</t-button>
|
||||
<t-icon name="user-vip" style="color: #0052D9" size="20px"></t-icon>
|
||||
</page-plugin>
|
||||
<pagination-plugin
|
||||
curr_page="{{params.curr_page}}"
|
||||
total="{{total}}"
|
||||
page_count="{{params.page_count}}"
|
||||
bind:change="changePage"
|
||||
/>
|
||||
<block wx:for="{{ menuList }}" wx:key="index" wx:for-item="item">
|
||||
<view style="display: flex;align-items: center;">
|
||||
<t-icon name="{{ item.icon }}" style="color: {{item.iconColor}};font-size: 1.2em;margin-right: 4px;" />
|
||||
<text style="font-weight: bold;font-size: 1.1em;">{{ item.title }}</text>
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<block wx:for="{{ item.children }}" wx:key="index" wx:for-item="child">
|
||||
<view class="menu-item" bindtap="nav" data-url="{{ child.url }}">
|
||||
<image class="nav-item-icon" src="/assets/icons/{{child.title}}.svg" mode="aspectFit" />
|
||||
<view>{{ child.title }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</page-plugin>
|
||||
<tab-bar-plugin active="index" />
|
||||
<select-plugin
|
||||
mode="single"
|
||||
value="{{current2}}"
|
||||
options="{{options}}"
|
||||
bind:change="changeSelect"
|
||||
>
|
||||
<view style="display: block;">下拉选择</view>
|
||||
</select-plugin>
|
||||
<search-popup>
|
||||
<view slot="content">1111</view>
|
||||
</search-popup>
|
||||
|
||||
|
||||
@@ -1 +1,25 @@
|
||||
/* pages/index/index.wxss */
|
||||
.container {
|
||||
height: calc(100vh - var(--td-tab-bar-height, 80rpx) - env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: clamp(80px, 25%, 120px);
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
--width: calc((100vw - 16px - 24px) / 4 * 0.4);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-item-icon {
|
||||
width: var(--width);
|
||||
height: var(--width);
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user