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 → 测试 ✅
|