joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 准备各个形状的 svg 图

Browse Source
This commit is contained in:
joey
2025-08-01 17:37:56 +08:00
parent 5ce211ee5a
commit d3c1a2fd78
12 changed files with 403 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/shape-card-v1/shape-card copy.less
+57
View File
@@ -0,0 +1,57 @@
.shape-card {
position: relative;
width: 300rpx;
height: 300rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 200rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 180rpx;
height: 180rpx;
}
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
}
}
miniprogram/components/shape-card-v1/shape-card.json
+7
View File
@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/components/shape-card-v1/shape-card.less
+58
View File
@@ -0,0 +1,58 @@
.shape-card {
position: relative;
width: 240rpx;
height: 240rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 120rpx;
height: 120rpx;
color: skyblue;
}
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
}
}
miniprogram/components/shape-card-v1/shape-card.ts
+36
View File
@@ -0,0 +1,36 @@
Component({
/**
* 组件的属性列表
*/
properties: {
key: {
type: Number,
value: 0,
},
img: {
type: String,
value: '',
},
name: {
type: String,
value: '',
},
color: {
type: String,
value: '',
},
},
/**
* 组件的方法列表
*/
methods: {
onDelete() {
const { key } = this.data;
this.triggerEvent('onDelete', { key });
},
onColorTap() {
const { key, color } = this.data;
this.triggerEvent('onColorTap', { key, color });
},
},
});
miniprogram/components/shape-card-v1/shape-card.wxml
+19
View File
@@ -0,0 +1,19 @@
<view class="shape-card">
<view class="shape-card-img-wrapper">
<image src="{{ img }}" class="shape-card-img" />
</view>
<view class="shape-card-footer">
<view
class="shape-card-footer-color"
style="background-color: {{ color }}"
bind:tap="onColorTap"></view>
<view class="shape-card-footer-name">{{ name }}</view>
</view>
<view class="delete-icon" bindtap="onDelete">
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon-inner"
size="48rpx" />
</view>
</view>
miniprogram/components/shape-card/shape-card.less
+29 -44
View File
@@ -1,58 +1,43 @@
.shape-card {
position: relative;
width: 240rpx;
height: 240rpx;
width: 186rpx;
// height: 260rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
border: 1rpx solid #e8e8e8;
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 0;
box-sizing: border-box;
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 120rpx;
height: 120rpx;
color: skyblue;
}
.shape-card-img {
width: 140rpx;
height: 140rpx;
display: block;
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.divider {
width: 150rpx;
height: 1rpx;
background-color: #ddd;
margin-block: 16rpx;
}
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
.shape-color {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
border: 1rpx solid #141414;
background-color: skyblue;
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
top: -16rpx;
right: -16rpx;
color: rgba(255, 0, 0);
}
}
miniprogram/components/shape-card/shape-card.ts
+41 -5
View File
@@ -7,11 +7,7 @@ Component({
type: Number,
value: 0,
},
img: {
type: String,
value: '',
},
name: {
svg: {
type: String,
value: '',
},
@@ -20,10 +16,50 @@ Component({
value: '',
},
},
/**
* 组件的初始数据
*/
data: {
svgDataUri: '',
},
/**
* 组件生命周期
*/
lifetimes: {
attached() {
this.generateSvgDataUri();
},
},
/**
* 监听属性变化
*/
observers: {
'svg, color': function () {
this.generateSvgDataUri();
}
},
/**
* 组件的方法列表
*/
methods: {
/**
* 生成完整的 SVG Data URI
*/
generateSvgDataUri() {
const { svg, color } = this.data;
if (!svg) return;
// 创建完整的 SVG 字符串，替换填充颜色
const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
// 转换为 Data URI
const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
this.setData({
svgDataUri: svgDataUri
});
},
onDelete() {
const { key } = this.data;
this.triggerEvent('onDelete', { key });
miniprogram/components/shape-card/shape-card.wxml
+12 -17
View File
@@ -1,19 +1,14 @@
<view class="shape-card">
<view class="shape-card-img-wrapper">
<image src="{{ img }}" class="shape-card-img" />
</view>
<view class="shape-card-footer">
<view
class="shape-card-footer-color"
style="background-color: {{ color }}"
bind:tap="onColorTap"></view>
<view class="shape-card-footer-name">{{ name }}</view>
</view>
<view class="delete-icon" bindtap="onDelete">
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon-inner"
size="48rpx" />
</view>
<image src="{{ svgDataUri }}" class="shape-card-img" mode="aspectFit" />
<view class="divider" />
<view
class="shape-color"
style="background-color: {{ color }}"
bind:tap="onColorTap" />
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon"
size="48rpx"
bind:tap="onDelete" />
</view>