Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 21458125 by hank
Options

图片上传模板预览修改

parent babc733d
Showing with 309 additions and 132 deletions
public/template.html
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
} }
.container { .container {
padding: 0 50px; padding: 0 45px;
background: linear-gradient(to right, #32295E, #5277AB); background: linear-gradient(to right, #32295E, #5277AB);
height: 450px; height: 450px;
width: 800px; width: 800px;
...@@ -82,13 +82,24 @@ ...@@ -82,13 +82,24 @@
.name { .name {
/* padding: 0 20px; */ /* padding: 0 20px; */
border-bottom: #eeeeee 1px solid; border-bottom: #eeeeee 1px solid;
padding-bottom: 20px; padding:10px 0px;
color: white; color: white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0;
margin-bottom: 17px;
}
.name>span {
font-size: 36.25px;
}
.name span {
display: inline-block;
min-width: 30px;
} }
.bottom { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -116,6 +127,7 @@ ...@@ -116,6 +127,7 @@
display: inline-block; display: inline-block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
overflow: hidden;
padding: 0 5px; padding: 0 5px;
width: 60px; width: 60px;
} }
...@@ -126,6 +138,7 @@ ...@@ -126,6 +138,7 @@
line-height: 30px; line-height: 30px;
padding: 0 5px; padding: 0 5px;
width: 220px; width: 220px;
overflow: hidden;
letter-spacing: 1px; letter-spacing: 1px;
/* overflow: hidden; */ /* overflow: hidden; */
} }
...@@ -140,11 +153,17 @@ ...@@ -140,11 +153,17 @@
.h2-right { .h2-right {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px;
}
.h2-right img {
height: 42px;
width: 42px;
} }
.right-icon { .right-icon {
margin-left: 10px; margin-left: 25px;
height: 32px; /* height: 32px; */
} }
</style> </style>
...@@ -155,12 +174,11 @@ ...@@ -155,12 +174,11 @@
<div class="title "> <div class="title ">
<span class="">{{date}}</span> <span class="">{{date}}</span>
</div> </div>
<h2 class="name" class="h2"> <h2 class="h2 name">
<span :class="isEdited(0) + ' ' + isEdit()" @click="edit(0)">{{getValue(0)}}</span> <span :class="isEdited(0) + ' ' + isEdit()" :style="getStyle(0)" @click="edit(0)">{{getValue(0)}}</span>
<div class="h2-right"> <div class="h2-right">
<span :class="isEdited(1) + ' ' + isEdit()" @click="edit(1)">{{getValue(1)}}</span> <span :class="isEdited(1) + ' ' + isEdit()" :style="getStyle(1)" @click="edit(1)">{{getValue(1)}}</span>
<img :src="img" class="isEdit right-icon"></img> <span :class="isEdited(11) + ' ' + isEdit()"><img :src="getValue(11)" class=" right-icon"></img></span>
</div> </div>
<!-- <img src="" alt=""> --> <!-- <img src="" alt=""> -->
</h2> </h2>
...@@ -171,20 +189,20 @@ ...@@ -171,20 +189,20 @@
<div class="bottom-right"> <div class="bottom-right">
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="item-name" :class="isEdited(3) + ' ' + isEdit()" @click="edit(3)">{{getValue(3)}}</span> <span class="item-name" :class="isEdited(3) + ' ' + isEdit()" :style="getStyle(3)" @click="edit(3)">{{getValue(3)}}</span>
<span class="item-des" :class="isEdited(4) + ' ' + isEdit()" @click="edit(4)">{{getValue(4)}}</span> <span class="item-des" :class="isEdited(4) + ' ' + isEdit()" :style="getStyle(4)" @click="edit(4)">{{getValue(4)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="item-name" :class="isEdited(5) + ' ' + isEdit()" @click="edit(5)">{{getValue(5)}}</span> <span class="item-name" :class="isEdited(5) + ' ' + isEdit()" :style="getStyle(5)" @click="edit(5)">{{getValue(5)}}</span>
<span class="item-des" :class="isEdited(6) + ' ' + isEdit()" @click="edit(6)">{{getValue(6)}}</span> <span class="item-des" :class="isEdited(6) + ' ' + isEdit()" :style="getStyle(6)" @click="edit(6)">{{getValue(6)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="item-name" :class="isEdited(7) + ' ' + isEdit()" @click="edit(7)">{{getValue(7)}}</span> <span class="item-name" :class="isEdited(7) + ' ' + isEdit()" :style="getStyle(7)" @click="edit(7)">{{getValue(7)}}</span>
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" @click="edit(8)">{{getValue(8)}}</span> <span class="item-des" :class="isEdited(8) + ' ' + isEdit()" :style="getStyle(8)" @click="edit(8)">{{getValue(8)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="item-name" :class="isEdited(9) + ' ' + isEdit()" @click="edit(9)">{{getValue(9)}}</span> <span class="item-name" :class="isEdited(9) + ' ' + isEdit()" :style="getStyle(9)" @click="edit(9)">{{getValue(9)}}</span>
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" @click="edit(10)">{{getValue(10)}}</span> <span class="item-des" :class="isEdited(10) + ' ' + isEdit()" :style="getStyle(10)" @click="edit(10)">{{getValue(10)}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -231,7 +249,7 @@ ...@@ -231,7 +249,7 @@
} }
// http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html // http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html
// http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg // http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg
var myApp = new Vue({ window.myApp = new Vue({
el: "#myApp", el: "#myApp",
computed() { computed() {
...@@ -246,13 +264,15 @@ ...@@ -246,13 +264,15 @@
window.parent.postMessage(data, '*') window.parent.postMessage(data, '*')
}, },
edit(index) { edit(index) {
this.currentIndex = index; if(getQuery('isEdit')) {
var item = this.list[index] this.currentIndex = index;
console.log(this.currentIndex) var item = this.list[index]
this.message({ console.log(this.currentIndex)
type: 'edit', this.message({
item, index type: 'edit',
}, '*') item, index
}, '*')
}
}, },
getList() { getList() {
this.message({ this.message({
...@@ -263,6 +283,9 @@ ...@@ -263,6 +283,9 @@
getValue(index) { getValue(index) {
return this.list[index] ? this.list[index]['value'] : '' return this.list[index] ? this.list[index]['value'] : ''
}, },
getStyle(index) {
return this.list[index] ? this.list[index]['style'] : ''
},
isEdited(index) { isEdited(index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited' : '' return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
}, },
...@@ -291,7 +314,7 @@ ...@@ -291,7 +314,7 @@
created() { created() {
var vm = this var vm = this
console.log(getQuery('isEdit')) console.log(getQuery('isEdit'))
console.log(JSON.stringify(this.list)) // console.log(JSON.stringify(this.list))
vm.date = this.timeFormate(new Date()) vm.date = this.timeFormate(new Date())
this.timer = setInterval(() => { this.timer = setInterval(() => {
vm.date = this.timeFormate(new Date()) vm.date = this.timeFormate(new Date())
...@@ -309,24 +332,36 @@ ...@@ -309,24 +332,36 @@
vm.filmId = result.filmId vm.filmId = result.filmId
}) })
} else { } else {
vm.getDefaulted()
$.get("http://visual-clouds.bdideal.com/html/1561344823891f3283bf05af5418cb8c86278c29a8ef2.txt", function (result) { if(getQuery('isPreview')) {
console.log(result)
vm.list = JSON.parse(result) } else {
vm.getDefaulted() vm.getDefaulted()
}) $.get("http://visual-clouds.bdideal.com/html/15613603741264cbf7bca249642b599701590785ff808.txt", function (result) {
// console.log(result)
console.log('模板数据加载成功')
vm.list = JSON.parse(result)
vm.getDefaulted()
})
}
} }
}, },
data: { data: {
date: '', date: '',
img: 'data:image/png;base64,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', img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAABVCAYAAAA49ahaAAAJSUlEQVR4nOWda4xV1RXHf3MdBIGBAR1AbBWtCKalBSXBZwoTS6mxVi2ofZimtAyCFGJo07QfmvRLXwmmhTRpNf3WJj4QI7Zgbaw0Wo1KCcrDDkhAio3yGphpkdfw74d1T+8++55779y55zXDP1mZ2ffsc/Y6/7POPvusvfY6TZLIAUYC1wHTgKnAJODjwMVACzDaqdsN9ABHgL1AJ7AL+CfwdnFbpmjKiNShwM1AOzAbmAU0x3Dcs8CbwEtFeQU4GcNx60KapDYBNwLfAOYDY1NoswdYD/wB+DNwLoU2UyF1FNABPAh8os59u4D/Av8p/gXrDlqxruGCOo61H1gD/KZ4vMSQJKljgJXAcoyIangf+CuwBdgG7AEOYLdzJTQDV2J98BSsP56D9cXVcARYjRHcVaNu/yApbrlA0jJJXaqMs5I2SnpQ0jUxtz9ZUoekPxXbqYQuSSskNcfNQdyEzpL0jyonsk3SSkkT4z6RCjJB0sPFdithq6Sb8kjqMEm/ktRbQfEXJd2WEpGVpF3SCxX0OydptaSheSF1qqTtFZTdLGl2xmT6cquk1yrou0XWfWRK6t2SuiOUOyRpoaRCDkiMkiZJDxT19HFc0vysSF2q6AfBOknjckBcX6RN0lMR53BO0g/TJvXHEYp8JGlxDojqjyyUdCLinNbIrDpxUldHNP4vSTNzQE4jMl3SexHn9li9xNbbcJSFblV6Q6SkZYKkNyPO8adJkbokorGXJY3OARlxSouklyLOdXncpN6p8ofSK5JG5ICEJGR4BLHnJC3oy/59efefArxO2Ke5DbgVOJ7Iu3M+0AL8BXNLBugGrgferbZjLVKHAW9gzooABzAX3oH+aDrA0AZsBi53ftsC3AScqrRTocZBf0aY0FPA3ZwfhAIcAr4EnHB+uw5YVXWvKn3DzSp/lx+o49BGZWFE/zq73j51CPAWcK3z27PAXQ1d94GNp7AZiwC7gE8T0Q1Uuv2XEib0KLA4Lu0GKB4Cjjnla4DvRNaMMN9Rko565r4oB7dgHsQfqx+XNNavF2WpS7GpkACbgd/FdblrYC0wLqW2+oNHMT4CjAK+W1bLY/kiSR96V6M9RUuQzB13Xw6sspLM9vjpkdRazVI7CFvKJmxCLk1cAjxOfq12E/B3pzwS460Eh+EmSXu8q/D5lK3AR16t9nZPz31yHPJuxXav4g71w5cYM6kB1ip/ju+tno7zgm3u7f91z8wfA3IRaAV8GdgB3Ju1Ig5+65X/z18w+B8CHMQiPwDOABOBw2lo56AvF3EtNmY8mLAutdAKfIDFhYGFGI0DTgaWeiMlQsEeTmkT2lfMB7aTvdUeA15wyi3ALVB6o5rj7fBsCko1gjbgCezVMcsRwnqvPAdKpLZ7Gzckrk48yNpqfZ7awfrU4Vig1oXFDfuwwK8s0MiDMau+thPzA4AF1F1cAD5FiVAID2wHEgKrXZByu686/zcDMwqUWA6wJT19Ykcb8GRR0uprd3rl6QUsvtPFjpSUSRILsHm0NKz2Ha88uYBN7LnYk4IiaWAc6Vhtp1e+sgBc4f24v8FG1IAkgaStdi/Q65QvK2Cx8wG6gNMJNZ4lkrTas1jIe4A2n9TBPI8PyVmtS2pLgfAKj8wXdqWAwGqfwEYLccBd8NFSwJys5yPuxca182tV7ANCM6oFEl5TNADQFMMxhrqFZjzTjaGBgYI4X2uHOP/3FLA5/QCtDH4cAu7DHlZx+QncJaE9BcJPrlbCfoDBhrWYr+PJGI/ZTHgEdbCAeaVcXE5jaGpAkkIS1hngKsIjqPcLWEyQi6tjbjRrJGGdLvzX/H0Fyh0C0xgcOAzcTzLW6cJ3SO1uptxSZySoQFp4GgtfSsNh/Umv/Hbg+T9OKTPEe1i6jSzQqFPlMLAMe1tKC7spdZm9FD3/Jwg7pq8gu+mURvA0ZjVpEjqR8DNoO3A8mPj7m1d5XioqxYOg75xP+vNTt3vlTVCaTd3obRwoEdPrsCd7mtbpwudpA4QjVD6kFJd6FriM9K98X/vUw1gU8+MJ6lILY7AIleBlqRsYjxOhcgZ4xtmhGfhaaurVh8A6syQU4KuE3z7XE6RrcqLY5nhRbDtzFPUnWVjl/TmI9gvkLU+/ucE2t1KTpF1exS/khNR1ksbngMhAPufpt1dOfKobSiksrZCLHyR6A9XGEew2uwfr8/OC73vlX+MmEvOuwEWSPvCuwlylZwF5ts5APuvpWTPm/yPgEe+3n1N7uWWcyKt1gnmjfH5WE15fFbmOaqSkI97V6EjJCvJqnYEs83g5JmmMX6/Szsu9nY9KujQHJ5WlTCiS6GJlVN1Ka1ObMX+A6wb8I3An+VkHkDbWYSvIA3Ri/JzxK1bqK89ia1Hd1Jh3AEtiUnCgoYMwoQIWEUGoba1u8qs8cz8l6YYc3IppyvWy9FAuVlfbp1ZmiqFYqo/POL+dT5kpPga8VvwbYCcwExspRaLWUOkUNmHW7TW0gXBOlcGINuB5woT2YNMzFQmFvo0/O4EHCIcLTsPSEQ/W4IvhwHOEp0p6gW9SHjldjjr6lhUqxxuyfHlZ93txymhZvi0fS/p6jHob/EVEY52SJuWAjDhkgizdp4+f1HOc/jT8y4hG/y3L8ps1KY3ITEn7I85tTb3H6q8CP4po/KSkh5S+DzYOWazyYZMkPdKf82lEkQ5F5099TnYbZU1UX2S8pGcizuGcpO/197iNKvVFlb8PS5aZfJHym+m3IOnbKnccSZa5+J5Gjh+HgpNVPrUQYIuc5AI5kbmKfhhJllt7aqNtxKXoUNkrbaXs6Zsl3aXs+tsmWWbN1yvo1yvL/j4sjvbiVv4GVc+pv1OWd/+SlMgcK3NjVsruLknvSLolznaTOJFmWRLwqMzkAc5Iel72RYpJMbd/bbH9jZJOV9GhS+YPvTBuDpL8dspo4GFgBbXD3vcDL2PrYjuL8i5V0mlic+5XY/Gh7rdTLq3RVjc2BbIKfxokJqTxlZ8W4FuYf9aP5awF9ws/XZjXbDgWHTKmyn5R2I1lQHuUsIModqT9ka9ZWFacrxCOk08KR7FIlt9jLrxUkNWX04Zg6ZfnYV9Om0E8X047jWUmfhGLwHuVDNbaZkWqjxHAdKxfnILFx07Euo4R2KrEVsyPeQq7fQ9h37Hah33fbxuwldLHwDLD/wCNnsS3EvSf4AAAAABJRU5ErkJggg==',
list: [ list: [
{ {
type: 'text', type: 'text',
name: '楼层', name: '楼层',
value: '', value: '',
description: '', description: '',
style: {
color: 'white'
},
default: { default: {
value: '3F' value: '3F'
} }
...@@ -335,6 +370,9 @@ ...@@ -335,6 +370,9 @@
type: 'text', type: 'text',
name: '楼层', name: '楼层',
value: '', value: '',
style: {
color: 'white'
},
description: '', description: '',
default: { default: {
value: 'SOHO 3Q' value: 'SOHO 3Q'
...@@ -351,76 +389,112 @@ ...@@ -351,76 +389,112 @@
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '0201' value: '0201'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '北京迈动互联科技有限公司' value: '北京迈动互联科技有限公司'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '0202' value: '0202'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '北京数字理想科技有限公司' value: '北京数字理想科技有限公司'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '0203' value: '0203'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '北京妹纸互动科技有限公司' value: '北京妹纸互动科技有限公司'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
default: { default: {
value: '0204' value: '0204'
} }
}, },
{ {
type: 'text', type: 'text',
name: '楼层', name: '门牌号',
value: '', value: '',
description: '', style: {
color: 'white'
},
description: '门牌号',
style: {
color: 'white'
},
default: { default: {
value: '北京妹纸互动科技有限公司' value: '北京妹纸互动科技有限公司'
} }
}, },
{
type: 'icon',
name: 'icon',
value: '',
description: '选择icon',
default: {
value: 'data:image/png;base64,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'
}
},
], ],
currentIndex: '', currentIndex: '',
isEditMode: true isEditMode: true
...@@ -433,12 +507,19 @@ ...@@ -433,12 +507,19 @@
console.log(typeof e.data === "object" && e.data['type'] == 'setData') console.log(typeof e.data === "object" && e.data['type'] == 'setData')
if (typeof e.data === "object" && e.data['type'] == 'setData') { if (typeof e.data === "object" && e.data['type'] == 'setData') {
console.log(myApp.list[e.data.index]) console.log(myApp.list[e.data.index])
myApp.list[e.data.index].value = e.data['value'] myApp.list[e.data.index].value = e.data['value'];
if (e.data['editObj']) {
myApp.list[e.data.index] = e.data['editObj']
}
} }
if (typeof e.data === "object" && e.data['type'] == 'cancelEdit') { if (typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
myApp.currentIndex = '' myApp.currentIndex = ''
} }
if (typeof e.data === "object" && e.data['type'] == 'edit') {
myApp.currentIndex = e.data.index
}
if (typeof e.data === "object" && e.data['type'] == 'setList') { if (typeof e.data === "object" && e.data['type'] == 'setList') {
// myApp.list = JSON.parse(JSON.stringify(e.data.list))
myApp.list = e.data.list myApp.list = e.data.list
} }
if (typeof e.data === "object" && e.data['type'] == 'getList') { if (typeof e.data === "object" && e.data['type'] == 'getList') {
......
src/api/api.js
...@@ -71,4 +71,12 @@ export function updateFilmInfo(filmId, filmData) { ...@@ -71,4 +71,12 @@ export function updateFilmInfo(filmId, filmData) {
export function deleteFilm(filmId) { export function deleteFilm(filmId) {
// 删除影片 // 删除影片
return get(`/myequipment/del/film/info/${filmId}`) return get(`/myequipment/del/film/info/${filmId}`)
}
export function upload(file) {
// 上传文件
let formData = new FormData()
formData.append('resource', file)
return post(`/common/upload/resource`,formData, {
'Content-Type': 'multipart/form-data'
} )
} }
\ No newline at end of file
src/api/index.js
...@@ -38,11 +38,12 @@ export function get (url, params) { ...@@ -38,11 +38,12 @@ export function get (url, params) {
params params
}) })
} }
export function post (url, data) { export function post (url, data, headers = {}) {
return apiRequest({ return apiRequest({
method: 'post', method: 'post',
url, url,
data data,
headers
}) })
} }
export function deleted (url, params) { export function deleted (url, params) {
......
src/views/layout/navbar.vue
<template> <template>
<van-nav-bar :title="title" :left-arrow="typeof leftArrow !== 'undefined' ? true : false" <van-nav-bar :title="title" :left-arrow="typeof leftArrow !== 'undefined' ? true : false"
@click-left="onClickLeft" @click-left="myonClickLeft"
@click-right="onClickRight"> @click-right="onClickRight">
<div slot="right" > <div slot="right" >
<van-icon v-show="showNotice" @click="goNotice" name="chat-o" size="25" /> <van-icon v-show="showNotice" @click="goNotice" name="chat-o" size="25" />
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script> <script>
export default { export default {
props: ['left-arrow', 'title'], props: ['left-arrow', 'title', 'onClickLeft'],
data() { data() {
return { return {
left: false, left: false,
...@@ -33,8 +33,12 @@ export default { ...@@ -33,8 +33,12 @@ export default {
} }
}, },
methods:{ methods:{
onClickLeft() { myonClickLeft() {
this.$router.back() if(this.onClickLeft) {
this.onClickLeft()
} else {
this.$router.back()
}
}, },
onClickRight() { onClickRight() {
......
src/views/tempaltes/edit.vue
<template> <template>
<div class="edit-container"> <div class="edit-container">
<NavBar title="模板编辑" left-arrow></NavBar> <NavBar title="模板编辑" left-arrow></NavBar>
...@@ -12,7 +13,8 @@ ...@@ -12,7 +13,8 @@
<van-icon name="eye-o"/>预览 <van-icon name="eye-o"/>预览
</div> </div>
<div class="left-item" @click="pub"> <div class="left-item" @click="pub">
<svg-icon icon-class="guide" />发布</div> <svg-icon icon-class="guide"/>发布
</div>
</div> </div>
<div class="top-right"> <div class="top-right">
方案名称： 方案名称：
...@@ -25,16 +27,48 @@ ...@@ -25,16 +27,48 @@
v-if="loaded" v-if="loaded"
:style="{ :style="{
}" }"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
:src="'http://127.0.0.1:9000/template.html' + '?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
frameborder="0" frameborder="0"
></iframe> ></iframe>
<!-- :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date" -->
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="title">编辑栏</div> <div class="title">编辑栏</div>
<div class="edit-area"> <div class="edit-area">
<div v-if="isEdited"> <div v-if="false">
<input type="text" v-model="editObj.value" @keyup="valueChange"> <van-collapse v-model="activeName" accordion>
<van-collapse-item
v-for="(item, index) of templateData.listData"
:key="index"
:title="item.name"
:name="index"
>
<div class="style-container">style</div>
<div v-if="true">
<input type="text" v-model="item.value" @keyup="valueChange2(item,index)">
<br>
<button v-if="item.type === 'image'">上传</button>
<button v-if="item.type === 'video'">上传</button>
<!-- <button @click="cancel">取消编辑</button> -->
</div>
</van-collapse-item>
</van-collapse>
</div>
<div class="edit-input" v-if="isEdited">
<input type="text" :disabled="editObj.type !== 'text'" v-model="editObj.value" @keyup="valueChange">
<br> <br>
<div>
<van-uploader result-type="dataUrl" v-if="editObj.type == 'image'" :after-read="uploadAfter">
<van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>
<br>
<br>
</div>
<button @click="cancel">取消编辑</button> <button @click="cancel">取消编辑</button>
</div> </div>
</div> </div>
...@@ -56,27 +90,32 @@ ...@@ -56,27 +90,32 @@
</div> </div>
<div class="list"> <div class="list">
<van-checkbox-group v-model="deviceChecked"> <van-checkbox-group v-model="deviceChecked">
<div class="bottom-item" @click="toggle(index)" v-for="(item, index) in deviceList" :key="index"> <div
class="bottom-item"
@click="toggle(index)"
v-for="(item, index) in deviceList"
:key="index"
>
<van-checkbox :name="item" ref="checkboxes"></van-checkbox> <van-checkbox :name="item" ref="checkboxes"></van-checkbox>
<div class="img"> <div class="img">
<img :src="item.icon" alt=""> <img :src="item.icon" alt>
</div>
<div class="name">
{{item.name}}
</div>
<div class="id">
{{item.clientId}}
</div> </div>
<div class="name">{{item.name}}</div>
<div class="id">{{item.clientId}}</div>
</div> </div>
</van-checkbox-group> </van-checkbox-group>
</div> </div>
</div> </div>
</van-popup> </van-popup>
<van-popup v-model="isPreview" style="width:100%">
<preview v-if="isPreview" :myonClickLeft="colsePreview"></preview>
</van-popup>
</div> </div>
</template> </template>
<script> <script>
import NavBar from "@/views/layout/navbar"; import NavBar from "@/views/layout/navbar";
import preview from './preview'
import { import {
getTempalteDetail, getTempalteDetail,
getFilmDetail, getFilmDetail,
...@@ -84,10 +123,11 @@ import { ...@@ -84,10 +123,11 @@ import {
createFilm createFilm
} from "@/api/api"; } from "@/api/api";
import axios from "axios"; import axios from "axios";
import { setTimeout } from 'timers'; import { setTimeout } from "timers";
export default { export default {
data() { data() {
return { return {
activeName: "0",
templateData: { templateData: {
height: 450, height: 450,
width: 800, width: 800,
...@@ -103,16 +143,17 @@ export default { ...@@ -103,16 +143,17 @@ export default {
mode: "", mode: "",
loaded: false, loaded: false,
show: false, show: false,
isPreview: false,
deviceList: [ deviceList: [
{ {
clientId: 'maxrocky', clientId: "maxrocky",
clientSecret: 'maxrocky', clientSecret: "maxrocky",
name: 'Vmatrix', name: "Vmatrix",
icon: require('../../../public/img/ps/box.png') icon: require("../../../public/img/ps/box.png")
} }
], ],
deviceChecked: [], deviceChecked: [],
name: '', name: "",
date: Date.now() date: Date.now()
}; };
}, },
...@@ -129,7 +170,7 @@ export default { ...@@ -129,7 +170,7 @@ export default {
} }
if (typeof e.data === "object" && e.data["type"] == "getList") { if (typeof e.data === "object" && e.data["type"] == "getList") {
vm.templateData.listData = e.data.list; vm.templateData.listData = e.data.list;
console.log('12121321321') console.log("12121321321");
} }
// var color = e.data; // var color = e.data;
// document.getElementById("color").style.backgroundColor = color; // document.getElementById("color").style.backgroundColor = color;
...@@ -156,13 +197,23 @@ export default { ...@@ -156,13 +197,23 @@ export default {
}, },
methods: { methods: {
message(data) { message(data) {
window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com"); // window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com");
window.frames[0].postMessage(data, "http://127.0.0.1:9000");
}, },
valueChange() { valueChange() {
this.message({ this.message({
type: "setData", type: "setData",
index: this.editIndex, index: this.editIndex,
value: this.editObj.value value: this.editObj.value,
// editObj: 'thi'
});
},
valueChange2(editObj, index) {
this.message({
type: "setData",
index: index,
value: editObj.value,
editObj
}); });
}, },
cancel() { cancel() {
...@@ -171,35 +222,45 @@ export default { ...@@ -171,35 +222,45 @@ export default {
type: "cancelEdit" type: "cancelEdit"
}); });
}, },
getDefaulted() {
this.templateData.listData = this.templateData.listData.map(function(
item
) {
return (item = Object.assign(item, item.default));
});
},
getTempalteDetail() { getTempalteDetail() {
getTempalteDetail(this.$route.query.templateId).then(res => { getTempalteDetail(this.$route.query.templateId).then(res => {
this.templateData.frameId = res.data.frameId; this.templateData.frameId = res.data.frameId;
this.templateData.resourceUrl = res.data.resourceUrl; this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.resourceId = res.data.resourceId; this.templateData.resourceId = res.data.resourceId;
this.templateData.frameUrl = res.data.frameUrl; // this.templateData.frameUrl = res.data.frameUrl;
this.templateData.frameUrl = 'http://127.0.0.1:9000/template.html';
console.log("模板详情"); console.log("模板详情");
axios.get('http://visual-clouds.bdideal.com/html/156076616690429b1f3072101465b906a536cf608f824.txt').then(res => { axios.get(res.data.resourceUrl).then(res => {
console.log(res.data); this.templateData.listData = res.data;
this.getDefaulted();
// console.log(res.data, '++++++++++++++++++++++');
}); });
this.loaded = true this.loaded = true;
}); });
}, },
getFilmDetail() { getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => { getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "影片详情"); console.log(res.data, "影片详情");
this.templateData.filmId = res.data.filmId; this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName this.name = res.data.filmName;
this.templateData.resourceUrl = res.data.resourceUrl; this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl; this.templateData.frameUrl = res.data.frameUrl;
this.templateData.listData = JSON.parse(res.data.filmData); this.templateData.listData = JSON.parse(res.data.filmData);
this.loaded = true this.loaded = true;
}); });
}, },
publish() { publish() {
console.log(this.templateData.listData) console.log(this.templateData.listData);
if(!this.templateData.listData.length) { if (!this.templateData.listData.length) {
alert("数据为空") alert("数据为空");
return return;
} }
if (this.mode === "film") { if (this.mode === "film") {
updateFilmInfo( updateFilmInfo(
...@@ -207,7 +268,7 @@ export default { ...@@ -207,7 +268,7 @@ export default {
JSON.stringify(this.templateData.listData) JSON.stringify(this.templateData.listData)
).then(res => { ).then(res => {
this.show = false; this.show = false;
this.$toast.success('发布成功'); this.$toast.success("发布成功");
console.log(res, "更新影片成功"); console.log(res, "更新影片成功");
this.$router.back(); this.$router.back();
}); });
...@@ -222,7 +283,7 @@ export default { ...@@ -222,7 +283,7 @@ export default {
filmData: JSON.stringify(this.templateData.listData), filmData: JSON.stringify(this.templateData.listData),
filmName: this.name filmName: this.name
}).then(res => { }).then(res => {
this.$toast.success('发布成功'); this.$toast.success("发布成功");
console.log(res, "创建影片成功"); console.log(res, "创建影片成功");
this.show = false; this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => { // updateFilmInfo(res.data.filmId, "数据").then(res => {
...@@ -235,33 +296,39 @@ export default { ...@@ -235,33 +296,39 @@ export default {
}, },
pub() { pub() {
this.message({ this.message({
type: 'getList' type: "getList"
}) });
if (!this.name) { if (!this.name) {
this.$toast('请填写方案名称') this.$toast("请填写方案名称");
} else { } else {
this.show = true; this.show = true;
} }
}, },
enterSubmit() { enterSubmit() {
this.message({ this.message({
type: 'getList' type: "getList"
}) });
setTimeout(() => { setTimeout(() => {
this.publish() this.publish();
}, 1000) }, 1000);
},
uploadAfter(file) {
console.log(file)
this.editObj.value = file.content
this.valueChange()
}, },
preview() { preview() {
this.message({ this.message({
type: 'getList' type: "getList"
}) });
window.localStorage.setItem('preview', JSON.stringify(this.templateData)) setTimeout(() => {
this.$router.push({name: "preview"}) window.localStorage.setItem("preview", JSON.stringify(this.templateData));
// this.$router.push({ name: "preview" });
this.isPreview = true
}, 100)
// setTimeout(() => { // setTimeout(() => {
// let routeData = this.$router.resolve({ // let routeData = this.$router.resolve({
// name: "preview", // name: "preview",
// params: this.$route.query // params: this.$route.query
...@@ -269,12 +336,16 @@ export default { ...@@ -269,12 +336,16 @@ export default {
// window.open(routeData.href, "_blank"); // window.open(routeData.href, "_blank");
// }, 1000) // }, 1000)
}, },
colsePreview() {
this.isPreview = false
},
toggle(index) { toggle(index) {
this.$refs.checkboxes[index].toggle(); this.$refs.checkboxes[index].toggle();
} }
}, },
components: { components: {
NavBar NavBar,
preview
} }
}; };
</script> </script>
...@@ -332,24 +403,31 @@ export default { ...@@ -332,24 +403,31 @@ export default {
padding-top: 100px; padding-top: 100px;
width: 97%; width: 97%;
height: 500px; height: 500px;
} }
} }
.content-right { .content-right {
width: 300px; width: 300px;
text-align: left; text-align: left;
padding: 17px 0 0 20px;
font-size: 20px; font-size: 20px;
background: #d0d0d0; background: #d0d0d0;
height: calc(100vh - 96px); height: calc(100vh - 96px);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
.title {
padding: 17px 0 0 20px;
}
.edit-area { .edit-area {
padding-top: 20px;
.edit-input {
padding: 17px 0 0 20px;
}
input { input {
margin-top: 17px; margin-top: 17px;
display: block; display: block;
height: 39px; height: 39px;
padding-left: 8px; padding-left: 8px;
border: none;
} }
} }
} }
...@@ -416,12 +494,12 @@ export default { ...@@ -416,12 +494,12 @@ export default {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
img { img {
width:165px; width: 165px;
height:93px; height: 93px;
} }
} }
.name { .name {
font-size: 20px; font-size: 20px;
color: #333333; color: #333333;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
...@@ -429,7 +507,7 @@ export default { ...@@ -429,7 +507,7 @@ export default {
.id { .id {
padding-top: 5px; padding-top: 5px;
font-size: 15px; font-size: 15px;
color:rgba(51,51,51,0.8); color: rgba(51, 51, 51, 0.8);
} }
} }
} }
......
src/views/tempaltes/preview.vue
<template> <template>
<div class="edit-container"> <div class="edit-container">
<NavBar title="预览" left-arrow></NavBar> <NavBar title="预览" :onClickLeft="myonClickLeft" left-arrow></NavBar>
<div class="content"> <div class="content">
<div class="content-left"> <div class="content-left">
<iframe <iframe
@load="getData"
class="iframe" class="iframe"
v-show="loaded" v-show="loaded"
:src="templateData.frameUrl+'?isPreview=1'" :src="templateData.frameUrl+'?isPreview=1'"
...@@ -16,7 +17,9 @@ ...@@ -16,7 +17,9 @@
<script> <script>
import NavBar from "@/views/layout/navbar"; import NavBar from "@/views/layout/navbar";
// import { setTimeout } from 'timers';
export default { export default {
props: ['myonClickLeft'],
data() { data() {
return { return {
templateData: { templateData: {
...@@ -38,36 +41,37 @@ export default { ...@@ -38,36 +41,37 @@ export default {
}; };
}, },
created() { created() {
if (this.$route.query.filmId) { // if (this.$route.query.filmId) {
this.mode = "film"; // this.mode = "film";
this.getFilmDetail(); // this.getFilmDetail();
} // }
if (this.$route.query.templateId) { // if (this.$route.query.templateId) {
this.mode = "template"; // this.mode = "template";
this.getTempalteDetail(); // this.getTempalteDetail();
} // }
this.getData()
}, },
mounted() { mounted() {
var vm = this // var vm = this
window.onload = function() { // vm.message({
window.frames[0].postMessage( // type: 'setList',
"getcolor", // list: vm.templateData.listData
"http://visual-clouds.bdideal.com" // })
); this.getData()
vm.message({
type: 'setList',
list: vm.templateData.listData
})
};
}, },
methods: { methods: {
message(data) { message(data) {
window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com"); // window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com");
window.frames[1].postMessage(data, "http://127.0.0.1:9000");
}, },
getData() { getData() {
this.loaded = true this.loaded = true
this.templateData = JSON.parse(window.localStorage.getItem('preview')) this.templateData = JSON.parse(window.localStorage.getItem('preview'))
this.message({
type: 'setList',
list: this.templateData.listData
})
} }
}, },
components: { components: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment