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.
493 lines
20 KiB
493 lines
20 KiB
<template>
|
|
<div class="main-content12 ">
|
|
<div class="flex-common">
|
|
<el-tabs v-model="curTab" class="mb12" @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" v-for="(item,index) in numsList1" :key="item.name"
|
|
:class="{ active: activeIndex === index }"
|
|
@mouseenter="handleMouseEnter(index)"
|
|
@mouseleave="handleMouseLeave"
|
|
>
|
|
<!-- @click="handleClickItem(item)" -->
|
|
<span class="posFree">{{ item.tip }}</span>
|
|
<div class="flex gap8">
|
|
<img :src="item.img" alt="">
|
|
<span class="cardTitle">{{ item.name }}</span>
|
|
</div>
|
|
<p>{{ item.desc }}</p>
|
|
<GuipButton :type="activeIndex === index ? 'primary' : 'often'" :btnstyle="{'width': '254px'}" @click="addTimeNums(item)" >立即新增</GuipButton>
|
|
</div>
|
|
|
|
</div>
|
|
<h4>独立卡券</h4>
|
|
<p class="desc mb12">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</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 point" :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 mb24">
|
|
<div class="numItem gap8 flex" :class="curCardType == item.type ? 'numItemActive' : ''" v-for="item in numsList" :key="item.name" @click="changeCardType(item.type)">
|
|
{{ item.name }} <span class="unit">{{ item.num }}</span>
|
|
</div>
|
|
</div>
|
|
<GuipTable v-if="curType == 'only'" :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">
|
|
<template slot-scope="scope">
|
|
<div class="flex">
|
|
{{ scope.row.card }}
|
|
<img src="@/assets/form_copy.svg" v-clipboard="(scope.row.card)"/>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="type" label="发行方式" v-if="curCardType != 1" width="120"></el-table-column>
|
|
<el-table-column prop="rule" label="使用规则" v-if="[1,2,3].includes(curCardType)" min-width="200"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="余额/面额" min-width="120">
|
|
<template slot-scope="scope">
|
|
10/20元{{ scope.row.review_status_desc }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="pay" label="支付金额" v-if="[1,2,3].includes(curCardType)" 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="检测价格" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="有效期" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="剩余 / 总检测次数" v-if="curCardType == 5" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="每天限制检测篇数" v-if="curCardType == 4" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测卡生成时间" v-if="[4,5].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测卡生效时间" v-if="curCardType == 4" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测卡过期时间" v-if="curCardType == 4" 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 prop="create" label="创建人" min-width="120"></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>
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
|
|
:total="serviceList.length">
|
|
</el-pagination>
|
|
|
|
<GuipTable v-if="curType == 'more'" :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
|
|
<template>
|
|
<el-table-column fixed="left" prop="id" label="ID" min-width="100"></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="可检测次数" v-if="curCardType == 5" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测卡类型" v-if="curCardType == 4" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="面额/折扣" min-width="120">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.review_status_desc }}/1折
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测价格" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="有效期" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="检测卡数量（余/总）" min-width="200"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="每天限制检测篇数" v-if="curCardType == 4" min-width="200"></el-table-column>
|
|
<el-table-column prop="review_status_desc" label="用户支付金额（元）" v-if="[1,2,3].includes(curCardType)" 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="规则发售起止时间" v-if="curCardType == 4" 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 prop="review_status_desc" label="H5购买检测卡链接" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
|
|
<el-table-column prop="create" label="创建人" min-width="120"></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>
|
|
<GuipButton type="text" v-if="false" @click="handleRefuse(scope.row)">修改</GuipButton>
|
|
<GuipButton type="text" v-if="false" @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: 'add',
|
|
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:'折扣卡',
|
|
}
|
|
],
|
|
isActive: false,
|
|
buttonType:'often',
|
|
activeIndex:-1,
|
|
numsList1:[
|
|
{
|
|
name:'满减卡',
|
|
img:require('@/assets/shortNum.png'),
|
|
type:1,
|
|
tip:'满额立减',
|
|
desc:'消费达到指定金额（如100元），就能减免固定金额（如10元），每张卡只能用一次。',
|
|
},
|
|
|
|
{
|
|
name:'现金卡',
|
|
img:require('@/assets/cashNum.png'),
|
|
type:2,
|
|
tip:'直接抵现',
|
|
desc:'可以把它当作现金直接使用，无最低消费要求。',
|
|
},
|
|
{
|
|
name:'次数卡',
|
|
tip:'按次使用',
|
|
desc:'卡内包含固定的使用次数，用完即止。',
|
|
img:require('@/assets/usageNum.png'),
|
|
type:3
|
|
},
|
|
{
|
|
name:'折扣卡',
|
|
tip:'直接打折',
|
|
desc:'付款时按一定比例（如9折）打折，每张卡在有效期内可多次使用。',
|
|
img:require('@/assets/discountNum.png'),
|
|
type:4
|
|
},
|
|
{
|
|
name:'时间卡',
|
|
type:5,
|
|
tip:'次日焕新',
|
|
desc:'每天有使用次数限制，用完后当天不可再用，但第二天会恢复次数。',
|
|
img:require('@/assets/timesNum.png')
|
|
},
|
|
],
|
|
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
|
|
}
|
|
],
|
|
tableKey: Date.now(),
|
|
tableLoading: false,
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
serviceList:[{
|
|
id:'123456789',
|
|
name:'检测卡服务名称'
|
|
}]
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
handleMouseEnter(index) {
|
|
this.activeIndex = index;
|
|
},
|
|
handleMouseLeave() {
|
|
this.activeIndex = -1;
|
|
},
|
|
handleClickItem(item) {
|
|
this.$router.push({
|
|
path: '/agent/addCustomCoupon',
|
|
query: {
|
|
type: item.type,
|
|
}
|
|
})
|
|
},
|
|
//
|
|
addTimeNums(item) {
|
|
this.$router.push({
|
|
path: '/agent/addCustomCoupon',
|
|
query: {
|
|
type: item.type,
|
|
}
|
|
})
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
changeCardType(type) {
|
|
console.log(type,'type===');
|
|
this.curCardType = type;
|
|
},
|
|
walletClick(type) {
|
|
this.walletType = type;
|
|
},
|
|
handleRefuse() {
|
|
|
|
},
|
|
handlePageChange(page) {
|
|
this.orderListCurrentPage = page;
|
|
},
|
|
handleSizeChange(val) {
|
|
console.log(`每页 ${val} 条`);
|
|
},
|
|
handleCurrentChange(val) {
|
|
console.log(`当前页: ${val}`);
|
|
}
|
|
},
|
|
}
|
|
</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{
|
|
cursor: pointer;
|
|
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;
|
|
cursor: pointer;
|
|
}
|
|
.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>
|