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

Author: owen118z

src/components/DiyEditor/components/ComponentContainerProperty.vue

@@ -1,6 +1,6 @@
 <template>
   <el-tabs stretch>
-    <el-tab-pane label="内容">
+    <el-tab-pane label="内容" v-if="$slots.default">
       <slot></slot>
     </el-tab-pane>
     <el-tab-pane label="样式" lazy>

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

@@ -0,0 +1,23 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 用户卡片属性 */
+export interface UserCardProperty {
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCard',
+  name: '用户卡片',
+  icon: 'mdi:user-card-details',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<UserCardProperty>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between p-x-18px p-y-24px">
+      <div class="flex flex-1 items-center gap-16px">
+        <el-avatar :size="60">
+          <Icon icon="ep:avatar" :size="60" />
+        </el-avatar>
+        <span class="text-18px font-bold">芋道源码</span>
+      </div>
+      <Icon icon="tdesign:qrcode" :size="20" />
+    </div>
+    <div
+      class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
+    >
+      <span class="color-#ff690d">点击绑定手机号</span>
+      <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { UserCardProperty } from './config'
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' })
+// 定义属性
+defineProps<{ property: UserCardProperty }>()
+</script>
+
+<style scoped lang="scss"></style>

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

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