模板列表

src/views/tempaltes/edit.vue

@@ -9,7 +9,7 @@
             <iframe class="iframe" :style="{
         height: templateData.height + 'px',
         width: templateData.width + 'px'
-      }" :src="templateData.frameId+'?isEdit=1'" frameborder="0"></iframe>
+      }" :src="templateData.frameUrl+'?isEdit=1'" frameborder="0"></iframe>
         </div>
         <div class="content-right"> 
           <div class="title">
@@ -31,6 +31,7 @@
 <script>
 import NavBar from '@/views/layout/navbar'
 import { getTempalteDetail, getFilmDetail, updateFilmInfo, createFilm } from '@/api/api';
+import axios from 'axios'
 export default {
   data() {
     return {
@@ -38,7 +39,9 @@ export default {
         height: 450,
         width: 800,
         "resourceId": "string",
-        frameId: "http://localhost:9000/template.html",
+        "frameId": "string",
+        filmId:'',
+        frameUrl: "http://localhost:9000/template.html",
         listData: []
       },
       editObj: {},
@@ -65,6 +68,7 @@ export default {
     );
     if (this.$route.query.filmId) {
       this.mode = 'film'
+      this.getFilmDetail()
     }
     if (this.$route.query.filmId) {
       this.mode = 'template'
@@ -95,17 +99,26 @@ export default {
     },
     getTempalteDetail () {
       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(this.$route.query.filmId).then(res => {
         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() {
       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 , '更新影片成功')
             this.$router.back()
           })
@@ -115,9 +128,9 @@ export default {
             "clientId": "maxrocky",
             "clientSecret": "maxrocky",
             "templateId": this.$route.query.templateId,
-            "resourceId": "string",
-            "frameId": "string",
-            "filmData": "数据",
+            "resourceId": this.templateData.resourceId,
+            "frameId": this.templateData.frameId,
+            "filmData": JSON.stringify(this.templateData.listData),
             "filmName": "影片名称"
           }).then(res => {
             console.log(res , '创建影片成功')

src/views/tempaltes/index.vue

@@ -22,11 +22,13 @@
           <!-- slides -->
           <swiper-slide v-for="(item, index) in list" :key="index">
             <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>
               <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>
@@ -57,15 +59,15 @@ export default {
 
       },
       list: [
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
-        { name: '1' },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
+        { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
       ]
     }
   },
@@ -84,6 +86,7 @@ export default {
     getList() {
       getTempalteList().then(res => {
         console.log(res)
+        this.list = res.data.list
       })
     }
   },
@@ -141,7 +144,10 @@ export default {
         }
         
         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;
       }
       .template-item-bottom {