vr-shopxo-plugin

3.5 KiB

Raw Blame History

DIY 组件注册机制（uniapp 端）

⚠️注意：这些调查结果没经过二次核验，需要根据实际情况调整或者验证。关键文件：pages/diy/components/diy/diy.vue

注册方式是一个超长的 if-else 链：

<component-diy-xxx v-if="item.key == 'xxx'" ... :propValue="item.com_data" />

添加自定义组件到 uniapp 的步骤

假设我们要添加一个 VR 座位选择器 组件：

1. 创建 Vue 组件

pages/diy/components/diy/vr-seat-picker.vue

组件模板（必须遵守的 prop 接口）：

<template>
  <view class="vr-seat-picker" :style="style_container">
    <!-- 座位图渲染逻辑 -->
    <view v-for="zone in zones" :key="zone.id" class="zone">
      <text>{{ zone.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
    props: {
        propValue: { type: Object, default: () => ({}) }, // 完整配置对象
        propKey:   { type: [String, Number], default: '' },
        propIndex: { type: Number, default: 0 },
        propDiyIndex: { type: Number, default: 0 },
    },
    data() { return { form: {}, new_style: {} } },
    mounted() { this.init() },
    methods: {
        init() {
            // propValue = { content: {...}, style: {...} }
            this.form = this.propValue.content || {};
            this.new_style = this.propValue.style || {};
            // 从 form 读取配置，从 new_style 读取样式
        }
    }
}
</script>

2. 在 diy.vue 中注册

在 <script> 的 import 区添加：

import componentDiyVrSeatPicker from '@/pages/diy/components/diy/vr-seat-picker';

在 components 注册对象中添加：

components: {
    // ...现有组件
    componentDiyVrSeatPicker,
}

在模板的 if-else 链中添加（放在"工具组件"区域）：

<component-diy-vr-seat-picker 
    v-else-if="item.key == 'vr-seat-picker'" 
    :propIndex="get_prop_index(item)" 
    :propDiyIndex="index"
    :propKey="item.id + index" 
    :propValue="item.com_data" />

3. 在 shopxo-diy 设计器中注册（可选但推荐）

在 vr-shopxo-diy/src/components/model-xxx/index.vue 中创建设计器组件：

vr-shopxo-diy/src/components/model-vr-seat-picker/index.vue   ← 设计器编辑器
vr-shopxo-diy/src/config/const/vr-seat-picker.ts             ← 默认配置

需要定义的内容：

content: 数据配置（座标图ID、颜色等）
style: 样式配置（边距、圆角、背景色等）

4. JSON 数据格式（存入数据库的格式）

保存到 vrt_diy_data.diy_data 的 JSON：

{
  "key": "vr-seat-picker",
  "id": "xxxxxxxxxxxx",
  "is_enable": "1",
  "com_data": {
    "content": {
      "seat_template_id": 1,
      "theme": "dark"
    },
    "style": {
      "common_style": { "margin": 10, "padding": 10 },
      ...其他样式
    }
  }
}

备选方案：整页作为自定义页面

如果不想改 DIY 系统，可以创建一个独立页面，然后在装修里通过一个 custom 组件加载它。

custom 组件的数据来源可以配置为「自定义」类型，直接填入 HTML 或跳转链接——这样就能把独立页面嵌入到装修里了。

核心结论：

uniapp 端的渲染核心是 diy.vue 的 if-else 链，加组件只需 import + 注册 + 添加一行模板
设计器端需要额外创建配置 ts 文件，但可以先跳过
最简路径：先写 uniapp 组件 → 在 shopxo-diy 设计器里注册 key → 测试 ✅

3.5 KiB Raw Blame History Unescape Escape