营销：适配商城装修组件【营销文章】

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 })
   return await request.get({ url: `/promotion/article/page`, params })
 }
 }
 
 

src/components/DiyEditor/components/mobile/ProductList/config.ts

 import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
 
-/** 商品卡片属性 */
+/** 商品栏属性 */
 export interface ProductListProperty {
 export interface ProductListProperty {
   // 布局类型：双列 | 三列 | 水平滑动
   // 布局类型：双列 | 三列 | 水平滑动
   layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
   layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'

src/components/DiyEditor/components/mobile/ProductList/index.vue

@@ -66,7 +66,7 @@
 import { ProductListProperty } from './config'
 import { ProductListProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 
 
-/** 商品卡片 */
+/** 商品栏 */
 defineOptions({ name: 'ProductList' })
 defineOptions({ name: 'ProductList' })
 // 定义属性
 // 定义属性
 const props = defineProps<{ property: ProductListProperty }>()
 const props = defineProps<{ property: ProductListProperty }>()

src/components/DiyEditor/components/mobile/ProductList/property.vue

@@ -88,7 +88,7 @@ import { ProductListProperty } from './config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
 
-// 商品卡片属性面板
+// 商品栏属性面板
 defineOptions({ name: 'ProductListProperty' })
 defineOptions({ name: 'ProductListProperty' })
 
 
 const props = defineProps<{ modelValue: ProductListProperty }>()
 const props = defineProps<{ modelValue: ProductListProperty }>()

src/components/DiyEditor/components/mobile/PromotionArticle/config.ts

+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>

src/components/DiyEditor/components/mobile/PromotionArticle/index.vue

+<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>

src/components/DiyEditor/components/mobile/PromotionArticle/property.vue

+<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>

src/components/DiyEditor/util.ts

@@ -116,6 +116,6 @@ export const PAGE_LIBS = [
   {
   {
     name: '营销组件',
     name: '营销组件',
     extended: true,
     extended: true,
-    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard']
+    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard', 'PromotionArticle']
   }
   }
 ] as DiyComponentLibrary[]
 ] as DiyComponentLibrary[]