成就页
This commit is contained in:
yulixing
parent
4bbf90f8d7
commit
8de0f0e1f1
9
src/api/mp_share.js
Normal file
9
src/api/mp_share.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getPic(data) {
|
||||
return request({
|
||||
url: '/games/mp_share/get_pic',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -68,6 +68,12 @@ const gamesRouter = {
|
||||
name: 'GameDetailsShare',
|
||||
meta: { title: '分享图' }
|
||||
},
|
||||
{
|
||||
path: 'achievement',
|
||||
component: () => import('@/views/games/details/achievement/index'),
|
||||
name: 'GameDetailsAchievement',
|
||||
meta: { title: '成就' }
|
||||
},
|
||||
{
|
||||
path: 'share/edit',
|
||||
component: () => import('@/views/games/details/share/edit'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: 'muyao';
|
||||
src: url('~@/assets/fonts/muyao.ttf') format('truetype');
|
||||
src: url('http://ptfwuko7v.bkt.clouddn.com/muyao.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
||||
305
src/views/games/details/achievement/index.vue
Normal file
305
src/views/games/details/achievement/index.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<el-select
|
||||
v-model="platform_id"
|
||||
style="width: 70%"
|
||||
@change="changePlatform"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformsArr"
|
||||
:key="item.platform.platform_id"
|
||||
:label="item.platform.name"
|
||||
:value="item.platform.platform_id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-collapse
|
||||
v-model="activeNames"
|
||||
@change="handleChange"
|
||||
style="width: 60%"
|
||||
>
|
||||
<el-collapse-item
|
||||
:title="ahievementForm.title || '未命名'"
|
||||
name="1"
|
||||
>
|
||||
<el-form
|
||||
ref="ahievementForm"
|
||||
:model="ahievementForm"
|
||||
:rules="ahievementFormRules"
|
||||
style="width: 100%"
|
||||
label-width="100px"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
|
||||
<el-form-item
|
||||
label="标题"
|
||||
prop="title"
|
||||
>
|
||||
<el-input
|
||||
v-model="ahievementForm.title"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="id"
|
||||
prop="id"
|
||||
>
|
||||
<el-input
|
||||
v-model="ahievementForm.id"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="提示文字"
|
||||
prop="tip"
|
||||
>
|
||||
<el-input
|
||||
v-model="ahievementForm.tip"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="奖励类型"
|
||||
prop="reward_type"
|
||||
>
|
||||
<el-radio
|
||||
v-model="ahievementForm.reward_type"
|
||||
:label="1"
|
||||
>称号</el-radio>
|
||||
<el-radio
|
||||
v-model="ahievementForm.reward_type"
|
||||
:label="2"
|
||||
>代币</el-radio>
|
||||
<el-radio
|
||||
v-model="ahievementForm.reward_type"
|
||||
:label="0"
|
||||
>其他</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="奖励数量"
|
||||
prop="reward_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="ahievementForm.reward_count"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="达成条件"
|
||||
prop="need_type"
|
||||
>
|
||||
<el-select
|
||||
v-model="ahievementForm.need_type"
|
||||
placeholder="达成条件"
|
||||
style="width: 70%"
|
||||
>
|
||||
<el-option
|
||||
label="完成关卡"
|
||||
value="shanghai"
|
||||
/>
|
||||
<el-option
|
||||
label="完成题目"
|
||||
value="beijing"
|
||||
/>
|
||||
<el-option
|
||||
label="失败题目"
|
||||
value="beijing"
|
||||
/>
|
||||
<el-option
|
||||
label="邀请好友"
|
||||
value="beijing"
|
||||
/>
|
||||
<el-option
|
||||
label="观看视频"
|
||||
value="beijing"
|
||||
/>
|
||||
<el-option
|
||||
label="其他"
|
||||
value="beijing"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="达成数量"
|
||||
prop="need_count"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="ahievementForm.need_count"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="默认获得"
|
||||
prop="geted"
|
||||
>
|
||||
<el-radio
|
||||
v-model="ahievementForm.geted"
|
||||
:label="1"
|
||||
>是</el-radio>
|
||||
<el-radio
|
||||
v-model="ahievementForm.geted"
|
||||
:label="0"
|
||||
>否</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
>删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
|
||||
</el-collapse>
|
||||
|
||||
<div class="tip mgt-20 mgb-20">
|
||||
暂无成就，请添加成就配置
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
style="width: 60%"
|
||||
class="mgt-20"
|
||||
>新增成就</el-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getGame } from '@/api/games'
|
||||
import getPageTitle from '@/utils/get-page-title'
|
||||
import {
|
||||
resetSettings,
|
||||
getGameSettings,
|
||||
saveGameSettings,
|
||||
getSettingItems,
|
||||
publishGameSettings,
|
||||
saveSettingItem
|
||||
} from '@/api/settings'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsShare',
|
||||
data() {
|
||||
return {
|
||||
// common
|
||||
uid: '',
|
||||
platform_id: '',
|
||||
platformsArr: [],
|
||||
gameInfo: {},
|
||||
permEdit: false,
|
||||
permPublish: false,
|
||||
|
||||
// form
|
||||
ahievementForm: {},
|
||||
ahievementFormRules: {
|
||||
title: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
id: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
||||
reward_type: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
reward_count: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
need_type: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
need_count: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
geted: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
activeNames: '1',
|
||||
defaultSetting: {
|
||||
title: '',
|
||||
id: '',
|
||||
tip: '',
|
||||
reward_type: 1,
|
||||
reward_count: 1,
|
||||
need_type: 1,
|
||||
need_count: 1,
|
||||
geted: 0
|
||||
},
|
||||
allAC: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
mounted() {
|
||||
this.uid = this.$route.params.uid
|
||||
this.permEdit =
|
||||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.permPublish =
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.getGameInfo(this.getGameSettings)
|
||||
},
|
||||
methods: {
|
||||
handleChange() {},
|
||||
getGameInfo(cb) {
|
||||
getGame({ uid: this.uid })
|
||||
.then(res => {
|
||||
const { data } = res
|
||||
if (data.errcode === 0) {
|
||||
this.gameInfo = data.gameInfo
|
||||
this.platformsArr = data.gameInfo.platforms
|
||||
this.$route.meta.title = this.gameInfo.game_name
|
||||
document.title = getPageTitle(this.gameInfo.game_name)
|
||||
if (this.$route.query.platform_id) {
|
||||
this.platform_id = this.$route.query.platform_id
|
||||
} else {
|
||||
this.platform_id = this.platformsArr[0]
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
}
|
||||
if (cb && cb instanceof Function) cb()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getGameSettings() {
|
||||
getGameSettings({
|
||||
uid: this.uid,
|
||||
type: this.type === 'normal' ? 0 : 1,
|
||||
id: this.gameInfo.game_id,
|
||||
pid: this.platform_id
|
||||
}).then(res => {
|
||||
const { data } = res
|
||||
if (data.errcode !== 0) {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: data.errmsg
|
||||
})
|
||||
return
|
||||
}
|
||||
this.settingsForm.settings = data.records
|
||||
this.selectedSettings = data.records
|
||||
this.settingKeys = data.records.map(item => {
|
||||
return item.key
|
||||
})
|
||||
if (data.published === false) {
|
||||
this.tip = '配置已保存，待发布'
|
||||
} else if (data.published === true) {
|
||||
this.tip = '配置已发布'
|
||||
}
|
||||
if (this.settingsForm.settings.length === 0) this.tip = ''
|
||||
this.changeState(false)
|
||||
})
|
||||
},
|
||||
changePlatform() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<el-menu-item :index="`/games/details/${uid}/info`">详情</el-menu-item>
|
||||
<el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/settings`">配置</el-menu-item>
|
||||
<el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/share`">分享</el-menu-item>
|
||||
<el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/achievement`">成就</el-menu-item>
|
||||
<!-- <el-menu-item :index="`/games/details/${uid}/recommendation`">推荐</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/reward`">奖励</el-menu-item>
|
||||
<el-submenu :index="`/games/details/${uid}/gm/servers`">
|
||||
|
||||
@ -35,11 +35,15 @@
|
||||
placeholder="例：500px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="画布背景" prop="base_style.background">
|
||||
<el-input
|
||||
<el-form-item
|
||||
label="画布背景"
|
||||
prop="base_style.background"
|
||||
class="form-item-color-picker"
|
||||
>
|
||||
<el-color-picker
|
||||
v-model="tplForm.base_style.background"
|
||||
placeholder="例：#fff"
|
||||
/>
|
||||
show-alpha
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="画布圆角" prop="base_style['border-radius']">
|
||||
<el-input
|
||||
@ -48,7 +52,13 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="绘制组" prop="views">
|
||||
<el-table :data="tplForm.views" style="width: 100%" size="mini">
|
||||
<el-table
|
||||
:data="tplForm.views"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
@row-click="rowClick"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column type="index" width="30" />
|
||||
<el-table-column label="内容" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
@ -76,16 +86,16 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<span @click="editView(scope.$index, scope.row)"
|
||||
<span @click.stop="editView(scope.$index, scope.row)"
|
||||
><svg-icon icon-class="edit"
|
||||
/></span>
|
||||
<span @click="delView(scope.$index, scope.row)"
|
||||
<span @click.stop="delView(scope.$index, scope.row)"
|
||||
><svg-icon icon-class="close"
|
||||
/></span>
|
||||
<span @click="upView(scope.$index)"
|
||||
<span @click.stop="upView(scope.$index)"
|
||||
><svg-icon icon-class="up"
|
||||
/></span>
|
||||
<span @click="downView(scope.$index)"
|
||||
<span @click.stop="downView(scope.$index)"
|
||||
><svg-icon icon-class="down"
|
||||
/></span>
|
||||
</template>
|
||||
@ -94,17 +104,6 @@
|
||||
<span class="ipt-tip">图片绘制顺序为表格中条目顺序决定。</span>
|
||||
<el-button size="mini" @click="addView">添加</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="水印" prop="comment">
|
||||
<el-switch v-model="tplForm.resource" />
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="二维码" prop="comment">
|
||||
<el-input v-model="tplForm.comment" type="text" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文本" prop="comment">
|
||||
<el-input v-model="tplForm.comment" type="text" />
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<el-form-item label="预览图" v-if="tplForm.prev_url">
|
||||
<el-image
|
||||
:src="tplForm.prev_url"
|
||||
@ -115,8 +114,8 @@
|
||||
<el-input v-model="tplForm.comment" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">保存</el-button>
|
||||
<el-button type="success" @click="getPrevImg">生成预览图</el-button>
|
||||
<el-button type="primary">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
@ -136,8 +135,8 @@
|
||||
></el-image>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<p class="view" :key="index" :style="item.style">
|
||||
{{ item.text }}
|
||||
<p class="view text" :style="item.style" :key="index">
|
||||
<span>{{ item.text }}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -153,7 +152,7 @@
|
||||
<el-dialog
|
||||
title="编辑绘制项目"
|
||||
:visible.sync="modalVisible"
|
||||
width="35%"
|
||||
width="700px"
|
||||
top="5vh"
|
||||
:before-close="closeModal"
|
||||
>
|
||||
@ -184,6 +183,39 @@
|
||||
>
|
||||
<el-switch v-model="modalForm.replaceable"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可清除" prop="erasable">
|
||||
<el-switch v-model="modalForm.erasable"></el-switch>
|
||||
<span class="ipt-tip">用于水印元素</span>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="图片"
|
||||
class="uploader-box"
|
||||
v-if="modalForm.type === 'image'"
|
||||
>
|
||||
<el-upload
|
||||
class="uploader"
|
||||
action="/api/common/upload"
|
||||
:show-file-list="false"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadErr"
|
||||
:headers="{
|
||||
authorization: 'Bearer ' + token
|
||||
}"
|
||||
name="image-file"
|
||||
:data="{
|
||||
sub_path: '/mp-share/',
|
||||
file_type: 'mp_share'
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-if="modalForm.type === 'image' ? modalForm.form[0].value : ''"
|
||||
:src="modalForm.type === 'image' ? modalForm.form[0].value : ''"
|
||||
class="uploader-img"
|
||||
/>
|
||||
<i v-else class="el-icon-plus uploader-icon" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<template v-for="(item, index) in modalForm.form">
|
||||
<template v-if="item.iptType === 'select'">
|
||||
<el-form-item
|
||||
@ -191,6 +223,7 @@
|
||||
:prop="`form[${index}].value`"
|
||||
:key="index"
|
||||
:rules="item.rules"
|
||||
v-if="item.show"
|
||||
>
|
||||
<el-select v-model="item.value" style="width: 100%">
|
||||
<el-option
|
||||
@ -203,12 +236,63 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.iptType === 'textarea'">
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
:prop="`form[${index}].value`"
|
||||
:key="index"
|
||||
:rules="item.rules"
|
||||
v-if="item.show"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="item.value"
|
||||
:placeholder="item.placeholder ? item.placeholder : ''"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.iptType === 'radio'">
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
:prop="`form[${index}].value`"
|
||||
:key="index"
|
||||
:rules="item.rules"
|
||||
v-if="item.show"
|
||||
>
|
||||
<el-radio
|
||||
v-for="(al, idx) in item.data"
|
||||
:key="idx"
|
||||
v-model="item.value"
|
||||
:label="al.value"
|
||||
>{{ al.label }}</el-radio
|
||||
>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.iptType === 'color-picker'">
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
:prop="`form[${index}].value`"
|
||||
:key="index"
|
||||
:rules="item.rules"
|
||||
class="form-item-color-picker"
|
||||
v-if="item.show"
|
||||
>
|
||||
<el-color-picker
|
||||
v-model="item.value"
|
||||
show-alpha
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
:prop="`form[${index}].value`"
|
||||
:key="index"
|
||||
:rules="item.rules"
|
||||
v-if="item.show"
|
||||
>
|
||||
<el-input
|
||||
v-model="item.value"
|
||||
@ -229,6 +313,8 @@
|
||||
|
||||
<script>
|
||||
import vueJsonEditor from 'vue-json-editor'
|
||||
import { getPic } from '@/api/mp_share'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsMpEdit',
|
||||
@ -242,36 +328,85 @@ export default {
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
modalForm: {
|
||||
handler: function(nVal, oVal) {
|
||||
// 整理文本输入限制
|
||||
if (nVal.type === 'text') {
|
||||
// 横排还原
|
||||
if (nVal.form[4].value === 'horizontal-tb') {
|
||||
// 起始：x
|
||||
nVal.form[1].show = true
|
||||
// nVal.form[1].value = ''
|
||||
// 文本块宽度
|
||||
nVal.form[5].show = true
|
||||
// nVal.form[5].value = ''
|
||||
// 对齐方式
|
||||
nVal.form[9].show = true
|
||||
|
||||
// 结束：x
|
||||
nVal.form[2].show = false
|
||||
nVal.form[2].value = ''
|
||||
// 文本块高度
|
||||
nVal.form[6].show = false
|
||||
nVal.form[6].value = ''
|
||||
} else if (nVal.form[4].value === 'vertical-rl') {
|
||||
// 竖排限制
|
||||
// 起始：x
|
||||
nVal.form[1].show = false
|
||||
nVal.form[1].value = ''
|
||||
// 文本块宽度
|
||||
nVal.form[5].show = false
|
||||
nVal.form[5].value = ''
|
||||
// 对齐方式
|
||||
nVal.form[9].show = false
|
||||
nVal.form[9].value = 'left'
|
||||
// 结束：x
|
||||
nVal.form[2].show = true
|
||||
// nVal.form[2].value = ''
|
||||
// 文本块高度
|
||||
nVal.form[6].show = true
|
||||
// nVal.form[6].value = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
// 数据
|
||||
token: '',
|
||||
fonts: [
|
||||
{
|
||||
label: '沐瑶',
|
||||
value: 'muyao',
|
||||
name: 'muyao',
|
||||
path: 'fonts/muyao.ttf'
|
||||
path: 'fonts/muyao.ttf',
|
||||
loc_path: '/fonts/muyao.ttf',
|
||||
},
|
||||
{
|
||||
label: '手书体',
|
||||
value: 'shoushuti',
|
||||
name: 'shoushuti',
|
||||
path: 'fonts/shoushuti.ttf'
|
||||
path: 'fonts/shoushuti.ttf',
|
||||
loc_path: '/fonts/shoushuti.ttf',
|
||||
},
|
||||
{
|
||||
label: '思源',
|
||||
value: 'siyuan',
|
||||
name: 'siyuan',
|
||||
path: 'fonts/siyuan.otf'
|
||||
path: 'fonts/siyuan.otf',
|
||||
loc_path: '/fonts/siyuan.otf',
|
||||
},
|
||||
{
|
||||
label: '杨任东',
|
||||
value: 'yangrendong',
|
||||
name: 'yangrendong',
|
||||
path: 'fonts/muyao.ttf'
|
||||
path: 'fonts/yangrendong.ttf',
|
||||
loc_path: '/fonts/yangrendong.ttf',
|
||||
}
|
||||
],
|
||||
|
||||
@ -279,12 +414,11 @@ export default {
|
||||
tplForm: {
|
||||
tpl_name: '',
|
||||
tpl_id: '',
|
||||
prev_url:
|
||||
'https://client-1256832210.cos.ap-beijing.myqcloud.com/mp-share/5d09e26a62bb32868763dba3.jpeg',
|
||||
prev_url: '',
|
||||
base_style: {
|
||||
width: '',
|
||||
height: '',
|
||||
background: '',
|
||||
width: '400px',
|
||||
height: '300px',
|
||||
background: '#fff',
|
||||
'border-radius': ''
|
||||
},
|
||||
views: [],
|
||||
@ -306,7 +440,7 @@ export default {
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
len: 1,
|
||||
min: 1,
|
||||
message: '请至少添加一个绘制组'
|
||||
}
|
||||
]
|
||||
@ -318,6 +452,7 @@ export default {
|
||||
modalForm: {
|
||||
type: '',
|
||||
replaceable: false,
|
||||
erasable: false,
|
||||
form: []
|
||||
},
|
||||
modalFormRules: {
|
||||
@ -344,105 +479,118 @@ export default {
|
||||
value: '',
|
||||
rules: [
|
||||
{ required: true, message: '请输入图片 url', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：x',
|
||||
name: 'left',
|
||||
value: '',
|
||||
value: '0px',
|
||||
placeholder: '例：10px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入图片坐标：x', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：y',
|
||||
name: 'top',
|
||||
value: '',
|
||||
value: '0px',
|
||||
placeholder: '例：10px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入图片坐标：y', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
value: '',
|
||||
value: '100px',
|
||||
placeholder: '例：100px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入图片宽度', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
value: '',
|
||||
value: '100px',
|
||||
placeholder: '例：50px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入图片高度', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '圆角',
|
||||
name: 'border-radius',
|
||||
value: '',
|
||||
placeholder: '例：10px',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '边框',
|
||||
name: 'border',
|
||||
value: '',
|
||||
placeholder: '例：1px solid #333，仅支持 solid 类型',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '阴影',
|
||||
name: 'box-shadow',
|
||||
value: '',
|
||||
placeholder: '例：0px 0px 10px #333',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '旋转角度',
|
||||
name: 'rotate',
|
||||
value: '',
|
||||
placeholder: '例：90',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
}
|
||||
],
|
||||
textForm: [
|
||||
{
|
||||
iptType: 'textarea',
|
||||
label: '文本',
|
||||
name: 'text',
|
||||
value: '',
|
||||
rules: [{ required: true, message: '请输入文本', trigger: 'blur' }]
|
||||
rules: [{ required: true, message: '请输入文本', trigger: 'blur' }],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：x',
|
||||
label: '起始：x',
|
||||
name: 'left',
|
||||
value: '',
|
||||
placeholder: '例：10px,文字横排时使用',
|
||||
placeholder: '例：10px，文本块起始横坐标',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文字坐标：x',
|
||||
message: '请输入文本块起始坐标：x',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：x',
|
||||
label: '结束：x',
|
||||
name: 'right',
|
||||
value: '',
|
||||
placeholder: '例：10px, 文字竖排时使用',
|
||||
placeholder: '例：10px，文本块结束横坐标',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文字坐标：x',
|
||||
message: '请输入文本块结束坐标：x',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：y',
|
||||
@ -451,46 +599,69 @@ export default {
|
||||
placeholder: '例：10px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入文字坐标：y', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '最大宽度',
|
||||
name: 'max-width',
|
||||
iptType: 'radio',
|
||||
data: [
|
||||
{ label: '横排', value: 'horizontal-tb' },
|
||||
{ label: '竖排', value: 'vertical-rl' }
|
||||
],
|
||||
label: '书写顺序',
|
||||
name: 'writing-mode',
|
||||
value: 'horizontal-tb',
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '文本块宽度',
|
||||
name: 'width',
|
||||
value: '',
|
||||
placeholder: '文字横排时使用，竖排默认 0',
|
||||
placeholder: '例：100px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入文本最大宽度', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '最大高度',
|
||||
name: 'max-height',
|
||||
label: '文本块高度',
|
||||
name: 'height',
|
||||
value: '',
|
||||
placeholder: '文字竖排时使用，横排默认 0',
|
||||
placeholder: '例：100px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入文本最大高度', trigger: 'blur' }
|
||||
]
|
||||
{ required: true, message: '请输入文本高度', trigger: 'blur' }
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '字体大小',
|
||||
name: 'font-size',
|
||||
value: '',
|
||||
value: '16px',
|
||||
placeholder: '例：14px',
|
||||
rules: [{ required: true, message: '请输入文本', trigger: 'blur' }]
|
||||
rules: [{ required: true, message: '请输入文本', trigger: 'blur' }],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '字体行高',
|
||||
name: 'font-size',
|
||||
value: '',
|
||||
name: 'line-height',
|
||||
value: '32px',
|
||||
placeholder: '例：14px，默认与字体大小相等',
|
||||
rules: []
|
||||
rules: [{ required: true, message: '请输入行高', trigger: 'blur' }],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
iptType: 'radio',
|
||||
data: [
|
||||
{ label: '左对齐', value: 'left' },
|
||||
{ label: '居中对齐', value: 'center' },
|
||||
{ label: '右对齐', value: 'right' }
|
||||
],
|
||||
label: '对齐方式',
|
||||
name: 'text-align',
|
||||
value: '',
|
||||
placeholder: '例：center，默认left，可选：left/center/right',
|
||||
rules: []
|
||||
value: 'left',
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
iptType: 'select',
|
||||
@ -498,49 +669,54 @@ export default {
|
||||
label: '字体类型',
|
||||
name: 'font-family',
|
||||
value: '',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
iptType: 'color-picker',
|
||||
label: '颜色',
|
||||
name: 'color',
|
||||
value: '',
|
||||
placeholder: '例：#fff，默认为#000',
|
||||
rules: []
|
||||
},
|
||||
{
|
||||
label: '书写顺序',
|
||||
name: 'writing-mode',
|
||||
placeholder: '默认横排，横排：horizontal-tb，竖排：vertical-rl',
|
||||
value: '',
|
||||
rules: []
|
||||
value: '#333',
|
||||
placeholder: '例：#fff，默认为#333',
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
iptType: 'radio',
|
||||
data: [
|
||||
{ label: '正常', value: '500' },
|
||||
{ label: '加粗', value: '700' }
|
||||
],
|
||||
label: '字体粗细',
|
||||
name: 'font-weight',
|
||||
placeholder: '默认：500，加粗：700',
|
||||
value: '',
|
||||
rules: []
|
||||
value: '500',
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '阴影',
|
||||
name: 'text-shadow',
|
||||
placeholder: '例：2px 2px 2px #ccc',
|
||||
value: '',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '描边',
|
||||
name: '-webkit-text-stroke',
|
||||
value: '',
|
||||
placeholder: '例：1px #fff',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '旋转角度',
|
||||
name: 'rotate',
|
||||
value: '',
|
||||
placeholder: '例：90',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
}
|
||||
],
|
||||
rectForm: [
|
||||
@ -551,7 +727,8 @@ export default {
|
||||
placeholder: '例：10px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入矩形坐标：x', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '坐标：y',
|
||||
@ -560,97 +737,67 @@ export default {
|
||||
placeholder: '例：10px',
|
||||
rules: [
|
||||
{ required: true, message: '请输入矩形坐标：y', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
placeholder: '例：100px',
|
||||
value: '',
|
||||
rules: [{ required: true, message: '请输矩形宽度', trigger: 'blur' }]
|
||||
rules: [{ required: true, message: '请输矩形宽度', trigger: 'blur' }],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
value: '',
|
||||
placeholder: '例：100px',
|
||||
rules: [{ required: true, message: '请输矩形高度', trigger: 'blur' }]
|
||||
rules: [{ required: true, message: '请输矩形高度', trigger: 'blur' }],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
iptType: 'color-picker',
|
||||
label: '颜色',
|
||||
name: 'background',
|
||||
value: '',
|
||||
value: '#fff',
|
||||
placeholder: '例：#fff',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '边框',
|
||||
name: 'border',
|
||||
value: '',
|
||||
placeholder: '例：1px solid #333，仅支持 solid 类型',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '圆角',
|
||||
name: 'border-radius',
|
||||
value: '',
|
||||
placeholder: '例：10px',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '阴影',
|
||||
name: 'box-shadow',
|
||||
value: '',
|
||||
placeholder: '例：0px 0px 10px #333',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '旋转角度',
|
||||
name: 'rotate',
|
||||
value: '',
|
||||
placeholder: '例：90',
|
||||
rules: []
|
||||
rules: [],
|
||||
show: true
|
||||
}
|
||||
],
|
||||
tplInfo: {
|
||||
baseInfo: {
|
||||
style: {
|
||||
width: '250px',
|
||||
height: '750px'
|
||||
},
|
||||
fonts: [
|
||||
{
|
||||
name: 'yangrendong',
|
||||
path: 'fonts/yangrendong.ttf'
|
||||
}
|
||||
]
|
||||
},
|
||||
imgs: [
|
||||
{
|
||||
url:
|
||||
'https://hbimg.huabanimg.com/8256f8640cceb4b4c6fc51a2f07503d69b53e1b236416-ZzsSSs_fw658',
|
||||
replaceable: true,
|
||||
style: {
|
||||
width: '250px',
|
||||
height: '250px',
|
||||
top: '0',
|
||||
left: '0'
|
||||
}
|
||||
}
|
||||
],
|
||||
texts: [
|
||||
{
|
||||
text:
|
||||
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaquecumque, quis atque dignissimos consequuntur reiciendis iste. Consequatur sed dolores illo illum cumque labore esse fugiatsunt, autem quas, porro ut!',
|
||||
style: {
|
||||
color: '#333',
|
||||
'writing-mode': 'vertical-rl',
|
||||
'max-height': '200px',
|
||||
'line-height': '36px'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 预览
|
||||
previewInfo: {}
|
||||
}
|
||||
@ -661,6 +808,8 @@ export default {
|
||||
this.textForm[i].data = this.fonts
|
||||
}
|
||||
}
|
||||
// 获取 token
|
||||
this.token = getToken()
|
||||
},
|
||||
methods: {
|
||||
save() {},
|
||||
@ -670,6 +819,7 @@ export default {
|
||||
this.modalForm = {
|
||||
type: '',
|
||||
replaceable: false,
|
||||
erasable: false,
|
||||
form: []
|
||||
}
|
||||
this.isNewView = true
|
||||
@ -716,6 +866,13 @@ export default {
|
||||
this.tplForm.views.splice(index, 1)
|
||||
this.tplForm.views.splice(index + 1, 0, temp)
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
row.index = rowIndex
|
||||
},
|
||||
rowClick(row, column, event) {
|
||||
this.editView(row.index, row)
|
||||
},
|
||||
|
||||
// modal
|
||||
changeViewType(val) {
|
||||
this.modalForm.type = val
|
||||
@ -756,12 +913,21 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
uploadSuccess(res, file) {
|
||||
if (this.modalForm.type === 'image')
|
||||
this.modalForm.form[0].value = res.url
|
||||
this.$message.success('图片上传成功！')
|
||||
},
|
||||
uploadErr() {
|
||||
this.$message.error('图片上传失败！')
|
||||
},
|
||||
formPrev(tpl) {
|
||||
this.previewInfo.base_style = tpl.base_style
|
||||
this.previewInfo.views = tpl.views.map(view => {
|
||||
const result = {}
|
||||
result.type = view.type
|
||||
result.replaceable = view.replaceable
|
||||
result.erasable = view.erasable
|
||||
result.style = {}
|
||||
view.form.map(ipt => {
|
||||
if (ipt.name === 'url') {
|
||||
@ -780,58 +946,81 @@ export default {
|
||||
})
|
||||
},
|
||||
getPrevImg() {
|
||||
// 整理painter数据
|
||||
const opt = {}
|
||||
const fonts = []
|
||||
// 画布信息
|
||||
opt.baseInfo = {}
|
||||
opt.baseInfo.width = this.previewInfo.base_style.width
|
||||
opt.baseInfo.height = this.previewInfo.base_style.height
|
||||
opt.baseInfo['back-ground'] = this.previewInfo.base_style['back-ground']
|
||||
opt.baseInfo['border-radius'] = this.previewInfo.base_style[
|
||||
'border-radius'
|
||||
]
|
||||
// 绘制组
|
||||
opt.views = []
|
||||
this.previewInfo.views.map(view => {
|
||||
const obj = JSON.parse(JSON.stringify(view))
|
||||
const style = obj.style
|
||||
if (obj.type === 'text') {
|
||||
if (
|
||||
style['writing-mode'] === 'horizontal-tb' ||
|
||||
!style['writing-mode']
|
||||
) {
|
||||
if (style['text-align'] === 'center') {
|
||||
const maxWidth = parseInt(style['max-width'])
|
||||
const left = parseInt(style.left)
|
||||
style.left = left + maxWidth / 2
|
||||
} else if (style['text-align'] === 'right') {
|
||||
const maxWidth = parseInt(style['max-width'])
|
||||
const left = parseInt(style.left)
|
||||
style.left = left + maxWidth
|
||||
}
|
||||
} else if (style['writing-mode'] === 'vertical-rl') {
|
||||
const right = parseInt(style.right)
|
||||
const lineHeight =
|
||||
parseInt(style['line-height']) || parseInt(style['font-size'])
|
||||
style.left = parseInt(opt.baseInfo.width) - right - lineHeight
|
||||
console.log(right, lineHeight, style.left)
|
||||
}
|
||||
this.$refs['tplForm'].validate(valid => {
|
||||
if (valid) {
|
||||
// 整理painter数据
|
||||
const opt = {}
|
||||
const fonts = []
|
||||
// 画布信息
|
||||
opt.baseInfo = {}
|
||||
console.log(this.previewInfo.base_style)
|
||||
opt.baseInfo.width = this.previewInfo.base_style.width
|
||||
opt.baseInfo.height = this.previewInfo.base_style.height
|
||||
opt.baseInfo['background'] = this.previewInfo.base_style['background']
|
||||
opt.baseInfo['border-radius'] = this.previewInfo.base_style[
|
||||
'border-radius'
|
||||
]
|
||||
// 绘制组
|
||||
opt.views = []
|
||||
this.previewInfo.views.map(view => {
|
||||
const obj = JSON.parse(JSON.stringify(view))
|
||||
const style = obj.style
|
||||
if (obj.type === 'text') {
|
||||
if (
|
||||
style['writing-mode'] === 'horizontal-tb' ||
|
||||
!style['writing-mode']
|
||||
) {
|
||||
if (style['text-align'] === 'center') {
|
||||
const width = parseInt(style.width)
|
||||
const left = parseInt(style.left)
|
||||
style.left = left + width / 2
|
||||
} else if (style['text-align'] === 'right') {
|
||||
const width = parseInt(style.width)
|
||||
const left = parseInt(style.left)
|
||||
style.left = left + width
|
||||
}
|
||||
} else if (style['writing-mode'] === 'vertical-rl') {
|
||||
const right = parseInt(style.right)
|
||||
const lineHeight =
|
||||
parseInt(style['line-height']) || parseInt(style['font-size'])
|
||||
style.left = parseInt(opt.baseInfo.width) - right - lineHeight
|
||||
console.log(right, lineHeight, style.left)
|
||||
}
|
||||
|
||||
if (style['font-family']) {
|
||||
fonts.push(style['font-family'])
|
||||
}
|
||||
}
|
||||
opt.views.push(obj)
|
||||
})
|
||||
// fonts
|
||||
opt.fonts = []
|
||||
this.fonts.map(font => {
|
||||
if (fonts.indexOf(font.name) !== -1) {
|
||||
opt.fonts.push(font)
|
||||
if (style['font-family']) {
|
||||
fonts.push(style['font-family'])
|
||||
}
|
||||
}
|
||||
opt.views.push(obj)
|
||||
})
|
||||
// fonts
|
||||
opt.baseInfo
|
||||
opt.baseInfo.fonts = []
|
||||
this.fonts.map(font => {
|
||||
if (fonts.indexOf(font.name) !== -1) {
|
||||
opt.baseInfo.fonts.push(font)
|
||||
}
|
||||
})
|
||||
console.log('模板🤩', this.tplForm)
|
||||
console.log('预览😘', this.previewInfo)
|
||||
console.log('生成😡', opt)
|
||||
|
||||
// 获取图片地址
|
||||
getPic({ opt })
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
console.log(res)
|
||||
if (data.errcode === 0) {
|
||||
this.tplForm.prev_url = data.url
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
} else {
|
||||
this.$message.error('请按要求填写表单')
|
||||
}
|
||||
})
|
||||
console.log('😡', opt)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -842,17 +1031,27 @@ export default {
|
||||
|
||||
.preview {
|
||||
width: 100%;
|
||||
min-height: 1334px;
|
||||
padding: 20px 0;
|
||||
min-height: 500px;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
.main-box {
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
overflow: hidden;
|
||||
|
||||
.view {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.view.text {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -863,6 +1062,18 @@ export default {
|
||||
.p-mp-edit >>> .jsoneditor-vue {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.p-mp-edit .form-item-color-picker >>> .el-form-item__content {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.p-mp-edit .form-item-color-picker >>> .el-color-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-mp-edit .form-item-color-picker >>> .el-color-picker__trigger {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user