多租户商城-商户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

229 lines
5.6 KiB

<template>
<div class="couponTool">
<h3 class="toolTit">优惠券</h3>
<div class="toolBox">
<tool-coupon :selectedCoupon.sync='activeComponent.componentContent.selectedCoupon' :couponList.sync='activeComponent.componentContent.couponList'></tool-coupon>
<!-- <div class="block colorBox">-->
<!-- <div class="blockTit">-->
<!-- <span>颜色</span>-->
<!-- <span>{{colorList[activeComponent.componentContent.colorActiveIndex].name}}</span>-->
<!-- </div>-->
<!-- <div class="selectColor">-->
<!-- <div class="selectColor">-->
<!-- <div class="colorList">-->
<!-- <div :class="{active: activeComponent.componentContent.colorActiveIndex === index}" v-for="(item, index) of colorList" :key="item.value" @click="selectColor(item, index)"><span></span></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="block showInvBox">-->
<!-- <div class="showInvalid">-->
<!-- <div class="blockTit">-->
<!-- <span>隐藏已抢完及失效的券</span>-->
<!-- <span v-text="isHideCoupon ? '隐藏' : '显示'"></span>-->
<!-- </div>-->
<!-- <div class="showHideBtn">-->
<!-- <el-checkbox v-model="isHideCoupon"></el-checkbox>-->
<!-- </div>-->
<!-- </div>-->
<!-- <p>当前无可显示的优惠券时优惠券区块将隐藏</p>-->
<!-- </div>-->
</div>
</div>
</template>
<script>
import {toolMixin} from '@@/config/mixin'
import ToolCoupon from '../toolModule/tool-coupon'
export default {
name: 'couponTool',
mixins: [toolMixin],
components: {
ToolCoupon
},
data () {
return {
title: '', // 标题内容
colorList: [
{
name: '红色',
value: 'red'
},
{
name: '橘黄色',
value: 'orange'
},
{
name: '蓝色',
value: 'blue'
}
],
// colorActiveIndex: 0,
dialogVisible: false,
isHideCoupon: true
}
},
computed: {
},
methods: {
selectCompose (item, index) {
this.activeComponent.componentContent.arrangeActiveIndex = index
},
// 选择卡片样式
selectCard (item, index) {
this.activeComponent.componentContent.cardActiveIndex = index
},
selectColor (item, index) {
this.activeComponent.componentContent.colorActiveIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.couponTool {
padding: 20px 20px 0 20px;
h3 {
font-size: 18px;
font-weight: 500;
height: 35px;
line-height: 35px;
color: #333333;
margin-bottom: 20px;
}
.toolBox {
padding-bottom: 10px;
.itemBox {
label {
font-size: 14px;
color: #666666;
height: 40px;
line-height: 40px;
}
margin-bottom: 15px;
}
}
.block {
.blockTit {
padding-top: 20px;
span {
margin-right: 16px;
}
span:last-child {
color: $mainColor;
}
}
}
.colorBox {
display: flex;
justify-content: space-between;
align-items: center;
.blockTit {
padding-top: 0;
}
}
.topLine {
border-top: 1px solid #eeeeee;
}
.composeList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 30px;
padding-top: 20px;
span {
width: 50px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E8EAEC;
color: #999999;
font-size: 18px;
text-align: center;
cursor: pointer;
font-size: 24px;
}
span.active {
color: $mainColor;
border: 1px solid $mainColor;
}
span:hover {
color: $mainColor;
border: 1px solid $mainColor;
}
}
.selectColor {
display: flex;
align-items: center;
.colorList {
display: flex;
align-items: center;
div {
padding: 3px;
border: 1px solid #eeeeee;
border-radius: 50%;
font-style: normal;
margin-right: 10px;
cursor: pointer;
span {
width: 15px;
height: 15px;
border-radius: 50%;
background: #eeeeee;
display: block;
}
&:nth-child(1) {
span {
background: #EC4B42;
}
}
&:nth-child(2) {
span {
background: #FF7800;
}
}
&:nth-child(3) {
span {
background: #86A7FF;
}
}
&:nth-child(4) {
span {
background: #808080;
}
}
}
div.active {
&:nth-child(1) {
border-color: #EC4B42;
}
&:nth-child(2) {
border-color: #FF7800;
}
&:nth-child(3) {
border-color: #86A7FF;
}
&:nth-child(4) {
border-color: #808080;
}
}
}
}
.showInvBox {
p {
color: #999999;
font-size: 14px;
}
}
.showInvalid {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0 13px 0;
.blockTit {
padding-top: 0;
}
}
}
</style>