From 5f4367cd6c3187a6bcf6c3316d480d6d1f01a740 Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Wed, 28 Aug 2024 14:49:35 +0800
Subject: [PATCH] 8.28

---
 .../src/views/EventMarketing/center/index.vue | 466 ++++++++++++++----
 1 file changed, 381 insertions(+), 85 deletions(-)

diff --git a/fuintAdmin/src/views/EventMarketing/center/index.vue b/fuintAdmin/src/views/EventMarketing/center/index.vue
index 779d1cc7b..d23ea0794 100644
--- a/fuintAdmin/src/views/EventMarketing/center/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/center/index.vue
@@ -1,87 +1,262 @@
 <template>
 <!--  活动中心-->
-  <div class="app-container">
-<!--    <el-card style="margin-bottom: 20px">-->
-<!--      <el-radio-group v-model="value">-->
-<!--        <el-radio-button label="1">消费有礼</el-radio-button>-->
-<!--        <el-radio-button label="2">折扣营销</el-radio-button>-->
-<!--        <el-radio-button label="3">满减营销</el-radio-button>-->
-<!--        <el-radio-button label="4">新人有礼</el-radio-button>-->
-<!--        <el-radio-button label="5">推荐有礼</el-radio-button>-->
-<!--      </el-radio-group>-->
-<!--    </el-card>-->
-    <div class="fji" >
-      <div class="wrap-box" @click="gobox(1)" >
-        <img src="./imgs/xfyl.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >消费有礼</div>
-          <div style="font-size: 12px">Consumption is polite</div>
-        </div>
-        <div class="bottom-box">
-          <div>消费有礼</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(2)" >
-        <img src="./imgs/zkyx.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >折扣营销</div>
-          <div style="font-size: 12px">Discount marketing</div>
-        </div>
-        <div class="bottom-box">
-          <div>折扣营销</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(3)" >
-        <img src="./imgs/mjyx.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >满减营销</div>
-          <div style="font-size: 12px">Consumption is polite</div>
-        </div>
-        <div class="bottom-box">
-          <div>满减营销</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(4)" >
-        <img src="./imgs/xryl.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >新人有礼</div>
-          <div style="font-size: 12px">Full reduction marketing</div>
-        </div>
-        <div class="bottom-box">
-          <div>新人有礼</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(5)" >
-        <img src="./imgs/tjyl.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >推荐有礼</div>
-          <div style="font-size: 12px">Newcomers are polite</div>
-        </div>
-        <div class="bottom-box">
-          <div>推荐有礼</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(6)" >
-        <img src="./imgs/yjfq.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >一键发券</div>
-          <div style="font-size: 12px">One click coupon issuance</div>
-        </div>
-        <div class="bottom-box">
-          <div>一键发券</div>
-        </div>
-      </div>
-      <div class="wrap-box" @click="gobox(7)" >
-        <img src="./imgs/yjfq.png" style="width: 315px;height: 265px;margin: 0 auto " >
-        <div class="p-r-title">
-          <div style="font-size: 24px;font-weight: bold" >发卡有礼</div>
-          <div style="font-size: 12px">Card issuing gift</div>
-        </div>
-        <div class="bottom-box">
-          <div>发卡有礼</div>
-        </div>
+  <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>
     </div>
+      <div class="rp-box">
+        <div class="bai-box">
+          <div class="d-s">
+            <div class="gang"></div>
+            <div style="font-weight: bold">会员营销</div>
+          </div>
+          <div class="wp-box">
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/礼物@2x.png">
+                <div>
+                  <div class="size_title">开卡有礼</div>
+                  <div class="size_text">激活会员卡，享受优惠</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/理财@2x.png">
+                <div>
+                  <div class="size_title">充值有礼</div>
+                  <div class="size_text">充值后赠送金额、积分、经验、 优惠券等</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/消费券@2x.png">
+                <div>
+                  <div class="size_title">消费有礼</div>
+                  <div class="size_text">支付后赠送积分、成长值、优惠券</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/邀请@2x.png">
+                <div>
+                  <div class="size_title">邀请有礼</div>
+                  <div class="size_text">邀请好友注册会员，获得奖励</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/生日专区@2x.png">
+                <div>
+                  <div class="size_title">生日有礼</div>
+                  <div class="size_text">会员生日关怀，激活用户复购</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/充值@2x.png">
+                <div>
+                  <div class="size_title">推荐会员充值有礼</div>
+                  <div class="size_text">会员充值后，推荐人获得积分、 成长值、优</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/消费卡@2x.png" style="width: 59px;height: 42px">
+                <div>
+                  <div class="size_title">推荐会员消费有礼</div>
+                  <div class="size_text">会员消费后，推荐人获得积分、 成长值、优</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/营销@2x.png" >
+                <div>
+                  <div class="size_title">开卡有礼</div>
+                  <div class="size_text">激活会员卡，享受优惠</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+
+          </div>
+          <div class="d-s" style="margin-top: 15px">
+            <div class="gang"></div>
+            <div style="font-weight: bold">价格营销</div>
+          </div>
+          <div class="wp-box">
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/券@2x.png">
+                <div>
+                  <div class="size_title">分时优惠</div>
+                  <div class="size_text">不同会员不同时间，指定油品享受 限时优惠</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/特价申请单@2x.png">
+                <div>
+                  <div class="size_title">限时特价</div>
+                  <div class="size_text">充值后赠送金额、积分、成长值、 优惠券、</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/会员营销@2x.png">
+                <div>
+                  <div class="size_title">立减营销</div>
+                  <div class="size_text">订单满立减营销活动</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+            <div class="nr-box">
+              <div class="nr-top">
+                <img src="./imgs/折扣@2x.png">
+                <div>
+                  <div class="size_title">折扣营销</div>
+                  <div class="size_text">会员折扣营销，限时订单折扣， 引爆店铺流</div>
+                </div>
+              </div>
+              <div class="nr-bottom">
+                <div class="left-bt">进行中1个</div>
+                |
+                <div class="right-bt">创建活动</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+<!--    <div class="fji" >-->
+<!--      <div class="wrap-box" @click="gobox(1)" >-->
+<!--        <img src="./imgs/xfyl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >消费有礼</div>-->
+<!--          <div style="font-size: 12px">Consumption is polite</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>消费有礼</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="wrap-box" @click="gobox(2)" >-->
+<!--        <img src="./imgs/zkyx.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >折扣营销</div>-->
+<!--          <div style="font-size: 12px">Discount marketing</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>折扣营销</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="wrap-box" @click="gobox(3)" >-->
+<!--        <img src="./imgs/mjyx.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >满减营销</div>-->
+<!--          <div style="font-size: 12px">Consumption is polite</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>满减营销</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="wrap-box" @click="gobox(4)" >-->
+<!--        <img src="./imgs/xryl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >新人有礼</div>-->
+<!--          <div style="font-size: 12px">Full reduction marketing</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>新人有礼</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="wrap-box" @click="gobox(5)" >-->
+<!--        <img src="./imgs/tjyl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >推荐有礼</div>-->
+<!--          <div style="font-size: 12px">Newcomers are polite</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>推荐有礼</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="wrap-box" @click="gobox(6)" >-->
+<!--        <img src="./imgs/yjfq.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
+<!--        <div class="p-r-title">-->
+<!--          <div style="font-size: 24px;font-weight: bold" >一键发券</div>-->
+<!--          <div style="font-size: 12px">One click coupon issuance</div>-->
+<!--        </div>-->
+<!--        <div class="bottom-box">-->
+<!--          <div>一键发券</div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
 
 
 
@@ -104,7 +279,13 @@ export default {
   name: 'Exchange',
   data() {
     return{
-      value:1
+      value:1,
+      tabindex:0,
+      tablist:[
+        "营销活动",
+        "当前活动列表",
+        "历史活动列表"
+      ]
     }
   },
   created() {
@@ -135,22 +316,26 @@ export default {
       if(id == 6){
         this.$router.push('/EventMarketing/yijiancoupon/index')
       }
-      if(id == 7){
-        this.$router.push('/EventMarketing/openCardGift/index')
-      }
     },
 
   }
 }
 </script>
 <style scoped lang="scss">
-.app-container{
+.app-containers{
   width: 100%;
   height: 100vh;
+  background: #f9f9f9;
 }
 .qr-code{
   margin: 0px auto;
 }
+.rp-box{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+
+}
 .wrap-box{
   text-align: center;
   width: 375px;
@@ -185,4 +370,115 @@ export default {
   font-weight: bold;
   padding-bottom: 15px;
 }
+.rp-box{
+  display: flex;
+  flex-wrap: wrap;
+}
+.d-s{
+  display: flex;
+  align-items: center;
+}
+.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;
+}
+.bai-box{
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.gang{
+  width: 2px;
+  height: 14px;
+  background: #FF9655;
+  margin-right: 5px;
+}
+.wp-box{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+}
+.nr-box{
+  border-radius: 10px;
+  border: 1px solid #EEEEEE;
+  margin-top: 15px;
+  margin-right: 15px;
+  width: 310px;
+}
+.nr-top{
+  box-sizing: border-box;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+
+  img{
+    width: 55px;
+    height: 55px ;
+    margin-right: 10px;
+  }
+}
+.size_title{
+  font-weight: bold;
+  font-size: 16px;
+  color: #333333;
+  margin-bottom: 10px;
+}
+.size_text{
+  font-size: 12px;
+  color: #333333;
+}
+.nr-bottom{
+  border-top: 1px solid #EEEEEE;
+  box-sizing: border-box;
+  padding: 4px ;
+  display: flex;
+  align-items: center;
+  color:#EEEEEE;
+}
+.left-bt{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #666666;
+  width: 50%;
+  box-sizing: border-box;
+  padding: 5px;
+
+}
+.right-bt{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #FF9655;
+  width: 50%;
+  box-sizing: border-box;
+  padding: 5px;
+}
 </style>