feat:完成颜色选择器和button组件

2025-06-10 17:32:08 +08:00
parent 13a0afe97e
commit efa213bfe1
14 changed files with 515 additions and 17 deletions
@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "styleIsolation": "isolated",
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "toy-button": "/ui/button/button"
+    }
+}
@@ -0,0 +1,103 @@
+.color-picker-popup {
+    border-radius: 20rpx;
+
+    .color-picker-container {
+        width: 642rpx;
+        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: 10rpx;
+                margin: 14rpx;
+                display: inline-block;
+                cursor: pointer;
+                border: 1rpx solid #ccc;
+                box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+                transition: all 0.2s ease;
+
+                &.selected {
+                    // border: 1px solid rgba(10, 111, 252, 1);
+                    transform: scale(1.2);
+                    // border: 1px solid #0A6FFC;
+                    border: 1px solid #4096ff;
+                    // box-shadow: 0px 0px 1px 2px rgba(0, 145, 255, 0.1);
+                    box-shadow: 0 0 6rpx 6rpx rgba(5, 145, 255, 0.1);
+                }
+            }
+        }
+    }
+}
+
+.btn-area {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10rpx 24rpx;
+}
+
+// .btn-yellow {
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     height: 86rpx;
+//     width: 400rpx;
+//     border-radius: 18rpx;
+//     background: rgba(255, 215, 25, 1);
+//     box-shadow: 0px 10rpx 4rpx #DBB917;
+//     font-size: 32rpx;
+//     font-weight: bold;
+//     color: #fff;
+
+//     &.disabled {
+//         background: rgba(255, 215, 25, 0.5);
+//         box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
+//     }
+// }
@@ -0,0 +1,44 @@
+import { WATER_COLORS } from '../../constants/index';
+
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+        currentColor: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        WATER_COLORS: WATER_COLORS,
+    },
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+
+        onSelectColor(e: WechatMiniprogram.TouchEvent) {
+            const { color } = e.currentTarget.dataset;
+            console.log('Selected color:', color);
+            this.setData({
+                currentColor: color,
+            });
+            this.triggerEvent('onSelectColor', { color });
+        },
+    },
+});
@@ -0,0 +1,40 @@
+<van-popup
+    show="{{ show }}"
+    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 {{item.hex === currentColor ? 'selected' : ''}}"
+                    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 {{item.hex === currentColor ? 'selected' : ''}}"
+                    style="background-color: {{item.hex}};"
+                    bindtap="onSelectColor"
+                    data-color="{{item.hex}}"></view>
+            </block>
+        </view>
+        <view class="btn-area">
+            <!-- <view class="btn-yellow">确认选择</view> -->
+            <toy-button type="primary" bind:click="" width="400rpx">
+                确认选择
+            </toy-button>
+        </view>
+    </view>
+</van-popup>
@@ -37,5 +37,10 @@ Component({
            const { key, word } = this.data;
            this.triggerEvent('onDelete', { key, word });
        },
+
+        onColorTap() {
+            const { color, key, word } = this.data;
+            this.triggerEvent('onColorTap', { key, word, color });
+        },
    },
 });
@@ -1,5 +1,8 @@
 <view class="word-card">
-    <view class="color-box" style="background-color: {{color}};"></view>
+    <view
+        class="color-box"
+        style="background-color: {{color}};"
+        bindtap="onColorTap"></view>
    <view class="word-box border-1px">
        <text class="word-content">{{word}}</text>
    </view>