Commit 52665ae9 by amateur
2 parents e245e3ec 719d9bc9
......@@ -28,6 +28,7 @@
.icon-message { width: 50px; height: 50px; background-position: -1770px -981px; }
.icon-more { width: 10px; height: 18px; background-position: -2050px -775px; }
.icon-password { width: 36px; height: 36px; background-position: -1864px -1169px; }
.icon-pdf-icon { width: 46px; height: 28px; background-position: -1297px -670px; }
.icon-pdf { width: 46px; height: 60px; background-position: -1696px -1055px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; }
.icon-progress-act { width: 36px; height: 36px; background-position: -1920px -1169px; }
......@@ -42,6 +43,7 @@
.icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; }
.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; }
......@@ -4,7 +4,7 @@ const qulificationRouter = [{
meta: {
title: '资质查询'
},
component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/search.vue') // 资质查询
component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/searchHistory.vue') // 资质查询
}, {
path: '/qulification/list',
name: 'QulificationList',
......
......@@ -51,12 +51,7 @@ export default {
this.loading = false
},
jumpDetail(id) {
this.$router.push({
name: 'RegIssueDetail',
query: {
id
}
})
// todo pdf
}
}
}
......
......@@ -16,7 +16,7 @@
</template>
</van-field>
<p class="wraning_tip">
<span v-show="isLogin">{{$t('mlogin.warningTip')}}</span>
<span v-show="warningShow">{{$t('mlogin.warningTip')}}</span>
</p>
<div>
<van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
......@@ -46,6 +46,9 @@ export default {
computed: {
isLogin() {
return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
},
warningShow() {
return !(this.code || this.password || this.checkCode)
}
},
methods: {
......@@ -84,7 +87,7 @@ export default {
align-items: center;
justify-content: center;
.login_form {
width: 330px;
width: 340px;
padding: 20px 0;
background-color: #ffffff;
::v-deep .van-cell:not(:last-child)::after {
......@@ -113,6 +116,7 @@ export default {
}
.wraning_tip {
min-height: 17px;
line-height: 17px;
color: #ea5c6d;
font-size: 12px;
margin-top: 16px;
......
<template>
<div class="qulification_search_container">
<div v-if="isSearch" class="search_bar">
<van-field v-model="searchName" :placeholder="placeholdTxt" @input="inputChange">
<template #label>
<div class="select" :style="searchName && searchName!== '' ? 'opacity: 1' : 'opacity: 0.6'" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</div>
</template>
</van-field>
</div>
<section v-else class="search_box">
<span class="select" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</span>
<div class="visual_input" @click="toListSearch">
<span>{{placeholdTxt}}</span>
</div>
</section>
<van-action-sheet v-model="showSheet" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @select="onSelect" />
</div>
</template>
<script>
export default {
name: 'QulificationSearch',
props: {
isSearch: {
type: Boolean,
default: () => {
return false
}
}
},
computed: {
actions() {
return [this.$t('qulification.searchAction').org, this.$t('qulification.searchAction').product ]
}
},
data() {
return {
qulificationType: '',
placeholdTxt: '',
showSheet: false,
searchName: ''
}
},
created() {
this.defaultInput()
},
methods: {
defaultInput() {
this.qulificationType = this.$t('qulification.searchAction').org.name
this.placeholdTxt = this.$t('qulification.searchAction').org.placeholder
},
onSelect(item) {
this.show = false;
this.qulificationType = item.name;
this.placeholdTxt = this.$t('qulification.searchAction')[item.key].placeholder
this.$emit('select', item)
},
toListSearch() {
this.$router.push({name: 'QulificationList'})
},
inputChange() {
this.$emit('input', this.searchName)
}
}
}
</script>
<style lang="less" scoped>
.search_box {
width: 384px;
margin: 30px auto 25px;
border-radius: 16px;
background-color: rgba(246, 246, 246, 1);
display: flex;
font-size: 12px;
.select {
color: #999999;
display: flex;
align-items: center;
padding: 10px 10px 10px 5px;
.van-icon-search {
margin: 0 11px;
font-size: 12px;
}
.qulification_type {
color: #333333;
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
.visual_input {
// width: 285px;
color: #999999;
padding: 10px 0;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
span {
padding-left: 15px;
border-left: 0.5px solid #999999;
}
}
}
.search_bar {
width: 384px;
padding: 10px 15px;
.van-cell {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.3);
padding: 5px;
line-height: 17px;
::v-deep .van-field__control {
font-size: 12px;
color: #ffffff;
}
::v-deep input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-moz-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
}
::v-deep .van-field__label {
width: auto;
}
.select {
color: #ffffff;
padding: 0 10px 0 5px;
font-size: 12px;
border-right: 0.5px solid #ffffff;
.van-icon-search {
margin: 0 11px;
}
.qulification_type {
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
}
</style>
......@@ -2,17 +2,7 @@
<div class="list_container">
<NafmHeader navClass="nafmii-head-bg3" title="资质查询">
<template slot="bottom">
<div class="search_bar">
<van-field v-model="searchName" placeholder="请输入机构名称">
<template #label>
<div class="select" :style="searchName && searchName!== '' ? 'opacity: 1' : 'opacity: 0.6'">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</div>
</template>
</van-field>
</div>
<search :isSearch="true" v-model="searchName"></search>
</template>
</NafmHeader>
<main class="list_content">
......@@ -20,9 +10,7 @@
<van-cell-group>
<van-cell v-for="item in searchList" :key="item.id" icon="search">
<template slot="title">
<!-- <van-icon name="search" /> -->
<!-- <span>{{item.name.replace(new RegExp(searchName, 'g'), '<span></span>')}}</span> -->
<span>{{item.name}}</span>
<span v-html="highligntTxt(item.name)"></span>
</template>
</van-cell>
</van-cell-group>
......@@ -33,57 +21,20 @@
<script>
export default {
name: 'QulificationList',
components: {
search: ()=>import('./components/search.vue')
},
data() {
return {
searchName: 'aaa',
searchName: '',
qulificationType: '机构',
searchList: [{name: 'aaaaaaabbbbb', id: 111}]
}
}
}
</script>
<style lang="less" scoped>
.search_bar {
width: 384px;
padding: 10px 15px;
.van-cell {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.3);
padding: 0px;
::v-deep .van-field__control {
font-size: 12px;
color: #ffffff;
searchList: []
}
::v-deep input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-moz-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
},
methods: {
highligntTxt(txt) {
return txt.replace(this.searchName, `<font color='#2861AC'>${this.searchName}</font>`)
}
}
}
.select {
color: #ffffff;
display: flex;
align-items: center;
padding: 0 10px 0 5px;
font-size: 12px;
.van-icon-search {
margin: 0 11px;
}
.qulification_type {
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
</style>
</script>
......@@ -5,16 +5,7 @@
<section class="logo">
</section>
<h3 class="search_title">{{$t('qulification.title')}}</h3>
<section class="search_box">
<span class="select" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</span>
<div class="visual_input" @click="toListSearch">
<span>{{placeholdTxt}}</span>
</div>
</section>
<search @select="searchSelect"></search>
<section class="search_history">
<div class="history_header">
<span>{{$t('qulification.history')}}</span>
......@@ -27,26 +18,16 @@
</div>
</section>
</main>
<van-action-sheet v-model="showSheet" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @select="onSelect" />
</div>
</template>
<script>
export default {
name: 'QulificationSearch',
computed: {
actions() {
return [this.$t('qulification.searchAction').org, this.$t('qulification.searchAction').product ]
}
components: {
search: ()=>import('./components/search.vue')
},
data() {
return {
// actions: [
// {name:'机构', type: 'org' },
// {name:'非法人产品', type: 'pro'}
// ],
qulificationType: '',
placeholdTxt: '',
showSheet: false,
historyItems: [{
name: 'jdnskjfnjkds',
id:11111
......@@ -62,23 +43,18 @@ export default {
}
},
created() {
this.defaultInput()
this.searchSelect()
},
methods: {
defaultInput() {
this.qulificationType = this.$t('qulification.searchAction').org.name
this.placeholdTxt = this.$t('qulification.searchAction').org.placeholder
},
onSelect(item) {
this.show = false;
this.qulificationType = item.name;
this.placeholdTxt = this.$t('qulification.searchAction')[item.key].placeholder
},
toListSearch() {
this.$router.push({name: 'QulificationList'})
},
toDetail() {
this.$router.push({name: 'QulificationDetail'})
},
searchSelect(seachType) {
}
}
}
......@@ -101,47 +77,6 @@ export default {
color: #333333;
text-align: center;
}
.search_box {
width: 384px;
margin: 30px auto 25px;
border-radius: 16px;
background-color: rgba(246, 246, 246, 1);
display: flex;
font-size: 12px;
.select {
color: #999999;
display: flex;
align-items: center;
padding: 10px 10px 10px 5px;
.van-icon-search {
margin: 0 11px;
font-size: 12px;
}
.qulification_type {
color: #333333;
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
.visual_input {
// width: 285px;
color: #999999;
padding: 10px 0;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
span {
padding-left: 15px;
border-left: 0.5px solid #999999;
}
}
}
.search_history {
.history_header {
line-height: 25px;
......
<template>
<div class="list_container">
<!-- {{type}} -->
<div class="item" v-for="(item,index) in list" :key="index">
<div class="item" v-for="(item,index) in list" :key="index" v-show="type==1">
<h2>{{item.title}}</h2>
<div class="item_child">
<div class="child" v-for="(childItem,childIndex) in item.arr" :key="childIndex" @click="jumpPdfDetail(childItem)">
......@@ -10,8 +9,19 @@
</div>
</div>
</div>
<div class="item-other">
1
<div class="item-other" v-show="type!=1">
<div class="file-item" v-for="(item,index) in fileList" :key="index" @click="jumpPdfDetail(item)">
<div class="file-title">
<img :src="pdfIcon2">
<span>{{item.title}}</span>
</div>
<div class="file-time">
<div class="file-item-right">
<img :src="timeUpdateIcon" alt="">
<span>更新日期:{{item.time}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -21,12 +31,13 @@ export default {
props: {
type: {
type: String,
default: '1'
}
},
data() {
return {
pdfIcon: require('@/assets/icon/pdf_icon.png'),
pdfIcon2: require('@/assets/icon/pdf.png'),
timeUpdateIcon: require('@/assets/icon/time_update.png'),
list: [
{
title: '无锡产业发展集团有限公司2020年三季度财务报表',
......@@ -49,6 +60,23 @@ export default {
{ time: '2021.4.13', title: '终稿' },
]
}
],
fileList: [
{
id: 1,
title: '【初稿】无锡产业发展集团有限公司2020年三季度财务报表',
time: '2021-4-12 '
},
{
id: 2,
title: '【初稿】无锡产业发展集团有限公司2020年三季度财务报表',
time: '2021-4-13 '
},
{
id: 3,
title: '【初稿】无锡产业发展集团有限公司2020年三季度财务报表',
time: '2021-4-14 '
}
]
}
},
......@@ -124,4 +152,47 @@ export default {
}
}
}
.file-item {
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
.file-title {
padding: 10px 15px 10px 0;
margin-left: 15px;
border-bottom: 1px solid #efefef;
display: flex;
justify-content: space-between;
align-items: center;
img {
width: 22px;
height: 29px;
margin-right: 10px;
}
span {
font-size: 13px;
color: #388de2;
text-decoration: underline;
flex: 1;
}
}
}
.file-time {
padding: 10px 0;
display: flex;
justify-content: flex-end;
.file-item-right {
display: flex;
align-items: center;
img {
width: 15px;
height: 15px;
margin-right: 7px;
}
span {
font-size: 12px;
color: #888d8d;
margin-right: 15px;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!