多商户新增组件

src/components/common/img-or-icon-or-text/img-or-icon-or-text-style.vue

@@ -0,0 +1,60 @@
+<template>
+    <card-container class="card-container">
+        <el-form-item label="背景">
+            <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+        </el-form-item>
+        <el-form-item label="大小">
+            <template v-if="type == 'text' || (type == 'img-icon' && isIcon)">
+                <color-text-size-group v-model:color="form.color" v-model:size="form.size" :default-color="form.color" :slider-name="type == 'text' ? '字号' : '大小'" :type-list="['color', 'size']"></color-text-size-group>
+            </template>
+            <template v-else>
+                <div class="flex-col w gap-10">
+                    <el-form-item label="宽度" label-width="40" class="form-item-child-label">
+                        <slider v-model="form.img_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="高度" label-width="40" class="form-item-child-label">
+                        <slider v-model="form.img_height" :max="1000"></slider>
+                    </el-form-item>
+                </div>
+            </template>
+        </el-form-item>
+        <el-form-item label="内间距">
+            <padding :value="form"></padding>
+        </el-form-item>
+        <el-form-item label="内容圆角">
+            <radius :value="form"></radius>
+        </el-form-item>
+    </card-container>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    type: {
+        type: String,
+        default: '',
+    },
+    isIcon: {
+        type: Boolean,
+        default: false,
+    }
+});
+const form = ref(props.value);
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.color_list = arry;
+    form.value.direction = type;
+};
+// 监听数据变化
+watch(() => props.value, (new_value) => {
+    form.value = new_value;
+}, { deep: true, immediate: true });
+</script>
+
+<style scoped lang="scss">
+.card-container {
+    padding: 0 !important;
+}
+</style>

src/components/common/img-or-icon-or-text/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div v-if="form[`is_${ type }_show`] == '1'" :style="corner_marker">
+        <div class="flex-row nowrap oh" :style="corner_img_marker">
+            <template v-if="form[`${ type }_type`] == 'img-icon'">
+                <template v-if="!isEmpty(form[`${ type }_img`])">
+                    <image-empty v-model="form[`${ type }_img`][0]" :style="img_style"></image-empty>
+                </template>
+                <template v-else>
+                    <icon :name="form[`${ type }_icon`]" :size="new_type_size + ''" :color="new_type_color"></icon>
+                </template>
+            </template>
+            <template v-else>
+                <span class="text-line-1" :style="`font-size: ${ new_type_size }px;color: ${ new_type_color };`">{{ form[`${ type }_text`] }}</span>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty } from 'lodash'
+import { common_styles_computer, padding_computer } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+    type: {
+        type: String,
+        default: '',
+    },
+});
+
+const form = computed(() => props.value?.content || {});
+const new_style = computed(() => props.value?.style || {});
+// 取出某一个对应的数据信息
+const new_type_style = computed(() => new_style.value[`${ props.type }_style`] || {} );
+// 取出对应的大小显示
+const new_type_size = computed(() => new_type_style.value?.size || 0 );
+const new_type_color = computed(() => new_type_style.value?.color || '' );
+//#region 大小设置
+const corner_marker = computed(() => common_styles_computer(new_type_style.value));
+const corner_img_marker = computed(() => padding_computer(new_type_style.value));
+// 图片设置
+const img_style = computed(() => `height: ${ new_type_style.value.img_height }px; width: ${ new_type_style.value.img_width }px`);
+//#endregion
+</script>
+
+<style lang="scss" scoped>
+.max-width {
+    max-width: 100%;
+}
+</style>