diff --git a/src/api/mp_share.js b/src/api/mp_share.js
new file mode 100644
index 0000000..0f48f3e
--- /dev/null
+++ b/src/api/mp_share.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getPic(data) {
+ return request({
+ url: '/games/mp_share/get_pic',
+ method: 'post',
+ data
+ })
+}
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 3a71ff8..328f940 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -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'),
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 5b0612e..523b517 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -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 {
diff --git a/src/views/games/details/achievement/index.vue b/src/views/games/details/achievement/index.vue
new file mode 100644
index 0000000..ba74000
--- /dev/null
+++ b/src/views/games/details/achievement/index.vue
@@ -0,0 +1,305 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 称号
+ 代币
+ 其他
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 是
+ 否
+
+
+ 保存
+ 删除
+
+
+
+
+
+
+
+ 暂无成就，请添加成就配置
+
+
+
新增成就
+
+
- {{ item.text }}
+
+ {{ item.text }}
@@ -153,7 +152,7 @@
@@ -184,6 +183,39 @@
>
+
+
+ 用于水印元素
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ al.label }}
+
+
+
+
+
+
+
+
+
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;
+ }
+ }
}
}
@@ -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%;
+}