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:
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
Component({
|
||||
options: { multipleSlots: true },
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
label: null,
|
||||
value: null,
|
||||
customStyle: null,
|
||||
labelStyle: null,
|
||||
valueStyle: null,
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<view class="card-item" style="{{ customStyle }}">
|
||||
<view class="label" style="{{ labelStyle }}">
|
||||
{{ label || '' }}
|
||||
<slot name="label" />
|
||||
</view>
|
||||
<view class="value" style="{{ valueStyle }}">
|
||||
{{ value || '' }}
|
||||
<slot name="value" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1.57;
|
||||
}
|
||||
|
||||
.label,
|
||||
.value {
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: var(--label-width, 5em);
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -27,6 +27,7 @@ Component({
|
||||
*/
|
||||
data: {
|
||||
showMore: false,
|
||||
showMoreBar: false,
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<view class="card_plugin {{className}}" style="border: 1rpx solid #ddd;margin-bottom: 12px;border-radius: 4px;{{style}};{{customStyle}}" bind:tap="click">
|
||||
<view class="card_plugin {{className}}" style="border: 1rpx solid #ddd;margin-bottom: 12px;border-radius: 4px;{{customStyle}}" bind:tap="click">
|
||||
<view class="header" style="border-bottom: 1rpx solid #ddd;padding: 8px 12px;font-weight: bold;{{headerStyle || ''}}">
|
||||
<slot name="header" />
|
||||
</view>
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer > view {
|
||||
.footer>view {
|
||||
border-top: 1rpx solid #ddd;
|
||||
padding: 8px 0 0 12px;
|
||||
padding: 16rpx 0 0 24rpx;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer > view:empty {
|
||||
.footer>view:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -25,8 +25,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
height: 26px;
|
||||
font-size: 0.875em;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.show-more:active {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup"
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,5 +24,9 @@ Component({
|
||||
this.triggerEvent("close");
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
this.setData({ open: false });
|
||||
this.triggerEvent("close");
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
<t-popup
|
||||
visible="{{visible}}"
|
||||
bind:visible-change="onVisibleChange"
|
||||
placement="{{placement || 'bottom'}}"
|
||||
close-btn
|
||||
>
|
||||
<view style="border-bottom: 1px solid #ddd;">
|
||||
<view style="padding: 12px 12px;">{{title}}</view>
|
||||
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="{{placement || 'bottom'}}">
|
||||
<view class="p-header">
|
||||
<view class="title">{{title}}</view>
|
||||
<t-icon name="close" size="60rpx" bind:tap="onClose" />
|
||||
</view>
|
||||
<view style="max-height: 70vh;overflow: auto;">
|
||||
<slot/>
|
||||
|
||||
@@ -1 +1,18 @@
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
.p-header {
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: calc(var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx)) * 0.5);
|
||||
padding-left: calc(var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx)) * 0.5);
|
||||
padding-top: 12rpx;
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
Component({
|
||||
options: { multipleSlots: true },
|
||||
options: { multipleSlots: true, addGlobalClass: true },
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
|
||||
@@ -1,61 +1,60 @@
|
||||
<view style="display: flex;align-items: center;margin-bottom: 12px;{{customStyle}}">
|
||||
<view style="flex: 1;margin-right: {{hideMore ? 0 : '12px'}};">
|
||||
<block wx:if="{{useInputSlot}}">
|
||||
<slot name='input' />
|
||||
</block>
|
||||
<block wx:else>
|
||||
<t-input
|
||||
wx:if="{{!hideInput}}"
|
||||
placeholder="{{placeholder || '请输入关键字'}}"
|
||||
clearable
|
||||
borderless
|
||||
bindchange="change"
|
||||
value="{{value || ''}}"
|
||||
data-key="{{dataKey}}"
|
||||
confirm-type="search"
|
||||
bind:clear="clear"
|
||||
custom-style="background:#f5f5f5;min-height: 34px;height:34px;padding: 0;"
|
||||
size="small"
|
||||
>
|
||||
<t-button
|
||||
name="search"
|
||||
slot="prefix-icon"
|
||||
size="small"
|
||||
theme="primary"
|
||||
bindtap="scanCode"
|
||||
icon="scan"
|
||||
/>
|
||||
<t-button
|
||||
slot="suffix-icon"
|
||||
bindtap="search"
|
||||
icon="search"
|
||||
theme="primary"
|
||||
size="small"
|
||||
/>
|
||||
</t-input>
|
||||
</block>
|
||||
</view>
|
||||
<t-button
|
||||
wx:if="{{!hideMore}}"
|
||||
bindtap="showSearch"
|
||||
theme="primary"
|
||||
size="small"
|
||||
>
|
||||
筛选
|
||||
</t-button>
|
||||
<view style="flex: 1;margin-right: {{hideMore ? 0 : '12px'}};">
|
||||
<block wx:if="{{useInputSlot}}">
|
||||
<slot name='input' />
|
||||
</block>
|
||||
<block wx:else>
|
||||
<t-input
|
||||
wx:if="{{!hideInput}}"
|
||||
placeholder="{{placeholder || '请输入关键字'}}"
|
||||
clearable
|
||||
borderless
|
||||
bindchange="change"
|
||||
value="{{value || ''}}"
|
||||
data-key="{{dataKey}}"
|
||||
confirm-type="search"
|
||||
bind:clear="clear"
|
||||
custom-style="background:#f5f5f5;min-height: var(--td-button-small-height,64rpx);height:var(--td-button-small-height,64rpx);padding: 0;"
|
||||
size="small"
|
||||
t-class="aaaaaa"
|
||||
>
|
||||
<t-button
|
||||
name="search"
|
||||
slot="prefix-icon"
|
||||
size="small"
|
||||
theme="primary"
|
||||
bindtap="scanCode"
|
||||
icon="scan"
|
||||
/>
|
||||
<t-button
|
||||
slot="suffix-icon"
|
||||
bindtap="search"
|
||||
icon="search"
|
||||
theme="primary"
|
||||
size="small"
|
||||
/>
|
||||
</t-input>
|
||||
</block>
|
||||
</view>
|
||||
<t-button
|
||||
wx:if="{{!hideMore}}"
|
||||
bindtap="showSearch"
|
||||
theme="primary"
|
||||
size="small"
|
||||
>筛选
|
||||
</t-button>
|
||||
</view>
|
||||
|
||||
<popup-plugin visible="{{ show }}" bind:close="close" title="筛选条件">
|
||||
<slot name='content' />
|
||||
<slot wx:if="{{useFooterSlot}}" name="footer" />
|
||||
<view wx:else style="padding: 12px 0;display: flex;justify-content: center;position: sticky;bottom: 0;left: 0;background-color: #fff;z-index: 1;">
|
||||
<t-button
|
||||
bindtap="ok"
|
||||
style="min-width: 80px;"
|
||||
size="small"
|
||||
theme="primary"
|
||||
>搜索
|
||||
</t-button>
|
||||
</view>
|
||||
<slot name='content' />
|
||||
<slot wx:if="{{useFooterSlot}}" name="footer" />
|
||||
<view wx:else style="padding: 12px 0;display: flex;justify-content: center;position: sticky;bottom: 0;left: 0;background-color: #fff;z-index: 1;">
|
||||
<t-button
|
||||
bindtap="ok"
|
||||
style="min-width: 80px;"
|
||||
size="small"
|
||||
theme="primary"
|
||||
>搜索
|
||||
</t-button>
|
||||
</view>
|
||||
</popup-plugin>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"usingComponents": {
|
||||
"popup-plugin": "/pages/components/popup-plugin/popup-plugin",
|
||||
"t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
|
||||
"t-radio": "tdesign-miniprogram/radio/radio",
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
|
||||
}
|
||||
|
||||
@@ -4,22 +4,10 @@ Component({
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
mode: {
|
||||
type: String,
|
||||
value: "single",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: "请选择",
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: [],
|
||||
},
|
||||
mode: { type: String, value: "single" },
|
||||
title: { type: String, value: "请选择" },
|
||||
options: { type: Array, value: [] },
|
||||
value: { type: null, value: [] },
|
||||
},
|
||||
observers: {
|
||||
"value,mode": function (v, m) {
|
||||
@@ -50,7 +38,8 @@ Component({
|
||||
this.setData({ visible: false });
|
||||
},
|
||||
radioChange(e: any) {
|
||||
this.setData({ val: e.detail.value });
|
||||
this.triggerEvent("change", { value: e.detail.value });
|
||||
this.setData({ val: e.detail.value, visible: false });
|
||||
},
|
||||
checkboxChange(e: any) {
|
||||
this.setData({ val: e.detail.value });
|
||||
|
||||
@@ -5,16 +5,30 @@
|
||||
|
||||
<popup-plugin visible="{{visible}}" bind:close="close" title="{{title}}">
|
||||
|
||||
<view>
|
||||
<view style="padding: 12px 0;">
|
||||
<t-radio-group
|
||||
wx:if="{{mode == 'single'}}"
|
||||
bind:change="radioChange"
|
||||
allow-uncheck
|
||||
value="{{val}}"
|
||||
options="{{options}}"
|
||||
/>
|
||||
<t-checkbox-group wx:else value="{{val}}" bind:change="checkboxChange">
|
||||
borderless
|
||||
>
|
||||
<t-radio
|
||||
wx:for="{{options}}"
|
||||
wx:key="index"
|
||||
value="{{item.value}}"
|
||||
style="padding-bottom: 6px;padding-top: 6px;"
|
||||
>{{item.label}}
|
||||
</t-radio>
|
||||
</t-radio-group>
|
||||
<t-checkbox-group
|
||||
wx:else
|
||||
value="{{val}}"
|
||||
bind:change="checkboxChange"
|
||||
borderless
|
||||
>
|
||||
<t-checkbox
|
||||
style="padding-bottom: 6px;padding-top: 6px;"
|
||||
wx:for="{{options}}"
|
||||
icon="rectangle"
|
||||
wx:key="index"
|
||||
@@ -23,7 +37,7 @@
|
||||
</t-checkbox>
|
||||
</t-checkbox-group>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="footer" wx:if="{{ mode == 'multiple' }}">
|
||||
<t-button size="small" theme="primary" bindtap="ok">确定</t-button>
|
||||
</view>
|
||||
</popup-plugin>
|
||||
|
||||
@@ -6,7 +6,7 @@ Component({
|
||||
properties: {
|
||||
active: {
|
||||
type: String,
|
||||
value: "home",
|
||||
value: "",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -15,7 +15,7 @@ Component({
|
||||
*/
|
||||
data: {
|
||||
list: [
|
||||
{ value: "home", label: "首页", icon: "home" },
|
||||
{ value: "index", label: "首页", icon: "home" },
|
||||
{ value: "scan", label: "扫码", icon: "scan" },
|
||||
{ value: "my", label: "我的", icon: "user" },
|
||||
],
|
||||
@@ -31,12 +31,9 @@ Component({
|
||||
*/
|
||||
methods: {
|
||||
onChange(e: any) {
|
||||
if (e.detail.value == this.data.active) {
|
||||
return;
|
||||
if (e.detail.value != this.data.active) {
|
||||
wx.reLaunch({ url: this.data.pages[e.detail.value] });
|
||||
}
|
||||
wx.reLaunch({
|
||||
url: this.data.pages[e.detail.value],
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
<t-tab-bar
|
||||
t-class="t-tab-bar"
|
||||
value="{{active}}"
|
||||
bindchange="onChange"
|
||||
theme="normal"
|
||||
fixed="{{true}}"
|
||||
split="{{false}}"
|
||||
>
|
||||
<t-tab-bar t-class="t-tab-bar" value="{{active}}" bindchange="onChange" theme="normal" fixed="{{true}}" split="{{false}}">
|
||||
<t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">
|
||||
{{item.label}}
|
||||
</t-tab-bar-item>
|
||||
</t-tab-bar>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user