feat: 选择文字
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
.word-picker {
|
||||
padding: 28rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.word-picker-title {
|
||||
font-size: 32rpx;
|
||||
@@ -9,4 +10,70 @@
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.nav-class {
|
||||
// background-color: red;
|
||||
// width: 890rpx;
|
||||
}
|
||||
|
||||
.tab-class {
|
||||
// width: 220rpx;
|
||||
// flex-basis: auto !important;
|
||||
// display: inline-block;
|
||||
}
|
||||
|
||||
.tab-active-class {
|
||||
color: #93d333;
|
||||
}
|
||||
|
||||
.wrap-class {
|
||||
margin-bottom: 28rpx;
|
||||
// background-color: blue;
|
||||
}
|
||||
|
||||
.word-list-wrapper {
|
||||
padding: 28rpx 0;
|
||||
overflow-y: auto;
|
||||
height: 500rpx;
|
||||
|
||||
.word-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 72rpx);
|
||||
grid-template-rows: repeat(20, 72rpx);
|
||||
gap: 24rpx;
|
||||
justify-content: center;
|
||||
// box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
|
||||
// align-items: flex-start;
|
||||
|
||||
.word-item {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(240, 240, 240, 1);
|
||||
box-shadow: 3.9px 3.9px 5.2px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #141414;
|
||||
}
|
||||
}
|
||||
|
||||
.word-item-empty {
|
||||
height: 28rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.selected-words {
|
||||
padding: 28rpx;
|
||||
font-size: 28rpx;
|
||||
color: #141414;
|
||||
|
||||
.selected-words-text {
|
||||
font-weight: bold;
|
||||
color: #93d333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -23,7 +23,12 @@ Component({
|
||||
selectedWords: [],
|
||||
},
|
||||
lifetimes: {
|
||||
attached() { },
|
||||
ready() {
|
||||
// setTimeout(() => {
|
||||
// console.log('111');
|
||||
// this.selectComponent('#tabs').resize();
|
||||
// }, 1000);
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
|
||||
@@ -3,15 +3,20 @@
|
||||
bind:close="onClose"
|
||||
round
|
||||
position="bottom"
|
||||
custom-style="height: 60%"
|
||||
custom-style="height: 65%"
|
||||
custom-class="word-picker">
|
||||
<view class="word-picker-title">请选择文字</view>
|
||||
<van-tabs
|
||||
id="tabs"
|
||||
animated
|
||||
color="#ff1a34"
|
||||
color="#93d333"
|
||||
ellipsis="{{false}}"
|
||||
line-width="90rpx"
|
||||
nav-class="nav-class"
|
||||
tab-class="tab-class"
|
||||
wrap-class="wrap-class"
|
||||
swipeable
|
||||
tab-active-class="tab-active-class"
|
||||
swipeable="{{true}}"
|
||||
active="{{currentTab}}"
|
||||
bind:change="onTabChange">
|
||||
<van-tab
|
||||
@@ -19,20 +24,24 @@
|
||||
wx:for-index="wordIndex"
|
||||
wx:key="wordIndex"
|
||||
title="{{wordList[wordIndex].categoryName}}">
|
||||
<view class="word-list-wrapper">
|
||||
<view class="word-list">
|
||||
<view
|
||||
class="word-item"
|
||||
wx:for="{{wordList[wordIndex].words}}"
|
||||
wx:key="index"
|
||||
data-word="{{item}}"
|
||||
bind:tap="onWordClick">
|
||||
<text class="word-item-text">{{item}}</text>
|
||||
<!-- <text class="word-item-icon icon-success"></text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="word-item-empty"></view>
|
||||
</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<view class="selected-words">
|
||||
<text class="selected-words-title">已选文字：</text>
|
||||
已选文字：
|
||||
<text
|
||||
class="selected-word-text"
|
||||
wx:for="{{selectedWords}}"
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"word-card": "../../components/word-card/word-card",
|
||||
"color-picker": "../../components/color-picker/color-picker",
|
||||
"introduction-popup": "../../components/introduction-popup/introduction-popup",
|
||||
"toy-button": "../../ui/button/button"
|
||||
"toy-button": "../../ui/button/button",
|
||||
"word-picker": "../../components/word-picker/word-picker"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ page {
|
||||
}
|
||||
}
|
||||
|
||||
.setting-wrapper {
|
||||
.wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
@@ -15,6 +15,8 @@ Page({
|
||||
currentKey: 0,
|
||||
currentColor: '',
|
||||
showIntroductionPopup: false,
|
||||
showSelectWordPopup: false, // 选择文字弹窗
|
||||
selectedWords: [] as string[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -287,5 +289,21 @@ Page({
|
||||
}));
|
||||
console.log('cardList:', cardList);
|
||||
this.drawCanvas(cardList);
|
||||
}
|
||||
},
|
||||
openSelectWordPopup() {
|
||||
this.setData({
|
||||
showSelectWordPopup: true,
|
||||
});
|
||||
},
|
||||
closeSelectWordPopup() {
|
||||
this.setData({
|
||||
showSelectWordPopup: false,
|
||||
});
|
||||
},
|
||||
onSelectWord(e: WechatMiniprogram.CustomEvent) {
|
||||
const { words } = e.detail;
|
||||
this.setData({
|
||||
selectedWords: words,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<view class="page-container">
|
||||
<view class="setting-wrapper">
|
||||
<view class="wrapper">
|
||||
<text class="wrapper-title">自定义涂鸦卡</text>
|
||||
<view class="word-input-box">
|
||||
<word-input bind:onConfirm="onConfirmInput" width="420rpx" />
|
||||
@@ -58,11 +58,11 @@
|
||||
class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
|
||||
<text class="wrapper-title">预览打印效果</text>
|
||||
<view id="canvasWrapper" class="canvas-wrapper">
|
||||
<canvas
|
||||
<!-- <canvas
|
||||
type="2d"
|
||||
id="canvasContent"
|
||||
class="canvas-content"
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" /> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty"></view>
|
||||
@@ -71,6 +71,10 @@
|
||||
currentColor="{{currentColor}}"
|
||||
bind:onClose="onCloseColorPopup"
|
||||
bind:onChange="onChangeColor" />
|
||||
<word-picker
|
||||
show="{{showSelectWordPopup}}"
|
||||
bind:onClose="closeSelectWordPopup"
|
||||
bind:onSelect="onSelectWord" />
|
||||
</view>
|
||||
<view class="btn-area">
|
||||
<toy-button
|
||||
|
||||
@@ -42,7 +42,7 @@ wx-button:not([size=mini]) {
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: rgb(147, 211, 51);
|
||||
background: #93d333;
|
||||
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
|
||||
|
||||
&.disabled {
|
||||
|
||||
Reference in New Issue
Block a user