利息试算页面

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">

src/router/depositInterestTrial.routing.ts

+/**
+ * @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;

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({

src/views/DepositInterestTrial/CountResult.vue

+<!--
+ * @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>

src/views/DepositInterestTrial/CountResultB.vue

+<!--
+ * @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>

src/views/DepositInterestTrial/DepositInterestTrial.vue

+<!--
+ * @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>