Skip to content

严立 / cd-bid

Go to a project
Commit 3f66bf67 by 严立
Options

LL - 发票邮寄信息修改

parent 7b7f1087
Inline Side-by-side
Showing with 3694 additions and 3397 deletions
src/common/js/host.js
let output = {
// 测试环境
base: 'http://bid-server.meiqicloud.com/', // 开发路径
// base: '/Api/', // 部署路径
// base: 'http://bid-server.meiqicloud.com/', // 开发路径
base: '/Api/', // 部署路径
resources: 'http://bid-web.meiqicloud.com',
agentSignIn: 'http://bid-vue.meiqicloud.com/'
......
src/components/currency-header.vue
<template>
<!-- 通用组件 - 头部 -->
<div class="components-currency-header row con-c align-c">
<div class="global-maxwidth row con-b">
<div class="about row align-c">
<el-dropdown>
<span class="global-cursor">关注我们</span>
<el-dropdown-menu class="about-code" slot="dropdown">
<el-dropdown-item>
<img src="../assets/code.png" alt="">
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="global-cursor about-consulting" @click="$router.push('/question')">在线咨询</span>
</div>
<div class="row">
<div class="search row">
<el-input v-model="searchKey" placeholder="搜索项目"><i class="el-icon-search"></i></el-input>
<el-button icon="el-icon-search" @click="onRedirectSearch()"></el-button>
</div>
<div v-if="!isSignIn" class="not-sign-in row align-c">
<span class="global-cursor" @click.prevent="onRegister()">注册</span>
<span class="global-cursor" @click.prevent="onSignIn()">登录</span>
</div>
<div v-if="isSignIn" class="sign-in row con-e align-c">
<span class="global-cursor" @mouseenter="onMenuControl('enter')" @click="onMain()">{{info.name}}<i class="el-icon-caret-bottom"></i></span>
<!-- 专家还未初审 -->
<div v-if="winMenu && info.register !== 1 && info.identity === 1" class="menu-specialist" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 专家通过初审 -->
<div v-if="winMenu && info.register === 1 && info.identity === 1" class="menu-specialist" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('bid')">· 我的评标</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 商家还未初审 -->
<div v-if="winMenu && info.register !== 1 && info.identity === 2" class="menu-supplier" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 商家通过初审 -->
<div v-if="winMenu && info.register === 1 && info.identity === 2" class="menu-supplier" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('bid')">· 我的投标</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('auction')">· 我的竞价</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('orders')">· 我的订单</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
searchKey: '',
winMenu: false,
}
},
created: function () {
this.init()
},
computed: {
info: function () {
return this.$store.state.info
},
isSignIn: function () {
return this.$store.state.isSignIn
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
isSignIn: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
if (!funcToken) {
this.$store.commit('isSignIn', false)
this.$store.commit('info', null)
return
}
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.$message.error('登录失效请重新登录！')
this.onSignOut()
break
default:
}
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onSignIn: function () {
this.$router.push('/signIn')
},
onRegister: function () {
this.$router.push('/register')
},
onRedirectSearch: function () {
if (!this.searchKey) {
this.$message.error('请输入搜索内容')
return
}
this.$router.push('/bid?search=' + this.searchKey)
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSpecialist: function (funcType) {
console.log('onSpecialist', funcType)
switch (funcType) {
case 'bid':
this.$router.push('/specialist')
break
case 'info':
this.$router.push('/specialist/info')
break
}
},
onPersonal: function (funcType) {
console.log('onPersonal', funcType)
switch (funcType) {
case 'bid':
this.$router.push('/supplier/bidding')
break
case 'auction':
this.$router.push('/supplier/auction')
break
case 'orders':
this.$router.push('/supplier/orders')
break
case 'info':
this.$router.push('/supplier/info')
break
}
},
onSignOut: function () {
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
},
onMain: function () {
// 审核未通过账号无法通过点击头像进入工作台
if (this.info.register !== 1) return
switch(this.info.identity) {
case 1:
this.$router.push('/specialist')
break
case 2:
this.$router.push('/supplier')
break
}
},
}
}
</script>
<style lang="less">
.components-currency-header {
width: 100%;
height: 36px;
background: #F8F8F8;
.about {
background: #F8F8F8;
.about-consulting {
margin-top: 1px;
}
span {
margin-right: 40px;
font-size: @fontSize00;
color: @colorGrey60;
}
}
.about-code {
border: 1px red solid;
}
.search {
.el-input__inner {
line-height: 1.4;
}
margin-right: 15px;
.el-input {
width: 170px;
}
input {
width: 170px;
height: 28px;
padding-right: 0;
border-radius: 14px 0 0 14px;
border-style: solid none solid solid;
}
button {
width: 38px;
height: 28px;
padding: 0;
border-radius: 0 14px 14px 0;
border-style: solid solid solid none;
}
}
.not-sign-in {
span:nth-child(1) {
width: 42px;
border-right: 1px #acacac dashed;
font-size: @fontSize00;
color: #333333;
}
span:nth-child(2) {
width: 52px;
padding-left: 14px;
font-size: @fontSize00;
color: #333333;
}
}
.sign-in {
z-index: 9;
position: relative;
> span {
white-space: nowrap;
color: @colorGrey20;
font-size: @fontSize00;
}
.menu-specialist {
z-index: 7;
position: absolute;
top: 30px;
width: 190px;
height: 120px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.menu-supplier {
z-index: 7;
position: absolute;
top: 30px;
width: 190px;
min-height: 80px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.menu-group {
display: flex;
flex-wrap: wrap;
padding: 16px 20px;
border-bottom: 1px @colorGrey80 dashed;
.menu-item {
height: 36px;
font-size: @fontSize01;
}
}
.sign-out {
height: 54px;
font-size: @fontSize01;
}
}
}
</style>
<template>
<!-- 通用组件 - 头部 -->
<div class="components-currency-header row con-c align-c">
<div class="global-maxwidth row con-b">
<div class="about row align-c">
<el-dropdown>
<span class="global-cursor">关注我们</span>
<el-dropdown-menu class="about-code" slot="dropdown">
<el-dropdown-item>
<img src="../assets/code.png" alt="">
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="global-cursor about-consulting" @click="$router.push('/question')">在线咨询</span>
</div>
<div class="row">
<div class="search row">
<el-input v-model="searchKey" placeholder="搜索项目"><i class="el-icon-search"></i></el-input>
<el-button icon="el-icon-search" @click="onRedirectSearch()"></el-button>
</div>
<div v-if="!isSignIn" class="not-sign-in row align-c">
<span class="global-cursor" @click.prevent="onRegister()">注册</span>
<span class="global-cursor" @click.prevent="onSignIn()">登录</span>
</div>
<div v-if="isSignIn" class="sign-in row con-e align-c">
<span class="global-cursor" @mouseenter="onMenuControl('enter')" @click="onMain()">{{info.name}}<i class="el-icon-caret-bottom"></i></span>
<!-- 专家还未初审 -->
<div v-if="winMenu && info.register !== 1 && info.identity === 1" class="menu-specialist" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 专家通过初审 -->
<div v-if="winMenu && info.register === 1 && info.identity === 1" class="menu-specialist" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('bid')">· 我的评标</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onSpecialist('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 商家还未初审 -->
<div v-if="winMenu && info.register !== 1 && info.identity === 2" class="menu-supplier" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
<!-- 商家通过初审 -->
<div v-if="winMenu && info.register === 1 && info.identity === 2" class="menu-supplier" @mouseleave="onMenuControl('leave')">
<div class="menu-group row con-b">
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('bid')">· 我的投标</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('auction')">· 我的竞价</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('orders')">· 我的订单</span>
<span class="global-cursor menu-item row con-c align-c" @click.prevent="onPersonal('info')">· 账号管理</span>
</div>
<div class="global-cursor sign-out row con-c align-c">
<span @click="onSignOut()">退出登录</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
searchKey: '',
winMenu: false,
}
},
created: function () {
this.init()
},
computed: {
info: function () {
return this.$store.state.info
},
isSignIn: function () {
return this.$store.state.isSignIn
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
isSignIn: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
if (!funcToken) {
this.$store.commit('isSignIn', false)
this.$store.commit('info', null)
return
}
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.$message.error('登录失效请重新登录！')
this.onSignOut()
break
default:
}
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.info.isJoinBid = Number(funcResponse.isJoinBid) === 0 ? false : true
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onSignIn: function () {
this.$router.push('/signIn')
},
onRegister: function () {
this.$router.push('/register')
},
onRedirectSearch: function () {
if (!this.searchKey) {
this.$message.error('请输入搜索内容')
return
}
this.$router.push('/bid?search=' + this.searchKey)
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSpecialist: function (funcType) {
console.log('onSpecialist', funcType)
switch (funcType) {
case 'bid':
this.$router.push('/specialist')
break
case 'info':
this.$router.push('/specialist/info')
break
}
},
onPersonal: function (funcType) {
console.log('onPersonal', funcType)
switch (funcType) {
case 'bid':
this.$router.push('/supplier/bidding')
break
case 'auction':
this.$router.push('/supplier/auction')
break
case 'orders':
this.$router.push('/supplier/orders')
break
case 'info':
this.$router.push('/supplier/info')
break
}
},
onSignOut: function () {
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
},
onMain: function () {
// 审核未通过账号无法通过点击头像进入工作台
if (this.info.register !== 1) return
switch(this.info.identity) {
case 1:
this.$router.push('/specialist')
break
case 2:
this.$router.push('/supplier')
break
}
},
}
}
</script>
<style lang="less">
.components-currency-header {
width: 100%;
height: 36px;
background: #F8F8F8;
.about {
background: #F8F8F8;
.about-consulting {
margin-top: 1px;
}
span {
margin-right: 40px;
font-size: @fontSize00;
color: @colorGrey60;
}
}
.about-code {
border: 1px red solid;
}
.search {
.el-input__inner {
line-height: 1.4;
}
margin-right: 15px;
.el-input {
width: 170px;
}
input {
width: 170px;
height: 28px;
padding-right: 0;
border-radius: 14px 0 0 14px;
border-style: solid none solid solid;
}
button {
width: 38px;
height: 28px;
padding: 0;
border-radius: 0 14px 14px 0;
border-style: solid solid solid none;
}
}
.not-sign-in {
span:nth-child(1) {
width: 42px;
border-right: 1px #acacac dashed;
font-size: @fontSize00;
color: #333333;
}
span:nth-child(2) {
width: 52px;
padding-left: 14px;
font-size: @fontSize00;
color: #333333;
}
}
.sign-in {
z-index: 9;
position: relative;
> span {
white-space: nowrap;
color: @colorGrey20;
font-size: @fontSize00;
}
.menu-specialist {
z-index: 7;
position: absolute;
top: 30px;
width: 190px;
height: 120px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.menu-supplier {
z-index: 7;
position: absolute;
top: 30px;
width: 190px;
min-height: 80px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.menu-group {
display: flex;
flex-wrap: wrap;
padding: 16px 20px;
border-bottom: 1px @colorGrey80 dashed;
.menu-item {
height: 36px;
font-size: @fontSize01;
}
}
.sign-out {
height: 54px;
font-size: @fontSize01;
}
}
}
</style>
src/components/notice-file.vue
<template>
<!-- 下载模板 - 附件下载 -->
<div v-if="componentFile.length > 0" class="components-file">
<div class="row align-c">
<span>文件预览</span>
</div>
<div class="col">
<div class="list row align-c" v-for="(item, index) in componentFile" :key="index" @click="onDownload(item)">
<img src="../assets/notice-file.png" alt="">
<div class="row align-c">{{item.name}}</div>
<div class="row align-c">预览</div>
</div>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
export default {
data () {
return {
file: ''
}
},
computed: {
componentFile: function () {
return this.$store.state.componentFile
},
},
watch: {
componentFile: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
}
},
methods: {
onDownload: function (funcItem) {
// 下载文档
// window.open(iHost.base + funcItem.url)
// 预览组件
let routeData = this.$router.resolve({　path:'/file?file=' + encodeURIComponent(funcItem.url) })
window.open(routeData.href, '_blank')
}
}
}
</script>
<style lang="less">
.components-file {
width: 100%;
padding-bottom: 20px;
background: #F2F2F2;
> div:nth-child(1) {
height: 60px;
padding: 0 24px;
border-bottom: 1px #E5E5E5 solid;
font-size: @fontSize04;
}
> div:nth-child(2) {
padding: 0 24px;
.list {
width: 100%;
margin-top: 20px;
font-size: @fontSize01;
cursor: pointer;
div:nth-child(2) {
flex-grow: 1;
padding-left: 4px;
text-decoration: underline;
cursor: pointer;
}
div:nth-child(3) {
cursor: pointer;
}
}
}
}
</style>
<template>
<!-- 下载模板 - 附件下载 -->
<div v-if="componentFile.length > 0" class="components-file">
<div class="row align-c">
<span>文件预览</span>
</div>
<div class="col">
<div class="list row align-c" v-for="(item, index) in componentFile" :key="index" @click="onDownload(item)">
<img src="../assets/notice-file.png" alt="">
<div class="row align-c">{{item.name}}</div>
<div class="row align-c">预览</div>
</div>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
export default {
data () {
return {
file: ''
}
},
computed: {
componentFile: function () {
return this.$store.state.componentFile
},
},
watch: {
componentFile: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
}
},
methods: {
onDownload: function (funcItem) {
console.log('onDownload')
// 未登录的全部跳转登录界面
if (!this.$store.getters.isSignIn) {
this.$message.error('请先登录后查看')
this.$store.commit('redirectPath', this.$route.fullPath)
this.$router.push('/signIn')
return
}
console.log('this.$store.getters.info', this.$store.getters.info)
if (this.$store.getters.info.register !== 1) {
this.$message.error('注册信息审核通过才可以进行预览')
return
}
// 下载文档
// window.open(iHost.base + funcItem.url)
// 预览组件
let routeData = this.$router.resolve({　path:'/file?file=' + encodeURIComponent(funcItem.url) })
window.open(routeData.href, '_blank')
}
}
}
</script>
<style lang="less">
.components-file {
width: 100%;
padding-bottom: 20px;
background: #F2F2F2;
> div:nth-child(1) {
height: 60px;
padding: 0 24px;
border-bottom: 1px #E5E5E5 solid;
font-size: @fontSize04;
}
> div:nth-child(2) {
padding: 0 24px;
.list {
width: 100%;
margin-top: 20px;
font-size: @fontSize01;
cursor: pointer;
div:nth-child(2) {
flex-grow: 1;
padding-left: 4px;
text-decoration: underline;
cursor: pointer;
}
div:nth-child(3) {
cursor: pointer;
}
}
}
}
</style>
src/components/notice-progress.vue
......@@ -74,13 +74,13 @@
<div class="col con-c align-c">
<img v-if="componentProject.noticeType === 0" class="operate-img" src="../assets/notice-bitton.png" alt="">
<div v-if="operateText !== ''" class="operate-button">
<button v-if="[2].indexOf(componentProgress.state) >= 0" class="global-enable" @click="onOffer()">立即报价</button>
<button v-if="[0, 2].indexOf(componentProgress.state) >= 0" class="global-enable" @click="onOffer()">立即报价</button>
<button v-if="[3, 4].indexOf(componentProgress.state) >= 0" class="global-disable" disabled>报价已结束</button>
<button v-if="[5].indexOf(componentProgress.state) >= 0" class="global-disable" disabled>报价已暂停</button>
<button v-if="[6].indexOf(componentProgress.state) >= 0" class="global-disable" disabled>报价已终止</button>
</div>
<div class="operate-tip">
<span v-if="progressState === 1">距离报价开始仅剩 <span class="global-color-red">{{operateDay}}</span> 天 <span class="global-color-red">{{operateHour}}</span> 小时</span>
<span v-if="progressState === 1 && !([5, 6].indexOf(componentProgress.state) >= 0)">距离报价开始仅剩 <span class="global-color-red">{{operateDay}}</span> 天 <span class="global-color-red">{{operateHour}}</span> 小时</span>
<span v-if="[2].indexOf(componentProgress.state) >= 0 && !operateIsBuy">报价仅剩 <span class="global-color-red">{{operateDay}}</span> 天 <span class="global-color-red">{{operateHour}}</span> 小时</span>
</div>
</div>
......
src/components/notice-project.vue
......@@ -345,10 +345,10 @@
<span>联系电话：</span>
<span>{{componentProject.buyPhone}}</span>
</div>
<div class="item-text row align-c">
<!-- <div class="item-text row align-c">
<span>竞价时间：</span>
<span>{{componentProject.timeBegin + '　-　' + componentProject.timeEnd}}</span>
</div>
</div> -->
</div>
</div>
</template>
......
src/router/router.js
import Vue from 'vue'
import Router from 'vue-router'
// 解决跳转重复路径报错问题
let funcRouterPush = Router.prototype.push
Router.prototype.push = function push(funcPath) {
return funcRouterPush.call(this, funcPath).catch(funcError => funcError)
}
Vue.use(Router)
export default new Router({
mode : 'history',
routes: [
{ path: '/', name: 'home', mapText: '首页', component: () => import('@/view/home.vue') },
{ path: '/signIn', component: () => import('@/view/sign-in.vue'),
children: [
{ path: '/', name: 'signInStatus', mapText: '登录身份', component: () => import('@/view/sign-in-status.vue') },
{ path: 'input', name: 'signInInput', mapText: '登录', component: () => import('@/view/sign-in-input.vue') },
{ path: 'forget', name: 'signInForget', mapText: '忘记密码', component: () => import('@/view/sign-in-forget.vue') },
]
},
{ path: '/register', component: () => import('@/view/register.vue'),
children: [
{ path: '/', name: 'registerStatus', mapText: '注册身份', component: () => import('@/view/register-status.vue') },
{ path: 'supplier', name: 'registerSupplier', mapText: '供应商注册', component: () => import('@/view/register-supplier.vue') },
{ path: 'specialist', name: 'registerSpecialist', mapText: '专家注册', component: () => import('@/view/register-specialist.vue') },
]
},
{ path: '/bid', component: () => import('@/view/public/bid.vue'),
children: [
{ path: '/', name: 'bidList', mapText: '招标公告', component: () => import('@/view/public/bid-list.vue') },
{ path: 'notice', name: 'bidNotice', mapText: '公告详情', component: () => import('@/view/public/bid-notice.vue') },
{ path: 'buy', name: 'buy', mapText: '订单确认', component: () => import('@/view/public/bid-buy.vue') },
{ path: 'buyresult', name: 'buyResult', mapText: '完成报名', component: () => import('@/view/public/bid-buy-result.vue') },
]
},
{ path: '/policy', component: () => import('@/view/public/policy.vue'),
children: [
{ path: '/', name: 'policyList', mapText: '政策法规', component: () => import('@/view/public/policy-list.vue') },
{ path: 'details', name: 'policyDetails', mapText: '政策法规详情', component: () => import('@/view/public/policy-details.vue') },
]
},
{ path: '/trends', component: () => import('@/view/public/trends.vue'),
children: [
{ path: '/', name: 'trendsList', mapText: '招标动态', component: () => import('@/view/public/trends-list.vue') },
{ path: 'details', name: 'trendsDetails', mapText: '招标动态详情', component: () => import('@/view/public/trends-details.vue') },
]
},
{ path: '/question', component: () => import('@/view/public/question.vue'),
children: [
{ path: '/', name: 'question', mapText: '在线咨询', component: () => import('@/view/public/question-list.vue') },
{ path: 'input', name: 'questionInput', mapText: '填写咨询', component: () => import('@/view/public/question-input.vue') },
{ path: 'detail', name: 'questionDetail', mapText: '咨询详情', component: () => import('@/view/public/question-detail.vue') },
]
},
{ path: '/help', component: () => import('@/view/public/help.vue'),
children: [
{ path: '/', name: 'help', mapText: '帮助中心', component: () => import('@/view/public/help-list.vue') },
]
},
// { path: '/about', name: 'about', mapText: '关于我们', component: () => import('@/view/about.vue') },
{ path: '/file', name: 'file', mapText: '预览', component: () => import('@/view/pdf.vue') },
// 用户中心 - 商家
{ path: '/supplier', component: () => import('@/view/personal/supplier.vue'),
children: [
{ path: '/', name: 'supplier', mapText: '工作台首页', component: () => import('@/view/personal/supplier-home.vue') },
{ path: 'bidding', name: 'supplierBid', mapText: '我的投标项目', component: () => import('@/view/personal/supplier-biding.vue') },
{ path: 'auction', name: 'supplierAuction', mapText: '我的竞价项目', component: () => import('@/view/personal/supplier-auction.vue') },
{ path: 'detail', name: 'supplierDetail', mapText: '详情', component: () => import('@/view/personal/supplier-notice.vue') },
{ path: 'orders', name: 'supplierOrders', mapText: '我的订单', component: () => import('@/view/personal/supplier-orders.vue') },
{ path: 'ordersdetail', name: 'supplierOrdersDetail', mapText: '订单详情', component: () => import('@/view/personal/supplier-orders-detail.vue') },
{ path: 'ordersbills', name: 'supplierOrdersBills', mapText: '申请开票', component: () => import('@/view/personal/supplier-orders-bills.vue') },
{ path: 'info', name: 'supplierInfo', mapText: '企业信息', component: () => import('@/view/personal/supplier-info.vue') },
{ path: 'infochange', name: 'supplierInfoChange', mapText: '修改企业信息', component: () => import('@/view/personal/supplier-info-change.vue') },
{ path: 'inforecord', name: 'supplierInfoRecord', mapText: '审核记录', component: () => import('@/view/personal/supplier-info-record.vue') },
{ path: 'infophone', name: 'supplierInfoPhone', mapText: '更换手机号码', component: () => import('@/view/personal/supplier-info-phone.vue') },
{ path: 'infopassword', name: 'supplierInfoPassword', mapText: '修改登录密码', component: () => import('@/view/personal/supplier-info-password.vue') },
{ path: 'notify', name: 'supplierNotify', mapText: '我的通知', component: () => import('@/view/personal/supplier-notify.vue') },
]
},
// 用户中心 - 专家
{ path: '/specialist', component: () => import('@/view/specialist/specialist.vue'),
children: [
{ path: '/', name: 'specialist', mapText: '我评标的项目', component: () => import('@/view/specialist/specialist-home.vue') },
{ path: 'info', name: 'specialistInfo', mapText: '我的信息', component: () => import('@/view/specialist/specialist-info.vue') },
{ path: 'infochange', name: 'specialistInfoChange', mapText: '修改我的信息', component: () => import('@/view/specialist/specialist-info-change.vue') },
{ path: 'inforecord', name: 'specialistInfoRecord', mapText: '审核记录', component: () => import('@/view/specialist/specialist-info-record.vue') },
{ path: 'infophone', name: 'specialistInfoPhone', mapText: '更换手机号码', component: () => import('@/view/specialist/specialist-info-phone.vue') },
{ path: 'infopassword', name: 'specialistInfoPassword', mapText: '修改登录密码', component: () => import('@/view/specialist/specialist-info-password.vue') },
{ path: 'notify', name: 'specialistNotify', mapText: '我的通知', component: () => import('@/view/specialist/specialist-notify.vue') },
]
},
{ path: '*', name: '404', meta: { title: '404' }, component: () => import('@/view/404.vue')}
],
scrollBehavior(to, from, savedPosition) {
return {
x: 0,
y: 0,
}
}
import Vue from 'vue'
import Router from 'vue-router'
// 解决跳转重复路径报错问题
let funcRouterPush = Router.prototype.push
Router.prototype.push = function push(funcPath) {
return funcRouterPush.call(this, funcPath).catch(funcError => funcError)
}
Vue.use(Router)
export default new Router({
mode : 'history',
routes: [
{ path: '/', name: 'home', mapText: '首页', component: () => import('@/view/home.vue') },
{ path: '/signIn', component: () => import('@/view/sign-in.vue'),
children: [
{ path: '/', name: 'signInStatus', mapText: '登录身份', component: () => import('@/view/sign-in-status.vue') },
{ path: 'input', name: 'signInInput', mapText: '登录', component: () => import('@/view/sign-in-input.vue') },
{ path: 'forget', name: 'signInForget', mapText: '忘记密码', component: () => import('@/view/sign-in-forget.vue') },
]
},
{ path: '/register', component: () => import('@/view/register.vue'),
children: [
{ path: '/', name: 'registerStatus', mapText: '注册身份', component: () => import('@/view/register-status.vue') },
{ path: 'supplier', name: 'registerSupplier', mapText: '供应商注册', component: () => import('@/view/register-supplier.vue') },
{ path: 'specialist', name: 'registerSpecialist', mapText: '专家注册', component: () => import('@/view/register-specialist.vue') },
]
},
{ path: '/bid', component: () => import('@/view/public/bid.vue'),
children: [
{ path: '/', name: 'bidList', mapText: '招标公告', component: () => import('@/view/public/bid-list.vue') },
{ path: 'notice', name: 'bidNotice', mapText: '公告详情', component: () => import('@/view/public/bid-notice.vue') },
{ path: 'buy', name: 'buy', mapText: '订单确认', component: () => import('@/view/public/bid-buy.vue') },
{ path: 'buyresult', name: 'buyResult', mapText: '完成报名', component: () => import('@/view/public/bid-buy-result.vue') },
]
},
{ path: '/policy', component: () => import('@/view/public/policy.vue'),
children: [
{ path: '/', name: 'policyList', mapText: '政策法规', component: () => import('@/view/public/policy-list.vue') },
{ path: 'details', name: 'policyDetails', mapText: '政策法规详情', component: () => import('@/view/public/policy-details.vue') },
]
},
{ path: '/trends', component: () => import('@/view/public/trends.vue'),
children: [
{ path: '/', name: 'trendsList', mapText: '招标动态', component: () => import('@/view/public/trends-list.vue') },
{ path: 'details', name: 'trendsDetails', mapText: '招标动态详情', component: () => import('@/view/public/trends-details.vue') },
]
},
{ path: '/question', component: () => import('@/view/public/question.vue'),
children: [
{ path: '/', name: 'question', mapText: '在线咨询', component: () => import('@/view/public/question-list.vue') },
{ path: 'input', name: 'questionInput', mapText: '填写咨询', component: () => import('@/view/public/question-input.vue') },
{ path: 'detail', name: 'questionDetail', mapText: '咨询详情', component: () => import('@/view/public/question-detail.vue') },
]
},
{ path: '/help', component: () => import('@/view/public/help.vue'),
children: [
{ path: '/', name: 'help', mapText: '帮助中心', component: () => import('@/view/public/help-list.vue') },
]
},
// { path: '/about', name: 'about', mapText: '关于我们', component: () => import('@/view/about.vue') },
{ path: '/file', name: 'file', mapText: '预览', component: () => import('@/view/pdf.vue') },
// 用户中心 - 商家
{ path: '/supplier', component: () => import('@/view/personal/supplier.vue'),
children: [
{ path: '/', name: 'supplier', mapText: '工作台首页', component: () => import('@/view/personal/supplier-home.vue') },
{ path: 'bidding', name: 'supplierBid', mapText: '我的投标项目', component: () => import('@/view/personal/supplier-biding.vue') },
{ path: 'auction', name: 'supplierAuction', mapText: '我的竞价项目', component: () => import('@/view/personal/supplier-auction.vue') },
{ path: 'detail', name: 'supplierDetail', mapText: '详情', component: () => import('@/view/personal/supplier-notice.vue') },
{ path: 'orders', name: 'supplierOrders', mapText: '我的订单', component: () => import('@/view/personal/supplier-orders.vue') },
{ path: 'ordersdetail', name: 'supplierOrdersDetail', mapText: '订单详情', component: () => import('@/view/personal/supplier-orders-detail.vue') },
{ path: 'ordersbills', name: 'supplierOrdersBills', mapText: '申请开票', component: () => import('@/view/personal/supplier-orders-bills.vue') },
{ path: 'info', name: 'supplierInfo', mapText: '企业信息', component: () => import('@/view/personal/supplier-info.vue') },
{ path: 'infochange', name: 'supplierInfoChange', mapText: '修改企业信息', component: () => import('@/view/personal/supplier-info-change.vue') },
{ path: 'inforecord', name: 'supplierInfoRecord', mapText: '审核记录', component: () => import('@/view/personal/supplier-info-record.vue') },
{ path: 'infophone', name: 'supplierInfoPhone', mapText: '更换手机号码', component: () => import('@/view/personal/supplier-info-phone.vue') },
{ path: 'infopassword', name: 'supplierInfoPassword', mapText: '修改登录密码', component: () => import('@/view/personal/supplier-info-password.vue') },
{ path: 'notify', name: 'supplierNotify', mapText: '我的通知', component: () => import('@/view/personal/supplier-notify.vue') },
]
},
// 用户中心 - 专家
{ path: '/specialist', component: () => import('@/view/specialist/specialist.vue'),
children: [
{ path: '/', name: 'specialist', mapText: '我评标的项目', component: () => import('@/view/specialist/specialist-home.vue') },
{ path: 'info', name: 'specialistInfo', mapText: '我的信息', component: () => import('@/view/specialist/specialist-info.vue') },
{ path: 'infochange', name: 'specialistInfoChange', mapText: '修改我的信息', component: () => import('@/view/specialist/specialist-info-change.vue') },
{ path: 'inforecord', name: 'specialistInfoRecord', mapText: '审核记录', component: () => import('@/view/specialist/specialist-info-record.vue') },
{ path: 'infophone', name: 'specialistInfoPhone', mapText: '更换手机号码', component: () => import('@/view/specialist/specialist-info-phone.vue') },
{ path: 'infopassword', name: 'specialistInfoPassword', mapText: '修改登录密码', component: () => import('@/view/specialist/specialist-info-password.vue') },
{ path: 'notify', name: 'specialistNotify', mapText: '我的通知', component: () => import('@/view/specialist/specialist-notify.vue') },
]
},
{ path: '*', name: '404', meta: { title: '404' }, component: () => import('@/view/404.vue')}
],
scrollBehavior(to, from, savedPosition) {
return {
x: 0,
y: 0,
}
}
})
\ No newline at end of file
src/view/home.vue
......@@ -17,9 +17,11 @@
<!-- 今日开标 -->
<div class="new-bid row con-c">
<div class="global-maxwidth row con-b">
<!--
下次更新内容，暂时隐藏。
<div class="calendar">
<span class="calendar-title">开标日历</span>
<calendar :markDate="['2020/10/13','2020/10/14']"></calendar>
<calendar :markDate="calendarMarkDate"></calendar>
</div>
<div>
<div class="row align-e">
......@@ -37,6 +39,24 @@
<span>今日暂无开标项目</span>
</div>
</div>
-->
<div>
<div class="row align-e">
<span class="title">今日开标</span>
<span class="title-extra global-color-red">{{timeDate + '开标项目'}}</span>
</div>
<div v-if="listBid.length" class="list col">
<div class="global-hover row con-b align-e" v-for="(item, index) in listBid" :key="index" @click="onDetail(item)">
<span class="global-cursor global-overflow-ellipsis ">{{item.noticeTitle}}</span>
<span>{{item.timeRelease}}</span>
</div>
</div>
<div v-if="!listBid.length" class="nothing col con-c align-c">
<img src="../assets/nothing.png" alt="">
<span>今日暂无开标项目</span>
</div>
</div>
<!-- 未登录状态展示 -->
<div v-if="!isSignIn" class="home-signin col">
<div class="home-signin-entry row">
......@@ -264,6 +284,8 @@
dealIndex: 0, // 最新交易缓存数组索引
dealActive: 0, // 最新交易选中
dealMax: 0, // 最新交易数据条目
calendarMarkDate: [],
}
},
computed: {
......@@ -297,7 +319,9 @@
this.queryNotice(2, 0)
this.onQueryAuction(0)
this.queryData()
this.queryBidMark()
},
methods: {
queryNotify: function () {
if (this.info.identity) {
......@@ -355,6 +379,42 @@
console.log(funcError)
})
},
queryBidMark: function () {
let funcResponse = [{
date: '2020-10-13',
quantity: 8,
}, {
date: '2020-10-15',
quantity: 9,
}, {
date: '2020-10-18',
quantity: 12,
}, {
date: '2020-10-21',
quantity: 14,
}]
let funcMarkDate = []
let funcMarkQuantity = []
let funcMarkQuantityCss = ''
for (let i = 0, l = funcResponse.length; i < l; i++) {
funcMarkDate.push(iMiment(funcResponse[i].date).format('YYYY/MM/DD'))
funcMarkQuantity.push(funcResponse[i].quantity)
}
this.calendarMarkDate = funcMarkDate
this.$nextTick(function () {
let funcMark = document.getElementsByClassName('wh_isMark')
console.log(funcMark)
for (let i = 0, l = funcMark.length; i < l; i++) {
funcMark[i].setAttribute( 'data-content' , funcMarkQuantity[i] )
}
})
},
setHome: function () {
this.setBid()
this.setNew()
......@@ -499,9 +559,7 @@
*/
onMoreNotice: function () {
let funcNoticeIndex = this.noticeTab[this.noticeTabActive].value
console.log(funcNoticeIndex)
let funcNoticeUrl = this.$router.resolve({ path: '/bid', query: { type: funcNoticeIndex } })
window.open(funcNoticeUrl .href, '_blank')
let funcNoticeUrl = this.$router.push({ path: '/bid', query: { type: funcNoticeIndex } })
},
/**
* 公告点击跳转详情
......@@ -715,12 +773,16 @@
.wh_isMark::after {
position: absolute;
bottom: 4px;
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
right: 0;
bottom: 0;
content: attr(data-content);
width: 20px;
height: 16px;
background: #D02F1E;
font-size: 12px;
line-height: 20px;
}
.wh_isToday {
......@@ -756,7 +818,8 @@
padding-bottom: 4px;
}
.list {
width: 750px;
width: 940px;
// width: 750px;
span:nth-child(1) {
max-width: 830px;
margin-top: 32px;
......@@ -768,7 +831,8 @@
}
}
.nothing {
width: 750px;
width: 940px;
// width: 750px;
height: 200px;
img {
height: 100px;
......@@ -776,9 +840,9 @@
}
}
.home-signin {
position: absolute;
top: 60px;
right: 0;
// position: absolute;
// top: 60px;
// right: 0;
width: 206px;
height: 300px;
padding: 24px 0;
......
src/view/personal/component/personal-header.vue
<template>
<!-- 通用组件 - 头部 -->
<div class="components-personal-header row con-b align-c" @mouseleave="onMenuControl('leave')">
<div class="title">
<span>我的工作台</span>
</div>
<div class="personal row align-c">
<img class="global-cursor" src="../../../assets/currency-map.png" alt="" @click="$router.push('/')">
<el-badge :is-dot="isNewNotice" class="row align-c">
<img class="global-cursor" src="../../../assets/notice-tip.png" alt="" @click="$router.push('/supplier/notify')">
</el-badge>
<span>{{info ? info.name : ''}}</span>
<span class="global-cursor" @click="onSignOut()">退出</span>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
isNewNotice: false,
winMenu: false,
}
},
computed: {
info: function () {
return this.$store.state.info
},
notify: function () {
return this.$store.state.notify
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
notify: {
handler: function (funcNewValue, funcOldValue) {
this.queryNotice()
},
deep: true,
immediate: true,
}
},
created: function () {
this.init()
this.queryNotice()
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
console.log('funcToken - 2', funcToken)
if (!funcToken) {
this.$router.push('/signIn')
return
}
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.onSignOut()
break
}
},
queryNotice: function () {
iRequest.request(iHost.base + 'bid/zNotification/countUnread', { 'userType': 2 }, 'json', 'post')
.then((funcResponse) => {
if (funcResponse.count > 0) {
this.isNewNotice = true
} else {
this.isNewNotice = false
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSignOut: function () {
this.$router.push('/')
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
}
}
}
</script>
<style lang="less">
.components-personal-header {
width: 100%;
height: 60px;
padding: 0 40px;
background-image: url(../../../assets/bg-title.png);
background-repeat: no-repeat;
.title {
color: #FFFFFF;
}
.personal {
position: relative;
height: 100%;
color: #FFFFFF;
span {
margin-left: 20px;
}
img {
width: 16px;
height: 16px;
margin-left: 12px;
}
}
}
</style>
<template>
<!-- 通用组件 - 头部 -->
<div class="components-personal-header row con-b align-c" @mouseleave="onMenuControl('leave')">
<div class="title">
<span>我的工作台</span>
</div>
<div class="personal row align-c">
<img class="global-cursor" src="../../../assets/currency-map.png" alt="" @click="$router.push('/')">
<el-badge :is-dot="isNewNotice" class="row align-c">
<img class="global-cursor" src="../../../assets/notice-tip.png" alt="" @click="$router.push('/supplier/notify')">
</el-badge>
<span>{{info ? info.name : ''}}</span>
<span class="global-cursor" @click="onSignOut()">退出</span>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
isNewNotice: false,
winMenu: false,
}
},
computed: {
info: function () {
return this.$store.state.info
},
notify: function () {
return this.$store.state.notify
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
notify: {
handler: function (funcNewValue, funcOldValue) {
this.queryNotice()
},
deep: true,
immediate: true,
}
},
created: function () {
this.init()
this.queryNotice()
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
console.log('funcToken - 2', funcToken)
if (!funcToken) {
this.$router.push('/signIn')
return
}
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.onSignOut()
break
}
},
queryNotice: function () {
iRequest.request(iHost.base + 'bid/zNotification/countUnread', { 'userType': 2 }, 'json', 'post')
.then((funcResponse) => {
if (funcResponse.count > 0) {
this.isNewNotice = true
} else {
this.isNewNotice = false
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.info.isJoinBid = Number(funcResponse.isJoinBid) === 0 ? false : true
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSignOut: function () {
this.$router.push('/')
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
}
}
}
</script>
<style lang="less">
.components-personal-header {
width: 100%;
height: 60px;
padding: 0 40px;
background-image: url(../../../assets/bg-title.png);
background-repeat: no-repeat;
.title {
color: #FFFFFF;
}
.personal {
position: relative;
height: 100%;
color: #FFFFFF;
span {
margin-left: 20px;
}
img {
width: 16px;
height: 16px;
margin-left: 12px;
}
}
}
</style>
src/view/personal/supplier-info-change.vue
<template>
<!-- 账号管理 - 企业信息 - 修改信息 -->
<div class="supplier-info">
<!-- 页面地图 -->
<div class="supplier-map row align-c">
<currencyMap :customPath="[{ text: '企业信息', redirect: '/supplier/info' }, { text: '修改企业信息', redirect: null }]"></currencyMap>
</div>
<div class="supplier-set col">
<div class="detail-title row align-c">
<span>基本信息</span>
</div>
<div class="detail-content">
<el-form ref="formBase" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="公司名称：" prop="companyName">
<el-input v-model="formRegister.companyName" maxlength="60" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="公司简称：" prop="companyShortName">
<el-input v-model="formRegister.companyShortName" maxlength="6" placeholder="请输入公司简称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="companyCode">
<el-input v-if="info.register !== 1" v-model="formRegister.companyCode" maxlength="18" placeholder="请输入统一社会信用代码"></el-input>
<span v-if="info.register === 1">{{formRegister.companyCode}}</span>
</el-form-item>
<el-form-item label="登记地址：" prop="companyAddress">
<el-input v-model="formRegister.companyAddress" maxlength="100" placeholder="请输入登记地址"></el-input>
</el-form-item>
<el-form-item label="机构邮箱：" prop="email">
<el-input v-model="formRegister.email" maxlength="50" placeholder="请输入机构邮箱"></el-input>
</el-form-item>
<el-form-item class="register-info-certificate" label="上传营业执照：" prop="licenseImage">
<!-- 此处 input 是为了模拟校验而设置的隐藏组件 -->
<el-input class="global-none" v-model="formRegister.licenseImage"></el-input>
<el-upload
class="upload-image"
:class="uploadOption.license.image.length > 0 ? 'upload-none' : ''"
ref="uploadLicense"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:file-list="uploadOption.license.image"
:action="uploadOption.license.url"
:data="uploadOption.license.params"
:on-preview="onUploadPreviewFile"
:on-remove="(file, fileList) => { onUploadRemove('license', file, fileList) }"
:on-change="(file, fileList) => { onUploadChange('license', file, fileList) }"
:on-success="(respons, file, fileList) => { onUploadSuccess('license', respons, file, fileList) }"
:on-error="(error) => { onUploadFail('license', error) }"
>
<div class="col">
<i class="el-icon-plus"></i>
<span>点击上传营业执照</span>
</div>
<div slot="tip" class="el-upload__tip">
<span>复印件需盖有公司印章，大小不超过5MB</span>
</div>
</el-upload>
<div>
<img src="../../assets/register-certificate.png" alt="">
</div>
</el-form-item>
<el-form-item label="是否参与网上竞价：" prop="isQuote">
<div>
<el-radio-group v-model="formRegister.isQuote">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item v-if="formRegister.isQuote === '1'" label="上传竞价承诺书：" prop="quoteImage">
<!-- 此处 input 是为了模拟校验而设置的隐藏组件 -->
<el-input class="global-none" v-model="formRegister.quoteImage"></el-input>
<el-upload
class="upload-file"
ref="uploadQuote"
:auto-upload="false"
:limit="1"
:file-list="uploadOption.quote.image"
:action="uploadOption.quote.url"
:data="uploadOption.quote.params"
:on-preview="onUploadDownloadFile"
:on-remove="(file, fileList) => { onUploadRemove('quote', file, fileList) }"
:on-change="(file, fileList) => { onUploadChange('quote', file, fileList) }"
:on-success="(respons, file, fileList) => { onUploadSuccess('quote', respons, file, fileList) }"
:on-error="(error) => { onUploadFail('quote', error) }"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span>（请查看</span>
<span class="global-color-red">网上竞价须知</span>
<span>，并下载</span>
<span class="global-cursor global-color-red" @click="onLoadStatement">网上竞价承诺书</span>
<span>，签名盖章后扫描上传，文件大小不超过5MB）</span>
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
<div class="detail-title row align-c">
<span>税务信息</span>
</div>
<div class="detail-content">
<el-form ref="formTax" key="formTax" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="税务资质(单选)：" prop="companyTax">
<el-radio-group v-model="formRegister.companyTax" :value="formRegister.companyTax">
<el-radio label="0">一般纳税人</el-radio>
<el-radio label="1">小规模纳税人</el-radio>
<el-radio label="2">非增值纳税人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="发票类型(可多选)：" prop="companyInvoice">
<el-checkbox-group v-model="formRegister.companyInvoice">
<el-checkbox label="增值税专票"></el-checkbox>
<el-checkbox label="增值税普票"></el-checkbox>
<el-checkbox label="其他类型"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="公司名称：" prop="companyName">
<span>{{formRegister.companyName}}</span>
</el-form-item>
<el-form-item label="纳税识别号：" prop="companyCode">
<span>{{formRegister.companyCode}}</span>
</el-form-item>
<el-form-item label="税务登记地址：" prop="companyAddress">
<span>{{formRegister.companyAddress}}</span>
</el-form-item>
<el-form-item label="公司电话：" prop="companyPhone">
<el-input v-model="formRegister.companyPhone" maxlength="20" placeholder="请输入公司电话"></el-input>
</el-form-item>
<el-form-item label="开户行：" prop="bankName">
<el-input v-model="formRegister.bankName" maxlength="20" placeholder="请输入开户行"></el-input>
</el-form-item>
<el-form-item label="银行账户：" prop="bankAccount">
<el-input v-model="formRegister.bankAccount" maxlength="30" placeholder="请输入银行账户"></el-input>
</el-form-item>
</el-form>
</div>
<div class="detail-title row align-c">
<span>联系人信息</span>
</div>
<div class="detail-content">
<el-form ref="formPhone" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="联系人姓名：" prop="corporationName">
<el-input v-model="formRegister.corporationName" maxlength="30" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号：" prop="corporationIdcard">
<el-input v-model="formRegister.corporationIdcard" maxlength="18" placeholder="请输入身份证号"></el-input>
</el-form-item>
<el-form-item label="联系人手机号：" prop="corporationPhone">
<span>{{formRegister.corporationPhone}}</span>
</el-form-item>
</el-form>
</div>
<div class="detail-content form-button">
<button class="global-cursor" @click="onSubmit()">确定</button>
</div>
</div>
<el-dialog :visible.sync="winUploadFile">
<img width="100%" :src="uploadFileUrl" alt="">
</el-dialog>
</div>
</template>
<script>
// 工具
import iHost from '@/common/js/host.js'
import iRule from '@/common/js/rule/rule.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
formRegister: {},
// 上传组件配置
uploadOption: {
license: {
url: iHost.uploadFile,
params: {
'file': '',
'uploadPath': 'register/supplier/license/',
},
image: []
},
quote: {
url: iHost.uploadFile,
params: {
'file': '',
'uploadPath': 'register/supplier/license/',
},
image: []
},
},
uploadFileUrl: '',
winUploadFile: false,
// 邮箱验证按钮控制
disabledEmail: false, // 按钮点击状态
disabledEmailMax: 60, // 最大秒数
disabledEmailText: '', // 计时文本
disabledEmailTime: 0, // 计时数字
disabledEmailTimer: 0, // 计时器
// 手机短信按钮控制
disabledPhone: false, // 按钮点击状态
disabledPhoneMax: 60, // 最大秒数
disabledPhoneText: '', // 计时文本
disabledPhoneTime: 0, // 计时数字
disabledPhoneTimer: 0, // 计时器
// 表单验证
rule: {
companyName: [
{ required: true, message: '请输入公司名称', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
companyShortName: [
{ required: true, message: '请输入公司简称', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
companyCode: [
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
{ validator: iRule.predefineNumeralText, message: '请正确输入统一社会信用代码', trigger: 'blur'}
],
companyAddress: [
{ required: true, message: '请输入登记地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
email: [
{ required: true, message: '请输入机构邮箱', trigger: 'blur' },
{ validator: iRule.email, message: '请正确输入邮箱', trigger: 'blur'}
],
emailCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入验证码', trigger: 'blur'}
],
licenseImage: [
{ required: true, message: '请上传营业执照', trigger: 'blur' }
],
quoteImage: [
{ required: true, message: '请上传网上竞价承诺书', trigger: 'blur' }
],
companyTax: [
{ required: true, message: '请选择税务资质', trigger: 'blur' }
],
companyInvoice: [
{ type: 'array', required: true, message: '请选择发票类型', trigger: 'change' }
],
companyPhone: [
{ required: true, message: '请输入公司电话', trigger: 'blur' },
{ validator: iRule.fixedPhone, message: '请正确输入公司电话', trigger: 'blur'}
],
bankName: [
{ required: true, message: '请输入开户行', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入开户行', trigger: 'blur'}
],
bankAccount: [
{ required: true, message: '请输入银行账号', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入银行账号', trigger: 'blur'}
],
corporationName: [
{ required: true, message: '请输入联系人姓名', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入姓名', trigger: 'blur'}
],
corporationIdcard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ validator: iRule.idCard, message: '请正确输入身份证号', trigger: 'blur'}
],
corporationPhone: [
{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
{ validator: iRule.phone, message: '请正确输入手机号码', trigger: 'blur'}
],
phoneCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入验证码', trigger: 'blur'}
],
password: [
{ required: true, message: '请设置登录密码', trigger: 'blur' },
{ min: 6, max: 20, message: '6-20个字符，数字、英文字母及标点符号至少2种（除空格）', trigger: 'blur' },
{ validator: iRule.unSpace, message: '不能包含空格', trigger: 'blur'},
{ validator: iRule.unEmoji, message: '不能包含 emoji 表情', trigger: 'blur'},
{ validator: iRule.unChinese, message: '不能包含中文', trigger: 'blur'},
{ validator: iRule.password, message: '6-20个字符，数字、英文字母及标点符号至少2种（除空格）', trigger: 'blur'}
],
passwordRepeat: [
{ required: true, message: '请再次输入登录密码', trigger: 'blur' },
{ validator: (funcRule, funcValue, funcCallback) => iRule.passwordRepeat(funcRule, funcValue, funcCallback, this.formRegister.password), message: '与登录密码不一致，请重新输入', trigger: 'blur'}
],
},
}
},
computed: {
info: function () {
return this.$store.state.info
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
},
created: function () {
this.reset()
this.init()
},
methods: {
init: function () {
iRequest.request(iHost.base + 'bid/zUserCompany/getUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 每次查询更新用户缓存信息
let funcInfo = this.$store.state.info
funcInfo.register = Number(funcResponse.registerState)
this.$store.commit('info', funcInfo)
localStorage.setItem('info', JSON.stringify(funcInfo))
this.formRegister = {
'companyName': funcResponse.companyName,
'companyShortName': funcResponse.shortName,
'companyCode': funcResponse.companyCode,
'companyAddress': funcResponse.address,
'email': funcResponse.email,
'licenseImage': funcResponse.license,
'quoteImage': funcResponse.bidStatement,
'isQuote': funcResponse.isJoinBid,
'companyTax': funcResponse.taxType,
'companyInvoice': funcResponse.invoiceType.split(','),
'companyPhone': funcResponse.phone,
'bankName': funcResponse.openBank,
'bankAccount': funcResponse.bankAccount,
'corporationName': funcResponse.contactName,
'corporationIdcard': funcResponse.idcard,
'corporationPhone': funcResponse.mobile,
'timeExamine': funcResponse.auditCreatDate,
'timeExaminePass': funcResponse.auditTime,
'examineState': Number(funcResponse.auditState)
}
// 设置税务类型
for (let i = 0, len = this.formRegister.companyInvoice.length; i < len; i++) {
switch (Number(this.formRegister.companyInvoice[i])) {
case 0:
this.formRegister.companyInvoice[i] = '增值税专票'
break
case 1:
this.formRegister.companyInvoice[i] = '增值税普票'
break
case 2:
this.formRegister.companyInvoice[i] = '其他类型'
break
}
}
// 设置营业执照图片
this.uploadOption.license.image.push({
'status': 'success',
'url': this.formRegister.licenseImage,
'name': 'image.png',
'size': 100,
'percentage': 100,
'uid': 1592304942343
})
// 设置竞技承诺书图片
if (this.formRegister.isQuote === '1') {
this.uploadOption.quote.image.push({
'status': 'success',
'url': this.formRegister.quoteImage,
'name': 'image.png',
'size': 100,
'percentage': 100,
'uid': 1592304942344
})
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
reset: function () {
this.formRegister = {
'companyName': '',
'companyShortName': '',
'companyCode': '',
'companyAddress': '',
'email': '',
'licenseImage': '',
'quoteImage': '',
'companyTax': '',
'companyInvoice': [],
'companyPhone': '',
'bankName': '',
'bankAccount': '',
'corporationName': '',
'corporationIdcard': '',
'corporationPhone': '',
'timeExamine': '',
'timeExaminePass': '',
'examineState': '',
}
},
registerInfo: function () {
console.log(JSON.stringify( this.uploadOption))
let funcParam = {
'companyName': this.formRegister.companyName,
'companyCode': this.formRegister.companyCode,
'shortName': this.formRegister.companyShortName,
'address': this.formRegister.companyAddress,
'email': this.formRegister.email,
'license': this.uploadOption.license.image[0].url,
'bidStatement': this.formRegister.isQuote === '0' ? '' : this.uploadOption.quote.image[0].url,
'isJoinBid': this.formRegister.isQuote,
'taxType': this.formRegister.companyTax,
'phone': this.formRegister.companyPhone,
'invoiceType': this.formRegister.companyInvoice,
'openBank': this.formRegister.bankName,
'bankAccount': this.formRegister.bankAccount,
'contactName': this.formRegister.corporationName,
'idcard': this.formRegister.corporationIdcard,
}
for (let i = 0, len = funcParam.invoiceType.length; i < len; i++) {
if (funcParam.invoiceType[i] === '增值税专票') funcParam.invoiceType[i] = 0
if (funcParam.invoiceType[i] === '增值税普票') funcParam.invoiceType[i] = 1
if (funcParam.invoiceType[i] === '其他类型') funcParam.invoiceType[i] = 2
}
funcParam.invoiceType = funcParam.invoiceType.join()
iRequest.request(iHost.base + 'bid/zUserCompany/saveUserInfo', funcParam, 'json', 'post')
.then((funcResponse) => {
this.$message({ message: '修改已提交，请等待审核', type: 'success' })
this.$router.push('/supplier/info')
})
.catch((funcError) => {
// this.$message.error(funcError.message)
})
},
/**
* 下载申明
* @function
* @returns
*/
onLoadStatement: function () {
window.location.href = '../../static/quote.zip'
},
onSubmit: function () {
this.$refs.formBase.validate(funcValid => {
if (funcValid) {
if (this.uploadOption.license.image[0].status === 'ready') {
this.$refs.uploadLicense.submit()
return
}
if (this.uploadOption.quote.image[0].status === 'ready') {
this.$refs.uploadQuote.submit()
return
}
this.registerInfo()
}
})
},
/**
* 上传组件 - 文件格式
* @function
* @param {string} funcType
* @param {object} funcFile
* @returns
*/
checkFileFormat: function (funcType, funcFile) {
switch (funcType) {
case 'license':
if (funcFile.raw.type !== 'image/png' && funcFile.raw.type !== 'image/jpeg') {
this.$message.error('仅支持JPG、PNG格式图片')
return false
}
if (funcFile.size >= 6291456) {
this.$message.error('文件大小不超过5MB')
return false
}
break
}
return true
},
/**
* 上传组件 - 文件状态
* @function
* @param {string} funcType
* @param {object} funcFile
* @param {array } funcFileList
* @returns
*/
onUploadChange: function (funcType, funcFile, funcFileList) {
if (funcFile.status === 'ready') {
if (this.checkFileFormat(funcType, funcFile)) {
// 针对 ie 浏览器不支持 new file 功能直接放过
try {
// 重新定义上传文件名称
let funcFileFormat = funcFile.name.substring(funcFile.name.lastIndexOf('.'), funcFile.name.length)
let funcFileName = funcType + (new Date() - 0) + funcFileFormat
let funcCopyFile = new File([funcFile.raw], funcFileName, { type: funcFile.raw.type})
funcCopyFile.uid = funcFile.raw.uid
funcFile.raw = funcCopyFile
funcFile.name = funcFileName
} catch (err) {
}
this.formRegister[funcType + 'Image'] = 'image'
this.uploadOption[funcType].image.push(funcFile)
console.log('push', this.uploadOption[funcType].image)
} else {
let funcImageBuffer = JSON.stringify(this.uploadOption[funcType].image)
this.uploadOption[funcType].image = []
this.uploadOption[funcType].image = JSON.parse(funcImageBuffer)
}
}
if (funcFile.status === 'success') {
for (let i = 0, len = this.uploadOption[funcType].image.length; i < len; i++) {
if (this.uploadOption[funcType].image[i].status === 'ready') {
return
}
}
this.registerInfo()
}
},
/**
* 上传组件 - 文件删除
* @function
* @param {string} funcType
* @param {object} funcFile
* @param {array } funcFileList
* @returns
*/
onUploadRemove: function (funcType, funcFile, funcFileList) {
console.log('onUploadRemove', funcFile)
// 判断当前文件列表是否存在删除图片
// 找到列表中的文件进行删除
let funcImageList = this.uploadOption[funcType].image
for (let i = 0, len = funcImageList.length; i < len; i++) {
if (funcImageList[i] && funcImageList[i].uid === funcFile.uid) {
funcImageList.splice(i, 1)
break
}
}
// 删除文件逻辑
// 如果当前文件列表为空则不通过校验
if (funcImageList.length === 0) {
this.formRegister[funcType + 'Image'] = ''
}
},
/**
* 上传组件 - 文件预览
* @function
* @param {object} funcFile
* @returns
*/
onUploadPreviewFile(funcFile) {
this.uploadFileUrl = funcFile.url
this.winUploadFile = true
},
/**
* 上传组件 - 文件下载
* @function
* @param {object} funcFile
* @returns
*/
onUploadDownloadFile: function (funcFile) {
switch (funcFile.status) {
case 'ready':
// 重新上传的文件下载
let funcReader = new FileReader()
funcReader.readAsArrayBuffer(funcFile.raw)
funcReader.onload = function(funcEvent){
let funcBlob = new Blob([funcEvent.target.result], { type : funcFile.raw.type })
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(funcBlob, funcFile.raw.name)
} else {
let funcDownloadLink = document.createElement('a')
funcDownloadLink.download = funcFile.raw.name
funcDownloadLink.href = URL.createObjectURL(funcBlob)
document.body.appendChild(funcDownloadLink)
funcDownloadLink.click()
document.body.removeChild(funcDownloadLink)
}
}
break
case 'success':
// 已经上传过的文件下载
window.open(funcFile.url, funcFile.name)
return
const funcDownloadLink = document.createElement('a')
funcDownloadLink.setAttribute('href', funcFile.url)
funcDownloadLink.setAttribute('download' , 'download')
funcDownloadLink.click()
break
}
},
/**
* 上传组件 - 上传成功
* @function
* @param {string} funcType
* @param {object} funcResponse
* @returns
*/
onUploadSuccess: function (funcType, funcResponse, funcFile, funcFileList) {
// 文件上传成功之后替换文件临时路径
if (funcResponse.code === 200) {
let funcImageList = this.uploadOption[funcType].image
for (let i = 0, len = funcImageList.length; i < len; i++) {
if (funcImageList[i] && funcImageList[i].uid === funcFile.uid) {
funcImageList[i].url = iHost.resources + funcResponse.data.url
break
}
}
this.uploadOption[funcType].image = funcImageList
console.log('this.uploadOption[funcType].image', this.uploadOption[funcType].image)
}
},
/**
* 上传组件 - 上传失败
* @function
* @param {string} funcType
* @param {object} funcError
* @returns
*/
onUploadFail: function (funcType, funcError) {
},
}
}
</script>
<style lang="less">
.supplier-info {
width: 100%;
.supplier-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.detail-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-left: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.supplier-set {
width: 100%;
.detail-title {
width: 100%;
height: 50px;
margin-bottom: 24px;
border-bottom: 1px #F2F2F2 solid;
span {
font-size: @fontSize04;
}
}
.detail-title:before{
content: '';
display: inline-block;
width: 4px;
height: 20px;
margin-right: 10px;
overflow: hidden;
background-image: linear-gradient(#CF2F1E 20%, #00468C 20%, #00468C 100%);
}
.detail-content {
width: 660px;
margin: 20px 0;
.el-form {
width: 100%;
.upload-image {
.el-upload-list {
display: flex;
flex-wrap: wrap;
li {
width: 146px;
height: 146px;
margin-right: 8px;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
.el-upload {
position: relative;
width: 186px;
height: 256px;
padding-top: 40px;
> div {
position: absolute;
top: 80px;
width: 100%;
}
}
}
.upload-file {
a {
cursor: pointer;
}
}
}
.register-info-certificate {
> div {
display: flex;
flex-direction: row;
> div {
margin-right: 24px;
}
> div:nth-child(2) {
white-space: nowrap;
}
}
}
.upload-none {
> div {
display: none;
}
}
}
.form-button button {
width: 160px;
height: 52px;
margin-left: 160px;
margin-bottom: 50px;
background: @colorBlue;
border-radius: 26px;
border: none;
font-size: @fontSize02;
color: #ffffff;
}
}
}
<template>
<!-- 账号管理 - 企业信息 - 修改信息 -->
<div class="supplier-info">
<!-- 页面地图 -->
<div class="supplier-map row align-c">
<currencyMap :customPath="[{ text: '企业信息', redirect: '/supplier/info' }, { text: '修改企业信息', redirect: null }]"></currencyMap>
</div>
<div class="supplier-set col">
<div class="detail-title row align-c">
<span>基本信息</span>
</div>
<div class="detail-content">
<el-form ref="formBase" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="公司名称：" prop="companyName">
<el-input v-model="formRegister.companyName" maxlength="60" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="公司简称：" prop="companyShortName">
<el-input v-model="formRegister.companyShortName" maxlength="6" placeholder="请输入公司简称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="companyCode">
<el-input v-if="info.register !== 1" v-model="formRegister.companyCode" maxlength="18" placeholder="请输入统一社会信用代码"></el-input>
<span v-if="info.register === 1">{{formRegister.companyCode}}</span>
</el-form-item>
<el-form-item label="登记地址：" prop="companyAddress">
<el-input v-model="formRegister.companyAddress" maxlength="100" placeholder="请输入登记地址"></el-input>
</el-form-item>
<el-form-item label="机构邮箱：" prop="email">
<el-input v-model="formRegister.email" maxlength="50" placeholder="请输入机构邮箱"></el-input>
</el-form-item>
<el-form-item class="register-info-certificate" label="上传营业执照：" prop="licenseImage">
<!-- 此处 input 是为了模拟校验而设置的隐藏组件 -->
<el-input class="global-none" v-model="formRegister.licenseImage"></el-input>
<el-upload
class="upload-image"
:class="uploadOption.license.image.length > 0 ? 'upload-none' : ''"
ref="uploadLicense"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:file-list="uploadOption.license.image"
:action="uploadOption.license.url"
:data="uploadOption.license.params"
:on-preview="onUploadPreviewFile"
:on-remove="(file, fileList) => { onUploadRemove('license', file, fileList) }"
:on-change="(file, fileList) => { onUploadChange('license', file, fileList) }"
:on-success="(respons, file, fileList) => { onUploadSuccess('license', respons, file, fileList) }"
:on-error="(error) => { onUploadFail('license', error) }"
>
<div class="col">
<i class="el-icon-plus"></i>
<span>点击上传营业执照</span>
</div>
<div slot="tip" class="el-upload__tip">
<span>复印件需盖有公司印章，大小不超过5MB</span>
</div>
</el-upload>
<div>
<img src="../../assets/register-certificate.png" alt="">
</div>
</el-form-item>
<el-form-item label="是否参与网上竞价：" prop="isQuote">
<div>
<el-radio-group v-model="formRegister.isQuote">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item v-if="formRegister.isQuote === '1'" label="上传竞价承诺书：" prop="quoteImage">
<!-- 此处 input 是为了模拟校验而设置的隐藏组件 -->
<el-input class="global-none" v-model="formRegister.quoteImage"></el-input>
<el-upload
class="upload-file"
ref="uploadQuote"
:auto-upload="false"
:limit="1"
:file-list="uploadOption.quote.image"
:action="uploadOption.quote.url"
:data="uploadOption.quote.params"
:on-preview="onUploadDownloadFile"
:on-remove="(file, fileList) => { onUploadRemove('quote', file, fileList) }"
:on-change="(file, fileList) => { onUploadChange('quote', file, fileList) }"
:on-success="(respons, file, fileList) => { onUploadSuccess('quote', respons, file, fileList) }"
:on-error="(error) => { onUploadFail('quote', error) }"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span>（请查看</span>
<span class="global-color-red">网上竞价须知</span>
<span>，并下载</span>
<span class="global-cursor global-color-red" @click="onLoadStatement">网上竞价承诺书</span>
<span>，签名盖章后扫描上传，文件大小不超过5MB）</span>
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
<div class="detail-title row align-c">
<span>税务信息</span>
</div>
<div class="detail-content">
<el-form ref="formTax" key="formTax" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="税务资质(单选)：" prop="companyTax">
<el-radio-group v-model="formRegister.companyTax" :value="formRegister.companyTax">
<el-radio label="0">一般纳税人</el-radio>
<el-radio label="1">小规模纳税人</el-radio>
<el-radio label="2">非增值纳税人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="发票类型(单选)：" prop="companyInvoice">
<el-radio-group v-model="formRegister.companyInvoice" :value="formRegister.companyInvoice">
<el-radio label="1">增值税普票</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公司名称：" prop="companyName">
<span>{{formRegister.companyName}}</span>
</el-form-item>
<el-form-item label="纳税识别号：" prop="companyCode">
<span>{{formRegister.companyCode}}</span>
</el-form-item>
<el-form-item label="税务登记地址：" prop="companyAddress">
<span>{{formRegister.companyAddress}}</span>
</el-form-item>
<el-form-item label="公司电话：" prop="companyPhone">
<el-input v-model="formRegister.companyPhone" maxlength="20" placeholder="请输入公司电话"></el-input>
</el-form-item>
<el-form-item label="开户行：" prop="bankName">
<el-input v-model="formRegister.bankName" maxlength="20" placeholder="请输入开户行"></el-input>
</el-form-item>
<el-form-item label="银行账户：" prop="bankAccount">
<el-input v-model="formRegister.bankAccount" maxlength="30" placeholder="请输入银行账户"></el-input>
</el-form-item>
</el-form>
<el-form ref="formReceive" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="发票领取方式：">
<el-radio-group v-model="formRegister.receiveType">
<el-radio label="0">寄送</el-radio>
<el-radio label="1">自取</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="formRegister.receiveType === '0'">
<el-form-item label="收件人：" prop="receiveContactor">
<el-input v-model="formRegister.receiveContactor" maxlength="30" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="收件人电话：" prop="receiveMobile">
<el-input v-model="formRegister.receiveMobile" maxlength="20" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="收件地址：" prop="receiveArea">
<currencyArea @change="onAreaChange"></currencyArea>
</el-form-item>
<el-form-item label="" prop="receiveAddress">
<el-input v-model="formRegister.receiveAddress" maxlength="100" placeholder="请输入详细地址"></el-input>
</el-form-item>
</template>
</el-form>
</div>
<div class="detail-title row align-c">
<span>联系人信息</span>
</div>
<div class="detail-content">
<el-form ref="formPhone" :model="formRegister" :rules="rule" label-width="160px">
<el-form-item label="联系人姓名：" prop="corporationName">
<el-input v-model="formRegister.corporationName" maxlength="30" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号：" prop="corporationIdcard">
<el-input v-model="formRegister.corporationIdcard" maxlength="18" placeholder="请输入身份证号"></el-input>
</el-form-item>
<el-form-item label="联系人手机号：" prop="corporationPhone">
<span>{{formRegister.corporationPhone}}</span>
</el-form-item>
</el-form>
</div>
<!-- 确定修改 -->
<div class="detail-content form-button">
<button class="global-cursor" @click="onSubmit()">确定</button>
</div>
</div>
<el-dialog :visible.sync="winUploadFile">
<img width="100%" :src="uploadFileUrl" alt="">
</el-dialog>
</div>
</template>
<script>
// 工具
import iHost from '@/common/js/host.js'
import iRule from '@/common/js/rule/rule.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iCurrencyArea from '@/components/currency-area.vue'
export default {
components: {
currencyMap: iCurrencyMap,
currencyArea: iCurrencyArea,
},
data: function () {
return {
formRegister: {},
// 上传组件配置
uploadOption: {
license: {
url: iHost.uploadFile,
params: {
'file': '',
'uploadPath': 'register/supplier/license/',
},
image: []
},
quote: {
url: iHost.uploadFile,
params: {
'file': '',
'uploadPath': 'register/supplier/license/',
},
image: []
},
},
uploadFileUrl: '',
winUploadFile: false,
// 邮箱验证按钮控制
disabledEmail: false, // 按钮点击状态
disabledEmailMax: 60, // 最大秒数
disabledEmailText: '', // 计时文本
disabledEmailTime: 0, // 计时数字
disabledEmailTimer: 0, // 计时器
// 手机短信按钮控制
disabledPhone: false, // 按钮点击状态
disabledPhoneMax: 60, // 最大秒数
disabledPhoneText: '', // 计时文本
disabledPhoneTime: 0, // 计时数字
disabledPhoneTimer: 0, // 计时器
// 表单验证
rule: {
companyName: [
{ required: true, message: '请输入公司名称', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
companyShortName: [
{ required: true, message: '请输入公司简称', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
companyCode: [
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
{ validator: iRule.predefineNumeralText, message: '请正确输入统一社会信用代码', trigger: 'blur'}
],
companyAddress: [
{ required: true, message: '请输入登记地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
email: [
{ required: true, message: '请输入机构邮箱', trigger: 'blur' },
{ validator: iRule.email, message: '请正确输入邮箱', trigger: 'blur'}
],
emailCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入验证码', trigger: 'blur'}
],
licenseImage: [
{ required: true, message: '请上传营业执照', trigger: 'blur' }
],
quoteImage: [
{ required: true, message: '请上传网上竞价承诺书', trigger: 'blur' }
],
companyTax: [
{ required: true, message: '请选择税务资质', trigger: 'blur' }
],
companyInvoice: [
{ required: true, message: '请选择发票类型', trigger: 'blur' }
],
companyPhone: [
{ required: true, message: '请输入公司电话', trigger: 'blur' },
{ validator: iRule.fixedPhone, message: '请正确输入公司电话', trigger: 'blur'}
],
bankName: [
{ required: true, message: '请输入开户行', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入开户行', trigger: 'blur'}
],
bankAccount: [
{ required: true, message: '请输入银行账号', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入银行账号', trigger: 'blur'}
],
corporationName: [
{ required: true, message: '请输入联系人姓名', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入姓名', trigger: 'blur'}
],
corporationIdcard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ validator: iRule.idCard, message: '请正确输入身份证号', trigger: 'blur'}
],
corporationPhone: [
{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
{ validator: iRule.phone, message: '请正确输入手机号码', trigger: 'blur'}
],
phoneCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: iRule.predefineNumeral, message: '请正确输入验证码', trigger: 'blur'}
],
receiveContactor: [
{ required: true, message: '请输入收件人姓名', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入姓名', trigger: 'blur'}
],
receiveMobile: [
{ required: true, message: '请输入收件人电话', trigger: 'blur' },
{ validator: iRule.fixedPhone, message: '请正确输入收件人电话', trigger: 'blur'}
],
receiveArea: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
receiveAddress: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
},
}
},
computed: {
info: function () {
return this.$store.state.info
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
},
created: function () {
this.reset()
this.init()
},
methods: {
init: function () {
iRequest.request(iHost.base + 'bid/zUserCompany/getUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
console.log(funcResponse)
// 每次查询更新用户缓存信息
let funcInfo = this.$store.state.info
funcInfo.register = Number(funcResponse.registerState)
this.$store.commit('info', funcInfo)
localStorage.setItem('info', JSON.stringify(funcInfo))
this.formRegister = {
'companyName': funcResponse.companyName,
'companyShortName': funcResponse.shortName,
'companyCode': funcResponse.companyCode,
'companyAddress': funcResponse.address,
'email': funcResponse.email,
'licenseImage': funcResponse.license,
'quoteImage': funcResponse.bidStatement,
'isQuote': funcResponse.isJoinBid,
'companyTax': funcResponse.taxType,
'companyInvoice': '1',
// 'companyInvoice': funcResponse.invoiceType.split(','),
'companyPhone': funcResponse.phone,
'bankName': funcResponse.openBank,
'bankAccount': funcResponse.bankAccount,
// 开票相关
'receiveType': funcResponse.receiveType ? funcResponse.receiveType : '0',
'receiveContactor': funcResponse.receiveContactor ? funcResponse.receiveContactor : '',
'receiveMobile': funcResponse.receiveMobile ? funcResponse.receiveMobile : '',
'receiveArea': funcResponse.receiveArea ? JSON.parse(funcResponse.receiveArea) : '',
'receiveAddress': funcResponse.receiveAddress ? funcResponse.receiveAddress : '',
'corporationName': funcResponse.contactName,
'corporationIdcard': funcResponse.idcard,
'corporationPhone': funcResponse.mobile,
'timeExamine': funcResponse.auditCreatDate,
'timeExaminePass': funcResponse.auditTime,
'examineState': Number(funcResponse.auditState),
}
// 恢复区域数据
if (this.formRegister.receiveArea) {
this.$store.commit('areaSelection', this.formRegister.receiveArea)
}
console.log(this.formRegister)
// 设置营业执照图片
this.uploadOption.license.image.push({
'status': 'success',
'url': this.formRegister.licenseImage,
'name': 'image.png',
'size': 100,
'percentage': 100,
'uid': 1592304942343
})
// 设置竞技承诺书图片
if (this.formRegister.isQuote === '1') {
this.uploadOption.quote.image.push({
'status': 'success',
'url': this.formRegister.quoteImage,
'name': 'image.png',
'size': 100,
'percentage': 100,
'uid': 1592304942344
})
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
reset: function () {
this.formRegister = {
'companyName': '',
'companyShortName': '',
'companyCode': '',
'companyAddress': '',
'email': '',
'licenseImage': '',
'quoteImage': '',
'companyTax': '',
'companyInvoice': '',
'companyPhone': '',
'bankName': '',
'bankAccount': '',
'corporationName': '',
'corporationIdcard': '',
'corporationPhone': '',
'timeExamine': '',
'timeExaminePass': '',
'examineState': '',
}
},
registerInfo: function () {
console.log(JSON.stringify( this.uploadOption))
let funcParam = {
'companyName': this.formRegister.companyName,
'companyCode': this.formRegister.companyCode,
'shortName': this.formRegister.companyShortName,
'address': this.formRegister.companyAddress,
'email': this.formRegister.email,
'license': this.uploadOption.license.image[0].url,
'bidStatement': this.formRegister.isQuote === '0' ? '' : this.uploadOption.quote.image[0].url,
'isJoinBid': this.formRegister.isQuote,
'taxType': this.formRegister.companyTax,
'phone': this.formRegister.companyPhone,
'invoiceType': '1',
'openBank': this.formRegister.bankName,
'bankAccount': this.formRegister.bankAccount,
'contactName': this.formRegister.corporationName,
'idcard': this.formRegister.corporationIdcard,
'receiveType': this.formRegister.receiveType,
'receiveContactor': this.formRegister.receiveContactor,
'receiveMobile': this.formRegister.receiveMobile,
'receiveArea': this.formRegister.receiveArea,
'receiveAddress': this.formRegister.receiveAddress
}
// for (let i = 0, len = funcParam.invoiceType.length; i < len; i++) {
// if (funcParam.invoiceType[i] === '增值税专票') funcParam.invoiceType[i] = 0
// if (funcParam.invoiceType[i] === '增值税普票') funcParam.invoiceType[i] = 1
// if (funcParam.invoiceType[i] === '其他类型') funcParam.invoiceType[i] = 2
// }
// funcParam.invoiceType = funcParam.invoiceType.join()
iRequest.request(iHost.base + 'bid/zUserCompany/saveUserInfo', funcParam, 'json', 'post')
.then((funcResponse) => {
this.$message({ message: '修改已提交，请等待审核', type: 'success' })
this.$router.push('/supplier/info')
})
.catch((funcError) => {
// this.$message.error(funcError.message)
})
},
/**
* 下载申明
* @function
* @returns
*/
onLoadStatement: function () {
window.location.href = '../../static/quote.zip'
},
/**
* 地域选择组件
* @function
* @param {array } funcArea - ['省份', '城市', '区域' ]
* @returns
*/
onAreaChange: function (funcArea) {
console.log(funcArea)
this.formRegister.receiveArea = funcArea
},
onSubmit: function () {
console.log(this.formRegister)
let funcPass = true
this.$refs.formTax.validate((funcValid) => {
funcPass = funcValid
})
if (!funcPass) return
this.$refs.formPhone.validate((funcValid) => {
funcPass = funcValid
})
if (!funcPass) return
this.$refs.formReceive.validate((funcValid) => {
funcPass = funcValid
})
if (!funcPass) return
this.$refs.formBase.validate(funcValid => {
if (funcValid) {
if (this.uploadOption.license.image[0].status === 'ready') {
this.$refs.uploadLicense.submit()
return
}
if (this.uploadOption.quote.image[0].status === 'ready') {
this.$refs.uploadQuote.submit()
return
}
this.registerInfo()
}
})
},
/**
* 上传组件 - 文件格式
* @function
* @param {string} funcType
* @param {object} funcFile
* @returns
*/
checkFileFormat: function (funcType, funcFile) {
switch (funcType) {
case 'license':
if (funcFile.raw.type !== 'image/png' && funcFile.raw.type !== 'image/jpeg') {
this.$message.error('仅支持JPG、PNG格式图片')
return false
}
if (funcFile.size >= 6291456) {
this.$message.error('文件大小不超过5MB')
return false
}
break
}
return true
},
/**
* 上传组件 - 文件状态
* @function
* @param {string} funcType
* @param {object} funcFile
* @param {array } funcFileList
* @returns
*/
onUploadChange: function (funcType, funcFile, funcFileList) {
if (funcFile.status === 'ready') {
if (this.checkFileFormat(funcType, funcFile)) {
// 针对 ie 浏览器不支持 new file 功能直接放过
try {
// 重新定义上传文件名称
let funcFileFormat = funcFile.name.substring(funcFile.name.lastIndexOf('.'), funcFile.name.length)
let funcFileName = funcType + (new Date() - 0) + funcFileFormat
let funcCopyFile = new File([funcFile.raw], funcFileName, { type: funcFile.raw.type})
funcCopyFile.uid = funcFile.raw.uid
funcFile.raw = funcCopyFile
funcFile.name = funcFileName
} catch (err) {
}
this.formRegister[funcType + 'Image'] = 'image'
this.uploadOption[funcType].image.push(funcFile)
console.log('push', this.uploadOption[funcType].image)
} else {
let funcImageBuffer = JSON.stringify(this.uploadOption[funcType].image)
this.uploadOption[funcType].image = []
this.uploadOption[funcType].image = JSON.parse(funcImageBuffer)
}
}
if (funcFile.status === 'success') {
for (let i = 0, len = this.uploadOption[funcType].image.length; i < len; i++) {
if (this.uploadOption[funcType].image[i].status === 'ready') {
return
}
}
this.registerInfo()
}
},
/**
* 上传组件 - 文件删除
* @function
* @param {string} funcType
* @param {object} funcFile
* @param {array } funcFileList
* @returns
*/
onUploadRemove: function (funcType, funcFile, funcFileList) {
console.log('onUploadRemove', funcFile)
// 判断当前文件列表是否存在删除图片
// 找到列表中的文件进行删除
let funcImageList = this.uploadOption[funcType].image
for (let i = 0, len = funcImageList.length; i < len; i++) {
if (funcImageList[i] && funcImageList[i].uid === funcFile.uid) {
funcImageList.splice(i, 1)
break
}
}
// 删除文件逻辑
// 如果当前文件列表为空则不通过校验
if (funcImageList.length === 0) {
this.formRegister[funcType + 'Image'] = ''
}
},
/**
* 上传组件 - 文件预览
* @function
* @param {object} funcFile
* @returns
*/
onUploadPreviewFile(funcFile) {
this.uploadFileUrl = funcFile.url
this.winUploadFile = true
},
/**
* 上传组件 - 文件下载
* @function
* @param {object} funcFile
* @returns
*/
onUploadDownloadFile: function (funcFile) {
switch (funcFile.status) {
case 'ready':
// 重新上传的文件下载
let funcReader = new FileReader()
funcReader.readAsArrayBuffer(funcFile.raw)
funcReader.onload = function(funcEvent){
let funcBlob = new Blob([funcEvent.target.result], { type : funcFile.raw.type })
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(funcBlob, funcFile.raw.name)
} else {
let funcDownloadLink = document.createElement('a')
funcDownloadLink.download = funcFile.raw.name
funcDownloadLink.href = URL.createObjectURL(funcBlob)
document.body.appendChild(funcDownloadLink)
funcDownloadLink.click()
document.body.removeChild(funcDownloadLink)
}
}
break
case 'success':
// 已经上传过的文件下载
window.open(funcFile.url, funcFile.name)
return
const funcDownloadLink = document.createElement('a')
funcDownloadLink.setAttribute('href', funcFile.url)
funcDownloadLink.setAttribute('download' , 'download')
funcDownloadLink.click()
break
}
},
/**
* 上传组件 - 上传成功
* @function
* @param {string} funcType
* @param {object} funcResponse
* @returns
*/
onUploadSuccess: function (funcType, funcResponse, funcFile, funcFileList) {
// 文件上传成功之后替换文件临时路径
if (funcResponse.code === 200) {
let funcImageList = this.uploadOption[funcType].image
for (let i = 0, len = funcImageList.length; i < len; i++) {
if (funcImageList[i] && funcImageList[i].uid === funcFile.uid) {
funcImageList[i].url = iHost.resources + funcResponse.data.url
break
}
}
this.uploadOption[funcType].image = funcImageList
console.log('this.uploadOption[funcType].image', this.uploadOption[funcType].image)
}
},
/**
* 上传组件 - 上传失败
* @function
* @param {string} funcType
* @param {object} funcError
* @returns
*/
onUploadFail: function (funcType, funcError) {
},
}
}
</script>
<style lang="less">
.supplier-info {
width: 100%;
.supplier-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.detail-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-left: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.supplier-set {
width: 100%;
.detail-title {
width: 100%;
height: 50px;
margin-bottom: 24px;
border-bottom: 1px #F2F2F2 solid;
span {
font-size: @fontSize04;
}
}
.detail-title:before{
content: '';
display: inline-block;
width: 4px;
height: 20px;
margin-right: 10px;
overflow: hidden;
background-image: linear-gradient(#CF2F1E 20%, #00468C 20%, #00468C 100%);
}
.detail-content {
width: 660px;
margin: 20px 0;
.el-form {
width: 100%;
.upload-image {
.el-upload-list {
display: flex;
flex-wrap: wrap;
li {
width: 146px;
height: 146px;
margin-right: 8px;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
.el-upload {
position: relative;
width: 186px;
height: 256px;
padding-top: 40px;
> div {
position: absolute;
top: 80px;
width: 100%;
}
}
}
.upload-file {
a {
cursor: pointer;
}
}
}
.register-info-certificate {
> div {
display: flex;
flex-direction: row;
> div {
margin-right: 24px;
}
> div:nth-child(2) {
white-space: nowrap;
}
}
}
.upload-none {
> div {
display: none;
}
}
}
.form-button button {
width: 160px;
height: 52px;
margin-left: 160px;
margin-bottom: 50px;
background: @colorBlue;
border-radius: 26px;
border: none;
font-size: @fontSize02;
color: #ffffff;
}
}
}
</style>
\ No newline at end of file
src/view/personal/supplier-info.vue
<template>
<!-- 账号管理 - 企业信息 -->
<div class="supplier-info">
<!-- 页面地图 -->
<div class="supplier-map row align-c">
<currencyMap :customPath="[{ text: '企业信息', redirect: null }]"></currencyMap>
</div>
<div class="supplier-examine col">
<span v-if="formInfo.examineState === 0" class="state-ongoing">审核中</span>
<span v-if="formInfo.examineState === 0">企业信息审核中</span>
<span v-if="formInfo.examineState === 0">{{'提交时间：' + formInfo.timeExamineSubmit}}</span>
<span v-if="formInfo.examineState === 1" class="state-pass">审核通过</span>
<span v-if="formInfo.examineState === 1">{{'审核时间：' + formInfo.timeExaminePass}}</span>
<span v-if="formInfo.examineState === 2" class="state-refuse">审核不通过</span>
<span v-if="formInfo.examineState === 2">{{'不通过原因：' + formInfo.examineReason}}</span>
<span v-if="formInfo.examineState === 2">{{'审核时间：' + formInfo.timeExaminePass}}</span>
</div>
<!-- 项目进度 - 采购 -->
<div class="supplier-operation">
<!-- <button @click="onChange()">修改</button> -->
<button v-if="formInfo.examineState !== 0" @click="onChange()">修改</button>
<button @click="onChangeRecord()">变更记录</button>
</div>
<div class="supplier-set col">
<div class="detail-title row align-c">
<span>基本信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>机构名称：</span>
<span>{{formInfo.companyName}}</span>
</div>
<div class="item-text row align-c">
<span>机构简称：</span>
<span>{{formInfo.companyShortName}}</span>
</div>
<div class="item-text row align-c">
<span>统一社会信用代码：</span>
<span>{{formInfo.companyCode}}</span>
</div>
<div class="item-text row align-c">
<span>登记地址：</span>
<span>{{formInfo.companyAddress}}</span>
</div>
<div class="item-text row align-c">
<span>机构邮箱：</span>
<span>{{formInfo.email}}</span>
</div>
<div class="item-text row align-c" v-if="formInfo.quoteImage">
<span>竞价承诺书：</span>
<el-button size="small" type="primary" @click.prevent="onUploadDownloadFile">点击下载</el-button>
</div>
<div class="item-text row">
<span>营业执照：</span>
<div class="item-img">
<img :src="formInfo.licenseImage" alt="">
</div>
</div>
</div>
<div class="detail-title row align-c">
<span>税务信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>税务资质：</span>
<span>{{formInfo.companyTaxText}}</span>
</div>
<div class="item-text row align-c">
<span>发票类型：</span>
<span>{{formInfo.companyInvoiceText}}</span>
</div>
<div class="item-text row align-c">
<span>公司名称：</span>
<span>{{formInfo.companyName}}</span>
</div>
<div class="item-text row align-c">
<span>纳税识别号：</span>
<span>{{formInfo.companyCode}}</span>
</div>
<div class="item-text row align-c">
<span>税务登记地址：</span>
<span>{{formInfo.companyAddress}}</span>
</div>
<div class="item-text row align-c">
<span>公司电话：</span>
<span>{{formInfo.companyPhone}}</span>
</div>
<div class="item-text row align-c">
<span>开户行：</span>
<span>{{formInfo.bankName}}</span>
</div>
<div class="item-text row align-c">
<span>银行账号：</span>
<span>{{formInfo.bankAccount}}</span>
</div>
</div>
<div class="detail-title row align-c">
<span>联系人信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>联系人姓名：</span>
<span>{{formInfo.corporationName}}</span>
</div>
<div class="item-text row align-c">
<span>联系人身份证：</span>
<span>{{formInfo.corporationIdcard}}</span>
</div>
<div class="item-text row align-c">
<span>联系人手机号：</span>
<span>{{formInfo.corporationPhone}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// 工具
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
formInfo: {
companyName: '', // 名称
companyShortName: '', // 简称
companyCode: '', // 统一社会信用代码
companyAddress: '', // 地址
email: '', // 邮箱
licenseImage: '', // 营业执照
quoteImage: '', // 竞价承诺书
isQuote: '',
companyTax: '', // 税务资质
companyInvoice: [], // 发票类型
companyPhone: '', // 公司电话
bankName: '', // 开户银行
bankAccount: '', // 银行账号
corporationName: '', // 联系人
corporationIdcard: '', // 联系人身份证
corporationPhone: '', // 联系手机
},
}
},
created: function () {
this.reset()
this.init()
},
methods: {
init: function () {
iRequest.request(iHost.base + 'bid/zUserCompany/getUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 每次查询更新用户缓存信息
let funcInfo = this.$store.state.info
funcInfo.register = Number(funcResponse.registerState)
this.$store.commit('info', funcInfo)
localStorage.setItem('info', JSON.stringify(funcInfo))
this.formInfo = {
'companyName': funcResponse.companyName,
'companyShortName': funcResponse.shortName,
'companyCode': funcResponse.companyCode,
'companyAddress': funcResponse.address,
'email': funcResponse.email,
'licenseImage': funcResponse.license,
'quoteFile': funcResponse.bidStatement ? funcResponse.bidStatement.substring(funcResponse.bidStatement.lastIndexOf('/') + 1, funcResponse.bidStatement.length) : '',
'quoteImage': funcResponse.bidStatement,
'isQuote': funcResponse.isJoinBid,
'companyTax': Number(funcResponse.taxType),
'companyInvoice': funcResponse.invoiceType.split(','),
'companyPhone': funcResponse.phone,
'bankName': funcResponse.openBank,
'bankAccount': funcResponse.bankAccount,
'corporationName': funcResponse.contactName,
'corporationIdcard': funcResponse.idcard,
'corporationPhone': funcResponse.mobile,
'timeExamine': funcResponse.auditCreatDate,
'timeExaminePass': funcResponse.auditTime,
'timeExamineSubmit': funcResponse.auditCreatDate,
'examineState': Number(funcResponse.auditState),
'examineReason': funcResponse.reason,
}
console.log(this.formInfo)
switch(this.formInfo.companyTax) {
case 0:
this.formInfo.companyTaxText = '一般纳税人'
break
case 1:
this.formInfo.companyTaxText = '小规模纳税人'
break
case 2:
this.formInfo.companyTaxText = '非增值税纳税人'
break
}
// 设置税务类型
for (let i = 0, len = this.formInfo.companyInvoice.length; i < len; i++) {
switch (Number(this.formInfo.companyInvoice[i])) {
case 0:
this.formInfo.companyInvoice[i] = '增值税专票'
break
case 1:
this.formInfo.companyInvoice[i] = '增值税普票'
break
case 2:
this.formInfo.companyInvoice[i] = '其他类型'
break
}
}
this.formInfo.companyInvoiceText = this.formInfo.companyInvoice.join('，')
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
reset: function () {
this.formInfo = {
companyName: '', // 名称
companyShortName: '', // 简称
companyCode: '', // 统一社会信用代码
companyAddress: '', // 地址
email: '', // 邮箱
licenseImage: '', // 营业执照
companyTax: '', // 税务资质
companyInvoice: [], // 发票类型
companyPhone: '', // 公司电话
bankName: '', // 开户银行
bankAccount: '', // 银行账号
corporationName: '', // 联系人
corporationIdcard: '', // 联系人身份证
corporationPhone: '', // 联系手机
}
},
/**
* 下载竞价承诺书
* @function
* @param {object} funcFile
* @returns
*/
onUploadDownloadFile: function () {
let funcFile = this.formInfo.quoteFile
let funcFileUrl = this.formInfo.quoteImage
new Promise(function (funcResolve, funcReject) {
let funcXMLHttpRequest = new XMLHttpRequest()
funcXMLHttpRequest.open('get', funcFileUrl, true)
funcXMLHttpRequest.responseType = 'blob'
funcXMLHttpRequest.send()
funcXMLHttpRequest.onreadystatechange = function () {
if (funcXMLHttpRequest.readyState !== 4) {
return
}
let funStatus = funcXMLHttpRequest.status
if ((funStatus >= 200 && funStatus < 300) || funStatus === 304) {
let funcBlob = new Blob([funcXMLHttpRequest.response])
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(funcBlob, funcFile)
} else {
let funcDownloadLink = document.createElement('a')
funcDownloadLink.download = funcFile
funcDownloadLink.href = URL.createObjectURL(funcBlob)
document.body.appendChild(funcDownloadLink)
funcDownloadLink.click()
document.body.removeChild(funcDownloadLink)
}
}
}
})
},
onChange: function () {
this.$router.push('/supplier/infochange')
},
onChangeRecord: function () {
this.$router.push('/supplier/inforecord')
}
}
}
</script>
<style lang="less">
.supplier-info {
width: 100%;
.supplier-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.supplier-examine {
margin-top: 20px;
span:nth-child(1) {
font-size: @fontSize09;
}
span:nth-child(2) {
color: @colorGrey40;
font-size: @fontSize01;
}
.state-ongoing {
color: #2575FA;
}
.state-pass {
color: #49BA39;
}
.state-refuse {
color: #CF2F1E;
}
}
.supplier-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-right: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.supplier-set {
width: 100%;
.detail-title {
width: 100%;
height: 50px;
margin-top: 24px;
border-bottom: 1px #F2F2F2 solid;
span {
font-size: @fontSize04;
}
}
.detail-title:before{
content: '';
display: inline-block;
width: 4px;
height: 20px;
margin-right: 10px;
overflow: hidden;
background-image: linear-gradient(#CF2F1E 20%, #00468C 20%, #00468C 100%);
}
.detail-content {
min-width: 900px;
margin: 20px 0;
.item-text {
max-height: 146px;
> span:nth-child(1) {
min-width: 160px;
margin: 6px 16px 6px 0;
text-align: right;
font-size: @fontSize02;
}
> span:nth-child(2) {
margin: 6px 0;
font-size: @fontSize01;
}
img {
width: 100%;
max-width: 200px;
padding-top: 10px
}
}
.item-img {
width: 146px;
height: 146px;
margin-right: 8px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
}
<template>
<!-- 账号管理 - 企业信息 -->
<div class="supplier-info">
<!-- 页面地图 -->
<div class="supplier-map row align-c">
<currencyMap :customPath="[{ text: '企业信息', redirect: null }]"></currencyMap>
</div>
<div class="supplier-examine col">
<span v-if="formInfo.examineState === 0" class="state-ongoing">审核中</span>
<span v-if="formInfo.examineState === 0">企业信息审核中</span>
<span v-if="formInfo.examineState === 0">{{'提交时间：' + formInfo.timeExamineSubmit}}</span>
<span v-if="formInfo.examineState === 1" class="state-pass">审核通过</span>
<span v-if="formInfo.examineState === 1">{{'审核时间：' + formInfo.timeExaminePass}}</span>
<span v-if="formInfo.examineState === 2" class="state-refuse">审核不通过</span>
<span v-if="formInfo.examineState === 2">{{'不通过原因：' + formInfo.examineReason}}</span>
<span v-if="formInfo.examineState === 2">{{'审核时间：' + formInfo.timeExaminePass}}</span>
</div>
<!-- 项目进度 - 采购 -->
<div class="supplier-operation">
<button v-if="formInfo.examineState !== 0" @click="onChange()">修改</button>
<button @click="onChangeRecord()">变更记录</button>
</div>
<div class="supplier-set col">
<div class="detail-title row align-c">
<span>基本信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>机构名称：</span>
<span>{{formInfo.companyName}}</span>
</div>
<div class="item-text row align-c">
<span>机构简称：</span>
<span>{{formInfo.companyShortName}}</span>
</div>
<div class="item-text row align-c">
<span>统一社会信用代码：</span>
<span>{{formInfo.companyCode}}</span>
</div>
<div class="item-text row align-c">
<span>登记地址：</span>
<span>{{formInfo.companyAddress}}</span>
</div>
<div class="item-text row align-c">
<span>机构邮箱：</span>
<span>{{formInfo.email}}</span>
</div>
<div class="item-text row align-c">
<span>是否参与网上竞价：</span>
<span>{{formInfo.isQuote === '0' ? '否' : '是'}}</span>
</div>
<div class="item-text row align-c" v-if="formInfo.quoteImage">
<span>竞价承诺书：</span>
<el-button size="small" type="primary" @click.prevent="onUploadDownloadFile">点击下载</el-button>
</div>
<div class="item-text row">
<span>营业执照：</span>
<div class="item-img">
<img :src="formInfo.licenseImage" alt="">
</div>
</div>
</div>
<div class="detail-title row align-c">
<span>税务信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>税务资质：</span>
<span>{{formInfo.companyTaxText}}</span>
</div>
<div class="item-text row align-c">
<span>发票类型：</span>
<span>{{formInfo.companyInvoiceText}}</span>
</div>
<div class="item-text row align-c">
<span>公司名称：</span>
<span>{{formInfo.companyName}}</span>
</div>
<div class="item-text row align-c">
<span>纳税识别号：</span>
<span>{{formInfo.companyCode}}</span>
</div>
<div class="item-text row align-c">
<span>税务登记地址：</span>
<span>{{formInfo.companyAddress}}</span>
</div>
<div class="item-text row align-c">
<span>公司电话：</span>
<span>{{formInfo.companyPhone}}</span>
</div>
<div class="item-text row align-c">
<span>开户行：</span>
<span>{{formInfo.bankName}}</span>
</div>
<div class="item-text row align-c">
<span>银行账号：</span>
<span>{{formInfo.bankAccount}}</span>
</div>
<div class="item-text row align-c">
<span>寄送方式：</span>
<span>{{formInfo.receiveType === '0' ? '寄送' : '自取'}}</span>
</div>
<template v-if="formInfo.receiveType === '0'">
<div class="item-text row align-c">
<span>收件人：</span>
<span>{{formInfo.receiveContactor}}</span>
</div>
<div class="item-text row align-c">
<span>收件人电话：</span>
<span>{{formInfo.receiveMobile}}</span>
</div>
<div class="item-text row align-c">
<span>收件地址：</span>
<span>{{formInfo.receiveArea + formInfo.receiveAddress}}</span>
</div>
</template>
</div>
<div class="detail-title row align-c">
<span>联系人信息</span>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>联系人姓名：</span>
<span>{{formInfo.corporationName}}</span>
</div>
<div class="item-text row align-c">
<span>联系人身份证：</span>
<span>{{formInfo.corporationIdcard}}</span>
</div>
<div class="item-text row align-c">
<span>联系人手机号：</span>
<span>{{formInfo.corporationPhone}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// 工具
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
formInfo: {
companyName: '', // 名称
companyShortName: '', // 简称
companyCode: '', // 统一社会信用代码
companyAddress: '', // 地址
email: '', // 邮箱
licenseImage: '', // 营业执照
quoteImage: '', // 竞价承诺书
isQuote: '',
companyTax: '', // 税务资质
companyInvoice: '0', // 发票类型
companyPhone: '', // 公司电话
bankName: '', // 开户银行
bankAccount: '', // 银行账号
corporationName: '', // 联系人
corporationIdcard: '', // 联系人身份证
corporationPhone: '', // 联系手机
},
}
},
created: function () {
this.reset()
this.init()
},
methods: {
init: function () {
iRequest.request(iHost.base + 'bid/zUserCompany/getUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 每次查询更新用户缓存信息
let funcInfo = this.$store.state.info
funcInfo.register = Number(funcResponse.registerState)
this.$store.commit('info', funcInfo)
localStorage.setItem('info', JSON.stringify(funcInfo))
this.formInfo = {
'companyName': funcResponse.companyName,
'companyShortName': funcResponse.shortName,
'companyCode': funcResponse.companyCode,
'companyAddress': funcResponse.address,
'email': funcResponse.email,
'licenseImage': funcResponse.license,
'quoteFile': funcResponse.bidStatement ? funcResponse.bidStatement.substring(funcResponse.bidStatement.lastIndexOf('/') + 1, funcResponse.bidStatement.length) : '',
'quoteImage': funcResponse.bidStatement,
'isQuote': funcResponse.isJoinBid,
'companyTax': Number(funcResponse.taxType),
'companyInvoice': '0',
'companyPhone': funcResponse.phone,
'bankName': funcResponse.openBank,
'bankAccount': funcResponse.bankAccount,
'receiveType': funcResponse.receiveType ? funcResponse.receiveType : '1',
'receiveContactor': funcResponse.receiveContactor ? funcResponse.receiveContactor : '',
'receiveMobile': funcResponse.receiveMobile ? funcResponse.receiveMobile : '',
'receiveArea': [],
'receiveAddress': funcResponse.receiveAddress ? funcResponse.receiveAddress : '',
'corporationName': funcResponse.contactName,
'corporationIdcard': funcResponse.idcard,
'corporationPhone': funcResponse.mobile,
'timeExamine': funcResponse.auditCreatDate,
'timeExaminePass': funcResponse.auditTime,
'timeExamineSubmit': funcResponse.auditCreatDate,
'examineState': Number(funcResponse.auditState),
'examineReason': funcResponse.reason,
}
// 判断地址数据类型，同时兼容字符串与数组类型
if (Object.prototype.toString.call(funcResponse.receiveArea) === '[object String]') {
this.formInfo.receiveArea = JSON.parse(funcResponse.receiveArea).join(' ')
} else {
this.formInfo.receiveArea = funcResponse.receiveArea.join(' ')
}
console.log(this.formInfo)
switch(this.formInfo.companyTax) {
case 0:
this.formInfo.companyTaxText = '一般纳税人'
break
case 1:
this.formInfo.companyTaxText = '小规模纳税人'
break
case 2:
this.formInfo.companyTaxText = '非增值税纳税人'
break
}
this.formInfo.companyInvoiceText = '增值税普票'
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
reset: function () {
this.formInfo = {
companyName: '', // 名称
companyShortName: '', // 简称
companyCode: '', // 统一社会信用代码
companyAddress: '', // 地址
email: '', // 邮箱
licenseImage: '', // 营业执照
companyTax: '', // 税务资质
companyInvoice: '0', // 发票类型
companyPhone: '', // 公司电话
bankName: '', // 开户银行
bankAccount: '', // 银行账号
corporationName: '', // 联系人
corporationIdcard: '', // 联系人身份证
corporationPhone: '', // 联系手机
}
},
/**
* 下载竞价承诺书
* @function
* @param {object} funcFile
* @returns
*/
onUploadDownloadFile: function () {
let funcFile = this.formInfo.quoteFile
let funcFileUrl = this.formInfo.quoteImage
new Promise(function (funcResolve, funcReject) {
let funcXMLHttpRequest = new XMLHttpRequest()
funcXMLHttpRequest.open('get', funcFileUrl, true)
funcXMLHttpRequest.responseType = 'blob'
funcXMLHttpRequest.send()
funcXMLHttpRequest.onreadystatechange = function () {
if (funcXMLHttpRequest.readyState !== 4) {
return
}
let funStatus = funcXMLHttpRequest.status
if ((funStatus >= 200 && funStatus < 300) || funStatus === 304) {
let funcBlob = new Blob([funcXMLHttpRequest.response])
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(funcBlob, funcFile)
} else {
let funcDownloadLink = document.createElement('a')
funcDownloadLink.download = funcFile
funcDownloadLink.href = URL.createObjectURL(funcBlob)
document.body.appendChild(funcDownloadLink)
funcDownloadLink.click()
document.body.removeChild(funcDownloadLink)
}
}
}
})
},
onChange: function () {
this.$router.push('/supplier/infochange')
},
onChangeRecord: function () {
this.$router.push('/supplier/inforecord')
}
}
}
</script>
<style lang="less">
.supplier-info {
width: 100%;
.supplier-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.supplier-examine {
margin-top: 20px;
span:nth-child(1) {
font-size: @fontSize09;
}
span:nth-child(2) {
color: @colorGrey40;
font-size: @fontSize01;
}
.state-ongoing {
color: #2575FA;
}
.state-pass {
color: #49BA39;
}
.state-refuse {
color: #CF2F1E;
}
}
.supplier-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-right: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.supplier-set {
width: 100%;
.detail-title {
width: 100%;
height: 50px;
margin-top: 24px;
border-bottom: 1px #F2F2F2 solid;
span {
font-size: @fontSize04;
}
}
.detail-title:before{
content: '';
display: inline-block;
width: 4px;
height: 20px;
margin-right: 10px;
overflow: hidden;
background-image: linear-gradient(#CF2F1E 20%, #00468C 20%, #00468C 100%);
}
.detail-content {
min-width: 900px;
margin: 20px 0;
.item-text {
max-height: 146px;
> span:nth-child(1) {
min-width: 160px;
margin: 6px 16px 6px 0;
text-align: right;
font-size: @fontSize02;
}
> span:nth-child(2) {
margin: 6px 0;
font-size: @fontSize01;
}
img {
width: 100%;
max-width: 200px;
padding-top: 10px
}
}
.item-img {
width: 146px;
height: 146px;
margin-right: 8px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
}
</style>
\ No newline at end of file
src/view/personal/supplier-notice.vue
......@@ -200,6 +200,10 @@
</el-dialog>
<el-dialog title="报价记录" :visible.sync="winQuoteRecord" :lock-scroll="false" width="1000px" :close-on-click-modal="false">
<div v-if="quoteRecord.length === 0">
<span>暂无报价</span>
</div>
<!-- 附属合同样式 -->
<div v-if="quoteRecordHaveChild" class="col">
<div v-for="(item, index) in quoteRecord" :key="index" class="col">
......
src/view/personal/supplier-orders-detail.vue
<template>
<!-- 我的订单 - 订单详情 -->
<div class="supplier-notice-detail">
<!-- 页面地图 -->
<div class="detail-map row align-c">
<currencyMap :customPath="[{ text: '我的订单', redirect: '/supplier/orders' }, { text: '订单详情', redirect: null }]"></currencyMap>
</div>
<!-- 项目进度 - 采购 -->
<div v-if="!componentOrder.isMakeBill && componentOrder.paymentAmount !== 0" class="detail-operation">
<button @click="onOpenBill()">申请开票</button>
</div>
<div class="detail-block">
<!-- 订单金额为零样式 -->
<div v-if="componentOrder.paymentAmount === 0" class="detail-content">
<div class="item-text row align-c">
<span>订单号：</span>
<span>{{componentOrder.ordersNumber}}</span>
</div>
<div class="item-text row align-c">
<span>订单金额：</span>
<span>{{componentOrder.paymentAmount + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>收款方：</span>
<span>{{componentOrder.paymentCompany}}</span>
</div>
<div class="item-text row align-c">
<span>费用类型：</span>
<span>{{componentOrder.paymentType}}</span>
</div>
</div>
<!-- 订单金额非零样式 -->
<div v-if="componentOrder.paymentAmount !== 0" class="detail-content">
<div class="item-text row align-c">
<span>订单号：</span>
<span>{{componentOrder.ordersNumber}}</span>
</div>
<div class="item-text row align-c">
<span>订单金额：</span>
<span>{{componentOrder.paymentAmount + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>交易单号：</span>
<span>{{componentOrder.paymentId}}</span>
</div>
<div class="item-text row align-c">
<span>支付方式：</span>
<span>{{componentOrder.paymentWay}}</span>
</div>
<div class="item-text row align-c">
<span>支付时间：</span>
<span>{{componentOrder.paymentTime}}</span>
</div>
<div class="item-text row align-c">
<span>收款方：</span>
<span>{{componentOrder.paymentCompany}}</span>
</div>
<div class="item-text row align-c">
<span>费用类型：</span>
<span>{{componentOrder.paymentType}}</span>
</div>
</div>
</div>
<div class="detail-line"></div>
<!-- 项目信息 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>投标项目</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>项目编号：</span>
<span>{{componentProject.projectNumber}}</span>
</div>
<div class="item-text row align-c">
<span>项目名称：</span>
<span>{{componentProject.projectName}}</span>
</div>
<div class="item-text row align-c">
<span>采购方式：</span>
<span>{{componentProject.buyWay}}</span>
</div>
<div class="item-text row align-c">
<span>采购单位：</span>
<span>{{componentProject.buyCompany}}</span>
</div>
</div>
</div>
<!-- 供应信息 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>供应商</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>供应商名称：</span>
<span>{{componentAgency.agencName}}</span>
</div>
<div class="item-text row align-c">
<span>联系人：</span>
<span>{{componentAgency.agencLiaison}}</span>
</div>
<div class="item-text row align-c">
<span>联系人手机号：</span>
<span>{{componentAgency.agencPhone}}</span>
</div>
</div>
</div>
<!-- 费用款项 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>费用款项</span>
</div>
</div>
<div class="detail-content">
<div v-if="componentProject.isPackage" class="item-text row">
<span>文件售价：</span>
<el-table v-if="tableShow" :data="componentContract" stripe :header-cell-style="tableHeaderStyle">
<el-table-column type="index" label="合同包" align="center" :width="tableWidth[0]"></el-table-column>
<el-table-column prop="number" label="合同包编号" :width="tableWidth[1]"></el-table-column>
<el-table-column prop="object" label="标的" :width="tableWidth[2]"></el-table-column>
<el-table-column prop="price" label="文件售价（元）" align="center" :width="tableWidth[3]"></el-table-column>
</el-table>
</div>
<div v-if="!componentProject.isPackage" class="item-text row align-c">
<span>文件售价：</span>
<span>{{componentContract[0] ? componentContract[0].price : '' + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>支付类别：</span>
<span>线上支付</span>
</div>
</div>
</div>
<div class="detail-line"></div>
<!-- 寄送地址 -->
<div v-if="isReceive" class="detail-block">
<div class="detail-title detail-title-white row align-c">
<div class="row align-c">
<span>寄送地址</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>收件人：</span>
<span>{{componentReceive.name}}</span>
</div>
<div class="item-text row align-c">
<span>收件人电话：</span>
<span>{{componentReceive.phone}}</span>
</div>
<div class="item-text row align-c">
<span>收件地址：</span>
<span>{{componentReceive.area + componentReceive.address}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// npm
import iMiment from 'miment'
// 工具
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iElement from '@/common/js/element/repair.js'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
onOrdersId: 0, // 订单标识
componentOrder: {}, // 订单信息
componentProject: {}, // 项目数据
componentContract: [], // 合同数据
componentAgency: {}, // 供应信息
componentReceive: {}, // 接收信息
tableTotal: 0,
tableSelection: [],
tableHeaderStyle: {
color: '#000000',
background: '#F2F2F2'
},
// element-ui table 自适应宽度渲染错误修复
tableShow: true,
tableDisableWidth: 220 + 64 + 182,
tableWidth: [0, 0, 0, 0],
tableWidthProportion: [20, 30, 25, 25],
tableQuoteRecordTimer: 0,
isReceive: true,
windowChangeTimer: 0,
}
},
watch:{
$route: function () {
this.initKey()
this.ordersDetail(this.onOrdersId)
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
}
},
created: function () {
this.initKey()
this.ordersDetail(this.onOrdersId)
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
},
mounted: function () {
window.onresize = () => {
this.tableShow = false
this.windowChangeTimer = setTimeout(() => {
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
clearTimeout(this.windowChangeTimer)
}, 10)
}
},
methods: {
initKey: function () {
this.onOrdersId = this.$route.query.id
},
ordersDetail: function (funcOrdersId) {
iRequest.request(iHost.base + 'bid/order/getCompanyOrderDetail', { 'orderId': this.onOrdersId } , 'json', 'post')
.then((funcResponse) => {
this.componentOrder = {
'ordersId': funcResponse.order.orderId,
'ordersNumber': funcResponse.order.sn,
'paymentType': funcResponse.order.feeType,
'paymentAmount': funcResponse.order.amount,
'paymentCompany': funcResponse.order.payee,
'paymentId': funcResponse.order.payId,
'paymentWay': funcResponse.order.payType,
'paymentTime': iMiment(funcResponse.order.payTime).format('YYYY-MM-DD hh:mm:ss'),
'isMakeBill': funcResponse.order.billingState === '0' ? false : true,
}
this.componentProject = {
'projectId': funcResponse.project.tenderProjectId,
'projectName': funcResponse.project.projectName,
'projectNumber': funcResponse.project.projectNo,
'buyWay': funcResponse.project.procurementType,
'buyCompany': funcResponse.project.company,
'isPackage': funcResponse.order.containPackage === '0' ? false : true,
}
this.componentAgency = {
'agencName': funcResponse.company.companyName,
'agencPhone': funcResponse.company.mobile,
'agencLiaison': funcResponse.company.contactName,
}
if (funcResponse.orderBilling.name) {
this.isReceive = true
this.componentReceive = {
'name': funcResponse.orderBilling.name,
'phone': funcResponse.orderBilling.phone,
'area': funcResponse.orderBilling.area.replace(/\//g, ''),
'address': funcResponse.orderBilling.address,
}
} else {
this.isReceive = false
}
if (this.componentProject.isPackage) {
// 多个合同
let funcRawData = funcResponse.order.tenderPackages
for (let i = 0, len = funcRawData.length; i < len; i++) {
let funcItem = {
'index': i + 1,
'number': funcRawData[i].no,
'object': funcRawData[i].name,
'price': funcRawData[i].price,
}
this.componentContract.push(funcItem)
}
} else {
this.componentContract.push({ 'price': funcResponse.order.price })
}
})
.catch((funcError) => {})
},
onOpenBill: function () {
this.$router.push('/supplier/ordersbills?id=' + this.componentOrder.ordersId)
},
}
}
</script>
<style lang="less">
.supplier-notice-detail {
width: 100%;
.detail-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.detail-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-left: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.detail-line {
height: 1px;
margin-bottom: 20px;
border-bottom: 1px #EFEFEF solid;
}
.detail-block {
.detail-title {
width: 100%;
> div {
width: 100%;
height: 40px;
padding: 0 12px;
background: #F2F2F2;
}
span {
font-weight: 800;
font-size: @fontSize01;
}
}
.detail-title-white {
> div {
background: #FFFFFF;
}
}
.detail-content {
margin: 30px 0;
.item-text {
> span:nth-child(1) {
min-width: 150px;
margin: 6px 16px 6px 0;
text-align: right;
font-size: @fontSize02;
font-weight: 800;
}
> span:nth-child(2) {
margin: 6px 0;
font-size: @fontSize01;
}
}
}
}
}
<template>
<!-- 我的订单 - 订单详情 -->
<div class="supplier-notice-detail">
<!-- 页面地图 -->
<div class="detail-map row align-c">
<currencyMap :customPath="[{ text: '我的订单', redirect: '/supplier/orders' }, { text: '订单详情', redirect: null }]"></currencyMap>
</div>
<!-- 项目进度 - 采购 -->
<!-- 升级成自动开票功能，暂时隐藏 -->
<!--
<div v-if="!componentOrder.isMakeBill && componentOrder.paymentAmount !== 0" class="detail-operation">
<button @click="onOpenBill()">申请开票</button>
</div>
-->
<div class="detail-block">
<!-- 订单金额为零样式 -->
<div v-if="componentOrder.paymentAmount === 0" class="detail-content">
<div class="item-text row align-c">
<span>订单号：</span>
<span>{{componentOrder.ordersNumber}}</span>
</div>
<div class="item-text row align-c">
<span>订单金额：</span>
<span>{{componentOrder.paymentAmount + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>收款方：</span>
<span>{{componentOrder.paymentCompany}}</span>
</div>
<div class="item-text row align-c">
<span>费用类型：</span>
<span>{{componentOrder.paymentType}}</span>
</div>
</div>
<!-- 订单金额非零样式 -->
<div v-if="componentOrder.paymentAmount !== 0" class="detail-content">
<div class="item-text row align-c">
<span>订单号：</span>
<span>{{componentOrder.ordersNumber}}</span>
</div>
<div class="item-text row align-c">
<span>订单金额：</span>
<span>{{componentOrder.paymentAmount + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>交易单号：</span>
<span>{{componentOrder.paymentId}}</span>
</div>
<div class="item-text row align-c">
<span>支付方式：</span>
<span>{{componentOrder.paymentWay}}</span>
</div>
<div class="item-text row align-c">
<span>支付时间：</span>
<span>{{componentOrder.paymentTime}}</span>
</div>
<div class="item-text row align-c">
<span>收款方：</span>
<span>{{componentOrder.paymentCompany}}</span>
</div>
<div class="item-text row align-c">
<span>费用类型：</span>
<span>{{componentOrder.paymentType}}</span>
</div>
</div>
</div>
<div class="detail-line"></div>
<!-- 项目信息 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>投标项目</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>项目编号：</span>
<span>{{componentProject.projectNumber}}</span>
</div>
<div class="item-text row align-c">
<span>项目名称：</span>
<span>{{componentProject.projectName}}</span>
</div>
<div class="item-text row align-c">
<span>采购方式：</span>
<span>{{componentProject.buyWay}}</span>
</div>
<div class="item-text row align-c">
<span>采购单位：</span>
<span>{{componentProject.buyCompany}}</span>
</div>
</div>
</div>
<!-- 供应信息 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>供应商</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>供应商名称：</span>
<span>{{componentAgency.agencName}}</span>
</div>
<div class="item-text row align-c">
<span>联系人：</span>
<span>{{componentAgency.agencLiaison}}</span>
</div>
<div class="item-text row align-c">
<span>联系人手机号：</span>
<span>{{componentAgency.agencPhone}}</span>
</div>
</div>
</div>
<!-- 费用款项 -->
<div class="detail-block">
<div class="detail-title row align-c">
<div class="row align-c">
<span>费用款项</span>
</div>
</div>
<div class="detail-content">
<div v-if="componentProject.isPackage" class="item-text row">
<span>文件售价：</span>
<el-table v-if="tableShow" :data="componentContract" stripe :header-cell-style="tableHeaderStyle">
<el-table-column type="index" label="合同包" align="center" :width="tableWidth[0]"></el-table-column>
<el-table-column prop="number" label="合同包编号" :width="tableWidth[1]"></el-table-column>
<el-table-column prop="object" label="标的" :width="tableWidth[2]"></el-table-column>
<el-table-column prop="price" label="文件售价（元）" align="center" :width="tableWidth[3]"></el-table-column>
</el-table>
</div>
<div v-if="!componentProject.isPackage" class="item-text row align-c">
<span>文件售价：</span>
<span>{{componentContract[0] ? componentContract[0].price : '' + ' 元'}}</span>
</div>
<div class="item-text row align-c">
<span>支付类别：</span>
<span>线上支付</span>
</div>
</div>
</div>
<div class="detail-line"></div>
<!-- 寄送地址 -->
<div v-if="isReceive" class="detail-block">
<div class="detail-title detail-title-white row align-c">
<div class="row align-c">
<span>寄送地址</span>
</div>
</div>
<div class="detail-content">
<div class="item-text row align-c">
<span>收件人：</span>
<span>{{componentReceive.name}}</span>
</div>
<div class="item-text row align-c">
<span>收件人电话：</span>
<span>{{componentReceive.phone}}</span>
</div>
<div class="item-text row align-c">
<span>收件地址：</span>
<span>{{componentReceive.area + componentReceive.address}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// npm
import iMiment from 'miment'
// 工具
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iElement from '@/common/js/element/repair.js'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
onOrdersId: 0, // 订单标识
componentOrder: {}, // 订单信息
componentProject: {}, // 项目数据
componentContract: [], // 合同数据
componentAgency: {}, // 供应信息
componentReceive: {}, // 接收信息
tableTotal: 0,
tableSelection: [],
tableHeaderStyle: {
color: '#000000',
background: '#F2F2F2'
},
// element-ui table 自适应宽度渲染错误修复
tableShow: true,
tableDisableWidth: 220 + 64 + 182,
tableWidth: [0, 0, 0, 0],
tableWidthProportion: [20, 30, 25, 25],
tableQuoteRecordTimer: 0,
isReceive: true,
windowChangeTimer: 0,
}
},
watch:{
$route: function () {
this.initKey()
this.ordersDetail(this.onOrdersId)
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
}
},
created: function () {
this.initKey()
this.ordersDetail(this.onOrdersId)
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
},
mounted: function () {
window.onresize = () => {
this.tableShow = false
this.windowChangeTimer = setTimeout(() => {
iElement.tableRender(this, window.innerWidth - this.tableDisableWidth, this.tableWidth, this.tableWidthProportion)
clearTimeout(this.windowChangeTimer)
}, 10)
}
},
methods: {
initKey: function () {
this.onOrdersId = this.$route.query.id
},
ordersDetail: function (funcOrdersId) {
iRequest.request(iHost.base + 'bid/order/getCompanyOrderDetail', { 'orderId': this.onOrdersId } , 'json', 'post')
.then((funcResponse) => {
this.componentOrder = {
'ordersId': funcResponse.order.orderId,
'ordersNumber': funcResponse.order.sn,
'paymentType': funcResponse.order.feeType,
'paymentAmount': funcResponse.order.amount,
'paymentCompany': funcResponse.order.payee,
'paymentId': funcResponse.order.payId,
'paymentWay': funcResponse.order.payType,
'paymentTime': iMiment(funcResponse.order.payTime).format('YYYY-MM-DD hh:mm:ss'),
'isMakeBill': funcResponse.order.billingState === '0' ? false : true,
}
this.componentProject = {
'projectId': funcResponse.project.tenderProjectId,
'projectName': funcResponse.project.projectName,
'projectNumber': funcResponse.project.projectNo,
'buyWay': funcResponse.project.procurementType,
'buyCompany': funcResponse.project.company,
'isPackage': funcResponse.order.containPackage === '0' ? false : true,
}
this.componentAgency = {
'agencName': funcResponse.company.companyName,
'agencPhone': funcResponse.company.mobile,
'agencLiaison': funcResponse.company.contactName,
}
if (funcResponse.orderBilling.name) {
this.isReceive = true
this.componentReceive = {
'name': funcResponse.orderBilling.name,
'phone': funcResponse.orderBilling.phone,
'area': '',
'address': funcResponse.orderBilling.address,
}
// 判断地址数据类型，同时兼容字符串与数组类型
if (Object.prototype.toString.call(funcResponse.orderBilling.area) === '[object String]') {
this.componentReceive.area = JSON.parse(funcResponse.orderBilling.area).join(' ')
} else {
this.componentReceive.area = funcResponse.orderBilling.area.join(' ')
}
} else {
this.isReceive = false
}
if (this.componentProject.isPackage) {
// 多个合同
let funcRawData = funcResponse.order.tenderPackages
for (let i = 0, len = funcRawData.length; i < len; i++) {
let funcItem = {
'index': i + 1,
'number': funcRawData[i].no,
'object': funcRawData[i].name,
'price': funcRawData[i].price,
}
this.componentContract.push(funcItem)
}
} else {
this.componentContract.push({ 'price': funcResponse.order.price })
}
})
.catch((funcError) => {})
},
onOpenBill: function () {
this.$router.push('/supplier/ordersbills?id=' + this.componentOrder.ordersId)
},
}
}
</script>
<style lang="less">
.supplier-notice-detail {
width: 100%;
.detail-map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.detail-operation {
height: 40px;
margin-top: 24px;
button {
width: 106px;
height: 36px;
margin-left: 12px;
border:1px solid @colorBlue;
border-radius: 18px;
color: @colorBlue;
background: #FFFFFF;
font-size: @fontSize02;
}
}
.detail-line {
height: 1px;
margin-bottom: 20px;
border-bottom: 1px #EFEFEF solid;
}
.detail-block {
.detail-title {
width: 100%;
> div {
width: 100%;
height: 40px;
padding: 0 12px;
background: #F2F2F2;
}
span {
font-weight: 800;
font-size: @fontSize01;
}
}
.detail-title-white {
> div {
background: #FFFFFF;
}
}
.detail-content {
margin: 30px 0;
.item-text {
> span:nth-child(1) {
min-width: 150px;
margin: 6px 16px 6px 0;
text-align: right;
font-size: @fontSize02;
font-weight: 800;
}
> span:nth-child(2) {
margin: 6px 0;
font-size: @fontSize01;
}
}
}
}
}
</style>
\ No newline at end of file
src/view/personal/supplier-orders.vue
<template>
<!-- 我的订单 - 订单列表 -->
<div class="personal-orders col">
<div class="map row align-c">
<currencyMap :customPath="[{ text: '我的订单', redirect: null }]"></currencyMap>
</div>
<div class="limit row">
<div class="limit-option">
<el-input v-model="limitKeyWord" placeholder="请输入要检索的订单号/项目名称/项目编号"></el-input>
</div>
<div class="limit-option">
<el-select v-model="limitOrdersState" placeholder="费用类型">
<el-option label="支付成功" value="1"></el-option>
<el-option label="暂未支付" value="2"></el-option>
</el-select>
</div>
<div class="limit-operation">
<button class="global-cursor" @click="queryList()">查询</button>
<button class="global-cursor" @click="resetQueryList()">重置</button>
</div>
</div>
<!-- 列表 -->
<div class="list">
<el-table v-if="tableShow" :data="ordersList" stripe :header-cell-style="tableHeaderStyle">
<el-table-column prop="ordersNumber" label="订单号" min-width="100"></el-table-column>
<el-table-column prop="projectNumber" label="项目编号"></el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="type" label="费用类型" align="center"></el-table-column>
<el-table-column prop="paymentAmount" label="支付金额" align="center"></el-table-column>
<el-table-column label="操作" min-width="100" align="center">
<template slot-scope="scope">
<div class="global-cursor list-operation row con-c">
<span @click="onOrdersDetail(scope.row)">查看</span>
<span v-if="!scope.row.isMakeBill && scope.row.paymentAmount !== 0" class="global-color-blue" @click="onOrdersBill(scope.row)">申请开票</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 列表分页 -->
<div class="pagination row">
<el-pagination :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="(size) => {onPagination(size, 'size', pagination)}" @current-change="(size) => {onPagination(size, 'current', pagination)}"></el-pagination>
<button>确定</button>
</div>
</div>
</template>
<script>
import iMiment from 'miment'
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iFramePagination from '@/common/frame/pagination/pagination.js'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
limitKeyWord: '',
limitOrdersState: '',
tableHeaderStyle: {
color: '#000000',
background: '#F2F2F2'
},
ordersList: [],
// element-ui table 自适应宽度渲染错误修复
tableShow: false,
tableWidth: [0, 0, 0, 0, 0],
tableWidthPercentage: [20, 20, 20, 20, 20],
tableQuoteRecordTimer: 0,
quoteRecordActive: -1,
quoteRecordList: [],
pagination: {
size: 10,
total: 0,
current: 1,
}
}
},
watch: {
},
created: function () {
this.queryList()
this.tableRender()
},
mounted: function () {
window.onresize = () => {
this.tableShow = false
this.windowChangeTimer = setTimeout(() => {
this.tableRender()
clearTimeout(this.windowChangeTimer)
}, 10)
}
},
methods: {
/**
* 重新渲染表格
* 修复 element-ui table 不会跟随屏幕宽度自适应的问题
* @function
* @returns
*/
tableRender: function () {
let funcWidth = 0
if (document.body.clientHeight > document.documentElement.clientHeight) {
// 屏幕宽度 - 滚动条宽度 - 菜单宽度 - 缩进宽度
funcWidth = (window.innerWidth - 220 - 64) / 100
} else {
// 屏幕宽度 - 菜单宽度 - 缩进宽度
funcWidth = (window.innerWidth - 17 - 220 - 64) / 100
}
for (let i = 0, len = this.tableWidth.length; i < len; i++) {
this.tableWidth[i] = Math.floor(this.tableWidthPercentage[i] * funcWidth)
}
this.tableShow = true
},
resetQueryList: function () {
this.limitKeyWord = ''
this.limitOrdersState = ''
this.pagination.current = 1
this.queryList()
},
/**
* 列表查询
* @function
* @returns
*/
queryList: function () {
let funcParam = {
'keyword': this.limitKeyWord,
'state': this.limitOrdersState, // 1 - 支付成功, 2 - 暂未支付
'pageSize': this.pagination.size,
'pageNo': this.pagination.current
}
iRequest.request(iHost.base + 'bid/order/getCompanyOrderList', funcParam, 'json', 'post')
.then((funcResponse) => {
let funcList = []
let funcRawData = funcResponse.list
for (let i = 0, len = funcRawData.length; i < len; i++) {
let funcItem = {
'index': i,
'type': funcRawData[i].feeType,
'ordersId': funcRawData[i].orderId,
'ordersNumber': funcRawData[i].sn,
'projectName': funcRawData[i].projectName,
'projectNumber': funcRawData[i].projectNo,
'paymentAmount': funcRawData[i].amount,
'isMakeBill': funcRawData[i].billingState === '0' ? false : true,
}
funcList.push(funcItem)
}
this.ordersList = funcList
this.pagination.total = funcResponse.count
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
onOrdersBill: function (funcItem) {
this.$router.push('/supplier/ordersbills?id=' + funcItem.ordersId)
},
onOrdersDetail: function (funcItem) {
this.$router.push('/supplier/ordersdetail?id=' + funcItem.ordersId)
},
onDetail: function (funcItem, funcIsQuote) {
if (funcIsQuote) {
this.$router.push('/supplier/detail?type=0' + '&id=' + funcItem.noticeId + '&quote=true')
return
}
this.$router.push('/supplier/detail?type=0' + '&id=' + funcItem.noticeId)
},
/**
* 页码组件
* @function
* @param {number} funcValue
* @param {string} funcType - 数据类型
* @param {object} funcUpdateObject - 记录对象
* @returns
*/
onPagination: function (funcValue, funcType, funcUpdateObject) {
iFramePagination(funcValue, funcType, funcUpdateObject)
this.queryList()
},
}
}
</script>
<style lang="less">
.personal-orders {
padding-bottom: 180px;
.map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.limit {
width: 100%;
margin-top: 22px;
.limit-option {
> .el-input,
> .el-select {
width: 320px;
margin-right: 20px;
}
button {
width: 120px;
height: 40px;
margin-right: 20px;
border: 1px solid @colorBlue;
border-radius: 5px;
color: @colorBlue;
background: #FFFFFF;
}
}
.limit-operation {
button {
width: 70px;
height: 40px;
margin-right: 20px;
border-radius: 5px;
border: none;
}
button:nth-child(1) {
color: #FFFFFF;
background: @colorBlue;
}
button:nth-child(2) {
color: @colorGrey20;
background: @colorGrey90;
}
}
}
.list {
padding-top: 20px;
.list-operation {
> span {
margin: 0 16px;
color: @colorBlue;
}
}
}
.pagination {
margin-top: 60px;
> button {
width: 70px;
height: 46px;
color: #FFFFFF;
border: none;
font-size: @fontSize02;
background: #00468C;
}
}
}
</style>
<template>
<!-- 我的订单 - 订单列表 -->
<div class="personal-orders col">
<div class="map row align-c">
<currencyMap :customPath="[{ text: '我的订单', redirect: null }]"></currencyMap>
</div>
<div class="limit row">
<div class="limit-option">
<el-input v-model="limitKeyWord" placeholder="请输入要检索的订单号/项目名称/项目编号"></el-input>
</div>
<div class="limit-option">
<el-select v-model="limitOrdersState" placeholder="费用类型">
<el-option label="支付成功" value="1"></el-option>
<el-option label="暂未支付" value="2"></el-option>
</el-select>
</div>
<div class="limit-operation">
<button class="global-cursor" @click="queryList()">查询</button>
<button class="global-cursor" @click="resetQueryList()">重置</button>
</div>
</div>
<!-- 列表 -->
<div class="list">
<el-table v-if="tableShow" :data="ordersList" stripe :header-cell-style="tableHeaderStyle">
<el-table-column prop="ordersNumber" label="订单号" min-width="100"></el-table-column>
<el-table-column prop="projectNumber" label="项目编号"></el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="type" label="费用类型" align="center"></el-table-column>
<el-table-column prop="paymentAmount" label="支付金额" align="center"></el-table-column>
<el-table-column label="操作" min-width="100" align="center">
<template slot-scope="scope">
<div class="global-cursor list-operation row con-c">
<span @click="onOrdersDetail(scope.row)">查看</span>
<!-- 升级成自动开票功能，暂时隐藏 -->
<!-- <span v-if="!scope.row.isMakeBill && scope.row.paymentAmount !== 0" class="global-color-blue" @click="onOrdersBill(scope.row)">申请开票</span> -->
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 列表分页 -->
<div class="pagination row">
<el-pagination :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="(size) => {onPagination(size, 'size', pagination)}" @current-change="(size) => {onPagination(size, 'current', pagination)}"></el-pagination>
<button>确定</button>
</div>
</div>
</template>
<script>
import iMiment from 'miment'
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iFramePagination from '@/common/frame/pagination/pagination.js'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
limitKeyWord: '',
limitOrdersState: '',
tableHeaderStyle: {
color: '#000000',
background: '#F2F2F2'
},
ordersList: [],
// element-ui table 自适应宽度渲染错误修复
tableShow: false,
tableWidth: [0, 0, 0, 0, 0],
tableWidthPercentage: [20, 20, 20, 20, 20],
tableQuoteRecordTimer: 0,
quoteRecordActive: -1,
quoteRecordList: [],
pagination: {
size: 10,
total: 0,
current: 1,
}
}
},
watch: {
},
created: function () {
this.queryList()
this.tableRender()
},
mounted: function () {
window.onresize = () => {
this.tableShow = false
this.windowChangeTimer = setTimeout(() => {
this.tableRender()
clearTimeout(this.windowChangeTimer)
}, 10)
}
},
methods: {
/**
* 重新渲染表格
* 修复 element-ui table 不会跟随屏幕宽度自适应的问题
* @function
* @returns
*/
tableRender: function () {
let funcWidth = 0
if (document.body.clientHeight > document.documentElement.clientHeight) {
// 屏幕宽度 - 滚动条宽度 - 菜单宽度 - 缩进宽度
funcWidth = (window.innerWidth - 220 - 64) / 100
} else {
// 屏幕宽度 - 菜单宽度 - 缩进宽度
funcWidth = (window.innerWidth - 17 - 220 - 64) / 100
}
for (let i = 0, len = this.tableWidth.length; i < len; i++) {
this.tableWidth[i] = Math.floor(this.tableWidthPercentage[i] * funcWidth)
}
this.tableShow = true
},
resetQueryList: function () {
this.limitKeyWord = ''
this.limitOrdersState = ''
this.pagination.current = 1
this.queryList()
},
/**
* 列表查询
* @function
* @returns
*/
queryList: function () {
let funcParam = {
'keyword': this.limitKeyWord,
'state': this.limitOrdersState, // 1 - 支付成功, 2 - 暂未支付
'pageSize': this.pagination.size,
'pageNo': this.pagination.current
}
iRequest.request(iHost.base + 'bid/order/getCompanyOrderList', funcParam, 'json', 'post')
.then((funcResponse) => {
let funcList = []
let funcRawData = funcResponse.list
for (let i = 0, len = funcRawData.length; i < len; i++) {
let funcItem = {
'index': i,
'type': funcRawData[i].feeType,
'ordersId': funcRawData[i].orderId,
'ordersNumber': funcRawData[i].sn,
'projectName': funcRawData[i].projectName,
'projectNumber': funcRawData[i].projectNo,
'paymentAmount': funcRawData[i].amount,
'isMakeBill': funcRawData[i].billingState === '0' ? false : true,
}
funcList.push(funcItem)
}
this.ordersList = funcList
this.pagination.total = funcResponse.count
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
onOrdersBill: function (funcItem) {
this.$router.push('/supplier/ordersbills?id=' + funcItem.ordersId)
},
onOrdersDetail: function (funcItem) {
this.$router.push('/supplier/ordersdetail?id=' + funcItem.ordersId)
},
onDetail: function (funcItem, funcIsQuote) {
if (funcIsQuote) {
this.$router.push('/supplier/detail?type=0' + '&id=' + funcItem.noticeId + '&quote=true')
return
}
this.$router.push('/supplier/detail?type=0' + '&id=' + funcItem.noticeId)
},
/**
* 页码组件
* @function
* @param {number} funcValue
* @param {string} funcType - 数据类型
* @param {object} funcUpdateObject - 记录对象
* @returns
*/
onPagination: function (funcValue, funcType, funcUpdateObject) {
iFramePagination(funcValue, funcType, funcUpdateObject)
this.queryList()
},
}
}
</script>
<style lang="less">
.personal-orders {
padding-bottom: 180px;
.map {
height: 66px;
border-bottom: 1px #EFEFEF solid;
}
.limit {
width: 100%;
margin-top: 22px;
.limit-option {
> .el-input,
> .el-select {
width: 320px;
margin-right: 20px;
}
button {
width: 120px;
height: 40px;
margin-right: 20px;
border: 1px solid @colorBlue;
border-radius: 5px;
color: @colorBlue;
background: #FFFFFF;
}
}
.limit-operation {
button {
width: 70px;
height: 40px;
margin-right: 20px;
border-radius: 5px;
border: none;
}
button:nth-child(1) {
color: #FFFFFF;
background: @colorBlue;
}
button:nth-child(2) {
color: @colorGrey20;
background: @colorGrey90;
}
}
}
.list {
padding-top: 20px;
.list-operation {
> span {
margin: 0 16px;
color: @colorBlue;
}
}
}
.pagination {
margin-top: 60px;
> button {
width: 70px;
height: 46px;
color: #FFFFFF;
border: none;
font-size: @fontSize02;
background: #00468C;
}
}
}
</style>
src/view/public/bid-list.vue
......@@ -3,8 +3,8 @@
<div class="main global-maxwidth">
<!-- 全局搜索 -->
<div class="query-key row">
<el-input v-model="limitKeyword" placeholder="请输入您要搜索的内容" @keyup.enter.native="queryList()"></el-input>
<el-button @click="queryList()">
<el-input v-model="limitKeyword" placeholder="请输入您要搜索的内容" @keyup.enter.native="onSearchContent()"></el-input>
<el-button @click="onSearchContent()">
<span>搜　　索</span>
</el-button>
</div>
......@@ -51,7 +51,7 @@
<!-- 列表分页 -->
<div class="pagination row con-c">
<el-pagination :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="(size) => {onPagination(size, 'size', pagination)}" @current-change="(size) => {onPagination(size, 'current', pagination)}"></el-pagination>
<el-pagination :total="pagination.total" :current-page="pagination.current" layout="total, sizes, prev, pager, next, jumper" @size-change="(size) => {onPagination(size, 'size', pagination)}" @current-change="(size) => {onPagination(size, 'current', pagination)}"></el-pagination>
<button>确定</button>
</div>
</div>
......@@ -250,6 +250,12 @@
}
},
onSearchContent: function () {
this.pagination.size = 10
this.pagination.current = 1
this.queryList()
},
/**
* 条件选择 - 标签选择
* @function
......@@ -262,12 +268,15 @@
switch (funcRankIndex) {
case 0:
this.limitInformation = funcItem.value
this.pagination.size = 10
this.pagination.current = 1
if (funcItem.value === '') {
this.$router.push('/bid')
} else {
this.$router.push('/bid?type=' + funcItem.value)
}
this.queryList()
break
case 1:
......@@ -296,6 +305,8 @@
* @returns
*/
onLimitOrder: function (funcType) {
this.pagination.size = 10
this.pagination.current = 1
switch (funcType) {
case 'old':
this.limitTimeOrder = 0
......
src/view/public/bid-notice.js
......@@ -1286,36 +1286,61 @@ let output = function (thisVue, id, type, isPreview) {
}
}
console.log('funcProject')
console.log(funcProject)
thisVue.$store.commit('componentProject', funcProject)
let funcRawData
if (funcProject.isPackage) {
funcRawData = funcResponse.packages
funcRawData.sort(function(a, b) {
let funcMainWeight = 1000
a.index = a.no
b.index = b.no
// 计算 a 的索引权重
let funcIndex = a.index.toString().split('-')
let funcA = Number(funcIndex[0]) * funcMainWeight
if (funcIndex[1]) {
a.isChild = true
funcA = funcA + Number(funcIndex[1])
} else {
a.isChild = false
}
// 计算 b 的索引权重
funcIndex = b.index.toString().split('-')
let funcB = Number(funcIndex[0]) * funcMainWeight
if (funcIndex[1]) {
b.isChild = true
funcB = funcB + Number(funcIndex[1])
} else {
b.isChild = false
}
return funcA - funcB
})
for (let i = 0, len = funcRawData.length; i < len; i++) {
let funcItem = {
'index': i + 1, // 序号
'index': funcRawData[i].index.toString(), // 序号
'id': funcRawData[i].biddingPackageId, // 标识
'object': funcRawData[i].name, // 标的
'object': funcRawData[i].name ? funcRawData[i].name : '', // 标的
'budget': funcRawData[i].fixedPrice, // 预算金额
'quantity': funcRawData[i].num, // 标的数量
'requirement': funcRawData[i].requirement, // 竞价参数要求
'isChild': funcRawData[i].isChild,
}
if (funcRawData[i].company) {
funcItem.resultName = funcRawData[i].company
} else {
funcItem.resultName = '流标'
}
if (funcRawData[i].price && funcRawData[i].price !== 0) {
funcItem.resultPrice = funcRawData[i].price
if (!funcItem.isChild) {
if (funcRawData[i + 1] && funcRawData[i + 1].isChild) {
funcItem.haveChild = true
} else {
funcItem.haveChild = false
}
} else {
funcItem.resultPrice = 0
funcItem.haveChild = false
}
funcPackage.push(funcItem)
}
thisVue.$store.commit('componentContract', funcPackage)
}
......
src/view/public/bid-notice.vue
......@@ -119,16 +119,28 @@
</div>
<!-- 竞价变更信息 -->
<div v-if="[10].indexOf(noticeType) >= 0 && (componentProject.isChangeTime || componentProject.isChangePackage)" class="info-item">
<div v-if="[10].indexOf(noticeType) >= 0" class="info-item">
<div class="title title-decorate row align-c">
<span>变更信息</span>
</div>
<div v-if="componentProject.isPause" class="change col">
<span>{{'是否暂停竞价：是'}}</span>
</div>
<div v-if="componentProject.isRecover" class="change col">
<span>{{'是否恢复竞价：是'}}</span>
</div>
<div v-if="componentProject.isTermination" class="change col">
<span>{{'是否终止竞价：是'}}</span>
</div>
<div v-if="componentProject.isChangeTime" class="change col">
<span>{{'更改竞价时间：' + componentProject.timeBegin + ' - ' + componentProject.timeEnd}}</span>
</div>
<div v-if="componentProject.isPackage" class="change col">
<div v-if="componentProject.isChangePackage" class="change col">
<div v-if="componentContract.length > 0" class="row align-s">
<span>更改竞价标的：</span>
<el-table :data="componentContract" stripe :header-cell-style="tableHeaderStyle">
......@@ -661,6 +673,13 @@
return
}
// 供应身份但注册时未选择参与竞价不能报价
if (!this.$store.getters.info.isJoinBid) {
this.tipText = '您的注册信息尚未参与网上竞价，暂不能报价；如需报价，请您在企业信息中上传竞价承诺书，信息审核通过后，我们将为您开通报价功能。'
this.winTip = true
return
}
// 供应身份而且通过审核
if (this.$store.getters.info.identity === 2 && this.$store.getters.info.register === 1) {
this.winQuote = true
......@@ -1027,7 +1046,8 @@
}
span:nth-child(3) {
min-width: 160px;
display: inline-block;
min-width: 100px;
margin-right: 20px;
}
......
src/view/register-supplier.vue
......@@ -140,11 +140,9 @@
</el-radio-group>
</el-form-item>
<el-form-item label="发票类型(可多选)：" prop="companyInvoice">
<el-checkbox-group v-model="formRegister.companyInvoice">
<el-checkbox label="增值税专票"></el-checkbox>
<el-checkbox label="增值税普票"></el-checkbox>
<el-checkbox label="其他类型"></el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="formRegister.companyInvoice" :value="formRegister.companyInvoice">
<el-radio label="0">增值税专票</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公司名称：" prop="companyName">
<span>{{formRegister.companyName}}</span>
......@@ -164,6 +162,29 @@
<el-form-item label="银行账户：" prop="bankAccount">
<el-input v-model="formRegister.bankAccount" maxlength="30" placeholder="请输入银行账户"></el-input>
</el-form-item>
<el-form-item label="发票领取方式：">
<el-radio-group v-model="formRegister.receiveType">
<el-radio label="0">寄送</el-radio>
<el-radio label="1">自取</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="formRegister.receiveType === '0'">
<el-form-item label="收件人：" prop="receiveContactor">
<el-input v-model="formRegister.receiveContactor" maxlength="30" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="收件人电话：" prop="receiveMobile">
<el-input v-model="formRegister.receiveMobile" maxlength="20" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="收件地址：" prop="receiveArea">
<currencyArea @change="onAreaChange"></currencyArea>
</el-form-item>
<el-form-item label="" prop="receiveAddress">
<el-input v-model="formRegister.receiveAddress" maxlength="100" placeholder="请输入详细地址"></el-input>
</el-form-item>
</template>
<el-form-item class="register-info-button row con-c">
<el-button type="primary" @click.prevent="onPrevious()">上一步</el-button>
<el-button type="primary" @click.prevent="onNext()">下一步</el-button>
......@@ -234,10 +255,12 @@
import iRule from '@/common/js/rule/rule.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
import iCurrencyArea from '@/components/currency-area.vue'
export default {
components: {
currencyMap: iCurrencyMap,
currencyArea: iCurrencyArea,
},
data: function () {
......@@ -260,10 +283,15 @@
// 税务信息
companyTax: '',
companyInvoice: [],
companyInvoice: '0',
companyPhone: '',
bankName: '',
bankAccount: '',
receiveType: '',
receiveContactor: '',
receiveMobile: '',
receiveArea: [],
receiveAddress: '',
// 短信验证
corporationName: '',
......@@ -361,7 +389,7 @@
{ required: true, message: '请选择税务资质', trigger: 'blur' }
],
companyInvoice: [
{ type: 'array', required: true, message: '请选择发票类型', trigger: 'change' }
{ required: true, message: '请选择发票类型', trigger: 'blur' }
],
companyPhone: [
{ required: true, message: '请输入公司电话', trigger: 'blur' },
......@@ -403,6 +431,22 @@
{ required: true, message: '请再次输入登录密码', trigger: 'blur' },
{ validator: (funcRule, funcValue, funcCallback) => iRule.passwordRepeat(funcRule, funcValue, funcCallback, this.formRegister.password), message: '与登录密码不一致，请重新输入', trigger: 'blur'}
],
receiveContactor: [
{ required: true, message: '请输入收件人姓名', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, message: '请正确输入姓名', trigger: 'blur'}
],
receiveMobile: [
{ required: true, message: '请输入收件人电话', trigger: 'blur' },
{ validator: iRule.fixedPhone, message: '请正确输入收件人电话', trigger: 'blur'}
],
receiveArea: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
receiveAddress: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ validator: iRule.predefineRoutineText, trigger: 'blur'}
],
},
}
},
......@@ -437,10 +481,15 @@
// 税务信息
companyTax: '',
companyInvoice: [],
companyInvoice: '0',
companyPhone: '',
bankName: '',
bankAccount: '',
receiveType: '',
receiveContactor: '',
receiveMobile: '',
receiveArea: [],
receiveAddress: '',
// 短信验证
corporationName: '',
......@@ -703,9 +752,15 @@
'taxType': this.formRegister.companyTax,
'phone': this.formRegister.companyPhone,
'invoiceType': this.formRegister.companyInvoice,
'invoiceType': '0',
'openBank': this.formRegister.bankName,
'bankAccount': this.formRegister.bankAccount,
'receiveType': this.formRegister.receiveType,
'receiveContactor': this.formRegister.receiveContactor,
'receiveMobile': this.formRegister.receiveMobile,
'receiveArea': this.formRegister.receiveArea,
'receiveAddress': this.formRegister.receiveAddress,
'contactName': this.formRegister.corporationName,
'idcard': this.formRegister.corporationIdcard,
......@@ -714,17 +769,7 @@
'password': this.formRegister.password,
}
for (let i = 0, len = funcParam.invoiceType.length; i < len; i++) {
if (funcParam.invoiceType[i] === '增值税专票') funcParam.invoiceType[i] = 0
if (funcParam.invoiceType[i] === '增值税普票') funcParam.invoiceType[i] = 1
if (funcParam.invoiceType[i] === '其他类型') funcParam.invoiceType[i] = 2
}
funcParam.invoiceType = funcParam.invoiceType.join()
console.log(JSON.stringify(funcParam))
// return
iRequest.request(iHost.base + 'bid/zUserCompany/registerCompany', funcParam, 'json', 'post')
.then((funcResponse) => {
this.state = 11
......@@ -881,6 +926,19 @@
/**
* 地域选择组件
* @function
* @param {array } funcArea - ['省份', '城市', '区域' ]
* @returns
*/
onAreaChange: function (funcArea) {
this.formRegister.receiveArea = funcArea
this.$store.commit('areaSelection', funcArea)
},
/**
* 上传组件 - 文件格式
* @function
* @param {string} funcType
......
src/view/sign-in-input.vue
<template>
<!-- 通用组件 - 登录 -->
<div class="currency-sign-in-input row con-c">
<div class="main global-maxwidth">
<!-- 页面地图 -->
<div>
<currencyMap></currencyMap>
</div>
<!-- 登录信息 -->
<div class="row con-c align-s">
<div class="currency-sign-in-form col con-b">
<div>
<span>{{statusText}}</span>
</div>
<el-form ref="formSignIn" :model="info" :rules="rule" label-width="0">
<el-form-item prop="phone">
<el-input v-model="info.phone" placeholder="手机号" :autofocus="true" maxlength="11" @keyup.enter.native="onSignInSubmit()"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="info.password" show-password maxlength="20" placeholder="密码" @keyup.enter.native="onSignInSubmit()"></el-input>
</el-form-item>
<el-form-item v-show="showImageCode" class="form-item-code" prop="code">
<el-input v-model="info.code" maxlength="4" placeholder="请输入验证码" @keyup.enter.native="onSignInSubmit()"></el-input>
<button @click.prevent=""><img :src="imageCodeData" alt=""></button>
</el-form-item>
<div class="row con-b align-c">
<!-- <el-checkbox v-model="isRecordPassword" @change="onCheckboxChange">记住密码</el-checkbox> -->
<span></span>
<span class="currency-sign-in-forget global-cursor" @click="onForget()">忘记密码？</span>
</div>
<el-form-item class="submit">
<button class="global-cursor" @click.prevent="onSignInSubmit()">登录</button>
</el-form-item>
</el-form>
<div class="row con-c align-c">
<span class="global-cursor">没有账号？</span>
<span class="global-cursor" @click="onRegister">立即注册</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import iCryptoJs from 'crypto-js'
import iHost from '@/common/js/host.js'
import iRule from '@/common/js/rule/rule.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
statusText: '',
isRecordPassword: false,
info: {
'name': '', // 名称
'phone': '', // 登录号码
'password': '', // 记录密码
'register': '', // 审核状态
'identity': '', // 登录身份
'code': ''
},
imageCodeData: '',
showImageCode: false,
// 表单验证
rule: {
phone: [
{ required: true, message: '请输入手机号码', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' }
],
},
}
},
created: function () {
this.reset()
this.init()
},
methods: {
/**
* 设置登录文本以及登录身份
* @function
* @returns
*/
init: function () {
// 1 - 专家
// 2 - 商家
switch (this.$route.query.status) {
case 'specialist':
this.info.identity = 1
this.statusText = '专家登录'
break
case 'supplier':
this.info.identity = 2
this.statusText = '供应商登录'
break
case 'agency':
this.info.identity = 3
this.statusText = '代理商登录'
break
default:
this.$router.push('/signIn')
break
}
},
reset: function () {
this.info = {
'name': '', // 名称
'phone': '', // 登录号码
'password': '', // 记录密码
'register': '', // 审核状态
'identity': '', // 登录身份
'code': ''
}
this.imageCodeData = ''
this.showImageCode = false
},
/**
* 读取登录信息
* @function
* @returns
*/
loadSignInInfo: function () {
let funcSignInRecord
switch (this.info.identity) {
case 1:
funcSignInRecord = localStorage.getItem('signInSpecialist')
break
case 2:
funcSignInRecord = localStorage.getItem('signInSupplier')
break
}
if (funcSignInRecord) {
this.info.phone = JSON.parse(funcSignInRecord).phone
this.info.password = JSON.parse(funcSignInRecord).password
this.isRecordPassword = true
}
},
/**
* 登录时保存登录信息
* @function
* @returns
*/
recordPassword: function () {
if (!this.isRecordPassword) return
let funcParam = {
'phone': this.info.phone,
'password': this.info.password,
}
switch (this.info.identity) {
case 1:
localStorage.setItem('signInSpecialist', JSON.stringify(funcParam))
break
case 2:
localStorage.setItem('signInSupplier', JSON.stringify(funcParam))
break
}
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('isSignIn', true)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
this.redirectPath()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.$store.commit('isSignIn', true)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
this.redirectPath()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
redirectPath: function () {
if (this.$store.getters.redirectPath) {
this.$router.push(this.$store.getters.redirectPath)
} else {
this.$router.push('/')
}
},
/**
* 密码加密
* @function
* @param {number} value - 加密字段
* @param {array } key
* @returns
*/
encryptByDES: function (value, key) {
if(value == '') return '';
var keyHex = iCryptoJs.enc.Utf8.parse(key);
var encrypted = iCryptoJs.DES.encrypt(value, keyHex, {
mode: iCryptoJs.mode.ECB,
padding: iCryptoJs.pad.Pkcs7
})
return encrypted.toString()
},
/**
* 登录
* @function
* @param {number} funcIndex - 组件索引
* @param {array } funcSelectId - ['id01', 'id02', 'id03', 'id04', '' ]
* @returns
*/
onSignInSubmit: function () {
this.$refs.formSignIn.validate(funcValid => {
if (funcValid) {
let funcParam = {
'loginName': this.info.phone,
'password': this.encryptByDES(this.info.password, 'bidkey11'),
'userType': this.info.identity,
'vCode': this.info.code
}
iRequest.request(iHost.base + 'bid/zLogin/login', funcParam, 'json', 'post', { isToken: false })
.then((funcResponse) => {
localStorage.clear()
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.recordPassword()
this.queryUserInfo()
})
.catch((funcError) => {
if (funcError.data) {
this.showImageCode = true
this.imageCodeData = funcError.data.imgCode
}
})
}
})
},
/**
* 勾选组件 - 记录密码
* @function
* @param {number} funcValue
* @returns
*/
onCheckboxChange: function (funcValue) {
this.isRecordPassword = funcValue
if (!this.isRecordPassword) {
switch (this.info.identity) {
case 1:
localStorage.removeItem('signInSpecialist')
break
case 2:
localStorage.removeItem('signInSupplier')
break
}
}
},
onForget: function () {
this.$router.push('/signIn/forget?status=' + this.$route.query.status)
},
onRegister: function () {
this.$router.push('/register?status=' + this.$route.query.status)
},
},
}
</script>
<style lang="less">
.currency-sign-in-input {
width: 100%;
background-image: url(@backgroundImageUrl);
> div {
width: 1200px;
min-height: 480px;
margin-top: 36px;
margin-bottom: 40px;
padding: 32px 32px 0 32px;
background: @colorWhite;
box-shadow: 0px 0px 20px 0px rgba(41, 41, 41, 0.05);
.currency-sign-in-form {
width: 428px;
height: 380px;
margin-top: 20px;
padding: 20px 26px;
background:rgba(255, 255, 255, 1);
box-shadow: 0px 0px 45px 0px rgba(41, 41, 41, 0.1);
border-radius: 15px;
.form-item-code {
> div {
display: flex;
flex-direction: row;
.el-input {
display: inline-block;
width: 182px;
}
button {
display: inline-block;
width: 180px;
height: 40px;
margin-left: 10px;
padding: 0;
border: none;
color: @colorWhite;
background: @colorBlue;
img {
width: 180px;
height: 40px;
}
}
}
}
> div:nth-child(1) {
margin-bottom: 10px;
span {
color: @colorBlue;
font-size: @fontSize04;
background: #FFFFFF;
}
}
.el-form-item {
width: 376px;
}
.el-checkbox {
span {
color: @colorGrey60;
}
}
.submit button {
width: 376px;
height: 50px;
margin-top: 10px;
border: none;
border-radius: 25px;
font-size: @fontSize02;
letter-spacing: 4px;
background: @colorBlue;
color: @colorWhite;
}
.currency-sign-in-forget {
text-align: right;
font-size: @fontSize01;
color: @colorBlue;
background: #FFFFFF;
}
> div:nth-child(3) {
span:nth-child(1) {
color: @colorGrey60;
font-size: @fontSize01;
}
span:nth-child(2) {
color: @colorBlue;
font-size: @fontSize01;
}
}
}
}
}
</style>
<template>
<!-- 通用组件 - 登录 -->
<div class="currency-sign-in-input row con-c">
<div class="main global-maxwidth">
<!-- 页面地图 -->
<div>
<currencyMap></currencyMap>
</div>
<!-- 登录信息 -->
<div class="row con-c align-s">
<div class="currency-sign-in-form col con-b">
<div>
<span>{{statusText}}</span>
</div>
<el-form ref="formSignIn" :model="info" :rules="rule" label-width="0">
<el-form-item prop="phone">
<el-input v-model="info.phone" placeholder="手机号" :autofocus="true" maxlength="11" @keyup.enter.native="onSignInSubmit()"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="info.password" show-password maxlength="20" placeholder="密码" @keyup.enter.native="onSignInSubmit()"></el-input>
</el-form-item>
<el-form-item v-show="showImageCode" class="form-item-code" prop="code">
<el-input v-model="info.code" maxlength="4" placeholder="请输入验证码" @keyup.enter.native="onSignInSubmit()"></el-input>
<button @click.prevent=""><img :src="imageCodeData" alt=""></button>
</el-form-item>
<div class="row con-b align-c">
<!-- <el-checkbox v-model="isRecordPassword" @change="onCheckboxChange">记住密码</el-checkbox> -->
<span></span>
<span class="currency-sign-in-forget global-cursor" @click="onForget()">忘记密码？</span>
</div>
<el-form-item class="submit">
<button class="global-cursor" @click.prevent="onSignInSubmit()">登录</button>
</el-form-item>
</el-form>
<div class="row con-c align-c">
<span class="global-cursor">没有账号？</span>
<span class="global-cursor" @click="onRegister">立即注册</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import iCryptoJs from 'crypto-js'
import iHost from '@/common/js/host.js'
import iRule from '@/common/js/rule/rule.js'
import iRequest from '@/common/js/request/request.js'
import iCurrencyMap from '@/components/currency-map.vue'
export default {
components: {
currencyMap: iCurrencyMap,
},
data: function () {
return {
statusText: '',
isRecordPassword: false,
info: {
'name': '', // 名称
'phone': '', // 登录号码
'password': '', // 记录密码
'register': '', // 审核状态
'identity': '', // 登录身份
'code': ''
},
imageCodeData: '',
showImageCode: false,
// 表单验证
rule: {
phone: [
{ required: true, message: '请输入手机号码', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' }
],
},
}
},
created: function () {
this.reset()
this.init()
},
methods: {
/**
* 设置登录文本以及登录身份
* @function
* @returns
*/
init: function () {
// 1 - 专家
// 2 - 商家
switch (this.$route.query.status) {
case 'specialist':
this.info.identity = 1
this.statusText = '专家登录'
break
case 'supplier':
this.info.identity = 2
this.statusText = '供应商登录'
break
case 'agency':
this.info.identity = 3
this.statusText = '代理商登录'
break
default:
this.$router.push('/signIn')
break
}
},
reset: function () {
this.info = {
'name': '', // 名称
'phone': '', // 登录号码
'password': '', // 记录密码
'register': '', // 审核状态
'identity': '', // 登录身份
'code': ''
}
this.imageCodeData = ''
this.showImageCode = false
},
/**
* 读取登录信息
* @function
* @returns
*/
loadSignInInfo: function () {
let funcSignInRecord
switch (this.info.identity) {
case 1:
funcSignInRecord = localStorage.getItem('signInSpecialist')
break
case 2:
funcSignInRecord = localStorage.getItem('signInSupplier')
break
}
if (funcSignInRecord) {
this.info.phone = JSON.parse(funcSignInRecord).phone
this.info.password = JSON.parse(funcSignInRecord).password
this.isRecordPassword = true
}
},
/**
* 登录时保存登录信息
* @function
* @returns
*/
recordPassword: function () {
if (!this.isRecordPassword) return
let funcParam = {
'phone': this.info.phone,
'password': this.info.password,
}
switch (this.info.identity) {
case 1:
localStorage.setItem('signInSpecialist', JSON.stringify(funcParam))
break
case 2:
localStorage.setItem('signInSupplier', JSON.stringify(funcParam))
break
}
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('isSignIn', true)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
this.redirectPath()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.info.isJoinBid = Number(funcResponse.isJoinBid) === 0 ? false : true
this.$store.commit('isSignIn', true)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
this.redirectPath()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
redirectPath: function () {
if (this.$store.getters.redirectPath) {
this.$router.push(this.$store.getters.redirectPath)
} else {
this.$router.push('/')
}
},
/**
* 密码加密
* @function
* @param {number} value - 加密字段
* @param {array } key
* @returns
*/
encryptByDES: function (value, key) {
if(value == '') return '';
var keyHex = iCryptoJs.enc.Utf8.parse(key);
var encrypted = iCryptoJs.DES.encrypt(value, keyHex, {
mode: iCryptoJs.mode.ECB,
padding: iCryptoJs.pad.Pkcs7
})
return encrypted.toString()
},
/**
* 登录
* @function
* @param {number} funcIndex - 组件索引
* @param {array } funcSelectId - ['id01', 'id02', 'id03', 'id04', '' ]
* @returns
*/
onSignInSubmit: function () {
this.$refs.formSignIn.validate(funcValid => {
if (funcValid) {
let funcParam = {
'loginName': this.info.phone,
'password': this.encryptByDES(this.info.password, 'bidkey11'),
'userType': this.info.identity,
'vCode': this.info.code
}
iRequest.request(iHost.base + 'bid/zLogin/login', funcParam, 'json', 'post', { isToken: false })
.then((funcResponse) => {
localStorage.clear()
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.recordPassword()
this.queryUserInfo()
})
.catch((funcError) => {
if (funcError.data) {
this.showImageCode = true
this.imageCodeData = funcError.data.imgCode
}
})
}
})
},
/**
* 勾选组件 - 记录密码
* @function
* @param {number} funcValue
* @returns
*/
onCheckboxChange: function (funcValue) {
this.isRecordPassword = funcValue
if (!this.isRecordPassword) {
switch (this.info.identity) {
case 1:
localStorage.removeItem('signInSpecialist')
break
case 2:
localStorage.removeItem('signInSupplier')
break
}
}
},
onForget: function () {
this.$router.push('/signIn/forget?status=' + this.$route.query.status)
},
onRegister: function () {
this.$router.push('/register?status=' + this.$route.query.status)
},
},
}
</script>
<style lang="less">
.currency-sign-in-input {
width: 100%;
background-image: url(@backgroundImageUrl);
> div {
width: 1200px;
min-height: 480px;
margin-top: 36px;
margin-bottom: 40px;
padding: 32px 32px 0 32px;
background: @colorWhite;
box-shadow: 0px 0px 20px 0px rgba(41, 41, 41, 0.05);
.currency-sign-in-form {
width: 428px;
height: 380px;
margin-top: 20px;
padding: 20px 26px;
background:rgba(255, 255, 255, 1);
box-shadow: 0px 0px 45px 0px rgba(41, 41, 41, 0.1);
border-radius: 15px;
.form-item-code {
> div {
display: flex;
flex-direction: row;
.el-input {
display: inline-block;
width: 182px;
}
button {
display: inline-block;
width: 180px;
height: 40px;
margin-left: 10px;
padding: 0;
border: none;
color: @colorWhite;
background: @colorBlue;
img {
width: 180px;
height: 40px;
}
}
}
}
> div:nth-child(1) {
margin-bottom: 10px;
span {
color: @colorBlue;
font-size: @fontSize04;
background: #FFFFFF;
}
}
.el-form-item {
width: 376px;
}
.el-checkbox {
span {
color: @colorGrey60;
}
}
.submit button {
width: 376px;
height: 50px;
margin-top: 10px;
border: none;
border-radius: 25px;
font-size: @fontSize02;
letter-spacing: 4px;
background: @colorBlue;
color: @colorWhite;
}
.currency-sign-in-forget {
text-align: right;
font-size: @fontSize01;
color: @colorBlue;
background: #FFFFFF;
}
> div:nth-child(3) {
span:nth-child(1) {
color: @colorGrey60;
font-size: @fontSize01;
}
span:nth-child(2) {
color: @colorBlue;
font-size: @fontSize01;
}
}
}
}
}
</style>
src/view/specialist/component/specialist-header.vue
<template>
<!-- 通用组件 - 头部 -->
<div class="components-specialist-header row con-b align-c" @mouseleave="onMenuControl('leave')">
<div class="title">
<span>我的工作台</span>
</div>
<div class="personal row align-c">
<img class="global-cursor" src="../../../assets/currency-map.png" alt="" @click="$router.push('/')">
<el-badge :is-dot="isNewNotice" class="row align-c">
<img class="global-cursor" src="../../../assets/notice-tip.png" alt="" @click="$router.push('/specialist/notify')">
</el-badge>
<span>{{info ? info.name : ''}}</span>
<span class="global-cursor" @click="onSignOut()">退出</span>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
isNewNotice: false,
winMenu: false,
}
},
computed: {
info: function () {
return this.$store.state.info
},
notify: function () {
return this.$store.state.notify
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
notify: {
handler: function (funcNewValue, funcOldValue) {
this.queryNotice()
},
deep: true,
immediate: true,
}
},
created: function () {
this.init()
this.queryNotice()
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
console.log('funcToken - 3', funcToken)
if (!funcToken) {
this.$router.push('/signIn')
return
}
console.log(iToken.state(funcToken))
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
console.log(funcResponse)
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.onSignOut()
break
}
},
queryNotice: function () {
iRequest.request(iHost.base + 'bid/zNotification/countUnread', { 'userType': 1 }, 'json', 'post')
.then((funcResponse) => {
if (funcResponse.count > 0) {
this.isNewNotice = true
} else {
this.isNewNotice = false
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSignOut: function () {
this.$router.push('/')
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
}
}
}
</script>
<style lang="less">
.components-specialist-header {
width: 100%;
height: 60px;
padding: 0 40px;
background-image: url(../../../assets/bg-title.png);
background-repeat: no-repeat;
.title {
color: #FFFFFF;
}
.personal {
position: relative;
height: 100%;
color: #FFFFFF;
span {
margin-left: 20px;
}
img {
width: 16px;
height: 16px;
margin-left: 6px;
}
.menu {
z-index: 7;
position: absolute;
top: 42px;
width: 190px;
height: 60px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
.sign-out {
height: 60px;
font-size: @fontSize01;
color: #000000;
}
}
}
}
</style>
<template>
<!-- 通用组件 - 头部 -->
<div class="components-specialist-header row con-b align-c" @mouseleave="onMenuControl('leave')">
<div class="title">
<span>我的工作台</span>
</div>
<div class="personal row align-c">
<img class="global-cursor" src="../../../assets/currency-map.png" alt="" @click="$router.push('/')">
<el-badge :is-dot="isNewNotice" class="row align-c">
<img class="global-cursor" src="../../../assets/notice-tip.png" alt="" @click="$router.push('/specialist/notify')">
</el-badge>
<span>{{info ? info.name : ''}}</span>
<span class="global-cursor" @click="onSignOut()">退出</span>
</div>
</div>
</template>
<script>
import iHost from '@/common/js/host.js'
import iRequest from '@/common/js/request/request.js'
import iToken from '@/common/js/token.js'
export default {
data: function () {
return {
isNewNotice: false,
winMenu: false,
}
},
computed: {
info: function () {
return this.$store.state.info
},
notify: function () {
return this.$store.state.notify
},
},
watch: {
info: {
handler: function (funcNewValue, funcOldValue) {
},
deep: true,
immediate: true,
},
notify: {
handler: function (funcNewValue, funcOldValue) {
this.queryNotice()
},
deep: true,
immediate: true,
}
},
created: function () {
this.init()
this.queryNotice()
},
methods: {
/**
* 检查登录状态
* @function
* @returns
*/
init: function () {
let funcToken = localStorage.getItem('token')
console.log('funcToken - 3', funcToken)
if (!funcToken) {
this.$router.push('/signIn')
return
}
console.log(iToken.state(funcToken))
switch (iToken.state(funcToken)) {
case 'valid':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
break
case 'refresh':
this.$store.commit('isSignIn', true)
this.$store.commit('info', JSON.parse(localStorage.getItem('info')))
iRequest.request(iHost.base + 'bid/zLogin/refreshToken', { 'refreshToken': localStorage.getItem('refresh') }, 'json', 'get')
.then((funcResponse) => {
console.log(funcResponse)
localStorage.setItem('token', funcResponse.token)
localStorage.setItem('refresh', funcResponse.refreshToken)
this.queryUserInfo()
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 'relist':
this.onSignOut()
break
}
},
queryNotice: function () {
iRequest.request(iHost.base + 'bid/zNotification/countUnread', { 'userType': 1 }, 'json', 'post')
.then((funcResponse) => {
if (funcResponse.count > 0) {
this.isNewNotice = true
} else {
this.isNewNotice = false
}
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
},
queryUserInfo: function () {
switch (this.info.identity) {
case 1:
iRequest.request(iHost.base + 'bid/zUserExpert/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.name
this.info.register = Number(funcResponse.state)
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
case 2:
iRequest.request(iHost.base + 'bid/zUserCompany/getLoginUserInfo', {}, 'json', 'get')
.then((funcResponse) => {
// 0 - 审核
// 1 - 通过
// 2 - 拒绝
this.info.name = funcResponse.companyName
this.info.register = Number(funcResponse.state)
this.info.isJoinBid = Number(funcResponse.isJoinBid) === 0 ? false : true
this.$store.commit('info', this.info)
localStorage.setItem('info', JSON.stringify(this.info))
})
.catch((funcError) => {
this.$message.error(funcError.message)
})
break
}
},
onMenuControl: function (funcType) {
switch (funcType) {
case 'enter':
this.winMenu = true
break
case 'leave':
this.winMenu = false
break
}
},
onSignOut: function () {
this.$router.push('/')
this.$store.commit('info', null)
this.$store.commit('isSignIn', false)
this.$store.commit('redirectPath', null)
localStorage.clear()
}
}
}
</script>
<style lang="less">
.components-specialist-header {
width: 100%;
height: 60px;
padding: 0 40px;
background-image: url(../../../assets/bg-title.png);
background-repeat: no-repeat;
.title {
color: #FFFFFF;
}
.personal {
position: relative;
height: 100%;
color: #FFFFFF;
span {
margin-left: 20px;
}
img {
width: 16px;
height: 16px;
margin-left: 6px;
}
.menu {
z-index: 7;
position: absolute;
top: 42px;
width: 190px;
height: 60px;
background: #FFFFFF;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
.sign-out {
height: 60px;
font-size: @fontSize01;
color: #000000;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment