zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

卡券管理页面布局开发

couponManage-zq-1209
zq 2 days ago
parent
8829650ccb
commit
66b9251a03
5 changed files with 422 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/timesNum.png
  2. 16
      src/router/index.js
  3. 26
      src/store/index.js
  4. 9
      src/style/theme/common.scss
  5. 382
      src/views/agent/checkCardList.vue

BIN
src/assets/timesNum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

16
src/router/index.js
View File

@ -383,7 +383,17 @@ const routes = [{
breadcrumbParent: '代收款结算' // 一级页面不显示面包屑
}
},
// 运营工具 start
{
path: '/agent/checkCardList',
name: '卡券管理',
isFirst:true,
component: () => import( /* webpackChunkName: "checkCardList" */ '../views/agent/checkCardList.vue'),
meta: {
hideBreadcrumb: true // 一级页面不显示面包屑
}
},
// 运营工具 end
// -----------------分隔符-----------
// 管理员start
@ -641,9 +651,11 @@ router.beforeEach((to, from, next) => {
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'rankMenuData');
}
if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据
store.commit('SET_SIDEBAR', false);
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'lunyiData');
}
}
if (blackFooterList.includes(to.path)) {

26
src/store/index.js
View File

@ -229,18 +229,26 @@ export default new Vuex.Store({
title: '运营工具',
icon: 'operatingTools',
children: [
{
index: '6-1',
title: '检测卡',
path: '/card/check_card_list',
external: true,//是否跳转外部链接
},
{
index: '6-2',
title: '微信代金券',
path: '/service/coupon_stocks',
external: true,//是否跳转外部链接
title: '卡券管理',
path: '/agent/checkCardList',
external: false,//是否跳转外部链接
},
// {
// index: '6-1',
// title: '检测卡',
// path: '/card/check_card_list',
// external: true,//是否跳转外部链接
// },
// {
// index: '6-2',
// title: '微信代金券',
// path: '/service/coupon_stocks',
// external: true,//是否跳转外部链接
// },
{
index: '6-3',
title: '公众号发券',

9
src/style/theme/common.scss
View File

@ -100,6 +100,14 @@ body {
display: flex;
gap: 12px;
}
.gap20{
display: flex;
gap: 20px;
}
.gap24{
display: flex;
gap: 24px;
}
.mt16 {
margin-top: 16px;
@ -142,6 +150,7 @@ body {
margin-top: 10px;
}
.ceshi {
transition: all .5s;
box-sizing: border-box;

382
src/views/agent/checkCardList.vue
View File

@ -0,0 +1,382 @@
<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>
Write Preview
Loading…
Cancel
Save