Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 896b4fff by hank
Options

模板列表

parent aa6a86ac
Showing with 38 additions and 19 deletions
src/views/tempaltes/edit.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<iframe class="iframe" :style="{ <iframe class="iframe" :style="{
height: templateData.height + 'px', height: templateData.height + 'px',
width: templateData.width + 'px' width: templateData.width + 'px'
}" :src="templateData.frameId+'?isEdit=1'" frameborder="0"></iframe> }" :src="templateData.frameUrl+'?isEdit=1'" frameborder="0"></iframe>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="title"> <div class="title">
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
<script> <script>
import NavBar from '@/views/layout/navbar' import NavBar from '@/views/layout/navbar'
import { getTempalteDetail, getFilmDetail, updateFilmInfo, createFilm } from '@/api/api'; import { getTempalteDetail, getFilmDetail, updateFilmInfo, createFilm } from '@/api/api';
import axios from 'axios'
export default { export default {
data() { data() {
return { return {
...@@ -38,7 +39,9 @@ export default { ...@@ -38,7 +39,9 @@ export default {
height: 450, height: 450,
width: 800, width: 800,
"resourceId": "string", "resourceId": "string",
frameId: "http://localhost:9000/template.html", "frameId": "string",
filmId:'',
frameUrl: "http://localhost:9000/template.html",
listData: [] listData: []
}, },
editObj: {}, editObj: {},
...@@ -65,6 +68,7 @@ export default { ...@@ -65,6 +68,7 @@ export default {
); );
if (this.$route.query.filmId) { if (this.$route.query.filmId) {
this.mode = 'film' this.mode = 'film'
this.getFilmDetail()
} }
if (this.$route.query.filmId) { if (this.$route.query.filmId) {
this.mode = 'template' this.mode = 'template'
...@@ -95,17 +99,26 @@ export default { ...@@ -95,17 +99,26 @@ export default {
}, },
getTempalteDetail () { getTempalteDetail () {
getTempalteDetail(this.$route.query.templateId).then(res => { getTempalteDetail(this.$route.query.templateId).then(res => {
console.log(res.data, '模板详情') this.templateData.frameId = res.data.frameId
this.templateData.resourceUrl = res.data.resourceUrl
this.templateData.frameUrl = res.data.frameUrl
axios.get('res.data.resourceUrl').then(res => {
console.log(res.data)
})
}) })
}, },
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.resourceUrl = res.data.resourceUrl
this.templateData.frameUrl = res.data.frameUrl
this.templateData.listData = JSON.parse(res.data.filmData)
}) })
}, },
publish() { publish() {
if (this.mode === 'film') { if (this.mode === 'film') {
updateFilmInfo(this.$route.query.filmId, '数据').then(res => { updateFilmInfo(this.$route.query.filmId, JSON.stringify(this.templateData.listData)).then(res => {
console.log(res , '更新影片成功') console.log(res , '更新影片成功')
this.$router.back() this.$router.back()
}) })
...@@ -115,9 +128,9 @@ export default { ...@@ -115,9 +128,9 @@ export default {
"clientId": "maxrocky", "clientId": "maxrocky",
"clientSecret": "maxrocky", "clientSecret": "maxrocky",
"templateId": this.$route.query.templateId, "templateId": this.$route.query.templateId,
"resourceId": "string", "resourceId": this.templateData.resourceId,
"frameId": "string", "frameId": this.templateData.frameId,
"filmData": "数据", "filmData": JSON.stringify(this.templateData.listData),
"filmName": "影片名称" "filmName": "影片名称"
}).then(res => { }).then(res => {
console.log(res , '创建影片成功') console.log(res , '创建影片成功')
......
src/views/tempaltes/index.vue
...@@ -22,11 +22,13 @@ ...@@ -22,11 +22,13 @@
<!-- slides --> <!-- slides -->
<swiper-slide v-for="(item, index) in list" :key="index"> <swiper-slide v-for="(item, index) in list" :key="index">
<div class="template-item"> <div class="template-item">
<div class="template-item-top"> <div class="template-item-top" :style="{
'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
}">
<div class="tag">推荐</div> <div class="tag">推荐</div>
</div> </div>
<div class="template-item-bottom"> <div class="template-item-bottom">
<div class="template-item-title">{{index}}</div> <div class="template-item-title">{{item.templateName}}</div>
<div class="template-item-tips"> <div class="template-item-tips">
为您量身打造最合适的可视化方案 为您量身打造最合适的可视化方案
</div> </div>
...@@ -57,15 +59,15 @@ export default { ...@@ -57,15 +59,15 @@ export default {
}, },
list: [ list: [
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
{ name: '1' }, { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
] ]
} }
}, },
...@@ -84,6 +86,7 @@ export default { ...@@ -84,6 +86,7 @@ export default {
getList() { getList() {
getTempalteList().then(res => { getTempalteList().then(res => {
console.log(res) console.log(res)
this.list = res.data.list
}) })
} }
}, },
...@@ -141,7 +144,10 @@ export default { ...@@ -141,7 +144,10 @@ export default {
} }
height:351px; height:351px;
background:rgba(255,255,255,1); background-color:rgba(255,255,255,1);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-shadow:0px 7px 49px 5px rgba(73,73,73,0.18) inset; box-shadow:0px 7px 49px 5px rgba(73,73,73,0.18) inset;
} }
.template-item-bottom { .template-item-bottom {
......
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