Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit e3a1723c by hank
Options

Merge branch 'develop' into test

parents 9920a79d e9489f9a
Showing with 163 additions and 116 deletions
public/index.html
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
<!-- <link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/> -->
<!-- <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<title>编辑作品</title>
......
src/App.vue
<template>
<div id="app">
<transition :name="transitionName" >
<keep-alive v-if="$route.meta.keepAlive">
<router-view class="child-view"/>
</keep-alive>
<router-view class="child-view" v-else/>
</transition>
<keep-alive >
<router-view class="child-view" />
</keep-alive>
<!-- <router-view class="child-view" v-if="!$route.meta.keepAlive" /> -->
<!-- <transition :name="transitionName" >
</transition>-->
</div>
</template>
<script>
......@@ -14,49 +14,52 @@
export default {
data() {
return {
transitionName: '',
transitionName: "",
keepAlive: false
}
};
},
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
console.log(this.$route.meta.keepAlive)
// 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 () {
created() {
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)
history.pushState(null, null, document.URL);
window.addEventListener(
'popstate', () => {
console.log('popstate')
this.$router.isBack = true
"popstate",
() => {
console.log("popstate");
this.$router.isBack = true;
},
false
)
);
window.addEventListener(
'pushstate', () => {
console.log('pushstate')
this.$router.isBack = false
"pushstate",
() => {
console.log("pushstate");
this.$router.isBack = false;
},
false
)
);
}
}
}
};
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
......@@ -80,7 +83,8 @@ export default {
width: 100%;
min-height: 100vh;
}
html, body {
html,
body {
min-height: 100vh;
}
.slide-left-enter,
......@@ -108,5 +112,4 @@ html, body {
transition: opacity 0.3s !important;
/* opacity: 0 !important; */
}
</style>
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/store/getters.js
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token
token: state => state.user.token,
errorData: state => state.app.errorData
}
export default getters
src/store/modules/app.js
......@@ -5,7 +5,8 @@ const app = {
opened: !+localStorage.getItem('sidebarStatus'),
withoutAnimation: false
},
device: 'desktop'
device: 'desktop',
errorData: {}
},
mutations: {
TOGGLE_SIDEBAR: state => {
......@@ -24,6 +25,9 @@ const app = {
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
SET_ERROR_DATA: (state, errorData) => {
state.errorData = errorData
}
},
actions: {
......
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"
@load="setDataList"
class="iframe preview-iframe"
v-show="loaded"
v-if="loaded"
id="previewiframe"
name="previewiframe"
scrolling="no"
:src="templateData.frameUrl+'?isPreview=1'"
frameborder="0"
......@@ -20,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,
......@@ -42,38 +45,50 @@ 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[2].postMessage(data, "https://visual-clouds.bdideal.com");
console.log(window.frames["previewiframe"], "12313132");
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;
},
setDataList() {
console.log('setDataList')
this.message({
type: 'setList',
pages: this.templateData.listData,
list: this.templateData.listData
})
type: "setList",
pages: JSON.parse(JSON.stringify(this.templateData.listData))
});
}
},
components: {
......@@ -85,7 +100,7 @@ export default {
<style lang="scss" scoped>
.edit-container {
.content {
overflow: hidden;
overflow: hidden;
display: flex;
justify-content: space-between;
......@@ -96,10 +111,10 @@ export default {
height: calc(100vh - 46px);
box-sizing: border-box;
text-align: left;
.iframe {
width: 100% ;
height: 100%;
width: 100%;
height: 100%;
}
}
}
......
src/views/tempaltes/slider.vue
......@@ -5,19 +5,19 @@
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</div> -->
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide style="width:auto;" v-for="(item, index) in list" :key="index">
<slot :slider="item" :index="index"></slot>
</swiperSlide>
</swiper>
</div>-->
<swiper :options="swiperOption" style="width: 375px;" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide style="width:auto;" v-for="(item, index) in list" :key="index">
<slot :slider="item" :index="index"></slot>
</swiperSlide>
</swiper>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: 'mySlider',
name: "mySlider",
props: {
list: {
required: true,
......@@ -25,15 +25,39 @@ export default {
type: Array
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
watch: {
list: {
handler: function(val) {
console.log(this.swiper.getTranslate(), val);
console.log(this.$refs["mySwiper"]);
this.swiper.updateSize();
this.swiper.updateSlides();
},
deep: true
}
},
mounted() {
console.log(this.swiper);
this.swiper.updateSize();
this.swiper.updateSlides();
},
data() {
return {
swiperOption: {
slidesPerView: "auto",
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true
observeSlideChildren: true,
observer: true
// /* 将observe应用于Swiper的父元素。
// 当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
// observerParents: true,
// loop: false
// freeMode: false,
// freeModeSticky: true
}
};
},
......
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