-msrc

src/assets/iconfont/demo_index.html

@@ -930,9 +930,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1657158038229') format('woff2'),
-       url('iconfont.woff?t=1657158038229') format('woff'),
-       url('iconfont.ttf?t=1657158038229') format('truetype');
+  src: url('iconfont.woff2?t=1658487575752') format('woff2'),
+       url('iconfont.woff?t=1658487575752') format('woff'),
+       url('iconfont.ttf?t=1658487575752') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>

src/assets/iconfont/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 3289090 */
-  src: url('iconfont.woff2?t=1657158038229') format('woff2'),
-       url('iconfont.woff?t=1657158038229') format('woff'),
-       url('iconfont.ttf?t=1657158038229') format('truetype');
+  src: url('iconfont.woff2?t=1658487575752') format('woff2'),
+       url('iconfont.woff?t=1658487575752') format('woff'),
+       url('iconfont.ttf?t=1658487575752') format('truetype');
 }
 
 .iconfont {

src/components/common/LittleCard.vue

@@ -2,15 +2,15 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 16:24:00
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-12 14:08:47
+ * @LastEditTime: 2022-07-22 16:50:12
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <!-- <div> -->
   <div class="d-tattle">
-    <div class="litterParam" v-for="(item, index) in litterParam" :key="index">
-      <van-row class="vanrow">
+    <div class="litterParam" v-for="(item, index) in litterParam" :key="index" >
+      <van-row class="vanrow" @click="litterParamClick(item)">
         <van-col span="20" class="priductName">
           <svg class="icon" aria-hidden="true">
             <!--图片传入进来-->>
@@ -38,6 +38,11 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 })
 export default class LittleCard extends Vue {
   @Prop({ default: "" }) litterParam: any | [] //列表信息
+
+  //点击事件
+  litterParamClick(item:any){
+    this.$emit("litterParamClick",item);
+  }
 }
 </script>
 <style scoped lang="scss">

src/components/common/PicketAcced.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-22 19:24:22
+ * @FilePath: \mcep-h5\src\components\common\Tatle.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <!-- <div> -->
+  <div class="d-tatle">
+    <div class="card" v-for="(item, index) in productParam" :key="index" @click="onClickPicket()">
+
+      <van-row>
+        <van-col span="16">
+          <van-col span="24" class="priductName">{{ item.productname }}</van-col>
+          <van-col style="    width: 100%; margin-left: 8%; line-height: 2;">
+            <van-row gutter="20">
+              <van-col span="12" class="lable"><span>申请金额：万元</span></van-col>
+              <van-col span="12" class="money" style="color:rgb(255, 204, 0);">{{ item.money }}</van-col>
+            </van-row>
+            <van-row gutter="20">
+              <van-col span="12" class="lable"><span>担保方式</span></van-col>
+              <van-col span="12" class="guarantee">{{ item.guarantee }}</van-col>
+            </van-row>
+            <van-row gutter="20">
+              <van-col span="12" class="lable"><span>申请日期（月）</span></van-col>
+              <van-col span="12" class="month">{{ item.month }}</van-col>
+            </van-row>
+            <van-row>
+              <van-col span="12" class="lable"><span>申请时间</span></van-col>
+              <van-col span="12" class="time">{{ item.time }}</van-col>
+            </van-row>
+
+          </van-col>
+
+        </van-col>
+        <van-col span="8">
+            <svg class="icon" aria-hidden="true" v-if="item.status ===1">
+            <use xlink:href="#icon-a-yifafang60x60px"></use>
+          </svg>
+          <svg class="icon" aria-hidden="true" v-if="item.status ===2">
+            <use xlink:href="#icon-a-yifafang60x60px"></use>
+          </svg>
+          <svg class="icon" aria-hidden="true" v-if="item.status ===3">
+            <use xlink:href="#icon-a-yijieqing60x60px"></use>
+          </svg>
+        </van-col>
+      </van-row>
+       <van-row v-if="item.status === 2" type="flex" class="bottom">
+        <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>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "PicketAcced",
+})
+export default class PicketAcced extends Vue {
+  @Prop({ default: "" }) productParam: any | [] //列表信息
+  //调用父组件的值
+  @Emit("onClickPicket")
+  onClickPicket() { }
+
+}
+</script>
+<style scoped lang="scss">
+.icon {
+      width: 80px;
+    height: 80px;
+    margin-top: 10%;
+}
+
+.card {
+  border-radius: 2%;
+  height: 28vh;
+  margin: 3% 3% 3% 3%;
+  background: #ffffff;
+}
+
+.priductName {
+  margin: 5% 7%;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 16px;
+  color: #333333;
+}
+
+.lable {
+  text-align: left;
+  color: #7F7F7F;
+  font-size: 14px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 400;
+  font-style: normal;
+}
+
+.iconl {
+  width: 20px;
+  height: 20px;
+}
+
+.bottom {
+  background-color: rgba(54, 114, 241, 1);
+  border: none;
+  border-radius: 5px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  text-align: center;
+}
+
+.lablel {
+  text-align: center;
+  font-size: 12px;
+  color: #FFFFFF;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 400;
+  font-style: normal;
+}
+</style>

src/router/index.ts

@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-22 15:48:19
+ * @LastEditTime: 2022-07-22 16:54:54
  * @FilePath: \mcep-h5\src\router\index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,7 +13,7 @@ import { Code } from "@/constants/enum/general/code.enum";
 // import mainRoutes from "@/router/main.routing";
 // import customerRoutes from "@/router/customer.mgt.routing";
 // import marketingRoutes from "@/router/marketing.mgt.routing";
-// import workbenchRoutes from "@/router/workbench.routing";
+import workbenchRoutes from "@/router/workbench.routing";
 import loginRoutes from "./login.mgt.routing";
 import productRoutes from "./product.mgt.routing";
 import mypageRoutes from "./mypage.mgt.routing";
@@ -36,7 +36,7 @@ const routes: Array<RouteConfig> = [
   //...mainRoutes,
   // ...customerRoutes,
   // ...marketingRoutes,
-  // ...workbenchRoutes,
+  ...workbenchRoutes,
   ...loginRoutes,
   ...productRoutes,
   ...mypageRoutes,

src/services/component-vue.service.ts

@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-14 19:59:12
+ * @LastEditTime: 2022-07-22 18:12:35
  * @FilePath: \mcep-h5\src\services\component-vue.service.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -30,9 +30,11 @@ import CardPottom from "@/components/common/CardPottom.vue";
 import LittleCard from "@/components/common/LittleCard.vue";
 import CardUnLogin from "@/components/common/CardUnLogin.vue";
 import ProductDetail from "@/components/common/ProductDetail.vue";
-
+import PicketAcced from "@/components/common/PicketAcced.vue";
 import ProductCard from "@/components/common/ProductCard.vue";
 
+
+
 ProductCard
 declare module "vue/types/vue" {
   interface Vue {
@@ -106,6 +108,8 @@ class ComponentVueService {
     Vue.component("uncard-bar", CardUnLogin);
     Vue.component("product-detail", ProductDetail);
     Vue.component("product-card", ProductCard);
+    Vue.component("picket-acced", PicketAcced);
+    
   }
 }
 const componentService = new ComponentVueService();

src/views/MyView/MyPage.vue

@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-14 13:48:42
+ * @LastEditTime: 2022-07-22 18:18:30
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -13,11 +13,11 @@
       </person-bar>
     </div>
     <div>
-       <card-bar class="card"></card-bar> 
+      <card-bar class="card"></card-bar>
       <!-- <uncard-bar class="card"></uncard-bar> -->
     </div>
     <div class="prudect">
-      <little-bar :litterParam="litterParam"></little-bar>
+      <little-bar :litterParam="litterParam" @litterParamClick="litterParamClick"></little-bar>
     </div>
   </div>
 
@@ -37,29 +37,31 @@ export default class MyPage extends Vue {
   created() {
     //判断登录登陆状态
     //this.loginFlag=localStorage.getItem("loginFlag")
-    if(this.loginFlag){
+    if (this.loginFlag) {
       this.param = {
-        name:"孙旭东",
-        live:"二星级",
-        grow:"531"
+        name: "孙旭东",
+        live: "二星级",
+        grow: "531"
       }
-    }else{
-      this.param={
-        name:"登录/注册"
+    } else {
+      this.param = {
+        name: "登录/注册"
       }
     }
-   
+
   }
   //列表信息
   litterParam: any = [{
     productname: "个人信息",
     //个人信息
-    img: "#icon-a-gerenxinxi16x16px"
+    img: "#icon-a-gerenxinxi16x16px",
+    flag: "PersonLod"
   },
   {
     productname: "我的贷款",
     //图片信息
-    img: "#icon-a-wodedaikuan16x16px"
+    img: "#icon-a-wodedaikuan16x16px",
+    flag: "Accommodation"
   },
   {
     productname: "兑换记录",
@@ -71,6 +73,22 @@ export default class MyPage extends Vue {
     //图片信息
     img: "#icon-a-hezuoqiye16x16px"
   }]
+
+  //点击事件
+  litterParamClick(item: any) {
+
+    if (item.flag === "PersonLod") {
+      this.$router.push({
+        name: "PersonLod"
+        //参数
+      })
+    } else if (item.flag === "Accommodation") {
+      this.$router.push({
+        name: "Accommodation"
+        //参数
+      })
+    }
+  }
 }
 </script>
 <style scoped lang="scss">

src/views/workbench/Accommodation.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-22 19:24:30
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <div class="body">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <div>
+      <van-tabs>
+        <van-tab title="未结清">
+          <picket-acced :productParam="productParam" class="acced"></picket-acced>
+        </van-tab>
+        <van-tab title="已结清">
+          <picket-acced :productParam="productParamlist" class="acced"></picket-acced>
+        </van-tab>
+
+      </van-tabs>
+    </div>
+
+
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Accommodation"
+})
+export default class Accommodation extends Vue {
+  tatleName = "我的贷款"
+  //未结清贷款计划
+  productParam = [{
+    productname: "'企业之星'流动之星贷款",
+    money: "30",
+    guarantee: "担保",
+    month: "12",
+    status :2,
+    time: "2022-02-18"
+  }, {
+    productname: "'企业之星'流动之星贷款",
+    money: "30",
+    guarantee: "担保",
+    month: "12",
+    status :2,
+    time: "2022-02-18"
+  }]
+  //已结清
+  productParamlist = [{
+    productname: "'llll'流动之星贷款",
+    money: "30",
+    guarantee: "担保",
+    status :3,
+    month: "12",
+    time: "2022-02-18"
+  }]
+
+}
+
+
+</script>
+<style scoped lang="scss">
+.body {
+  height: 100%;
+  width: 100%;
+  background-color: rgba(241, 241, 241, 1);
+}
+
+.acced {
+  width: 100%;
+  height: 20%;
+}
+</style>

src/views/workbench/PersonLod.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-22 16:58:52
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <div>
+
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <van-row type="flex" class="iconImg">
+      <van-col span="24">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-touxiang"></use>
+        </svg>
+      </van-col>
+    </van-row>
+    <van-row type="flex">
+      <van-col span="24">
+        <van-field v-model="name" label="姓名" :border="true" placeholder="请输入姓名" />
+      </van-col>
+    </van-row>
+    <van-row type="flex">
+      <van-col span="24">
+        <van-field v-model="IdCard" label="身份证号" :border="true" placeholder="请输入身份证号" />
+      </van-col>
+    </van-row>
+    <van-row type="flex">
+      <van-col span="24">
+        <van-field v-model="phone" label="电话" :border="true" placeholder="请输入电话" />
+      </van-col>
+    </van-row>
+    <van-row type="flex">
+      <van-col span="24">
+        <van-field v-model="liveAdress" label="居住地址" :border="true" placeholder="请输入居住地址" />
+      </van-col>
+    </van-row>
+    <div style="margin: 16px;">
+      <van-button square block type="info" native-type="submit">修改</van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "PersonLod"
+})
+export default class PersonLod extends Vue {
+  tatleName="个人信息"//个人信息
+  name: string = ""//姓名
+  IdCard: string = ""//身份证号
+  phone: string = ""//手机号
+  liveAdress: string = ""//居住地址
+}
+</script>
+<style scoped lang="scss">
+.iconImg{
+  text-align: center;
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+.icon {
+  width: 80px;
+  height: 80px;
+}
+</style>