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.
382 lines
14 KiB
382 lines
14 KiB
1 week ago
|
<template>
|
||
|
|
<div class="main-content12 ">
|
||
|
|
<div class="flex-common">
|
||
|
|
<el-tabs v-model="curTab" class="mb24" @tab-click="handleClick">
|
||
|
|
<el-tab-pane label="新增卡券" name="add"></el-tab-pane>
|
||
|
|
<el-tab-pane label="管理卡券" name="manage"></el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div v-if="curTab == 'add'" class="customize_box">
|
||
|
|
<div class="flex-between mb24">
|
||
|
|
<div>
|
||
|
|
<h4>自定义卡券（原检测卡）</h4>
|
||
|
|
<p class="desc">为用户发放高度自定义的卡券,可通过卡券自提、公众号自动回复、自行与第三方合作（如：阿奇索）的形式发放</p>
|
||
|
|
</div>
|
||
|
|
<GuipButton type="system" :btnstyle="{'width': '142px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="flex customizeWrap mb24">
|
||
|
|
<div class="customizeItem active">
|
||
|
|
<span class="posFree">中一个亿</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
|
||
|
|
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="customizeItem">
|
||
|
|
<span class="posFree">中一个亿</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
|
||
|
|
<GuipButton type="ignore" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="customizeItem">
|
||
|
|
<span class="posFree">中一个亿</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
|
||
|
|
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="customizeItem">
|
||
|
|
<span class="posFree">中一个亿</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
|
||
|
|
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="customizeItem">
|
||
|
|
<span class="posFree">中一个亿</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
|
||
|
|
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h4>独立卡券</h4>
|
||
|
|
<p class="desc mb20">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</p>
|
||
|
|
<div class="flex customizeWrap">
|
||
|
|
<div class="customizeItem">
|
||
|
|
<span class="posFree">免费代金券</span>
|
||
|
|
<div class="flex gap8">
|
||
|
|
<img src="@/assets/timesNum.png" alt="">
|
||
|
|
<span class="cardTitle">时间卡</span>
|
||
|
|
</div>
|
||
|
|
<p>用户不需支付，领取指定代金券使用微信支付可用</p>
|
||
|
|
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="curTab == 'manage'" class="manageBox">
|
||
|
|
<h4 class="mb24">选择卡券类型</h4>
|
||
|
|
<div class="cardTypeList gap20 flex">
|
||
|
|
<div v-for="item in walletList" :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
|
||
|
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
|
||
|
|
<div class="wallet-name">{{item.name}}</div>
|
||
|
|
<div class="desc">{{ item.desc1 }}</div>
|
||
|
|
<div class="desc">{{ item.desc2 }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-common mt12" v-if="curTab == 'manage'">
|
||
|
|
<el-tabs v-model="curType" class="mb12" @tab-click="handleClick">
|
||
|
|
<el-tab-pane label="单张发售卡" name="only"></el-tab-pane>
|
||
|
|
<el-tab-pane label="批量发售卡" name="more"></el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="flex numsList gap12">
|
||
|
|
<div class="numItem gap8 flex" :class="curCardType == item.type ? 'numItemActive' : ''" v-for="item in numsList" :key="item.name">
|
||
|
|
{{ item.name }} <span class="unit">{{ item.num }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
|
||
|
|
<template>
|
||
|
|
<el-table-column fixed="left" prop="card" label="检测卡号" min-width="200"></el-table-column>
|
||
|
|
<el-table-column prop="type" label="发行方式" width="120"></el-table-column>
|
||
|
|
<el-table-column prop="rule" label="使用规则" min-width="200"></el-table-column>
|
||
|
|
<el-table-column prop="review_status_desc" label="余额/面额" min-width="120"></el-table-column>
|
||
|
|
<el-table-column prop="pay" label="支付金额" min-width="120"></el-table-column>
|
||
|
|
<el-table-column prop="review_status_desc" label="检测系统" min-width="120"></el-table-column>
|
||
|
|
<el-table-column prop="review_status_desc" label="检测服务" min-width="120"></el-table-column>
|
||
|
|
<el-table-column prop="review_status_desc" label="检测价格" min-width="120"></el-table-column>
|
||
|
|
<el-table-column prop="status" label="状态" min-width="120">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span :class="['status','status'+[scope.row.status]]">{{ scope.row.status_desc }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column fixed="right" prop="tid" label="操作" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<GuipButton type="text" @click="handleRefuse(scope.row)">关闭</GuipButton>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</template>
|
||
|
|
</GuipTable>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import GuipButton from '@/components/GuipButton'
|
||
|
|
import GuipTable from '@/components/GuipTable.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GuipButton,
|
||
|
|
GuipTable,
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
curType(val) {
|
||
|
|
if (val == 'only') {
|
||
|
|
this.curCardType = 1;
|
||
|
|
} else {
|
||
|
|
this.curCardType = 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
curTab: 'manage',
|
||
|
|
curType: 'only',
|
||
|
|
curCardType: 1,
|
||
|
|
tableList:[
|
||
|
|
{
|
||
|
|
card: '123456789',
|
||
|
|
type:'单张发售卡',
|
||
|
|
rule:'满减卡',
|
||
|
|
review_status_desc:'10元',
|
||
|
|
pay:'￥10.00',
|
||
|
|
status: 1,
|
||
|
|
status_desc: '使用中',
|
||
|
|
tid: ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
card: '123456789',
|
||
|
|
type:'批量发售卡',
|
||
|
|
rule:'折扣卡',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
walletList:[
|
||
|
|
{
|
||
|
|
type: 1,
|
||
|
|
name: '自定义卡券（原检测卡）',
|
||
|
|
desc1:'为用户发放高度自定义的卡券',
|
||
|
|
desc2:'分折扣、满减、现金、时间、次数的卡类型'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 2,
|
||
|
|
name: '微信代金券',
|
||
|
|
desc1:'通过微信链接，用户免费领取',
|
||
|
|
desc2:'适用于微信社群运营'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
walletType:1,
|
||
|
|
numsList:[
|
||
|
|
{
|
||
|
|
name:'现金卡',
|
||
|
|
type:1,
|
||
|
|
num:6
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'折扣卡',
|
||
|
|
num:6,
|
||
|
|
type:2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'满减卡',
|
||
|
|
num:6,
|
||
|
|
type:3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'时间卡',
|
||
|
|
num:6,
|
||
|
|
type:4
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'次数卡',
|
||
|
|
num:6,
|
||
|
|
type:5
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//
|
||
|
|
addTimeNums() {
|
||
|
|
|
||
|
|
},
|
||
|
|
handleClick(tab, event) {
|
||
|
|
console.log(tab, event);
|
||
|
|
},
|
||
|
|
walletClick(type) {
|
||
|
|
this.walletType = type;
|
||
|
|
},
|
||
|
|
handleRefuse() {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.customize_box,.manageBox{
|
||
|
|
h4{
|
||
|
|
margin: 0;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.desc{
|
||
|
|
text-align: left;
|
||
|
|
margin: 6px 0 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.gap20{
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
.manageBox{
|
||
|
|
|
||
|
|
}
|
||
|
|
.customizeWrap{
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
gap: 20px;
|
||
|
|
.customizeItem{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 14px;
|
||
|
|
position: relative;
|
||
|
|
width: 281.5px;
|
||
|
|
height: 160px;
|
||
|
|
padding: 16px 14px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 1px solid #DFE2E6;
|
||
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
|
||
|
|
img{
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
.cardTitle{
|
||
|
|
font-weight: bold;
|
||
|
|
color: #23242B;
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 15px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #8A9099;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.posFree{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #FF4D4F;
|
||
|
|
border-radius: 2px;
|
||
|
|
width: 68px;
|
||
|
|
height: 24px;
|
||
|
|
padding: 4px 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 0px 8px 0px 8px;
|
||
|
|
background: #FFF2F2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
border-color: #006AFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cardTypeList{
|
||
|
|
.wallet-item{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: left;
|
||
|
|
padding: 16px 14px;
|
||
|
|
width: 282px;
|
||
|
|
height: 96px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: rgba(255, 255, 255, 0.47);
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid #DFE2E6;
|
||
|
|
.desc{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #626573;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallet-name{
|
||
|
|
color: #1E2226;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.wallet-num{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #626573;
|
||
|
|
padding: 0 2px;
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
}
|
||
|
|
.wallet-price{
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #626573;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallet-item-active{
|
||
|
|
position: relative;
|
||
|
|
background: #F2F7FF;
|
||
|
|
border-color: #006AFF;
|
||
|
|
.tem-active{
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
.wallet-name{
|
||
|
|
color: #006AFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.numsList{
|
||
|
|
.numItem{
|
||
|
|
width: 111px;
|
||
|
|
height: 34px;
|
||
|
|
padding: 8px 17px;
|
||
|
|
border-radius: 80px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid #DFE2E6;
|
||
|
|
color: #626573;
|
||
|
|
}
|
||
|
|
.unit{
|
||
|
|
width: 24px;
|
||
|
|
height: 17px;
|
||
|
|
padding: 2px 8px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 100px;
|
||
|
|
background: #E8F0FE;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 13px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #006AFF;
|
||
|
|
}
|
||
|
|
.numItemActive{
|
||
|
|
font-weight: bold;
|
||
|
|
color: #FFFFFF;
|
||
|
|
border-radius: 80px;
|
||
|
|
background: #006AFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|