Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 7b047071 by lixin
Options

会员相关

1 parent f9754122
Inline Side-by-side
Showing 10 changed files with 570 additions and 12 deletions
src/router/index.js
...@@ -2,19 +2,18 @@ import Vue from 'vue' ...@@ -2,19 +2,18 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '@/views/home/index.vue' import Home from '@/views/home/index.vue'
import userRouter from './modules/user' import userRouter from './modules/user'
import memberRouter from './modules/member'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [{
{ path: '/',
path: '/', name: 'Home',
name: 'Home', meta: {
meta: { title: '首页'
title: '首页'
},
component: Home
}, },
].concat(userRouter) component: Home
}, ].concat(userRouter, memberRouter)
const router = new VueRouter({ const router = new VueRouter({
routes routes
...@@ -26,7 +25,7 @@ router.beforeEach((to, from, next) => { ...@@ -26,7 +25,7 @@ router.beforeEach((to, from, next) => {
// router后置守卫 // router后置守卫
router.afterEach((to, from) => { router.afterEach((to, from) => {
}) })
export default router export default router
src/router/modules/member.js 0 → 100644
import memberLayout from '@/components/UserLayout'
const memberRouter = [{
path: '/member',
component: memberLayout,
children: [{
path: 'login',
name: 'Login',
meta: {
title: '登录'
},
component: () => import( /* webpackChunkName: "login" */ '@/views/member/Login.vue') // 登录
}, {
path: 'loginResult',
name: 'loginResult',
meta: {
title: '会籍服务'
},
component: () => import( /* webpackChunkName: "login" */ '@/views/member/result') // 登录
}],
},
{
path: '/member/membershipGuide',
name: 'MembershipGuide',
meta: {
title: '入会指南'
},
component: () => import( /* webpackChunkName: "center" */ '@/views/member/MembershipGuide.vue') // 重置密码
},
{
path: '/member/contactList',
name: 'ContactList',
meta: {
title: '入会指南'
},
component: () => import( /* webpackChunkName: "center" */ '@/views/member/contact') // 重置密码
},
{
path: '/member/businessList',
name: 'BusinessList',
meta: {
title: '业务开展'
},
component: () => import( /* webpackChunkName: "center" */ '@/views/member/business') // 重置密码
}
]
export default memberRouter
src/utils/vant-ui.js
import Vue from 'vue' import Vue from 'vue'
import { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button } from 'vant' import { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button } from 'vant'
import NafmHeader from '@/components/NafmHeader' import NafmHeader from '@/components/NafmHeader'
...@@ -7,7 +7,7 @@ import NafmHeader from '@/components/NafmHeader' ...@@ -7,7 +7,7 @@ import NafmHeader from '@/components/NafmHeader'
[NafmHeader].forEach(item => Vue.component(item.name, item)); [NafmHeader].forEach(item => Vue.component(item.name, item));
// 默认vant组件 // 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button].forEach(item => Vue.use(item)) [Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button].forEach(item => Vue.use(item))
// 先预制，后期做统一调整 // 先预制，后期做统一调整
Object.assign(window, { Object.assign(window, {
......
src/views/member/Login.vue 0 → 100644
<template>
<div class="member_login">
<NafmHeader />
<van-form class="login_form" @submit="onSubmit">
<van-field v-model="code" placeholder="请输入社会信用代码或组织机构代码" :rules="[{ required: true, message: '请输入社会信用代码或组织机构代码' }]">
<div slot="left-icon" :style="code && code!== '' ? '' : 'opacity: 0.6'">
<van-icon name="coupon-o" />
</div>
</van-field>
<van-field v-model="password" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
<div slot="left-icon" :style="password && password!== '' ? '' : 'opacity: 0.6'">
<van-icon name="edit" />
</div>
</van-field>
<van-field v-model="checkCode" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
<div slot="left-icon" :style="checkCode && checkCode!== '' ? '' : 'opacity: 0.6'">
<van-icon name="certificate" />
</div>
<template #button>
<span>111111</span>
</template>
</van-field>
<p style="margin: 18px" class="wraning_tip">
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
</p>
<div style="margin: 16px;">
<van-button block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
</div>
</van-form>
<div class="membership_about">
<van-cell title="入会指南" is-link to="/member/membershipGuide" />
<van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
<van-cell title="会员管理规则" is-link to="/member/membershipGuide" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
code: '',
password: '',
checkCode: ''
}
},
computed: {
isLogin() {
return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
}
},
methods: {
onSubmit(value) {
}
}
}
</script>
<style lang="less" scoped>
.member_login {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 150px;
background-color: #f6f6f6;
.login_form {
background-color: #ffffff;
padding-bottom: 30px;
.wraning_tip {
color: #ea5c6d;
font-size: 22px;
text-align: justify;
font-family: PingFangSC-Regular;
}
}
.membership_about {
margin: 20px 0;
.van-cell {
background-color: #f6f6f6;
}
}
}
</style>
src/views/member/MembershipGuide.vue 0 → 100644
<template>
<div>
<NafmHeader title="入会指南" />
入会指南
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="less" scoped>
</style>
src/views/member/business/index.vue 0 → 100644
<template>
<div class="list">
<NafmHeader title="业务开展列表" />
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<van-cell v-for="item in businessList" :key="item">
<div slot="title">{{item.title}}</div>
<p slot="label" class="info">
<span class="update_time">
<van-icon name="underway-o" />
更新日期：{{item.update_time}}
</span>
<span class="org">{{item.org}}</span>
</p>
</van-cell>
</van-list>
</div>
</template>
<script>
export default {
data() {
return {
businessList: [{
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
update_time: '2021-4-12',
org: 'MTN'
},{
title: '广州越秀金融控股集团股份有限公司关于发行2021年度第二期中期票据的注册报告',
update_time: '2021-4-12',
org: 'MTN'
}],
loading: false,
finished: false,
}
},
methods: {
onLoad() {
}
}
}
</script>
<style lang="less" scoped>
.list {
.info {
line-height: 30px;
font-size: 20px;
display: flex;
justify-content: space-between;
}
::v-deep(.van-icon) {
line-height: 30px;
}
}
</style>
src/views/member/contact/contactItem.vue 0 → 100644
<template>
<div class="contact_item">
<p>
<span class="title">联系人姓名</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
<p>
<span class="title">联系人类型</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
<p>
<span class="title">所在部门</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
<p>
<span class="title">职务</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
<p>
<span class="title">办公电话</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
<p>
<span class="title">移动电话</span>
<span class="info">{{contact.name || '--'}}</span>
</p>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: {
contact: {
type: Object,
default() {
return {}
}
}
}
}
</script>
<style lang="less" scoped>
.contact_item {
padding: 0 27px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
margin-top: 18px;
p {
display: flex;
justify-content: space-between;
line-height: 62px;
font-size: 25px;
text-align: left;
font-family: PingFangSC-Regular;
.title {
color: #666666;
}
.info {
color: #333333;
}
}
}
</style>
src/views/member/contact/index.vue 0 → 100644
<template>
<div class="list">
<NafmHeader title="联系人列表" />
<contact-item v-for="contactItem in contactList" :key="contactItem.id" :contact-item="contactItem"></contact-item>
</div>
</template>
<script>
export default {
data() {
return {
contactList: [{},{},{}]
}
},
components: {
contactItem: ()=>import("./contactItem.vue")
}
}
</script>
<style lang="less" scoped>
.list {
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 0;
padding: 9px 29px;
background-color: #fafafa;
}
</style>
src/views/member/result/index.vue 0 → 100644
<template>
<div>
<NafmHeader title="会籍服务" />
<section class="member_basic">
<van-cell>
<h3 slot="title" class="title">{{memberInfo.name}}</h3>
<div slot="label">
<p>
<span>
社会统一信用代码：
</span>
<span class="info">
{{memberInfo.shtyxydm}}
</span>
</p>
<p>
<span>
会员状态：
</span>
<span class="info">
{{memberInfo.status}}
</span>
</p>
<p>
<span>
会员级别：
</span>
<span class="info">
{{memberInfo.level}}
</span>
</p>
<p>
<span>
会籍类别：
</span>
<span class="info">
{{memberInfo.type}}
</span>
</p>
</div>
</van-cell>
<van-cell is-link>
<p slot="default" class="tip_more">
<span class="warning_tip">
提示：如需变更请登录会员系统办理
</span>
<span class="more">查看更多</span>
</p>
</van-cell>
</section>
<section class="member_opration">
<div class="in">
<van-cell is-link>
<template #title>
<span class="oper_title">入会</span>
</template>
</van-cell>
</div>
<div class="out">
<van-cell is-link>
<template #title>
<span class="oper_title">退会</span>
</template>
</van-cell>
</div>
<div class="change">
<van-cell is-link>
<template #title>
<span class="oper_title">变更</span>
</template>
</van-cell>
</div>
</section>
<footer class="bottom_tip">
提示：如联系人，通讯地址，注册地址，法人代表等变更，请登录会员系统办理
</footer>
</div>
</template>
<script>
export default {
data() {
return {
memberInfo: {
name: '山证国际证券有限公司',
shtyxydm: 'HK344TZ00000000001',
status: '欠费状态',
level: '境外机构',
type: '投资人'
}
}
}
}
</script>
<style lang="less" scoped>
.member_basic {
margin: 28px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.08);
.title {
font-size: 35px;
font-weight: bold;
}
p {
line-height: 57px;
.info {
color: #000000;
}
}
.tip_more {
font-size: 23px;
display: flex;
justify-content: space-between;
.warning_tip {
color: #ea5c6d;
}
.more {
color: #666666;
}
}
}
.member_opration {
margin: 28px;
.in {
.van-cell {
background-color: #e7efff;
}
}
.out {
.van-cell {
background-color: #f8e8eb;
}
}
.change {
.van-cell {
background-color: #f8f1df;
}
}
.van-cell {
border-radius: 15px;
margin-bottom: 18px;
}
}
.bottom_tip {
font-size: 22px;
color: #999999;
position: absolute;
bottom: 150px;
left: 0;
right: 0;
background: #f6f6f6;
padding: 28px;
}
</style>
src/views/member/result/memberBasic.vue 0 → 100644
<template>
<div>
<NafmHeader title="会员基本信息" />
<main class="member_basic">
<h3>
<span class="oper_title">{{memberInfo.name}}</span>
</h3>
<van-cell>
<p #default>
<span>社会统一信用代码</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>会员状态</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>会员级别</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>会籍类别</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>成立时间</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>法人代表</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>注册资本</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>机构类型</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>通讯地址</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>单位代表姓名</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>业务开展情况</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
<van-cell>
<p #default>
<span>联系人列表</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
</van-cell>
</main>
</div>
</template>
<script>
export default {
data() {
return {
memberInfo: {
name: '山证国际证券有限公司',
shtyxydm: 'HK344TZ00000000001',
status: '欠费状态',
level: '境外机构',
type: '投资人'
}
}
}
}
</script>
<style lang="less" scoped>
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!