Skip to content

M
mcep-h5
提交 89ceb47e 编写于 作者: jiangzaicheng's avatar jiangzaicheng
浏览文件
操作

首页

上级 0a5a0cd5
显示空白字符变更
内嵌 并排
正在显示 包含 653 行增加 和 2469 行删除
src/components/common/Picket.vue 0 → 100644
浏览文件 @ 89ceb47e
<!--
* @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
浏览文件 @ 89ceb47e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 16:24:00 * @Date: 2022-07-04 16:24:00
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com * @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 * @FilePath: \mcep-h5\src\components\common\Tatle.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<!-- <div> --> <!-- <div> -->
<div class ="d-tatle"> <div class ="d-tatle">
<van-row class="el-icon-arrow-down"> <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-col span="15">{{tatle}}</van-col>
</van-row> </van-row>
</div> </div>
...@@ -26,6 +26,10 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator"; ...@@ -26,6 +26,10 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator";
}) })
export default class Tatle extends Vue { export default class Tatle extends Vue {
@Prop({ default: "" }) tatle: string | undefined @Prop({ default: "" }) tatle: string | undefined
@Prop({ default: true}) tatleflag : boolean|undefined
retyen(){
this.$router.back();
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/constants/api/login/login-mgt.api.ts 0 → 100644
浏览文件 @ 89ceb47e
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 0 → 100644
浏览文件 @ 89ceb47e
/*
* @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
浏览文件 @ 89ceb47e
/*
* @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 Vue from "vue";
import VueRouter, { Route, RouteConfig } from "vue-router"; import VueRouter, { Route, RouteConfig } from "vue-router";
import { Code } from "@/constants/enum/general/code.enum"; import { Code } from "@/constants/enum/general/code.enum";
import mainRoutes from "@/router/main.routing"; // import mainRoutes from "@/router/main.routing";
import customerRoutes from "@/router/customer.mgt.routing"; // import customerRoutes from "@/router/customer.mgt.routing";
import marketingRoutes from "@/router/marketing.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";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes: Array<RouteConfig> = [ const routes: Array<RouteConfig> = [
...@@ -19,10 +29,11 @@ const routes: Array<RouteConfig> = [ ...@@ -19,10 +29,11 @@ const routes: Array<RouteConfig> = [
component: () => import(/* webpackChunkName: "login" */ "@/views/authentication/LoginView.vue"), component: () => import(/* webpackChunkName: "login" */ "@/views/authentication/LoginView.vue"),
meta: { keepAlive: true, requiresAuth: true }, meta: { keepAlive: true, requiresAuth: true },
}, },
...mainRoutes, // ...mainRoutes,
...customerRoutes, // ...customerRoutes,
...marketingRoutes, // ...marketingRoutes,
...workbenchRoutes, // ...workbenchRoutes,
...loginRoutes,
]; ];
const router = new VueRouter({ const router = new VueRouter({
......
src/router/login.mgt.routing.ts 0 → 100644
浏览文件 @ 89ceb47e
/*
* @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
浏览文件 @ 89ceb47e
...@@ -166,7 +166,8 @@ class ApiService { ...@@ -166,7 +166,8 @@ class ApiService {
return requestConfigBase; return requestConfigBase;
} }
get(path: string, query: Query | undefined, requestConfig: AxiosRequestConfig): any { 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()); return Vue.axios.get(`${path}`, requestConfig).then(this.createBusCodeHandler(query)).catch(this.createErrorHandler());
} }
...@@ -207,6 +208,7 @@ class ApiService { ...@@ -207,6 +208,7 @@ class ApiService {
general(api: any, query?: Query | undefined, params?: any | undefined, requestConfig?: AxiosRequestConfig | any): any { general(api: any, query?: Query | undefined, params?: any | undefined, requestConfig?: AxiosRequestConfig | any): any {
if (!!api.url && !!api.method) { if (!!api.url && !!api.method) {
if (requestConfig == null) { if (requestConfig == null) {
debugger
switch (api.header) { switch (api.header) {
case HeaderType.BASE.code: case HeaderType.BASE.code:
requestConfig = this.createBasicHeaders(); requestConfig = this.createBasicHeaders();
...@@ -263,6 +265,7 @@ class ApiService { ...@@ -263,6 +265,7 @@ class ApiService {
* 服务返回统一解密处理 * 服务返回统一解密处理
*/ */
createBusCodeHandler(params?: any) { createBusCodeHandler(params?: any) {
debugger
return function(response: any) { return function(response: any) {
if (response.status === 200) { if (response.status === 200) {
let data = response.data; let data = response.data;
......
src/services/component-vue.service.ts
浏览文件 @ 89ceb47e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06 * @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com * @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 * @FilePath: \mcep-h5\src\services\component-vue.service.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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"; ...@@ -21,8 +21,10 @@ import BaseList from "@/components/general/BaseList.vue";
import AnchorNav from "@/components/general/AnchorNav.vue"; import AnchorNav from "@/components/general/AnchorNav.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Tatle from "@/components/common/Tatle.vue"; 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 ant from "ant-design-vue/es/locale/zh_CN"
declare module "vue/types/vue" { declare module "vue/types/vue" {
interface Vue { interface Vue {
$message: any; $message: any;
...@@ -87,6 +89,7 @@ class ComponentVueService { ...@@ -87,6 +89,7 @@ class ComponentVueService {
Vue.component("base-list", BaseList); Vue.component("base-list", BaseList);
Vue.component("anchor-nav", AnchorNav); Vue.component("anchor-nav", AnchorNav);
Vue.component("tatle-bar", Tatle); Vue.component("tatle-bar", Tatle);
Vue.component("picket-bar", picket);
} }
} }
const componentService = new ComponentVueService(); const componentService = new ComponentVueService();
......
src/stores/index.ts
浏览文件 @ 89ceb47e
/*
* @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 "./token.store";
export * from "./user.store"; export * from "./user.store";
import company from '@/stores/modules/company.module'; import dict from "@/services/dict.service";
import postloan from '@/stores/modules/postloan.module';
import faceSign from '@/stores/modules/faceSign.module';
import customer from '@/stores/modules/customer.module';
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import dict from '@/services/dict.service';
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
company,
postloan,
faceSign,
customer
} }
}); });
......
src/views/authentication/LoginView.vue
浏览文件 @ 89ceb47e
...@@ -2,66 +2,51 @@ ...@@ -2,66 +2,51 @@
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06 * @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com * @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 * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
<template> <template>
<div class="loginform"> <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-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'; <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用手机号登录</span></van-col> }">请使用手机号登录</span></van-col>
</van-row> </van-row>
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<div class="logindiv"> <div class="logindiv">
<span class="sopan">手机号</span> <span class="sopan">手机号</span>
<van-field <van-field v-model="phone" label="+86 |" :border="true" placeholder="请输入手机号" />
v-model="phone"
label="+86 |"
:border="true"
placeholder="请输入手机号"
/>
<van-divider /> <van-divider />
</div> </div>
<div class="logindiv"> <div class="logindiv">
<span class="sopan">密码</span> <span class="sopan">密码</span>
<van-field <van-field v-model="password" type="password" center clearable placeholder="请填写密码" />
v-model="password" <!-- <van-divider /> -->
type="password" </div>
center
clearable
placeholder="请填写密码"
/>
<van-divider />
</div>
<span class="sopan">验证码</span> <span class="sopan">验证码</span>
<van-field <van-field center clearable placeholder="请输入验证码" />
center
clearable
placeholder="请输入验证码"
/>
<template #right-icon> <template #right-icon>
<van-image :src="imageSrc" width="80" height="40" @click="_updatePicCode" /> <van-image :src="imageSrc" width="80" height="40" />
</template> </template>
<span class="sopan">短信验证码</span> <span class="sopan">短信验证码</span>
<div> <div>
<van-row class="el-icon-arrow-down"> <van-row class="el-icon-arrow-down">
<van-col span="16"><van-field <van-col span="16">
v-model="sms" <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
center <!-- <van-divider /> -->
clearable </van-field>
placeholder="请输入短信验证码" </van-col>
>
<van-divider />
</van-field></van-col>
<van-col span="8"><a href="javascript">获取短信验证码</a></van-col> <van-col span="8"><a href="javascript">获取短信验证码</a></van-col>
</van-row> </van-row>
...@@ -70,55 +55,96 @@ ...@@ -70,55 +55,96 @@
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button square block type="info" native-type="submit">登录</van-button> <van-button square block type="info" native-type="submit">登录</van-button>
</div> </div>
<!-- <van-row> </van-form>
<van-col span="12">忘记密码</van-col> <!-- <div>
<van-col span="12">用户注册</van-col>
</van-row> --> <van-row type="flex" justify="center">
</van-form> <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>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue} from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { Image as VanImage } from 'vant'; 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", name: "LoginView",
[VanImage.name]: VanImage, [VanImage.name]: VanImage,
}) })
export default class LoginView extends Vue { export default class LoginView extends Vue {
tatleName="用户登录" tatleName = "用户登录"
phone:string="" //电话 phone: string = "" //电话
password:string=""//密码 password: string = ""//密码
imageSrc:string =""//图形 imageSrc: string = ""//图形
sms:string =""//短信 sms: string = ""//短信
//获取图形验证码 //获取图形验证码
_updatePicCode() { _updatePicCode() {
//请求图形验证码 //请求图形验证码
this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random(); apiService.general(loginApi.updatePicCode,undefined).then((response: RestfulResponse) => {
//this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random() 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); console.log('submit', values);
} }
created() { created() {
this.$nextTick(() => this._updatePicCode()) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loginform{ .loginform {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.logindiv{
.logindiv {
line-height: 20px; line-height: 20px;
} }
.van-button{
.van-button {
border-radius: 6px; border-radius: 6px;
} }
.polog{
.polog {
margin: 0px; margin: 0px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1; font-feature-settings: "kern" 1;
...@@ -130,17 +156,22 @@ created() { ...@@ -130,17 +156,22 @@ created() {
.van-col--15{ .van-col--15 {
margin-top: 2%; margin-top: 2%;
} }
.van-col--24{
.van-col--24 {
margin-left: 6%; margin-left: 6%;
} }
.sopan{
.forget {}
.sopan {
margin-top: 5px; margin-top: 5px;
margin-left: 6%; margin-left: 6%;
} }
// .login{ // .login{
// margin-top: 20%; // margin-top: 20%;
// } // }
......
src/views/authentication/MarketStatisticsDetail.vue 已删除 100644 → 0
浏览文件 @ 0a5a0cd5
<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/authentication/TYMHView.vue 已删除 100644 → 0
浏览文件 @ 0a5a0cd5
<template>
<div class="divCls">
<div class="divCls1">
<div>
<!-- <div @click="onClick" style="color: #02a7f0;position: absolute;top: 20px">返回</div>-->
<!-- <div class="productTitle">产品推荐</div>-->
<!-- <div class="topProducttitle">-->
<!-- <div>-->
<!-- <div class="topimg">-->
<!-- <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!-- <div>随意分</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="characteristic">-->
<!-- <div style="text-align: right;color: #02a7f0">更多></div>-->
<!-- <sub-title>特点</sub-title>-->
<!-- <div class="characteristicdata">-->
<!-- <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!-- <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!-- <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!-- <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!-- <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!-- </div>-->
<!-- <div class="details">-->
<!-- <van-button color="linear-gradient(to right, rgba(250, 44, 25, 1) 1%, rgba(250, 100, 25, 1) 98%)" round type="info">产品推荐</van-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="product">-->
<!-- <div class="topimg">-->
<!-- <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!-- <div>随意分</div>-->
<!-- </div>-->
<!-- <div class="topimg">-->
<!-- <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!-- <div>随意分</div>-->
<!-- </div>-->
<!-- <div class="topimg">-->
<!-- <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!-- <div>随意分</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="service">
<div class="topTab-sty">
<p :style="statisticsShow == '1'?{color: '#FF19BA'} : ''" @click="statisticsShow = '1'">客户经理视角</p>
<p :style="statisticsShow == '2'?{color: '#FF19BA'} : ''" @click="orgClick('fzh')">分支机构视角</p>
<p :style="statisticsShow == '3'?{color: '#FF19BA'} : ''" @click="orgClick('zh')">总行视角</p>
</div>
<div v-if="statisticsShow == '1'" class="statistics-sty">
<div class="marketHousehold-sty">
<p class="title-sty">营销户数</p>
<div class="shadow-sty">
<div class="householdTop-sty">
<p class="custName-sty">李不颜</p>
<div class="householdInfo-sty">
<div class="householdData-sty">
<p style="color: #999999">当月上门营销户数</p>
<div class="householdNum-sty">
<p>{{ householdNum }} </p>
<p>&nbsp;户</p>
</div>
</div>
<div class="householdData-sty">
<p style="color: #999999">全行排名</p>
<div class="householdNum-sty">
<p>{{ householdNum }}</p>
<p> / {{ total }}</p>
</div>
</div>
</div>
</div>
<p style="margin:10px 0 10px 10px;">全行客户经理当月前三</p>
<div v-for="(item, index) in topThree" :key="index" class="householdBottom-sty">
<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 class="rank-sty">
<p style="margin-bottom: 0">{{ item.exeUserName }}</p>
<p style="margin-bottom: 0">{{ item.orgName }}</p>
</div>
<van-progress
:percentage="item.percentage"
stroke-width="8"
pivot-color="#7232dd"
track-color="white"
color="linear-gradient(to right, #B8E5FF 0%, #00A3FF 100%)"
style="width: 40%"
/>
<div style="margin-left: 10px">{{ item.marketNumbers }}</div>
</div>
</div>
</div>
<div class="marketFrequency-sty">
<p class="title-sty">营销次数</p>
<div class="shadow-sty">
<div class="householdTop-sty" style="background-color: #FFFAFA">
<p class="custName-sty" style="background-color: #FF574C">李不颜</p>
<div class="householdInfo-sty">
<div class="householdData-sty">
<p style="color: #999999">当月上门营销户数</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }} </p>
<p>&nbsp;户</p>
</div>
</div>
<div class="householdData-sty">
<p style="color: #999999">全行排名</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }}</p>
<p> / {{ total }}</p>
</div>
</div>
</div>
</div>
<p style="margin:10px 0 10px 10px;">全行客户经理当月前三</p>
<div v-for="(item, index) in topThree" :key="index" class="householdBottom-sty">
<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 class="rank-sty">
<p style="margin-bottom: 0">{{ item.exeUserName }}</p>
<p style="margin-bottom: 0">{{ item.orgName }}</p>
</div>
<van-progress
:percentage="item.percentage"
stroke-width="8"
pivot-color="#7232dd"
track-color="white"
color="linear-gradient(to right, #FCD5D3 0%, #FF574C 100%)"
style="width: 40%"
/>
<div style="margin-left: 10px">{{ item.marketNumbers }}</div>
</div>
</div>
</div>
</div>
<div v-if="statisticsShow == '2' || statisticsShow == '3'" class="statistics-sty">
<div class="marketHousehold-sty">
<div class="trend-btn-sty">
<p class="title-sty">营销户数</p>
<div class="trend-btn-sty" @click="toDetail">
<p class="trend-text-sty">{{ marketDetail }}</p>
<span class="iconfont icon-sty">&#xe627;</span>
</div>
</div>
<div class="shadow-sty">
<div class="householdTop-sty" style="height: 30%">
<p class="custName-sty"style="margin-bottom: 5px;width: 150px">{{ orgName }}</p>
<div v-if="statisticsShow == '2'" class="householdInfo-sty">
<div class="householdData-sty">
<p style="color: #999999">本行当月上门营销户数</p>
<div class="householdNum-sty">
<p>{{ householdNum }} </p>
<p>&nbsp;户</p>
</div>
</div>
<div class="householdData-sty">
<p style="color: #999999">本行排名</p>
<div class="householdNum-sty">
<p>{{ householdNum }}</p>
<p> / {{ total }}</p>
</div>
</div>
</div>
<div v-else-if="statisticsShow == '3'" class="householdInfo-sty">
<div style="align-items: center" class="householdData-sty">
<p style="color: #999999">全行客户经理当月上门营销户数</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }} </p>
<p>&nbsp;户</p>
</div>
</div>
</div>
</div>
<p style="margin:10px 0 10px 10px;">{{ frequencyTrendText }}</p>
<div id="market-household-trend" class="trend-sty"></div>
</div>
</div>
<div class="marketFrequency-sty">
<div class="trend-btn-sty">
<p class="title-sty">营销次数</p>
<div class="trend-btn-sty" @click="toDetail">
<p class="trend-text-sty">{{ marketDetail }}</p>
<span class="iconfont icon-sty">&#xe627;</span>
</div>
</div>
<div class="shadow-sty">
<div class="householdTop-sty" style="background-color: #FFFAFA;height: 30%">
<p class="custName-sty" style="background-color: #FF574C;width: 150px;margin-bottom: 5px">{{ orgName }}</p>
<div v-if="statisticsShow == '2'" class="householdInfo-sty">
<div class="householdData-sty">
<p style="color: #999999">本行当月上门营销次数</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }} </p>
<p>&nbsp;次</p>
</div>
</div>
<div class="householdData-sty">
<p style="color: #999999">本行排名</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }}</p>
<p> / {{ total }}</p>
</div>
</div>
</div>
<div v-else-if="statisticsShow == '3'" class="householdInfo-sty">
<div class="householdData-sty" style="align-items: center">
<p style="color: #999999">全行客户经理当月上门营销次数</p>
<div class="householdNum-sty">
<p style="color: #FF574C">{{ householdNum }} </p>
<p>&nbsp;次</p>
</div>
</div>
</div>
</div>
<p style="margin:10px 0 10px 10px;">{{ householdTrendText }}</p>
<div id="market-frequency-trend" class="trend-sty"></div>
</div>
</div>
</div>
<!-- <div>客户服务</div>-->
<!-- <div class="icon-style" @click="outlets">-->
<!-- <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/WDCX.png" /></div>-->
<!-- <div style="margin-top: 10px">网点查询</div>-->
<!-- </div>-->
<!-- <div class="icon-style" @click="calculate">-->
<!-- <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/FZGJ.png" /></div>-->
<!-- <div style="margin-top: 10px">贷款测算</div>-->
<!-- </div>-->
<!-- <div class="icon-style" @click="pricing">-->
<!-- <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/ZRCS.png" /></div>-->
<!-- <div style="margin-top: 10px">利率定价</div>-->
<!-- </div>-->
<!-- <div class="icon-style" @click="syfComputing">-->
<!-- <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/ZRCS.png" /></div>-->
<!-- <div style="margin-top: 10px">随意分试算</div>-->
<!-- </div>-->
<!-- <div class="icon-style" @click="enterprise">-->
<!-- <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/KHCX.png" /></div>-->
<!-- <div style="margin-top: 10px">查企业</div>-->
<!-- </div>-->
</div>
</div>
<div class="divCls2">
<div><img style="height: 100%" src="../../assets/images/chengdu-bank-logo.png" alt=""></div>
<div>
<div v-if="PerAccountData.length != 0" @click="goMainView(1)" class="logindata personal">
<div>个人贷款
<div style="margin-left: auto;margin-right: 10px;"><span style="color: #02A7F0"
class="iconfont icon--dengru"></span></div>
</div>
<!-- <div class="accountborder">-->
<!-- <div v-for="(item, index) of PerAccountData" :key="index" class="accountdata" @click="jumpSystem(1,item)">-->
<!-- <div>{{ item.ORGNAME + '-' + item.USERCODE}}</div>-->
<!-- <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div v-if="ComAccountData.length != 0" @click="goMainView(2)" class="logindata company">
<div>对公贷款
<div style="margin-left: auto;margin-right: 10px;"><span style="color: #02A7F0"
class="iconfont icon--dengru"></span></div>
</div>
<!-- <div class="accountborder">-->
<!-- <div v-for="(item, index) of ComAccountData" :key="index" class="accountdata" @click="jumpSystem(2,item)">-->
<!-- <div>{{ item.org_name+ '-' + item.user_code }}</div>-->
<!-- <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div v-if="MovAccountData.length != 0" @click="goMainView(3)" class="logindata move">
<div>移动展业</div>
<!-- <div class="accountborder">-->
<!-- <div v-for="(item, index) of MovAccountData" :key="index" class="accountdata" @click="jumpSystem(3,item)">-->
<!-- <div>{{ item }}</div>-->
<!-- <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<sub-title>辅助工具</sub-title>
<div class="KHFWDataStyle">
<div @click="Recommend">
<img src="@/assets/images/CPTJ.png" alt="">
<div>产品推介</div>
</div>
<div @click="outlets">
<img src="@/assets/images/WDCX.png" alt="">
<div>网点查询</div>
</div>
<div @click="calculate">
<img src="@/assets/images/FZGJ.png" alt="">
<div>贷款测算</div>
</div>
<div @click="pricing">
<img src="@/assets/images/ZRCS.png" alt="">
<div>利率定价</div>
</div>
<div @click="syfComputing">
<img src="@/assets/images/ZRCS.png" alt="">
<div>随意分试算</div>
</div>
<div @click="enterprise">
<img src="@/assets/images/KHCX.png" alt="">
<div>查企业</div>
</div>
</div>
</div>
<van-popup
v-model="userDialog"
:close-on-click-overlay="true"
:style="{ height: '217px', width: '526px' }"
>
<van-form>
<div class="popup-heater">选择系统账号</div>
<div v-if="dialogList.length!=0" class="popup-body">
<div class="dialog-item" v-for="(item,index) in dialogList" @click="jumpSystem(sysNo,dialogList[index])"
:key="index">
<svg style="width: 20px;height: 20px;" class="icon" aria-hidden="true">
<use xlink:href="#icon-zhanghaodenglu"></use>
</svg>
{{ item.user_code || item.USERCODE }}
</div>
</div>
</van-form>
</van-popup>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Button } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api";
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 { Progress } from 'vant';
import * as echarts from 'echarts';
Vue.use(Progress);
Vue.use(Button);
/**
* @Description 统一门户
* @Author JiangTao
* @Date 2022-01-11 下午 06:04
*/
@Component({
name: "TYMHView"
})
export default class TYMHView extends Vue {
PerAccountData = []; //个人账户数据
ComAccountData = []; //对公账户数据
MovAccountData = []; //展业账户数据
systemList: any = [];
dialogList: any[] = []; //弹窗展示的用户列表
hrCode = "";
userDialog = false; //机构选择弹窗
sysNo: any = "";//保存一下当前的弹窗编号
householdNum = '100';
total = '200';
marketDetail = '详情分析';
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'
}
];
active = 0;
household: any;
frequency: any;
trendData = [
{
datas: [
{
date: '1',
frequency: 70
},{
date: '2',
frequency: 100
},{
date: '3',
frequency: 40
},{
date: '4',
frequency: 130
},
]
}
];
statisticsShow = '1';
orgName = '某某某支行';
householdTrendText = '';
frequencyTrendText = '';
mounted() {
this.PerAccountData = []; //个人账户数据
this.ComAccountData = []; //对公账户数据
this.MovAccountData = []; //展业账户数据
this.systemList = this.$route.params.systemList;
this.hrCode = this.$route.params.hrCode;
this.selectXDUserList();
this.selectGDUserList();
this.selectZYUSerList();
}
onClick() {
this.$router.push({path: "/login"});
}
/**
* @Description 网点查询
* @Author JiangTao
* @Date 2022-01-11 下午 09:09
*/
outlets() {
console.log("网点查询");
}
/**
* @Description 产品推介/
* @Author JiangTao
* @Date 2022-01-11 下午 09:09
*/
Recommend() {
this.$router.push({
path:'/ProductsRecommended'
});
}
/**
* @Description 贷款测算
* @Author JiangTao
* @Date 2022-01-11 下午 09:10
*/
calculate() {
this.$router.push({
path:'/AuxiliaryTools',
query: {
activeKey: '1'
}
});
}
/**
* @Description 利率定价
* @Author JiangTao
* @Date 2022-01-11 下午 09:10
*/
pricing() {
this.$router.push({
path:'/AuxiliaryTools',
query: {
activeKey: '0'
}
});
}
/**
* @Description 随意分试算
* @Author wanghang
* @Date 2022-03-3 下午
*/
syfComputing() {
this.$router.push({
path:'/AuxiliaryTools',
query: {
activeKey: '2'
}
});
}
/**
* @Description 查企业
* @Author JiangTao
* @Date 2022-01-11 下午 09:10
*/
enterprise() {
// console.log("查企业");
this.$router.push({
path:'/workbench/commonly-used/company/customer-inquiry',
});
}
//查询信贷用户
selectXDUserList() {
const params = {
tc: nettyApi.TRADE_CODE.selectUserList,
employee_id: this.hrCode
};
NativeUI.showWaiting();
IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
NativeUI.closeWaiting();
console.log(res);
if (res.rc == "1") {
this.ComAccountData = res.UserList;
} else {
if (res.ret_code != "111111") {
NativeUI.toast("查询用户失败,请重试");
}
}
});
}
//查询个贷用户
selectGDUserList() {
const params = {
tc: nettyApi.TRADE_CODE.selectGDUserList,
employee_id: this.hrCode,
QFLGE: "1",
id_card_no: ""
};
NativeUI.showWaiting();
IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
NativeUI.closeWaiting();
console.log("个贷用户", res);
if (res.rc == "1") {
this.PerAccountData = res.CustomerGRArray;
} else {
if (res.ret_code != "111111") {
NativeUI.toast("查询用户失败,请重试");
}
}
});
}
//查询展业用户
selectZYUSerList() {
console.log("查询展业用户");
}
//弹框或者直接跳转
goMainView(index: any) {
if (index == "1") {
// this.PerAccountData = this.PerAccountData.concat(this.PerAccountData);
if (this.PerAccountData.length == 1) {
this.jumpSystem(1, this.PerAccountData[0]);
} else {
this.dialogList = this.PerAccountData;
this.sysNo = 1;
this.userDialog = true;
}
} else if (index == "2") {
if (this.ComAccountData.length == 1) {
this.jumpSystem(2, this.ComAccountData[0]);
} else {
this.dialogList = this.ComAccountData;
this.sysNo = 2;
this.userDialog = true;
}
} else if (index == "3") {
if (this.MovAccountData.length == 1) {
this.jumpSystem(3, this.MovAccountData[0]);
} else {
this.dialogList = this.MovAccountData;
this.sysNo = 3;
this.userDialog = true;
}
}
}
//跳转对应系统
jumpSystem(systemType: any, item: any) {
this.userDialog = false; //先关闭弹窗
if (systemType == 1) {
sessionStorage.setItem("user_code", item.USERCODE);
sessionStorage.setItem("org_code", item.ORGCODE);
sessionStorage.setItem("ORGNAME", item.ORGNAME);
sessionStorage.setItem("USERNAME", item.USERNAME);
sessionStorage.setItem("roleSystm", "personal");
this.queryMenuList(item.USERCODE);
} else if (systemType == 2) {
sessionStorage.setItem("user_code", item.user_code);
sessionStorage.setItem("org_code", item.org_no);
sessionStorage.setItem("roleSystm", "company");
this.queryMenuList(item.user_code);
} else if (systemType == 3) {
console.log("展业");
}
}
/**
*@Description 菜单查询
*@Author XWH
*@Date 2022/2/25 20:52
*/
queryMenuList(userCode: string) {
const query = {
tc: "MECP",
appId: "933807248106598400",
userId: userCode
};
NativeUI.showWaiting();
return IF.transferDataInter(systemApi.queryMenu, {}, query).then((res: any) => {
console.log(res);
NativeUI.closeWaiting();
sessionStorage.setItem("roleNos", JSON.stringify(res.roleIds)); //存入roleNo角色列表
sessionStorage.setItem("menuType", JSON.stringify(res.sysMenuInfos));
this.$router.push({
path: "/main/workbench"
});
});
}
/**
*@Description 初始化趋势图
*@Author XWH
*@Date 2022/3/3 15:08
*/
initEcharts() {
this.$nextTick(() => {
this.household = echarts.init(document.getElementById('market-frequency-trend') as HTMLDivElement);
this.frequency = echarts.init(document.getElementById('market-household-trend') as HTMLDivElement);
this.initHyChart(this.frequency);
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);
}
/**
*@Description 展示分支机构营销统计页
*@Author XWH
*@Date 2022/3/4 19:49
*/
orgClick (type: string) {
if(type == 'zh'){
this.orgName = '总行';
this.statisticsShow = '3';
this.householdTrendText = '全行营销户数趋势';
this.frequencyTrendText = '全行营销次数趋势';
}else if (type == 'fzh'){
this.statisticsShow = '2';
this.orgName = '某某某分支行';
this.householdTrendText = '本行营销户数趋势';
this.frequencyTrendText = '本行营销次数趋势';
}
this.$nextTick(() => {
this.initEcharts();
});
}
/**
*@Description 统计详情页
*@Author XWH
*@Date 2022/3/5 12:36
*/
toDetail() {
this.$router.push({
path: '/MarketStatisticsDetail'
});
}
}
</script>
<style lang="scss" scoped>
.divCls {
width: 100%;
height: 100vh;
background-color: #f2f2f2;
padding: 1% 0.5%;
display: flex;
justify-content: space-around;
}
.divCls1 {
width: 70%;
height: auto;
}
.divCls1 > div {
background-color: white;
border-radius: 20px;
padding: 10px;
}
.divCls1 > div:nth-child(1) {
height: 30%;
margin-bottom: 2%;
}
.divCls1 > div:nth-child(2) {
height: 70%;
}
.divCls2 {
width: 27%;
height: auto;
background-color: white;
border-radius: 20px;
padding: 25px;
}
.divCls2 > div:nth-child(1) {
height: 6%;
}
.divCls2 > div:nth-child(2) {
height: 94%;
padding-bottom: 40px;
overflow-y: auto;
}
.logindata {
width: 100%;
margin: 20px auto 0 auto;
height: auto;
}
.logindata > div:nth-child(1) {
height: 60px;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
padding-left: 20px;
border-radius: 10px;
}
.personal > div:nth-child(1) {
background-image: url("../../assets/images/GRDKimg.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
.company > div:nth-child(1) {
background-image: url("../../assets/images/DGDKimg.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
.move > div:nth-child(1) {
background-image: url("../../assets/images/ZYXTimg.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
.personal > div:nth-child(2) {
border: 1px solid rgba(189, 212, 254, 1);
}
.company > div:nth-child(2) {
border: 1px solid rgba(254, 225, 159, 1);
}
.move > div:nth-child(2) {
border: 1px solid #FEBDBDFF;
}
.accountborder {
padding: 0 7px 0 20px;
max-height: 165px;
overflow-y: auto;
}
.accountdata {
height: 55px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e1e2e3;
}
.accountdata:last-child {
border-bottom: 0;
}
.icon-style{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/*.service > div {*/
/* display: flex;*/
/* justify-content: space-between;*/
/* align-items: center;*/
/*}*/
/*.service > div:nth-child(1) {*/
/* width: 25px;*/
/* font-size: 18px;*/
/* font-weight: bold;*/
/*}*/
/*.service div > div:nth-child(1) {*/
/* width: 50px;*/
/* height: 50px;*/
/* border-radius: 30px;*/
/* !*background-color: red;*!*/
/* !*margin-right: 10px;*!*/
/*}*/
.productTitle {
height: 5%;
font-size: 20px;
font-weight: bold;
}
.topProducttitle {
height: 63%;
display: flex;
justify-content: flex-start;
}
.topProducttitle > div {
width: 50%;
}
.topProducttitle > div:nth-child(1) {
height: 100%;
padding: 15px 0;
}
.product {
height: 35%;
display: flex;
justify-content: space-between;
align-items: center;
}
.product > div {
width: 31%;
height: 90%;
border-radius: 10px;
box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
}
.topimg {
height: 100%;
border-radius: 15px;
box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
}
.topimg > img {
width: 100%;
height: 80%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.topimg > div {
width: 100%;
height: 20%;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
padding-left: 20px;
}
.product > div > img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.characteristic {
padding-left: 15px;
display: flex;
flex-direction: column;
}
.characteristicdata {
padding-left: 15px;
height: 60%;
overflow-y: auto;
}
.characteristicdata div {
font-size: 16px !important;
line-height: 30px;
}
.details {
width: 100%;
margin: 10px 0;
display: flex;
justify-content: flex-end;
}
.popup-heater {
width: 100%;
height: 13%;
line-height: 55px;
padding-left: 3%;
font-size: 18px;
font-family: "Arial Normal", "Arial";
border-bottom: 1px solid #d7d7d7;
}
.popup-body {
width: 96%;
height: 100%;
/*padding: 3.5% 0;*/
line-height: 80px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
}
.dialog-item {
display: flex;
font-size: 16px;
align-items: center;
justify-content: center;
}
.service {
display: flex;
flex-direction: column;
/*justify-content: space-between;*/
/*align-items: center;*/
}
.topTab-sty{
width: 100%;
display: flex;
justify-content: flex-end;
height: 40px;
p{
font-size: 16px;
margin-right: 10px;
color: #838383;
}
}
.statistics-sty{
display: flex;
justify-content: space-around;
height: 90%;
width: 100%;
}
.marketHousehold-sty{
width: 45%;
height: 90%;
display: flex;
flex-direction: column;
}
.marketFrequency-sty{
width: 45%;
height: 90%;
display: flex;
flex-direction: column;
}
.title-sty{
font-size: 20px;
font-weight: bold;
}
.householdTop-sty{
height: 40%;
border-radius: 20px;
background-color: #F5FBFF;
//box-shadow: -5px -5px 10px -4px #C9C9C9,5px -5px 10px -4px #C9C9C9;
p{
font-size: 18px;
}
}
.custName-sty{
width: 100px;
text-align: center;
color: white;
background-color: #00A3FF;
border-radius: 10px 0 10px 0;
line-height: 40px;
}
.householdInfo-sty{
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
}
.householdData-sty{
display: flex;
flex-direction: column;
}
.householdNum-sty{
display: flex;
}
.householdNum-sty > p:nth-child(1){
font-size: 24px;
color: #00A3FF;
}
.householdNum-sty > p:nth-child(2){
font-size: 16px;
color: #999999;
align-self: flex-end;
}
.householdBottom-sty{
width: 100%;
margin: 0 0 10px 10px;
display: flex;
align-items: center;
border-radius: 20px;
/*justify-content: space-between;*/
}
.householdBottom-sty div {
width: 30%;
font-size: 14px;
color: #333333;
}
::v-deep .van-progress__pivot {
display: none;
}
.imgCls {
width: 30px;
height: 30px;
}
.rank-sty{
color: #999999;
font-size: 14px;
margin-left: 5px;
}
.shadow-sty{
box-shadow: 0 0 10px #C9C9C9;
border-radius: 20px;
height: 100%
}
.trend-sty {
width: 100%;
height: 250px;
}
.KHFWStyle {}
.KHFWDataStyle {
display: grid;
grid-template-columns: repeat(3, 32%);
row-gap: 20px;
}
.KHFWDataStyle > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.KHFWDataStyle > div img {
width: 50%;
}
::v-deep .d-subtitle {
margin: 10px 0;
}
.trend-btn-sty{
display: flex;
justify-content: space-between;
}
.trend-text-sty {
font-size: 16px;
color: #3654f3;
}
.icon-sty {
color: #3654f3;
}
</style>
src/views/login/ForgetPassView.vue 0 → 100644
浏览文件 @ 89ceb47e
<!--
* @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 0 → 100644
浏览文件 @ 89ceb47e
<!--
* @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
浏览文件 @ 89ceb47e
<!--
* @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> <template>
<div class="d-page d-flex flex-column"> <div class="d-page d-flex flex-column">
<title-bar :title="title" @clickLeft="onClick"> <div class="rarle">
<van-icon slot="left" name="cross" size="24" /> <tatle-bar :tatle="tatleName" :tatleflag="false"></tatle-bar>
</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> </div>
<span>{{ userName }}</span> <div>
</a> <van-tabs v-model="activeName">
<a v-for="item in menuList" :key="item.name" class="d-nav-item" :class="{ selected: selectPath == item.path }" <van-tab title="标签 1" name="a">内容 1</van-tab>
@click="onNavItemClick(item)"> <van-tab title="标签 2" name="b">内容 2</van-tab>
<div class="d-nav-item_inner"> <van-tab title="标签 3" name="c">内容 3</van-tab>
<div class="d-nav-item_icon"> </van-tabs>
<svg style="width: 40px;height: 40px" v-if="selectPath != item.path" class="icon svg-icon" aria-hidden="true"> <div v-for="(item, index) in productList" :key="index">
<use :xlink:href="item.iconName+'xian'" /> <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
</svg> :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
<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> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import routerService from "@/services/router.service"; import { ProductData } from '@/model/entity/ProductData'
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";
@Component({ @Component({
name: "MainView" name: "MainView",
}) })
export default class MainView extends Vue { export default class MainViw extends Vue {
animateName = ""; // 路由动画名称 tatleName = "线上金融服务平台"
pathMap: any = {}; // 存储路由对象 productList: ProductData[] = [{
selectPath = "/main/workbench"; productname: "金融消费贷", //产品名称
title: string = "工作台"; //标题名 describe: "1年100万",//描述
userName: any = ""; limitrange: "1000~2000",//额度范围
// 功能菜单列表 interestrate: "199000%~10000000%",//利率
menuList: any = [ loanterm: "89个月",//贷款期限
// { title: "工作台", icon: "", path: "/main/workbench" }, },
// { title: "营销管理", icon: "", path: "/ComMarketingPool" }, {
// { title: "对公客户管理", icon: "", path: "/main/CustomerMgtView" }, productname: "金融消费贷", //产品名称
// { title: "个人客户管理", icon: "", path: "/main/PersonalMgtView" }, describe: "1年100万",//描述
]; limitrange: "1000~2000",//额度范围
interestrate: "199000%~10000000%",//利率
activated() { loanterm: "89个月",//贷款期限
this.selectPath = this.$route.path; }];
this.userName = sessionStorage.getItem("userName"); activeName: string = "a"
}
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,
});
}
} }
</script> </script>
<style lang="scss"> <style scoped 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> </style>
src/views/main/PersonalStatsView.vue 已删除 100644 → 0
浏览文件 @ 0a5a0cd5
<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>
src/views/workbench/WorkbenchView.vue
浏览文件 @ 89ceb47e
<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 15:41:06
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-05 14:42:17
* @FilePath: \mcep-h5\src\views\workbench\WorkbenchView.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template> <template>
<div class="divcls"> <div class="divcls">
<div class="item-1">
<div class="item-title">
常用功能
</div>
<div class="item-1-content">
<div v-for="(item, index) in commonActions" :key="index" @click="onClickCommonAction(item)">
<div style="margin-bottom: 5%"><img style="width: 5vh;" :src="item.iconName" /></div>
<div>{{ item.name }}</div>
</div>
</div>
</div>
<div class="item-2">
<div class="item-title">
营销统计
</div>
</div>
<div class="item-3">
<div class="item-title">
消息提醒
</div>
<div>
<div v-if="msgCount == 0" class="message-box">暂无消息提醒</div>
<div v-else class="message-box"><span class="red-point"></span>【{{ messageList[0].cnname }}】{{ messageList[0].RewSchemes[0].SCHEME_NAME }}
</div>
<div v-if="msgCount != 0" class="message-but" @click="goMessageDetail">更多&nbsp;></div>
</div>
</div>
<div class="item-4">
<div class="item-title">
到期提示
</div>
<div></div>
</div>
<div class="item-5">
<div class="item-title">
待办任务
</div>
<div class="item-5-content">
<div class="item-5-div1"><img style="width: 100%" src="@/assets/images/DBRW.png" alt=""></div>
<div class="item-5-div2">
<div v-for="(item, index) in UpcomingType" :key="index" @click="onClickUpcomingTask(index)">
<div class="UpcomingType">
<div>{{ item.name }}</div>
<div>{{ item.num }}</div>
</div>
<div class="UpcomingImg">
<svg v-if="(index + 1) % 6 == 1" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing1"></use>
</svg>
<svg v-if="(index + 1) % 6 == 2" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing2"></use>
</svg>
<svg v-if="(index + 1) % 6 == 3" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing3"></use>
</svg>
<svg v-if="(index + 1) % 6 == 4" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing4"></use>
</svg>
<svg v-if="(index + 1) % 6 == 5" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing5"></use>
</svg>
<svg v-if="(index + 1) % 6 == 0" style="width: 85%" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-896x896renwubeijing6"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="item-6">
<div class="item-title">
日程提醒
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import Upcoming from "@/components/workbench/upcoming-tasks-content/company-business/Upcoming.vue";
import Schedule from "@/components/workbench/upcoming-tasks-content/company-business/Schedule.vue";
import Information from "@/components/workbench/upcoming-tasks-content/company-business/Information.vue";
import PersonalUpcoming from "@/components/workbench/upcoming-tasks-content/personal-business/PersonalUpcoming.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import systemApi from "@/constants/api/ms-system/system.api";
import IF from "@/public/factory/InterFaceFactory";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import Public from "@/public/ts/Public";
import { MENU, WORKBENCH } from "@/constants/enum/menu.enum";
import applicationApi from "@/constants/api/ms-application/application.api";
/** /**
* @Description 工作台 * @Description 工作台
...@@ -98,539 +21,12 @@ import applicationApi from "@/constants/api/ms-application/application.api"; ...@@ -98,539 +21,12 @@ import applicationApi from "@/constants/api/ms-application/application.api";
*/ */
@Component({ @Component({
name: "WorkbenchView", name: "WorkbenchView",
components: { Upcoming, Schedule, Information, PersonalUpcoming }
}) })
export default class WorkbenchView extends Vue { export default class WorkbenchView extends Vue {
//当前选中标签的标识符
activeIndex = 0;
//待办任务数
taskCount = 0;
//消息提醒数
msgCount: any = 0;
//标签主题色
mColor = "#fd5065";
//常用功能
commonActions: any = [
// {actionName: "新增面签", activeKey: "c", iconName: "", actionType: "MQGL", img: require('@/assets/images/CSGL.png')},
// // {actionName: "网点查询", iconName: "", actionType: "WDCX"},
// // {actionName: "辅助工具", iconName: "", actionType: "FZGJ"},
// // {actionName: "业务查询", iconName: "", actionType: "YWCX"},
// // {actionName: "客户体检", iconName: "", actionType: "KHTJ"},
// {actionName: "个人催收管理", activeKey: 0, iconName: "", actionType: "CSGL", img: require('@/assets/images/CSGL.png')},
// {actionName: "个人贷后检查", activeKey: 1, iconName: "", actionType: "DHJC", img: require('@/assets/images/DHJC.png')},
// {actionName: "客户查询", activeKey: "a", iconName: "", actionType: "KHCX", img: require('@/assets/images/KHCX.png')},
// {actionName: "中小营销", activeKey: 2, iconName: "", actionType: "ZXYX", img: require('@/assets/images/ZRCS.png')},
// {actionName: "企业查询", activeKey: "b", iconName: "", actionType: "QYCX", img: require('@/assets/images/ZRCS.png')}, //暂无企业查询的icon
// {actionName: "辅助工具", activeKey: "lc", iconName: "", actionType: "FZGJ", img: require('@/assets/images/ZRCS.png')},
];
//待办任务
UpcomingType: any = [
// {actionName: "个人催收管理", activeKey: 0, iconName: "", actionType: "CSGL", num: 0},
// {actionName: "个人贷后检查", activeKey: 1, iconName: "", actionType: "DHJC", num: 0},
// {actionName: "个人电话营销", activeKey: 2, iconName: "", actionType: "DHYX", num: 0},
// {actionName: "对公风险预警", activeKey: 3, iconName: "", actionType: "FXYJ", num: 0},
// {actionName: "对公贷后检查", activeKey: 4, iconName: "", actionType: "DHJC", num: 0},
// {actionName: "对公上门营销", activeKey: 5, iconName: "", actionType: "SMYX", num: 0},
// {actionName: "个人上门营销", activeKey: 6, iconName: "", actionType: "SMYX", num: 0},
// {actionName: "中小营销", activeKey: 7, iconName: "", actionType: "ZXYX", num: 0},
// {actionName: "面签", activeKey: 8, iconName: "", actionType: "MQGL", num: 0},
];
upcoming = true;
schedule = false;
information = false;
uw: any = {
color: "#02a7f0",
fontWeight: "bold",
borderBottom: "4px solid #02a7f0"
};
sw: any = {};
iw: any = {};
messageList: any[] = [];//消息提醒类别信息
upcoming_warn() {
this.uw = {
color: "#02a7f0",
fontWeight: "bold",
borderBottom: "4px solid #02a7f0"
};
this.sw = {};
this.iw = {};
this.upcoming = true;
this.schedule = false;
this.information = false;
}
schedule_warn() {
this.uw = {};
this.sw = {
color: "#02a7f0",
fontWeight: "bold",
borderBottom: "4px solid #02a7f0"
};
this.iw = {};
this.upcoming = false;
this.schedule = true;
this.information = false;
}
information_warn() {
this.uw = {};
this.sw = {};
this.iw = {
color: "#02a7f0",
fontWeight: "bold",
borderBottom: "4px solid #02a7f0"
};
this.upcoming = false;
this.schedule = false;
this.information = true;
}
created() {
this.queryMenuList();
}
mounted() {
//角标配置需要在菜单初始化之后
let orgCode = sessionStorage.getItem("roleSystm");
if (orgCode === "personal") { //个人查个贷和网贷、上门营销
this.queryNetPendingNumber();
this.queryPersonalPendingNumber();
this.queryPerFtfTaskCount();
} else {
this.queryPendingNumber();
this.selectMsgRemind();//查询对公消息提醒信息
this.selectMarketTaskCountPublic();
}
}
/**
* @author : zmk
* @decsript: 常用功能
* @time: 2022年01月18日11:33:38
* */
onClickCommonAction(item: any) {
sessionStorage.setItem("businessType", "Common");
this.$router.push({
path: item.path,
query: {
menuName: item.name
}
});
}
/**
* @Description 待办任务
* @Author JiangTao
* @Date 2022-01-27 下午 02:46
*/
onClickUpcomingTask(index: any) {
sessionStorage.setItem("businessType", "Upcoming");
this.$router.push({
path: "/UpcomingTask",
query: {
menuList: this.UpcomingType,
activeKey: index
}
});
}
onClick(title: any) {
if (title === 3) {
this.$router.push({
path: "/workbench/commonly-used/personal/business-inquiry"
});
} else if (title === 4) {
this.$router.push({
path: "/workbench/commonly-used/personal/business-inquiry"
});
}
}
business_inquiry() {
this.$router.push({
path: "/workbench/commonly-used/company/business-inquiry"
});
}
products_recommended() {
this.$router.push({
path: "/workbench/products-recommended/products-recommended"
});
}
queryMenuList() {
this.UpcomingType = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.SECOND_ROW.name);
this.commonActions = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.COMMON_FUNCTIONS.name);
const view = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.COMMON_UPCOMING.name);
sessionStorage.setItem("menuListYx", JSON.stringify(view));
for (let data of view) {
this.commonActions.push(data);
}
console.log("待办任务列表---", this.UpcomingType);
return this.UpcomingType;
}
/**
*@Description 功能描述：查询对公对待办任务数量(贷后检查和风险预警)
*@Author XWH
*@Date 2022/1/18 21:31
*/
queryPendingNumber() {
let hrCode = sessionStorage.getItem("user_code"),
params = {
tc: nettyApi.TRADE_CODE.queryXDPendingNumber,
user_code: hrCode
};
NativeUI.showWaiting("正在查询...");
return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
NativeUI.closeWaiting();
console.log("对公代办数量", res); //对公风险和对公贷后
for (let i = 0; i < this.UpcomingType.length; i++) {
//风险预警
if (this.UpcomingType[i].menuId == MENU.RISK_WARNING.code && res.rewTaskCnt && res.rewTaskCnt != "") {
this.UpcomingType[i].num = res.rewTaskCnt;
} else if (this.UpcomingType[i].menuId == MENU.COMPANY_LOAN_CHECK.code && res.pspCrtChkTaskCnt && res.pspCrtChkTaskCnt != "") { //贷后检查数量
this.UpcomingType[i].num = res.pspCrtChkTaskCnt;
}
}
});
}
/**
* @Description 个人上门营销统计数量
* @Author JiangTao
* @Date 2022-02-16 下午 05:06
*/
queryPerFtfTaskCount() {
const param = {
exeUser: sessionStorage.getItem('workcode'),
tc: 'MCEP'
};
NativeUI.showWaiting('正在查询...');
return IF.transferDataInter(applicationApi.queryPerFtfTaskCount, param).then((res: any) => {
console.log('上门营销数量', res);
NativeUI.closeWaiting();
this.UpcomingType[4].num = res.data;
});
}
/**
* @Description 对公上门营销统计数量
* @Author JiangTao
* @Date 2022-02-16 下午 05:06
*/
selectMarketTaskCountPublic() {
const param = {
exeUser: sessionStorage.getItem('workcode'),
tc: 'MCEP'
};
NativeUI.showWaiting('正在查询...');
return IF.transferDataInter(applicationApi.selectMarketTaskCountPublic, param).then((res: any) => {
console.log('对公上门营销数量', res);
NativeUI.closeWaiting();
});
}
/**
*@Description 功能描述：查询个人待办任务数量(电话营销，贷款催收和贷后检查)
*@Author wanghang
*@Date 2022/2/16 15:15
*/
queryPersonalPendingNumber() {
let params = {
tc: nettyApi.TRADE_CODE.selectUpcomingTasksNum
};
NativeUI.showWaiting("正在查询...");
return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
NativeUI.closeWaiting();
console.log("个人代办数量", res);
for (let i = 0; i < this.UpcomingType.length; i++) {
//电话营销
if (this.UpcomingType[i].menuId == MENU.TEL_MARKETING.code && res.dROWNUMTOTAL && res.dROWNUMTOTAL != "") {
this.UpcomingType[i].num = res.dROWNUMTOTAL;
} else if (this.UpcomingType[i].menuId == MENU.LOAN_COLLECTION_DB.code && res.kROWNUMTOTAL && res.kROWNUMTOTAL != "") { //贷款催收
this.UpcomingType[i].num = res.kROWNUMTOTAL;
} else if (this.UpcomingType[i].menuId == MENU.PERSONAL_LOAN_CHECK.code) { //贷后检查 包含业务类和合作项目
this.UpcomingType[i].num = this.UpcomingType[i].num + parseInt(res.jROWNUMTOTAL) + parseInt(res.hROWNUMTOTAL);
}
}
});
}
/**
*@Description 功能描述：查询网贷待办任务数量(随意分面签，贷后检查(资金用途检查，消费类检查，随意分检查))
*@Author wanghang
*@Date 2022/2/16 15:15
*/
queryNetPendingNumber() {
let params = {
tc: nettyApi.TRADE_CODE.selectNetUpcomingTasksNum
};
NativeUI.showWaiting("正在查询...");
return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
NativeUI.closeWaiting();
console.log("网贷代办数量", res);
for (let i = 0; i < this.UpcomingType.length; i++) {
//随意分面签待办
if (this.UpcomingType[i].menuId == MENU.FACE_SIGN.code && res.SYFSIGNNUM && res.SYFSIGNNUM != "") {
this.UpcomingType[i].num = res.SYFSIGNNUM;
} else if (this.UpcomingType[i].menuId == MENU.FACE_SIGN_REVIEW.code && res.SYFSIGNCHECKNUM && res.SYFSIGNCHECKNUM != "") {
//面签复核
this.UpcomingType[i].num = res.SYFSIGNCHECKNUM;
} else if (this.UpcomingType[i].menuId == MENU.PERSONAL_LOAN_CHECK.code) { //贷后检查 包含业务类和合作项目
this.UpcomingType[i].num = this.UpcomingType[i].num + parseInt(res.FUNDSCHECKNUM) + parseInt(res.CONSUMECHECKNUM) + parseInt(res.SYFLOANCHECKNUM);
}
}
});
}
/**
*@description: 对公消息提醒查询
*@author: wanghang
*@date: 2022/2/26
*/
//查询对公消息提醒
selectMsgRemind() {
let param = {
tc: nettyApi.TRADE_CODE.selectMsgRemind
};
NativeUI.showWaiting("正在查询...");
return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
NativeUI.closeWaiting();
if (res.rc == "1") {
//查到消息提醒列表
let info: any[] = res.SchemeTypes;
this.messageList = res.SchemeTypes;
this.msgCount = 0;
for (let i = 0; i < info.length; i++) {
this.msgCount = parseInt(this.msgCount) + parseInt(info[i].RewSchemes[0].SCHEME_COUNT);
}
} else {
NativeUI.toast(res.msg);
}
});
}
/**
*@description:去到消息详情页
*@author: wanghang
*@date: 2022/2/26
*/
goMessageDetail(){
this.$router.push({
path: '/workbench/MessageReminderView',
// query: {
// messageInfo: this.messageList
// }
});
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.divcls {
width: 100%;
height: 100%;
background-color: #f2f2f2;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-row-gap: 12px;
grid-column-gap: 12px;
padding: 12px;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 4;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item-2 {
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 5;
}
.item-3 {
grid-column-start: 1;
grid-column-end: 4;
position: relative;
}
.item-4 {
grid-column-start: 4;
grid-column-end: 7;
}
.item-5 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 8;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item-6 {
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 5;
grid-row-end: 8;
}
.divcls > div {
background-color: #fff;
border-radius: 15px;
padding: 15px;
}
.item-title {
font-size: 16px;
font-weight: bold;
}
.item-1-content {
width: 90%;
height: 80%;
margin: 0 auto;
display: grid;
align-items: center;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 45%);
grid-row-gap: 15px;
grid-column-gap: 10px;
}
.item-1-content > div {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.item-3,
.item-4 {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-3 > div:nth-child(1),
.item-4 > div:nth-child(1) {
color: #fd5065;
width: 11%;
}
.item-3 > div:nth-child(2),
.item-4 > div:nth-child(2) {
width: 87%;
}
.d-page-top {
width: 100%;
height: 60%;
border: 1px solid #FF574C;
}
.d-page-bottom {
width: 100%;
height: 40%;
border: 1px solid #FF574C;
}
.item-5-content {
height: 80%;
display: flex;
align-items: center;
justify-content: space-around;
}
.item-5-content > div {
height: 95%;
//border: 1px solid #FF574C;
}
.item-5-div1 {
width: 23%;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.item-5-div2 {
width: 73%;
overflow-y: auto;
padding: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 45%);
grid-row-gap: 12px;
grid-column-gap: 12px;
}
.item-5-div2 > div {
border-radius: 12px;
height: 10vh;
padding: 8%;
border: 1px solid #FFF1EA;
box-shadow: 0 0 5px #ffeae1;
display: flex;
align-items: center;
}
.UpcomingType {
width: 65%;
}
.UpcomingType > div:nth-child(1) {
color: #999999;
line-height: 25px;
}
.UpcomingType > div:nth-child(2) {
font-weight: bold;
font-size: 16px;
line-height: 25px;
}
.UpcomingImg {
width: 35%;
display: flex;
justify-content: center;
align-items: center;
}
.UpcomingImg svg {
height: 6vh;
}
.message-box{
display: flex;
align-items: center;
justify-content: center;
}
.red-point{
height: 8px;
width: 8px;
border-radius: 50%;
background: red;
margin-right: 2px;
}
.message-but{
bottom: 10px;
right: 20px;
position: absolute;
right: 15px;
bottom: 10px;
color: #268ff5;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或