初始上传
This commit is contained in:
70
addon/pintuan/component/view/pintuan/css/design.css
Executable file
70
addon/pintuan/component/view/pintuan/css/design.css
Executable file
@@ -0,0 +1,70 @@
|
||||
@CHARSET "UTF-8";
|
||||
.component-pintuan .pintuan-list{overflow: hidden;}
|
||||
|
||||
/* 头部样式 */
|
||||
/* 样式一 */
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head{display: flex;height: 44px;width: 100%;justify-content: space-between;align-items: center;padding: 0 12px;box-sizing: border-box;margin:0;background-repeat: no-repeat;background-size: cover;margin-bottom: 10px;border-radius: 9px 9px 0 0;line-height: 1;}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .left-img{max-height: 20px;max-width: 78px;}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .head-content{display: flex;align-items: center;color:#fff;margin-right: auto;margin-left: 22px;}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .head-content .img-wrap{position: relative;display: inline-block;margin-right: 5px;}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .head-content .img-wrap:after{content: "";width: 1px;height: 14px;background-color: #fff;position: absolute;left: -16px;top: 50%;transform: translateY(-50%);}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .head-content .img-wrap img{width: 20px;height: 20px;border: 1px solid #FF3D3D;border-radius: 50%;margin-left: -10px;}
|
||||
.component-pintuan .pintuan-list .style-1.pintuan-head .head-right{display: flex;align-items: center;color: #fff;}
|
||||
/* 样式二 */
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head{display: flex;height: 44px;width: 100%;justify-content: space-between;align-items: center;padding: 0 12px;box-sizing: border-box;margin:0;background-repeat: no-repeat;background-size: cover;margin-bottom: 10px;border-radius: 9px 9px 0 0;line-height: 1;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .left-img{max-height: 20px;max-width: 78px;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-content{display: flex;align-items: center;color:#fff;margin-right: auto;margin-left: 18px;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-content .img-wrap{position: relative;display: inline-block;margin-right: 4px;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-content .img-wrap:after{content: "";width: 1px;height: 14px;background-color: #fff;position: absolute;left: -16px;top: 50%;transform: translateY(-50%);}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-content .img-wrap img{width: 20px;height: 20px;border: 1px solid #FF3D3D;border-radius: 50%;margin-left: -10px;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-right{display: flex;align-items: center;justify-content: center;height: 18px;background: linear-gradient(270deg, #FFBD5B 0%, #FD882E 100%);border-radius: 12px;padding: 1px;}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-right span:nth-child(1){position: relative;left: 3px;transform: scale(0.9);}
|
||||
.component-pintuan .pintuan-list .style-2.pintuan-head .head-right span:nth-child(2){padding: 2px;background-color: #fff;color: #FFBD5B;border-radius: 50%;transform: scale(0.6);font-weight: bold;}
|
||||
|
||||
/* 样式：单列 */
|
||||
.component-pintuan .pintuan-list .row1-of1{}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item{display: flex;margin-bottom: 10px;padding: 8px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item:last-child{margin-bottom: 0;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .img-wrap {width: 100px;height: 100px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .img-wrap > img{width: 100%;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content{flex:1;margin-left: 10px;position: relative;display: flex;justify-content: space-between;flex-direction: column;padding: 3px 0 5px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .tag-wrap{display: flex;align-items: center;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .tag-wrap > div{height: 15px;line-height: 15px;border: 1px solid;border-radius: 3px;margin-right: 5px;font-size: 12px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .tag-wrap > div i {display: inline-block;width: 15px;height: 15px;font-size: 12px;color: #FFFFFF;text-align: center;margin-right: -3px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .tag-wrap > div span {padding: 0 5px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .bottom-wrap{display: flex;align-items: center;justify-content: space-between;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap{display: flex;align-items: baseline;width: 125px;overflow: hidden;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap>div:last-of-type{flex: 1;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap .discount-price{font-size: 0;font-weight: bold;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap .discount-price .unit{font-size: 12px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap .discount-price .price{font-size: 16px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content .price-wrap .original-price {font-size: 12px;line-height: 1;text-decoration: line-through;margin: 0 5px;}
|
||||
.component-pintuan .pintuan-list .row1-of1 .item .content button{height: 25px;line-height: 20px;font-size: 12px;padding: 0 8px;}
|
||||
|
||||
/* 样式：横向滑动 */
|
||||
.component-pintuan .pintuan-list .horizontal-slide{display: flex;margin: 10px;overflow: hidden;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item {width: 97px;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .img-wrap {width: 97px;height: 97px;overflow: hidden;position: relative;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .img-wrap > img{width: calc(100% + 1px);}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .img-wrap .num {width: 40px;position: absolute;bottom: 0;font-size: 12px;line-height: 1;color: #FFFFFF;text-align: center;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;transform: translate(50%);}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .content {padding: 5px 10px;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .content .price-wrap{margin-top: 5px;font-weight: bold;display: flex;align-items: flex-end;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .content .price-wrap .unit{font-size: 12px; height: 16px;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide .item .content .price-wrap .price{font-size: 16px;}
|
||||
/* 样式二 */
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-2.pintuan-content{margin: 0;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-2.pintuan-content .item{width: 103px;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-2.pintuan-content .item .img-wrap{width: 103px;height: 103px;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-2.pintuan-content .price-wrap{width: 100%;justify-content: center;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-2.pintuan-content .sale-num{text-align: center;color: #666666;}
|
||||
/* 样式三 */
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-3.pintuan-content .content{position: relative;}
|
||||
.component-pintuan .pintuan-list .horizontal-slide.style-3.pintuan-content .sale-action{position: absolute;bottom: 4px;right: -9px;font-size: 12px;width: 47px;height: 22px;background: linear-gradient(131deg, #3EDB73 0%, #1DB576 100%);border-radius: 4px;color: #fff;text-align: center;line-height: 22px;transform: scale(0.9);}
|
||||
|
||||
/* 秒杀头部弹窗样式 */
|
||||
.component-pintuan .style-list-box-pintuan{display: none;}
|
||||
.style-list-con-pintuan{display: flex;flex-wrap: wrap;}
|
||||
.style-list-con-pintuan .style-li-pintuan{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-pintuan .style-li-pintuan img{max-width: 280px;max-height: 220px;}
|
||||
.style-list-con-pintuan .style-li-pintuan:nth-child(1), .style-list-con-pintuan .style-li-pintuan:nth-child(2), .style-list-con-pintuan .style-li-pintuan:nth-child(3){margin-top: 0;}
|
||||
.style-list-con-pintuan .style-li-pintuan:nth-child(3n){margin-right: 0;}
|
||||
476
addon/pintuan/component/view/pintuan/design.html
Executable file
476
addon/pintuan/component/view/pintuan/design.html
Executable file
@@ -0,0 +1,476 @@
|
||||
<nc-component :data="data[index]" class="component-pintuan">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div class="pintuan-list" :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 v-if="nc.titleStyle.isShow" :class="[nc.titleStyle.style,'pintuan-head']" :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="head-content" v-if="nc.titleStyle.style == 'style-1'">
|
||||
<div class="img-wrap">
|
||||
<img :src="changeImgUrl('public/static/img/default_img/square.png')" alt="">
|
||||
<img :src="changeImgUrl('public/static/img/default_img/square.png')" alt="">
|
||||
<img :src="changeImgUrl('public/static/img/default_img/square.png')" alt="">
|
||||
</div>
|
||||
<span :style="{color: nc.titleStyle.textColor}">{{nc.titleStyle.virtualNum || 0}}人拼团成功</span>
|
||||
</div>
|
||||
<div class="head-content" v-if="nc.titleStyle.style == 'style-2'">
|
||||
<div class="img-wrap">
|
||||
<img src="{$resource_path}/img/style_2_logo_1.png" alt="">
|
||||
<img src="{$resource_path}/img/style_2_logo_2.png" alt="">
|
||||
<img src="{$resource_path}/img/style_2_logo_3.png" alt="">
|
||||
</div>
|
||||
<span :style="{color: nc.titleStyle.textColor}">{{nc.titleStyle.virtualNum || 0}}人参与</span>
|
||||
</div>
|
||||
<div class="head-right" :style="{fontSize: nc.titleStyle.moreFontSize + 'px',color: nc.titleStyle.moreColor}">
|
||||
<span>{{nc.titleStyle.more}}</span>
|
||||
<span class="iconyoujiantou iconfont"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[nc.template,nc.style,'pintuan-content']">
|
||||
<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" 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="tag-wrap" v-if="nc.groupStyle.control || nc.saleStyle.control">
|
||||
<div v-if="nc.groupStyle.control" :style="{ color : nc.groupStyle.bgColorStart,borderColor : nc.groupStyle.bgColorStart }">
|
||||
<i class="iconfont iconyonghu3" :style="{ backgroundColor : nc.groupStyle.bgColorStart }"></i>
|
||||
<span>2人团</span>
|
||||
</div>
|
||||
<div v-if="nc.saleStyle.control" :style="{ color : nc.saleStyle.color }">
|
||||
<span>已拼159件</span>
|
||||
</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" :style="{ color : nc.priceStyle.lineColor }">¥{{item.line_price}}</div>
|
||||
</div>
|
||||
<button v-if="nc.btnStyle.control" class="layui-btn" :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 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,
|
||||
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 v-if="nc.groupStyle.control&&nc.style =='style-1'" class="num" :style="{ color : nc.groupStyle.color,background : 'linear-gradient(to right,' + nc.groupStyle.bgColorStart + ',' + nc.groupStyle.bgColorEnd + ')' }">2人团</div>
|
||||
</div>
|
||||
<div class="content" v-if="nc.goodsNameStyle.control || nc.priceStyle.mainControl">
|
||||
<div class="goods-name" v-if="nc.goodsNameStyle.control&&(nc.style=='style-1' || nc.style=='style-3')" :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="price-wrap" 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="sale-action" v-if="nc.style=='style-3'">去参团</div>
|
||||
<div class="sale-num" v-if="nc.style=='style-2'">已拼{{item.sale_num}}件</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<pintuan-list-sources></pintuan-list-sources>
|
||||
|
||||
<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' ? "" : "" }}</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' ? "" : "" }}</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">
|
||||
<label class="layui-form-label sm">虚拟成团数</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.titleStyle.virtualNum" maxlength="8" placeholder="请输入虚拟成团数" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<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 ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>商品数据</h3>
|
||||
<div class="layui-form-item" v-if="nc.tempData.goodsSources">
|
||||
<label class="layui-form-label sm">数据来源</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="source-selected">
|
||||
<div class="source">{{ nc.tempData.goodsSources[nc.sources].text }}</div>
|
||||
<div v-for="(item,sourcesKey) in nc.tempData.goodsSources" :key="sourcesKey" class="source-item" :title="item.text" @click="nc.sources=sourcesKey" :class="{ 'text-color border-color' : (nc.sources == sourcesKey) }">
|
||||
<i class='iconfont' :class='item.icon'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" v-if="nc.sources == 'diy'">
|
||||
<label class="layui-form-label sm">手动选择</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="selected-style" @click="nc.tempData.methods.addGoods()">
|
||||
<span v-if="nc.goodsId.length == 0">请选择</span>
|
||||
<span v-if="nc.goodsId.length > 0" class="text-color">已选{{ nc.goodsId.length }}个</span>
|
||||
<i class="iconfont iconyoujiantou"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slide :data="{ field : 'count', label: '商品数量', min:1, max: 30}" v-if="nc.sources != 'diy'"></slide>
|
||||
</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.groupStyle.control = !nc.groupStyle.control" :class="{ 'layui-form-checked' : nc.groupStyle.control }">
|
||||
<span>{{ nc.groupStyle.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.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-pintuan">
|
||||
<div class="style-list-pintuan layui-form">
|
||||
<div class="style-list-con-pintuan">
|
||||
<div class="style-li-pintuan" 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 : '#6236FF,#0091FF' }"></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>
|
||||
<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 ? "" : "" }}</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' ? "" : "" }}</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' ? "" : "" }}</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 ? "" : "" }}</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' ? "" : "" }}</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' ? "" : "" }}</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 : 'bgColorStart,bgColorEnd', 'label' : '团购人数', parent : 'groupStyle', defaultColor : '#FA2379,#FF4F61' }"></color>
|
||||
<color :data="{ field : 'mainColor', 'label' : '销售价', parent : 'priceStyle', defaultColor : '#FF6A00' }"></color>
|
||||
<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' ? "" : "" }}</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' ? "" : "" }}</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 pintuanResourcePath = "{$resource_path}"; // http路径
|
||||
var pintuanRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
addon/pintuan/component/view/pintuan/img/horizontal_slide_bg.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/horizontal_slide_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
addon/pintuan/component/view/pintuan/img/horizontal_slide_name.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/horizontal_slide_name.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_1.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_2.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_3.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_2_logo_3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_2_title.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_2_title.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_title_1.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_title_1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
addon/pintuan/component/view/pintuan/img/style_title_2.png
Executable file
BIN
addon/pintuan/component/view/pintuan/img/style_title_2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
200
addon/pintuan/component/view/pintuan/js/design.js
Executable file
200
addon/pintuan/component/view/pintuan/js/design.js
Executable file
@@ -0,0 +1,200 @@
|
||||
var pintuanListHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("pintuan-list-sources", {
|
||||
template: pintuanListHtml,
|
||||
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, // 是否支持按钮
|
||||
saleSupport: true, // 是否支持商品销量
|
||||
lineSupport: true, // 是否支持划线价
|
||||
},
|
||||
],
|
||||
},
|
||||
"horizontal-slide": {
|
||||
text: "横向滑动",
|
||||
icon: "iconshangpinliebiaohengxianghuadong",
|
||||
styleList: [
|
||||
{
|
||||
text: "样式1",
|
||||
value: "style-1",
|
||||
cartSupport: false, // 是否支持按钮
|
||||
saleSupport: false, // 是否支持商品销量
|
||||
lineSupport: false, // 是否支持划线价
|
||||
},
|
||||
{
|
||||
text: "样式2",
|
||||
value: "style-2",
|
||||
cartSupport: false, // 是否支持按钮
|
||||
saleSupport: false, // 是否支持商品销量
|
||||
lineSupport: false, // 是否支持划线价
|
||||
},
|
||||
{
|
||||
text: "样式3",
|
||||
value: "style-3",
|
||||
cartSupport: false, // 是否支持按钮
|
||||
saleSupport: false, // 是否支持商品销量
|
||||
lineSupport: false, // 是否支持划线价
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
ornamentList: [
|
||||
{
|
||||
type: 'default',
|
||||
text: '默认',
|
||||
},
|
||||
{
|
||||
type: 'shadow',
|
||||
text: '投影',
|
||||
},
|
||||
{
|
||||
type: 'stroke',
|
||||
text: '描边',
|
||||
},
|
||||
],
|
||||
nameLineModeList: [
|
||||
{
|
||||
text: "单行",
|
||||
value: "single"
|
||||
},
|
||||
{
|
||||
text: "多行",
|
||||
value: "multiple"
|
||||
}
|
||||
],
|
||||
styleList: {
|
||||
"style-1": {
|
||||
styleName:'风格1',
|
||||
leftStyle: "img",
|
||||
leftImg: pintuanRelativePath + '/img/horizontal_slide_name.png',
|
||||
leftText: "超值拼团",
|
||||
backgroundImage: pintuanRelativePath + '/img/horizontal_slide_bg.png',
|
||||
bgColorStart: "#6236FF",
|
||||
bgColorEnd: "#0091FF",
|
||||
textColor: "#FFFFFF",
|
||||
moreColor: "#FFFFFF",
|
||||
more: "更多"
|
||||
},
|
||||
"style-2": {
|
||||
styleName:'风格2',
|
||||
leftStyle: "img",
|
||||
leftImg: pintuanRelativePath + '/img/style_2_title.png',
|
||||
leftText: "超值拼团",
|
||||
backgroundImage: "",
|
||||
bgColorStart: "#FFFFFF",
|
||||
bgColorEnd: "#FFFFFF",
|
||||
textColor: "#888888",
|
||||
moreColor: "#FFFFFF",
|
||||
more: "更多"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 < 4; 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), // 随机价格
|
||||
sale_num: Math.floor((Math.random() * 100 * i + 10 + 10))
|
||||
};
|
||||
}
|
||||
|
||||
// 组件所需的临时数据
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
loadImgMagnify();
|
||||
},
|
||||
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: "pintuan", 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.saleStyle.support = item.saleSupport;
|
||||
this.$parent.data.saleStyle.control = item.saleSupport;
|
||||
this.$parent.data.priceStyle.lineSupport = item.lineSupport;
|
||||
this.$parent.data.priceStyle.lineControl = item.lineSupport;
|
||||
},
|
||||
selectTopStyle: function () {
|
||||
var self = this;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '风格选择',
|
||||
area: ['910px', '350px'],
|
||||
btn: ['确定', '返回'],
|
||||
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .style-list-box-pintuan").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-pintuan .style-li-pintuan").on("click", ".layui-layer-content .style-list-con-pintuan .style-li-pintuan", 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()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user