131 lines
3.5 KiB
Markdown
131 lines
3.5 KiB
Markdown
## DIY 组件注册机制（uniapp 端）
|
||
|
||
⚠️注意：这些调查结果没经过二次核验，需要根据实际情况调整或者验证。
|
||
关键文件：`pages/diy/components/diy/diy.vue`
|
||
|
||
注册方式是一个**超长的 if-else 链**：
|
||
|
||
```html
|
||
<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 接口）：
|
||
|
||
```vue
|
||
<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 区添加：
|
||
|
||
```javascript
|
||
import componentDiyVrSeatPicker from '@/pages/diy/components/diy/vr-seat-picker';
|
||
```
|
||
|
||
在 components 注册对象中添加：
|
||
|
||
```javascript
|
||
components: {
|
||
// ...现有组件
|
||
componentDiyVrSeatPicker,
|
||
}
|
||
```
|
||
|
||
在模板的 if-else 链中添加（放在"工具组件"区域）：
|
||
|
||
```html
|
||
<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：
|
||
|
||
```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 → 测试 ✅ |