feat:完成颜色选择器和button组件
This commit is contained in:
@@ -6,7 +6,10 @@
|
||||
"enablePullDownRefresh": false,
|
||||
"usingComponents": {
|
||||
"van-icon": "@vant/weapp/icon/index",
|
||||
"van-popup": "@vant/weapp/popup/index",
|
||||
"word-input": "../../components/word-input/word-input",
|
||||
"word-card": "../../components/word-card/word-card"
|
||||
"word-card": "../../components/word-card/word-card",
|
||||
"color-picker": "../../components/color-picker/color-picker",
|
||||
"toy-button": "../../ui/button/button"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,9 +67,12 @@ page {
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
|
||||
|
||||
/* .btn-green {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -86,4 +89,78 @@ page {
|
||||
.btn-text {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: rgba(147, 211, 51, 0.5);
|
||||
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/* .color-picker-popup {
|
||||
border-radius: 20rpx;
|
||||
|
||||
.color-picker-container {
|
||||
width: 642rpx;
|
||||
// height: 876rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 36rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
.color-picker-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.color-options-title {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.color-options-title-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 0 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.color-options-title-line {
|
||||
margin: 0 14rpx;
|
||||
height: 1rpx;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.color-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.color-option {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 6rpx;
|
||||
margin: 14rpx;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1rpx solid #ccc;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
@@ -10,6 +10,10 @@ Page({
|
||||
|
||||
data: {
|
||||
cardList: [] as Array<{ color: string; word: string }>,
|
||||
showColorPopup: false,
|
||||
currentKey: 0,
|
||||
currentColor: '',
|
||||
WATER_COLORS: WATER_COLORS,
|
||||
},
|
||||
|
||||
onReady() {
|
||||
@@ -126,7 +130,7 @@ Page({
|
||||
/** 下载打印 */
|
||||
exportToPrint() {
|
||||
console.log('this.canvas:', this.canvas);
|
||||
if (this.canvas) {
|
||||
if (this.canvas && this.data.cardList.length > 0) {
|
||||
wx.canvasToTempFilePath({
|
||||
canvas: this.canvas,
|
||||
fileType: 'png',
|
||||
@@ -150,4 +154,34 @@ Page({
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
onColorTap(e: WechatMiniprogram.CustomEvent) {
|
||||
const { key, word, color } = e.detail;
|
||||
console.log('onColorTap key:', key, 'word:', word, 'color:', color);
|
||||
this.setData({
|
||||
showColorPopup: true,
|
||||
currentKey: key,
|
||||
currentColor: color,
|
||||
});
|
||||
// const { cardList } = this.data;
|
||||
// const updatedCardList = cardList.map((item, index) =>
|
||||
// index === key ? { ...item, color } : item,
|
||||
// );
|
||||
// this.setData({ cardList: updatedCardList });
|
||||
// wx.showToast({
|
||||
// title: `已更改 "${word}" 的颜色`,
|
||||
// icon: 'none',
|
||||
// duration: 2000,
|
||||
// });
|
||||
// // this.renderCanvas();
|
||||
// this.textDrawService?.draw(updatedCardList);
|
||||
},
|
||||
|
||||
onCloseColorPopup() {
|
||||
this.setData({
|
||||
showColorPopup: false,
|
||||
currentKey: 0,
|
||||
currentColor: '',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -12,13 +12,15 @@
|
||||
key="{{index}}"
|
||||
word="{{item.word}}"
|
||||
color="{{item.color}}"
|
||||
bind:onDelete="deleteWordCard" />
|
||||
bind:onDelete="deleteWordCard"
|
||||
bind:onColorTap="onColorTap" />
|
||||
<word-card
|
||||
wx:if="{{cardList[index + 1]}}"
|
||||
key="{{index + 1}}"
|
||||
word="{{cardList[index + 1].word}}"
|
||||
color="{{cardList[index + 1].color}}"
|
||||
bind:onDelete="deleteWordCard" />
|
||||
bind:onDelete="deleteWordCard"
|
||||
bind:onColorTap="onColorTap" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
@@ -36,10 +38,59 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty"></view>
|
||||
<color-picker
|
||||
show="{{showColorPopup}}"
|
||||
currentColor="{{currentColor}}"
|
||||
bind:onClose="onCloseColorPopup" />
|
||||
<!-- <van-popup
|
||||
show="{{ showColorPopup }}"
|
||||
bind:close="onClose"
|
||||
custom-class="color-picker-popup">
|
||||
<view class="color-picker-container">
|
||||
<text class="color-picker-title">选择颜色</text>
|
||||
<view class="color-options-title">
|
||||
<text class="color-options-title-text">基础12色</text>
|
||||
<view class="color-options-title-line"></view>
|
||||
</view>
|
||||
<view class="color-options">
|
||||
<block wx:for="{{WATER_COLORS.basic12}}" wx:key="index">
|
||||
<view
|
||||
class="color-option"
|
||||
style="background-color: {{item.hex}};"
|
||||
bindtap="onSelectColor"
|
||||
data-color="{{item.hex}}"></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="color-options-title">
|
||||
<text class="color-options-title-text">扩展24色</text>
|
||||
<view class="color-options-title-line"></view>
|
||||
</view>
|
||||
<view class="color-options">
|
||||
<block wx:for="{{WATER_COLORS.extended24}}" wx:key="index">
|
||||
<view
|
||||
class="color-option"
|
||||
style="background-color: {{item.hex}};"
|
||||
bindtap="onSelectColor"
|
||||
data-color="{{item.hex}}"></view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup> -->
|
||||
</view>
|
||||
<view class="btn-area">
|
||||
<view class="btn btn-green" bindtap="exportToPrint">
|
||||
<!-- <view
|
||||
class="btn btn-green {{cardList.length > 0 ? '' : 'disabled'}}"
|
||||
bindtap="exportToPrint">
|
||||
<van-icon class-prefix="j-icon" name="download" size="44rpx" />
|
||||
<text class="btn-text">下载打印</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<toy-button
|
||||
type="green"
|
||||
bind:click="exportToPrint"
|
||||
width="680rpx"
|
||||
disabled="{{cardList.length <= 0}}"
|
||||
icon="download"
|
||||
icon-class-prefix="j-icon">
|
||||
下载打印
|
||||
</toy-button>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user