From b6ad0d11135eef6561dfecb36a01aed57f84ab17 Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Sun, 8 Sep 2024 15:42:28 +0800
Subject: [PATCH] 9.8

---
 .../views/EventMarketing/CardHolder/index.vue | 398 ++++++++++--------
 .../views/EventMarketing/SaveBlock/index.vue  | 109 ++++-
 2 files changed, 318 insertions(+), 189 deletions(-)

diff --git a/fuintAdmin/src/views/EventMarketing/CardHolder/index.vue b/fuintAdmin/src/views/EventMarketing/CardHolder/index.vue
index f546140ff..33e91bc2d 100644
--- a/fuintAdmin/src/views/EventMarketing/CardHolder/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/CardHolder/index.vue
@@ -1,215 +1,239 @@
 <template>
   <div class="app-containers">
     <div class="tap-box">
-      <div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index" @click="tabindex = index" >
-        {{item}}
+      <div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index"
+           @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 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>
 </template>
 
 <script>
-import newCertificate from  "@/views/EventMarketing/newCertificate/index.vue"
-import giftBlock from  "@/views/EventMarketing/giftBlock/index.vue"
+import newCertificate from "@/views/EventMarketing/newCertificate/index.vue"
+import giftBlock from "@/views/EventMarketing/giftBlock/index.vue"
 import SaveBlock from "@/views/EventMarketing/SaveBlock/index.vue";
 import storeOilBlock from "@/views/EventMarketing/storeOilBlock/index.vue";
-  export default {
-    name: 'index',
-    data(){
-      return{
-          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')
-        }
-      }
+
+export default {
+  name: 'index',
+  data() {
+    return {
+      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')
+    //   }
+    // }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .app-containers{
-    width: 100%;
-    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;
+.app-containers {
+  width: 100%;
+  background: #f6f8f9;
+}
 
-    font-size: 12px;
-    color: #b8b8b8;
-    width: 315px;
-    top: 140px;
-  }
-  .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;
+.warp-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    img{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .size-box{
-    width: 100%;
-    height: 100px;
-    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{
+.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;
-    height: 215px;
-    /*background: url("https://club.liantuobank.com/assets/images/market/32.png") center no-repeat;*/
-    /*background-size:100% 100%;*/
+  top: 70px;
+}
 
-  }
-  #img2{
-    width: 315px;
-    height: 215px;
-    /*background: url("https://club.liantuobank.com/assets/images/market/12.png") center no-repeat;*/
-    /*background-size:100% 100%;*/
+.x-size {
+  position: absolute;
+  text-align: center;
 
-  }
-  #img3{
-    width: 315px;
-    height: 215px;
-    /*background: url("https://club.liantuobank.com/assets/images/market/11.png") center no-repeat;*/
-    /*background-size:100% 100%;*/
+  font-size: 12px;
+  color: #b8b8b8;
+  width: 315px;
+  top: 140px;
+}
 
-  }
-  #img4{
-    width: 315px;
-    height: 215px;
-  }
-  #img5{
-    width: 315px;
-    height: 215px;
-  }
-  .tap-box{
+.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;
+  align-items: center;
+  justify-content: center;
+
+  img {
     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{
+}
+
+.size-box {
+  width: 100%;
+  height: 100px;
+  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;
   padding: 15px;
 }
diff --git a/fuintAdmin/src/views/EventMarketing/SaveBlock/index.vue b/fuintAdmin/src/views/EventMarketing/SaveBlock/index.vue
index 967014000..852118f8d 100644
--- a/fuintAdmin/src/views/EventMarketing/SaveBlock/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/SaveBlock/index.vue
@@ -8,7 +8,7 @@
        <div style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding: 1px">
          <div class="left-c">简化加油流程，提升服务，引领成品油零售市场进入便捷新时代。</div>
          <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>
          </div>
        </div>
@@ -508,6 +508,85 @@
         /></div>
 
       </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">
         <div style="display: flex;align-items: center; margin-bottom: 20px ">
@@ -583,6 +662,17 @@
     name: 'index',
     data(){
       return{
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        Crule:false,
         orderShow:false,
         orderData: [{
           date: '2016-05-02',
@@ -703,13 +793,28 @@
         value: '',
         tableData: [ ],
         vipname:[]
-
       }
     },
     mounted() {
       this.getlist()
     },
     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(){
         this.tableDatadh = []