首页

src/components/common/Picket.vue

+<!--
+ * @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
+ * @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">
+      <van-row>
+        <van-col span="24">{{ 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>
+      </van-row>
+     <van-row>
+        <van-col span="8">额度范围</van-col>
+        <van-col span="8">参考利率</van-col>
+        <van-col span="8">贷款期限</van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Picket",
+})
+export default class Picket extends Vue {
+  @Prop({ default: "" }) productname: string | undefined //产品名称
+  @Prop({ default: "" }) describe: string | undefined //描述
+  @Prop({ default: "" }) limitrange: string | undefined //额度范围
+  @Prop({ default: "" }) interestrate: string | undefined //利率
+  @Prop({ default: "" }) loanterm: string | undefined //贷款期限
+
+}
+</script>
+<style scoped lang="scss">
+.card {
+  background: #ffff;
+}
+</style>

src/components/common/Tatle.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-04 19:20:56
+ * @LastEditTime: 2022-07-05 17:52:47
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -10,7 +10,7 @@
   <!-- <div> -->
     <div  class ="d-tatle">
      <van-row class="el-icon-arrow-down">
-       <van-col  span="9"><van-icon name="arrow-left" /></van-col>
+       <van-col  span="9" v-if="tatleflag"><van-icon name="arrow-left" @click="retyen()" /></van-col>
        <van-col  span="15">{{tatle}}</van-col>
    </van-row> 
   </div>
@@ -26,6 +26,10 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 })
 export default class Tatle extends Vue {
     @Prop({ default: "" }) tatle: string | undefined
+    @Prop({ default: true}) tatleflag : boolean|undefined
+    retyen(){
+      this.$router.back();
+    }
 }
 </script>
 <style scoped lang="scss">

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

+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 loginApi = {
+  updatePicCode: {
+    url: prefix + "/kaptcha",
+    method: MethodType.GET.code,
+    header: HeaderType.AUTH.code,
+  },
+};
+
+export default loginApi;

src/model/entity/ProductData.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 16:57:19
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-05 16:59:56
+ * @FilePath: \mcep-h5\src\model\entity\ProductData.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+export class ProductData {
+   productname: string | undefined //产品名称
+   describe: string | undefined //描述
+   limitrange: string | undefined //额度范围
+   interestrate: string | undefined //利率
+   loanterm: string | undefined //贷款期限
+  constructor(
+    options: {
+      productname?: string;
+      describe?: string;
+      limitrange?: string;
+      interestrate?: string;
+      loanterm?: string;
+    } = {}
+  ) {
+    this.productname = options.productname || "";
+    this.describe = options.describe || "";
+    this.limitrange = options.limitrange || "";
+    this.interestrate = options.interestrate || "";
+    this.loanterm = options.loanterm || "";
+  }
+}

src/router/index.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 15:41:06
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-05 14:04:06
+ * @FilePath: \mcep-h5\src\router\index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from "vue";
 import VueRouter, { Route, RouteConfig } from "vue-router";
 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 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 loginRoutes from "./login.mgt.routing";
+
 Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
@@ -19,10 +29,11 @@ const routes: Array<RouteConfig> = [
     component: () => import(/* webpackChunkName: "login" */ "@/views/authentication/LoginView.vue"),
     meta: { keepAlive: true, requiresAuth: true },
   },
-  ...mainRoutes,
-  ...customerRoutes,
-  ...marketingRoutes,
-  ...workbenchRoutes,
+  // ...mainRoutes,
+  // ...customerRoutes,
+  // ...marketingRoutes,
+  // ...workbenchRoutes,
+  ...loginRoutes,
 ];
 
 const router = new VueRouter({

src/router/login.mgt.routing.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 10:08:57
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-05 17:10:29
+ * @FilePath: \mcep-h5\src\router\login.mgt.routing.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { propsConvert } from "@/services/props-convert";
+
+// const prefix = "/login";
+
+const loginRoutes = [
+  {
+    path: `/ForgetPass`,
+    name: 'ForgetPass',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/login/ForgetPassView.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "忘记密码" },
+  },
+  {
+    path: `/Register`,
+    name: 'Register',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/login/Register.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "忘记密码" },
+  },
+  {
+    path: `/Mianview`,
+    name: 'Mianview',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/main/MainView.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "忘记密码" },
+  }
+]
+export default loginRoutes;

src/services/api.service.ts

@@ -166,7 +166,8 @@ class ApiService {
     return requestConfigBase;
   }
   get(path: string, query: Query | undefined, requestConfig: AxiosRequestConfig): any {
-    // path = query != null ? this.urlQueryConvert(path, query) : path;
+    debugger
+     path = query != null || query != undefined ? this.urlQueryConvert(path, query) : path;
     return Vue.axios.get(`${path}`, requestConfig).then(this.createBusCodeHandler(query)).catch(this.createErrorHandler());
   }
 
@@ -207,6 +208,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();
@@ -263,6 +265,7 @@ class ApiService {
    * 服务返回统一解密处理
    */
   createBusCodeHandler(params?: any) {
+    debugger
     return function(response: any) {
       if (response.status === 200) {
         let data = response.data;

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-04 17:42:48
+ * @LastEditTime: 2022-07-05 16:50:04
  * @FilePath: \mcep-h5\src\services\component-vue.service.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,8 +21,10 @@ import BaseList from "@/components/general/BaseList.vue";
 import AnchorNav from "@/components/general/AnchorNav.vue";
 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"
 
+
 declare module "vue/types/vue" {
   interface Vue {
     $message: any;
@@ -87,6 +89,7 @@ class ComponentVueService {
     Vue.component("base-list", BaseList);
     Vue.component("anchor-nav", AnchorNav);
     Vue.component("tatle-bar", Tatle);
+    Vue.component("picket-bar", picket);
   }
 }
 const componentService = new ComponentVueService();

src/stores/index.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 15:41:06
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-05 15:01:38
+ * @FilePath: \mcep-h5\src\stores\index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 export * from "./token.store";
 export * from "./user.store";
-import company from '@/stores/modules/company.module';
-import postloan from '@/stores/modules/postloan.module';
-import faceSign from '@/stores/modules/faceSign.module';
-import customer from '@/stores/modules/customer.module';
+import dict from "@/services/dict.service";
 import Vue from 'vue';
 import Vuex from 'vuex';
-import dict from '@/services/dict.service';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
-    company,
-    postloan,
-    faceSign,
-    customer
+   
   }
 });
 

src/views/authentication/LoginView.vue

@@ -2,66 +2,51 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-04 20:14:28
+ * @LastEditTime: 2022-07-05 17:11:01
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="loginform">
-    <div class="rarle"><tatle-bar :tatle="tatleName"></tatle-bar></div>
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
 
-<div class="login">
+    <div class="login">
       <van-row class="el-icon-arrow-down" style="padding: 10% 0%;">
-       <van-col  span="24"><p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p></van-col>
+        <van-col span="24">
+          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p>
+        </van-col>
         <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">
         <div class="logindiv">
           <span class="sopan">手机号</span>
-  <van-field
-    v-model="phone"
-    label="+86   |"
-    :border="true"
-    placeholder="请输入手机号" 
-  />
+          <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号" />
           <van-divider />
         </div>
 
-<div  class="logindiv">
+        <div class="logindiv">
           <span class="sopan">密码</span>
-  <van-field
-    v-model="password"
-    type="password"
-     center
-  clearable
-  
-    placeholder="请填写密码"
-  />
-    <van-divider />
-</div> 
+          <van-field v-model="password" type="password" center clearable placeholder="请填写密码" />
+          <!-- <van-divider /> -->
+        </div>
 
         <span class="sopan">验证码</span>
-  <van-field
-  center
-  clearable
-  placeholder="请输入验证码"
-/>
+        <van-field center clearable placeholder="请输入验证码" />
         <template #right-icon>
-    <van-image :src="imageSrc" width="80" height="40" @click="_updatePicCode" />
+          <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="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>
 
@@ -70,55 +55,96 @@
         <div style="margin: 16px;">
           <van-button square block type="info" native-type="submit">登录</van-button>
         </div>
-  <!-- <van-row>
-  <van-col  span="12">忘记密码</van-col>
-  <van-col  span="12">用户注册</van-col>
-</van-row> -->
-</van-form>
+      </van-form>
+      <!-- <div>
+        
+        <van-row type="flex" justify="center">
+          <van-col span="12"><a class="font-size-12-dhc"> 忘记密码</a></van-col>
+          <van-col span="12"><a class="font-size-12-dhc"> 用户注册</a></van-col>
+        </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>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import {Component, Vue} from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { Image as VanImage } from 'vant';
+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";
 
 
-  @Component({
+@Component({
   name: "LoginView",
   [VanImage.name]: VanImage,
-  })
-  export default class LoginView extends Vue {
-  tatleName="用户登录"
-  phone:string="" //电话
-  password:string=""//密码
-   imageSrc:string =""//图形
-   sms:string =""//短信
+})
+export default class LoginView extends Vue {
+  tatleName = "用户登录"
+  phone: string = "" //电话
+  password: string = ""//密码
+  imageSrc: string = ""//图形
+  sms: string = ""//短信
   //获取图形验证码
   _updatePicCode() {
     //请求图形验证码
-    this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random();
-      //this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
+    apiService.general(loginApi.updatePicCode,undefined).then((response: RestfulResponse) => {
+      console.log(response);
+      
+      if (response.code == Code.SUCCESS.code) {
+        this.imageSrc = 'data:image/png;base64';
+        return response.data;
+
       }
-    onSubmit(values:any) {
+    });
+  }
+  onSubmit(values: any) {
     console.log('submit', values);
   }
-created() {
-  this.$nextTick(() => this._updatePicCode())
-}
+  created() {
+     this._updatePicCode()
+  }
+  //忘记密码
+  forgetspass(){
+     this.$router.push({
+    name: `ForgetPass`,
+     params: {
+        phone: this.phone
       }
+    });
+  }
+  regeist(){
+     this.$router.push({
+    path: `Register`, 
+  })
+  }
+  demo(){
+    this.$router.push({
+    path: `Mianview`, 
+  })
+  }
+}
 </script>
 <style lang="scss" scoped>
-.loginform{
+.loginform {
   width: 100%;
   height: 100%;
 }
-.logindiv{
+
+.logindiv {
   line-height: 20px;
 }
-.van-button{
+
+.van-button {
   border-radius: 6px;
 }
-.polog{
+
+.polog {
   margin: 0px;
   text-rendering: optimizeLegibility;
   font-feature-settings: "kern" 1;
@@ -130,17 +156,22 @@ created() {
 
 
 
-.van-col--15{
+.van-col--15 {
   margin-top: 2%;
 }
-.van-col--24{
+
+.van-col--24 {
   margin-left: 6%;
 }
-.sopan{
+
+.forget {}
+
+.sopan {
 
   margin-top: 5px;
   margin-left: 6%;
 }
+
 // .login{
 //   margin-top: 20%;
 // }

src/views/authentication/MarketStatisticsDetail.vue

-<template>
-  <div class="app-sty">
-    <title-bar :title="title" @click-right="rightClick">
-      <van-icon slot="left" name="cross" size="24" />
-      <div slot="right" style="font-size: 18px">{{ rightText }}</div>
-    </title-bar>
-    <div class="container-sty">
-      <div class="box-sty">
-        <div class="containerBox-sty containerLeft-sty">
-          <div class="leftTop-sty">
-            <div class="custName-sty">某某某支行</div>
-            <div class="leftTopBottm-sty">
-              <div>
-                <div class="dataTitle-sty">分支行当月上门营销户数</div>
-                <div class="data-sty">
-                  <div>4156</div>
-                  <div v-if="isFrequency">&nbsp;户</div>
-                  <div v-if="!isFrequency">&nbsp;次</div>
-                </div>
-              </div>
-              <div class="splitLine-sty"></div>
-              <div>
-                <div class="dataTitle-sty">分支行排名</div>
-                <div class="data-sty">
-                  <div>4156</div>
-                  <div>&nbsp;/ {{ total }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div style="width: 90%;height: 60%">
-            <div class="leftMiddle-sty">{{ trendText }}</div>
-            <div id="market-household-trend" class="leftBottom-sty"></div>
-          </div>
-        </div>
-        <div class="containerBox-sty containerRight-sty">
-          <van-tabs
-            :ellipsis="false"
-            animated
-            color="#FF574C"
-            type="card"
-            title-active-color="#FFFFFF"
-            class="d-tabs d-tabs-container tabs-sty"
-            @click="checkMod"
-            line-width="100px"
-            v-model="active"
-          >
-            <van-tab v-for="(item1, index1) in tabs" :key="index1" :title="item1.name">
-              <div class="chart-sty">
-                <div class="rank-sty">
-                  <div>{{ item1.name }}</div>
-                  <div v-if="index1 == 0">
-                    <div>当月营销总户数： </div>
-                    <div>{{ marketTotalNum }} {{ danwei }}</div>
-                  </div>
-                </div>
-                <div v-for="(item, index) in topThree" :key="index" class="data">
-                  <svg v-if="item.marketNumbersRank == 1" class="icon imgCls" aria-hidden="true">
-                    <use xlink:href="#icon-guanjunxpx" />
-                  </svg>
-                  <svg v-else-if="item.marketNumbersRank == 2" class="icon imgCls" aria-hidden="true">
-                    <use xlink:href="#icon-yajunxpx" />
-                  </svg>
-                  <svg v-else-if="item.marketNumbersRank == 3" class="icon imgCls" aria-hidden="true">
-                    <use xlink:href="#icon-jijunxpx" />
-                  </svg>
-                  <div style="width: 30%;color: #999999;font-size: 14px;margin-left: 10px">
-                    <div>{{ item.exeUserName }}</div>
-                    <div>{{ item.orgName }}</div>
-                  </div>
-                  <van-progress
-                    :percentage="item.percentage"
-                    stroke-width="8"
-                    pivot-color="#7232dd"
-                    track-color="white"
-                    color="#FD5065"
-                    style="width: 50%"
-                  />
-                  <div style="margin-left: 10px">{{ item.marketNumbers }}</div>
-                </div>
-              </div>
-            </van-tab>
-          </van-tabs>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { NativeUI } from "@/public/ts/NativeUI";
-import IF from "@/public/factory/InterFaceFactory";
-import { Progress } from 'vant';
-import * as echarts from 'echarts';
-
-Vue.use(Progress);
-
-@Component({
-  name: "MarketStatisticsDetail"
-})
-export default class MarketStatisticsDetail extends Vue {
-  title = '营销户数统计';
-  rightText = '营销次数统计';
-  rankText = '全行客户经理当月排名';
-  trendText = '营销户数趋势';
-  danwei = '户';
-  total = 100;
-  marketTotalNum = 4245;
-  household: any;
-  frequency: any;
-  flag = 1;
-  active = 0;
-  tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销户数排名' }];
-  trendData = [
-    {
-      datas: [
-        {
-          date: '1',
-          frequency: 70
-        },{
-          date: '2',
-          frequency: 100
-        },{
-          date: '3',
-          frequency: 40
-        },{
-          date: '4',
-          frequency: 130
-        },
-      ]
-    }
-  ];
-  topThree = [
-    {
-      marketNumbersRank: 1,
-      exeUserName: '李艳明',
-      orgName: '某某分支行',
-      percentage: 100,
-      marketNumbers: '68'
-    },{
-      marketNumbersRank: 2,
-      exeUserName: '张三',
-      orgName: '某某分支行',
-      percentage: 45,
-      marketNumbers: '34'
-    },{
-      marketNumbersRank: 3,
-      exeUserName: '赵四',
-      orgName: '某某分支行',
-      percentage: 80,
-      marketNumbers: '52'
-    }
-  ];
-  isFrequency = true;
-
-  created() {
-    this.$nextTick(() => {
-      this.initEcharts();
-    });
-  }
-  /**
-   *@Description 初始化趋势图
-   *@Author XWH
-   *@Date 2022/3/3 15:08
-   */
-  initEcharts() {
-    this.$nextTick(() => {
-      if(this.flag == 1){
-
-      }
-      this.household = echarts.init(document.getElementById('market-household-trend') as HTMLDivElement);
-      this.initHyChart(this.household);
-    });
-  }
-  initHyChart(myChart: any) {
-    console.log('初始化', myChart);
-    const _this = this;
-    const option = {
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        name: '日',
-        axisTick: {
-          show: false
-        },
-        data: _this.trendData[0].datas.map(f => f.date),
-        axisLabel: {
-          interval: 0
-        }
-      },
-      yAxis: {
-        type: 'value',
-        name: '次'
-      },
-      series: [
-        {
-          data: _this.trendData[0].datas.map(f => f.frequency),
-          type: 'line'
-          // areaStyle: {
-          //   color: '#ff0',
-          //   opacity: 0.5
-          // }
-        }
-      ],
-      dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 50
-        },
-        {
-          start: 0,
-          end: 50
-        }
-      ]
-    };
-    myChart.setOption(option);
-  }
-  onClick() {
-
-  }
-  checkMod() {
-
-  }
-  rightClick() {
-    if(!this.isFrequency){
-      this.trendText = '营销户数趋势';
-      this.tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销户数排名' }];
-      this.danwei = '户';
-    }else{
-      this.trendText = '营销次数趋势';
-      this.tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销次数排名' }];
-      this.danwei = '次';
-    }
-    console.log("右边按钮",this.isFrequency);
-    const oldTitle = this.title;
-    this.title = this.rightText;
-    this.rightText = oldTitle;
-    this.isFrequency = !this.isFrequency;
-  }
-}
-</script>
-<style lang="scss" scoped>
-.app-sty{
-  background-color: #F2EFF0;
-  width: 100%;
-  height: 100%;
-}
-.container-sty{
-  width: 100%;
-  height: 93%;
-  padding: 10px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.box-sty{
-  width: 99%;
-  height: 99%;
-  background-color: white;
-  border-radius: 20px;
-  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
-  display: flex;
-}
-.containerBox-sty{
-  display: flex;
-  flex-direction: column;
-  border-radius: 20px;
-  width: 50%;
-  height: 100%;
-}
-.containerLeft-sty{
-  justify-content: space-around;
-  padding-left: 20px;
-}
-.containerRight-sty{
-  padding: 20px 0 0 0;
-}
-.leftTop-sty{
-  width: 85%;
-  height: 20%;
-  border-radius: 20px;
-  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
-  .leftTopBottm-sty{
-    width: 85%;
-    height: 60%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
-}
-.leftMiddle-sty{
-  font-size: 20px;
-}
-.leftBottom-sty{
-  width: 100%;
-  height: 100%;
-}
-.splitLine-sty{
-  width: 1px;
-  height: 60%;
-  background-color: #FA6419;
-}
-.data-sty{
-  display: flex;
-  div:nth-child(1){
-    font-size: 18px;
-    font-weight: bold;
-  };
-  div:nth-child(2){
-    font-size: 14px;
-    color: #999999;
-    align-self: flex-end;
-  };
-}
-.dataTitle-sty{
-  font-size: 18px;
-  color: #999999;
-}
-.custName-sty{
-  width: 100px;
-  text-align: center;
-  color: white;
-  background-color: #00A3FF;
-  border-radius: 10px 0 10px 0;
-  line-height: 40px;
-}
-.tabs-sty {
-  border-radius: 20px 20px 0 0;
-  padding: 0 10px;
-}
-::v-deep .van-progress__pivot {
-  display: none;
-}
-.imgCls {
-  width: 30px;
-  height: 30px;
-}
-.data {
-  width: 100%;
-  margin-top: 5px;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  /*justify-content: space-between;*/
-}
-.chart-sty{
-  padding: 20px;
-}
-.rank-sty{
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  div:nth-child(1){
-    font-size: 20px;
-  }
-  div:nth-child(2){
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    div:nth-child(1){
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-}
-</style>

src/views/login/ForgetPassView.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 15:41:06
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-05 10:42:36
+ * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="loginform">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+
+    <div class="login">
+      <van-row class="el-icon-arrow-down" style="padding: 10% 0%;">
+        <van-col span="24">
+          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">密码重置</span> </p>
+        </van-col>
+        <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">
+        <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="newpassword" type="password" center clearable placeholder="请填写新密码" />
+          <!-- <van-divider /> -->
+        </div>
+       <div class="logindiv">
+          <span class="sopan">新密码</span>
+          <van-field v-model="restpassword" type="password" center clearable placeholder="请确认新密码" />
+          <!-- <van-divider /> -->
+        </div>
+        <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>
+
+
+        </div>
+        <div style="margin: 16px;">
+          <van-button square block type="info" native-type="submit">登录</van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { Image as VanImage } from 'vant';
+
+
+@Component({
+  name: "ForgetPassView",
+  [VanImage.name]: VanImage,
+})
+export default class ForgetPassView extends Vue {
+  tatleName = "密码重置"
+  phone: string = "" //电话
+  newpassword: string = ""//密码
+  restpassword:string = ""//密码
+  imageSrc: string = ""//图形
+  sms: string = ""//短信
+  //获取图形验证码
+  _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);
+  }
+  created() {
+    this.$nextTick(() => this._updatePicCode())
+  }
+}
+</script>
+<style lang="scss" scoped>
+.loginform {
+  width: 100%;
+  height: 100%;
+}
+
+.logindiv {
+  line-height: 20px;
+}
+
+.van-button {
+  border-radius: 6px;
+}
+
+.polog {
+  margin: 0px;
+  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--15 {
+  margin-top: 2%;
+}
+
+.van-col--24 {
+  margin-left: 6%;
+}
+
+.forget {}
+
+.sopan {
+
+  margin-top: 5px;
+  margin-left: 6%;
+}
+
+// .login{
+//   margin-top: 20%;
+// }
+</style>

src/views/login/Register.vue

+<!--
+ * @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
+ * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="loginform">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+
+    <div class="login">
+      <van-row class="el-icon-arrow-down" style="padding: 10% 0%;">
+        <van-col span="24">
+          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">用户注册</span> </p>
+        </van-col>
+        <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">
+        <div class="logindiv">
+          <span class="sopan">手机号码</span>
+          <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号" />
+          <van-divider />
+        </div>
+        <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>
+
+          <div class="logindiv">
+            <span class="sopan">设置密码</span>
+            <van-field v-model="password" type="password" center clearable placeholder="请填写新密码" />
+            <!-- <van-divider /> -->
+          </div>
+          <div class="logindiv">
+            <span class="sopan">确认密码</span>
+            <van-field v-model="restpassword" type="password" center clearable placeholder="请确认新密码" />
+            <!-- <van-divider /> -->
+          </div>
+
+
+
+        </div>
+        <div style="margin: 16px;">
+          <van-button square block type="info" native-type="submit">注册</van-button>
+        </div>
+      </van-form>
+        <!-- <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>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { Image as VanImage } from 'vant';
+
+
+@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"
+  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);
+  }
+  created() {
+    this.$nextTick(() => this._updatePicCode())
+  }
+  returen() {
+    
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.loginform {
+  width: 100%;
+  height: 100%;
+}
+
+.logindiv {
+  line-height: 20px;
+}
+
+.van-button {
+  border-radius: 6px;
+}
+
+.polog {
+  margin: 0px;
+  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--15 {
+  margin-top: 2%;
+}
+
+.van-col--24 {
+  margin-left: 6%;
+}
+
+.forget {}
+
+.sopan {
+
+  margin-top: 5px;
+  margin-left: 6%;
+}
+
+// .login{
+//   margin-top: 20%;
+// }
+</style>

src/views/main/MainView.vue

+<!--
+ * @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
+ * @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">
-    <title-bar :title="title" @clickLeft="onClick">
-      <van-icon slot="left" name="cross" size="24" />
-    </title-bar>
-    <!--    <title-bar @clickLeft="onClick">-->
-    <!--      <div class="d-bank-logo" slot="left"></div>-->
-    <!--    </title-bar>-->
-    <div class="d-main-body d-flex flex-row">
-      <div class="d-left-nav">
-        <a class="header d-flex flex-column" @click="onHeaderClick">
-          <div style="border-radius: 30px">
-            <svg class="icon" style="width: 50px;height: 50px" aria-hidden="true">
-              <use xlink:href="#icon-wode24x24"></use>
-            </svg>
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName" :tatleflag="false"></tatle-bar>
     </div>
-          <span>{{ userName }}</span>
-        </a>
-        <a v-for="item in menuList" :key="item.name" class="d-nav-item" :class="{ selected: selectPath == item.path }"
-           @click="onNavItemClick(item)">
-          <div class="d-nav-item_inner">
-            <div class="d-nav-item_icon">
-              <svg style="width: 40px;height: 40px" v-if="selectPath != item.path" class="icon svg-icon" aria-hidden="true">
-                <use :xlink:href="item.iconName+'xian'" />
-              </svg>
-              <svg style="width: 40px;height: 40px" v-else class="icon svg-icon" aria-hidden="true">
-                <use :xlink:href="item.iconName+'mian'" />
-              </svg>
-            </div>
-            <div class="d-nav-item_text">{{ item.name }}</div>
-          </div>
-        </a>
-      </div>
-      <div class="d-right-content flex-1-dhc">
-        <transition :name="animateName">
-          <router-view class="router-container"> </router-view>
-        </transition>
+    <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>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import routerService from "@/services/router.service";
-import { NativeUI } from "@/public/ts/NativeUI";
-import IF from "@/public/factory/InterFaceFactory";
-import systemApi from "@/constants/api/ms-system/system.api";
-import Public from "@/public/ts/Public";
-import { MENU, WORKBENCH } from "@/constants/enum/menu.enum";
+import { Component, Vue } from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
 
 @Component({
-  name: "MainView"
+  name: "MainView",
 })
-export default class MainView extends Vue {
-  animateName = ""; // 路由动画名称
-  pathMap: any = {}; // 存储路由对象
-  selectPath = "/main/workbench";
-  title: string = "工作台"; //标题名
-  userName: any = "";
-  // 功能菜单列表
-  menuList: any = [
-    // { title: "工作台", icon: "", path: "/main/workbench" },
-    // { title: "营销管理", icon: "", path: "/ComMarketingPool" },
-    // { title: "对公客户管理", icon: "", path: "/main/CustomerMgtView" },
-    // { title: "个人客户管理", icon: "", path: "/main/PersonalMgtView" },
-  ];
-
-  activated() {
-    this.selectPath = this.$route.path;
-    this.userName = sessionStorage.getItem("userName");
-  }
-
-  mounted() {
-    this.selectPath = this.$route.path;
-    this.userName = sessionStorage.getItem("userName");
-    this.menuList = Public.getMenuBySuperID(MENU.FIRST_VIEW.code, WORKBENCH.FIRST_VIEW.name);
-  }
-
-  onClick() {
-    // this.$router.go(-1);
-    this.$router.push({
-        name: "TYMHView"
-      }
-    );
-  }
-
-  @Watch("$route")
-  onRouterChanged(to: any, from: any) {
-    if (from.path === "/") {
-      return;
-    }
-    // const anim = routerService.animateName(to, from, this);
-    // this.animateName = `slide-${anim}`;
-    this.animateName = `slide-left`;
-  }
-
-  /**
-   * 点击头像
-   */
-  onHeaderClick() {
-    this.$router.push({
-      path: "/main/self-stats",
-    });
-  }
-
-  /**
-   * 点击左侧菜单
-   * @param item
-   */
-  onNavItemClick(item: any) {
-    console.log(item.iconName);
-    if (this.selectPath == item.path) return;
-    this.selectPath = item.path;
-    this.title = item.name;
-    this.$router.push({
-      path: item.path,
-    });
-  }
+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"
 }
 </script>
-<style lang="scss">
-.d-main-body {
-  height: calc(100vh - 60px);
-  overflow: hidden;
-}
-
-.d-left-nav {
-  width: 100px;
-  height: 100%;
-  text-align: center;
-  background-color: #ffffff;
-  border-right: 1px solid #e1e2e3;
-
-  .header {
-    margin: 20px 0;
-
-    div {
-      width: 48px;
-      height: 48px;
-      border-radius: 48px;
-      //border: 1px solid red;
-      margin: 10px auto;
-    }
-  }
-
-  .d-nav-item {
-    display: flex;
-    width: 85px;
-    height: 72px;
-    background: #ffffff;
-    border: 1px solid #e1e2e3;
-    border-radius: 8px;
-    margin: 0 auto 16px auto;
-
-    &_inner {
-      margin: auto;
-    }
-
-    &_text {
-      color: #999999;
-      font-size: 14px;
-    }
-
-    &:active {
-      opacity: 0.6;
-    }
-
-    //&.selected {
-    //  background: linear-gradient(270deg, rgba(229, 0, 18, 1) 1%, rgba(243, 45, 64, 1) 50%, rgba(244, 49, 68, 1) 55%, rgba(255, 87, 108, 1) 98%);
-    //}
-    //&.selected * {
-    //  color: #ffffff;
-    //}
-  }
-}
-
-.d-right-content {
-  position: relative;
-}
+<style scoped lang="scss">
 </style>

src/views/main/PersonalStatsView.vue

-<template>
-  <div class="d-page d-flex flex-column">
-    <title-bar title="个人业务汇总" @clickLeft="onClick">
-      <van-icon slot="left" name="cross" size="24" />
-    </title-bar>
-    <van-button @click="test(0)">拍照</van-button>
-    <van-button @click="test(1)">录像</van-button>
-    <van-button @click="test(2)">录音</van-button>
-    <van-button @click="test(3)">定位</van-button>
-    <van-button @click="test(4)">扫码</van-button>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import TitleBar from "@/components/general/TitleBar.vue";
-import { MediaFile } from "@/model/entity/MediaFile";
-import mediaService from "@/services/media.service";
-
-@Component({
-  name: "PersonalStatsView",
-  components: { TitleBar },
-})
-export default class PersonalStatsView extends Vue {
-  pageTitle = ""; // 页面标题
-
-  onClick() {
-    this.$router.go(-1);
-  }
-  mounted() {
-    this.pageTitle = this.$route.meta?.name;
-  }
-  test(index: number) {
-    const data = new MediaFile();
-    data.objId = "1111";
-    data.userId = "000000";
-    data.address = "定位信息";
-    data.userName = "拍摄人";
-    if (index == 0) {
-      this.$native.capturePhoto(data).then((data) => {
-        console.log(JSON.stringify(data));
-      });
-    } else if (index == 2) {
-      this.$native.captureRecord(data).then(() => {
-        mediaService.selectByObjId("1111").then((data: any) => {
-          alert(JSON.stringify(data));
-        });
-      });
-    } else if (index == 1) {
-      this.$native.captureVideo(data).then(() => {
-        mediaService.selectByObjId("1111").then((data: any) => {
-          alert(JSON.stringify(data));
-        });
-      });
-    } else if (index == 3) {
-      this.$native
-        .getCurrentPosition()
-        .then((res) => {
-          alert(JSON.stringify(res));
-        })
-        .catch((e) => {
-          alert(e);
-        });
-    } else {
-      this.$native.qrScan().then((res) => {
-        alert(res);
-      });
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss"></style>