营销：适配商城装修组件【用户卡券】

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

+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户卡券属性 */
+export interface UserCouponProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCoupon',
+  name: '用户卡券',
+  icon: 'ep:ticket',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserCouponProperty>

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

+<template>
+  <el-image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+  />
+</template>
+<script setup lang="ts">
+import { UserCouponProperty } from './config'
+
+/** 用户卡券 */
+defineOptions({ name: 'UserCoupon' })
+// 定义属性
+defineProps<{ property: UserCouponProperty }>()
+</script>
+
+<style scoped lang="scss"></style>

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

+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<script setup lang="ts">
+import { UserCouponProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 用户卡券属性面板
+defineOptions({ name: 'UserCouponProperty' })
+
+const props = defineProps<{ modelValue: UserCouponProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>

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

 <template>
 <template>
   <el-image
   <el-image
-    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
   />
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">