修改

src/components/common/PicketAcced.vue

@@ -56,6 +56,13 @@
           </svg>
         </van-col>
       </van-row>
+      <van-row v-if="item.status === 1" type="flex" class="bottom" style="margin-top: 4px" @click="toTrial()">
+        <van-col span="24" class="lablel"><span>计算器</span>
+          <svg class="iconl" aria-hidden="true">
+            <use xlink:href="#icon-a-xiayiye24x24px"></use>
+          </svg>
+        </van-col>
+      </van-row>
     </div>
   </div>
 </template>
@@ -75,6 +82,9 @@ export default class PicketAcced extends Vue {
   onClickPicket() {
     this.$emit("onClickPicket")
   }
+  toTrial() {
+    this.$emit("toTrial")
+  }
   //调用父组件的值
   onClickDetails(status:any) {
     this.$emit("onClickDetails",status )
@@ -90,7 +100,7 @@ export default class PicketAcced extends Vue {
 
 .card {
   border-radius: 2%;
-  height: 28vh;
+  height: 32vh;
   margin: 3% 3% 3% 3%;
   background: #ffffff;
 }

src/views/DepositInterestTrial/CountResult.vue

@@ -55,7 +55,7 @@
           <van-col span="12" style="text-align: right">{{repayType}}</van-col>
         </van-row>
       </div>
-      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 16%;height: 6%;border-radius: 5px;" type="primary">确定</van-button>
+      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 16%;height: 6%;border-radius: 5px;" type="primary" @click="returnCount">确定</van-button>
       <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 28%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
     </div>
   </div>

src/views/DepositInterestTrial/CountResultB.vue

@@ -49,7 +49,7 @@
           <van-col span="12" style="text-align: right">{{depositAmt}}</van-col>
         </van-row>
       </div>
-      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 26%;height: 6%;border-radius: 5px;" type="primary">确定</van-button>
+      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 26%;height: 6%;border-radius: 5px;" type="primary" @click="returnCount">确定</van-button>
       <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 40%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
     </div>
   </div>

src/views/DepositInterestTrial/LoanTrial.vue

+<template>
+  <div>
+    <div class="card" :model="test2">
+      <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field v-model="test2.loanAmt" 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 v-model="test2.loanTime" 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 v-model="test2.planMonthRepay" 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 v-model="test2.loanRate" placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
+      <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类
+        <a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">
+        </a-select>
+      </div>
+      <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<a-select :v-model="test2.repayType" @change="handleChoiceChange" placeholder="请选择还款方式" style="width: 50%;margin-top: -2%;margin-left: auto">
+        <a-select-option v-for="(item, index) in choices" :key="index" :value="item">
+          {{item}}
+        </a-select-option>
+      </a-select></div>
+    </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" @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>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+  name: "LoanTrial"
+})
+export default class LoanTrial extends Vue {
+  choices: string[] = ["利随本清","等额本金","等额本息"];
+  test2: any = {
+    loanAmt: "",
+    loanTime: "",
+    planMonthRepay : "",
+    loanRate: "",
+    loanType: undefined,
+    repayType: "",
+  };
+  loanTypes: any[] = [
+    {
+      value : "有抵押",
+      label : "有抵押",
+    },{
+      value : "无抵押",
+      label : "无抵押",
+    }
+  ];
+  handleChoiceChange(value:any) {
+    this.test2.repayType = value;
+  }
+  countB() {
+    let result = 0;
+    result = parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)/100*parseInt(this.test2.loanTime)/12;
+    this.$router.push({
+      name: "CountResult",
+      params: {
+        loanAmt: this.test2.loanAmt,
+        loanTime: this.test2.loanTime,
+        planMonthRepay: this.test2.planMonthRepay,
+        loanRate: this.test2.loanRate,
+        loanType: this.test2.loanType,
+        repayType: this.test2.repayType,
+        result: result.toString(),
+      }
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.card{
+  position: absolute;
+  background-color: #ffffff;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: -30%;
+}
+</style>

src/views/workbench/Accommodation.vue

@@ -16,7 +16,7 @@
       <van-tabs>
         <van-tab title="未结清">
           <picket-acced :productParam="productParam" class="acced" @onClickDetails="onClickDetails"
-            @onClickPicket="onClickPicket" ></picket-acced>
+            @onClickPicket="onClickPicket" @toTrial="toTrial"></picket-acced>
         </van-tab>
         <van-tab title="已结清">
           <picket-acced :productParam="productParamlist" @onClickDetails="onClickDetails" class="acced"></picket-acced>
@@ -78,6 +78,11 @@ export default class Accommodation extends Vue {
       name: "Repaymentlond"
     })
   }
+  toTrial() {
+    this.$router.push({
+      name: "DepositInterestTrial"
+    });
+  }
 }