员工风采

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import page from "./templates/companyCulture/index";
+import page from "./templates/Employee/index";
 // import page from "./templates/retail/index";
 // import page from './templates/listingInformation/index'
 window.getQuery = function(key) {

src/templates/Employee/defaultData/employee.js

+export default {
+	video: {
+		value: "static/employee/d0cdb2b40fe2a1bf8bb6310fbab6cbb6qt.mp4"
+	}
+}
\ No newline at end of file

src/templates/Employee/defaultData/index.js

+import employee from './employee'
+export default {
+  employee,
+}

src/templates/Employee/editMethod.js

+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/Employee/index.vue

+<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/Employee/itemList/employee.js

+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/Employee/itemList/index.js

+import employee from './employee'
+
+export default {
+  employee
+}

src/templates/Employee/keyframe.js

+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/Employee/methods.js

+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/Employee/mixin.js

+import data from './schemaData.js'
+import editMethod from './editMethod.js'
+import requireIcons from '@/icons/requireIcons'
+   console.log(JSON.stringify(data))
+
+export default {
+  data: function () {
+    return {
+      pages: data.pageList,
+      sceneData: data.sceneData
+    }
+  },
+  methods: {
+    callback () {
+      console.log('callback')
+    },
+    getDefaulted () {
+      this.pages = this.pages.map(function (item) {
+        item.list.map(ele => {
+          return (ele = Object.assign(ele, ele.default))
+        })
+        return item
+        // (item = Object.assign(item, item.default));
+      })
+    },
+    getAllData () {
+      this.message(
+        {
+          type: 'getList',
+          pages: this.pages
+        },
+        '*'
+      )
+    },
+    setAllData (data) {
+      this.pages = data.pages
+    },
+    ...editMethod
+  },
+  mounted () {
+    function setZoom () {
+      var unit = 1920
+      var unit2 = 1080
+      var width = window.innerWidth
+      var height = window.innerHeight
+      var zoom = height / 1080
+      if (width / height <= 16 / 9) {
+        zoom = width / 1920
+      }
+      if (width / height >= 16 / 9) {
+        zoom = height / 1080
+      }
+      var container = document.querySelectorAll('.container')
+      for (let index = 0; index < container.length; index++) {
+        // container[index].style.transform = `scale(${zoom})`;
+      }
+      // console.log(zoom);
+      document.querySelector(
+        '.swiper-container'
+      ).style.transform = `scale(${zoom})`
+    }
+    setZoom()
+    addEventListener('resize', setZoom, false)
+  },
+  created: function () {
+    console.log('我是mixin 的crteated')
+  }
+}

src/templates/Employee/pages/employee.vue

+<template>
+	<div class="container">
+		<video :src="getValue('video')" autoplay="autoplay" loop="loop" muted="muted"></video>
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		methods: {
+
+			leave() {
+				console.log('leave')
+				// anime({
+				//   targets: "#cd-image-1 circle",
+				//   duration: 3000,
+				//   r: [2920, 0],
+				//   easing: "linear"
+				// });
+				var PromiseAll = [
+					anime({
+						targets: '#cd-image-1 circle',
+						duration: 2000,
+						r: [2920, 0],
+						easing: 'easeOutQuad'
+					}).finished,
+					anime({
+						targets: '#mask-img-1 circle',
+						duration: 2000,
+						r: [2920, 0],
+						easing: 'easeOutQuad'
+					}).finished
+				]
+				var enPromise = Promise.all(PromiseAll)
+				return enPromise
+			},
+			enter() {
+				console.log('enter anime')
+				var PromiseAll = [
+					anime({
+						targets: this.$refs['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						translateX: 0,
+						opacity: 1,
+						duration: 1000,
+						delay: 1200,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['surrounding'],
+						translateX: 0,
+						opacity: 1,
+						duration: 1000,
+						delay: 1800,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['feature-list'],
+						translateX: 0,
+						opacity: 1,
+						duration: 1000,
+						delay: 2100,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: '.high-light',
+						translateX: 0,
+						opacity: 1,
+						duration: 1000,
+
+						// delay: anime.stagger(1000),
+						delay: 1500,
+						easing: 'easeInOutQuad'
+					}).finished
+				]
+				Promise.all(PromiseAll).then(() => {
+					this.enterAfter()
+				})
+				return Promise.all(PromiseAll)
+			},
+			enterBefore() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					translateX: 2000,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['price'],
+					translateX: 2000,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['surrounding'],
+					translateX: 2000,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['feature-list'],
+					translateX: 2000,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: '.high-light',
+					translateX: 1000,
+					opacity: 0,
+					duration: 0
+				})
+				// setTimeout(() => {
+				//   this.enter();
+				// }, 1000);
+			},
+			enterAfter() {
+				this.timer = setTimeout(() => {
+					Scene.leaveBefore()
+					clearTimeout(this.timer)
+				}, 10000)
+			}
+		},
+		mounted() {
+			console.log('mounted')
+			this.enterBefore()
+		},
+		data() {
+			return {
+				currentIndex: ''
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped> 
+	.container {
+		width: 1920px;
+		height: 1080px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	video{width: 1920px;height: 1080px;}
+</style>
\ No newline at end of file

src/templates/Employee/pages/index.js

+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) => {
+//	console.log(req.keys()[index].match(re)[1])
+  pagesObj[req.keys()[index].match(re)[1]] = item.default
+  return item
+})
+export default pagesObj

src/templates/Employee/sceneData.js

+export default {
+  schemaData: {},
+  itemList: []
+}

src/templates/Employee/schema/noticeSchema.js

+export default {}

src/templates/Employee/schema/scheduleSchema.js

+export default {}

src/templates/Employee/schema/welcomSchema.js

+export default {}

src/templates/Employee/schemaData.js

+
+import defaultData from './defaultData'
+import itemList from './itemList'
+import templateInfo from './templateInfo'
+export default {
+  templateInfo,
+  // defaultData,
+  pageList: [
+    {
+      name: '员工风采',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/employee/complyee.jpg',
+      component: 'employee',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.employee,
+      itemList: itemList.employee
+    }
+  ]
+}

src/templates/Employee/templateInfo.js

+export default {
+  name: '企业文化模板'
+}