兑换记录,合作企业页面实现完毕

src/main.ts

@@ -26,7 +26,7 @@ import "@dhccmobile/common-style";
 import "vant/lib/index.css";
 import "@/assets/css/index.scss";
 import nativeService from "@/services/native.service";
- 
+
 
 import { Step, Steps } from 'vant';
 import vueEsign from 'vue-esign';

src/router/workbench.routing.ts

@@ -60,5 +60,12 @@ const workbenchRoutes = [
     props: propsConvert,
     meta: { keepAlive: false, requiresAuth: true, name: "兑换记录" },
   },
+  {
+    path: `/ExchangeDetail`,
+    name: 'ExchangeDetail',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/workbench/ExchangeDetail.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "兑换详情" },
+  },
 ];
 export default workbenchRoutes;

src/views/workbench/ExchangeDetail.vue

+<template>
+  <div class="body d-page" style="background-color: #d6d8d9">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <div style="text-align: center">
+      <img :src="require('@/assets/images/daijinquan.png')" style="width: 200px;height: 200px;" />
+    </div>
+    <div style="border-radius: 10px;background-color: #ffffff;height: calc(100vh)">
+      <div style="font-size: 14px;font-weight: bolder;color: black;margin-left: 20px;padding-top: 20px">200元利息代金券</div>
+      <div style="margin-left: 20px;margin-top: 16px;color: #9e9e9e">说明</div>
+      <div style="margin-left: 20px;margin-top: 16px;font-size: smaller">利息减200元代金券，可用各项贷款的利息减免。</div>
+      <div style="margin-left: 20px;margin-top: 14px;font-size: smaller">在该页面兑换成功后，可在贷款页面直接使用，直接减免相应贷款的利息。</div>
+      <van-button color="#007bff" style="width: 94%;margin-left: 3%;margin-top: 190px;border-radius: 10px;height: 30px">去使用</van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+@Component({
+  name: "ExchangeDetail",
+})
+export default class ExchangeDetail extends Vue{
+  tatleName="兑换详情";
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/workbench/ExchangeRecord.vue

@@ -27,20 +27,30 @@
                 <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;margin-left: 14px;margin-top: 20px">本月获取积分3842 已消耗3400</van-col>
+                <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;margin-left: 14px;margin-top: 20px">本月获取积分<span style="color: #c69500">{{num}}</span> 已消耗3400</van-col>
               </van-row>
               <div style="width: 100%;height: 100%;">
-                <van-row>
+                <van-row v-if="showNow">
                   <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: 88px;">3211</van-col>
+                  <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 88px;color: #c69500">
+                    {{numA}}</van-col>
                 </van-row>
 
-                <van-row>
+                <van-row v-if="showNow">
                   <van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
                 </van-row>
+                <div v-if="showNow" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
+                <van-row v-if="showPast">
+                  <van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -34px;">过期积分</van-col>
+                  <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 100px;color: #171614">
+                    {{numB}}</van-col>
+                </van-row>
 
+                <van-row v-if="showPast">
+                  <van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
+                </van-row>
               </div>
-              <div style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
+              <div v-if="showPast" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
             </van-tab>
 
             <van-tab title="积分兑换记录">
@@ -48,7 +58,7 @@
               <div style="text-align: left;margin-left: 10px;font-size: small;">
                 本月
               </div>
-              <div class="littleCard d-flex mb-3">
+              <div class="littleCard d-flex mb-3" v-for="(item,index) in daijinquan" @click="changePage">
                 <div class="p-2">
                   <img :src="require('@/assets/images/daijinquan.png')" style="width: 90px;height: 90px;" />
                 </div>
@@ -78,23 +88,36 @@ import {Component, Vue} from "vue-property-decorator";
   name: "ExchangeRecord",
 })
 export default class ExchangeRecord extends Vue {
+  showNow=true;
+  showPast=true;
+  active="";
+  num=3842;
+  numA="+3200";
+  numB="-2000";
   titleName="积分收支明细";
   titleflag= true;
+  daijinquan=[{},{},{}];
   all(params:number){
     if(params ==0){//点击全部
       this.btn[0].flage=true;
       this.btn[1].flage=false;
       this.btn[2].flage=false;
+      this.showNow=true;
+      this.showPast=true;
       //todo
     } else if(params ==1){//点击全部
       this.btn[0].flage=false;
       this.btn[1].flage=true;
       this.btn[2].flage=false;
+      this.showPast=false;
+      this.showNow=true;
       //todo
     }if(params ==2){//点击全部
       this.btn[0].flage=false;
       this.btn[1].flage=false;
       this.btn[2].flage=true;
+      this.showNow=false;
+      this.showPast=true;
       //todo
     }
   }
@@ -103,6 +126,11 @@ export default class ExchangeRecord extends Vue {
     {text:'已获取',flage:false},
     {text:'已消耗',flage:false},
   ];
+  changePage() {
+    this.$router.push({
+      name: "ExchangeDetail",
+    });
+  }
 }
 </script>