Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 4a05cc19 by hank
Options

全部模板

parent bd8b580d
Showing with 217 additions and 6 deletions
public/index.html
......@@ -6,6 +6,8 @@
<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"/>
<title>Vmatrix</title>
</head>
<body>
......
src/router/index.js
......@@ -10,6 +10,7 @@ import GroupsAdd from '@/views/groups/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/edit.vue'
import TempaltePreview from '@/views/tempaltes/preview.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue'
......@@ -24,6 +25,7 @@ const router = new Router({
children: [
{ path: '/', name: 'Home', component: Tempaltes, meta: { keepAlive: true }, redirect: '/tempaltes' },
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/all', name: 'TempaltesAll', component: TempaltesAll, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
......
src/views/layout/index.vue
<template>
<div class="layout">
<div class="layout-content">
<keep-alive>
<keep-alive v-if="keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<van-tabbar route >
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
......@@ -32,12 +32,14 @@ export default {
data() {
return {
index: 0,
currentPath: ''
currentPath: '',
keepAlive: false
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
this.keepAlive = val.meta.keepAlive
}
},
components: {
......
src/views/tempaltes/all.vue 0 → 100644
<template>
<div class="templates-container">
<NavBar title="模板库" left-arrow></NavBar>
<div class="static-top">
<div class="tab-btn">
<div
class="tab-btn-item"
:class="activeIndex === 0 ? 'active' : ''"
@click="changeBtn(0)"
>全部模板</div>
<!-- <div class="tab-btn-diver">|</div>
<div
class="tab-btn-item"
:class="activeIndex === 1 ? 'active' : ''"
@click="changeBtn(1)"
>我的模板</div>-->
</div>
<div class="sort-container">
<div class="sort-item">
<span>分辨率</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span class="active">横版</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span>应用场景</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item active">
<!-- <span>搜索</span> -->
<van-icon name="search"></van-icon>
</div>
</div>
</div>
<div class="">
<transition-group name="fadeUp" tag="div" class="template-list">
<div class="template-item" v-for="(item, index) in list" :key="item.templateId">
<img :src="item.templateUrl" alt>
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 -index}}
</div>
<div class="title">{{item.templateName}}</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import { getTempalteList, getFilmList } from "@/api/api";
export default {
name: "TempaltesAll",
data() {
return {
activeIndex: 0,
list: [
// { 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" },
]
};
},
computed: {},
created() {
this.getList();
},
methods: {
changeBtn(index) {
this.activeIndex = index;
if (index == 0) {
this.getList();
} else {
this.getList2();
}
},
getList() {
getTempalteList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
getList2() {
getFilmList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
goDetail(item) {
this.$router.push({
path: "/tempaltes/detial",
query: {
templateId: item.templateId
}
});
}
},
components: {
NavBar
}
};
</script>
<style lang="scss" scoped>
.templates-container {
padding-bottom: 100px;
.swiper-slide {
width: auto;
}
.static-top {
padding-top: 40px;
padding-left: 50px;
display: flex;
justify-content: space-between;
}
.tab-btn {
display: flex;
color: rgba(51, 51, 51, 0.6);
font-size: 24px;
.tab-btn-item {
transition: all 1s;
}
.tab-btn-diver {
padding: 0 40px;
color: rgba(51, 51, 51, 1);
}
.active {
color: rgba(51, 51, 51, 1);
font-weight: bold;
}
}
.sort-container {
display: flex;
.sort-item {
display: flex;
align-items: center;
padding-right: 60px;
color: rgba(51, 51, 51, 0.8);
font-size: 23px;
span {
padding-right: 10px;
}
.active {
color: rgba(51, 51, 51, 1);
}
}
}
.template-list {
display: flex;
flex-wrap: wrap;
padding-top: 60px;
padding-left: 50px;
.template-item {
margin-right: 30px;
margin-bottom: 30px;
width: 399px;
height: 243px;
background-color: #161616;
position: relative;
img {
height: 100%;
width: auto;
max-width: 399px;
margin: 0 auto;
}
.title {
font-size: 13px;
position: absolute;
left: 11px;
bottom: 12px;
color: white;
}
.point {
position: absolute;
right: 8px;
top: 8px;
font-size: 12px;
color: white;
vertical-align: middle;
.van-icon {
color: #f73939;
vertical-align: text-top;
margin-right: 5px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/tempaltes/edit.vue
......@@ -11,7 +11,8 @@
<div class="left-item" @click="preview">
<van-icon name="eye-o"/>预览
</div>
<div class="left-item" @click="pub">发布</div>
<div class="left-item" @click="pub">
<svg-icon icon-class="guide" />发布</div>
</div>
<div class="top-right">
方案名称：
......@@ -24,7 +25,7 @@
v-if="loaded"
:style="{
}"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + Date.now()"
frameborder="0"
></iframe>
</div>
......@@ -227,7 +228,7 @@ export default {
// console.log(res, "更新影片成功");
// this.$router.back();
// });
// this.$router.back();
this.$router.back();
});
}
},
......@@ -300,6 +301,9 @@ export default {
.van-icon {
margin-right: 5px;
}
.svg-icon {
margin-right: 5px;
}
}
}
.top-right {
......
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