init

src/addon/seckill/component/controller/Seckill.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace addon\seckill\component\controller;
+
+use app\component\controller\BaseDiyView;
+
+/**
+ * 秒杀模块·组件
+ *
+ */
+class Seckill extends BaseDiyView
+{
+
+    /**
+     * 设计界面
+     */
+    public function design()
+    {
+        return $this->fetch("seckill/design.html");
+    }
+}

src/addon/seckill/component/view/seckill/css/design.css

@@ -0,0 +1,110 @@
+@CHARSET "UTF-8";
+.component-seckill .seckill-list{overflow: hidden;}
+/* 样式：单列 */
+.component-seckill .seckill-list .row1-of1{}
+.component-seckill .seckill-list .row1-of1 .item{display: flex;margin-bottom: 10px;padding: 8px;}
+.component-seckill .seckill-list .row1-of1 .item:last-child{margin-bottom: 0;}
+.component-seckill .seckill-list .row1-of1 .item .img-wrap{width: 100px;height: 100px;}
+.component-seckill .seckill-list .row1-of1 .item .img-wrap > img{width: 100%;}
+.component-seckill .seckill-list .row1-of1 .item .content{display: flex;justify-content: space-between;flex-direction: column;flex: 1;margin-left: 10px;padding: 3px 0;}
+.component-seckill .seckill-list .row1-of1 .item .content .goods-name {}
+.component-seckill .seckill-list .row1-of1 .item .content .progress {display: flex;align-items: center;}
+.component-seckill .seckill-list .row1-of1 .item .content .progress .bg {width: 120px;height: 10px;border-radius: 10px;margin-right: 10px;}
+.component-seckill .seckill-list .row1-of1 .item .content .progress .bg .curr {width: 70px;height: 10px;border-radius: 10px;}
+.component-seckill .seckill-list .row1-of1 .item .content .progress .num {font-size: 12px;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap {display: flex;justify-content: space-between;align-items: center;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap .price-wrap {display: flex;align-items: baseline;font-size: 12px;flex-wrap: wrap;width: 130px;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap .price-wrap .discount-price {font-weight: bold;margin-right: 5px;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap .price-wrap .unit{font-size: 12px;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap .price-wrap .price{font-size: 16px;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap .original-price {font-size: 12px;text-decoration: line-through;}
+.component-seckill .seckill-list .row1-of1 .item .content .bottom-wrap button {height: 25px;line-height: 25px;padding: 0 8px;font-size: 12px;}
+/* 风格二 */
+.component-seckill .seckill-list.style-2 .row1-of1 .item{padding: 16px;}
+.component-seckill .seckill-list.style-2 .row1-of1 .item .img-wrap{position: relative;overflow: hidden;}
+.component-seckill .seckill-list.style-2 .row1-of1 .item .content .bottom-wrap .price-wrap{flex-direction: column-reverse;}
+.component-seckill .seckill-list.style-2 .row1-of1 .item .content .progress .bg .curr{position: relative;}
+.component-seckill .seckill-list.style-2 .row1-of1 .item .content .progress-bar{position: absolute;right: 0; width: 15px;height: 15px;top: 50%;transform: translateY(-50%);}
+.component-seckill .seckill-list.style-2 .row1-of1 .item .content .progress .num{color: #FF3D3D !important;}
+
+
+/* 样式：双列 */
+.component-seckill .seckill-list .row1-of2{display: flex;flex-wrap: wrap;}
+.component-seckill .seckill-list .row1-of2 .item{overflow: hidden;margin-right: 10px;margin-top: 10px;width: calc(50% - 5px);display: flex;flex-direction: column;box-sizing: border-box;}
+.component-seckill .seckill-list .row1-of2 .item:nth-child(2n){margin-right: 0;}
+.component-seckill .seckill-list .row1-of2 .item:nth-of-type(1), .component-seckill .seckill-list .row1-of2 .item:nth-of-type(2){margin-top: 0;}
+.component-seckill .seckill-list .row1-of2 .item .img-wrap{height: 170px;text-align: center;width: calc(100% + 2px);}
+.component-seckill .seckill-list .row1-of2 .item .img-wrap > img{width: 100%;height: 100%;}
+.component-seckill .seckill-list .row1-of2 .item .content{display: flex;flex-direction: column;flex: 1;padding: 5px 10px;position: relative;}
+.component-seckill .seckill-list .row1-of2 .item .content .goods-name{}
+.component-seckill .seckill-list .row1-of2 .item .content .discount-price{display: flex;align-items: baseline;margin-top: 5px;font-weight: bold;line-height: 1;}
+.component-seckill .seckill-list .row1-of2 .item .content .discount-price .unit{font-size: 12px;}
+.component-seckill .seckill-list .row1-of2 .item .content .discount-price .price{font-size: 16px;}
+.component-seckill .seckill-list .row1-of2 .item .content .bottom-wrap{display: flex;justify-content: space-between;align-items: flex-end;}
+.component-seckill .seckill-list .row1-of2 .item .content .bottom-wrap .original-price{font-size: 12px;text-decoration: line-through;}
+.component-seckill .seckill-list .row1-of2 .item .content .bottom-wrap button {height: 25px;line-height: 27px;padding: 0 8px;font-size: 12px;}
+
+/* 样式：横向滑动 */
+.component-seckill .seckill-list .horizontal-slide{box-sizing: border-box;justify-content: space-between;white-space: nowrap;overflow: hidden;margin: 10px;}
+.component-seckill .seckill-list .horizontal-slide .item {width: 97px;overflow: hidden;display: inline-block;margin-right: 10px;box-sizing: border-box;margin-top: 4px;}
+.component-seckill .seckill-list .horizontal-slide .item .img-wrap {width: 97px;height: 97px;overflow: hidden;position: relative;}
+.component-seckill .seckill-list .horizontal-slide .item .img-wrap > img{width: calc(100% + 1px);}
+.component-seckill .seckill-list .horizontal-slide .item .content {padding: 5px 10px;}
+.component-seckill .seckill-list .horizontal-slide .item .content .discount-price{margin-top: 5px;font-weight: bold;line-height: 1;display: flex;align-items: flex-end;}
+.component-seckill .seckill-list .horizontal-slide .item .content .discount-price .tag{display: none;}
+.component-seckill .seckill-list .horizontal-slide .item .content .discount-price .unit{font-size: 12px;}
+.component-seckill .seckill-list .horizontal-slide .item .content .discount-price .price{font-size: 16px;}
+.component-seckill .seckill-list .horizontal-slide .item .content .original-price{margin-top: 2px;font-size: 12px;text-decoration: line-through;}
+
+/* 横向滑动——样式2 */
+.component-seckill .seckill-list.style-2 .horizontal-slide{}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item{}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content{padding:5px 15px;text-align: center;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .discount-price{background: linear-gradient(to right,#FF5F17,#FE2F18);position: relative;padding: 4px 2px 4px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;justify-content: center;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .discount-price .tag{display: block;position: absolute;width: 13px;left:-5px;top:0;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .discount-price span{color: #ffffff;font-size: 13px;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .discount-price .unit{font-size: 13px;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .discount-price .price{margin-left: 3px;}
+.component-seckill .seckill-list.style-2 .horizontal-slide .item .content .original-price{margin-top: 5px;}
+
+/* 头部风格公共 */
+.component-seckill .title-wrap .left-img{max-height: 20px; max-width: 78px;}
+
+/* 头部风格一 */
+.component-seckill .title-wrap.style-1{display: flex;justify-content: space-between;align-items: center;padding: 10px;}
+.component-seckill .title-wrap.style-1 .time{display: flex;align-items: center;line-height: 1;margin-right: auto;margin-left: 10px;}
+.component-seckill .title-wrap.style-1 .time .seckill-title-name.text{margin-right: 5px;font-size: 12px;}
+.component-seckill .title-wrap.style-1 .time .number{font-size: 12px;border-radius: 3px;padding: 2px;}
+.component-seckill .title-wrap.style-1 .time .symbol{margin: 0 3px;}
+.component-seckill .title-wrap.style-1 .more{display: flex;align-items: center;}
+
+/* 头部风格二 */
+.component-seckill .title-wrap.style-2{display: flex;justify-content: space-between;align-items: center;padding: 10px;}
+.component-seckill .title-wrap.style-2 .time{display: flex;align-items: center;line-height: 1;margin-right: auto;margin-left: 10px;border-radius: 15px;padding: 0 10px;height: 22px;background-image: radial-gradient(transparent 50%, #fff);font-size: 12px;}
+.component-seckill .title-wrap.style-2 .time .seckill-title-name.icon{font-size: 12px;background-image: radial-gradient(transparent 35%, #fff);border-radius: 50%;position: relative;margin-left: -10px;height: 22px;width: 22px;line-height: 22px;text-align: center;margin-right: 3px;}
+.component-seckill .title-wrap.style-2 .time .seckill-title-name.text{display: none;}
+.component-seckill .title-wrap.style-2 .more{display: flex;align-items: center;}
+
+/* 头部风格三 */
+.component-seckill .title-wrap.style-3{display: flex;justify-content: space-between;align-items: center;padding: 10px;margin-bottom: 10px;height: 44px;box-sizing: border-box;background-repeat: no-repeat;background-size: cover;line-height: 1;border-radius: 9px 9px 0 0;}
+.component-seckill .title-wrap.style-3 .time{display: flex;align-items: center;line-height: 1;margin-right: auto;margin-left: 10px;}
+.component-seckill .title-wrap.style-3 .time .seckill-title-name.text{margin-right: 5px;font-size: 12px;color:#fff;position: relative;}
+.component-seckill .title-wrap.style-3 .time .seckill-title-name.text:after{content: "";position: absolute;left: -5px;height: 12px;width: 1px;background-color: #fff;}
+.component-seckill .title-wrap.style-3 .time .number{font-size: 12px;border-radius: 3px;padding: 2px;}
+.component-seckill .title-wrap.style-3 .time .symbol{margin: 0 3px;}
+.component-seckill .title-wrap.style-3 .more{display: flex;align-items: center;}
+
+/* 头部风格四 */
+.component-seckill .title-wrap.style-4{display: flex;justify-content: space-between;align-items: center;padding: 10px;margin-bottom: 10px;height: 44px;box-sizing: border-box;background-repeat: no-repeat;background-size: cover;line-height: 1;border-radius: 9px 9px 0 0;}
+.component-seckill .title-wrap.style-4 .time{display: flex;align-items: center;line-height: 1;}
+.component-seckill .title-wrap.style-4 .time .seckill-title-name.text{margin-right: 10px;font-size: 13px;color:#666666;}
+.component-seckill .title-wrap.style-4 .time .number{font-size: 12px;border-radius: 3px;padding: 2px;}
+.component-seckill .title-wrap.style-4 .time .symbol{margin: 0 3px;}
+
+/* 秒杀头部弹窗样式 */
+.component-seckill .style-list-box-seckill{display: none;}
+.style-list-con-seckill{display: flex;flex-wrap: wrap;}
+.style-list-con-seckill .style-li-seckill{overflow: hidden;display: flex;align-items: center;justify-content: center;width: 280px;height: 100px;margin-right: 12px;margin-top: 15px;cursor: pointer;border: 1px solid #ededed;background: #f7f8fa;}
+.style-list-con-seckill .style-li-seckill img{max-width: 280px;max-height: 220px;}
+.style-list-con-seckill .style-li-seckill:nth-child(1), .style-list-con-seckill .style-li-seckill:nth-child(2), .style-list-con-seckill .style-li-seckill:nth-child(3){margin-top: 0;}
+.style-list-con-seckill .style-li-seckill:nth-child(3n){margin-right: 0;}

src/addon/seckill/component/view/seckill/design.html

@@ -0,0 +1,489 @@
+<nc-component :data="data[index]" class="component-seckill">
+
+	<!-- 预览 -->
+	<template slot="preview">
+
+		<div :class="['seckill-list',nc.style]" :style="{ backgroundColor: nc.componentBgColor,
+			     borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
+			     borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
+			     borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
+			     borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
+			<div :class="['title-wrap',nc.titleStyle.style]" v-if="nc.titleStyle.isShow"
+			     :style="{'backgroundImage':'url('+ changeImgUrl(nc.titleStyle.backgroundImage) + '), linear-gradient(to right,' + nc.titleStyle.bgColorStart + ',' + nc.titleStyle.bgColorEnd + ')'}">
+				<h3 v-if="nc.titleStyle.leftStyle == 'text'" :style="{fontSize: nc.titleStyle.fontSize + 'px',color: nc.titleStyle.textColor,fontWeight: nc.titleStyle.fontWeight ? 'bold' : ''}">{{ nc.titleStyle.leftText }}</h3>
+				<img v-else class="left-img" :src="changeImgUrl(nc.titleStyle.leftImg)" />
+				<div class="time" :style="{ background: nc.titleStyle.timeBgColor }">
+
+					<span :style="{color: nc.titleStyle.textColor}" class="seckill-title-name text">距离结束</span>
+					<span v-if="nc.titleStyle.timeImageUrl" :class="['seckill-title-name icon',nc.titleStyle.timeImageUrl]" :style="{color : nc.titleStyle.numTextColor}"></span>
+
+					<span class="hour number" :style="{ background: 'linear-gradient(to right,' + nc.titleStyle.numBgColorStart + ',' + nc.titleStyle.numBgColorEnd + ')', color: nc.titleStyle.numTextColor }">22</span>
+					<span class="symbol" :style="{ color: nc.titleStyle.colonColor }">:</span>
+					<span class="minute number" :style="{ background: 'linear-gradient(to right,' + nc.titleStyle.numBgColorStart + ',' + nc.titleStyle.numBgColorEnd + ')', color: nc.titleStyle.numTextColor }">30</span>
+					<span class="symbol" :style="{ color: nc.titleStyle.colonColor }">:</span>
+					<span class="second number" :style="{ background: 'linear-gradient(to right,' + nc.titleStyle.numBgColorStart + ',' + nc.titleStyle.numBgColorEnd + ')', color: nc.titleStyle.numTextColor }">58</span>
+
+				</div>
+
+				<div class="more" v-if="nc.titleStyle.moreSupport" :style="{fontSize: nc.titleStyle.moreFontSize + 'px',color: nc.titleStyle.moreColor}">
+					<span>{{nc.titleStyle.more}}</span>
+					<i class="iconfont iconyoujiantou"></i>
+				</div>
+			</div>
+
+			<div :class="nc.template">
+				<template v-if="nc.tempData.previewList && Object.keys(nc.tempData.previewList).length">
+					<template v-if="nc.template == 'row1-of1'">
+						<div class="item" v-for="(item, previewIndex) in nc.tempData.previewList" :key="previewIndex"
+						     :style="{
+							     borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+							     borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+							     borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+							     borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+							     backgroundColor: nc.elementBgColor,
+							     boxShadow:  nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
+							     border: nc.ornament.type == 'stroke' ?  '1px solid ' + nc.ornament.color : ''}">
+							<div class="img-wrap" :style="{ borderRadius:  nc.imgAroundRadius + 'px' }">
+								<img :style="{ borderRadius:  nc.imgAroundRadius + 'px' }" :src="changeImgUrl('public/static/img/default_img/square.png')" />
+							</div>
+							<div class="content">
+								<div class="goods-name" v-if="nc.goodsNameStyle.control" :style="{ color : nc.goodsNameStyle.color,fontWeight : nc.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{'using-hidden' : nc.nameLineMode == 'single'},{'multi-hidden' : nc.nameLineMode == 'multiple'}]">{{ item.goods_name }}</div>
+								<div class="progress" v-if="nc.progressStyle.control">
+									<div class="bg" :style="{ backgroundColor : nc.progressStyle.bgColor }">
+										<div class="curr" :style="{ backgroundColor : nc.progressStyle.currColor }">
+											<img v-if="nc.template == 'row1-of1'&&nc.style == 'style-2'" class="progress-bar" src="{$resource_path}/img/progress_bar_01.png" alt="">
+										</div>
+									</div>
+									<div class="num" :style="{ color : nc.saleStyle.color }">已抢65.32%</div>
+								</div>
+								<div class="bottom-wrap">
+									<div class="price-wrap">
+										<div class="discount-price" v-if="nc.priceStyle.mainControl">
+											<span class="unit" :style="{ color : nc.priceStyle.mainColor }">¥</span>
+											<span class="price" :style="{ color : nc.priceStyle.mainColor }">{{item.discount_price.split(".")[0]}}</span>
+											<span class="unit" :style="{ color : nc.priceStyle.mainColor }">{{ "."+item.discount_price.split(".")[1]}}</span>
+										</div>
+										<div class="original-price" v-if="nc.priceStyle.lineControl && !(nc.template == 'row1-of1'&&nc.style == 'style-2')" :style="{ color : nc.priceStyle.lineColor }">¥{{item.line_price}}</div>
+										<div v-else :style="{ color : nc.priceStyle.lineColor }">
+											<span>原价：</span>
+											<span class="original-price">¥{{item.line_price}}</span>
+										</div>
+									</div>
+									<button class="layui-btn" v-if="nc.btnStyle.control" :style="{ background : 'linear-gradient(to right,' + nc.btnStyle.bgColorStart + ',' +  nc.btnStyle.bgColorEnd + ')', color : nc.btnStyle.textColor,borderRadius : nc.btnStyle.aroundRadius + 'px' }">{{ nc.btnStyle.text }}</button>
+								</div>
+							</div>
+						</div>
+					</template>
+
+					<template v-if="nc.template == 'row1-of2'">
+						<div class="item" v-for="(item, previewIndex) in nc.tempData.previewList" :key="previewIndex"
+						     :style="{
+							     borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+							     borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+							     borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+							     borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+							     backgroundColor: nc.elementBgColor,
+							     boxShadow:  nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
+							     border: nc.ornament.type == 'stroke' ?  '1px solid ' + nc.ornament.color : ''}">
+							<div class="img-wrap" :style="{ borderRadius:  nc.imgAroundRadius + 'px' }">
+								<img :style="{ borderRadius:  nc.imgAroundRadius + 'px' }" :src="changeImgUrl('public/static/img/default_img/square.png')" />
+							</div>
+							<div class="content" v-if="nc.goodsNameStyle.control || nc.priceStyle.mainControl || nc.priceStyle.lineControl || nc.btnStyle.control">
+								<div class="goods-name" v-if="nc.goodsNameStyle.control" :style="{ color : nc.goodsNameStyle.color,fontWeight : nc.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{'using-hidden' : nc.nameLineMode == 'single'},{'multi-hidden' : nc.nameLineMode == 'multiple'}]">{{ item.goods_name }}</div>
+								<div class="discount-price" v-if="nc.priceStyle.mainControl">
+									<span class="unit" :style="{ color : nc.priceStyle.mainColor }">¥</span>
+									<span class="price" :style="{ color : nc.priceStyle.mainColor }">{{item.discount_price.split(".")[0]}}</span>
+									<span class="unit" :style="{ color : nc.priceStyle.mainColor }">{{"."+item.discount_price.split(".")[1]}}</span>
+								</div>
+								<div class="bottom-wrap">
+									<div class="original-price" v-if="nc.priceStyle.lineControl" :style="{ color : nc.priceStyle.lineColor }">¥{{item.line_price}}</div>
+									<button class="layui-btn" v-if="nc.btnStyle.control" :style="{ background : 'linear-gradient(to right,' + nc.btnStyle.bgColorStart + ',' +  nc.btnStyle.bgColorEnd + ')', color : nc.btnStyle.textColor,borderRadius : nc.btnStyle.aroundRadius + 'px' }">{{ nc.btnStyle.text }}</button>
+								</div>
+							</div>
+						</div>
+					</template>
+					
+					<template v-if="nc.template == 'horizontal-slide'">
+						<div v-for="(item,previewIndex) in Object.values(nc.tempData.previewList)" :key="previewIndex" class="item" v-if="previewIndex < 3"
+							:style="{
+								borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+								borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
+								borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+								borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
+								backgroundColor: nc.elementBgColor,
+								marginLeft: nc.template == 'horizontal-slide' && (nc.slideMode == 'scroll' && nc.goodsMarginType=='diy' && (nc.goodsMarginNum+'px') || ((60 - nc.margin.both*2) /6 + 'px')) || '', 
+							 	marginRight: nc.template == 'horizontal-slide' && (nc.slideMode == 'scroll' && nc.goodsMarginType=='diy' && (nc.goodsMarginNum+'px') || ((60 - nc.margin.both*2) /6 + 'px')) || '', 
+								boxShadow:  nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
+								border: nc.ornament.type == 'stroke' ?  '1px solid ' + nc.ornament.color : ''}">
+							<div class="img-wrap" :style="{ borderRadius:  nc.imgAroundRadius + 'px' }">
+								<img :style="{ borderRadius:  nc.imgAroundRadius + 'px' }" :src="changeImgUrl('public/static/img/default_img/square.png')" />
+							</div>
+							<div class="content" v-if="nc.goodsNameStyle.control || nc.priceStyle.mainControl">
+								<div class="goods-name" v-if="nc.goodsNameStyle.control" :style="{ color : nc.goodsNameStyle.color,fontWeight : nc.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{'using-hidden' : nc.nameLineMode == 'single'},{'multi-hidden' : nc.nameLineMode == 'multiple'}]">{{ item.goods_name }}</div>
+								<div class="discount-price" v-if="nc.priceStyle.mainControl">
+									<img class="tag" src="{$resource_path}/img/style_4_tag.png">
+									<span class="unit" :style="{ color : nc.priceStyle.mainColor }">¥</span>
+									<span class="price" :style="{ color : nc.priceStyle.mainColor }">{{item.discount_price.split(".")[0]}}</span>
+									<span class="unit" :style="{ color : nc.priceStyle.mainColor }">{{"."+item.discount_price.split(".")[1]}}</span>
+								</div>
+								<div class="original-price" v-if="nc.priceStyle.lineControl" :style="{ color : nc.priceStyle.lineColor }">¥{{item.line_price}}</div>
+							</div>
+						</div>
+					</template>
+				</template>
+
+			</div>
+		</div>
+
+	</template>
+
+	<!-- 内容编辑 -->
+	<template slot="edit-content">
+		<template v-if="nc.lazyLoad">
+			<seckill-list-sources></seckill-list-sources>
+
+			<div class="template-edit-title">
+				<h3>商品数据</h3>
+				<slide :data="{ field : 'count', label: '商品数量', min:1, max: 30}"></slide>
+			</div>
+
+			<div class="template-edit-title">
+				<h3>头部风格</h3>
+				
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">头部状态</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.titleStyle.isShow = !nc.titleStyle.isShow" :class="{ 'layui-form-checked' : nc.titleStyle.isShow }">
+							<span>{{ nc.titleStyle.isShow ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<template v-if="nc.titleStyle.isShow">
+					<div class="layui-form-item" v-if="nc.tempData.methods">
+						<label class="layui-form-label sm">选择风格</label>
+						<div class="layui-input-block">
+							<div v-if="nc.titleStyle.styleName" class="text-color selected-style" @click="nc.tempData.methods.selectTopStyle">
+								<span>{{nc.titleStyle.styleName}}</span>
+								<i class="layui-icon layui-icon-right"></i>
+							</div>
+						</div>
+					</div>
+
+					<div class="layui-form-item">
+						<label class="layui-form-label sm">主标题类型</label>
+						<div class="layui-input-block">
+							<div @click="nc.titleStyle.leftStyle='text'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.titleStyle.leftStyle=='text') }">
+								<i class="layui-anim layui-icon">{{ nc.titleStyle.leftStyle=='text' ? "&#xe643;" : "&#xe63f;" }}</i>
+								<div>文字</div>
+							</div>
+							<div @click="nc.titleStyle.leftStyle='img'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.titleStyle.leftStyle=='img') }">
+								<i class="layui-anim layui-icon">{{ nc.titleStyle.leftStyle=='img' ? "&#xe643;" : "&#xe63f;" }}</i>
+								<div>图片</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="layui-form-item" v-if="nc.titleStyle.leftStyle=='text'">
+						<label class="layui-form-label sm">标题文字</label>
+						<div class="layui-input-block">
+							<input type="text" v-model="nc.titleStyle.leftText" maxlength="4" placeholder="限时秒杀" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item" v-if="nc.titleStyle.leftStyle=='img'">
+						<label class="layui-form-label sm">标题图片</label>
+						<div class="layui-input-block">
+							<img-upload :data="{ data: nc.titleStyle,field:'leftImg'}" data-disabled="1"></img-upload>
+						</div>
+					</div>
+
+					<div class="layui-form-item" v-if="nc.titleStyle.moreSupport">
+						<label class="layui-form-label sm">右侧文字</label>
+						<div class="layui-input-block">
+							<input type="text" v-model="nc.titleStyle.more" maxlength="8" placeholder="查看更多" class="layui-input">
+						</div>
+					</div>
+				</template>
+			</div>
+
+			<div class="template-edit-title">
+				<h3>商品风格</h3>
+				<div class="layui-form-item list-style" v-if="nc.tempData.templateList">
+					<label class="layui-form-label sm">风格</label>
+					<div class="layui-input-block">
+						<div class="source">{{ nc.tempData.templateList[nc.template].text }}</div>
+						<div class="template-selected">
+							<div v-for="(item,templateKey) in nc.tempData.templateList" :key="templateKey" class="source-item" :title="item.text"
+							     @click="nc.tempData.methods.selectTemplate(templateKey)"
+							     :class="[(nc.template == templateKey) ? 'text-color border-color' : '' ]">
+								<i class='iconfont' :class='item.icon'></i>
+							</div>
+						</div>
+						<div class="style-selected">
+							<div v-for="(item,styleIndex) in nc.tempData.templateList[nc.template].styleList" :key="styleIndex" @click="nc.tempData.methods.selectTemplate('',item)" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.style==item.value) }">
+								<i class="layui-anim layui-icon">{{ nc.style == item.value ? "&#xe643;" : "&#xe63f;" }}</i>
+								<div>{{item.text}}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+
+			<div class="template-edit-title" v-show="nc.btnStyle.support">
+				<h3>购买按钮</h3>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">是否显示</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.btnStyle.control = !nc.btnStyle.control" :class="{ 'layui-form-checked' : nc.btnStyle.control }">
+							<span>{{ nc.btnStyle.control ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item" v-if="nc.btnStyle.control">
+					<label class="layui-form-label sm">文字</label>
+					<div class="layui-input-block">
+						<input type="text" v-model="nc.btnStyle.text" maxlength="6" placeholder="请输入按钮文字" class="layui-input">
+					</div>
+				</div>
+
+			</div>
+
+			<div class="template-edit-title">
+				<h3>显示内容</h3>
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">商品名称</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.goodsNameStyle.control = !nc.goodsNameStyle.control" :class="{ 'layui-form-checked' : nc.goodsNameStyle.control }">
+							<span>{{ nc.goodsNameStyle.control ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">销售价</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.priceStyle.mainControl = !nc.priceStyle.mainControl" :class="{ 'layui-form-checked' : nc.priceStyle.mainControl }">
+							<span>{{ nc.priceStyle.mainControl ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item" v-show="nc.progressStyle.support">
+					<label class="layui-form-label sm">秒杀进度</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.progressStyle.control = !nc.progressStyle.control" :class="{ 'layui-form-checked' : nc.progressStyle.control }">
+							<span>{{ nc.progressStyle.control ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item" v-show="nc.priceStyle.lineSupport">
+					<label class="layui-form-label sm">划线价</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.priceStyle.lineControl = !nc.priceStyle.lineControl" :class="{ 'layui-form-checked' : nc.priceStyle.lineControl }">
+							<span>{{ nc.priceStyle.lineControl ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item" v-show="nc.saleStyle.support">
+					<label class="layui-form-label sm">商品销量</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.saleStyle.control = !nc.saleStyle.control" :class="{ 'layui-form-checked' : nc.saleStyle.control }">
+							<span>{{ nc.saleStyle.control ? '显示' : '隐藏' }}</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+					</div>
+				</div>
+
+			</div>
+
+		</template>
+
+		<!-- 弹框 -->
+		<article class="style-list-box-seckill">
+			<div class="style-list-seckill layui-form">
+				<div class="style-list-con-seckill">
+					<div class="style-li-seckill" v-for="(value,name,previewIndex) in nc.tempData.styleList" :key="name" :class="{'selected border-color': nc.titleStyle.style == name}" :data_key="name">
+						<span class="layui-hide">风格{{previewIndex + 1}}</span>
+						<img :src="'{$resource_path}/img/style_title_' + (previewIndex+1) + '.png'" />
+					</div>
+				</div>
+				<input type="hidden" name="style">
+				<input type="hidden" name="style_name" />
+			</div>
+		</article>
+
+	</template>
+
+	<!-- 样式编辑 -->
+	<template slot="edit-style">
+		<template v-if="nc.lazyLoad">
+			<template v-if="nc.titleStyle.isShow">
+				<div class="template-edit-title">
+					<h3>头部样式</h3>
+					<template v-if="nc.titleStyle.leftStyle == 'text'">
+						<div class="layui-form-item">
+							<label class="layui-form-label sm">标题加粗</label>
+							<div class="layui-input-block">
+								<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.titleStyle.fontWeight = !nc.titleStyle.fontWeight" :class="{ 'layui-form-checked' : nc.titleStyle.fontWeight }">
+									<span>加粗</span>
+									<i class="layui-icon layui-icon-ok"></i>
+								</div>
+							</div>
+						</div>
+						<color :data="{ field : 'textColor', 'label' : '标题颜色', parent : 'titleStyle', defaultColor : '#303133' }"></color>
+						<slide :data="{ field : 'fontSize',parent : 'titleStyle', label : '标题大小', min: 12, max : 16 }"></slide>
+					</template>
+					<color :data="{ field : 'bgColorStart,bgColorEnd', 'label' : '背景颜色', parent : 'titleStyle', defaultColor : '#FA6400,#FF287A' }"></color>
+					<div class="layui-form-item">
+						<label class="layui-form-label sm">背景图片</label>
+						<div class="layui-input-block">
+							<img-upload :data="{ data: nc.titleStyle,field:'backgroundImage'}" data-disabled="1"></img-upload>
+						</div>
+					</div>
+				</div>
+				<div class="template-edit-title">
+					<h3>倒计时样式</h3>
+					<nc-icon v-if="nc.titleStyle.style == 'style-2'" :data="{ field : 'timeImageUrl', parent : 'titleStyle'}"></nc-icon>
+					<color :data="{ field : 'timeBgColor', 'label' : '背景颜色', parent : 'titleStyle', defaultColor : '#303133' }"></color>
+					<color :data="{ field : 'numBgColorStart,numBgColorEnd', 'label' : '数字背景色', parent : 'titleStyle', defaultColor : '#FFFFFF' }"></color>
+					<color :data="{ field : 'numTextColor', 'label' : '数字颜色', parent : 'titleStyle', defaultColor : '#303133' }"></color>
+					<color :data="{ field : 'colonColor', 'label' : '冒号颜色', parent : 'titleStyle', defaultColor : '#FFFFFF' }"></color>
+
+				</div>
+				<div class="template-edit-title" v-if="nc.titleStyle.moreSupport">
+					<h3>“更多”样式</h3>
+					<color :data="{ field : 'moreColor', 'label' : '文字颜色', parent : 'titleStyle', defaultColor : '#999999' }"></color>
+					<slide :data="{ field : 'moreFontSize',parent : 'titleStyle', label : '文字大小', min: 12, max : 14 }"></slide>
+				</div>
+			</template>
+
+			<div class="template-edit-title">
+				<h3>商品样式</h3>
+
+				<div class="layui-form-item tag-wrap">
+					<label class="layui-form-label sm">边框</label>
+					<div class="layui-input-block">
+						<div v-for="(item,ornamentIndex) in nc.tempData.ornamentList" :key="ornamentIndex" @click="nc.ornament.type=item.type" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.ornament.type==item.type) }">
+							<i class="layui-anim layui-icon">{{ nc.ornament.type == item.type ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>{{item.text}}</div>
+						</div>
+					</div>
+				</div>
+
+				<color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
+
+				<slide :data="{ field : 'imgAroundRadius', label: '图片圆角', min:0, max: 50 }"></slide>
+
+				<div class="layui-form-item" v-if="nc.template == 'horizontal-slide'">
+					<label class="layui-form-label sm">滚动方式</label>
+					<div class="layui-input-block">
+						<div @click="nc.slideMode = 'scroll' " :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.slideMode == 'scroll') }">
+							<i class="layui-anim layui-icon">{{ nc.slideMode == 'scroll' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>平移</div>
+						</div>
+						<div @click="nc.slideMode = 'slide' " :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.slideMode == 'slide') }">
+							<i class="layui-anim layui-icon">{{ nc.slideMode == 'slide' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>切屏</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="layui-form-item" v-show="nc.goodsNameStyle.control">
+					<label class="layui-form-label sm">商品名称</label>
+					<div class="layui-input-block">
+						<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.goodsNameStyle.fontWeight = !nc.goodsNameStyle.fontWeight" :class="{ 'layui-form-checked' : nc.goodsNameStyle.fontWeight }">
+							<span>加粗</span>
+							<i class="layui-icon layui-icon-ok"></i>
+						</div>
+						<div v-for="(item,nameLineIndex) in nc.tempData.nameLineModeList" :key="nameLineIndex" @click="nc.nameLineMode=item.value" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.nameLineMode==item.value) }">
+							<i class="layui-anim layui-icon">{{ nc.nameLineMode == item.value ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>{{item.text}}</div>
+						</div>
+					</div>
+				</div>
+
+				<color :data="{ field : 'elementBgColor', 'label' : '商品背景' }"></color>
+
+				<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'topElementAroundRadius', label : '上圆角', max : 50 }"></slide>
+				<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'bottomElementAroundRadius', label : '下圆角', max : 50 }"></slide>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">色调</label>
+					<div class="layui-input-block">
+						<div @click="nc.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'default') }">
+							<i class="layui-anim layui-icon">{{ nc.theme == 'default' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>跟随主题风格</div>
+						</div>
+						<div @click="nc.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'diy') }">
+							<i class="layui-anim layui-icon">{{ nc.theme == 'diy' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>自定义</div>
+						</div>
+					</div>
+				</div>
+
+				<div v-show="nc.theme == 'diy'">
+					<color :data="{ field : 'color', 'label' : '商品名称', parent : 'goodsNameStyle', defaultColor : '#303133' }"></color>
+					<color :data="{ field : 'mainColor', 'label' : '销售价', parent : 'priceStyle', defaultColor : '#FF6A00' }"></color>
+					<div v-show="nc.progressStyle.support">
+						<color :data="{ field : 'bgColor,currColor', 'label' : '秒杀进度', parent : 'progressStyle', defaultColor : '#FCECD7,#FDBE6C' }"></color>
+					</div>
+					<div v-show="nc.priceStyle.lineSupport">
+						<color :data="{ field : 'lineColor', 'label' : '划线价', parent : 'priceStyle', defaultColor : '#999CA7' }"></color>
+					</div>
+					<div v-show="nc.saleStyle.support">
+						<color :data="{ field : 'color', 'label' : '商品销量', parent : 'saleStyle', defaultColor : '#999CA7' }"></color>
+					</div>
+				</div>
+
+			</div>
+
+			<div class="template-edit-title" v-show="nc.btnStyle.support && nc.btnStyle.control">
+				<h3>购买按钮</h3>
+
+				<slide :data="{ field : 'aroundRadius', label: '圆角', min:0, max: 50, parent: 'btnStyle' }"></slide>
+
+				<div class="layui-form-item">
+					<label class="layui-form-label sm">色调</label>
+					<div class="layui-input-block">
+						<div @click="nc.btnStyle.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.btnStyle.theme == 'default') }">
+							<i class="layui-anim layui-icon">{{ nc.btnStyle.theme == 'default' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>跟随主题风格</div>
+						</div>
+						<div @click="nc.btnStyle.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.btnStyle.theme == 'diy') }">
+							<i class="layui-anim layui-icon">{{ nc.btnStyle.theme == 'diy' ? "&#xe643;" : "&#xe63f;" }}</i>
+							<div>自定义</div>
+						</div>
+					</div>
+				</div>
+
+				<template v-if="nc.btnStyle.theme == 'diy'">
+					<color :data="{ field : 'bgColorStart,bgColorEnd', 'label' : '背景颜色', parent : 'btnStyle', defaultColor : '#FF7B1D,#FF1544' }"></color>
+					<color :data="{ field : 'textColor', 'label' : '文字颜色', parent : 'btnStyle', defaultColor : '#FFFFFF' }"></color>
+				</template>
+			</div>
+
+		</template>
+	</template>
+	
+	<!-- 资源 -->
+	<template slot="resource">
+		<js>
+			var seckillResourcePath = "{$resource_path}"; // http路径
+			var seckillRelativePath = "{$relative_path}"; // 相对路径
+		</js>
+		<js src="{$resource_path}/js/design.js"></js>
+		<css src="{$resource_path}/css/design.css"></css>
+	</template>
+	
+</nc-component>

src/addon/seckill/component/view/seckill/js/design.js

@@ -0,0 +1,290 @@
+var seckillListHtml = '<div style="display:none;"></div>';
+
+Vue.component("seckill-list-sources", {
+	template: seckillListHtml,
+	data: function () {
+		return {
+			data: this.$parent.data,
+			goodsSources: {
+				initial: {
+					text: "默认",
+					icon: "iconmofang"
+				},
+				diy: {
+					text: "手动选择",
+					icon: "iconshoudongxuanze"
+				},
+			},
+			templateList: {
+				"row1-of1": {
+					text: "单列",
+					icon: "iconiPhone86",
+					styleList: [
+						{
+							text: "样式1",
+							value: "style-1",
+							cartSupport: true, // 是否支持按钮
+							lineSupport: true, // 是否支持划线价
+							saleSupport: false, // 是否支持销量
+							progressSupport: true // 是否支持进度
+						},
+						{
+							text: "样式2",
+							value: "style-2",
+							cartSupport: true, // 是否支持按钮
+							lineSupport: true, // 是否支持划线价
+							saleSupport: false, // 是否支持销量
+							progressSupport: true // 是否支持进度
+						}
+					],
+				},
+				"row1-of2": {
+					text: "两列",
+					icon: "iconyihanglianglie",
+					styleList: [
+						{
+							text: "样式1",
+							value: "style-1",
+							cartSupport: true, // 是否支持购物车按钮
+							lineSupport: true, // 是否支持划线价
+							saleSupport: false, // 是否支持销量
+							progressSupport: false // 是否支持进度
+						},
+					],
+				},
+				"horizontal-slide": {
+					text: "横向滑动",
+					icon: "iconshangpinliebiaohengxianghuadong",
+					styleList: [
+						{
+							text: "样式1",
+							value: "style-1",
+							cartSupport: false, // 是否支持按钮
+							lineSupport: true, // 是否支持划线价
+							saleSupport: false,// 是否支持销量
+							progressSupport: false // 是否支持进度
+						},
+						{
+							text: "样式2",
+							value: "style-2",
+							cartSupport: false, // 是否支持按钮
+							lineSupport: true, // 是否支持划线价
+							saleSupport: false,// 是否支持销量
+							progressSupport: false, // 是否支持进度
+							mainColor: "#FFFFFF", // 销售价颜色
+							goodsNameControl: false // 是否显示商品名称
+						},
+					],
+				},
+			},
+			ornamentList: [
+				{
+					type: 'default',
+					text: '默认',
+				},
+				{
+					type: 'shadow',
+					text: '投影',
+				},
+				{
+					type: 'stroke',
+					text: '描边',
+				},
+			],
+			nameLineModeList: [
+				{
+					text: "单行",
+					value: "single"
+				},
+				{
+					text: "多行",
+					value: "multiple"
+				}
+			],
+			styleList: {
+				"style-1": {
+					isShow: true,
+					leftStyle: "text",
+					leftImg: "",
+					leftText: "限时秒杀",
+					backgroundImage: '',
+					bgColorStart: "#FFFFFF",
+					bgColorEnd: "#FFFFFF",
+					textColor: "#303133",
+					timeImageUrl: "",
+					timeBgColor: "",
+					numBgColorStart: "#303133", // 数字背景色开始
+					numBgColorEnd: "#303133", // 数字背景色结束
+					numTextColor: "#FFFFFF", // 数字颜色
+					colonColor: "#303133", // 冒号颜色
+					moreColor: "#999999",
+					more: "查看更多",
+					moreSupport: true
+				},
+				"style-2": {
+					isShow: true,
+					leftStyle: "text",
+					leftImg: "",
+					leftText: "限时秒杀",
+					backgroundImage: '',
+					bgColorStart: "#FFFFFF",
+					bgColorEnd: "#FFFFFF",
+					textColor: "#303133",
+					timeBgColor: "#303133",
+					timeImageUrl: 'icondiy icon-system-seckill-time',
+					numBgColorStart: "#303133",
+					numBgColorEnd: "#303133",
+					numTextColor: "#FFFFFF",
+					colonColor: "#FFFFFF",
+					moreColor: "#999999",
+					more: "查看更多",
+					moreSupport: true
+				},
+				"style-3": {
+					isShow: true,
+					leftStyle: "img",
+					leftImg: seckillRelativePath + '/img/style_title_3_name.png',
+					leftText: "",
+					backgroundImage: seckillRelativePath + '/img/style_title_3_bg.png',
+					bgColorStart: "#FA6400",
+					bgColorEnd: "#FF287A",
+					textColor: "#FFFFFF",
+					timeBgColor: "",
+					timeImageUrl: '',
+					numBgColorStart: "#FFFFFF",
+					numBgColorEnd: "#FFFFFF",
+					numTextColor: "#FD3B54",
+					colonColor: "#FFFFFF",
+					moreColor: "#FFFFFF",
+					more: "更多",
+					moreSupport: true
+				},
+				"style-4": {
+					isShow: true,
+					leftStyle: "img",
+					leftImg: seckillRelativePath + '/img/style_title_4_name.png',
+					leftText: "",
+					backgroundImage: seckillRelativePath + '/img/style_title_4_bg.png',
+					bgColorStart: "#FFFFFF",
+					bgColorEnd: "#FFFFFF",
+					textColor: "#666666",
+					timeBgColor: "",
+					timeImageUrl: '',
+					numBgColorStart: "#FF5F17",
+					numBgColorEnd: "#FE2F18",
+					numTextColor: "#FFFFFF",
+					colonColor: "#FE3718",
+					moreColor: "",
+					more: "",
+					moreSupport: false
+				}
+			},
+		}
+	},
+	created: function () {
+		if (!this.$parent.data.verify) this.$parent.data.verify = [];
+		this.$parent.data.verify.push(this.verify);//加载验证方法
+
+		this.$parent.data.ignore = ['textColor']; //加载忽略内容 -- 其他设置中的属性设置
+		this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
+
+		var previewList = {};
+		for (var i = 1; i < 5; i++) {
+			previewList["goods_id_" + ns.gen_non_duplicate(i)] = {
+				goods_name: "秒杀商品",
+				discount_price: (Math.random() * 100 * i + 10).toFixed(2), // 随机价格
+				line_price: (Math.random() * 100 * i + 100 + 10).toFixed(2), // 随机价格
+			};
+		}
+
+		// 组件所需的临时数据
+		this.$parent.data.tempData = {
+			goodsSources: this.goodsSources,
+			templateList: this.templateList,
+			ornamentList: this.ornamentList,
+			nameLineModeList: this.nameLineModeList,
+			styleList: this.styleList,
+			previewList: previewList,
+			methods: {
+				addGoods: this.addGoods,
+				selectTemplate: this.selectTemplate,
+				selectTopStyle: this.selectTopStyle
+			}
+		};
+	},
+	methods: {
+		verify: function (index) {
+			var res = {code: true, message: ""};
+			if (vue.data[index].sources === 'diy' && vue.data[index].goodsId.length === 0) {
+				res.code = false;
+				res.message = "请选择商品";
+			}
+			return res;
+		},
+		addGoods: function () {
+			var self = this;
+			goodsSelect(function (res) {
+				self.$parent.data.goodsId = res;
+			}, self.$parent.data.goodsId, {mode: "spu", promotion: "seckill", disabled: 0, post: ns.appModule});
+		},
+		selectTemplate(template, item) {
+			if (template) {
+				this.$parent.data.template = template;
+				item = this.templateList[template].styleList[0];
+			}
+
+			this.$parent.data.style = item.value;
+			this.$parent.data.btnStyle.support = item.cartSupport;
+			this.$parent.data.btnStyle.control = item.cartSupport;
+			this.$parent.data.priceStyle.lineSupport = item.lineSupport;
+			this.$parent.data.priceStyle.lineControl = item.lineSupport;
+			this.$parent.data.saleStyle.support = item.saleSupport;
+			this.$parent.data.saleStyle.control = item.saleSupport;
+			this.$parent.data.progressStyle.support = item.progressSupport;
+			this.$parent.data.progressStyle.control = item.progressSupport;
+
+			if (item.mainColor) {
+				this.$parent.data.priceStyle.mainColor = item.mainColor;
+			} else {
+				this.$parent.data.priceStyle.mainColor = '#FF1745';
+			}
+
+			if (item.goodsNameControl !== undefined) {
+				this.$parent.data.goodsNameStyle.control = item.goodsNameControl;
+			} else {
+				this.$parent.data.goodsNameStyle.control = true;
+			}
+
+			if (this.data.template == "row1-of1" && this.data.style == "style-2") {
+				this.$parent.data.progressStyle.bgColor = "#FFD5D5";
+				this.$parent.data.progressStyle.currColor = "#ff0400";
+			}
+		},
+		selectTopStyle: function () {
+			var self = this;
+			layer.open({
+				type: 1,
+				title: '风格选择',
+				area: ['910px', '360px'],
+				btn: ['确定', '返回'],
+				content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .style-list-box-seckill").html(),
+				success: function (layero, index) {
+					$(".layui-layer-content input[name='style']").val(self.data.titleStyle.style);
+					$(".layui-layer-content input[name='style_name']").val(self.data.titleStyle.styleName);
+					$("body").off("click", ".layui-layer-content .style-list-con-seckill .style-li-seckill").on("click", ".layui-layer-content .style-list-con-seckill .style-li-seckill", function () {
+						$(this).addClass("selected border-color").siblings().removeClass("selected border-color bg-color-after");
+						$(".layui-layer-content input[name='style']").val($(this).attr("data_key"));
+						$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
+					});
+				},
+				yes: function (index, layero) {
+					self.data.titleStyle.style = $(".layui-layer-content input[name='style']").val();
+					Object.assign(self.data.titleStyle, self.styleList[self.data.titleStyle.style]);
+					self.data.titleStyle.styleName = $(".layui-layer-content input[name='style_name']").val();
+					layer.closeAll();
+					loadImgMagnify();
+				}
+			});
+		}
+	}
+});