From f03e3b47820c38a95bbeca94b784b9ea4e78c508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 13 Aug 2024 16:19:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/layout/siderbar/data-magic.png     | Bin 0 -> 2968 bytes
 .../components/tabs-content.vue               |  99 ++++++++++++++++++
 .../components/tabs-styles.vue                |  43 ++++++++
 3 files changed, 142 insertions(+)
 create mode 100644 src/assets/images/layout/siderbar/data-magic.png
 create mode 100644 src/components/model-data-magic/components/tabs-content.vue
 create mode 100644 src/components/model-data-magic/components/tabs-styles.vue

diff --git a/src/assets/images/layout/siderbar/data-magic.png b/src/assets/images/layout/siderbar/data-magic.png
new file mode 100644
index 0000000000000000000000000000000000000000..f874169a76847fce5958b1d7ec068624c0b9a05c
GIT binary patch
literal 2968
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
O0000<MNUMnLSTYvE2($@

literal 0
HcmV?d00001

diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
new file mode 100644
index 00000000..5fc1c2a5
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -0,0 +1,99 @@
+<template>
+    <card-container class="mb-8">
+        <el-form-item label="数据类型">
+            <el-radio-group v-model="form.display_location" class="ml-4">
+                <el-radio value="img">图片</el-radio>
+                <el-radio value="commodity">商品</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="主标题">
+            <el-input placeholder="请输入主标题"></el-input>
+        </el-form-item>
+        <el-form-item label="副标题">
+            <el-input placeholder="请输入副标题"></el-input>
+        </el-form-item>
+    </card-container>
+    <card-container v-if="form.display_location == 'img'" class="mb-8">
+        <div class="mb-12">图片设置</div>
+        <div class="flex-col gap-20">
+            <div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
+                <div class="flex-col align-c jc-c gap-20 w">
+                    <div class="upload_style">
+                        <upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
+                    </div>
+                    <el-form-item label="图片链接" class="w mb-16">
+                        <url-value v-model="item.carousel_link"></url-value>
+                    </el-form-item>
+                </div>
+                <el-icon class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="img_remove(index)" />
+            </div>
+        </div>
+        <el-button class="mt-20 mb-20 w" @click="img_add">+添加</el-button>
+    </card-container>
+    <card-container v-else class="mb-8">
+        <div class="mb-12">商品设置</div>
+        <drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
+            <template #default="{ row }">
+                <upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
+                <el-image :src="row.url" fit="contain" class="img">
+                    <template #error>
+                        <div class="bg-f5 flex-row jc-c align-c radius h w">
+                            <icon name="error-img" size="16" color="9"></icon>
+                        </div>
+                    </template>
+                </el-image>
+                <div class="flex-1 flex-width">
+                    <url-value v-model="row.href"></url-value>
+                </div>
+            </template>
+        </drag>
+        <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
+        
+    </card-container>
+</template>
+<script setup lang="ts">
+import { get_math } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const state = reactive({
+    form: props.value
+});
+const { form } = toRefs(state);
+const img_add = () => {
+    form.value.carousel_list.push({
+        carousel_img: [],
+        carousel_link: {},
+    });
+}
+const img_remove = (index: number) => {
+    form.value.carousel_list.splice(index, 1);
+}
+const product_list_remove = (index: number) => {
+    form.value.product_list.splice(index, 1);
+};
+const product_list_add = () => {
+    form.value.product_list.push({
+        id: get_math(),
+        src: 'carousel',
+        new_src: [],
+        href: {},
+    });
+};
+// 拖拽更新之后，更新数据
+const product_list_sort = (new_list: any) => {
+    form.value.product_list = new_list;
+}
+</script>
+<style lang="scss" scoped>
+.card.mb-8 {
+    .el-form-item:last-child {
+        margin-bottom: 0;
+    }
+}
+</style>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
new file mode 100644
index 00000000..415b002a
--- /dev/null
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -0,0 +1,43 @@
+<template>
+    <card-container class="mb-8">
+        <el-form-item label="底部背景">
+            <div class="flex-col gap-10 w">
+                <div class="size-12">背景色</div>
+                <mult-color-picker :value="form.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+            </div>
+        </el-form-item>
+        <el-form-item label="主标题">
+            <el-input placeholder="请输入主标题"></el-input>
+        </el-form-item>
+        <el-form-item label="副标题">
+            <el-input placeholder="请输入副标题"></el-input>
+        </el-form-item>
+    </card-container>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    }
+});
+
+// 默认值
+const state = reactive({
+    form: props.value
+});
+// 如果需要解构，确保使用toRefs
+const { form } = toRefs(state);
+
+const mult_color_picker_event = (arry: string[], type: number) => {
+    form.value.user_id_color_list = arry;
+    form.value.user_id_direction = type.toString();
+};
+</script>
+<style lang="scss" scoped>
+.card.mb-8 {
+    .el-form-item:last-child {
+        margin-bottom: 0;
+    }
+}
+</style>