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