Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
addon/coupon/component/controller/Coupon.php Executable file
View File

@@ -0,0 +1,19 @@
<?php
namespace addon\coupon\component\controller;
use app\component\controller\BaseDiyView;
/**
* 优惠券·组件
*/
class Coupon extends BaseDiyView
{
/**
* 后台编辑界面
*/
public function design()
{
return $this->fetch('coupon/design.html');
}
}

681
addon/coupon/component/view/coupon/css/design.css Executable file
View File

@@ -0,0 +1,681 @@
@CHARSET "UTF-8";
/* 弹框样式 */
.coupon-wrap .coupon-list-style {
display: none;
}
.style-list-con-coupon {
display: flex;
flex-wrap: wrap;
}
.style-list-con-coupon .style-li-coupon {
width: 32%;
height: 150px;
line-height: 150px;
margin-right: 2%;
margin-bottom: 15px;
cursor: pointer;
border: 1px solid #ededed;
background: #f7f8fa;
box-sizing: border-box;
text-align: center;
}
.style-list-con-coupon .style-li-coupon:nth-child(3n) {
margin-right: 0;
}
.style-list-con-coupon .style-li-coupon img {
max-width: 100%;
max-height: 100%;
}
.layui-layer-page .layui-layer-content {
overflow: auto !important;
}
/* 公共样式 */
.coupon-wrap .coupon-box .coupon {
display: inline-block;
width: 140px;
margin-right: 10px;
position: relative;
}
.coupon-wrap .coupon-box .coupon .coupon-intro {
position: absolute;
top: 10px;
width: 103px;
text-align: center;
font-size: 12px;
}
.coupon-wrap .coupon-box .coupon .coupon-intro .coupon-price {
margin-bottom: 3px;
}
.coupon-wrap .coupon-box .coupon .coupon-intro .coupon-price span {
font-size: 20px;
}
/* 风格一 */
.coupon-wrap .coupon-box.coupon-box-1 {
display: block;
box-sizing: border-box;
padding: 0 8px;
}
.coupon-wrap .coupon-box.coupon-box-1 .coupon-box-list {
overflow: hidden;
display: flex;
flex-wrap: nowrap;
}
.coupon-wrap .coupon-box.coupon-box-1 .coupon {
width: 105px;
flex-shrink: 0;
}
.coupon-wrap .coupon-box.coupon-box-1 .coupon:last-of-type{
margin-right: 0 !important;
}
.coupon-box-1 .coupon-price, .coupon-box-1 .coupon-desc, .coupon-box-1 .coupon-btn {
color: #FFFFFF;
}
.coupon-wrap .coupon-box.coupon-box-1 .coupon .coupon-intro {
width: 80px;
height: 52px;
top: 7px;
}
.coupon-wrap .coupon-box.coupon-box-1 .coupon .coupon-btn {
bottom: 50%;
font-size: 12px;
line-height: 13px;
transform: translateY(50%);
word-break: break-all;
width: 12px;
}
.coupon-box-1 .coupon-title {
display: flex;
width: 100%;
align-items: flex-end;
}
.coupon-box-1 .coupon-title img {
height: 15px;
margin-right: 10px;
}
.coupon-box-1 .coupon-title span {
line-height: 14px;
color: #909399;
}
.coupon-box-1 ul.coupon-list {
margin-top: 15px;
display: flex;
}
.coupon-box-1 ul.coupon-list li.coupon-li {
margin-left: 10px;
height: 65px;
position: relative;
}
.coupon-box-1 ul.coupon-list li.coupon-li:first-child {
margin-left: 0;
}
.coupon-box-1 ul.coupon-list li.coupon-li img {
height: 65px;
}
.coupon-box-1 ul.coupon-list li.coupon-li .coupon-intro {
position: absolute;
top: 12px;
left: 7px;
color: #FF4544;
}
.coupon-box-1 ul.coupon-list li.coupon-li .coupon-intro .coupon-price {
font-size: 12px;
}
.coupon-box-1 ul.coupon-list li.coupon-li .coupon-intro .coupon-price span {
font-size: 20px;
}
.coupon-box-1 ul.coupon-list li.coupon-li .coupon-intro .coupon-desc {
font-size: 12px;
margin-top: 5px;
}
.coupon-box-1 ul.coupon-list li.coupon-li .coupon-btn {
font-size: 12px;
line-height: 14px;
width: 12px;
position: absolute;
right: 11px;
top: 4px;
color: #FFFFFF;
}
/* 风格二 */
.coupon-wrap .coupon-box {
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
background-size: cover;
background-repeat: no-repeat;
}
.coupon-wrap .coupon-box-2{
padding: 0 8px;
box-sizing: border-box;
}
.coupon-wrap .coupon-box-2 .coupon {
display: inline-block;
margin-right: 10px;
position: relative;
width: 105px;
}
.coupon-wrap .coupon-box-2 .coupon:last-of-type{
margin-right: 0 !important;
}
.coupon-wrap .coupon-box .coupon img {
width: 100%;
}
.coupon-wrap .coupon-box-2 .coupon .coupon-intro {
position: absolute;
top: 5px;
width: 80px;
text-align: center;
font-size: 12px;
}
.coupon-wrap .coupon-box-2 .coupon .coupon-intro .coupon-price {
margin-bottom: 0;
}
.coupon-wrap .coupon-box-2 .coupon .coupon-intro .coupon-price span{
font-size: 18px;
}
.coupon-wrap .coupon-box .coupon .coupon-btn {
position: absolute;
bottom: 12px;
right: 6px;
width: 20px;
font-size: 14px;
line-height: 18px;
text-align: center;
}
.coupon-wrap .coupon-box.coupon-box-2 .coupon .coupon-btn {
bottom: -4px;
right: 5px;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
letter-spacing: 9px;
}
/* 风格三 */
.coupon-wrap .coupon-box-3 {
height: 141px;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 8px;
box-sizing: border-box;
}
.coupon-block {
width: 100%;
display: flex;
overflow: hidden;
}
.coupon-wrap .coupon-box-3 .coupon {
width: 103px;
height: 125px;
margin-right: 10px;
text-align: center;
flex-shrink: 0;
}
.coupon-wrap .coupon-box-3 .coupon:last-of-type{
margin-right: 0 !important;
}
.coupon-wrap .coupon-box-3 .coupon .coupon-intro {
width: 100%;
top: 15px;
}
.coupon-wrap .coupon-box-3 .coupon .coupon-intro .coupon-price span {
font-size: 24px;
}
.coupon-wrap .coupon-box-3 .coupon .coupon-desc {
margin: 5px 0;
}
.coupon-wrap .coupon-box-3 .coupon .coupon-info {
color: #777777;
margin-top: 5px;
}
.coupon-wrap .coupon-box-3 .coupon .coupon-btn {
width: 66px;
bottom: 6px;
left: 50%;
margin-left: -33px;
font-size: 12px;
color: #FFFFFF;
line-height: 28px;
background-color: #FF4544;
border-radius: 30px;
}
/* 风格四 */
.coupon-wrap .coupon-box-4 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
}
.coupon-wrap .coupon-box-4 .coupon {
width: 105px;
margin-right: 15px;
}
.coupon-wrap .coupon-box-4 .coupon:last-child {
margin-right: 0 !important;
}
.coupon-wrap .coupon-box-4 .coupon .coupon-intro {
width: 75px;
position: absolute;
top: 6px;
}
.coupon-wrap .coupon-box-4 .coupon .coupon-intro p {
font-size: 12px;
color: #FFFFFF;
}
.coupon-wrap .coupon-box-4 .coupon .coupon-intro .coupon-price {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 80px
}
.coupon-wrap .coupon-box-4 .coupon .coupon-intro .coupon-price span {
font-size: 24px;
margin: 0 3px;
line-height: 1;
}
.coupon-wrap .coupon-box-4 .coupon .coupon-btn {
font-size: 12px;
line-height: 1;
position: absolute;
top: 0px;
right: 8px;
color: #FFFFFF;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
letter-spacing: 2px;
bottom: -2px;
transform: scale(.8);
}
/* 风格五 */
.coupon-wrap .coupon-box-5 {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
box-sizing: border-box;
}
.coupon-wrap .coupon-box-5 .coupon {
width: 100%;
display: flex;
border-radius: 10px;
margin: 5px auto 5px;
height: 80px;
align-items: center;
position: relative;
}
.coupon-wrap .coupon-box-5 .coupon img{
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-price{
padding: 8px;
box-sizing: border-box;
color: #f00;
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: baseline;
position: relative;
z-index: 1;
width: 81px;
min-width: 81px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-line{
position: relative;
z-index: 1;
border: 1px dashed #999;
height: 60%;
margin: 0 7px;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-price span{
font-size: 12px;
font-weight: unset;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-content{
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 10px;
align-items: center;
position: relative;
z-index: 1;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-content .coupon-intro{
display: flex;
flex-direction: column;
align-items: flex-start;
position: unset;
width: max-content;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-content .coupon-intro .coupon-name{
font-size: 16px;
font-weight: bold;
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-content .coupon-desc{
font-size: 12px;
color: #999;
margin-top: 5px;
}
.coupon-wrap .coupon-box-5 .coupon .coupon-content .coupon-btn{
font-size: 12px;
color: #fff;
background: #333;
position: unset;
min-width: 55px;
width: auto;
word-break: keep-all;
height: fit-content;
padding: 5px;
margin-right: 10px;
border-radius: 5px;
}
/* 右侧已选择优惠券 */
.select-coupon-list{
}
.select-coupon-item{
border-radius: 4px;
padding: 10px 20px 10px 10px;
color: #999;
position: relative;
margin-top: 10px;
cursor: pointer;
background: #ffffff;
border: 1px dashed #e5e5e5;
}
.select-coupon-item .close{
}
.select-coupon-item:hover .close{
display: block;
}
.select-coupon-item .coupon-content{
position: relative;
display: flex;
align-items: center;
margin-top: 15px;
}
.select-coupon-item .coupon-content:first-of-type{
margin-top: 0px;
}
.select-coupon-item .coupon-content .coupon-label-name{
width: 100px;
text-align: right;
padding-right: 8px;
color: #666;
margin-right: 15px;
}
.select-coupon-item .coupon-content .coupon-label-value{
color: #333;
width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 风格六 */
.coupon-wrap .coupon-box-6{
padding: 0 8px;
box-sizing: border-box;
}
.coupon-wrap .coupon-box-6 .coupon{
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 104px;
height: 135px;
background-repeat: no-repeat;
background-size: contain;
padding: 10px;
box-sizing: border-box;
position: relative;
flex-shrink: 0;
}
.coupon-wrap .coupon-box-6 .coupon:nth-child(3){
margin-right: 0;
}
.coupon-wrap .coupon-box-6 .coupon::after{
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 35px;
border-bottom: 1px dashed #999;
}
.coupon-wrap .coupon-box-6 .coupon .btn{
position: absolute;
height: 18px;
min-width: 31px;
line-height: 18px;
text-align: center;
font-size: 12px;
top: 10px;
right: 0;
}
.coupon-wrap .coupon-box-6 .coupon .btn > span{
display: inline-block;
line-height: 1;
transform: scale(.8);
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content{
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content .price-wrap{
margin-top: 17px;
margin-bottom: 5px;
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content .price{
margin: 5px 0;
font-size: 35px;
font-weight: bold;
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content .text{
position: relative;
color: #401D00;
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content .text::after{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 10px;
right: -13px;
border-bottom: 1px solid #401D00;
}
.coupon-wrap .coupon-box-6 .coupon .coupon-content .text::before{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 10px;
left: -13px;
border-bottom: 1px solid #401D00;
}
.coupon-wrap .coupon-box-6 .coupon .limit{
margin-top: auto;
font-size: 12px;
font-weight: bold;
}
.coupon-wrap .coupon-box-6 .coupon .unit{
color: #222;
display: inline-block;
line-height: 1;
transform: scale(.8);
}
.coupon-wrap .coupon-box-6 .coupon.coupon-null .limit{
color: #333333;
}
.coupon-wrap .coupon-box-6 .coupon.coupon-null .unit{
color: #999;
}
.coupon-wrap .coupon-box-6 .coupon.coupon-null .text {
color: #401D00;
}
.coupon-wrap .coupon-box-6 .coupon.coupon-null .coupon-content .text::before, .coupon-wrap .coupon-box-6 .coupon.coupon-null .coupon-content .text::after{
border-color: #401D00;
}
.coupon-wrap .coupon-box-6 .coupon.coupon-null .coupon-content .price{
color: #999;
font-weight: inherit;
border: 2px solid #999;
border-radius: 50%;
height: 21px;
width: 21px;
line-height: 21px;
text-align: center;
font-size: 25px;
margin: 20px 0 17px;
}
/* 风格七 */
.coupon-wrap .coupon-box-7 {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.coupon-wrap .coupon-box-7 .coupon {
width: 100%;
display: flex;
border-radius: 10px;
margin: 5px auto 5px;
height: 80px;
align-items: center;
position: relative;
}
.coupon-wrap .coupon-box-7 .coupon{
margin-right: 6px;
}
.coupon-wrap .coupon-box-7 .coupon img{
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-price{
padding: 8px;
box-sizing: border-box;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: baseline;
position: relative;
z-index: 1;
min-width: 81px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-line{
position: relative;
z-index: 1;
border: 1px dashed #FD463E;
height: 60%;
margin-left: 7px;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-price span{
font-size: 12px;
font-weight: unset;
margin-left: 2px;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-intro{
display: flex;
flex-direction: column;
align-items: flex-start;
position: unset;
width: 120px;
z-index: 5;
margin-left: 15px;
margin-right: 5px;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-intro .coupon-name{
font-size: 14px;
font-weight: bold;
width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-desc{
font-size: 11px;
color: #999;
margin-top: 5px;
}
.coupon-wrap .coupon-box-7 .coupon .coupon-btn{
font-size: 12px;
color: #fff;
position: unset;
height: fit-content;
z-index: 5;
width: 65px;
padding: 10px 18px;
box-sizing: border-box;
}

402
addon/coupon/component/view/coupon/design.html Executable file
View File

@@ -0,0 +1,402 @@
<nc-component :data="data[index]" class="coupon-wrap">
<!-- 预览 -->
<template slot="preview">
<div class="coupon-preview" v-if="nc.tempData.methods && Object.keys(nc.tempData.methods).length">
<div class="coupon-box coupon-box-1" v-if="nc.style == 1" :style="[nc.couponType == 'img' && {backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<div class="coupon-box-list" v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="(item, index) in nc.previewList" v-if="index < 3" :style="{marginRight: (40 - nc.margin.both * 2) / 2 + 'px'}">
<img src="{$resource_path}/img/style1-bg.png">
<div class="coupon-intro" >
<p class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">￥<span>{{nc.tempData.methods.moneyConduct(item.money)}}</span></p>
<p class="coupon-price" :style="{color: nc.moneyColor}" v-else><span>{{nc.tempData.methods.moneyConduct(item.discount)}}</span>折</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元使用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
<div class="coupon-box-list" v-else>
<div class="coupon" v-for="item in 3" :style="{marginRight: ( 40 - nc.margin.both * 2) / 2 + 'px'}">
<img src="{$resource_path}/img/style1-bg.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}">￥<span>500</span></p>
<p class="coupon-desc" :style="{color: nc.limitColor}">满3000可用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
</div>
<div class="coupon-box coupon-box-2" v-else-if="nc.style == 2" :style="[nc.couponType == 'img' && {backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<template v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="(item, index) in nc.previewList" v-if="index <= 3" :style="{marginRight: ( 41 - nc.margin.both * 2) / 2 + 'px'}">
<img src="{$resource_path}/img/coupon_bg.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">￥<span>{{nc.tempData.methods.moneyConduct(item.money)}}</span></p>
<p class="coupon-price" :style="{color: nc.moneyColor}" v-else><span>{{nc.tempData.methods.moneyConduct(item.discount)}}</span>折</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元使用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
<template v-else>
<div class="coupon" v-for="item in 3" :style="{marginRight: (41-nc.margin.both*2)/2 + 'px'}">
<img src="{$resource_path}/img/coupon_bg.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}">￥<span>500</span></p>
<p class="coupon-desc" :style="{color: nc.limitColor}">满3000元可用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
</div>
<div class="coupon-box" :class="'coupon-box-'+ nc.style" v-if="nc.style == 3" :style="[nc.couponType == 'img'&&{backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<div class="coupon-block" v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="(item, previewIndex) in nc.previewList" v-if="previewIndex < 3" :style="{marginRight: (46-nc.margin.both*2)/2 + 'px'}">
<img src="{$resource_path}/img/style3-bg-2.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">￥<span>{{nc.tempData.methods.moneyConduct(item.money)}}</span></p>
<p class="coupon-price" :style="{color: nc.moneyColor}" v-else><span>{{nc.tempData.methods.moneyConduct(item.discount)}}</span>折</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元可用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
<p class="coupon-info">{{item.goods_type_name}}</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
<div class="coupon-block" v-else>
<div class="coupon" v-for="item in 3" :style="{marginRight: (46-nc.margin.both*2)/2 + 'px'}">
<img src="{$resource_path}/img/style3-bg-2.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}">￥<span>500</span></p>
<p class="coupon-desc" :style="{color: nc.limitColor}">满3000元可用</p>
<p class="coupon-info">指定商品可用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
</div>
<div class="coupon-box" :class="'coupon-box-'+ nc.style" v-else-if="nc.style == 4" :style="[nc.couponType == 'img'&&{backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<template v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="(item, previewIndex) in nc.previewList" v-if="previewIndex < 3" :style="{marginRight: (44-nc.margin.both*2)/2 + 'px'}">
<img src="{$resource_path}/img/style4-bg-1.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">￥<span>{{nc.tempData.methods.moneyConduct(item.money)}}</span></p>
<p class="coupon-price" :style="{color: nc.moneyColor}" v-else><span>{{nc.tempData.methods.moneyConduct(item.discount)}}</span>折</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元使用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
<template v-else>
<div class="coupon" v-for="item in 3" :style="{marginRight: (44-nc.margin.both*2)/2 + 'px'}">
<img src="{$resource_path}/img/style4-bg-1.png">
<div class="coupon-intro">
<p class="coupon-price" :style="{color: nc.moneyColor}">￥<span>100</span></p>
<p class="coupon-desc" :style="{color: nc.limitColor}">满1000可用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
</div>
<div class="coupon-box" :class="'coupon-box-'+ nc.style" v-else-if="nc.style == 5" :style="[nc.couponType == 'img'&&{backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<template v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="item in nc.previewList">
<img src="{$resource_path}/img/style5-bg-1.png">
<div class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">{{nc.tempData.methods.moneyConduct(item.money)}}<span>元</span>
</div>
<div class="coupon-price" :style="{color: nc.moneyColor}" v-else>{{nc.tempData.methods.moneyConduct(item.discount)}}<span>折</span>
</div>
<div class="coupon-line"></div>
<div class="coupon-content">
<div class="coupon-intro">
<p class="coupon-name" :style="{color: nc.nameColor}">{{item.coupon_name}}</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元使用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
</template>
<template v-else>
<div class="coupon" v-for="item in 2">
<img src="{$resource_path}/img/style5-bg-1.png">
<div class="coupon-price" :style="{color: nc.moneyColor}">
100<span>元</span>
</div>
<div class="coupon-line"></div>
<div class="coupon-content">
<div class="coupon-intro">
<p :style="{color: nc.nameColor}" class="coupon-name">全场优惠抵用券</p>
<p :style="{color: nc.limitColor}" class="coupon-desc">满1000可用</p>
</div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</div>
</template>
</div>
<div class="coupon-box" :class="'coupon-box-'+ nc.style" v-else-if="nc.style == 6" :style="[nc.couponType == 'img'&&{backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<template v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<template v-for="(item, previewIndex) in nc.previewList">
<div class="coupon" v-if="previewIndex < 3" :style="{color: nc.moneyColor,backgroundImage: 'url({$resource_path}/img/style6-bg-1.png)', marginRight: (43-nc.margin.both*2)/2 + 'px'}">
<div class="coupon-content" :style="{color: nc.moneyColor}">
<div class="price-wrap">
<span class="price">{{ nc.tempData.methods.moneyConduct(item.type == 'reward' ? item.money : item.discount)}}</span>
<span class="unit">{{item.type == 'reward' ? "元" : "折"}}</span>
</div>
<span class="text">优惠券</span>
</div>
<span class="btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderTopLeftRadius: (nc.btnStyle.aroundRadius+'px'), borderBottomLeftRadius: (nc.btnStyle.aroundRadius+'px')}"><span>{{nc.btnStyle.text}}</span></span>
<span class="limit" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}使用</span>
<span class="limit" :style="{color: nc.limitColor}" v-else>无门槛使用</span>
</div>
</template>
<div v-if="nc.previewList.length <= 2" class="coupon coupon-null" :style="{color: nc.moneyColor,backgroundImage: 'url({$resource_path}/img/style6-bg-2.png)'}">
<div class="coupon-content" :style="{color: nc.moneyColor}">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit">去逛逛</span>
</div>
</template>
<template v-else>
<div class="coupon" v-for="item in 2" :style="{color: nc.moneyColor,backgroundImage: 'url({$resource_path}/img/style6-bg-1.png)', marginRight: (43-nc.margin.both*2)/2 + 'px'}" >
<div class="coupon-content" :style="{color: nc.moneyColor}">
<div class="price-wrap">
<span class="price">10</span>
<span class="unit">元</span>
</div>
<span class="text">优惠券</span>
</div>
<span class="btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderTopLeftRadius: (nc.btnStyle.aroundRadius+'px'), borderBottomLeftRadius: (nc.btnStyle.aroundRadius+'px')}"><span>{{nc.btnStyle.text}}</span></span>
<span class="limit" :style="{color: nc.limitColor}">满129使用</span>
</div>
<div class="coupon coupon-null" :style="{color: nc.moneyColor,backgroundImage: 'url({$resource_path}/img/style6-bg-2.png)'}">
<div class="coupon-content" :style="{color: nc.moneyColor}">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit">去逛逛</span>
</div>
</template>
</div>
<div class="coupon-box" :class="'coupon-box-'+ nc.style" v-else-if="nc.style == 7" :style="[nc.couponType == 'img'&&{backgroundImage: 'url('+ changeImgUrl(nc.couponBgUrl) + ')'},nc.couponType == 'color'&&{backgroundColor: nc.couponBgColor}]">
<template v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="coupon" v-for="item in nc.previewList">
<img src="{$resource_path}/img/style7-bg-1.png">
<div class="coupon-price" :style="{color: nc.moneyColor}" v-if="item.type == 'reward'">{{nc.tempData.methods.moneyConduct(item.money)}}<span>元</span>
</div>
<div class="coupon-price" :style="{color: nc.moneyColor}" v-else>{{nc.tempData.methods.moneyConduct(item.discount)}}<span>折</span>
</div>
<div class="coupon-intro">
<p class="coupon-name" :style="{color: nc.limitColor}" v-if="parseFloat(item.at_least) > 0">满{{item.at_least.split('.')[0]}}元可用</p>
<p class="coupon-name" :style="{color: nc.limitColor}" v-else>无门槛使用</p>
<p class="coupon-desc" :style="{color: nc.limitColor}">有效期至2022-12-31</p>
</div>
<div class="coupon-line"></div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
<template v-else>
<div class="coupon" v-for="item in 2">
<img src="{$resource_path}/img/style7-bg-1.png">
<div class="coupon-price" :style="{color: nc.moneyColor}">
100<span>元</span>
</div>
<div class="coupon-intro">
<p :style="{color: nc.limitColor}" class="coupon-name">满1000元可用</p>
<p :style="{color: nc.limitColor}" class="coupon-desc">有效期至2022-12-31</p>
</div>
<div class="coupon-line"></div>
<div class="coupon-btn" :style="{color: nc.btnStyle.textColor,backgroundColor: nc.btnStyle.bgColor, borderRadius: (nc.btnStyle.aroundRadius+'px')}">{{nc.btnStyle.text}}</div>
</div>
</template>
</div>
</div>
</template>
<!-- 内容编辑 -->
<template slot="edit-content">
<template v-if="nc.lazyLoad">
<coupon-set></coupon-set>
<div class="goods-list-edit layui-form">
<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 v-if="nc.styleName" class="input-text text-color selected-style" @click="nc.tempData.methods.selectCouponStyle()">{{nc.styleName}} <i class="layui-icon layui-icon-right"></i></div>
<div v-else class="input-text selected-style" @click="nc.tempData.methods.selectCouponStyle()">选择 <i class="layui-icon layui-icon-right"></i></div>
</div>
</div>
</div>
<div class="template-edit-title">
<h3>优惠券数据</h3>
<div class="layui-form-item icon-radio" v-if="nc.tempData.goodsSources">
<label class="layui-form-label sm">优惠券来源</label>
<div class="layui-input-block">
<span>{{nc.tempData.goodsSources[nc.sources].text}}</span>
<ul class="icon-wrap">
<li v-for="(value, name) in nc.tempData.goodsSources" :class="[name == nc.sources ? 'text-color border-color' : '']" @click="nc.sources=name">
<i class="iconfont" :class="[{'text-color': name == nc.sources}, value.src]"></i>
</li>
</ul>
</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.addCoupon()">
<span v-if="nc.couponIds.length == 0">请选择</span>
<span v-if="nc.couponIds.length > 0" class="text-color">已选{{ nc.couponIds.length}}个</span>
<i class="iconfont iconyoujiantou"></i>
</div>
</div>
</div>
<div class="layui-form-item" v-if="nc.sources == 'diy' && nc.couponIds.length > 0">
<div class="select-coupon-list">
<div class="select-coupon-item" v-for="(item, previewIndex) in nc.previewList">
<div class="coupon-content">
<div class="coupon-label-name">名称</div>
<div class="coupon-label-value">{{item.coupon_name}}</div>
</div>
<div class="coupon-content">
<div class="coupon-label-name">优惠金额/折扣</div>
<div class="coupon-label-value" v-if="item.type == 'reward'">￥{{item.money}}</div>
<div class="coupon-label-value" v-else>{{item.discount}}折</div>
</div>
<div class="coupon-content">
<div class="coupon-label-name">使用条件</div>
<div class="coupon-label-value" v-if="parseFloat(item.at_least) > 0">满{{item.at_least}}元使用</div>
<div class="coupon-label-value" v-else>无门槛使用</div>
</div>
<div class="close del" @click="nc.tempData.methods.delCoupon(previewIndex)">x</div>
</div>
</div>
</div>
<slide v-if="nc.sources == 'initial'" :data="{ field : 'count', label : '优惠券数量', max: 9, min: 1 }"></slide>
</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">
<input type="text" v-model="nc.btnStyle.text" :maxlength="nc.btnStyle.maxLen" placeholder="请输入按钮文字" class="layui-input">
</div>
</div>
</div>
</template>
<!-- 弹框 -->
<div class="coupon-list-style">
<div class="style-list-coupon layui-form">
<div class="style-list-con-coupon">
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 1}">
<img src="{$resource_path}/img/style1.png" />
<span class="layui-hide">风格一</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 2}">
<img src="{$resource_path}/img/style2.png" />
<span class="layui-hide">风格二</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 3}">
<img src="{$resource_path}/img/style3.png" />
<span class="layui-hide">风格三</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 4}">
<img src="{$resource_path}/img/style4.png" />
<span class="layui-hide">风格四</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 5}">
<img src="{$resource_path}/img/style5.png" />
<span class="layui-hide">风格五</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 6}">
<img src="{$resource_path}/img/style6.png" />
<span class="layui-hide">风格六</span>
</div>
<div class="style-li-coupon" :class="{'selected border-color': nc.style == 7}">
<img src="{$resource_path}/img/style7.png" />
<span class="layui-hide">风格七</span>
</div>
</div>
<input type="hidden" name="style">
<input type="hidden" name="style_name">
</div>
</div>
</template>
<!-- 样式编辑 -->
<template slot="edit-style">
<template v-if="nc.lazyLoad">
<div class="template-edit-title">
<h3>优惠券样式</h3>
<color v-show="nc.isName" :data="{ field : 'nameColor', 'label' : '名称颜色', defaultColor : '#FFFFFF' }"></color>
<color :data="{ field : 'moneyColor', 'label' : '面额颜色', defaultColor : '#FFFFFF' }"></color>
<color :data="{ field : 'limitColor', 'label' : '门槛颜色', defaultColor : '#FFFFFF' }"></color>
</div>
<div class="template-edit-title">
<h3>按钮样式</h3>
<color v-show="nc.btnStyle.isBgColor" :data="{ field : 'bgColor', 'label' : '背景颜色', parent: 'btnStyle', defaultColor : '#FFFFFF' }"></color>
<color :data="{ field: 'textColor', 'label': '文字颜色', parent: 'btnStyle',defaultColor : '#FFFFFF' }"></color>
<slide v-if="nc.btnStyle.isAroundRadius" :data="{ field : 'aroundRadius', label: '按钮圆角', max: 20, parent:'btnStyle' }"></slide>
</div>
<div class="template-edit-title" v-show="nc.ifNeedBg">
<h3>背景设置</h3>
<div class="layui-form-item tag-wrap">
<label class="layui-form-label sm">组件背景</label>
<div class="layui-input-block">
<div @click="nc.couponType = 'color'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : nc.couponType == 'color' }">
<i class="layui-anim layui-icon">{{ nc.couponType == 'color' ? "&#xe643;" : "&#xe63f;" }}</i>
<div>背景色</div>
</div>
<div @click="nc.couponType = 'img'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : nc.couponType == 'img' }">
<i class="layui-anim layui-icon">{{ nc.couponType == 'img' ? "&#xe643;" : "&#xe63f;" }}</i>
<div>背景图片</div>
</div>
</div>
</div>
<color v-show="nc.couponType == 'color'" :data="{ field : 'couponBgColor', 'label' : '背景颜色',defaultColor : '#FFFFFF'}"></color>
<div v-show="nc.couponType == 'img'" class="layui-form-item">
<label class="layui-form-label sm">背景图片</label>
<div class="layui-input-block">
<img-upload :data="{ data: nc,field:'couponBgUrl'}" data-disabled="1"></img-upload>
</div>
</div>
</div>
</template>
</template>
<!-- 资源 -->
<template slot="resource">
<js>
var couponResourcePath = "{$resource_path}"; // http路径
var couponRelativePath = "{$relative_path}"; // 相对路径
</js>
<css src="{$resource_path}/css/design.css"></css>
<js src="{$resource_path}/js/design.js"></js>
</template>
</nc-component>

BIN
addon/coupon/component/view/coupon/img/coupon_bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
addon/coupon/component/view/coupon/img/style1-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
addon/coupon/component/view/coupon/img/style1-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
addon/coupon/component/view/coupon/img/style1-bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
addon/coupon/component/view/coupon/img/style1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
addon/coupon/component/view/coupon/img/style2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
addon/coupon/component/view/coupon/img/style3-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
addon/coupon/component/view/coupon/img/style3-bg-2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
addon/coupon/component/view/coupon/img/style3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
addon/coupon/component/view/coupon/img/style4-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
addon/coupon/component/view/coupon/img/style4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
addon/coupon/component/view/coupon/img/style5-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
addon/coupon/component/view/coupon/img/style5.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
addon/coupon/component/view/coupon/img/style6-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
addon/coupon/component/view/coupon/img/style6-bg-2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
addon/coupon/component/view/coupon/img/style6.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
addon/coupon/component/view/coupon/img/style7-bg-1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
addon/coupon/component/view/coupon/img/style7.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
addon/coupon/component/view/coupon/img/title.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

263
addon/coupon/component/view/coupon/js/design.js Executable file
View File

@@ -0,0 +1,263 @@
/**
* 空的验证组件，后续如果增加业务，则更改组件
*/
var couponSetHtml = '<div class="layui-hide"></div>';
Vue.component("coupon-set", {
template: couponSetHtml,
data: function () {
return {
data: this.$parent.data,
goodsSources: {
initial: {
text: "默认",
src: "iconshangpinfenlei"
},
diy: {
text: "手动选择",
src: "iconshoudongxuanze"
}
},
couponList: [
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": false,
"nameColor": "",
"moneyColor": "#FFFFFF",
"limitColor": "#FFFFFF",
"btnStyle": {
"textColor": "#FFFFFF",
"bgColor": "",
"text": "立即领取",
"aroundRadius": 0,
"isBgColor": false,
"isAroundRadius": false,
"maxLen": 4
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": false,
"nameColor": "",
"moneyColor": "#FF8143",
"limitColor": "#FF8143",
"btnStyle": {
"textColor": "#FF8143",
"bgColor": "",
"text": "领取",
"aroundRadius": 0,
"isBgColor": false,
"isAroundRadius": false,
"maxLen": 2
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "#FFFFFF",
"couponBgUrl": couponRelativePath + "/img/style3-bg-1.png",
"couponType": "img",
"isName": false,
"nameColor": "",
"moneyColor": "#FF4544",
"limitColor": "#FF4544",
"btnStyle": {
"textColor": "#FFFFFF",
"bgColor": "#FF4544",
"text": "立即抢",
"aroundRadius": 20,
"isBgColor": true,
"isAroundRadius": true,
"maxLen": 4
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": false,
"nameColor": "",
"moneyColor": "#FFFFFF",
"limitColor": "#FFFFFF",
"btnStyle": {
"textColor": "#FFFFFF",
"bgColor": "",
"text": "立即领取",
"aroundRadius": 0,
"isBgColor": false,
"isAroundRadius": false,
"maxLen": 4
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": true,
"nameColor": "#303133",
"moneyColor": "#FF0000",
"limitColor": "#999999",
"btnStyle": {
"textColor": "#FFFFFF",
"bgColor": "#303133",
"text": "立即领取",
"aroundRadius": 5,
"isBgColor": true,
"isAroundRadius": true,
"maxLen": 5
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": true,
"nameColor": "#303133",
"moneyColor": "#FF0000",
"limitColor": "#303133",
"btnStyle": {
"textColor": "#FFFFFF",
"bgColor": "#303133",
"text": "领取",
"aroundRadius": 20,
"isBgColor": true,
"isAroundRadius": true,
"maxLen": 3
},
"bgColor": ""
},
{
"ifNeedBg": true,
"couponBgColor": "",
"couponBgUrl": "",
"couponType": "img",
"isName": true,
"nameColor": "",
"moneyColor": "#FD463E",
"limitColor": "#FD463E",
"btnStyle": {
"textColor": "#FF3D3D",
"bgColor": "",
"text": "立即领取",
"aroundRadius": 0,
"isBgColor": false,
"isAroundRadius": false,
"maxLen": 4
},
"bgColor": ""
}
]
}
},
created:function() {
if (!this.$parent.data.verify) this.$parent.data.verify = [];
this.$parent.data.verify.push(this.verify);//加载验证方法
this.$parent.data.ignore = ['textColor', 'elementAngle', 'componentAngle', 'componentBgColor']; //加载忽略内容 -- 其他设置中的属性设置
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
this.$parent.data.tempData = {
goodsSources: this.goodsSources,
methods:{
moneyConduct: this.moneyConduct,
addCoupon: this.addCoupon,
delCoupon: this.delCoupon,
selectCouponStyle: this.selectCouponStyle
}
}
},
methods: {
// 金额处理
moneyConduct(value){
var arr = value.split(".");
var str = parseInt(arr[1].split("").reverse().join("")) + '';
str = str.split("").reverse().join("");
if(str == 0) return arr[0];
else return arr[0] + '.' + str;
},
verify : function (index) {
var res = { code : true, message : "" };
if (vue.data[index].sources == 'diy' && vue.data[index].couponIds.length == 0){
res.code = false;
res.message = "请选择优惠券";
}
return res;
},
addCoupon: function(){
var self = this;
self.couponSelect(function (res) {
self.$parent.data.couponIds = [];
self.$parent.data.previewList = [];
for (var i=0; i<res.length; i++) {
self.$parent.data.couponIds.push(res[i].coupon_type_id);
self.$parent.data.previewList.push(res[i]);
}
}, self.$parent.data.couponIds);
},
delCoupon: function (index){
var self = this;
self.$parent.data.couponIds.splice(index, 1);
self.$parent.data.previewList.splice(index, 1);
},
couponSelect: function(callback, selectId) {
ns.selectCoupon({
select_id:selectId.toString(),
success:function (res){
callback(res);
}
})
},
selectCouponStyle: function() {
var self = this;
layer.open({
type: 1,
title: '风格选择',
area:['930px','470px'],
btn: ['确定', '返回'],
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .coupon-list-style").html(),
success: function(layero, index) {
$(".layui-layer-content input[name='style']").val(self.data.style);
$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
$("body").off("click", ".layui-layer-content .style-list-con-coupon .style-li-coupon").on("click", ".layui-layer-content .style-list-con-coupon .style-li-coupon", function () {
$(this).addClass("selected border-color").siblings().removeClass("selected border-color");
$(".layui-layer-content input[name='style']").val($(this).index() + 1);
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
});
},
yes: function (index, layero) {
self.data.style = $(".layui-layer-content input[name='style']").val();
self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
self.data.ifNeedBg = self.couponList[self.data.style-1].ifNeedBg;
self.data.couponBgColor = self.couponList[self.data.style-1].couponBgColor;
self.data.couponBgUrl = self.couponList[self.data.style-1].couponBgUrl;
self.data.couponType = self.couponList[self.data.style-1].couponType;
self.data.isName = self.couponList[self.data.style-1].isName;
self.data.nameColor = self.couponList[self.data.style-1].nameColor;
self.data.moneyColor = self.couponList[self.data.style-1].moneyColor;
self.data.limitColor = self.couponList[self.data.style-1].limitColor;
self.data.bgColor = self.couponList[self.data.style-1].bgColor;
self.data.btnStyle.textColor = self.couponList[self.data.style-1].btnStyle.textColor;
self.data.btnStyle.bgColor = self.couponList[self.data.style-1].btnStyle.bgColor;
self.data.btnStyle.text = self.couponList[self.data.style-1].btnStyle.text;
self.data.btnStyle.aroundRadius = self.couponList[self.data.style-1].btnStyle.aroundRadius;
self.data.btnStyle.isBgColor = self.couponList[self.data.style-1].btnStyle.isBgColor;
self.data.btnStyle.isAroundRadius = self.couponList[self.data.style-1].btnStyle.isAroundRadius;
self.data.btnStyle.maxLen = self.couponList[self.data.style-1].btnStyle.maxLen;
layer.closeAll()
}
});
}
}
});