From 25ab600679bd81a68ae6fe74f963db2e1c40e4d3 Mon Sep 17 00:00:00 2001
From: wangliang <wangliang0612@dhcc.com.cn>
Date: Tue, 26 Jul 2022 16:59:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=91=E6=8D=A2=E8=AE=B0=E5=BD=95,=E5=90=88?=
 =?UTF-8?q?=E4=BD=9C=E4=BC=81=E4=B8=9A=E9=A1=B5=E9=9D=A2=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                            |  2 +-
 src/router/workbench.routing.ts        |  7 +++++
 src/views/workbench/ExchangeDetail.vue | 31 ++++++++++++++++++++
 src/views/workbench/ExchangeRecord.vue | 40 ++++++++++++++++++++++----
 4 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 src/views/workbench/ExchangeDetail.vue

diff --git a/src/main.ts b/src/main.ts
index c6481eb..d689dec 100644
--- a/src/main.ts
+++ b/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';
diff --git a/src/router/workbench.routing.ts b/src/router/workbench.routing.ts
index d3f8c9d..329335d 100644
--- a/src/router/workbench.routing.ts
+++ b/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;
diff --git a/src/views/workbench/ExchangeDetail.vue b/src/views/workbench/ExchangeDetail.vue
new file mode 100644
index 0000000..5f849a6
--- /dev/null
+++ b/src/views/workbench/ExchangeDetail.vue
@@ -0,0 +1,31 @@
+<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>
diff --git a/src/views/workbench/ExchangeRecord.vue b/src/views/workbench/ExchangeRecord.vue
index 7e7dbf4..fc61b6c 100644
--- a/src/views/workbench/ExchangeRecord.vue
+++ b/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>
 
-- 
2.22.0