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

新增卡券交互修改、自定义卡券样式优化

couponManage-zq-1209
zq 4 days ago
parent
f77d364e90
commit
cf27fc6351
7 changed files with 104 additions and 73 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/cashNum.png
  2. BIN
      src/assets/discountNum.png
  3. BIN
      src/assets/shortNum.png
  4. BIN
      src/assets/usageNum.png
  5. 12
      src/style/theme/common.scss
  6. 50
      src/views/agent/addCustomCoupon.vue
  7. 115
      src/views/agent/checkCardList.vue

BIN
src/assets/cashNum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/discountNum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/shortNum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/usageNum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

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

@ -479,6 +479,18 @@ body {
}
}
.el-button--often {
color: #006AFF;
background: #F2F7FF;
border: 1px solid transparent;
// &:hover {
// color: #006AFF;
// background: #F2F7FF;
// border: 1px solid #006AFF;
// }
}
.el-button--text,
.el-button--grey {
padding: 0;

50
src/views/agent/addCustomCoupon.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="main-content12 ">
<div class="flex-common">
<el-tabs v-model="curAddTab" class="" @tab-click="handleClick">
<el-tabs v-model="curAddTab" class="">
<el-tab-pane :label="'新增'+item.name" v-for="item in numsList" :name="item.type" :key="item.name"></el-tab-pane>
</el-tabs>
<div class="beforeNotice">
@ -81,56 +81,45 @@
</template>
<script>
// import GuipFormItem from '@/components/GuipFormItem';
// import GroupFormBtns from '@/components/GroupFormBtns';
import GuipRadio from '@/components/GuipRadio';
// import GuipTable from '@/components/GuipTable';
import GuipInput from '@/components/GuipInput.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
// import GuipButton from '@/components/GuipButton.vue';
export default {
props: {
hasProjectFee: Number,
// type: Number,
},
components: {
// GuipFormItem,
// GroupFormBtns,
GuipInput,
GuipSelect,
GuipTextarea,
// GuipButton,
GuipRadio,
// GuipTable,
},
data() {
return {
curAddTab:1,
searchDate:[],
curAddTab:'1',
numsList:[
{
name:'时间卡',
type:1,
type:'1',
},
{
name:'次数卡',
show:6,
type:2
type:'2'
},
{
name:'折扣卡',
show:6,
type:3
type:'3'
},
{
name:'满减卡',
show:6,
type:4
type:'4'
},
{
name:'现金卡',
show:6,
type:5
type:'5'
}
],
createType:1,
@ -172,25 +161,35 @@ export default {
type: 1,
name: '卡密自提',
desc1:'生成链接，用户点击自提',
show:[3,4,5]
show:['3','4','5']
},
{
type: 2,
name: '自有渠道发放',
desc1:'生成卡号，自行发放',
show:[1,2,3,4,5]
show:['1','2','3','4','5']
},
{
type: 3,
name: '公众号发放',
desc1:'通过公众号回复，自动发放',
show:[3,4,5]
show:['3','4','5']
}
],
walletType:1
walletType:1,
link:''
}
},
mounted() {
const { type } = this.$route.query;
if (type) {
this.curAddTab = type;
}
},
watch: {
},
methods: {
handleClickCopy(){
this.$copy(this.form.input1, {
@ -218,6 +217,9 @@ export default {
walletClick(type) {
this.walletType = type;
},
domainTypeChange(val) {
console.log(val);
}
}
}

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

@ -1,7 +1,7 @@
<template>
<div class="main-content12 ">
<div class="flex-common">
<el-tabs v-model="curTab" class="mb24" @tab-click="handleClick">
<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>
@ -14,57 +14,27 @@
<GuipButton type="system" :btnstyle="{'width': '142px'}" @click="addTimeNums" >立即新增</GuipButton>
</div>
<div class="flex customizeWrap mb24">
<div class="customizeItem active">
<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">中一个亿</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>
<img :src="item.img" alt="">
<span class="cardTitle">{{ item.name }}</span>
</div>
<p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
<GuipButton type="primary" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
<GuipButton :type="activeIndex === index ? 'primary' : 'often'" :btnstyle="{'width': '254px'}" @click="addTimeNums" >立即新增</GuipButton>
</div>
</div>
<h4>独立卡券</h4>
<p class="desc mb20">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</p>
<p class="desc mb12">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</p>
<div class="flex customizeWrap">
<div class="customizeItem">
<span class="posFree">免费代金券</span>
<span class="posFree">免费券</span>
<div class="flex gap8">
<img src="@/assets/timesNum.png" alt="">
<span class="cardTitle">时间卡</span>
@ -77,7 +47,7 @@
<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)">
<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>
@ -160,9 +130,6 @@
<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="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>
@ -201,7 +168,7 @@ export default {
},
data() {
return {
curTab: 'manage',
curTab: 'add',
curType: 'only',
curCardType: 1,
tableList:[
@ -221,6 +188,36 @@ export default {
rule:'折扣卡',
}
],
isActive: false,
buttonType:'often',
activeIndex:-1,
numsList1:[
{
name:'时间卡',
type:1,
img:require('@/assets/timesNum.png')
},
{
name:'次数卡',
img:require('@/assets/usageNum.png'),
type:2
},
{
name:'折扣卡',
img:require('@/assets/discountNum.png'),
type:3
},
{
name:'满减卡',
img:require('@/assets/shortNum.png'),
type:4
},
{
name:'现金卡',
img:require('@/assets/cashNum.png'),
type:5
}
],
walletList:[
{
type: 1,
@ -277,9 +274,28 @@ export default {
},
methods: {
handleMouseEnter(index) {
this.activeIndex = index;
},
handleMouseLeave() {
this.activeIndex = -1;
},
handleClickItem(item) {
this.$router.push({
path: '/agent/addCustomCoupon',
query: {
type: item.type,
}
})
},
//
addTimeNums() {
this.$router.push({
path: '/agent/addCustomCoupon',
query: {
type: 1,
}
})
},
handleClick(tab, event) {
console.log(tab, event);
@ -328,6 +344,7 @@ export default {
justify-content: flex-start;
gap: 20px;
.customizeItem{
cursor: pointer;
display: flex;
flex-direction: column;
gap: 14px;

Write Preview
Loading…
Cancel
Save