9.8
This commit is contained in:
xvv
parent
08f7bafbbe
commit
b6ad0d1113
@ -1,215 +1,239 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-containers">
|
<div class="app-containers">
|
||||||
<div class="tap-box">
|
<div class="tap-box">
|
||||||
<div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index" @click="tabindex = index" >
|
<div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index"
|
||||||
{{item}}
|
@click="tabindex = index">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ping-box">
|
||||||
|
<div v-show="tabindex == 0">
|
||||||
|
<SaveBlock></SaveBlock>
|
||||||
|
<storeOilBlock></storeOilBlock>
|
||||||
|
</div>
|
||||||
|
<div v-show="tabindex == 1">
|
||||||
|
<giftBlock></giftBlock>
|
||||||
|
</div>
|
||||||
|
<div v-show="tabindex == 2">
|
||||||
|
<newCertificate></newCertificate>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ping-box">
|
|
||||||
<div v-show="tabindex == 0">
|
|
||||||
<SaveBlock></SaveBlock>
|
|
||||||
<storeOilBlock></storeOilBlock>
|
|
||||||
</div>
|
|
||||||
<div v-show="tabindex == 1">
|
|
||||||
<giftBlock></giftBlock>
|
|
||||||
</div>
|
|
||||||
<div v-show="tabindex == 2">
|
|
||||||
<newCertificate></newCertificate>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import newCertificate from "@/views/EventMarketing/newCertificate/index.vue"
|
import newCertificate from "@/views/EventMarketing/newCertificate/index.vue"
|
||||||
import giftBlock from "@/views/EventMarketing/giftBlock/index.vue"
|
import giftBlock from "@/views/EventMarketing/giftBlock/index.vue"
|
||||||
import SaveBlock from "@/views/EventMarketing/SaveBlock/index.vue";
|
import SaveBlock from "@/views/EventMarketing/SaveBlock/index.vue";
|
||||||
import storeOilBlock from "@/views/EventMarketing/storeOilBlock/index.vue";
|
import storeOilBlock from "@/views/EventMarketing/storeOilBlock/index.vue";
|
||||||
export default {
|
|
||||||
name: 'index',
|
export default {
|
||||||
data(){
|
name: 'index',
|
||||||
return{
|
data() {
|
||||||
tabindex:0,
|
return {
|
||||||
tablist:[
|
tabindex: 0,
|
||||||
"电子卡",
|
tablist: [
|
||||||
"礼品卡",
|
"电子卡",
|
||||||
"优惠券"
|
"礼品卡",
|
||||||
]
|
"优惠券"
|
||||||
}
|
]
|
||||||
},
|
|
||||||
components:{
|
|
||||||
SaveBlock,
|
|
||||||
storeOilBlock,
|
|
||||||
giftBlock,
|
|
||||||
newCertificate
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
goDetail(id){
|
|
||||||
if(id == 1){
|
|
||||||
this.$router.push('/EventMarketing/SaveBlock/index')
|
|
||||||
}
|
|
||||||
if(id == 2){
|
|
||||||
this.$router.push('/EventMarketing/giftBlock/index')
|
|
||||||
}
|
|
||||||
if(id == 3){
|
|
||||||
this.$router.push('/EventMarketing/storeOilBlock/index')
|
|
||||||
}
|
|
||||||
if(id == 4){
|
|
||||||
this.$router.push('/EventMarketing/coupon/index')
|
|
||||||
}
|
|
||||||
if(id == 5){
|
|
||||||
this.$router.push('/EventMarketing/exchange/index')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
SaveBlock,
|
||||||
|
storeOilBlock,
|
||||||
|
giftBlock,
|
||||||
|
newCertificate
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// goDetail(id){
|
||||||
|
// if(id == 1){
|
||||||
|
// this.$router.push('/EventMarketing/SaveBlock/index')
|
||||||
|
// }
|
||||||
|
// if(id == 2){
|
||||||
|
// this.$router.push('/EventMarketing/giftBlock/index')
|
||||||
|
// }
|
||||||
|
// if(id == 3){
|
||||||
|
// this.$router.push('/EventMarketing/storeOilBlock/index')
|
||||||
|
// }
|
||||||
|
// if(id == 4){
|
||||||
|
// this.$router.push('/EventMarketing/coupon/index')
|
||||||
|
// }
|
||||||
|
// if(id == 5){
|
||||||
|
// this.$router.push('/EventMarketing/exchange/index')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.app-containers{
|
.app-containers {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #f6f8f9;
|
background: #f6f8f9;
|
||||||
}
|
}
|
||||||
.warp-box{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.k-box{
|
|
||||||
box-shadow: 0px 2px 4px rgba(31,30,47,0.1);
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 355px;
|
|
||||||
height: 334px;
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.s-size{
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
width: 315px;
|
|
||||||
top: 70px;
|
|
||||||
}
|
|
||||||
.x-size{
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
font-size: 12px;
|
.warp-box {
|
||||||
color: #b8b8b8;
|
width: 100%;
|
||||||
width: 315px;
|
display: flex;
|
||||||
top: 140px;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.p-size{
|
|
||||||
position: absolute;
|
|
||||||
left: 82px;
|
|
||||||
top: 50px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.title_{
|
|
||||||
font-size: 17px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
.size_{
|
|
||||||
font-size: 11px;
|
|
||||||
color: #EDE1CF;
|
|
||||||
}
|
|
||||||
.img-box{
|
|
||||||
height: 200px;
|
|
||||||
|
|
||||||
display: flex;
|
.k-box {
|
||||||
align-items: center;
|
box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.1);
|
||||||
justify-content: center;
|
background-color: #fff;
|
||||||
img{
|
border-radius: 6px;
|
||||||
width: 100%;
|
width: 355px;
|
||||||
height: 100%;
|
height: 334px;
|
||||||
}
|
margin-right: 15px;
|
||||||
}
|
margin-bottom: 15px;
|
||||||
.size-box{
|
overflow: hidden;
|
||||||
width: 100%;
|
cursor: pointer;
|
||||||
height: 100px;
|
box-sizing: border-box;
|
||||||
background: white;
|
padding: 20px;
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
padding: 10px;
|
}
|
||||||
}
|
|
||||||
.box-title{
|
.s-size {
|
||||||
font-size: 18px;
|
position: absolute;
|
||||||
font-weight: 600;
|
text-align: center;
|
||||||
color: #363636;
|
font-weight: 600;
|
||||||
margin-bottom: 5px;
|
font-size: 18px;
|
||||||
}
|
color: #333333;
|
||||||
.js{
|
|
||||||
font-size: 13px;
|
|
||||||
color: #303e67;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
#img1{
|
|
||||||
width: 315px;
|
width: 315px;
|
||||||
height: 215px;
|
top: 70px;
|
||||||
/*background: url("https://club.liantuobank.com/assets/images/market/32.png") center no-repeat;*/
|
}
|
||||||
/*background-size:100% 100%;*/
|
|
||||||
|
|
||||||
}
|
.x-size {
|
||||||
#img2{
|
position: absolute;
|
||||||
width: 315px;
|
text-align: center;
|
||||||
height: 215px;
|
|
||||||
/*background: url("https://club.liantuobank.com/assets/images/market/12.png") center no-repeat;*/
|
|
||||||
/*background-size:100% 100%;*/
|
|
||||||
|
|
||||||
}
|
font-size: 12px;
|
||||||
#img3{
|
color: #b8b8b8;
|
||||||
width: 315px;
|
width: 315px;
|
||||||
height: 215px;
|
top: 140px;
|
||||||
/*background: url("https://club.liantuobank.com/assets/images/market/11.png") center no-repeat;*/
|
}
|
||||||
/*background-size:100% 100%;*/
|
|
||||||
|
|
||||||
}
|
.p-size {
|
||||||
#img4{
|
position: absolute;
|
||||||
width: 315px;
|
left: 82px;
|
||||||
height: 215px;
|
top: 50px;
|
||||||
}
|
color: #FFFFFF;
|
||||||
#img5{
|
}
|
||||||
width: 315px;
|
|
||||||
height: 215px;
|
.title_ {
|
||||||
}
|
font-size: 17px;
|
||||||
.tap-box{
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size_ {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #EDE1CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
|
||||||
background: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.t-box{
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 14px;
|
|
||||||
color: #999999;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
margin: 0px 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
//border-bottom: 2px solid #FF770F;
|
|
||||||
}
|
}
|
||||||
.actve{
|
}
|
||||||
color: #FF770F !important;
|
|
||||||
font-weight: bold;
|
.size-box {
|
||||||
border-bottom: 2px solid #FF770F !important;
|
width: 100%;
|
||||||
}
|
height: 100px;
|
||||||
.ping-box{
|
background: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #363636;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #303e67;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img1 {
|
||||||
|
width: 315px;
|
||||||
|
height: 215px;
|
||||||
|
/*background: url("https://club.liantuobank.com/assets/images/market/32.png") center no-repeat;*/
|
||||||
|
/*background-size:100% 100%;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#img2 {
|
||||||
|
width: 315px;
|
||||||
|
height: 215px;
|
||||||
|
/*background: url("https://club.liantuobank.com/assets/images/market/12.png") center no-repeat;*/
|
||||||
|
/*background-size:100% 100%;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#img3 {
|
||||||
|
width: 315px;
|
||||||
|
height: 215px;
|
||||||
|
/*background: url("https://club.liantuobank.com/assets/images/market/11.png") center no-repeat;*/
|
||||||
|
/*background-size:100% 100%;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#img4 {
|
||||||
|
width: 315px;
|
||||||
|
height: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img5 {
|
||||||
|
width: 315px;
|
||||||
|
height: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-box {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
margin: 0px 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
//border-bottom: 2px solid #FF770F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actve {
|
||||||
|
color: #FF770F !important;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 2px solid #FF770F !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ping-box {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
<div style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding: 1px">
|
<div style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding: 1px">
|
||||||
<div class="left-c">简化加油流程，提升服务，引领成品油零售市场进入便捷新时代。</div>
|
<div class="left-c">简化加油流程，提升服务，引领成品油零售市场进入便捷新时代。</div>
|
||||||
<div style="margin: 10px 0px">
|
<div style="margin: 10px 0px">
|
||||||
<el-button type="primary" >编辑储值卡规则</el-button>
|
<el-button type="primary" @click="addCrule()" >编辑储值卡规则</el-button>
|
||||||
<el-button type="primary" @click="addblock()">新增储值卡活动</el-button>
|
<el-button type="primary" @click="addblock()">新增储值卡活动</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -508,6 +508,85 @@
|
|||||||
/></div>
|
/></div>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<!-- 规则-->
|
||||||
|
<el-dialog title="新增储值卡规则" :visible.sync="Crule">
|
||||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="ruleForm.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="权益说明" prop="desc">
|
||||||
|
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="规则说明" prop="desc">
|
||||||
|
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="适用油品油号" prop="desc">
|
||||||
|
<div class="d-s" style="cursor: pointer">
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>不限</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>自定义</div>
|
||||||
|
<el-select v-model="ruleForm.region" placeholder="请选择油品油号（可多选）" style="margin-left: 10px">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="适用商品" prop="desc">
|
||||||
|
<div class="d-s" style="cursor: pointer">
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>不限</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>自定义</div>
|
||||||
|
<el-select v-model="ruleForm.region" placeholder="请选择商品名称（可多选）" style="margin-left: 10px">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="有效期" prop="desc">
|
||||||
|
<div class="d-s" style="cursor: pointer">
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>不限</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-s">
|
||||||
|
<img src="../../../assets/images/wx.png" style="width: 20px;height: 20px;">
|
||||||
|
<img src="../../../assets/images/xz.png" style="width: 20px;height: 20px;">
|
||||||
|
<div>自定义</div>
|
||||||
|
<el-date-picker
|
||||||
|
style="margin-left: 10px"
|
||||||
|
v-model="value1"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="submitForms('ruleForm')">保存</el-button>
|
||||||
|
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 兑换券列表-->
|
<!-- 兑换券列表-->
|
||||||
<el-dialog title="兑换券列表" :visible.sync="dialogTableVisibledh">
|
<el-dialog title="兑换券列表" :visible.sync="dialogTableVisibledh">
|
||||||
<div style="display: flex;align-items: center; margin-bottom: 20px ">
|
<div style="display: flex;align-items: center; margin-bottom: 20px ">
|
||||||
@ -583,6 +662,17 @@
|
|||||||
name: 'index',
|
name: 'index',
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
ruleForm: {
|
||||||
|
name: '',
|
||||||
|
region: '',
|
||||||
|
date1: '',
|
||||||
|
date2: '',
|
||||||
|
delivery: false,
|
||||||
|
type: [],
|
||||||
|
resource: '',
|
||||||
|
desc: ''
|
||||||
|
},
|
||||||
|
Crule:false,
|
||||||
orderShow:false,
|
orderShow:false,
|
||||||
orderData: [{
|
orderData: [{
|
||||||
date: '2016-05-02',
|
date: '2016-05-02',
|
||||||
@ -703,13 +793,28 @@
|
|||||||
value: '',
|
value: '',
|
||||||
tableData: [ ],
|
tableData: [ ],
|
||||||
vipname:[]
|
vipname:[]
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getlist()
|
this.getlist()
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
addCrule(){
|
||||||
|
this.Crule =! this.Crule
|
||||||
|
},
|
||||||
|
submitForms(formName) {
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
alert('submit!');
|
||||||
|
} else {
|
||||||
|
console.log('error submit!!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
},
|
||||||
// 请求兑换券
|
// 请求兑换券
|
||||||
getlistExchange(){
|
getlistExchange(){
|
||||||
this.tableDatadh = []
|
this.tableDatadh = []
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user