Compare commits
2 Commits
b23c812e42
...
275c5f3531
| Author | SHA1 | Date | |
|---|---|---|---|
| 275c5f3531 | |||
|
3f598bb130 |
@ -1,24 +1,51 @@
|
||||
<template>
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<h3>组件</h3>
|
||||
</div>
|
||||
<div class="list-wrapper">
|
||||
<div class="list">
|
||||
<fp-aside-panel-component-item
|
||||
v-for="item in items"
|
||||
@click="addItemToEditor(item)"
|
||||
:key="item.t"
|
||||
:icon="item.t"
|
||||
:title="item.name"
|
||||
desc="点击创建"/>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="酒款信息组件" name="1">
|
||||
<fp-aside-panel-component-item
|
||||
v-for="item in jkxxItems"
|
||||
@click="addItemToEditor(item)"
|
||||
:key="item.key"
|
||||
:icon="item.t"
|
||||
:title="item.name"
|
||||
desc="点击创建"/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="厂牌信息组件" name="2">
|
||||
<fp-aside-panel-component-item
|
||||
v-for="item in cpxxItems"
|
||||
@click="addItemToEditor(item)"
|
||||
:key="item.key"
|
||||
:icon="item.t"
|
||||
:title="item.name"
|
||||
desc="点击创建"/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="市售规格组件" name="3">
|
||||
<fp-aside-panel-component-item
|
||||
v-for="item in ssggItems"
|
||||
@click="addItemToEditor(item)"
|
||||
:key="item.key"
|
||||
:icon="item.t"
|
||||
:title="item.name"
|
||||
desc="点击创建"/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="其它常用组件" name="4">
|
||||
<fp-aside-panel-component-item
|
||||
v-for="item in qtcyItems"
|
||||
@click="addItemToEditor(item)"
|
||||
:key="item.key"
|
||||
:icon="item.t"
|
||||
:title="item.name"
|
||||
desc="点击创建"/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from '@/store/modules/fastposter/poster'
|
||||
import { mapMutations } from "vuex"
|
||||
import FpAsidePanelComponentItem from "./FpAsideComponentItem"
|
||||
export default {
|
||||
@ -26,20 +53,45 @@ export default {
|
||||
components: {FpAsidePanelComponentItem},
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{t: 'text', name: '文字', v: '请输入文字', w: 220, h: 42, s: 42},
|
||||
{t: 'image', name: '图片', v: 'https://fastposter.net/dassets/default.png', w: 200},
|
||||
{t: 'avatar', name: '头像', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
|
||||
{
|
||||
t: 'qrcode',
|
||||
name: '二维码',
|
||||
v: 'https://fastposter.net/doc/',
|
||||
w: 120,
|
||||
h: 120,
|
||||
p: 0,
|
||||
c: '#000000',
|
||||
bgc: '#ffffff'
|
||||
},
|
||||
// 酒款信息组件
|
||||
jkxxItems: [
|
||||
{t: 'text', name: '酒款名称', key: 'jkxx_jkmc', v: '请输入酒款名称', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '酒款英语名称', key: 'jkxx_jkywmc', v: '请输入酒款英语名称', w: 400, h: 42, s: 42},
|
||||
{t: 'image', name: '酒款图片', key: 'jkxx_jktp', v: 'https://fastposter.net/dassets/default.png', w: 200},
|
||||
{t: 'image', name: '鱼眼标', key: 'jkxx_yyb', v: 'https://fastposter.net/dassets/default.png', w: 200},
|
||||
{t: 'text', name: '酒款系列', key: 'jkxx_jkxl', v: '请输入酒款系列', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '啤酒风格', key: 'jkxx_pjfg', v: '请输入啤酒风格', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '啤酒风格英语', key: 'jkxx_pjfgyw', v: '请输入啤酒风格英语', w: 400, h: 42, s: 42},
|
||||
{t: 'text', name: '酒精度数', key: 'jkxx_jjds', v: '请输入酒精度数', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '苦度值', key: 'jkxx_kdz', v: '请输入苦度值', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '原麦汁', key: 'jkxx_ymz', v: '请输入原麦汁', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '产品介绍', key: 'jkxx_cpjs', v: '请输入产品介绍', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '星球评分', key: 'jkxx_xqpf', v: '请输入星球评分', w: 300, h: 42, s: 42},
|
||||
],
|
||||
|
||||
// 厂牌信息组件
|
||||
cpxxItems: [
|
||||
{t: 'text', name: '品牌名称', key: 'cpxx_ppmc', v: '请输入品牌名称', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '品牌英语名称', key: 'cpxx_ppywmc', v: '请输入品牌英语名称', w: 400, h: 42, s: 42},
|
||||
{t: 'text', name: '品牌所在地', key: 'cpxx_ppszd', v: '请输入品牌所在地', w: 400, h: 42, s: 42},
|
||||
{t: 'avatar', name: '品牌LOGO', key: 'cpxx_pplogo', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
|
||||
],
|
||||
|
||||
// 市售规格组件
|
||||
ssggItems: [
|
||||
{t: 'text', name: '酒枪编号', key: 'ssgg_jjbh', v: '请输入酒枪编号', w: 300, h: 42, s: 42},
|
||||
{t: 'text', name: '规格1', key: 'cpxx_gg1', v: '请输入规格1', w: 220, h: 42, s: 42},
|
||||
{t: 'text', name: '价格1', key: 'cpxx_jg1', v: '请输入规格1的价格', w: 450, h: 42, s: 42},
|
||||
{t: 'text', name: '规格2', key: 'cpxx_gg2', v: '请输入规格2', w: 220, h: 42, s: 42},
|
||||
{t: 'text', name: '价格2', key: 'cpxx_jg2', v: '请输入规格2的价格', w: 220, h: 42, s: 42},
|
||||
],
|
||||
|
||||
// 其它常用组件
|
||||
qtcyItems: [
|
||||
{t: 'text', name: '文字', key: 'qtcy_text', v: '请输入文字', w: 220, h: 42, s: 42},
|
||||
{t: 'image', name: '图片', key: 'qtcy_image', v: 'https://fastposter.net/dassets/default.png', w: 200},
|
||||
{t: 'avatar', name: '头像', key: 'qtcy_avatar', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
|
||||
{t: 'qrcode', name: '二维码', key: 'qtcy_qrcode', v: 'https://fastposter.net/doc/', w: 120, h: 120, p: 0, c: '#000000', bgc: '#ffffff'},
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -49,7 +101,7 @@ export default {
|
||||
'record': 'snapshots/record',
|
||||
}),
|
||||
addItemToEditor(item) {
|
||||
this.addItem({...item,vd:item.name+uniqueId(6)})
|
||||
this.addItem({...item, vd:item.key})
|
||||
this.record(`新增组件: ${item.name}`)
|
||||
document.getElementById('key-down').focus()
|
||||
},
|
||||
@ -58,12 +110,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
padding: 17px 24px;
|
||||
height: 56px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title h3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user