Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 304210bb by hank
Options

修改预览逻辑

parent a4d00474
Showing with 132 additions and 103 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<transition :name="transitionName" > <transition :name="transitionName" >
<keep-alive v-if="$route.meta.keepAlive"> <keep-alive v-show="$route.meta.keepAlive">
<router-view class="child-view"/> <router-view class="child-view"/>
</keep-alive> </keep-alive>
<router-view class="child-view" v-else/> <router-view class="child-view" v-show="!$route.meta.keepAlive"/>
</transition> </transition>
</div> </div>
...@@ -20,16 +20,16 @@ export default { ...@@ -20,16 +20,16 @@ export default {
}, },
watch: { watch: {
$route: function() { $route: function() {
let isBack = this.$router.isBack // let isBack = this.$router.isBack
if (isBack) { // if (isBack) {
this.transitionName = 'slide-right' // this.transitionName = 'slide-right'
console.log(this.transitionName, 'pop动画') // console.log(this.transitionName, 'pop动画')
} else { // } else {
this.transitionName = 'slide-left' // this.transitionName = 'slide-left'
console.log(this.transitionName, 'push动画') // console.log(this.transitionName, 'push动画')
} // }
// 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退 // // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
this.$router.isBack = false // this.$router.isBack = false
} }
}, },
created () { created () {
......
src/router/index.js
...@@ -4,24 +4,24 @@ import { setToken, getToken } from '@/utils/auth' ...@@ -4,24 +4,24 @@ import { setToken, getToken } from '@/utils/auth'
// import Home from '@/views/Home.vue' // import Home from '@/views/Home.vue'
import Login from '@/views/login/index.vue' import Login from '@/views/login/index.vue'
import User from '@/views/user/index.vue' import User from '@/views/user/index.vue'
import About from '@/views/user/about.vue' // import About from '@/views/user/about.vue'
import Help from '@/views/user/help.vue' // import Help from '@/views/user/help.vue'
import UserDevice from '@/views/user/device.vue' // import UserDevice from '@/views/user/device.vue'
import Userfilms from '@/views/user/films.vue' // import Userfilms from '@/views/user/films.vue'
import Device from '@/views/device/index.vue' import Device from '@/views/device/index.vue'
import Groups from '@/views/groups/index.vue' import Groups from '@/views/groups/index.vue'
import DeviceDetail from '@/views/device/detail.vue' // import DeviceDetail from '@/views/device/detail.vue'
import DeviceAdd from '@/views/device/add.vue' // import DeviceAdd from '@/views/device/add.vue'
import Tempaltes from '@/views/tempaltes/index.vue' import Tempaltes from '@/views/tempaltes/index.vue'
// import TempaltesAll from '@/views/tempaltes/all.vue' // import TempaltesAll from '@/views/tempaltes/all.vue'
import TempalteEdit from '@/views/tempaltes/editMore.vue' import TempalteEdit from '@/views/tempaltes/editMore.vue'
import TempaltePreview from '@/views/tempaltes/preview.vue' import TempaltePreview from '@/views/tempaltes/preview.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue' import TempalteDetail from '@/views/tempaltes/detail.vue'
import FilmDetail from '@/views/tempaltes/filmDetail.vue' import FilmDetail from '@/views/tempaltes/filmDetail.vue'
import FilmDevice from '@/views/tempaltes/filmDevice.vue' // import FilmDevice from '@/views/tempaltes/filmDevice.vue'
import Notice from '@/views/notice/index.vue' // import Notice from '@/views/notice/index.vue'
import NoticeDetail from '@/views/notice/detail.vue' // import NoticeDetail from '@/views/notice/detail.vue'
import Svg from '@/views/svg-icons/index.vue' // import Svg from '@/views/svg-icons/index.vue'
Vue.use(Router) Vue.use(Router)
const router = new Router({ const router = new Router({
...@@ -43,42 +43,42 @@ const router = new Router({ ...@@ -43,42 +43,42 @@ const router = new Router({
{ path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } }, { path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
{ path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } }, { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } }, // { path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } },
{ path: '/user', name: 'User', component: User, meta: { keepAlive: true } }, { path: '/user', name: 'User', component: User, meta: { keepAlive: true } },
{ path: '/user/help', name: 'Help', component: Help, meta: { keepAlive: true } }, // { path: '/user/help', name: 'Help', component: Help, meta: { keepAlive: true } },
] ]
}, },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } }, { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/tempaltes/filmdetail', name: 'FilmDetail', component: FilmDetail, meta: { keepAlive: false } }, { path: '/tempaltes/filmdetail', name: 'FilmDetail', component: FilmDetail, meta: { keepAlive: false } },
{ path: '/tempaltes/filmdevice', name: 'FilmDetail', component: FilmDevice, meta: { keepAlive: false } }, // { path: '/tempaltes/filmdevice', name: 'FilmDetail', component: FilmDevice, meta: { keepAlive: false } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } }, { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } }, // { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } },
{ path: '/user/device', name: 'UserDevice', component: UserDevice, meta: { keepAlive: true } }, // { path: '/user/device', name: 'UserDevice', component: UserDevice, meta: { keepAlive: true } },
{ path: '/user/films', name: 'UserFilms', component: Userfilms, meta: { keepAlive: true } }, // { path: '/user/films', name: 'UserFilms', component: Userfilms, meta: { keepAlive: true } },
{ // {
path: '/notice', // path: '/notice',
name: 'Notice', // name: 'Notice',
component: Notice // component: Notice
}, // },
{ // {
path: '/notice/detail', // path: '/notice/detail',
name: 'NoticeDetail', // name: 'NoticeDetail',
component: NoticeDetail // component: NoticeDetail
}, // },
{ // {
path: '/svg-icon', // path: '/svg-icon',
name: 'svg-icon', // name: 'svg-icon',
component: Svg // component: Svg
}, // },
{ // {
path: '/about', // path: '/about',
name: 'about', // name: 'about',
// route level code-splitting // // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') // // component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
component: About // component: About
}, // },
{ {
path: '/preview', path: '/preview',
name: 'preview', name: 'preview',
......
src/views/tempaltes/editMore.vue
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
> >
<div class="content-left-top"> <div class="content-left-top">
<div class="page-manager" @click="showSheet = true"> <div class="page-manager" @click="showSheet = true">
<img src="../../assets/img//manager.png" alt /> <img src="../../assets/img//manager.png" alt />
页面管理 页面管理
</div> </div>
<div class="page-count"> <div class="page-count">
...@@ -305,17 +305,18 @@ import { ...@@ -305,17 +305,18 @@ import {
import axios from "axios"; import axios from "axios";
import draggable from "vuedraggable"; import draggable from "vuedraggable";
import editMenu from "./editMenu"; import editMenu from "./editMenu";
import { setTimeout } from "timers"; const listenRouterBack = function() {
window.wx.miniProgram.navigateBack();
};
export default { export default {
data() { data() {
return { return {
activeName: "0", activeName: "0",
canvasImg: "", canvasImg: "",
gifloaded: false, gifloaded: false,// gif 图加载控制
is_mini_token: false, is_mini_token: false,
time: new Date().getTime(), time: new Date().getTime(),
showSheet: false, showSheet: false, // 页面管理菜单显示控制
swiperOption: { swiperOption: {
slidesPerView: "auto", slidesPerView: "auto",
observeSlideChildren: true, observeSlideChildren: true,
...@@ -380,10 +381,22 @@ export default { ...@@ -380,10 +381,22 @@ export default {
} }
}, },
watch: { watch: {
currentPage: function() { currentPage: function() { // 页面改变时 改变编辑项的索引
this.itemListIndex = 0 this.itemListIndex = 0;
} }
}, },
activated() {
document.title = "编辑作品";
window.addEventListener("popstate", listenRouterBack, false);
// this.currentPage = JSON.parse(JSON.stringify(this.currentPage))
this.goPage(0)
},
deactivated() {
window.removeEventListener("popstate", listenRouterBack, false);
},
destroyed() {
window.removeEventListener("popstate", listenRouterBack, false);
},
created() { created() {
let ua = window.navigator.userAgent; let ua = window.navigator.userAgent;
//$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua); //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
...@@ -392,14 +405,16 @@ export default { ...@@ -392,14 +405,16 @@ export default {
} else { } else {
this.isIos = false; this.isIos = false;
} }
window.onunload = function() { // window.onunload = function() {
window.wx.miniProgram.navigateBack({}); // window.wx.miniProgram.navigateBack({});
}; // };
window.addEventListener("popstate", () => { window.addEventListener("popstate", listenRouterBack, false);
window.wx.miniProgram.navigateBack(); // window.addEventListener("popstate", () => {
console.log("wx.miniProgram.navigateBack()"); // window.wx.miniProgram.navigateBack();
}); // console.log("wx.miniProgram.navigateBack()");
// });
let vm = this; let vm = this;
window.vm = this;
if (sessionStorage.getItem("is_mini_token")) { if (sessionStorage.getItem("is_mini_token")) {
this.is_mini_token = true; this.is_mini_token = true;
...@@ -460,7 +475,11 @@ export default { ...@@ -460,7 +475,11 @@ export default {
// }, 1000); // }, 1000);
}, },
methods: { methods: {
message(data) { // iframe 发送消息 listenRouterBack() {
window.wx.miniProgram.navigateBack();
},
message(data) {
// iframe 发送消息
window.frames["tiframe"].postMessage( window.frames["tiframe"].postMessage(
data, data,
"https://visual-clouds.bdideal.com" "https://visual-clouds.bdideal.com"
...@@ -495,15 +514,15 @@ export default { ...@@ -495,15 +514,15 @@ export default {
}); });
}, },
NextSlider() { NextSlider() {
if(this.currentPage < this.templateData.listData.length - 1) { if (this.currentPage < this.templateData.listData.length - 1) {
++this.currentPage ++this.currentPage;
this.goPage(this.currentPage) this.goPage(this.currentPage);
} }
}, },
PreSlider() { PreSlider() {
if(this.currentPage >= 1) { if (this.currentPage >= 1) {
--this.currentPage --this.currentPage;
this.goPage(this.currentPage) this.goPage(this.currentPage);
} }
}, },
setClipImg(show) { setClipImg(show) {
...@@ -810,9 +829,9 @@ export default { ...@@ -810,9 +829,9 @@ export default {
"preview", "preview",
JSON.stringify(this.templateData) JSON.stringify(this.templateData)
); );
// this.$router.push({ name: "preview" }); this.$router.push({ name: "preview" });
// history.pushState(null, null, document.URL); // history.pushState(null, null, document.URL);
this.isPreview = true; // this.isPreview = true;
}, 100); }, 100);
// setTimeout(() => { // setTimeout(() => {
...@@ -1084,7 +1103,7 @@ export default { ...@@ -1084,7 +1103,7 @@ export default {
} }
} }
.isIos.iframe-container { .isIos.iframe-container {
.arrow-left { .arrow-left {
left: 0; left: 0;
} }
.arrow-right { .arrow-right {
...@@ -1133,7 +1152,6 @@ export default { ...@@ -1133,7 +1152,6 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.isIos .iframe { .isIos .iframe {
box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
} }
.iframe { .iframe {
......
src/views/tempaltes/preview.vue
<template> <template>
<div class="edit-container"> <div class="edit-container">
<NavBar title="预览" :onClickLeft="myonClickLeft" left-arrow></NavBar> <NavBar title="预览" v-show="!is_mini_token" :onClickLeft="navBack" left-arrow></NavBar>
<div class="content"> <div class="content">
<div class="content-left"> <div class="content-left">
<iframe <iframe
@load="getData" @load="getData"
class="iframe preview-iframe" class="iframe preview-iframe"
v-show="loaded" v-if="loaded"
id="previewiframe" id="previewiframe"
name="previewiframe" name="previewiframe"
scrolling="no" scrolling="no"
...@@ -22,9 +22,10 @@ ...@@ -22,9 +22,10 @@
import NavBar from "@/views/layout/navbar"; import NavBar from "@/views/layout/navbar";
// import { setTimeout } from 'timers'; // import { setTimeout } from 'timers';
export default { export default {
props: ['myonClickLeft'], props: ["myonClickLeft"],
data() { data() {
return { return {
is_mini_token: false,
templateData: { templateData: {
height: 450, height: 450,
width: 800, width: 800,
...@@ -44,38 +45,48 @@ export default { ...@@ -44,38 +45,48 @@ export default {
}; };
}, },
created() { created() {
// if (this.$route.query.filmId) { if (sessionStorage.getItem("is_mini_token")) {
// this.mode = "film"; this.is_mini_token = true;
// this.getFilmDetail(); }
// }
// if (this.$route.query.templateId) {
// this.mode = "template";
// this.getTempalteDetail();
// }
}, },
mounted() { mounted() {
document.title = "预览作品";
// var vm = this
// vm.message({
// type: 'setList',
// list: vm.templateData.listData
// })
this.getData();
},
activated() {
document.title = "预览作品";
// var vm = this // var vm = this
// vm.message({ // vm.message({
// type: 'setList', // type: 'setList',
// list: vm.templateData.listData // list: vm.templateData.listData
// }) // })
this.getData() this.getData();
}, },
methods: { methods: {
navBack() {
this.$router.back();
},
message(data) { message(data) {
window.frames['previewiframe'].postMessage(data, "https://visual-clouds.bdideal.com"); window.frames["previewiframe"].postMessage(
data,
"https://visual-clouds.bdideal.com"
);
// window.frames[1].postMessage(data, "https://localhost:8082"); // window.frames[1].postMessage(data, "https://localhost:8082");
}, },
getData() { getData() {
this.loaded = true this.templateData = JSON.parse(window.localStorage.getItem("preview"));
this.templateData = JSON.parse(window.localStorage.getItem('preview')) this.loaded = true;
this.message({ this.message({
type: 'setList', type: "setList",
pages: this.templateData.listData, pages: this.templateData.listData,
list: this.templateData.listData list: this.templateData.listData
}) });
} }
}, },
components: { components: {
...@@ -87,7 +98,7 @@ export default { ...@@ -87,7 +98,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.edit-container { .edit-container {
.content { .content {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -98,10 +109,10 @@ export default { ...@@ -98,10 +109,10 @@ export default {
height: calc(100vh - 46px); height: calc(100vh - 46px);
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
.iframe { .iframe {
width: 100% ; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
......
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