root
/
digital_park_static
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

完成税收查询列表

feature/20220929首页静态开发
王饶冀 3 lat temu
rodzic
93fd31d769
commit
e62661e018
9 zmienionych plików z 1002 dodań i 23 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 8
    0
      digital-park-web/digital-park/src/assets/scss/common.scss
  2. 10
    0
      digital-park-web/digital-park/src/router/modules/my-related.js
  3. 1
    10
      digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.scss
  4. 6
    6
      digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.vue
  5. 2
    7
      digital-park-web/digital-park/src/views/my-related/mseeage/Message.scss
  6. 143
    0
      digital-park-web/digital-park/src/views/my-related/tax-inquiry/TaxInquiry.scss
  7. 285
    0
      digital-park-web/digital-park/src/views/my-related/tax-inquiry/TaxInquiry.vue
  8. 22
    0
      digital-park-web/digital-park/src/views/my-related/tax-inquiry/components/Info.vue
  9. 525
    0
      digital-park-web/digital-park/src/views/my-related/tax-inquiry/components/TaxTable.vue

+ 8
- 0
digital-park-web/digital-park/src/assets/scss/common.scss Wyświetl plik



.pointer { .pointer {
cursor: pointer; cursor: pointer;
}

.fl {
float: left;
}

.fr {
float: right;
} }

+ 10
- 0
digital-park-web/digital-park/src/router/modules/my-related.js Wyświetl plik

title: "我的消息", title: "我的消息",
}, },
}, },
// 税收查询
{
path: "/tax-inquiry",
name: "TaxInquiry",
component: () =>
import ("../../views/my-related/tax-inquiry/TaxInquiry.vue"),
meta: {
title: "税收查询",
},
},
]; ];

+ 1
- 10
digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.scss Wyświetl plik

color: #0086e7; color: #0086e7;
} }
} }
.cursor-pointer {
cursor: pointer;
}
.mb-20 { .mb-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.fl {
float: left;
}
.fr {
float: right;
}
}
}

+ 6
- 6
digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.vue Wyświetl plik

<el-checkbox v-model="isRemember">记住密码</el-checkbox> <el-checkbox v-model="isRemember">记住密码</el-checkbox>
</div> </div>
<span <span
class="forgot-password fr cursor-pointer"
class="forgot-password fr pointer"
@click="loginMethodChange(4)" @click="loginMethodChange(4)"
>忘记密码?</span> >忘记密码?</span>
</div> </div>
<div class="login-btn cursor-pointer">{{ getLoginBtnText() }}</div>
<div class="login-btn pointer">{{ getLoginBtnText() }}</div>
<div class="other-login" v-if="loginMethod == 1 || loginMethod == 2"> <div class="other-login" v-if="loginMethod == 1 || loginMethod == 2">
<span <span
class="fl cursor-pointer"
class="fl pointer"
v-if="loginMethod == 1" v-if="loginMethod == 1"
@click="loginMethodChange(2)" @click="loginMethodChange(2)"
>手机验证码登录</span> >手机验证码登录</span>
<span <span
class="fl cursor-pointer"
class="fl pointer"
v-if="loginMethod == 2" v-if="loginMethod == 2"
@click="loginMethodChange(1)" @click="loginMethodChange(1)"
>账号密码登录</span> >账号密码登录</span>
<span class="fr cursor-pointer">
<span class="fr pointer">
你还没有账户? 你还没有账户?
<span class="reg-span" @click="loginMethodChange(3)">立即注册 ></span> <span class="reg-span" @click="loginMethodChange(3)">立即注册 ></span>
</span> </span>
</div> </div>
<div class="other-login" v-else> <div class="other-login" v-else>
<span class="fr cursor-pointer">
<span class="fr pointer">
已经拥有账户? 已经拥有账户?
<span class="reg-span" @click="loginMethodChange(1)">立即登录 ></span> <span class="reg-span" @click="loginMethodChange(1)">立即登录 ></span>
</span> </span>

+ 2
- 7
digital-park-web/digital-park/src/views/my-related/mseeage/Message.scss Wyświetl plik

.my-message[data-1664346848130] { .my-message[data-1664346848130] {
background: #f9f9f9; background: #f9f9f9;
.message-header { .message-header {
background: #1878cc;
background: url("~@/assets/image/myRelated/headerBgc.png") no-repeat;
background-size: 100% 100%;
} }
.message-content-container { .message-content-container {
width: 1200px; width: 1200px;
} }
} }
} }
.fl {
float: left;
}
.fr {
float: right;
}
} }

+ 143
- 0
digital-park-web/digital-park/src/views/my-related/tax-inquiry/TaxInquiry.scss Wyświetl plik

.tax-inquiry[data-1664416679731] {
background: #f9f9f9;
.tax-header {
background: url("~@/assets/image/myRelated/headerBgc.png") no-repeat;
background-size: 100% 100%;
}
.tax-content-container {
width: 1200px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
.title {
height: 30px;
line-height: 30px;
.title-span {
@include font(18px, #334a5f);
margin-left: 10px;
font-weight: bold;
}
}
.tab-div {
margin-top: 20px;
height: 50px;
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
position: sticky;
top: 0;
z-index: 3001;
padding-left: 15px;
.tab-span {
height: 50px;
line-height: 50px;
@include font(14px, #fff);
font-weight: bold;
box-sizing: border-box;
margin-right: 15px;
cursor: pointer;
position: relative;
&::after {
content: "";
width: 100%;
height: 2px;
border-radius: 3px;
background: #fff;
position: absolute;
bottom: 0px;
left: 0;
display: none;
}
&.active,
&:hover {
&::after {
display: block;
}
}
}
}
.tab-item-container {
margin-top: 20px;
background: #fff;
border-radius: 2px;
.tab-item-title {
height: 50px;
border-bottom: 1px solid #bce1ff;
.title-span {
font-family: Alibaba-PuHuiTi;
@include font(18px, #334a5f);
font-weight: bold;
height: 25px;
margin-left: 30px;
margin-top: 20px;
position: relative;
cursor: pointer;
&::after {
content: "";
width: 100%;
height: 3px;
border-radius: 3px;
background-image: linear-gradient(
135deg,
#42a6fe 0%,
#0070d2 100%
);
position: absolute;
bottom: -5px;
left: 0;
}
}
}
.tab-item-content {
padding: 22px 30px;
@include font(14px, #334a5f);
}
.strong {
font-weight: bold;
margin-bottom: 20px;
}
.label-span {
color: #637485;
margin-bottom: 5px;
}
$tableBoderColor: #bcd8e9;
.tax-table {
.tax-el-table {
border-color: $tableBoderColor;
&::before {
background-color: $tableBoderColor;
}
&::after {
background-color: $tableBoderColor;
}
}
th {
background: #f2f7fb;
height: 50px;
@include font(14px, #334a5f);
}
td {
height: 50px;
}
// .el-table__body-wrapper {
// border-color: red;
// }
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-image: linear-gradient(
135deg,
#42a6fe 0%,
#0070d2 100%
);
border-radius: 3px;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 0;
background: #f2f7fb;
}
}
}
}
}

+ 285
- 0
digital-park-web/digital-park/src/views/my-related/tax-inquiry/TaxInquiry.vue Wyświetl plik

<template>
<div class="tax-inquiry" data-1664416679731>
<div class="tax-header">
<Nav />
</div>
<div class="tax-content-container">
<div class="title">
<img src="~@assets/image/myRelated/titleIcon.png" class="title-icon fl" alt="icon" />
<span class="title-span fl">税收查询</span>
</div>
<div class="tab-div">
<span
class="fl tab-span"
:class="{'active':currentTab == tab.code}"
v-for="(tab,inx) of taxTabs"
:key="inx"
@click="tabChange(tab,inx)"
>{{ tab.label }}</span>
</div>
<div class="anchor-container">
<div
class="tab-item-container"
:id="tab.code"
v-for="(tab,inx) of taxTabs"
:key="inx"
>
<div class="tab-item-title">
<span class="title-span fl">{{ tab.label }}</span>
</div>
<div class="tab-item-content">
<!-- 评级信息 -->
<Info v-if="tab.code == 'regInfo'" :data="regInfo" />
<!-- 评级信息 -->
<Info v-else-if="tab.code == 'ratingInfo'" :data="ratingInfo" />
<!-- 公司信息 -->
<Info v-else-if="tab.code == 'companyInfo'" :data="companyInfo" />
<!-- 列表系列 -->
<TaxTable v-else :code="tab.code" :tableData="tab.data" />
</div>
</div>
</div>
</div>
<Footer />
</div>
</template>

<script>
import "./TaxInquiry.scss";
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import Info from "./components/Info.vue";
import TaxTable from "./components/TaxTable.vue";
export default {
components: { Nav, Footer, Info, TaxTable },
data() {
return {
// tab
taxTabs: [
{
label: "注册信息",
code: "regInfo",
},
{
label: "评级信息",
code: "ratingInfo",
},
{
label: "公司信息",
code: "companyInfo",
},
{
label: "销项发票",
code: "salesInvoice",
data: [],
},
{
label: "进项发票",
code: "incomingInvoice",
data: [],
},
{
label: "申报信息",
code: "declarationInfo",
data: [],
},
{
label: "社保申报表",
code: "socialSecurityDec",
data: [],
},
{
label: "增值税",
code: "vat",
data: [],
},
{
label: "企业所得税",
code: "corporateIncomeTax",
data: [],
},
{
label: "利润表",
code: "incomeStatement",
data: [],
},
{
label: "资产负债表",
code: "balanceSheet",
data: [],
},
{
label: "现金流量表",
code: "cashFlowStatement",
data: [],
},
{
label: "完税信息表",
code: "taxPaymentInfo",
data: [],
},
{
label: "欠税信息",
code: "taxDebtInfo",
data: [],
},
{
label: "稽查信息",
code: "auditInfo",
data: [],
},
{
label: "违法信息",
code: "illegalInfo",
data: [],
},
],
// 当前tab
currentTab: "regInfo",
// 注册信息
regInfo: [
{
label: "纳税人识别号",
value: "91310115MA1H71QG17",
},
{
label: "纳税人名称",
value: "李瑾",
col: 6,
},
{
label: "注册地址",
value: "中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室自由贸易试验区临港新片区新城路2号24幢C3689室",
col: 10,
},
{
label: "生产经营地址",
value: "上海市徐汇区吴中路8号锦辉大厦4F上海市徐汇区吴中路8号锦辉大厦4F上海市徐汇区吴中路8号锦辉大厦4F上海市徐汇区吴中路8号锦辉大厦4F",
},
{
label: "生产经营期限起",
value: "2015-10-22",
col: 6,
},
{
label: "生产经营期限至",
value: "2065-10-22",
col: 10,
},
{
label: "经营范围",
value: "一般项目：技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；广告设计、代理；广告发布（非广播电台、电视台、报刊出版单位）；广告制作；互联网销售（除销售需要许可的商品）；软件开发；组织文化艺术交流活动；市场主体登记注册代理；信息咨询服务（不含许可类信息咨询服务",
col: 24,
},
],
// 评级信息
ratingInfo: [
{
label: "税务征信等级",
value: "SSS",
},
{
label: "评价得分(大查柜)",
value: "98",
col: 6,
},
{
label: "年份",
value: "2015",
col: 10,
},
],
// 公司信息
companyInfo: [
{
label: "申请号",
value: "91310115MA1H71QG17",
},
{
label: "纳税人识别号",
value: "91310115MA1H71QG17",
col: 6,
},
{
label: "等级SSS",
value: "2015",
col: 10,
},
{
label: "公司名称",
value: "上海禾获仁网络科技有限公司",
},
{
label: "所属所属税务局",
value: "自由贸易试验区临港新片区市场监督管理局",
col: 16,
},
],
// 所有内容高度
contentHeightList: [],
};
},
mounted() {
// 监听滚动
window.addEventListener("scroll", this.handleScroll, true);
// 获得内容高度
this.getChildrenHeigh();
},
methods: {
// 页签切换
tabChange(tab,inx) {
// 获取父元素的dom元素
let pageScroll = document.querySelector(".anchor-container");
// 激活当前高亮nav栏
this.currentTab = tab.code;
// 点击后滚动到相应的区域
window.scrollTo({
top: pageScroll.children[inx].offsetTop - 50, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
behavior: "instant", //丝滑滚动
});
},
// 获取内容高度
getChildrenHeigh() {
// 获得他们的父元素节点
let pageScroll = document.querySelector(".anchor-container");
let arr = [];
// console.log(this.navLists.length);
// 将所有子元素的高度放入arr
for (let i = 0; i < this.taxTabs.length; i++) {
// 把所有获得到的子元素高度都放入arr中
arr.push(pageScroll.children[i].offsetTop);
}
// 给这个arr兜底，这样可以解决最后一个内容栏监听不到的bug，注意：如果最后一栏内容高度低于滚动条当前的高度，也不会高亮显示最后一栏的标题哦
arr.push(Number.MAX_VALUE);
this.contentHeightList = arr;
},
// 监听滚轮
handleScroll() {
// 获得当前的滚轮高度
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let Heights = this.contentHeightList;
scrollTop += 50;
// 只有ContentHeightList存在才监听当前高度
if (this.contentHeightList) {
// console.log(scrollTop);
for (let i = 0; i < Heights.length; i++) {
// 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
if (
scrollTop >= Heights[i] &&
scrollTop <= Heights[i + 1]
) {
// console.log(i);
this.currentTab = this.taxTabs[i].code;
// 那么就激活当前的nav栏
// this.moveIndex = i;
// return false;
}
}
}
},
},
};
</script>

+ 22
- 0
digital-park-web/digital-park/src/views/my-related/tax-inquiry/components/Info.vue Wyświetl plik

<template>
<el-row :gutter="15">
<el-col :span="item.col || 8" v-for="(item,itemInx) of data" :key="itemInx">
<div class="label-span">{{ item.label }}：</div>
<div class="strong">{{ item.value }}</div>
</el-col>
</el-row>
</template>

<script>
export default {
props: {
data: {
type: Array,
default: () => [],
},
},
};
</script>

<style>
</style>

+ 525
- 0
digital-park-web/digital-park/src/views/my-related/tax-inquiry/components/TaxTable.vue Wyświetl plik

<template>
<div class="tax-table">
<el-table
ref="tableList"
class="tax-el-table"
:data="tableData"
:border="true"
:cell-style="{borderColor:'#bcd8e9'}"
:header-cell-style="{borderColor:'#bcd8e9'}"
>
<el-table-column
:label="item.label"
:align="'center'"
v-for="(item,inx) of getColumn()"
:key="inx"
:width="item.width"
>
<template slot-scope="scope">{{ scope.row[item.prop] }}</template>
</el-table-column>
</el-table>
</div>
</template>

<script>
const TableColumn = {
// 销项发票
salesInvoice: [
{
label: "销方税号",
prop: "v1",
},
{
label: "购方税号",
prop: "v2",
},
{
label: "购方公司名称",
prop: "v3",
width: 160,
},
{
label: "申报日期",
prop: "v4",
},
{
label: "开票日期",
prop: "v5",
},
{
label: "所属日期起",
prop: "v5",
width: 140,
},
{
label: "所属日期止",
prop: "v5",
width: 140,
},
{
label: "发票号码",
prop: "v5",
},
{
label: "创建时间",
prop: "v5",
},
{
label: "是否作废",
prop: "v5",
},
{
label: "发票类型",
prop: "v5",
},
{
label: "金额（不含税）",
prop: "v5",
width: 140,
},
{
label: "税额",
prop: "v5",
},
],
// 进项发票
incomingInvoice: [
{
label: "纳税人识别号",
prop: "v1",
width: 140,
},
{
label: "销方公司名称",
prop: "v1",
width: 140,
},
{
label: "销货方纳税人识别号",
prop: "v1",
width: 160,
},
{
label: "认证日期",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "征收项目",
prop: "v1",
},
{
label: "发票号码",
prop: "v1",
},
{
label: "所属日期起",
prop: "v5",
width: 140,
},
{
label: "所属日期止",
prop: "v5",
width: 140,
},
{
label: "开票日期",
prop: "v5",
},
{
label: "是否作废",
prop: "v5",
},
{
label: "发票类型",
prop: "v5",
},
{
label: "金额（不含税）",
prop: "v5",
width: 140,
},
{
label: "税额",
prop: "v5",
},
{
label: "创建时间",
prop: "v5",
},
],
// 申报信息
declarationInfo: [
{
label: "申报类型",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "开始日期",
prop: "v1",
},
{
label: "结束日期",
prop: "v1",
},
{
label: "金额",
prop: "v1",
},
],
// 社保申请表
socialSecurityDec: [
{
label: "纳税申报起始日",
prop: "v1",
},
{
label: "纳税申报起止日",
prop: "v1",
},
{
label: "缴费人数",
prop: "v1",
},
{
label: "抵缴费额",
prop: "v1",
},
{
label: "本期应缴费额",
prop: "v1",
},
{
label: "报表类型",
prop: "费率",
},
{
label: "社保申报日期",
prop: "费率",
},
],
// 增值税
vat: [
{
label: "所属时期起",
prop: "v1",
},
{
label: "所属时期止",
prop: "v1",
},
{
label: "本期数-货物/劳务/服务/不动产/无形资产",
prop: "v1",
},
],
// 企业所得税
corporateIncomeTax: [
{
label: "开始日期",
prop: "v1",
},
{
label: "结束日期",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "本期金额",
prop: "v1",
},
{
label: "所属税务局",
prop: "v1",
},
],
// 利润表
incomeStatement: [
{
label: "开始日期",
prop: "v1",
},
{
label: "结束日期",
prop: "v1",
},
{
label: "项目名称",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "本月累计金额",
prop: "v1",
},
{
label: "本年累计金额",
prop: "v1",
},
],
// 资产负债表
balanceSheet: [
{
label: "开始日期",
prop: "v1",
},
{
label: "结束日期",
prop: "v1",
},
{
label: "资产类型",
prop: "v1",
},
{
label: "项目名称",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "年初余额",
prop: "v1",
},
{
label: "余额",
prop: "v1",
},
],
// 现金流量表
cashFlowStatement: [
{
label: "所属日期起",
prop: "v1",
},
{
label: "所属日期止",
prop: "v1",
},
{
label: "项目名称",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "现金流量表类型",
prop: "v1",
},
{
label: "项目类型",
prop: "v1",
},
{
label: "本期金额",
prop: "v1",
},
{
label: "上期金额",
prop: "v1",
},
{
label: "本年累计金额",
prop: "v1",
},
],
// 完税信息表
taxPaymentInfo: [
{
label: "所属日期起",
prop: "v1",
},
{
label: "所属日期止",
prop: "v1",
},
{
label: "项目名称",
prop: "v1",
},
{
label: "应缴税款",
prop: "v1",
},
{
label: "税款状态",
prop: "v1",
},
{
label: "税款种类",
prop: "v1",
},
{
label: "已缴税款",
prop: "v1",
},
{
label: "税款日期",
prop: "v1",
},
{
label: "其他信息",
prop: "v1",
},
],
// 欠税信息
taxDebtInfo: [
{
label: "纳税申报起始日",
prop: "v1",
},
{
label: "纳税申报起止日",
prop: "v1",
},
{
label: "税款状态",
prop: "v1",
},
{
label: "申报日期",
prop: "v1",
},
{
label: "税款种类",
prop: "v1",
},
{
label: "已缴税款",
prop: "v1",
},
{
label: "应补税额",
prop: "v1",
},
{
label: "缴款期限",
prop: "v1",
},
],
// 稽查信息
auditInfo: [
{
label: "稽查类型名称",
prop: "v1",
},
{
label: "案件名称",
prop: "v1",
},
{
label: "稽查状态",
prop: "v1",
},
{
label: "案源登记日期",
prop: "v1",
},
{
label: "案件来源",
prop: "v1",
},
{
label: "违法违章类型",
prop: "v1",
},
{
label: "案件处理意见",
prop: "v1",
},
],
// 违法信息
illegalInfo: [
{
label: "登记日期",
prop: "v1",
},
{
label: "违法违章类型名称",
prop: "v1",
width: 160,
},
{
label: "违法违章状态",
prop: "v1",
width: 140,
},
{
label: "违法违章手段名称",
prop: "v1",
width: 160,
},
{
label: "违法违章事实",
prop: "v1",
width: 120,
},
{
label: "立案日期",
prop: "v1",
},
{
label: "登记日期",
prop: "v1",
},
{
label: "处理处罚时间",
prop: "v1",
width: 120,
},
{
label: "限改状态",
prop: "v1",
},
{
label: "所属期间起",
prop: "v1",
width: 120,
},
{
label: "所属期间止",
prop: "v1",
width: 120,
},
],
};
export default {
props: {
// 传进来的code
code: {
type: String,
default: "",
},
// 传进来的数据
tableData: {
type: Array,
default: () => [],
},
},
methods: {
getColumn() {
return TableColumn[this.code];
},
},
};
</script>

<style>
</style>

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz