From 687ec003435e190620125343a557ed4d3fea5e25 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 25 Nov 2023 15:53:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6=E3=80=90?=
 =?UTF-8?q?=E8=90=A5=E9=94=80=E6=96=87=E7=AB=A0=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit d4dc105b4f4341cbfa0357a6c90bf30ff32aad50)
---
 src/api/mall/promotion/article/index.ts       |  2 +-
 .../components/mobile/ProductList/config.ts   |  2 +-
 .../components/mobile/ProductList/index.vue   |  2 +-
 .../mobile/ProductList/property.vue           |  2 +-
 .../mobile/PromotionArticle/config.ts         | 25 +++++++++
 .../mobile/PromotionArticle/index.vue         | 27 +++++++++
 .../mobile/PromotionArticle/property.vue      | 56 +++++++++++++++++++
 src/components/DiyEditor/util.ts              |  2 +-
 8 files changed, 113 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/PromotionArticle/property.vue

diff --git a/src/api/mall/promotion/article/index.ts b/src/api/mall/promotion/article/index.ts
index 824958ad..9184c7af 100644
--- a/src/api/mall/promotion/article/index.ts
+++ b/src/api/mall/promotion/article/index.ts
@@ -17,7 +17,7 @@ export interface ArticleVO {
 }
 
 // 查询文章管理列表
-export const getArticlePage = async (params) => {
+export const getArticlePage = async (params: any) => {
   return await request.get({ url: `/promotion/article/page`, params })
 }
 
diff --git a/src/components/DiyEditor/components/mobile/ProductList/config.ts b/src/components/DiyEditor/components/mobile/ProductList/config.ts
index 436de405..1f168323 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/config.ts
+++ b/src/components/DiyEditor/components/mobile/ProductList/config.ts
@@ -1,6 +1,6 @@
 import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
-/** 商品卡片属性 */
+/** 商品栏属性 */
 export interface ProductListProperty {
   // 布局类型：双列 | 三列 | 水平滑动
   layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
diff --git a/src/components/DiyEditor/components/mobile/ProductList/index.vue b/src/components/DiyEditor/components/mobile/ProductList/index.vue
index 8a35628e..3ba63677 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/index.vue
+++ b/src/components/DiyEditor/components/mobile/ProductList/index.vue
@@ -66,7 +66,7 @@
 import { ProductListProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 
-/** 商品卡片 */
+/** 商品栏 */
 defineOptions({ name: 'ProductList' })
 // 定义属性
 const props = defineProps<{ property: ProductListProperty }>()
diff --git a/src/components/DiyEditor/components/mobile/ProductList/property.vue b/src/components/DiyEditor/components/mobile/ProductList/property.vue
index 872affc3..e9cf7c01 100644
--- a/src/components/DiyEditor/components/mobile/ProductList/property.vue
+++ b/src/components/DiyEditor/components/mobile/ProductList/property.vue
@@ -88,7 +88,7 @@ import { ProductListProperty } from './config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
-// 商品卡片属性面板
+// 商品栏属性面板
 defineOptions({ name: 'ProductListProperty' })
 
 const props = defineProps<{ modelValue: ProductListProperty }>()
diff --git a/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts b/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
new file mode 100644
index 00000000..c6270c2a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
@@ -0,0 +1,25 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 营销文章属性 */
+export interface PromotionArticleProperty {
+  // 文章编号
+  id: number
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionArticle',
+  name: '营销文章',
+  icon: 'ph:article-medium',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionArticleProperty>
diff --git a/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue b/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
new file mode 100644
index 00000000..cca3635d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="min-h-30px" v-html="article.content"></div>
+</template>
+<script setup lang="ts">
+import { PromotionArticleProperty } from './config'
+import * as ArticleApi from '@/api/mall/promotion/article/index'
+
+/** 营销文章 */
+defineOptions({ name: 'PromotionArticle' })
+// 定义属性
+const props = defineProps<{ property: PromotionArticleProperty }>()
+// 商品列表
+const article = ref<ArticleApi.ArticleVO[]>({})
+watch(
+  () => props.property.id,
+  async () => {
+    if (props.property.id) {
+      article.value = await ArticleApi.getArticle(props.property.id)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue b/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue
new file mode 100644
index 00000000..c3bcb21b
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PromotionArticle/property.vue
@@ -0,0 +1,56 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="40px" :model="formData">
+      <el-form-item label="文章" prop="id">
+        <el-select
+          v-model="formData.id"
+          placeholder="请选择文章"
+          class="w-full"
+          filterable
+          remote
+          :remote-method="queryArticleList"
+          :loading="loading"
+        >
+          <el-option
+            v-for="article in articles"
+            :key="article.id"
+            :label="article.title"
+            :value="article.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { PromotionArticleProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import * as ArticleApi from '@/api/mall/promotion/article/index'
+
+// 营销文章属性面板
+defineOptions({ name: 'PromotionArticleProperty' })
+
+const props = defineProps<{ modelValue: PromotionArticleProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+// 文章列表
+const articles = ref<ArticleApi.ArticleVO>([])
+
+// 加载中
+const loading = ref(false)
+// 查询文章列表
+const queryArticleList = async (title?: string) => {
+  loading.value = true
+  const { list } = await ArticleApi.getArticlePage({ title, pageSize: 10 })
+  articles.value = list
+  loading.value = false
+}
+
+// 初始化
+onMounted(() => {
+  queryArticleList()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index a8d0e095..2eb10f92 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -116,6 +116,6 @@ export const PAGE_LIBS = [
   {
     name: '营销组件',
     extended: true,
-    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard']
+    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard', 'PromotionArticle']
   }
 ] as DiyComponentLibrary[]