From 37cc0eb5f90dd5d418343fa88701719bb8da6101 Mon Sep 17 00:00:00 2001
From: wangliang <wangliang0612@dhcc.com.cn>
Date: Wed, 27 Jul 2022 19:00:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A9=E6=81=AF=E8=AF=95=E7=AE=97=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Tool.vue                |  10 +-
 src/router/depositInterestTrial.routing.ts    |  29 +++++
 src/router/index.ts                           |   2 +
 .../DepositInterestTrial/CountResult.vue      |  54 +++++++++
 .../DepositInterestTrial/CountResultB.vue     |  52 +++++++++
 .../DepositInterestTrial.vue                  | 104 ++++++++++++++++++
 6 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 src/router/depositInterestTrial.routing.ts
 create mode 100644 src/views/DepositInterestTrial/CountResult.vue
 create mode 100644 src/views/DepositInterestTrial/CountResultB.vue
 create mode 100644 src/views/DepositInterestTrial/DepositInterestTrial.vue

diff --git a/src/components/common/Tool.vue b/src/components/common/Tool.vue
index b74f4c2..10680eb 100644
--- a/src/components/common/Tool.vue
+++ b/src/components/common/Tool.vue
@@ -12,7 +12,7 @@
       <van-col span="24" class="title">{{ title }}</van-col>
     </van-row>
     <van-row class="imgNo">
-      <van-col span="6" class="imglocal">
+      <van-col span="6" class="imglocal" @click="pushTrial">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-a-jifenshangcheng32x32px"></use>
         </svg>
@@ -34,7 +34,7 @@
       </van-col>
     </van-row>
     <van-row class="imgNo">
-      <van-col span="6" class="imglocal">存款理想试算</van-col>
+      <van-col span="6" class="imglocal" @click="pushTrial">存款利息试算</van-col>
       <van-col span="6" class="imglocal">理财产品 </van-col>
       <van-col span="6" class="imglocal">自主贷款</van-col>
       <van-col span="6" class="imglocal">积分商城</van-col>
@@ -52,7 +52,11 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 })
 export default class Tool extends Vue {
   @Prop({ default: "" }) title: string | undefined; // 页面标题
-
+  pushTrial() {
+    this.$router.push({
+      name: "DepositInterestTrial",
+    })
+  }
 }
 </script>
 <style scoped lang="scss">
diff --git a/src/router/depositInterestTrial.routing.ts b/src/router/depositInterestTrial.routing.ts
new file mode 100644
index 0000000..f7deb81
--- /dev/null
+++ b/src/router/depositInterestTrial.routing.ts
@@ -0,0 +1,29 @@
+/**
+ * @Author wangliang
+ * @date 20220726
+ */
+import { propsConvert } from "@/services/props-convert";
+const depositInterestTrialRoutes = [
+  {
+    path: `/DepositInterestTrial`,
+    name: 'DepositInterestTrial',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/DepositInterestTrial/DepositInterestTrial.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "存款利息试算" },
+  },
+  {
+    path: `/CountResult`,
+    name: 'CountResult',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/DepositInterestTrial/CountResult.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "试算结果" },
+  },
+  {
+    path: `/CountResultB`,
+    name: 'CountResultB',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/DepositInterestTrial/CountResultB.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "试算结果" },
+  },
+];
+export default depositInterestTrialRoutes;
diff --git a/src/router/index.ts b/src/router/index.ts
index fdd2f29..dd264fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,7 @@ import workbenchRoutes from "@/router/workbench.routing";
 import loginRoutes from "./login.mgt.routing";
 import productRoutes from "./product.mgt.routing";
 import mypageRoutes from "./mypage.mgt.routing";
+import depositInterestTrialRoutes from "@/router/depositInterestTrial.routing";
 
 
 
@@ -41,6 +42,7 @@ const routes: Array<RouteConfig> = [
   ...loginRoutes,
   ...productRoutes,
   ...mypageRoutes,
+  ...depositInterestTrialRoutes,
 ];
 
 const router = new VueRouter({
diff --git a/src/views/DepositInterestTrial/CountResult.vue b/src/views/DepositInterestTrial/CountResult.vue
new file mode 100644
index 0000000..670286d
--- /dev/null
+++ b/src/views/DepositInterestTrial/CountResult.vue
@@ -0,0 +1,54 @@
+<!--
+ * @Author: wangliang
+ * @date 20220727
+-->
+<template>
+  <div>
+    <div class="rarle">
+      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
+        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
+        </tatle-bar>
+      </div>
+      <div class="card">
+        <div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">贷款利息试算金额</span></div>
+        <div style="margin-top: 4%;text-align: center;z-index: 1"><span style="color: #FFA121;font-size: 36px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
+    font-weight: 700;
+    font-style: normal;">¥100000.00</span></div>
+        <div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">壹佰万元整</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款金额(元)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款期限(月)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款利率(%)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>计划月还款(元)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款种类</span><span style="margin-left: auto">一般经营贷款</span></div>
+        <div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>还款方式</span><span style="margin-left: auto">等额本息</span></div>
+        <div  style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0">
+          <van-divider  v-for="count in 12" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/>
+        </div>
+      </div>
+      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary">确定</van-button>
+      <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">重新计算</span></van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from "vue-property-decorator";
+@Component({
+  name: "CountResult",
+})
+export default class CountResult extends Vue{
+  titleName="试算结果";
+  titleflag=true;
+}
+</script>
+
+<style scoped lang="scss">
+.card{
+  position: absolute;
+  background-color: #ffffff;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: -30%;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/views/DepositInterestTrial/CountResultB.vue b/src/views/DepositInterestTrial/CountResultB.vue
new file mode 100644
index 0000000..3ec6b6f
--- /dev/null
+++ b/src/views/DepositInterestTrial/CountResultB.vue
@@ -0,0 +1,52 @@
+<!--
+ * @Author: wangliang
+ * @date 20220727
+-->
+<template>
+  <div>
+    <div class="rarle">
+      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
+        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
+        </tatle-bar>
+      </div>
+      <div class="card">
+        <div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">存款收益后账户金额</span></div>
+        <div style="margin-top: 4%;text-align: center;z-index: 1"><span style="color: #FFA121;font-size: 36px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
+    font-weight: 700;
+    font-style: normal;">¥100000.00</span></div>
+        <div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">壹佰万元整</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款金额(元)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款时长(月)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>存款利率(%)</span><span style="margin-left: auto">20000</span></div>
+        <div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>共计收益(元)</span><span style="margin-left: auto">20000</span></div>
+       <div  style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0">
+          <van-divider  v-for="count in 12" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/>
+        </div>
+      </div>
+      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary">确定</van-button>
+      <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">重新计算</span></van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from "vue-property-decorator";
+@Component({
+  name: "CountResultB",
+})
+export default class CountResultB extends Vue{
+  titleName="试算结果";
+  titleflag=true;
+}
+</script>
+
+<style scoped lang="scss">
+.card{
+  position: absolute;
+  background-color: #ffffff;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: -30%;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/views/DepositInterestTrial/DepositInterestTrial.vue b/src/views/DepositInterestTrial/DepositInterestTrial.vue
new file mode 100644
index 0000000..80826e3
--- /dev/null
+++ b/src/views/DepositInterestTrial/DepositInterestTrial.vue
@@ -0,0 +1,104 @@
+<!--
+ * @Author: wangliang
+ * @date 20220727
+-->
+<template>
+  <div>
+    <div class="rarle">
+      <!--上部分-->
+      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
+        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
+        </tatle-bar>
+        <div class="bar">
+          <van-row>
+            <van-col span="12" style="text-align: center;line-height: 31px;border-radius: 4px 0px 0px 4px;margin-top: 1px" :class="flagA?'white':'green'" @click="chooseA">存款利息试算</van-col>
+            <van-col span="12" style="text-align: center;line-height: 31px;border-radius: 0px 4px 4px 0px;margin-top: 1px" :class="flagB?'white':'green'" @click="chooseB">贷款利息试算</van-col>
+          </van-row>
+        </div>
+      </div>
+      <div class="card" v-if="flag">
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款金额(元)<van-field placeholder="请输入存款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存入日期<van-field placeholder="请输入存入日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">取出日期<van-field placeholder="请输入取出日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
+      </div>
+      <div class="card" v-if="!flag">
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field placeholder="请输入贷款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款期限(月)<van-field placeholder="请输入贷款期限" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">计划月还款(元)<van-field placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
+        <div class="d-flex" style="margin-top: -2%;margin-left: 5%">贷款利率(%)<van-field placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类<van-field placeholder="请选择贷款种类" style="width: 50%;margin-top: -4%;margin-left: auto" is-link/></div>
+        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<van-field placeholder="请选择还款方式" style="width: 50%;margin-top: -4%;margin-left: auto" is-link/></div>
+      </div>
+      <div v-if="flag">
+      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countA">计算</van-button>
+      <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">清除</span></van-button>
+      </div>
+      <div v-if="!flag">
+        <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countB">计算</van-button>
+        <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">清除</span></van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+@Component({
+  name: "DepositInterestTrial",
+})
+export default class DepositInterestTrial extends Vue{
+  flag:boolean=true;
+  flagA=true;
+  flagB=false;
+  titleName:any ="存款利息试算";
+  titleflag:boolean=true;
+  chooseA() {
+    this.flag = true;
+    this.titleName="存款利息试算";
+    this.flagA=true;
+    this.flagB=false;
+  }
+  chooseB() {
+    this.flag = false;
+    this.titleName="贷款利息试算";
+    this.flagA=false;
+    this.flagB=true;
+  }
+  countA() {
+    this.$router.push({
+      name: "CountResultB",
+    })
+  }
+  countB() {
+    this.$router.push({
+      name: "CountResult",
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bar{
+  margin: 0px auto;
+  width: 90%;
+  height: 14%;
+  background-color: #ffffff;
+  margin-top: 4%;
+  border-radius: 4px;
+}
+.white{
+  background-color: #ffffff;
+  color: #0073ff;
+}
+.green{
+  background-color: #409eff;
+  color: #ffffff;
+}
+.card{
+  position: absolute;
+  background-color: #ffffff;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: -30%;
+}
+</style>
-- 
2.22.0