Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit e0fa6f77 by zhangmeng
Options

retail

parent c8953bdf
Showing with 1654 additions and 0 deletions
src/templates/companyCulture/defaultData/index.js 0 → 100644
import welcome from './welcome'
import notice from './notice'
import schedule from './schedule'
export default {
welcome,
notice,
schedule
}
src/templates/companyCulture/defaultData/notice.js 0 → 100644
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
noticeTitle: {
value: '2019年端午节放假通知'
},
noticeContent: {
value: '根据国家2019年部分节假日安排，结合公司实际情况，劳动节放假时间安排如下：2019年6月7日至6月9日放假，共3天。6月10（星期一）上班。\r\n注意事项：\r\n 1、放假期间，请各部门自行妥善安排好放假前工作，做好安全防范措施。\r\n2、放假期间外出的员工，请注意人身财产安全.\r\n \r\n \r\n \t 特此通知，请知悉。'
},
noticeNickName: {
value: 'Dear All：'
}
}
src/templates/companyCulture/defaultData/schedule.js 0 → 100644
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
scheduleList: [
{
content: '龙湖地产来访',
address: '22-1会议室',
department: '智慧营销',
time: '09:30 AM -12:00 AM',
index: 1,
schemaIndex: 0
},
{
content: 'Vmatrix研发进度',
address: '21-03会议室',
department: '数字理想',
time: '09:30 AM -10:00 AM',
index: 2,
schemaIndex: 0
},
{
content: '数字理想前端面试',
address: '22-1会议室',
department: '数字理想',
time: '09:30 AM -12:00 AM',
index: 3,
schemaIndex: 0
},
{
content: '销售总监面试',
address: '22-1会议室',
department: '总经办',
time: '09:30 AM -12:00 AM',
index: 4,
schemaIndex: 0
}
]
}
src/templates/companyCulture/defaultData/welcome.js 0 → 100644
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
companyNameEn: {
value: 'MAXROCKY'
},
welcomeWordZh: {
value: '欢迎龙湖信息中心领导参观指导'
},
welcomeWordEn: {
value: 'WELCOME'
}
}
src/templates/companyCulture/editMethod.js 0 → 100644
export default {
setEditData (data) {
this.pages[data['page']]['list'][data.index].value =
data['value']
if (data['editObj']) {
this.list[data.index] = data['editObj']
this.pages[data['page']]['list'][data.index] =
data['editObj']
}
},
cancelEditAction () {
this.currentIndex = ''
this.cancelEdit = true
}
}
src/templates/companyCulture/index.vue 0 → 100644
<template>
<swiper :options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1920px;height:1080px;">
<swiper-slide style="transform: translate3d(0,0,0)"
class="ani"
v-for="(page, index) in pages"
:key="index"
@load="loaded(index)">
<component v-if="index == sliderActiveIndex"
:is="page.component"
:ref="'child'+index"
@hook:mounted="loaded(index)"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"></component>
</swiper-slide>
<!-- <swiper-slide>
<div class="container">I'm Slide 2</div>
</swiper-slide>
<swiper-slide>
<div class="container">I'm Slide 3</div>
</swiper-slide>-->
</swiper>
</template>
<script>
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from 'timers'
export default {
name: 'page',
mixins: [mixin],
components: {
swiper,
swiperSlide,
...requireAllPage
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
methods: {
message (data) {
Message.send(data, '*')
},
loaded (index) {
this.$refs['child' + this.sliderActiveIndex][0].enter()
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: 'edit',
item,
index
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
}
},
beforeDestroy () {},
mounted () {
Scene.EventBus.on('leaveBefore', e => {
console.log('leaveBefore')
this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log('leaveBefore then')
var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) {
index = -1
console.log(index)
}
this.swiper.slideTo(index + 1, 1000, false)
})
})
// this.$refs['child'][0].enter().then(() => {
// })
},
created () {
var vm = this
Message.init(e => {
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data)
}
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false)
}
})
this.swiperOption = {
effect: 'fade',
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1,
// autoplay: !getQuery("isEdit")
// ? {
// delay: 10000
// }
// : false,
loop: false,
on: {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this);
}
}
}
}
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId
})
} else {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data () {
return {
date: '',
img: '',
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
}
}
}
</script>
<style lang="scss" scoped>
.glob-container {
// background-color: red;
// filter: url("#goo");
}
</style>
<style>
.swiper-slide {
/* width: 100% !important; */
}
</style>
src/templates/companyCulture/itemList/index.js 0 → 100644
import welcome from './welcome'
import notice from './notice'
import schedule from './schedule'
export default {
welcome,
notice,
schedule
}
src/templates/companyCulture/itemList/notice.js 0 → 100644
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '通知标题',
valueRule: '',
description: '请输入通知标题',
dataKey: 'noticeTitle'
},
{
type: 'text',
name: '通知昵称',
valueRule: '',
description: '请输入通知昵称',
dataKey: 'noticeNickName'
},
{
type: 'text',
name: '通知内容',
valueRule: '',
description: '请输入通知内容',
dataKey: 'noticeContent'
}
]
src/templates/companyCulture/itemList/schedule.js 0 → 100644
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'list',
name: '日程列表',
modelSchema: [ // 创建子项的Schema列表
{
content: {
type: 'text',
name: '内容', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
},
address: {
type: 'text',
name: '地点', // 字段名称
description: '请输入地点', // 用户填写时字段提示语
default: { // 默认
value: '会议室'
}
},
department: {
type: 'text',
name: '部门', // 字段名称
description: '请输入部门', // 用户填写时字段提示语
default: { // 默认
value: '总裁办'
}
},
time: {
type: 'text',
name: '时间', // 字段名称
description: '请输入时间', // 用户填写时字段提示语
default: { // 默认
value: '09:30 AM - 10:00 AM'
}
}
}
],
dataKey: 'scheduleList'
}
]
src/templates/companyCulture/itemList/welcome.js 0 → 100644
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '中文企业欢迎语',
description: '请输入企业欢迎语',
dataKey: 'welcomeWordZh'
},
{
type: 'text',
name: '英文企业欢迎语',
description: '请输入企业英文欢迎语',
valueRule: '',
dataKey: 'welcomeWordEn'
},
{
type: 'text',
name: '企业英文名称',
description: '请输入企业英文名称',
valueRule: '',
dataKey: 'companyNameEn'
}
]
src/templates/companyCulture/keyframe.js 0 → 100644
export function enter (callback) {
var countEnterTime = 0
var promiseAll = []
this.keyframes.map(item => {
var currentTime = item.enter.options.duration + item.enter.options.delay
countEnterTime =
countEnterTime < currentTime ? currentTime : countEnterTime
item.enterBefore &&
$.Velocity($(item.el), item.enterBefore.style, item.enterBefore.options)
if (!item.enter.options.loop) {
promiseAll.push(
$.Velocity($(item.el), item.enter.style, item.enter.options)
)
} else {
$.Velocity($(item.el), item.enter.style, item.enter.options)
}
})
// callback && callback(countEnterTime)
this.enterAfter()
return Promise.all(promiseAll)
}
export function leave (callback) {
var promiseAll = []
this.keyframes.map(item => {
item.leave && promiseAll.push($.Velocity($(item.el), 'reverse', {
duration: 1500
}))
})
return Promise.all(promiseAll)
}
src/templates/companyCulture/methods.js 0 → 100644
export default {
created () {
// console.log(this.schemaData)
window.addEventListener(
'message',
(e) => {
if (e.source != window.parent) return
if (typeof e.data === 'object' && e.data['type'] === 'editPage') {
if (this.page === e.data['page']) {
this.currentIndex = e.data['index']
}
}
},
false
)
},
watch: {
cancelEdit (value) {
console.log('cancels')
if (value === true) {
this.currentIndex = ''
this.$emit('update:cancelEdit', false)
}
}
},
methods: {
message (data) {
parent.postMessage(data, '*')
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
console.log(this.currentIndex)
this.message(
{
type: 'edit',
item,
index,
page: this.page
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
list: this.list
},
'*'
)
},
getValue (dataKey) {
return this.schemaData[dataKey] ? this.schemaData[dataKey]['value'] : ''
},
getStyle (index) {
return this.list[index] ? this.list[index]['style'] : ''
},
isEdited (index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit (index) {
return this.isEditMode ? 'isEdit' : ''
},
isAnimeted (index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate (timeStamp) {
let dateString = ''
let year = new Date(timeStamp).getFullYear()
let month =
new Date(timeStamp).getMonth() + 1 < 10
? '0' + (new Date(timeStamp).getMonth() + 1)
: new Date(timeStamp).getMonth() + 1
let date =
new Date(timeStamp).getDate() < 10
? '0' + new Date(timeStamp).getDate()
: new Date(timeStamp).getDate()
let hh =
new Date(timeStamp).getHours() < 10
? '0' + new Date(timeStamp).getHours()
: new Date(timeStamp).getHours()
let mm =
new Date(timeStamp).getMinutes() < 10
? '0' + new Date(timeStamp).getMinutes()
: new Date(timeStamp).getMinutes()
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + '.' + month + '.' + date
return dateString
// console.log(this.nowTime);
}
}
}
src/templates/companyCulture/pages/index.js 0 → 100644
const req = require.context('', false, /\.vue$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const pages = requireAll(req)
const re = /\.\/(.*)\.vue/
// console.log(req.keys(), 'requireContext')
const pagesObj = {}
pages.map((item, index) => {
pagesObj[req.keys()[index].match(re)[1]] = item.default
return item
})
export default pagesObj
src/templates/companyCulture/pages/introduction.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">企业简介——迈动互联（北京）信息科技有限公司</div>
<div class="bottom-list">
<div class="bottom-item">
<div class="cover cover-yellow">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/whoBg.png"
alt
/>
</div>
<div class="cover-name">WHO</div>
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/tuandui.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
<div class="bottom-item">
<div class="cover cover-purple">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/productBg.png"
alt
/>
</div>
<div class="cover-name">Product</div>
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/product.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们的产品</div>
</div>
</div>
<div class="bottom-item">
<div class="cover cover-green">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honourBg.png"
alt
/>
</div>
<div class="cover-name">Honour</div>
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honour.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们的荣誉</div>
</div>
</div>
</div>
</div>
</template>
<script>
import methods from '../methods'
export default {
name: 'introduction',
props: ['list', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
created () {
// console.log(this.list);
},
mounted () {},
data () {
return {
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: ''
}
}
}
</script>
<style lang="scss" scoped>
@keyframes cover {
0% {
width: 416px;
height: 542px;
animation: cover;
// opacity: 0.17;
background-size: contain;
transform-origin: 416px 542px;
transform: rotateY(0deg) skewY(0deg);
}
100% {
width: 300px;
height: 458px;
animation: cover;
// opacity: 0.17;
border-radius: 12px;
background-size: contain;
transform-origin: 300px 458px;
transform: rotateY(-45deg) skewY(20deg);
}
}
.container {
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.bottom-list {
position: absolute;
display: flex;
top: 443px;
padding-left: 223px;
.bottom-item {
width: 416px;
height: 542px;
background: rgba(246, 246, 246, 1);
box-shadow: 0px 44px 63px 0px rgba(31, 31, 31, 0.15);
border-radius: 12px;
position: relative;
margin-right: 117px;
.icon {
// position: absolute;
padding-left: 42px;
padding-top: 52px;
left: 42px;
top: 52px;
img {
height: 53px;
}
}
.name {
margin-top: 36px;
height: 16px;
font-size: 16px;
font-family: ShreeDev0714-Bold;
font-weight: bold;
color: rgba(77, 77, 77, 1);
}
.name-zh {
margin-top: 87px;
height: 39px;
font-size: 39px;
line-height: 1;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(59, 59, 59, 1);
}
.cover-name {
position: absolute;
right: 30px;
top: -40px;
z-index: 111;
color: rgba(255, 255, 255, 1);
font-style: italic;
font-size: 39px;
font-weight: bold;
display: none;
}
.cover {
z-index: 2;
position: absolute;
right: 0px;
// top: -50px;
// width: 300px;
// height: 458px;
// animation: cover 3s;
// animation-delay: 1s;
// opacity: 0.17;
img {
width: 245px;
height: 608px;
}
width: 245px;
height: 608px;
top: -145px;
border-radius: 12px;
background-size: contain;
// background-color: #ed9d68;
transition: all 1s;
// transform: rotateY(-45deg) skewY(20deg);
transform-origin: 300px 458px;
}
// .cover-purple {
// background-color: #9650e1;
// }
// .cover-green {
// background-color: #84e8ce;
// }
}
}
}
</style>
src/templates/companyCulture/pages/photoWall.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">照片墙</div>
<div class="photo-container">
<div class="photo-wall">
<div class="wall">
<div class="wall-3">
<swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1200px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper>
</div>
<div class="wall-1">
<!-- <swiper :options="swiperOption" style="width: 2476px; transform: translateX(-1267px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper> -->
</div>
<div class="wall-2">
<!-- <swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1867px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper> -->
<!-- <swiper :options="swiperOption">
<img v-for="(item,index) in 10" :key="index"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
<!-- </swiper>-->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import methods from '../methods'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'photoWall',
props: ['list', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
created () {
// console.log(this.list);
},
components: {
swiper,
swiperSlide
},
mounted () {},
data () {
return {
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: '',
swiperOption: {
observerParents: true,
allowTouchMove: false,
slidesPerView: 'auto',
slidesPerColumn: 2,
spaceBetween: 30,
speed: 1000,
freeMode: true,
// reverseDirection: true,
autoplay: {
reverseDirection: true,
delay: 10
},
loop: true
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
.swiper-slide {
width: auto;
}
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.photo-container {
position: absolute;
// display: flex;
top: 343px;
height: 600px;
width: 100%;
perspective: 2000px;
.photo-wall {
// transform-style: preserve-3d;
.wall {
width: 100%;
height: 800px;
position: relative;
right: 0;
top: 0;
left: 0;
// margin-left: 1200px;
// padding-left: 800px;
transform-style: preserve-3d;
// perspective: 10000px;
.wall-1 {
left: 1200px;
line-height: 300px;
position: absolute;
overflow: hidden;
transform: rotateY(-45deg) translateY(0) translateX(-300px);
width: 600px;
height: 600px;
background: #000;
img {
transform: rotateY(-45deg) translateY(0);
height: 100px;
width: auto;
margin-right: 100px;
// border: 1px solid red;
}
overflow: hidden;
}
.wall-2 {
overflow: hidden;
line-height: 300px;
left: 1200px;
position: absolute;
transform: rotateY(45deg) translateX(300px) translateY(0);
// transform-origin: 0 0;
width: 600px;
height: 600px;
background: #000;
img {
transform: rotateY(45deg) translateY(0);
height: 100px;
width: auto;
margin-right: 100px;
}
}
.wall-3 {
overflow: hidden;
position: absolute;
left: -200px;
top: 0;
height: 600px;
line-height: 300px;
// background: #000;
z-index: 10;
width: 1276px;
transform: translateZ(-424px);
img {
transform: translateZ(-424px);
height: 100px;
width: auto;
margin-right: 100px;
}
}
}
}
}
}
</style>
<style>
.swiper-container-free-mode > .swiper-wrapper {
 -webkit-transition-timing-function: linear; /*之前是ease-out*/
 -moz-transition-timing-function: linear;
 -ms-transition-timing-function: linear;
 -o-transition-timing-function: linear;
 transition-timing-function: linear;
 margin: 0 auto;
}
</style>
src/templates/companyCulture/templateInfo.js 0 → 100644
export default {
name: '企业文化模板'
}
src/templates/listingInformation/defaultData/buyingHouse.js 0 → 100644
export default {
houseList: [
{
img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
},
{
img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
}
],
title: {
value: '合租 | 彩虹新城·两室两厅·精装修·南'
},
price: {
value: '3000'
},
brightOneName: {
value: '面积(m²)'
},
brightOneContent: {
value: '80m²'
},
brightTwoName: {
value: '位置'
},
brightTwoContent: {
value: '大兴·枣园'
},
brightThreeName: {
value: '楼层'
},
brightThreeContent: {
value: '3/10'
},
peripheralFacilities1: {
value: '地铁四号线枣园站 260米'
},
peripheralFacilities2: {
value: '物美大卖场 300米'
},
peripheralFacilities3: {
value: '康庄公园 800米'
},
peripheralFacilities4: {
value: '仁和医院 900米'
}
}
src/templates/listingInformation/defaultData/index.js 0 → 100644
import buyingHouse from './buyingHouse'
import rentHouse from './rentHouse'
export default {
buyingHouse,
rentHouse
}
/**
* 默认数据入口
*/
src/templates/listingInformation/defaultData/readme.md 0 → 100644
## 默认数据入口
\ No newline at end of file
src/templates/listingInformation/editMethod.js 0 → 100644
export default {
setEditData (data) {
this.pages[data['page']]['list'][data.index].value =
data['value']
if (data['editObj']) {
this.list[data.index] = data['editObj']
this.pages[data['page']]['list'][data.index] =
data['editObj']
}
},
cancelEditAction () {
this.currentIndex = ''
this.cancelEdit = true
}
}
src/templates/listingInformation/index.vue 0 → 100644
<template>
<div class="glob-container">
<swiper
:options="swiperOption"
ref="mySwiper"
class
@someSwiperEvent="callback"
style="width:1920px;height:1080px;"
>
<swiper-slide
style="transform: translate3d(0,0,0)"
class="ani"
v-for="(page, index) in pages"
:key="index"
>
<component
:is="page.component"
:ref="'child'+index"
@hook:mounted="loaded(index)"
v-if="index === sliderActiveIndex"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"
></component>
</swiper-slide>
</swiper>
<div class="decoration"></div>
<svg viewBox="0 0 1920 1080" class="svg-filters">
<title>Animated clip-path SVG</title>
<defs>
<filter id="ant" x="0" y="0" width="1" height="1">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
<clipPath id="cd-image-122">
<circle id="cd-circle-1" cx="1920" cy="1080" r="1920" />
</clipPath>
</filter>
<clipPath id="cd-image-1" clipPathUnits="userSpaceOnUse">
<circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
</clipPath>
<mask id="mask-img-1" maskContentUnits="objectBoundingBox">
<circle id="cd-circle-12" fill="black" cx="0" cy="0" r="1000" />
</mask>
</defs>
<!-- <image height="800px"
width="1400px"
clip-path="url(#cd-image-1)"
mask="mask-img-1"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>-->
</svg>
</div>
</template>
<script>
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout } from 'timers'
export default {
name: 'page',
mixins: [mixin],
components: {
swiper,
swiperSlide,
...requireAllPage
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
methods: {
loaded (index) {
if (!this.isEditMode) {
setTimeout(() => {
this.$refs['child' + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, 'enter 完毕')
})
}, 1000)
}
},
message (data) {
// 发送消息
Message.send(data, '*')
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: 'edit',
item,
index
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
}
},
beforeDestroy () {},
mounted () {
},
created () {
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
Scene.EventBus.on('leaveBefore', e => {
console.log('leaveBefore')
if (this.pages.length > 1) {
this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log('leaveBefore then')
var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) {
index = -1
console.log(index)
}
this.swiper.slideTo(index + 1, 0, false)
})
}
})
this.isEditMode = false
}
var vm = this
Message.init(e => {
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data)
}
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 1000, false)
}
})
this.swiperOption = {
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1,
// autoplay: !getQuery("isEdit")
// ? {
// delay: 10000
// }
// : false,
loop: false,
on: {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 todo
// swiperAnimate(this); // 初始化完成开始动画 todo
}
},
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this); // todo
}
}
}
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
const filmData = JSON.parse(result.data.filmData)
vm.pages = filmData && filmData.pageList ? filmData.pageList : []
vm.filmId = result.filmId
})
} else {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data () {
return {
date: '',
img: '',
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
}
}
}
</script>
<style lang="scss" scoped>
.glob-container {
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
center no-repeat;
background-size: 100%;
width: 1920px;
height: 1080px;
// background: #000;
position: relative;
opacity: 1;
.ant {
// 路劲裁剪
// clip-path: url(#cd-image-1);
}
.decoration {
position: absolute;
left: 0;
top: 0;
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
center no-repeat;
background-size: 100%;
height: 1080px;
width: 800px;
}
}
.svg-filters {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
#cd-image-1 circle {
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
#mask-img-1 circle {
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
@keyframes visible-clippath {
from {
r: 1920;
opacity: 1;
}
to {
r: 0;
opacity: 1;
}
}
</style>
<style>
.swiper-slide {
/* width: 100% !important; */
}
</style>
src/templates/listingInformation/itemList/buyingHouse.js 0 → 100644
export default [
{
type: 'list',
name: '房屋图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '房屋图片', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
}
}
],
dataKey: 'houseList'
},
{
type: 'text',
name: '标题',
description: '填写标题',
dataKey: 'title',
valueRule: ''
},
{
type: 'text',
name: '金额',
description: '填写金额',
dataKey: 'price',
valueRule: ''
},
{
type: 'text',
name: '亮点一名称',
description: '填写亮点一名称不超过三个字',
dataKey: 'brightOneName',
valueRule: ''
},
{
type: 'text',
name: '亮点一内容',
description: '填写亮点一内容不超过五个字',
dataKey: 'brightOneContent',
valueRule: ''
},
{
type: 'text',
name: '亮点二名称',
description: '填写亮点二名称不超过三个字',
dataKey: 'brightTwoName',
valueRule: ''
},
{
type: 'text',
name: '亮点二内容',
description: '填写亮点二内容不超过五个字',
dataKey: 'brightTwoContent',
valueRule: ''
},
{
type: 'text',
name: '亮点三名称',
description: '填写亮点三名称不超过三个字',
dataKey: 'brightThreeName',
valueRule: ''
},
{
type: 'text',
name: '亮点三内容',
description: '填写亮点三内容不超过五个字',
dataKey: 'brightThreeContent',
valueRule: ''
},
{
type: 'text',
name: '周边设施一',
description: '填写周边设施',
dataKey: 'peripheralFacilities1',
valueRule: ''
},
{
type: 'text',
name: '周边设施二',
description: '填写周边设施',
dataKey: 'peripheralFacilities2',
valueRule: ''
},
{
type: 'text',
name: '周边设施三',
description: '填写周边设施',
dataKey: 'peripheralFacilities3',
valueRule: ''
},
{
type: 'text',
name: '周边设施四',
description: '填写周边设施',
dataKey: 'peripheralFacilities4',
valueRule: ''
}
]
src/templates/listingInformation/itemList/index.js 0 → 100644
import buyingHouse from './buyingHouse'
import rentHouse from './rentHouse'
export default {
buyingHouse,
rentHouse
}
src/templates/listingInformation/itemList/readme.md 0 → 100644
## 编辑项列表
### 编写格式如下
```
{
type: 'list',
name: '房屋图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '房屋图片', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
}
}
],
dataKey: 'houseList'
},
{
type: 'text',
name: '标题',
description: '填写标题',
dataKey: 'title',
valueRule: ''
},
```
\ No newline at end of file
src/templates/listingInformation/methods.js 0 → 100644
export default {
created () {
// console.log(this.schemaData)
window.addEventListener(
'message',
(e) => {
if (e.source != window.parent) return
if (typeof e.data === 'object' && e.data['type'] === 'editPage') {
if (this.page === e.data['page']) {
this.currentIndex = e.data['index']
}
}
},
false
)
},
watch: {
cancelEdit (value) {
console.log('cancels')
if (value === true) {
this.currentIndex = ''
this.$emit('update:cancelEdit', false)
}
}
},
methods: {
message (data) {
parent.postMessage(data, '*')
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
console.log(this.currentIndex)
this.message(
{
type: 'edit',
item,
index,
page: this.page
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
list: this.list
},
'*'
)
},
getValue (dataKey) {
return this.schemaData[dataKey] ? this.schemaData[dataKey]['value'] : ''
},
getStyle (index) {
return this.list[index] ? this.list[index]['style'] : ''
},
isEdited (index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit (index) {
return this.isEditMode ? 'isEdit' : ''
},
isAnimeted (index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate (timeStamp) {
let dateString = ''
let year = new Date(timeStamp).getFullYear()
let month =
new Date(timeStamp).getMonth() + 1 < 10
? '0' + (new Date(timeStamp).getMonth() + 1)
: new Date(timeStamp).getMonth() + 1
let date =
new Date(timeStamp).getDate() < 10
? '0' + new Date(timeStamp).getDate()
: new Date(timeStamp).getDate()
let hh =
new Date(timeStamp).getHours() < 10
? '0' + new Date(timeStamp).getHours()
: new Date(timeStamp).getHours()
let mm =
new Date(timeStamp).getMinutes() < 10
? '0' + new Date(timeStamp).getMinutes()
: new Date(timeStamp).getMinutes()
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + '.' + month + '.' + date
return dateString
// console.log(this.nowTime);
}
}
}
src/templates/listingInformation/pages/index.js 0 → 100644
const req = require.context('', false, /\.vue$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const pages = requireAll(req)
const re = /\.\/(.*)\.vue/
// console.log(req.keys(), 'requireContext')
const pagesObj = {}
pages.map((item, index) => {
pagesObj[req.keys()[index].match(re)[1]] = item.default
return item
})
export default pagesObj
src/templates/listingInformation/pages/readme.md 0 → 100644
## 页面入口
> 引入index.js 会默认引入当前目录下.vue 结尾的文文件作为当前场景下的组件。schemaData.js 中componment 名字与之对应
\ No newline at end of file
src/templates/listingInformation/templateInfo.js 0 → 100644
export default {
name: '房源信息模板'
}
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