feat:代码优化
This commit is contained in:
R524809
@@ -5,8 +5,8 @@
|
||||
"backgroundColor": "#F6F6F6",
|
||||
"enablePullDownRefresh": false,
|
||||
"usingComponents": {
|
||||
"toy-button": "../../ui/button/button",
|
||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||
"van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index"
|
||||
"math-type-selector": "../components/math-type-selector/math-type-selector",
|
||||
"math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,101 +1 @@
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #f6f6f6;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 160rpx; // 为底部按钮预留空间
|
||||
|
||||
.empty {
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 36rpx 24rpx;
|
||||
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.wrapper-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
margin-bottom: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx dashed #dee2e6;
|
||||
}
|
||||
|
||||
.canvas-content {
|
||||
max-width: 100%;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部按钮区域 */
|
||||
.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;
|
||||
}
|
||||
@import '../common/mathPage.less';
|
||||
@@ -27,7 +27,6 @@ Page({
|
||||
functionId: '',
|
||||
hasContent: false,
|
||||
showShareDialog: false,
|
||||
showTypeSelector: false,
|
||||
currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10'
|
||||
currentTypeName: '5以内加法',
|
||||
typeActions: [
|
||||
@@ -274,23 +273,12 @@ Page({
|
||||
}
|
||||
},
|
||||
|
||||
/** 显示类型选择器 */
|
||||
onShowTypeSelector() {
|
||||
this.setData({ showTypeSelector: true });
|
||||
},
|
||||
|
||||
/** 关闭类型选择器 */
|
||||
onCloseTypeSelector() {
|
||||
this.setData({ showTypeSelector: false });
|
||||
},
|
||||
|
||||
/** 选择类型 */
|
||||
onSelectType(event: any) {
|
||||
const { name, value } = event.detail;
|
||||
this.setData({
|
||||
currentType: value,
|
||||
currentTypeName: name,
|
||||
showTypeSelector: false,
|
||||
});
|
||||
// 重新生成数据
|
||||
this.onRandom();
|
||||
|
||||
@@ -11,58 +11,19 @@
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||
</view>
|
||||
|
||||
<!-- 随机生成按钮 -->
|
||||
<view class="random-button-area">
|
||||
<view class="type-selector" bind:tap="onShowTypeSelector">
|
||||
<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="{{showTypeSelector}}"
|
||||
actions="{{typeActions}}"
|
||||
<!-- 类型选择器和随机生成按钮 -->
|
||||
<math-type-selector
|
||||
current-type-name="{{currentTypeName}}"
|
||||
type-actions="{{typeActions}}"
|
||||
bind:select="onSelectType"
|
||||
bind:cancel="onCloseTypeSelector"
|
||||
bind:close="onCloseTypeSelector"
|
||||
cancel-text="取消"
|
||||
custom-class="custom-action-sheet" />
|
||||
bind:random="onRandom" />
|
||||
</view>
|
||||
<view class="empty"></view>
|
||||
</view>
|
||||
<view class="bottom-btn-box">
|
||||
<toy-button
|
||||
openType="share"
|
||||
type="green"
|
||||
flat="{{true}}"
|
||||
bind:click="onShareAppMessage"
|
||||
width="220rpx"
|
||||
height="80rpx"
|
||||
icon="wechat"
|
||||
icon-class-prefix="toy-icon">
|
||||
分享
|
||||
</toy-button>
|
||||
<toy-button
|
||||
type="primary"
|
||||
flat="{{true}}"
|
||||
bind:click="exportToPrint"
|
||||
width="420rpx"
|
||||
height="80rpx"
|
||||
disabled="{{!hasContent}}"
|
||||
icon="download"
|
||||
icon-class-prefix="toy-icon">
|
||||
下载打印
|
||||
</toy-button>
|
||||
</view>
|
||||
<math-bottom-buttons
|
||||
disabled="{{!hasContent}}"
|
||||
bind:share="onShareAppMessage"
|
||||
bind:export="exportToPrint" />
|
||||
<share-guide-popup
|
||||
show="{{showShareDialog}}"
|
||||
bind:onClose="onCloseShareDialog"
|
||||
|
||||
Reference in New Issue
Block a user