首页

src/assets/css/vant-cover.scss

 /** vant样式覆写 */
 .van-nav-bar__content {
   height: 60px;
-  background-image: url("../images/tiileimg.png");
+  //TODO 更换图片
+  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
   background-size: 100%;
   //background: linear-gradient(270deg, rgba(229, 0, 18, 1) 1%, rgba(255, 87, 108, 1) 98%);
 }

src/components/common/Bottom.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-07 20:43:56
+ * @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="d-bottom">
+    <van-tabbar style=" width：100%; ">
+      <van-tabbar-item v-for="(item, index) in tabbar" :key="index">
+        <div style="margin-top: 50%;" @click="btn(index)">
+          <svg class="icon" aria-hidden="true">
+            <use :xlink:href="item.img"></use>
+          </svg>
+          <p :class="item.flag ? 'approve-type-div-selected-df' : 'approve-type-div-df'">{{ item.name }}</p>
+        </div>
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+import MainViw from "@/views/main/MainView.vue";
+/*
+* title
+*/
+@Component({
+  name: "Bottom",
+  components: {
+    MainViw,
+  }
+})
+export default class Bottom extends Vue {
+  myBtnImage: any = "#icon-a-wode24x24px-kehujinglixiaochengxu";
+  onchangeImage: any = "#icon-a-shouye-xuanzhong20x20px";
+  btnFlag: any = true
+  pl = "pl";
+  tabbar: any = [
+    {
+      img: "#icon-a-shouye-xuanzhong20x20px",
+      name: "首页",
+      flag: true
+    },
+    {
+      img: "#icon-a-wode24x24px-kehujinglixiaochengxu",
+      name: "我的",
+      flag: false
+    }
+  ];
+  btn(index: number) {
+    //alert(index);
+
+    if (index == 0) {//如果索引是0说明点击了首页
+      this.tabbar[1].img = "#icon-a-wode24x24px-kehujinglixiaochengxu";//将我的按钮置灰
+      this.tabbar[1].flag = "false";//将我的按钮置灰
+      this.tabbar[0].img = "#icon-a-shouye-xuanzhong20x20px";//将首页切换为蓝色
+      this.tabbar[0].flag = true;
+      this.tabbar[1].flag = false;
+      this.onchangebtn()
+    } else if (index == 1) {
+      this.tabbar[0].img = "#icon-a-shouye20x20px";//将首页置灰
+      this.tabbar[1].img = "#icon-a-wode-xuanzhong24x24px-kehujinglixiaochengxu";//将我的按钮直为蓝色
+      this.tabbar[0].flag = false;
+      this.tabbar[1].flag = true;
+      this.onchangebtn()
+    }
+  }
+  //传给父组件
+  onchangebtn() {
+    this.btnFlag=!this.btnFlag
+    this.$emit('onchangebtn', this.btnFlag);
+  }
+}
+</script>
+<style scoped lang="scss">
+.d-bottom {
+  width: 100%;
+  height: 100%;
+  border-width: 0px;
+  background: inherit;
+  background-color: rgba(255, 255, 255, 1);
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+}
+
+.approve-type-div-selected-df {
+  color: cornflowerblue;
+}
+
+.approve-type-div-df {
+  color: #CCCCCC;
+}
+
+.pl {
+  width: 100%;
+  height: 100%;
+  font-family: 'FontAwesome', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #CCCCCC;
+  line-height: 20px;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+}
+</style>

src/components/common/Person.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-07 20:47:51
+ * @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 class="tool">
+    <van-row class="titleNo">
+      <van-col span="24" class="title">{{ title }}</van-col>
+    </van-row>
+     <van-row class="titleNo">
+      <van-col span="24" class="title">{{ title }}</van-col>
+    </van-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Person",
+})
+export default class Person extends Vue {
+  @Prop({ default: "" }) title: string | undefined; // 页面标题
+
+}
+</script>
+<style scoped lang="scss">
+.tool {
+
+  height: 100%;
+  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
+}
+
+.title {
+  margin: 4% auto 5% 0%;
+  font-size: 18px;
+  color: #FFFFFF;
+  border-width: 0px;
+  white-space: nowrap;
+  text-transform: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.icon{
+    width: 32px;
+    height: 32px;
+}
+
+.imglocal {
+  text-align: center;
+  font-size: 12px;
+  font-size: 12px;
+   color: #FFFFFF;
+}
+
+.img {
+  width: 40%;
+}
+</style>

src/components/common/Picket.vue

@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 16:24:00
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 16:49:10
+ * @LastEditTime: 2022-07-07 18:42:19
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,20 +11,20 @@
   <div class="d-tatle">
     <div class="card">
       <van-row>
-        <van-col span="24">{{ productname }}</van-col>
+        <van-col span="24" class="priductName">{{ productname }}</van-col>
       </van-row>
-      <van-row>
-        <van-col span="24">{{ describe }}</van-col>
-      </van-row>
-      <van-row>
-        <van-col span="8">{{ limitrange }}</van-col>
-        <van-col span="8">{{ interestrate }}</van-col>
-        <van-col span="8">{{ loanterm }}</van-col>
+      <div class="describe" style="line-height: 30px;">
+        <div class="description">{{ describe }}</div>
+      </div>
+      <van-row type="flex" justify="center" style="line-height: 30px;font-weight: 700;">
+        <van-col span="8" class="limitrange" style="text-align: center;">{{ limitrange }}</van-col>
+        <van-col span="8" class="interestrate"  style="text-align: center;">{{ interestrate }}</van-col>
+        <van-col span="8" class="loanterm"  style="text-align: center;">{{ loanterm }}</van-col>
       </van-row>
-     <van-row>
-        <van-col span="8">额度范围</van-col>
-        <van-col span="8">参考利率</van-col>
-        <van-col span="8">贷款期限</van-col>
+     <van-row type="flex" justify="center" style="line-height: 30px;color: #999999;font-weight: 400;font-size: 12px;">
+        <van-col span="8" class="loantermlot">额度范围</van-col>
+        <van-col span="8" class="loantermlot">参考利率</van-col>
+        <van-col span="8" class="loantermlot">贷款期限</van-col>
       </van-row>
     </div>
   </div>
@@ -48,7 +48,67 @@ export default class Picket extends Vue {
 }
 </script>
 <style scoped lang="scss">
-.card {
-  background: #ffff;
+.card { 
+  height: 130px;
+        width: 98%;
+    margin: 10px auto;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    border: none;
+    border-radius: 4px;
+    -moz-box-shadow: 0px 0px;
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.priductName{
+    font-size: 16px;
+    text-align: left;
+    //margin-left: 3%;
+    font-weight: 600;
+    margin: 2% 0% 2% 4%;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "kern" 1;
+    -webkit-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern=1";
+    font-kerning: normal;
+}
+// .describe{
+//   background: #eaf5ff;
+// }
+.description{
+   background: #eaf5ff;
+    font-size: 12px;
+     margin-left: 3%;
+    color: #1890FF;
+     text-rendering: optimizeLegibility;
+    font-feature-settings: "kern" 1;
+    -webkit-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern=1";
+    font-kerning: normal;
+     width: 50%;
+    border-radius: 4px;
+    text-align: center;
+}
+.limitrange{
+  //  margin-left: 3%;
+  align-items: center;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 20px;
+    color: #FF7628;
+     text-rendering: optimizeLegibility;
+    font-feature-settings: "kern" 1;
+    -webkit-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern=1";
+    font-kerning: normal;
+}
+.van-col--8 {
+    width: 32%;
+}
+.loantermlot{
+  text-align: center;
 }
 </style>

src/components/common/Tool.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-07 16:11:33
+ * @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 class="tool">
+    <van-row class="titleNo">
+      <van-col span="24" class="title">{{ title }}</van-col>
+    </van-row>
+    <van-row class="imgNo">
+      <van-col span="6" class="imglocal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-a-jifenshangcheng32x32px"></use>
+        </svg>
+      </van-col>
+      <van-col span="6" class="imglocal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-a-licaichanpin32x32px"></use>
+        </svg>
+      </van-col>
+      <van-col span="6" class="imglocal">
+         <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-a-zizhudaikuan32x32px"></use>
+        </svg>
+      </van-col>
+      <van-col span="6" class="imglocal">
+         <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-a-cunkuanlixishisuan32x32px"></use>
+        </svg>
+      </van-col>
+    </van-row>
+    <van-row class="imgNo">
+      <van-col span="6" class="imglocal">存款理想试算</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>
+    </van-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Tool",
+})
+export default class Tool extends Vue {
+  @Prop({ default: "" }) title: string | undefined; // 页面标题
+
+}
+</script>
+<style scoped lang="scss">
+.tool {
+
+  height: 100%;
+  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
+}
+
+.title {
+  margin: 4% auto 5% 0%;
+  font-size: 18px;
+  color: #FFFFFF;
+  border-width: 0px;
+  white-space: nowrap;
+  text-transform: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.icon{
+    width: 32px;
+    height: 32px;
+}
+
+.imglocal {
+  text-align: center;
+  font-size: 12px;
+  font-size: 12px;
+   color: #FFFFFF;
+}
+
+.img {
+  width: 40%;
+}
+</style>

src/components/general/TitleBar.vue

 <template>
+<div class="img">
   <van-nav-bar :title="title" @click-left="onClickLeft" @click-right="onClickRight">
-    <template #left>
-      <slot name="left">
-        <van-icon name="arrow-left" size="20" />
-      </slot>
-    </template>
-    <template #right>
-      <slot name="right"> </slot>
-    </template>
+  111
+   <slot slot="cent"  name="cent"> </slot>
   </van-nav-bar>
+  </div>
 </template>
 
 <script lang="ts">
@@ -45,12 +41,17 @@ export default class TitleBar extends Vue {
     color: white;
   }
 }
+.img{
+  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
+}
 ::v-deep .van-nav-bar {
   z-index: 999999 !important;
 }
+
 ::v-deep .van-nav-bar__right {
   color: white;
 }
+
 ::v-deep .van-nav-bar__left .van-icon {
   padding-top: 16px;
 }

src/constants/api/login/login-mgt.api.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:56:29
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-06 15:09:50
+ * @FilePath: \mcep-h5\src\constants\api\login\login-mgt.api.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { MethodType } from "@/constants/enum/general/method-type.enum";
 import { HeaderType } from "@/constants/enum/general/header-type.enum";
 
-const prefix = "http://10.2.3.118:9165/online-financial-service/api/v1/cust-info"
+const prefix = "http://10.2.3.118:9165/online-financial-service/api/v1/cust-info/permit_endpoint"
 const loginApi = {
   updatePicCode: {
     url: prefix + "/kaptcha",
-    method: MethodType.GET.code,
+    method: MethodType.POST.code,
+    header: HeaderType.AUTH.code,
+  },
+  loginSystem: {
+    url: prefix + "/login",
+    method: MethodType.POST.code,
     header: HeaderType.AUTH.code,
   },
 };

src/constants/api/login/regist-mgt.api.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:56:29
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-06 14:53:22
+ * @FilePath: \mcep-h5\src\constants\api\login\login-mgt.api.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { MethodType } from "@/constants/enum/general/method-type.enum";
+import { HeaderType } from "@/constants/enum/general/header-type.enum";
+
+const prefix = "http://10.2.3.118:9165/online-financial-service/api/v1/cust-info/permit_endpoint"
+const registApi = {
+  registSystem: {
+    url: prefix + "/register",
+    method: MethodType.POST.code,
+    header: HeaderType.AUTH.code,
+  },
+};
+
+export default registApi;

src/main.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-04 17:03:33
+ * @LastEditTime: 2022-07-06 18:25:11
  * @FilePath: \mcep-h5\src\main.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -30,9 +30,10 @@ import nativeService from "@/services/native.service";
 import { Step, Steps } from 'vant';
 import vueEsign from 'vue-esign';
 import Vconsole from 'vconsole';
+import  Vant  from 'vant';
 // import { VanComponent } from "vant/types/component"
-
-Vue.use(vueEsign)
+Vue.use(Vant);
+Vue.use(vueEsign);
 Vue.use(Step);
 Vue.use(Steps);
 

src/services/api.service.ts

@@ -166,15 +166,18 @@ class ApiService {
     return requestConfigBase;
   }
   get(path: string, query: Query | undefined, requestConfig: AxiosRequestConfig): any {
-    debugger
-     path = query != null || query != undefined ? this.urlQueryConvert(path, query) : path;
+     
+     path = query != null ? this.urlQueryConvert(path, query) : path;
     return Vue.axios.get(`${path}`, requestConfig).then(this.createBusCodeHandler(query)).catch(this.createErrorHandler());
   }
 
   post(path: string, params: any, query: Query | undefined, requestConfig: AxiosRequestConfig): any {
     path = query != null ? this.urlQueryConvert(path, query) : path;
     console.log("服务调用--" + path);
-    return Vue.axios.post(`${path}`, params, requestConfig).then(this.createBusCodeHandler(params)).catch(this.createErrorHandler());
+    return Vue.axios.post(`${path}`, params, requestConfig).then(res=>{
+      //TODO
+      return res.data
+    });
   }
   /**
    * POST请求 文件上传
@@ -208,7 +211,7 @@ class ApiService {
   general(api: any, query?: Query | undefined, params?: any | undefined, requestConfig?: AxiosRequestConfig | any): any {
     if (!!api.url && !!api.method) {
       if (requestConfig == null) {
-        debugger
+         
         switch (api.header) {
           case HeaderType.BASE.code:
             requestConfig = this.createBasicHeaders();
@@ -265,7 +268,7 @@ class ApiService {
    * 服务返回统一解密处理
    */
   createBusCodeHandler(params?: any) {
-    debugger
+     
     return function(response: any) {
       if (response.status === 200) {
         let data = response.data;
@@ -312,7 +315,7 @@ class ApiService {
           } else if (data.code == 1) {
             console.log(data);
             //成功
-            data = data.data;
+           // data = data.data;
             if (typeof data != 'object') data = JSON.parse(data);
             data = data.sm4key ? SMUtil.decodeData(data) : data;
             if (typeof data != 'object') {
@@ -399,7 +402,7 @@ class ApiService {
 
   /**
    * @description: json格式转表单格式
-   * @author ChenRui
+
    * @date 2020/8/28 15:20
    */
   jsonToFormData(params: any) {

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-05 16:50:04
+ * @LastEditTime: 2022-07-07 16:21:43
  * @FilePath: \mcep-h5\src\services\component-vue.service.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,6 +23,8 @@ import * as echarts from "echarts";
 import Tatle  from "@/components/common/Tatle.vue";
 import picket  from "@/components/common/Picket.vue";
 import ant from "ant-design-vue/es/locale/zh_CN"
+import Tool from "@/components/common/Tool.vue";
+import Bottom from "@/components/common/Bottom.vue";
 
 
 declare module "vue/types/vue" {
@@ -89,7 +91,10 @@ class ComponentVueService {
     Vue.component("base-list", BaseList);
     Vue.component("anchor-nav", AnchorNav);
     Vue.component("tatle-bar", Tatle);
-    Vue.component("picket-bar", picket);
+    Vue.component("picket-bar", picket);Tool
+    Vue.component("tools-bar", Tool);
+    Vue.component("bottom-bar", Bottom);
+    
   }
 }
 const componentService = new ComponentVueService();

src/views/MyView/MyPage.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:05:30
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-07 19:00:04
+ * @FilePath: \mcep-h5\src\views\main\MainView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
+    <div>我的页面</div>
+  </div>
+
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
+
+@Component({
+  name: "MyPage",
+})
+export default class MyPage extends Vue {
+  tatleName = "我的"
+  
+}
+</script>
+<style scoped lang="scss">
+</style>

src/views/authentication/LoginView.vue

@@ -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-05 17:11:01
+ * @LastEditTime: 2022-07-06 15:57:44
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -20,40 +20,43 @@
         <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
 }">请使用手机号登录</span></van-col>
       </van-row>
-      <van-form @submit="onSubmit">
+      <van-form>
         <div class="logindiv">
           <span class="sopan">手机号</span>
           <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号" />
           <van-divider />
         </div>
 
-        <div class="logindiv">
-          <span class="sopan">密码</span>
-          <van-field v-model="password" type="password" center clearable placeholder="请填写密码" />
-          <!-- <van-divider /> -->
+        <!-- <div class="logindiv"> -->
+        <span class="sopan">密码</span>
+        <van-field v-model="password" type="password" center clearable placeholder="请填写密码" />
+        <!-- <van-divider /> -->
+        <!-- </div> -->
+        <div class="d-flex ">
+          <div class="p-2 mr-auto ">
+            <span class="sopan">验证码</span>
+            <van-field center clearable v-model="imageSrcValue" placeholder="请输入验证码" />
+          </div>
+          <div class="p-2 ">
+            <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" @click="_updatePicCode()" />
+          </div>
         </div>
 
-        <span class="sopan">验证码</span>
-        <van-field center clearable placeholder="请输入验证码" />
-        <template #right-icon>
-          <van-image :src="imageSrc" width="80" height="40"  />
-        </template>
-        <span class="sopan">短信验证码</span>
-        <div>
-
-          <van-row class="el-icon-arrow-down">
-            <van-col span="16">
-              <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
-                <!-- <van-divider /> -->
-              </van-field>
-            </van-col>
-            <van-col span="8"><a href="javascript">获取短信验证码</a></van-col>
-          </van-row>
+        <!-- <template >
+           <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" /> 
+        </template> -->
 
-
-        </div>
+        <span class="sopan">短信验证码</span>
+        <van-row class="el-icon-arrow-down">
+          <van-col span="16">
+            <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
+              <!-- <van-divider /> -->
+            </van-field>
+          </van-col>
+          <van-col span="8"><a style="color:#3672F1" @click="changeCmstotal()">{{ getCmstotal }}</a></van-col>
+        </van-row>
         <div style="margin: 16px;">
-          <van-button square block type="info" native-type="submit">登录</van-button>
+          <van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button>
         </div>
       </van-form>
       <!-- <div>
@@ -64,9 +67,9 @@
         </van-row>
       </div> -->
       <div class="d-flex " style="padding: 0px 10px 0px 10px;color: #3672F1;">
-          <div class="p-2 mr-auto "><a class="font-size-12-dhc" @click="forgetspass()"> 忘记密码</a></div>
-          <div class="p-2 "><a class="font-size-12-dhc" @click="regeist()"> 用户注册</a></div>
-           <div class="p-2 "><a class="font-size-12-dhc" @click="demo()"> demo测试</a></div>
+        <div class="p-2 mr-auto "><a class="font-size-12-dhc" @click="forgetspass()"> 忘记密码</a></div>
+        <div class="p-2 "><a class="font-size-12-dhc" @click="regeist()"> 用户注册</a></div>
+        <div class="p-2 "><a class="font-size-12-dhc" @click="demo()"> demo测试</a></div>
       </div>
     </div>
   </div>
@@ -78,6 +81,8 @@ import apiService from "@/services/api.service";
 import loginApi from "@/constants/api/login/login-mgt.api";
 import { Code } from "@/constants/enum/general/code.enum";
 import { RestfulResponse } from "@/model/domain/RestfulResponse";
+import { log } from "mathjs";
+import { sys } from "typescript";
 
 
 @Component({
@@ -85,48 +90,90 @@ import { RestfulResponse } from "@/model/domain/RestfulResponse";
   [VanImage.name]: VanImage,
 })
 export default class LoginView extends Vue {
-  tatleName = "用户登录"
-  phone: string = "" //电话
-  password: string = ""//密码
-  imageSrc: string = ""//图形
-  sms: string = ""//短信
+  getCmstotal = "获取短信验证码";
+  tatleName = "用户登录";
+  phone: string = "";//电话
+  password: string = "";//密码
+  imageSrc: any = "";//图形
+  imageSrcValue: string = "";//图形验证码
+  sms: string = "";//短信验证
+  timer: any = "";//定时器
+  time: number = 60;//计数
   //获取图形验证码
   _updatePicCode() {
     //请求图形验证码
-    apiService.general(loginApi.updatePicCode,undefined).then((response: RestfulResponse) => {
+    apiService.general(loginApi.updatePicCode, undefined, undefined, undefined).then((response: RestfulResponse) => {
       console.log(response);
-      
       if (response.code == Code.SUCCESS.code) {
-        this.imageSrc = 'data:image/png;base64';
-        return response.data;
-
+        this.imageSrc = 'data:image/png;base64,' + response.data.replace(/[\r\n]/g, "");
+        console.log(this.imageSrc);
       }
     });
   }
-  onSubmit(values: any) {
-    console.log('submit', values);
+  //计时器
+  changeCmstotal() {
+    this.getCmstotal = this.time + "s重发验证码";
+    this.timer = setInterval(() => {
+      this.time--;
+      this.getCmstotal = this.time + "s重发验证码";
+      if (this.time < 0) {
+        clearInterval(this.time)
+        this.getCmstotal = "获取短信验证码";
+      }
+    }, 1000)
+
+  }
+  loginSystem() {
+    //TODO
+    //登录失败刷新
+    //验证码失败刷新
+    //this._updatePicCode();
+    let param={
+      phone:this.phone,
+      //图形验证码
+      imgVerifyCode:this.imageSrcValue,
+      //渠道
+      loginType:"3",
+      //手机验证码
+      phoneVerifyCode:this.sms,
+      //密码
+      credential:this.password
+    }
+     apiService.general(loginApi.loginSystem, undefined, param, undefined).then((response: RestfulResponse) => {
+      console.log(response);
+      if (response.code == Code.SUCCESS.code) {
+       this.$router.push({
+            name: `Mianview`,
+            params: {
+              data: response.data
+            }
+          })
+      }else{
+        this._updatePicCode();
+      }
+    });
   }
   created() {
-     this._updatePicCode()
+    this._updatePicCode()
   }
   //忘记密码
-  forgetspass(){
-     this.$router.push({
-    name: `ForgetPass`,
-     params: {
+  forgetspass() {
+    this.$router.push({
+      name: `ForgetPass`,
+      params: {
         phone: this.phone
       }
     });
   }
-  regeist(){
-     this.$router.push({
-    path: `Register`, 
-  })
+  regeist() {
+    this.$router.push({
+      path: `Register`,
+    })
   }
-  demo(){
+  demo() {
     this.$router.push({
-    path: `Mianview`, 
-  })
+      path: `Mianview`,
+    })
   }
 }
 </script>

src/views/login/Register.vue

@@ -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-05 11:33:44
+ * @LastEditTime: 2022-07-06 15:10:12
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -20,7 +20,7 @@
         <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
 }">请使用机号码进行注册</span></van-col>
       </van-row>
-      <van-form @submit="onSubmit">
+      <van-form>
         <div class="logindiv">
           <span class="sopan">手机号码</span>
           <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号" />
@@ -53,53 +53,70 @@
 
         </div>
         <div style="margin: 16px;">
-          <van-button square block type="info" native-type="submit">注册</van-button>
+          <van-button square block type="info" native-type="submit" @click="registSystem()">注册</van-button>
         </div>
       </van-form>
-        <!-- <van-radio name="1" shape="square" v-model ="radio" @click="returen()">
+      <!-- <van-radio name="1" shape="square" v-model ="radio" @click="returen()">
           <span>本人已阅读<a href="javascpt">《线上金融服务平台注册服务协议》</a></span>
         </van-radio> -->
-        <div>
-          <van-checkbox v-model="checked" shape="square" style="padding:0% 4%;">
-              <span>本人已阅读<a href="javascpt">《线上金融服务平台注册服务协议》</a></span>
-          </van-checkbox>
-        </div>
+      <div>
+        <van-checkbox v-model="checked" shape="square" style="padding:0% 4%;">
+          <span>本人已阅读<a href="javascpt">《线上金融服务平台注册服务协议》</a></span>
+        </van-checkbox>
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Image as VanImage } from 'vant';
-
+import apiService from "@/services/api.service";
+import { Code } from "@/constants/enum/general/code.enum";
+import { RestfulResponse } from "@/model/domain/RestfulResponse";
+import registApi from "@/constants/api/login/regist-mgt.api";
 
 @Component({
   name: "ForgetPassView",
-  [VanImage.name]: VanImage,
 })
 export default class ForgetPassView extends Vue {
   tatleName = "密码重置"
   phone: string = "" //电话
   password: string = ""//密码
   restpassword: string = ""//确认密码
-  imageSrc: string = ""//图形
   sms: string = ""//短信
- // radio: boolean = false
-  radio:string="0"
+  // radio: boolean = false
+  radio: string = "0"
   checked: boolean = false;
-  //获取图形验证码
-  _updatePicCode() {
-    //请求图形验证码
-    this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random();
-    //this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
-  }
-  onSubmit(values: any) {
-    console.log('submit', values);
+  registSystem() {
+    if (this.password === this.restpassword && this.checked) {
+      let param = {
+        phone: this.phone,
+        //短信验证码TODO
+        //phoneVerifyCode: "",
+        //数字渠道
+        method:"3",
+        pwd: this.password
+      }
+      apiService.general(registApi.registSystem, undefined, param, undefined).then((response: RestfulResponse) => {
+        console.log(response);
+        if (response.code == Code.SUCCESS.code) {
+          this.$router.push({
+            name: `Mianview`,
+            params: {
+              data: response.data
+            }
+          })
+        }
+      });
+    }
   }
+
+
+
   created() {
-    this.$nextTick(() => this._updatePicCode())
+    
   }
   returen() {
-    
+
 
   }
 }

src/views/main/Main.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:05:30
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-07 20:21:56
+ * @FilePath: \mcep-h5\src\views\main\MainView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
+    <div class="rarle">
+      <tools-bar :title="tatleName" style="width:100%;height: calc(25vh);">
+      </tools-bar>
+    </div>
+    <div class="roolsolt">
+      <van-row class="roll" background="#ecf9ff" style="background: #ecf9ff;width: 90%;height: 34px;margin: 2% auto; border-radius: 10px;position: absolute; top: 21%;
+    left: 5%;">
+        <van-col span="5" class="titleName"
+          style="height: 34px;margin: 7px auto 0px 8px; border-radius: 12px; color: #a2d2f4;">
+          审批进度
+        </van-col>
+        <van-col span="18" class="notice">
+          <van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff"
+            style="height: 34px; border-radius: 12px;">
+            {{ notice }}
+          </van-notice-bar>
+        </van-col>
+      </van-row>
+    </div>
+
+
+    <div style="background-color: #ffff;height: 18%;">
+      <div class="prudect">
+        <span style="font-size: 18px;font-weight: 600;margin-left: 4%;">推荐产品</span>
+      </div>
+      <div>
+        <!-- <van-tabs v-model="activeName">
+          <van-tab title="综合排序" name="a"></van-tab>
+          <van-tab title="金额" name="b"></van-tab>
+          <van-tab title="期限" name="c"></van-tab>
+          <van-tab title="利率" name="d"></van-tab>
+        </van-tabs> -->
+        <van-dropdown-menu>
+  <van-dropdown-item title="综合排序" ref="item">
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <div style="padding: 5px 16px;">
+      <van-button type="danger" block  >
+        确认
+      </van-button>
+    </div>
+  </van-dropdown-item>
+  <van-dropdown-item title="金额" ref="item">
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <div style="padding: 5px 16px;">
+      <van-button type="danger" block round >
+        确认
+      </van-button>
+    </div>
+  </van-dropdown-item>
+  <van-dropdown-item title="期限" ref="item">
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <div style="padding: 5px 16px;">
+      <van-button type="danger" block round >
+        确认
+      </van-button>
+    </div>
+  </van-dropdown-item>
+  <van-dropdown-item title="利率" ref="item">
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch  size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <div style="padding: 5px 16px;">
+      <van-button type="danger" block round >
+        确认
+      </van-button>
+    </div>
+  </van-dropdown-item>
+</van-dropdown-menu>
+      </div>
+      <scroller-view v-calculate-height >
+         <div v-for="(item, index) in productList" :key="index">
+        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
+          :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
+      </div>
+      </scroller-view>
+      
+    </div>
+  </div>
+
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
+
+@Component({
+  name: "Main",
+})
+export default class Main extends Vue {
+  tatleName = "线上金融服务平台"
+  notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+  productList: ProductData[] = [{
+    productname: "金融消费贷", //产品名称
+    describe: "1年100万",//描述
+    limitrange: "1000~2000",//额度范围
+    interestrate: "19%~20%",//利率
+    loanterm: "89个月",//贷款期限
+  },
+  {
+    productname: "金融消费贷", //产品名称
+    describe: "1年100万三年内还清了",//描述
+    limitrange: "1000~2000",//额度范围
+    interestrate: "19%~20%",//利率
+    loanterm: "89个月",//贷款期限
+  }];
+  activeName: string = "a"
+}
+</script>
+<style scoped lang="scss">
+.roll {
+  background: #ecf9ff;
+}
+
+.titleName {
+  float: inline-end;
+  height: 34px;
+  margin: 7px auto 0px 8px;
+  border-radius: 12px;
+  color: #a2d2f4;
+}
+
+.prudect {
+  line-height: 100%;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+</style>

src/views/main/MainView.vue

@@ -2,54 +2,61 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 17:51:30
+ * @LastEditTime: 2022-07-07 20:43:35
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="d-page d-flex flex-column">
-    <div class="rarle">
-      <tatle-bar :tatle="tatleName" :tatleflag="false"></tatle-bar>
-    </div>
-    <div>
-      <van-tabs v-model="activeName">
-        <van-tab title="标签 1" name="a">内容 1</van-tab>
-        <van-tab title="标签 2" name="b">内容 2</van-tab>
-        <van-tab title="标签 3" name="c">内容 3</van-tab>
-      </van-tabs>
-      <div v-for="(item, index) in productList" :key="index">
-        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
-          :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
-      </div>
-
+  <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
+     <Main v-if="showFlag"></Main>
+     <MyPage  v-if="!showFlag"></MyPage>
+     <div class="boottom">
+      <bottom-bar  @onchangebtn="onchangebtn" ></bottom-bar>
     </div>
   </div>
+
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { ProductData } from '@/model/entity/ProductData'
+import Main from "./Main.vue";
+import MyPage from "../MyView/MyPage.vue";
+
 
 @Component({
   name: "MainView",
+components: {
+    Main,
+    MyPage
+  }
 })
-export default class MainViw extends Vue {
-   tatleName = "线上金融服务平台"
-  productList: ProductData[] = [{
-    productname: "金融消费贷", //产品名称
-    describe: "1年100万",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "199000%~10000000%",//利率
-    loanterm: "89个月",//贷款期限
-  },
-  {
-    productname: "金融消费贷", //产品名称
-    describe: "1年100万",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "199000%~10000000%",//利率
-    loanterm: "89个月",//贷款期限
-  }];
-  activeName: string = "a"
+export default class MainView extends Vue {
+  showFlag :boolean = true;
+  onchangebtn(value:any){
+    //子组件传来的值
+    this.showFlag=value
+  }
 }
 </script>
 <style scoped lang="scss">
+.roll {
+  background: #ecf9ff;
+}
+
+.titleName {
+  float: inline-end;
+  height: 34px;
+  margin: 7px auto 0px 8px;
+  border-radius: 12px;
+  color: #a2d2f4;
+}
+
+.prudect {
+  line-height: 100%;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+.boottom{
+  
+}
 </style>