feat:架构代码优化
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"toy-button": "../../../../ui/button/button"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.bottom-btn-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
|
||||
padding: 24rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
Component({
|
||||
properties: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onShare() {
|
||||
this.triggerEvent('share');
|
||||
},
|
||||
|
||||
onExport() {
|
||||
this.triggerEvent('export');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
<view class="bottom-btn-box">
|
||||
<toy-button
|
||||
openType="share"
|
||||
type="green"
|
||||
flat="{{true}}"
|
||||
bind:click="onShare"
|
||||
width="220rpx"
|
||||
height="80rpx"
|
||||
icon="wechat"
|
||||
icon-class-prefix="toy-icon">
|
||||
分享
|
||||
</toy-button>
|
||||
<toy-button
|
||||
type="primary"
|
||||
flat="{{true}}"
|
||||
bind:click="onExport"
|
||||
width="420rpx"
|
||||
height="80rpx"
|
||||
disabled="{{disabled}}"
|
||||
icon="download"
|
||||
icon-class-prefix="toy-icon">
|
||||
下载打印
|
||||
</toy-button>
|
||||
</view>
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"toy-button": "../../../../ui/button/button",
|
||||
"van-action-sheet": "../../../../miniprogram_npm/@vant/weapp/action-sheet/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.random-button-area {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.type-selector {
|
||||
flex: 1; // 占据剩余空间
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.type-selector-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.type-selector-arrow {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.random-button {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
Component({
|
||||
properties: {
|
||||
currentTypeName: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
typeActions: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
showSelector: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onShowSelector() {
|
||||
this.setData({ showSelector: true });
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ showSelector: false });
|
||||
},
|
||||
|
||||
onSelect(event: any) {
|
||||
const { name, value } = event.detail;
|
||||
this.setData({ showSelector: false });
|
||||
this.triggerEvent('select', { name, value });
|
||||
},
|
||||
|
||||
onRandom() {
|
||||
this.triggerEvent('random');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
<view class="random-button-area">
|
||||
<view class="type-selector" bind:tap="onShowSelector">
|
||||
<text class="type-selector-text">{{currentTypeName}}</text>
|
||||
<text class="type-selector-arrow">▼</text>
|
||||
</view>
|
||||
<toy-button
|
||||
class="random-button"
|
||||
type="primary"
|
||||
bind:click="onRandom"
|
||||
width="100%"
|
||||
height="80rpx"
|
||||
icon="refresh"
|
||||
icon-class-prefix="toy-icon">
|
||||
随机生成
|
||||
</toy-button>
|
||||
</view>
|
||||
<van-action-sheet
|
||||
show="{{showSelector}}"
|
||||
actions="{{typeActions}}"
|
||||
bind:select="onSelect"
|
||||
bind:cancel="onClose"
|
||||
bind:close="onClose"
|
||||
cancel-text="取消" />
|
||||
Reference in New Issue
Block a user