Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 1232fb09 by amateur
Options

版本合并

2 parents bbaecd8e d9bd368e
Inline Side-by-side
Showing 23 changed files with 1010 additions and 22 deletions
src/assets/css/sprite.less
...@@ -5,40 +5,43 @@ ...@@ -5,40 +5,43 @@
.icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; } .icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: -848px -737px; } .icon-bg-member { width: 828px; height: 406px; background-position: -848px -737px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -848px -1169px; } .icon-bg-mine { width: 828px; height: 340px; background-position: -848px -1169px; }
.icon-center-about { width: 36px; height: 36px; background-position: -1297px -670px; } .icon-center-about { width: 36px; height: 36px; background-position: -1974px -981px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -1353px -670px; } .icon-center-collect { width: 36px; height: 36px; background-position: -1762px -1055px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -1409px -670px; } .icon-center-feedback { width: 36px; height: 36px; background-position: -1818px -1055px; }
.icon-center-message { width: 36px; height: 36px; background-position: -1465px -670px; } .icon-center-message { width: 36px; height: 36px; background-position: -1874px -1055px; }
.icon-center-question { width: 36px; height: 36px; background-position: -1521px -670px; } .icon-center-question { width: 36px; height: 36px; background-position: -1930px -1055px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -1577px -670px; } .icon-center-setting { width: 36px; height: 36px; background-position: -1986px -1055px; }
.icon-center-study { width: 36px; height: 36px; background-position: -1633px -670px; } .icon-center-study { width: 36px; height: 36px; background-position: -1696px -1169px; }
.icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; } .icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; }
.icon-change-membership { width: 90px; height: 90px; background-position: -1624px -526px; } .icon-change-membership { width: 90px; height: 90px; background-position: -1624px -526px; }
.icon-change-name { width: 90px; height: 90px; background-position: -1734px -526px; } .icon-change-name { width: 90px; height: 90px; background-position: -1734px -526px; }
.icon-change-representive { width: 90px; height: 90px; background-position: -1844px -526px; } .icon-change-representive { width: 90px; height: 90px; background-position: -1844px -526px; }
.icon-email { width: 36px; height: 36px; background-position: -1689px -670px; } .icon-email { width: 36px; height: 36px; background-position: -1752px -1169px; }
.icon-empty { width: 36px; height: 36px; background-position: -1745px -670px; } .icon-empty { width: 36px; height: 36px; background-position: -1808px -1169px; }
.icon-filter { width: 44px; height: 50px; background-position: -1910px -981px; } .icon-filter { width: 44px; height: 50px; background-position: -1910px -981px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; } .icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -2030px -981px; } .icon-icon-classify { width: 30px; height: 30px; background-position: -2030px -981px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1874px -1055px; } .icon-icon-clock { width: 30px; height: 30px; background-position: -1972px -1225px; }
.icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; } .icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; } .icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; }
.icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; } .icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; }
.icon-message { width: 50px; height: 50px; background-position: -1770px -981px; } .icon-message { width: 50px; height: 50px; background-position: -1770px -981px; }
.icon-more { width: 10px; height: 18px; background-position: -2050px -775px; } .icon-more { width: 10px; height: 18px; background-position: -2050px -775px; }
.icon-password { width: 36px; height: 36px; background-position: -1801px -670px; } .icon-password { width: 36px; height: 36px; background-position: -1864px -1169px; }
.icon-pdf { width: 46px; height: 60px; background-position: -1696px -1055px; } .icon-pdf { width: 46px; height: 60px; background-position: -1696px -1055px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; } .icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; }
.icon-progress-act { width: 36px; height: 36px; background-position: -1857px -670px; } .icon-progress-act { width: 36px; height: 36px; background-position: -1920px -1169px; }
.icon-progress-normal { width: 36px; height: 36px; background-position: -1913px -670px; } .icon-progress-normal { width: 36px; height: 36px; background-position: -1976px -1169px; }
.icon-question-icon { width: 36px; height: 36px; background-position: -1969px -670px; } .icon-question-icon { width: 36px; height: 36px; background-position: -1696px -1225px; }
.icon-quit-member { width: 90px; height: 90px; background-position: -1940px -737px; } .icon-quit-member { width: 90px; height: 90px; background-position: -1940px -737px; }
.icon-shtyxydm { width: 54px; height: 54px; background-position: -1696px -981px; } .icon-shtyxydm { width: 54px; height: 54px; background-position: -1696px -981px; }
.icon-tel { width: 36px; height: 36px; background-position: -1974px -981px; } .icon-tel { width: 36px; height: 36px; background-position: -1752px -1225px; }
.icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; } .icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; }
.icon-trash { width: 50px; height: 50px; background-position: -1840px -981px; } .icon-trash { width: 50px; height: 50px; background-position: -1840px -981px; }
.icon-user-question { width: 32px; height: 36px; background-position: -2025px -670px; } .icon-user-question { width: 32px; height: 36px; background-position: -1920px -1225px; }
.icon-user { width: 36px; height: 36px; background-position: -1762px -1055px; } .icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; }
.icon-verification { width: 36px; height: 36px; background-position: -1818px -1055px; } .icon-verification { width: 36px; height: 36px; background-position: -1864px -1225px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; } .icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
.icon-all { width: 8px; height: 8px; background-position: -1403px -670px; }
.icon-pdf-icon { width: 46px; height: 28px; background-position: -1297px -670px; }
.icon-up-arrow { width: 20px; height: 14px; background-position: -1363px -670px; }
\ No newline at end of file \ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

711 KB | W: | H:

src/assets/images/sprite.png

716 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/ToggleArrowContent.vue 0 → 100644
<template>
<div class="toogle_arrow_content">
<span class="common_text" ref="content" :class="{'common_ellipsis': isShowDot}">{{content}}</span>
<span class="common_arrow" ref="arrow" v-if="isShowArrow" @click="handleToggle">></span>
</div>
</template>
<script>
export default {
name: 'ToggleArrowContent',
props: {
content: String,
textMaxLength: {
type: Number,
default: 15
},
},
data() {
return {
isShowDot: false,
isShowArrow: false
}
},
mounted() {
// console.log('this.content.length--', this.content.length);
if (this.content.length > this.textMaxLength) {
this.isShowDot = true // 显示...
this.isShowArrow = true // 显示箭头
this.$refs.content.style.marginRight = '10px'
} else {
this.isShowDot = false // 隐藏...
this.$refs.content.style.marginRight = '0'
}
},
methods: {
handleToggle() {
this.toggle = !this.toggle
if (!this.toggle) {
// 添加省略号
this.isShowDot = true;
this.$refs.arrow.style.transform = 'rotate(90deg)'
this.$refs.content.style.marginRight = '10px'
this.$refs.content.style.textAlign = 'right'
} else {
// 不添加省略号
this.isShowDot = false;
this.$refs.arrow.style.transform = 'rotate(-90deg)'
this.$refs.content.style.marginRight = '10px'
this.$refs.content.style.textAlign = 'left'
}
}
}
}
</script>
<style lang="less" scoped>
.toogle_arrow_content {
position: relative;
}
.common_text {
display: block;
width: 190px;
}
.common_ellipsis {
width: 190px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.common_arrow {
transition: all ease-in-out 0.5s;
transform: rotate(90deg);
margin-left: 10px;
transform-origin: center;
position: absolute;
top: 0;
right: 0;
}
</style>
\ No newline at end of file \ No newline at end of file
src/router/index.js
...@@ -5,6 +5,7 @@ import userRouter from './modules/user' ...@@ -5,6 +5,7 @@ import userRouter from './modules/user'
import memberRouter from './modules/member' import memberRouter from './modules/member'
import qulificationRouter from './modules/qualification' import qulificationRouter from './modules/qualification'
import regIssueRouter from './modules/regIssue' import regIssueRouter from './modules/regIssue'
import infoDisclosureRouter from './modules/infoDisclosure'
import homeRouter from './modules/home' import homeRouter from './modules/home'
import newsRouter from './modules/news' import newsRouter from './modules/news'
import selfregulatingRouter from './modules/selfregulating' import selfregulatingRouter from './modules/selfregulating'
...@@ -61,7 +62,7 @@ const routes = [ ...@@ -61,7 +62,7 @@ const routes = [
}, },
component: () => import(/* webpackChunkName: "PdfViewTwo" */ '@/views/pdf/two.vue') // 首页 component: () => import(/* webpackChunkName: "PdfViewTwo" */ '@/views/pdf/two.vue') // 首页
} }
].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter, newsRouter, selfregulatingRouter) ].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, infoDisclosureRouter, homeRouter, newsRouter, selfregulatingRouter)
const router = new VueRouter({ const router = new VueRouter({
routes routes
......
src/router/modules/infoDisclosure.js 0 → 100644
const infoDisclosureRouter = [
{
path: '/infoDisclosure',
name: 'InfoDisclosure',
meta: {
title: '信息披露',
isLogin: false,
keepAlive: true,
keepAlivePage: ['InfoDisclosureSearch']
},
component: () => import(/* webpackChunkName: "infoDisclosure" */ '@/views/infoDisclosure/index.vue') // 信息披露
},
{
path: '/infoDisclosureSearch',
name: 'InfoDisclosureSearch',
meta: {
title: '信息披露',
isLogin: false
},
component: () => import(/* webpackChunkName: "infoDisclosureSearch" */ '@/views/infoDisclosure/search.vue') // 信息披露 搜索页面
},
]
export default infoDisclosureRouter
\ No newline at end of file \ No newline at end of file
src/router/modules/regIssue.js
...@@ -19,6 +19,15 @@ const regIssueRouter = [ ...@@ -19,6 +19,15 @@ const regIssueRouter = [
}, },
component: () => import(/* webpackChunkName: "regIssueSearch" */ '@/views/regIssue/search.vue') // 注册发行 搜索页面 component: () => import(/* webpackChunkName: "regIssueSearch" */ '@/views/regIssue/search.vue') // 注册发行 搜索页面
}, },
{
path: '/regIssueDetail',
name: 'RegIssueDetail',
meta: {
title: '项目详情',
isLogin: false
},
component: () => import(/* webpackChunkName: "regIssueDetail" */ '@/views/regIssue/detail.vue') // 注册发行 详情页面
},
] ]
export default regIssueRouter export default regIssueRouter
\ No newline at end of file \ No newline at end of file
src/store/modules/search.js
const Types = { const Types = {
Home: { size: 10 }, Home: { size: 10 },
RegIssue: { size: 10 } RegIssue: { size: 10 },
InfoDisclosure: { size: 10 },
} }
import utils from '@/utils/index' import utils from '@/utils/index'
...@@ -9,7 +10,8 @@ export default { ...@@ -9,7 +10,8 @@ export default {
namespaced: true, namespaced: true,
state: { state: {
Home: [], Home: [],
RegIssue: [] RegIssue: [],
InfoDisclosure: []
}, },
mutations: { mutations: {
MSetHistoryDatas(state, { key, datas }) { MSetHistoryDatas(state, { key, datas }) {
...@@ -24,6 +26,10 @@ export default { ...@@ -24,6 +26,10 @@ export default {
state.RegIssue = datas state.RegIssue = datas
}, },
MSetInfoDisclosureHistory(state, datas) {
state.InfoDisclosure = datas
},
MCleanHistory(state, stateKey) { MCleanHistory(state, stateKey) {
state[stateKey] = [] state[stateKey] = []
} }
...@@ -50,6 +56,11 @@ export default { ...@@ -50,6 +56,11 @@ export default {
const newDatas = pushSearchValue(state.RegIssue, val, Types.RegIssue.size) const newDatas = pushSearchValue(state.RegIssue, val, Types.RegIssue.size)
commit('MSetRegIssueHistory', newDatas) commit('MSetRegIssueHistory', newDatas)
}, },
APushInfoDisclosureSearchValue({ state, commit }, val) {
const newDatas = pushSearchValue(state.InfoDisclosure, val, Types.InfoDisclosure.size)
commit('MSetInfoDisclosureHistory', newDatas)
},
}, },
modules: { modules: {
} }
......
src/views/catalog/data.json
...@@ -104,6 +104,11 @@ ...@@ -104,6 +104,11 @@
"url": "/regIssue", "url": "/regIssue",
"title": "注册发行", "title": "注册发行",
"class": "block red" "class": "block red"
},
{
"url": "/infoDisclosure",
"title": "信息披露",
"class": "block red"
} }
] ]
}, },
......
src/views/infoDisclosure/components/FilterPopup.vue 0 → 100644
<template>
<Popup :value="value" @input="val=>this.$emit('input',val)" @reset="handleReset" @sure="handleSure">
<h3>项目状态</h3>
<div class="status_list">
<van-checkbox-group v-model="resultOne" class="checkboxGroup" ref="groupOne">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_1" v-for="(item,index) in checkboxArrOne" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
<h3>品种</h3>
<div class="class_list">
<van-checkbox-group v-model="resultTwo" class="checkboxGroup" ref="groupTwo">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_2" v-for="(item,index) in checkboxArrTwo" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
</Popup>
</template>
<script>
import Popup from '@/components/Popup'
export default {
name: 'FilterPopup',
components: {
Popup
},
props: {
value: Boolean,
checkboxArrOne: {
type: Array,
default: () => []
},
checkboxArrTwo: {
type: Array,
default: () => []
},
},
data() {
return {
resultOne: [], // 项目状态 选择的结果
resultTwo: [] // 品种 选择的结果
}
},
methods: {
handleReset() {
this.$refs.groupOne.toggleAll(false)
this.$refs.groupTwo.toggleAll(false)
this.$emit('reset')
},
handleSure() {
this.$emit('sure', this.resultOne, this.resultTwo)
}
}
}
</script>
<style lang="less" scoped>
h3 {
display: flex;
height: 57px;
align-items: center;
}
.mtb15 {
margin: 15px 0;
}
.checkboxGroup {
display: flex;
width: 100%;
flex-wrap: wrap;
.checkbox_item_common {
position: relative;
display: flex;
height: 40px;
align-items: center;
justify-content: center;
background-color: #f6f6f6;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.checkbox_item_1 {
width: calc(50% - 5px);
&:nth-child(2n + 2) {
margin-right: 0;
}
}
.checkbox_item_2 {
width: calc(33% - 10px);
&:nth-child(3n + 3) {
margin-right: 0;
}
}
}
/deep/ .van-icon-success {
display: none;
}
/deep/ .van-checkbox__label {
margin-left: 0;
color: #666;
}
/deep/ .van-checkbox__icon .van-icon {
border: 0;
}
/deep/ .van-checkbox__icon--checked {
position: absolute;
background-color: #135faa;
width: 100%;
height: 40px;
}
/deep/ .van-checkbox__icon--checked + .van-checkbox__label {
position: absolute;
color: #fff;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/infoDisclosure/components/infoDisclosureList.vue 0 → 100644
<template>
<div class="regIssue_content">
<van-list v-model="loading" :finished="finished" finished-text="已经到底了" @load="onLoad">
<div class="regIssue_list">
<div class="regIssue_item" v-for="(item,index) in list" :key="index" @click="jumpDetail(item.id)">
<h3>{{item.title}}</h3>
<div class="bottom">
<div class="btm_left">
<img :src="require('@/assets/icon/time_update.png')">
<span class="time">更新日期：{{item.time}} </span>
</div>
<div class="btm_right">{{item.type}}</div>
</div>
</div>
</div>
</van-list>
</div>
</template>
<script>
export default {
name: 'infoDisclosureList',
props: {
params: {
type: Object
}
},
data() {
return {
loading: false,
finished: false,
show: false,
list: [
{
id: 1,
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12',
type: 'MTN'
},
{
id: 2,
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12',
type: 'MTN'
}
],
}
},
methods: {
onLoad() {
this.finished = true
this.loading = false
},
jumpDetail(id) {
this.$router.push({
name: 'RegIssueDetail',
query: {
id
}
})
}
}
}
</script>
<style lang="less" scoped>
.regIssue_list {
padding: 0 15px;
.regIssue_item {
padding: 10px 0 12px 0;
border-bottom: 1px solid #f8f8f8;
display: flex;
flex-direction: column;
h3 {
color: #222;
font-size: 16px;
}
.bottom {
display: flex;
flex-direction: row;
margin-top: 10px;
color: #888d8d;
font-size: 12px;
justify-content: space-between;
.btm_left {
display: flex;
align-items: center;
}
img {
width: 17px;
height: 17px;
margin-right: 7px;
}
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/infoDisclosure/index.vue 0 → 100644
<template>
<div class="search-layout">
<nafm-header title="信息披露" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput v-model.trim="keyword" placeholder="请输入机构/债券简称/标题关键字" :readonly="true" :keyword="keyword" @click="jumpSearch" />
<img :src="require('@/assets/icon/filter.png')" class="filter" @click="show=true" />
</template>
</nafm-header>
<infoDisclosureList :params="filterParams" />
<FilterPopup :checkboxArrOne="checkboxArrOne" :checkboxArrTwo="checkboxArrTwo" v-model="show" @rest="handleReset" @sure="handleSure" />
</div>
</template>
<script>
import SearchInput from '@/components/SearchInput';
import infoDisclosureList from './components/infoDisclosureList';
import FilterPopup from './components/FilterPopup';
import mixinKeepAlive from '@/mixins/mixinKeepAlive'
import { KeywordBus } from '@/utils/eventBus'
export default {
name: 'InfoDisclosure', // 注册发行首页
components: {
SearchInput,
FilterPopup,
infoDisclosureList
},
mixins: [mixinKeepAlive],
data() {
return {
keyword: '',
show: false,
checkboxArrOne: [{
label: '待上会',
value: 1
}],
checkboxArrTwo: [{
label: 'SCP',
value: 1
}],
}
},
computed: {
filterParams() {
return {
keyword: this.keyword,
checkboxArrOne: this.checkboxArrOne,
checkboxArrTwo: this.checkboxArrTwo
}
}
},
mounted() {
KeywordBus.on(keyword => {
this.keyword = keyword
})
},
methods: {
// input click 跳转 注册发行 首页
jumpSearch() {
this.$router.push({
name: 'InfoDisclosureSearch'
})
},
// 确定
handleSure(arrOne, arrTwo) {
console.log('arrOne', arrOne);
console.log('arrTwo', arrTwo);
this.show = false
this.onSeachAction()
},
// 注册发行搜索 回车 跳转搜索结果页面 或者 直接搜索
onSeachAction(val) {
const params = {
keyword: val,
arrOne: this.arrOne,
arrTwo: this.arrTwo
}
},
// 重置
handleReset() {
},
},
}
</script>
<style lang="less" scoped>
.search-layout {
height: 100%;
display: flex;
flex-direction: column;
.history-container {
flex: 1;
}
}
/deep/ .nav_bottom_container {
display: flex;
flex-direction: row;
align-items: center;
.filter {
width: 18px;
height: 21px;
margin-left: 15px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/infoDisclosure/search.vue 0 → 100644
<template>
<div class="search-layout">
<nafm-header title="信息披露" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput v-model.trim="keyword" placeholder="请输入机构/债券简称/标题关键字" @search="handleSearch" />
</template>
</nafm-header>
<div class="history-container">
<SearchHistory stateKey="InfoDisclosure" @jumpPage="jumpResultPage" />
</div>
<slot />
</div>
</template>
<script>
import SearchInput from '@/components/SearchInput';
import SearchHistory from '@/components/SearchHistory';
import {KeywordBus} from '@/utils/eventBus'
export default {
name: 'InfoDisclosureSearch', // 注册发行搜索页面
components: {
SearchInput,
SearchHistory
},
data() {
return {
keyword: ''
}
},
mounted() {
},
methods: {
handleJumpAction(keyword) {
this.$store.dispatch('search/APushInfoDisclosureSearchValue', keyword)
KeywordBus.emit(keyword)
this.$router.back()
},
// 点击历史搜索页面tag签 或者搜索关键字回车 跳转到 搜索页面
handleSearch(val) {
const keyword = val || this.keyword
if (!keyword) {
Toast('搜索内容不能为空')
return
}
this.handleJumpAction(keyword)
},
jumpResultPage(val) {
this.handleJumpAction(val)
},
}
}
</script>
<style lang="less" scoped>
.search-layout {
height: 100%;
display: flex;
flex-direction: column;
.history-container {
flex: 1;
}
}
/deep/ .nav_bottom_container {
display: flex;
flex-direction: row;
align-items: center;
.filter {
width: 18px;
height: 21px;
margin-left: 15px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailBasicInfo.vue 0 → 100644
<template>
<div class="basic_content">
<p>
<span class="item_title">企业名称</span>
<span class="item_info">
<ToggleArrowContent :content="detail.companyName" />
</span>
</p>
<p>
<span class="item_title">品种</span>
<span class="item_info">{{detail.variety}}</span>
</p>
<p>
<span class="item_title">注册或备案</span>
<span class="item_info">{{detail.record}}</span>
</p>
<p>
<span class="item_title">注册金额（亿元）</span>
<span class="item_info">{{detail.registeredCapital}}</span>
</p>
<p>
<span class="item_title">主承销商</span>
<span class="item_info">{{detail.leadUnderwriter}}</span>
</p>
<p>
<span class="item_title">会计师事务所</span>
<span class="item_info">{{detail.CPAFirm}}</span>
</p>
<p>
<span class="item_title">律师事务所</span>
<span class="item_info">{{detail.lawFirm}}</span>
</p>
<p>
<span class="item_title">注册通知书文号</span>
<span class="item_info">{{detail.registrationNoticeNo}}</span>
</p>
<p>
<span class="item_title">更新日期</span>
<span class="item_info">{{detail.updateTime}}</span>
</p>
</div>
</template>
<script>
import ToggleArrowContent from '@/components/ToggleArrowContent'
export default {
name: 'DetailBasicInfo',
props: {
detail: {
type: Object
}
},
components:{
ToggleArrowContent
}
}
</script>
<style lang="less" scoped>
.basic_content {
margin: 15px 0;
padding: 5px 15px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
p {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
padding: 8px 0;
font-size: 14px;
.item_title {
color: #666666;
width: 180px;
}
.item_info {
color: #333333;
text-align: right;
width: 200px;
display: flex;
justify-content: flex-end;
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailList.vue 0 → 100644
<template>
<div class="list_container">
<!-- {{type}} -->
<div class="item" v-for="(item,index) in list" :key="index">
<h2>{{item.title}}</h2>
<div class="item_child">
<div class="child" v-for="(childItem,childIndex) in item.arr" :key="childIndex" @click="jumpPdfDetail(childItem)">
<div class="child-title"><span>{{childItem.title}}</span><img :src="pdfIcon" alt=""></div>
<div class="time">{{childItem.time}}</div>
</div>
</div>
</div>
<div class="item-other">
1
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
type: {
type: String,
default: '1'
}
},
data() {
return {
pdfIcon: require('@/assets/icon/pdf_icon.png'),
list: [
{
title: '无锡产业发展集团有限公司2020年三季度财务报表',
arr: [
{ time: '2021.4.12', title: '初稿' }
]
},
{
title: '无锡产业发展集团有限公司2020年三季度财务报表',
arr: [
{ time: '2021.4.12', title: '初稿' },
{ time: '2021.4.13', title: '上会搞' },
]
},
{
title: '无锡产业发展集团有限公司2020年三季度财务报表',
arr: [
{ time: '2021.4.12', title: '初稿' },
{ time: '2021.4.13', title: '上会搞' },
{ time: '2021.4.13', title: '终稿' },
]
}
]
}
},
watch: {
type() {
// console.log(111)
return this.type
}
},
methods: {
jumpPdfDetail(item) {
this.$router.push({
name: 'PdfView',
query: {
item
}
})
}
}
}
</script>
<style lang="less" scoped>
.item {
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
margin-bottom: 10px;
h2 {
padding: 10px 15px;
border-bottom: 1px solid #efefef;
font-size: 14px;
color: #222;
}
.item_child {
display: flex;
padding: 15px 0;
.child {
width: 33%;
text-align: center;
position: relative;
&:after {
content: "";
position: absolute;
top: 0px;
right: 0;
border-right: 1px solid #efefef;
height: 40px;
}
&:last-child {
&:after {
border-right: 0;
}
}
.child-title {
display: flex;
align-items: center;
justify-content: center;
span {
text-decoration: underline;
font-size: 14px;
color: #388de2;
margin-right: 2px;
}
}
.time {
font-size: 11px;
color: #666;
}
}
img {
width: 19px;
height: 14px;
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailPartTitle.vue 0 → 100644
<template>
<h3 class="section_title">{{title}}</h3>
</template>
<script>
export default {
name: 'DetailPartTitle',
props: {
title: {
type: String
}
}
}
</script>
<style lang="less" scoped>
.section_title {
color: #222222;
font-size: 16px;
padding-left: 6px;
border-left: 2.5px solid #135faa;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailStatement.vue 0 → 100644
<template>
<div class="statement">
声明：本系统所示资料仅作公开披露注册文件及工作流程用途，不构成债务融资工具的发行法律文件，不作为发行债务融资工具的法律依据，不代表交易商协会对债务融资工具的投资价值或投资风险做出任何评价或判断。投资者购买债务融资工具，应当以正式公告的发行文件作为做出投资决定的依据。投资者依据本系统所披露信息做出投资判断的，不利后果将由投资者自行承担。
</div>
</template>
<script>
export default {
name: 'DetailStatement'
}
</script>
<style lang="less" scoped>
.statement {
background-color: rgba(0, 121, 255, 0.04);
padding: 10px;
border-radius: 8px;
line-height: 19px;
color: #333333;
font-size: 12px;
text-align: justify;
margin-bottom: 15px;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailTabs.vue 0 → 100644
<template>
<div class="tab_list" ref="tabList">
<div class="all" v-if="isShowCollapse" @click="changeCollapse">
<span>{{isShowAll ? '全部' : '收起'}}</span>
<img :src="isShowAll ? require('@/assets/icon/all.png') : require('@/assets/icon/up_arrow.png')" alt="">
</div>
<span class="li" v-for="(item,index) in tabList" :key="index" :class="{active: index==isActive}" @click="switchTab(index,item.text)">{{item.text}}</span>
</div>
</template>
<script>
export default {
name: 'DetailTabs',
data() {
return {
isActive: -1,
tabList: [{
id: '1',
text: '募集说明书',
}, {
id: '1',
text: '募集说',
}, {
id: '3',
text: '募集说明书哈',
}, {
id: '4',
text: '募集哈哈',
}],
isShowCollapse: false, // 是否展示全部按钮
isShowAll: true // 全部和收起状态切换
}
},
mounted() {
this.isShowAllButton()
},
methods: {
// 处理是否显示 全部按钮 当tab当字数超过17字符时候 展示全部按钮
isShowAllButton() {
let result = '';
for (let i = 0; i < this.tabList.length; i++) {
result += this.tabList[i].text
}
if (result.length > 17) {
this.isShowCollapse = true
}
},
switchTab(index, type) {
this.isActive = index
this.$emit('type', type)
},
changeCollapse() {
this.isShowAll = !this.isShowAll
if (!this.isShowAll) {
this.$refs.tabList.style.height = 'auto';
this.$refs.tabList.style.overflow = 'inherit';
} else {
this.$refs.tabList.style.height = '47px';
this.$refs.tabList.style.overflow = 'hidden';
}
}
}
}
</script>
<style lang="less" scoped>
.tab_list {
position: relative;
display: flex;
flex-wrap: wrap;
justify-items: center;
align-items: center;
padding: 10px 20px 10px 0;
height: 53px;
overflow: hidden;
.all {
position: absolute;
top: 0;
right: 2px;
z-index: 9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 10px;
span {
color: #666;
font-size: 10px;
line-height: 14px;
}
img {
width: 12px;
height: 12px;
margin-top: 2px;
}
}
.li {
padding: 6px 10px;
background-color: #fff;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
color: #666;
border-radius: 4px;
&.active {
color: #135faa;
background-color: rgba(37, 163, 223, 0.1);
border: 1px solid rgba(16, 106, 188, 1);
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/DetailTitle.vue 0 → 100644
<template>
<h2 class="title">
<span class="status">{{status}}</span>
<span>{{title}}</span>
</h2>
</template>
<script>
export default {
name: 'DetailTitle',
props: {
status: {
type: String
},
title: {
type: String
}
}
}
</script>
<style lang="less" scoped>
.title {
color: #333333;
font-size: 19px;
margin: 15px 0;
line-height: 26px;
.status {
padding: 4px 8px;
font-size: 11px;
color: #ffffff;
border-radius: 15px;
background-color: #3673ba;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/RegIssueList.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="regIssue_content"> <div class="regIssue_content">
<van-list v-model="loading" :finished="finished" finished-text="已经到底了" @load="onLoad"> <van-list v-model="loading" :finished="finished" finished-text="已经到底了" @load="onLoad">
<div class="regIssue_list"> <div class="regIssue_list">
<div class="regIssue_item" v-for="(item,index) in list" :key="index"> <div class="regIssue_item" v-for="(item,index) in list" :key="index" @click="jumpDetail(item.id)">
<h3>{{item.title}}</h3> <h3>{{item.title}}</h3>
<div class="bottom"> <div class="bottom">
<div class="btm_left"> <div class="btm_left">
...@@ -31,11 +31,13 @@ export default { ...@@ -31,11 +31,13 @@ export default {
show: false, show: false,
list: [ list: [
{ {
id: 1,
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告', title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12', time: '2021-4-12',
type: 'MTN' type: 'MTN'
}, },
{ {
id: 2,
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告', title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12', time: '2021-4-12',
type: 'MTN' type: 'MTN'
...@@ -48,6 +50,14 @@ export default { ...@@ -48,6 +50,14 @@ export default {
this.finished = true this.finished = true
this.loading = false this.loading = false
}, },
jumpDetail(id) {
this.$router.push({
name: 'RegIssueDetail',
query: {
id
}
})
}
} }
} }
</script> </script>
......
src/views/regIssue/detail.vue
<template>
<div class="project_container">
<NafmHeader navClass="nafmii-head-bg3" title="项目详情" />
<div class="project_content">
<DetailTitle status="已处理" title="南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册文件" />
<DetailStatement />
<DetailPartTitle title="项目基本信息" />
<DetailBasicInfo :detail="detailInfo" />
<DetailPartTitle title="公开披露文件" />
<DetailTabs @type="getType" />
<DetailList :type="type" />
</div>
</div>
</template>
<script>
import DetailTitle from './components/DetailTitle.vue'
import DetailStatement from './components/DetailStatement.vue'
import DetailPartTitle from './components/DetailPartTitle.vue'
import DetailBasicInfo from './components/DetailBasicInfo.vue'
import DetailTabs from './components/DetailTabs.vue'
import DetailList from './components/DetailList.vue'
export default {
name: 'RegIssueDetail',
components: {
DetailTitle,
DetailStatement,
DetailPartTitle,
DetailBasicInfo,
DetailTabs,
DetailList,
},
data() {
return {
detailInfo: {
companyName: '南京市高淳区城市投资有限公司南京', // 南京市高淳区城市投资有限公司南京市高淳区城市投资有限公司
variety: 'MTN',
record: '注册',
registeredCapital: '8',
leadUnderwriter: 'XXX',
CPAFirm: 'XXX',
lawFirm: 'XXX',
registrationNoticeNo: '中市协注[2021]MTN199号',
updateTime: '2021.05.01',
},
type: ''
}
},
mounted() { },
methods: {
getType(type) {
this.type = type
}
}
}
</script>
<style lang="less" scoped>
.project_container {
width: 100%;
background-color: #fafafa;
}
.project_content {
padding: 15px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!