Commit 7ab960e3 by hank

零售模板动画与编辑

parent 85cb752f
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
console.log(webpack.optimize)
"use strict";
const path = require("path");
const utils = require("./utils");
const webpack = require("webpack");
const config = require("../config");
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const webpack = require('webpack')
const WriteJsonPlugin = require("write-json-webpack-plugin");
const env =
process.env.NODE_ENV === "testing"
? require("../config/test.env")
: require("../config/prod.env");
// console.log(webpack.optimize);
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
......@@ -48,13 +51,22 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
filename: utils.assetsPath("js/[name].[chunkhash].js"),
chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
"process.env": env
}),
new WriteJsonPlugin({
object: {
},
path: "",
// default output is timestamp.json
filename: "data.json",
pretty: true
}),
new UglifyJsPlugin({
uglifyOptions: {
......@@ -70,13 +82,13 @@ const webpackConfig = merge(baseWebpackConfig, {
// filename: utils.assetsPath('css/[name].[contenthash].css'),
// // Setting the following option to `false` will not extract CSS from codesplit chunks.
// // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
// allChunks: true,
// }),
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
filename: utils.assetsPath("css/[name].css"),
chunkFilename: utils.assetsPath("css/[name].[contenthash].css")
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
......@@ -89,10 +101,9 @@ const webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
filename:
process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
template: "index.html",
inject: true,
minify: {
removeComments: true,
......@@ -100,7 +111,7 @@ const webpackConfig = merge(baseWebpackConfig, {
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
}
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
}),
// keep module.id stable when vendor modules does not change
......@@ -140,44 +151,43 @@ const webpackConfig = merge(baseWebpackConfig, {
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
from: path.resolve(__dirname, "../static"),
to: config.build.assetsSubDirectory,
ignore: ['.*']
ignore: [".*"]
}
])
]
})
});
if (config.build.inlineSource) {
const InlineSourcePlugin = require('../plugins/InlineSoucePlugins')
const InlineSourcePlugin = require("../plugins/InlineSoucePlugins");
webpackConfig.plugins.push(
new InlineSourcePlugin({
match: /\.(js|css)/
})
)
);
}
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const CompressionWebpackPlugin = require("compression-webpack-plugin");
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
asset: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
"\\.(" + config.build.productionGzipExtensions.join("|") + ")$"
),
threshold: 10240,
minRatio: 0.8
})
)
);
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig
module.exports = webpackConfig;
......@@ -59,7 +59,7 @@ module.exports = {
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
inlineSource: true,
inlineSource: false,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
......
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"https://equipment.bdideal.com"'
BASE_API: '"https://equipment.bdideal.com"',
TEMPLATES_PATH: '"retail"'
}
\ No newline at end of file
......@@ -15,6 +15,7 @@
},
"dependencies": {
"animejs": "^3.1.0",
"aws-sdk": "^2.524.0",
"axios": "^0.18.0",
"babel-runtime": "^6.26.0",
"node-sass": "^4.9.0",
......@@ -60,11 +61,11 @@
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^4.0.0-beta.5",
"mini-css-extract-plugin": "^0.4.5",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"less": "^3.0.2",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.5",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
......@@ -84,10 +85,11 @@
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.0"
"webpack-merge": "^4.1.0",
"write-json-webpack-plugin": "^1.1.0"
},
"engines": {
"node": ">= 6.0.0",
......
......@@ -3,6 +3,7 @@ import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
import sceneData from './sceneData.js'
export default {
templateInfo,
// defaultData,
......
<template>
<swiper :options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1080px;height:1920px;">
<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
:options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1080px;height:1920px;"
>
<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>
......@@ -30,17 +35,17 @@
</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'
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',
name: "page",
mixins: [mixin],
components: {
swiper,
......@@ -48,53 +53,55 @@ export default {
...requireAllPage
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
swiper() {
return this.$refs.mySwiper.swiper;
}
},
data () {
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
};
},
methods: {
message (data) {
Message.send(data, '*')
message(data) {
Message.send(data, "*");
},
loaded (index) {
this.$refs['child' + this.sliderActiveIndex][0].enter()
loaded(index) {
setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter();
}, 1000);
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
edit(index) {
if (getQuery("isEdit")) {
this.currentIndex = index;
var item = this.list[index];
this.message(
{
type: 'edit',
type: "edit",
item,
index
},
'*'
)
"*"
);
}
},
getList () {
getList() {
this.message(
{
type: 'getList',
type: "getList",
pages: this.pages
},
'*'
)
"*"
);
}
},
beforeDestroy () {},
mounted () {
Scene.EventBus.on("leaveBefore", e => {
beforeDestroy() {},
mounted() {
Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then");
......@@ -108,39 +115,39 @@ export default {
});
// this.$refs['child'][0].enter().then(() => {
// })
// })
},
created () {
var vm = this
created() {
var vm = this;
Message.init(e => {
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
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"] == "cancelEdit") {
vm.cancelEditAction();
}
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
if (isObj && e.data["type"] == "edit") {
vm.currentIndex = e.data.index;
}
if (isObj && e.data['type'] == 'setList') {
if (isObj && e.data["type"] == "setList") {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data)
this.setAllData(e.data);
}
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
if (isObj && e.data["type"] == "getList") {
vm.getAllData();
}
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false)
if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 500, false);
}
})
});
this.swiperOption = {
effect: 'fade',
effect: "fade",
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时,例如window.resize,Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery('isEdit'),
allowTouchMove: !getQuery("isEdit"),
/* slidesPerView: 1,
autoplay: !getQuery("isEdit")
? {
......@@ -149,55 +156,55 @@ export default {
: false, */
loop: false,
on: {
init () {
init() {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange () {
vm.sliderActiveIndex = this.realIndex
slideChange() {
vm.sliderActiveIndex = this.realIndex;
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd () {
slideChangeTransitionEnd() {
if (!vm.isEditMode) {
// swiperAnimate(this);
}
}
}
}
if (getQuery('isEdit')) {
this.isEditMode = true
};
if (getQuery("isEdit")) {
this.isEditMode = true;
} else {
this.isEditMode = false
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
})
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')) {
if (getQuery("isPreview")) {
} else {
// vm.getDefaulted();
}
}
},
data () {
data() {
return {
date: '',
img: '',
date: "",
img: "",
currentIndex: '',
currentIndex: "",
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
}
};
}
}
};
</script>
<style lang="scss" scoped>
.glob-container {
......
import welcome from './welcome'
import notice from './notice'
import schedule from './schedule'
import retail from './retail1'
import retail2 from './retail2'
import retail3 from './retail3'
export default {
welcome,
notice,
schedule
retail,
retail2,
retail3
}
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'
}
]
export default [
{
type: 'list',
name: '商品图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '商品图片', // 字段名称
description: '上传商品图片' // 用户填写时字段提示语
},
price: {
type: 'text',
name: '商品价格', // 字段名称
description: '填写商品价格' // 用户填写时字段提示语
}
}
],
dataKey: 'foodList'
},
{
type: 'text',
name: '标题',
description: '不超过8个字',
dataKey: 'title',
valueRule: ''
},
{
type: 'text',
name: '副标题',
description: '填写金额',
dataKey: 'price',
valueRule: ''
},
{
type: 'image',
name: '宣传二维码',
description: '上传二维码',
dataKey: 'code',
valueRule: ''
}
]
export default [
{
type: 'image',
name: '背景图片',
description: '请上传背景图片',
dataKey: 'bacground',
valueRule: ''
},
{
type: 'text',
name: '商品名称',
description: '请上传背景图片',
dataKey: 'bacground',
valueRule: ''
}
]
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'
}
]
import data from './schemaData.js'
import editMethod from './editMethod.js'
import requireIcons from '@/icons/requireIcons'
console.log(JSON.stringify(data))
console.log(JSON.stringify(data))
export default {
data: function () {
......
<template>
<div class="container">
<img class="liner" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/liner2.png"/>
<img
class="liner"
ref="mlxg"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/liner2.png"
/>
<div class="title">
地道美味
麻辣香锅
<div ref="title">{{getValue('title')}}</div>
</div>
<div class="title2">舌尖诱惑</div>
<div class="img-list">
<div class="title2">
<div ref="title2">{{getValue('title2')}}</div>
</div>
<div class="img-list" ref="imglist">
<swiper :options="swiperOption" ref="mySwiper" style=" width: 1080px;height: 581px;">
<swiper-slide
style="transform: translate3d(0,0,0); width: auto;"
......@@ -18,7 +23,7 @@
</swiper-slide>
</swiper>
</div>
<div class="item-price">
<div class="item-price" ref="item-price">
<div class="content">
¥
<span class="number">{{schemaData.foodList[sliderActiveIndex]['price']}}</span>
......@@ -26,7 +31,7 @@
</div>
<div class="bg"></div>
</div>
<div class="code-container">
<div class="code-container" ref="code">
<img class="code" :src="getValue('code')" alt />
</div>
</div>
......@@ -89,42 +94,41 @@ export default {
targets: this.$refs["title"],
translateX: 0,
opacity: 1,
delay: 1000,
delay: 500,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["decorate"],
targets: this.$refs["title2"],
translateX: 0,
opacity: 1,
delay: 500,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["surrounding"],
translateX: 0,
targets: this.$refs["imglist"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 1800,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["feature-list"],
translateX: 0,
targets: this.$refs["item-price"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 2100,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: ".high-light",
translateX: 0,
targets: this.$refs["code"],
translateY: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
rotate: 360,
delay: 1200,
easing: "easeInOutQuad"
}).finished
];
......@@ -147,8 +151,8 @@ export default {
duration: 0
});
anime({
targets: this.$refs["decorate"],
translateX: 2000,
targets: this.$refs["imglist"],
translateY: 2000,
opacity: 0,
duration: 0
});
......@@ -159,24 +163,32 @@ export default {
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
targets: this.$refs["title"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
targets: this.$refs["title2"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: ".high-light",
translateX: 1000,
targets: this.$refs["item-price"],
translateY: 1000,
opacity: 0,
duration: 0
duration: 0,
delay: 0
});
// setTimeout(() => {
anime({
targets: this.$refs["code"],
translateY: 100,
opacity: 0,
duration: 0,
delay: 0
}); // setTimeout(() => {
// this.enter();
// }, 1000);
},
......@@ -217,7 +229,7 @@ export default {
centeredSlides: true,
speed: 1000,
slidesPerView: "auto",
spaceBetween: 50,
spaceBetween: 70,
loop: true,
autoplay: {
delay: 5000
......@@ -274,7 +286,7 @@ export default {
font-size: 160px;
font-family: SourceHanSerifCN;
color: white;
width: 800px;
width: 700px;
transform: skew(0, -8deg);
transform-origin: left top;
text-align: center;
......@@ -313,7 +325,7 @@ export default {
.content {
position: absolute;
z-index: 5;
width: 409px;
bottom: 0;
text-align: center;
......
......@@ -2,6 +2,7 @@ import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
import sceneData from './sceneData.js'
export default {
templateInfo,
// defaultData,
......@@ -14,22 +15,22 @@ export default {
defaultData: defaultData.retail,
schemaData: defaultData.retail,
itemList: itemList.retail
},
{
name: '零售2',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
component: 'retail2',
defaultData: defaultData.retail2,
schemaData: defaultData.retail2,
itemList: itemList.retail2
},
{
name: '零售3',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
component: 'retail3',
defaultData: defaultData.retail3,
schemaData: defaultData.retail3,
itemList: itemList.retail3
}
// {
// name: '零售2',
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
// component: 'retail2',
// defaultData: defaultData.retail2,
// schemaData: defaultData.retail2,
// itemList: itemList.retail
// }
// {
// name: '零售3',
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
// component: 'retail3',
// defaultData: defaultData.retail3,
// schemaData: defaultData.retail3,
// itemList: itemList.retail
// }
]
}
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