兑换记录,合作企业页面完善开发

src/views/workbench/ExchangeRecord.vue

@@ -9,31 +9,34 @@
       </div>
 
       <!--下部分-->
-      <div style="width:100%;height: calc(100vh);background-color: #ebeef5;">
-        <van-tabs v-model:active="active" class="tab">
-          <van-tab title="积分收支明细">
+      <div style="width: 100%;height: calc(65vh);background-color: #ebeef5;">
+
+        <div class="tab" style="border-radius: 10px;">
+          <van-tabs v-model:active="active" line-width="70px" line-height="2px" color="#007bff" style="margin-top: 10px;">
+            <van-tab title="积分收支明细" >
+              <van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px" />
               <!--按钮部分-->
-<!--            <van-row>
-              <van-col span="8">全部</van-col>
-              <van-col span="8">已获取</van-col>
-              <van-col span="8">已消耗</van-col>
-            </van-row>-->
-            <van-row gutter="20" class="brn-DIV">
-              <van-col span="8">全部</van-col>
-              <van-col span="8">已获取</van-col>
-              <van-col span="8">已消耗</van-col>
+<!--                <van-row>-->
+<!--                  <van-col span="24">-->
+<!--                    <van-row>-->
+<!--                       <van-col  v-for="(item , index) in btn" :key="index" span="5"  :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)">{{ item.text }}</van-col>-->
+<!--                    </van-row>-->
+<!--                  </van-col>-->
+<!--                </van-row>-->
+              <van-row>
+                <van-col  v-for="(item , index) in btn" :key="index" span="5"  :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)" style="margin-left: 10px;border-radius: 5px;margin-top: -10px">{{ item.text }}</van-col>
               </van-row>
               <van-row class="ms-style" >
-              <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;">本月获取积分3842 已消耗3400</van-col>
+                <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;margin-left: 14px;margin-top: 20px">本月获取积分3842 已消耗3400</van-col>
               </van-row>
               <div style="width: 100%;height: 100%;">
                 <van-row>
-                <van-col span="4">存款积分奖励</van-col>
-                <van-col span="10" offset="4">3211</van-col>
+                  <van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -22px;">存款积分奖励</van-col>
+                  <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 40px;">3211</van-col>
                 </van-row>
 
                 <van-row>
-                <van-col span="4" style="margin-left: 6%;">2022-07-24 15:38</van-col>
+                  <van-col span="4" style="margin-top: 8px;font-size: smaller;">2022-07-24 15:38</van-col>
                 </van-row>
 
               </div>
@@ -41,11 +44,28 @@
             </van-tab>
 
             <van-tab title="积分兑换记录">
-            <div>
-
+              <van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px"/>
+              <div style="text-align: left;margin-left: 10px;font-size: small;">
+                本月
+              </div>
+              <div class="littleCard d-flex mb-3">
+                <div class="p-2">
+                  <img :src="require('@/assets/images/daijinquan.png')" style="width: 90px;height: 90px;" />
+                </div>
+                <div class="p-2 wordposition">
+                  <div class="d-flex flex-column" style="margin-top: 6px;">
+                    <div class="p-2 "><span style="color: #212529;font-weight: bolder;">200元利息代金券</span></div>
+                    <div class="p-2 ">
+                      <div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 0px;">价格:  20000</span></div>
+                      <div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 16px;">时间: 20220725 11:28:32 兑换</span></div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </van-tab>
           </van-tabs>
+
+        </div>
       </div>
     </div>
 
@@ -60,6 +80,29 @@ import {Component, Vue} from "vue-property-decorator";
 export default class ExchangeRecord extends Vue {
   titleName="积分收支明细";
   titleflag= true;
+  all(params:number){
+    if(params ==0){//点击全部
+      this.btn[0].flage=true;
+      this.btn[1].flage=false;
+      this.btn[2].flage=false;
+      //todo
+    } else if(params ==1){//点击全部
+      this.btn[0].flage=false;
+      this.btn[1].flage=true;
+      this.btn[2].flage=false;
+      //todo
+    }if(params ==2){//点击全部
+      this.btn[0].flage=false;
+      this.btn[1].flage=false;
+      this.btn[2].flage=true;
+      //todo
+    }
+  }
+  btn:any=[
+    {text:'全部',flage:true},
+    {text:'已获取',flage:false},
+    {text:'已消耗',flage:false},
+  ];
 }
 </script>
 
@@ -84,20 +127,25 @@ export default class ExchangeRecord extends Vue {
   left: auto;
   left: 2%;
   width: 96%;
-  height: 100%;
-  /* border-radius: 108px; */
+  height: 74%;
   margin: 0px auto;
   text-align: center;
   background-color: #ffffff;
+
 }
-.van-col--8 {
-  width: 20%;
+.van-col--l {
   margin-top: 10px;
   background-color: #1989fa;
-/*  border: 1px solid;*/
-  margin: 7px;
   border-radius: 5px;
-  text-align: center;
+  margin-left: 5px;
+  border: 1px solid;
+}
+.van-col--b {
+  margin-top: 10px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  margin-left: 5px;
+  border: 1px solid;
 }
 .ms-style{
   width: 90%;
@@ -107,4 +155,23 @@ export default class ExchangeRecord extends Vue {
 .van-col--4 {
   width: 40%;
 }
+.littleCard {
+  background-color: #f5f7fa;
+  width: 94%;
+  margin-left: 3%;
+  height: fit-content;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgb(221 221 221);
+  margin-top: 10px;
+}
+.wordposition {
+  text-align: left;
+  margin-left: -16px;
+}
+.van-color-blow{
+  text-align: center;font-size: 12px;border: 1px solid;background-color: #02a7f0;width: 50px;
+}
+.van-color-graw{
+  text-align: center;font-size: 12px;border: 1px solid;background-color: #ffffff;width: 50px;
+}
 </style>