v1.2.1版本,优化调整了很多,整改验收阶段新加字段
This commit is contained in:
@@ -26,29 +26,30 @@ const _sfc_main = {
|
||||
const emit = __emit;
|
||||
const formData = common_vendor.reactive({
|
||||
name: "",
|
||||
color: "#FF5733"
|
||||
color: "#D92121"
|
||||
});
|
||||
const presetColors = [
|
||||
"#2563eb",
|
||||
"#ef4444",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#6366f1",
|
||||
"#ec4899",
|
||||
"#06b6d4",
|
||||
"#84cc16",
|
||||
"#f97316",
|
||||
"#4f46e5",
|
||||
"#dc2626",
|
||||
"#f59e0b",
|
||||
"#d97706",
|
||||
"#8b5cf6",
|
||||
"#db2777"
|
||||
{ name: "红色", value: "#D92121" },
|
||||
{ name: "橙色", value: "#FF8822" },
|
||||
{ name: "黄色", value: "#FFCC00" },
|
||||
{ name: "蓝色", value: "#165DFF" }
|
||||
];
|
||||
const presetColorValues = presetColors.map((item) => item.value);
|
||||
const selectedColorLabel = common_vendor.computed(() => {
|
||||
const found = presetColors.find((item) => item.value === formData.color);
|
||||
return found ? `${found.name} ${found.value}` : formData.color;
|
||||
});
|
||||
const normalizeColor = (color) => {
|
||||
if (!color)
|
||||
return presetColors[0].value;
|
||||
const upper = String(color).toUpperCase();
|
||||
const matched = presetColorValues.find((v) => v.toUpperCase() === upper);
|
||||
return matched || presetColors[0].value;
|
||||
};
|
||||
common_vendor.watch(() => props.editData, (newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
formData.name = newVal.name || "";
|
||||
formData.color = newVal.color || "#FF5733";
|
||||
formData.color = normalizeColor(newVal.color);
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
common_vendor.watch(() => props.visible, (newVal) => {
|
||||
@@ -61,7 +62,7 @@ const _sfc_main = {
|
||||
};
|
||||
const resetForm = () => {
|
||||
formData.name = "";
|
||||
formData.color = "#FF5733";
|
||||
formData.color = "#D92121";
|
||||
};
|
||||
const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
@@ -72,8 +73,8 @@ const _sfc_main = {
|
||||
common_vendor.index.showToast({ title: "请输入区域名称", icon: "none" });
|
||||
return;
|
||||
}
|
||||
if (!formData.color) {
|
||||
common_vendor.index.showToast({ title: "请选择区域颜色", icon: "none" });
|
||||
if (!presetColorValues.includes(formData.color)) {
|
||||
common_vendor.index.showToast({ title: "请从预设颜色中选择", icon: "none" });
|
||||
return;
|
||||
}
|
||||
emit("submit", {
|
||||
@@ -90,23 +91,23 @@ const _sfc_main = {
|
||||
d: formData.name,
|
||||
e: common_vendor.o(($event) => formData.name = $event.detail.value),
|
||||
f: formData.color,
|
||||
g: common_vendor.o(($event) => formData.color = $event.detail.value),
|
||||
h: formData.color,
|
||||
i: common_vendor.f(presetColors, (color, index, i0) => {
|
||||
g: common_vendor.t(selectedColorLabel.value),
|
||||
h: common_vendor.f(presetColors, (item, k0, i0) => {
|
||||
return {
|
||||
a: color + index,
|
||||
b: formData.color === color ? 1 : "",
|
||||
c: color,
|
||||
d: common_vendor.o(($event) => selectColor(color), color + index)
|
||||
a: formData.color === item.value ? 1 : "",
|
||||
b: item.value,
|
||||
c: common_vendor.t(item.name),
|
||||
d: item.value,
|
||||
e: common_vendor.o(($event) => selectColor(item.value), item.value)
|
||||
};
|
||||
}),
|
||||
j: common_vendor.o(handleClose),
|
||||
k: common_vendor.o(handleSubmit),
|
||||
l: __props.loading,
|
||||
m: common_vendor.o(() => {
|
||||
i: common_vendor.o(handleClose),
|
||||
j: common_vendor.o(handleSubmit),
|
||||
k: __props.loading,
|
||||
l: common_vendor.o(() => {
|
||||
}),
|
||||
n: common_vendor.o(handleClose),
|
||||
o: common_vendor.gei(_ctx, "")
|
||||
m: common_vendor.o(handleClose),
|
||||
n: common_vendor.gei(_ctx, "")
|
||||
} : {});
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
<view wx:if="{{a}}" bindtap="{{n}}" class="{{['popup-mask', 'data-v-fbf56c15', virtualHostClass]}}" style="{{virtualHostStyle}}" hidden="{{virtualHostHidden || false}}" id="{{o}}"><view class="popup-content data-v-fbf56c15" catchtap="{{m}}"><view class="popup-header data-v-fbf56c15"><view class="popup-title text-bold data-v-fbf56c15">{{b}}</view><view class="popup-close data-v-fbf56c15" bindtap="{{c}}">×</view></view><view class="popup-body data-v-fbf56c15"><view class="flex margin-bottom-sm data-v-fbf56c15"><view class="data-v-fbf56c15">区域名称</view><view class="text-red data-v-fbf56c15">*</view></view><input class="form-input data-v-fbf56c15" placeholder="请输入区域名称" value="{{d}}" bindinput="{{e}}"/><view class="flex margin-bottom-sm margin-top data-v-fbf56c15"><view class="data-v-fbf56c15">区域颜色</view><view class="text-red data-v-fbf56c15">*</view></view><view class="flex align-center data-v-fbf56c15"><input class="color-input flex-sub data-v-fbf56c15" placeholder="#FF5733" value="{{f}}" bindinput="{{g}}"/><view class="color-preview data-v-fbf56c15" style="{{'background-color:' + h}}"></view></view><view class="margin-top margin-bottom-sm text-gray data-v-fbf56c15">预设颜色</view><view class="color-grid data-v-fbf56c15"><view wx:for="{{i}}" wx:for-item="color" wx:key="a" class="{{['color-item', 'data-v-fbf56c15', color.b && 'color-item-active']}}" style="{{'background-color:' + color.c}}" bindtap="{{color.d}}"></view></view></view><view class="popup-footer data-v-fbf56c15"><button class="btn-cancel data-v-fbf56c15" bindtap="{{j}}">取消</button><button class="btn-confirm bg-blue data-v-fbf56c15" bindtap="{{k}}" loading="{{l}}">确定</button></view></view></view>
|
||||
<view wx:if="{{a}}" bindtap="{{m}}" class="{{['popup-mask', 'data-v-fbf56c15', virtualHostClass]}}" style="{{virtualHostStyle}}" hidden="{{virtualHostHidden || false}}" id="{{n}}"><view class="popup-content data-v-fbf56c15" catchtap="{{l}}"><view class="popup-header data-v-fbf56c15"><view class="popup-title text-bold data-v-fbf56c15">{{b}}</view><view class="popup-close data-v-fbf56c15" bindtap="{{c}}">×</view></view><view class="popup-body data-v-fbf56c15"><view class="flex margin-bottom-sm data-v-fbf56c15"><view class="data-v-fbf56c15">区域名称</view><view class="text-red data-v-fbf56c15">*</view></view><input class="form-input data-v-fbf56c15" placeholder="请输入区域名称" value="{{d}}" bindinput="{{e}}"/><view class="flex margin-bottom-sm margin-top data-v-fbf56c15"><view class="data-v-fbf56c15">区域颜色</view><view class="text-red data-v-fbf56c15">*</view></view><view class="flex align-center margin-bottom-sm data-v-fbf56c15"><view class="color-preview data-v-fbf56c15" style="{{'background-color:' + f}}"></view><text class="margin-left-sm text-gray data-v-fbf56c15">{{g}}</text></view><view class="margin-bottom-sm text-gray data-v-fbf56c15">请选择颜色</view><view class="color-grid data-v-fbf56c15"><view wx:for="{{h}}" wx:for-item="item" wx:key="d" class="color-option data-v-fbf56c15" bindtap="{{item.e}}"><view class="{{['color-item', 'data-v-fbf56c15', item.a && 'color-item-active']}}" style="{{'background-color:' + item.b}}"></view><text class="color-label data-v-fbf56c15">{{item.c}}</text></view></view></view><view class="popup-footer data-v-fbf56c15"><button class="btn-cancel data-v-fbf56c15" bindtap="{{i}}">取消</button><button class="btn-confirm bg-blue data-v-fbf56c15" bindtap="{{j}}" loading="{{k}}">确定</button></view></view></view>
|
||||
@@ -90,34 +90,38 @@
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.color-input.data-v-fbf56c15 {
|
||||
height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid #dadbde;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.color-preview.data-v-fbf56c15 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
}
|
||||
.color-grid.data-v-fbf56c15 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx 0;
|
||||
}
|
||||
.color-option.data-v-fbf56c15 {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.color-item.data-v-fbf56c15 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 4rpx solid transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.color-label.data-v-fbf56c15 {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.color-item-active.data-v-fbf56c15 {
|
||||
border-color: #333;
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
Reference in New Issue
Block a user