| export const getCompanyList = p => get("/areaCompany/getCompanyList", p); | export const getCompanyList = p => get("/areaCompany/getCompanyList", p); | ||||
| // 获取企业详情 | // 获取企业详情 | ||||
| export const getCompanyById = p => get("/areaCompany/getCompanyById", p); | |||||
| export const getCompanyById = p => get("/areaCompany/getCompanyById", p); | |||||
| // 获取园区资讯列表 | |||||
| export const getCompanyNewsList = p => get("/areaCompany/getCompanyNewsList", p); | |||||
| // 获取资讯详情 | |||||
| export const getCompanyNewsById = p => get("/areaCompany/getCompanyNewsById", p); |
| <el-pagination | <el-pagination | ||||
| @size-change="handleSizeChange" | @size-change="handleSizeChange" | ||||
| @current-change="handleCurrentChange" | @current-change="handleCurrentChange" | ||||
| :current-page.sync="page" | |||||
| :page-size="pageSize" | |||||
| layout="prev, pager, next,sizes, jumper" | |||||
| :current-page.sync="currentPageTemp" | |||||
| :page-sizes="pageSizes" | |||||
| :page-size="pageSizeTemp" | |||||
| :layout="layout" | |||||
| :total="total" | :total="total" | ||||
| ></el-pagination> | ></el-pagination> | ||||
| </div> | </div> | ||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| page: { | |||||
| type: Number, | |||||
| currentPage: { | |||||
| types: Number, | |||||
| required: false, | |||||
| default: 1, | default: 1, | ||||
| }, | }, | ||||
| pageSize: { | |||||
| type: Number, | |||||
| default: 10, | |||||
| }, | |||||
| total: { | total: { | ||||
| type: Number, | |||||
| types: Number, | |||||
| required: false, | |||||
| default: 0, | default: 0, | ||||
| }, | }, | ||||
| pageSize: { | |||||
| types: Number, | |||||
| required: false, | |||||
| default: 10, | |||||
| }, | |||||
| }, | }, | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: {}, | components: {}, | ||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return {}; | |||||
| return { | |||||
| pageSizes: [10, 20, 30, 40, 50], | |||||
| currentPageTemp: this.currentPage, | |||||
| pageSizeTemp: this.pageSize, | |||||
| layout: "total, sizes, prev, pager, next, jumper", | |||||
| }; | |||||
| }, | }, | ||||
| //监听属性 类似于data概念 | //监听属性 类似于data概念 | ||||
| computed: {}, | computed: {}, | ||||
| //方法集合 | //方法集合 | ||||
| methods: { | methods: { | ||||
| handleSizeChange(val) { | handleSizeChange(val) { | ||||
| console.log(`每页 ${val} 条`); | |||||
| this.$emit("handleSizeChange", val); | |||||
| this.pageSizeTemp = val; | |||||
| this.$emit("change-page-size", val); | |||||
| }, | }, | ||||
| handleCurrentChange(val) { | handleCurrentChange(val) { | ||||
| console.log(`当前页: ${val}`); | |||||
| this.$emit("handleCurrentChange", val); | |||||
| this.currentPageTemp = val; | |||||
| this.$emit("change-page", val); | |||||
| }, | }, | ||||
| }, | }, | ||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | created() {}, | ||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| beforeCreate() {}, //生命周期 - 创建之前 | |||||
| beforeMount() {}, //生命周期 - 挂载之前 | |||||
| beforeUpdate() {}, //生命周期 - 更新之前 | |||||
| updated() {}, //生命周期 - 更新之后 | |||||
| beforeDestroy() {}, //生命周期 - 销毁之前 | |||||
| destroyed() {}, //生命周期 - 销毁完成 | |||||
| activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发 | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> |
| // 导出对象 | |||||
| export const handlePageNation = { | |||||
| methods: { | |||||
| // 分页 | |||||
| changePage(val) { | |||||
| this.queryParams.page = val; | |||||
| this.getData(); | |||||
| }, | |||||
| // 分页 | |||||
| changePageSize(val) { | |||||
| this.queryParams.pageSize = val; | |||||
| this.queryParams.page = 1; | |||||
| this.getData(); | |||||
| }, | |||||
| }, | |||||
| }; |
| import ("@views/park-information/List.vue"), | import ("@views/park-information/List.vue"), | ||||
| }, | }, | ||||
| { | { | ||||
| path: "search", | |||||
| name: "Search", | |||||
| path: "question-search", | |||||
| name: "QuestionSearch", | |||||
| component: () => | component: () => | ||||
| import ("@views/park-information/SearchList.vue"), | import ("@views/park-information/SearchList.vue"), | ||||
| }, | }, | ||||
| { | { | ||||
| path: "detail", | |||||
| name: "Detail", | |||||
| path: "question-detail", | |||||
| name: "QuestionDetail", | |||||
| component: () => | component: () => | ||||
| import ("@views/park-information/Detail.vue"), | import ("@views/park-information/Detail.vue"), | ||||
| }, | }, |
| <span class="english">Park Enterprises</span> | <span class="english">Park Enterprises</span> | ||||
| </div> | </div> | ||||
| <div class="search_box"> | <div class="search_box"> | ||||
| <SearchInput></SearchInput> | |||||
| <SearchInput @search-data="searchData"></SearchInput> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <section class="screen_box"> | <section class="screen_box"> | ||||
| <div> | <div> | ||||
| <div class="screen_row" v-for="item in screen" :key="item.name"> | |||||
| <div class="screen_row" v-for="(item, screenIndex) in screen" :key="item.name"> | |||||
| <div class="screen_title">{{ item.name }}:</div> | <div class="screen_title">{{ item.name }}:</div> | ||||
| <ul class="screen_ul"> | <ul class="screen_ul"> | ||||
| <li | <li | ||||
| v-for="(arrItem, index) in item.value" | v-for="(arrItem, index) in item.value" | ||||
| :key="index" | :key="index" | ||||
| :class="['pointer', item.activeScreen === index ? 'active' : '']" | :class="['pointer', item.activeScreen === index ? 'active' : '']" | ||||
| @click="changeScreenItem(screenIndex, arrItem, index)" | |||||
| > | > | ||||
| {{ arrItem }} | {{ arrItem }} | ||||
| </li> | </li> | ||||
| </ul> | </ul> | ||||
| <div> | |||||
| <!-- <div> | |||||
| <img | <img | ||||
| class="pointer" | class="pointer" | ||||
| src="@assets/image/company/icon_toggle.png" | src="@assets/image/company/icon_toggle.png" | ||||
| alt="展开" | alt="展开" | ||||
| /> | /> | ||||
| </div> | |||||
| </div> --> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </section> | </section> | ||||
| ></company-item> | ></company-item> | ||||
| </div> | </div> | ||||
| <div class="pagination_box"> | <div class="pagination_box"> | ||||
| <Pagination></Pagination> | |||||
| <Pagination | |||||
| :currentPage="queryParams.page" | |||||
| :total="total" | |||||
| @change-page="changePage" | |||||
| @change-page-size="changePageSize" | |||||
| ></Pagination> | |||||
| </div> | </div> | ||||
| </section> | </section> | ||||
| import Pagination from "@components/Pagination.vue"; | import Pagination from "@components/Pagination.vue"; | ||||
| import SearchInput from "@views/park-information/components/SearchInput.vue"; | import SearchInput from "@views/park-information/components/SearchInput.vue"; | ||||
| import { getCompanyList } from "@api/company"; | import { getCompanyList } from "@api/company"; | ||||
| import { handlePageNation } from "@mixin/pageNationMixin"; | |||||
| export default { | export default { | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: { Nav, Footer, CompanyItem, Pagination, SearchInput }, | components: { Nav, Footer, CompanyItem, Pagination, SearchInput }, | ||||
| mixins: [handlePageNation], | |||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return { | return { | ||||
| }, | }, | ||||
| ], | ], | ||||
| pageLoading: false, | pageLoading: false, | ||||
| queryParams: { | |||||
| claim: false, | |||||
| claimStateId: "", | |||||
| page: 1, | |||||
| pageSize: 10, | |||||
| search: "", | |||||
| ownerIndustry: "", // 所属行业 | |||||
| }, | |||||
| total: 0, | |||||
| dataList: [], | dataList: [], | ||||
| }; | }; | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| getData() { | getData() { | ||||
| this.pageLoading = true; | this.pageLoading = true; | ||||
| getCompanyList() | |||||
| getCompanyList(this.queryParams) | |||||
| .then(res => { | .then(res => { | ||||
| console.log(res.data); | console.log(res.data); | ||||
| if (res.data.status == 0) { | if (res.data.status == 0) { | ||||
| this.dataList = res.data.data; | |||||
| // this.total = res.data.data.total; | |||||
| this.dataList = res.data.data.list; | |||||
| this.total = res.data.data.total; | |||||
| } else { | } else { | ||||
| this.$message.error(`获取数据失败,请刷新重试!`); | this.$message.error(`获取数据失败,请刷新重试!`); | ||||
| } | } | ||||
| this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | ||||
| }); | }); | ||||
| }, | }, | ||||
| changeScreenItem(screenIndex, arrItem, index) { | |||||
| this.screen[screenIndex].activeScreen = index; | |||||
| this.queryParams.ownerIndustry = arrItem; | |||||
| this.getData(); | |||||
| }, | |||||
| //搜索 | |||||
| searchData(val) { | |||||
| this.queryParams.search = val; | |||||
| this.queryParams.page = 1; | |||||
| this.getData(); | |||||
| }, | |||||
| }, | }, | ||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() { | created() { | ||||
| @include border-box; | @include border-box; | ||||
| } | } | ||||
| .screen_row { | .screen_row { | ||||
| height: 54px; | |||||
| min-height: 54px; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| @include flex(row, flex-start, baseline, null); | @include flex(row, flex-start, baseline, null); | ||||
| border-bottom: dashed 1px #abcee4; | border-bottom: dashed 1px #abcee4; | ||||
| padding: 2px 8px; | padding: 2px 8px; | ||||
| @include border-box; | @include border-box; | ||||
| margin-bottom: 5px; | margin-bottom: 5px; | ||||
| margin-right: 10px; | |||||
| } | } | ||||
| > li + li { | |||||
| margin-left: 10px; | |||||
| } | |||||
| .active { | |||||
| s .active { | |||||
| background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%); | background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%); | ||||
| @include font(16px, #fff); | @include font(16px, #fff); | ||||
| } | } |
| <span | <span | ||||
| :class="[ | :class="[ | ||||
| 'claim_state', | 'claim_state', | ||||
| JSON.parse(companyInfo.claimState).text === '已申领' | |||||
| ? 'claimed' | |||||
| : 'not_claim', | |||||
| companyInfo.claimState.text === '已申领' ? 'claimed' : 'not_claim', | |||||
| ]" | ]" | ||||
| > | > | ||||
| {{ JSON.parse(companyInfo.claimState).text }} | |||||
| {{ companyInfo.claimState.text }} | |||||
| </span> | </span> | ||||
| </div> | </div> | ||||
| <div class="company_info"> | <div class="company_info"> | ||||
| <span>法人:{{ companyInfo.legalPerson }}</span> | <span>法人:{{ companyInfo.legalPerson }}</span> | ||||
| <span>状态:{{ companyInfo.enterpriseState }}</span> | <span>状态:{{ companyInfo.enterpriseState }}</span> | ||||
| <span>注册资本:{{ companyInfo.registeredCapital }}</span> | <span>注册资本:{{ companyInfo.registeredCapital }}</span> | ||||
| <span>成立日期:{{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}</span> | |||||
| <span>信用代码:{{ companyInfo.creditCode }}</span> | <span>信用代码:{{ companyInfo.creditCode }}</span> | ||||
| </div> | </div> | ||||
| <div class="company_info"> | <div class="company_info"> | ||||
| <span>成立日期:{{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}</span> | |||||
| <span>行业:{{ companyInfo.ownerIndustry }}</span> | <span>行业:{{ companyInfo.ownerIndustry }}</span> | ||||
| <span>地址:{{ companyInfo.businessAddress }}</span> | <span>地址:{{ companyInfo.businessAddress }}</span> | ||||
| </div> | </div> | ||||
| <div class="advantage_box"> | <div class="advantage_box"> | ||||
| <span>{{ companyInfo.enterpriseLabel }}</span> | |||||
| <span>高新技术企业</span> | |||||
| <span>科技型中小企业</span> | |||||
| <span>小微企业</span> | |||||
| <span v-for="item in companyInfo.enterpriseLabel.text" :key="item">{{ item }}</span> | |||||
| </div> | </div> | ||||
| <div class="business"> | <div class="business"> | ||||
| <span>主营业务:</span> | |||||
| {{ companyInfo.businessScope }} | |||||
| <template v-if="companyInfo.businessScope"> | |||||
| <span>主营业务:</span> | |||||
| {{ companyInfo.businessScope }} | |||||
| </template> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> |
| <!-- 园区资讯问答——详情 --> | <!-- 园区资讯问答——详情 --> | ||||
| <template> | <template> | ||||
| <div> | |||||
| <div class="detail_container"> | |||||
| <search-box></search-box> | <search-box></search-box> | ||||
| <section class="detail_box"> | |||||
| <section class="detail_box" v-loading="pageLoading"> | |||||
| <div class="title_box"> | <div class="title_box"> | ||||
| 就业创业类知识问答 | |||||
| {{ companyInfo.type.text }} | |||||
| </div> | </div> | ||||
| <div class="question_box"> | <div class="question_box"> | ||||
| <div class="question_title"> | <div class="question_title"> | ||||
| <span class="tip">问</span> | <span class="tip">问</span> | ||||
| <span class="question">把握住深圳企业的选址动向,招商工作就赢了一半?</span> | |||||
| <span class="question">{{ companyInfo.newsName }}</span> | |||||
| </div> | </div> | ||||
| <div class="answer_box"> | <div class="answer_box"> | ||||
| <div class="answer"> | <div class="answer"> | ||||
| 一、申报时所需资料: | |||||
| 根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况,如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件,以及主管税务机关要求报送的其他有关资料。有效身份证件,包括纳税人的身份证、护照、回乡证、军人身份证件等。 | |||||
| 二、收入计算方法。 | |||||
| (一)工资、薪金所得,以每月收入额减除费用3500元后的余额为应纳税所得额。 | |||||
| (二)个体工商户的生产、经营所得,按照应纳税所得额计算。实行查账征收的,按照每一纳税年度的收入总额减除成本、费用以及损失后的余额计算;实行定期定额征收的,按照纳税人自行申报的年度应纳税所得额计算,或者按照其自行申报的年度应纳税经营额乘以应税所得率计算。 | |||||
| (三)对企事业单位的承包经营、承租经营所得,按照每一纳税年度的收入总额计算,即按照承包经营、承租经营者实际取得的经营利润,加上从承包、承租的企事业单位中取得的工资、薪金性质的所得计算。 | |||||
| 个税申报 个税申报 | |||||
| (四)劳务报酬所得,稿酬所得,特许权使用费所得,按照未减除费用(每次800元或者每次收入的20%)的收入额计算。 | |||||
| (五)财产租赁所得,按照未减除费用(每次800元或者每次收入的20%)和修缮费用的收入额计算。 | |||||
| (六)财产转让所得,按照应纳税所得额计算,即按照以转让财产的收入额减除财产原值和转让财产过程中缴纳的税金及有关合理费用后的余额计算。 | |||||
| {{ companyInfo.text }} | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import SearchBox from "./components/SearchBox.vue"; | |||||
| //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | ||||
| //例如:import 《组件名称》 from '《组件路径》'; | //例如:import 《组件名称》 from '《组件路径》'; | ||||
| import SearchBox from "./components/SearchBox.vue"; | |||||
| import { getCompanyNewsById } from "@api/company"; | |||||
| export default { | export default { | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: { SearchBox }, | components: { SearchBox }, | ||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return {}; | |||||
| return { | |||||
| pageLoading: false, | |||||
| companyNewsId: "", | |||||
| companyInfo: null, | |||||
| }; | |||||
| }, | }, | ||||
| //监听属性 类似于data概念 | //监听属性 类似于data概念 | ||||
| computed: {}, | computed: {}, | ||||
| //监控data中的数据变化 | //监控data中的数据变化 | ||||
| watch: {}, | watch: {}, | ||||
| //方法集合 | //方法集合 | ||||
| methods: {}, | |||||
| methods: { | |||||
| getData() { | |||||
| let params = { | |||||
| companyNewsId: this.companyNewsId, | |||||
| }; | |||||
| this.pageLoading = true; | |||||
| getCompanyNewsById(params) | |||||
| .then(res => { | |||||
| if (res.data.status == 0) { | |||||
| this.companyInfo = res.data.data; | |||||
| } else { | |||||
| this.$message.error(`获取数据失败,请刷新重试!`); | |||||
| } | |||||
| this.pageLoading = false; | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | |||||
| this.pageLoading = false; | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | |||||
| created() { | |||||
| this.companyNewsId = this.$route.query.companyNewsId; | |||||
| this.getData(); | |||||
| }, | |||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| }; | }; |
| <div class="second_nv"> | <div class="second_nv"> | ||||
| <div> | <div> | ||||
| <div class="position"> | <div class="position"> | ||||
| <img src="" alt="" /> | |||||
| <img src="@assets/image/company/icon_address.png" alt="地址" /> | |||||
| <span> | <span> | ||||
| 当前位置: | 当前位置: | ||||
| <span class="pointer">园区资讯问答</span> | <span class="pointer">园区资讯问答</span> | ||||
| .position { | .position { | ||||
| @include flex(row, flex-start, center, null); | @include flex(row, flex-start, center, null); | ||||
| img { | img { | ||||
| @include size(16px, 16px); | |||||
| background: #ffffff; | |||||
| // @include size(16px, 16px); | |||||
| margin-right: 6px; | margin-right: 6px; | ||||
| } | } | ||||
| padding-top: 10px; | padding-top: 10px; | ||||
| } | } | ||||
| .content_box { | .content_box { | ||||
| width: 1200px; | width: 1200px; | ||||
| min-height: 400px; | |||||
| min-height: 700px; | |||||
| margin: 0 auto; | margin: 0 auto; | ||||
| padding: 30px 0; | padding: 30px 0; | ||||
| @include border-box; | @include border-box; |
| {{ item.name }} | {{ item.name }} | ||||
| </span> | </span> | ||||
| </div> | </div> | ||||
| <search-box></search-box> | |||||
| <search-box @search-data="searchData"></search-box> | |||||
| <div class="detail_box"> | <div class="detail_box"> | ||||
| <question-list></question-list> | |||||
| <question-list :list="dataList"></question-list> | |||||
| <div class="pagination_box"> | <div class="pagination_box"> | ||||
| <Pagination></Pagination> | |||||
| <Pagination | |||||
| :currentPage="queryParams.page" | |||||
| :total="total" | |||||
| @change-page="changePage" | |||||
| @change-page-size="changePageSize" | |||||
| ></Pagination> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||||
| //例如:import 《组件名称》 from '《组件路径》'; | |||||
| import SearchBox from "./components/SearchBox.vue"; | import SearchBox from "./components/SearchBox.vue"; | ||||
| import QuestionList from "./components/QuestionList.vue"; | import QuestionList from "./components/QuestionList.vue"; | ||||
| import Pagination from "@components/Pagination.vue"; | import Pagination from "@components/Pagination.vue"; | ||||
| //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||||
| //例如:import 《组件名称》 from '《组件路径》'; | |||||
| import { getCompanyNewsList } from "@api/company"; | |||||
| import { handlePageNation } from "@mixin/pageNationMixin"; | |||||
| export default { | export default { | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: { SearchBox, QuestionList, Pagination }, | components: { SearchBox, QuestionList, Pagination }, | ||||
| mixins: [handlePageNation], | |||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return { | return { | ||||
| }, | }, | ||||
| ], | ], | ||||
| activeTab: 1, | activeTab: 1, | ||||
| pageLoading: false, | |||||
| queryParams: { | |||||
| page: 1, | |||||
| pageSize: 10, | |||||
| search: "", | |||||
| }, | |||||
| total: 0, | |||||
| dataList: [], | |||||
| }; | }; | ||||
| }, | }, | ||||
| //监听属性 类似于data概念 | //监听属性 类似于data概念 | ||||
| changeTab(item) { | changeTab(item) { | ||||
| this.activeTab = item.value; | this.activeTab = item.value; | ||||
| }, | }, | ||||
| getData() { | |||||
| this.pageLoading = true; | |||||
| getCompanyNewsList(this.queryParams) | |||||
| .then(res => { | |||||
| console.log(res.data); | |||||
| if (res.data.status == 0) { | |||||
| this.dataList = res.data.data.list; | |||||
| this.total = res.data.data.total; | |||||
| } else { | |||||
| this.$message.error(`获取数据失败,请刷新重试!`); | |||||
| } | |||||
| this.pageLoading = false; | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | |||||
| }); | |||||
| }, | |||||
| //搜索 | |||||
| searchData(val) { | |||||
| this.queryParams.search = val; | |||||
| this.queryParams.page = 1; | |||||
| this.getData(); | |||||
| }, | |||||
| // // 分页 | |||||
| // changePage(val) { | |||||
| // this.queryParams.page = val; | |||||
| // this.getData(); | |||||
| // }, | |||||
| // // 分页 | |||||
| // changePageSize(val) { | |||||
| // this.queryParams.pageSize = val; | |||||
| // this.queryParams.page = 1; | |||||
| // this.getData(); | |||||
| // }, | |||||
| }, | }, | ||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | |||||
| created() { | |||||
| this.getData(); | |||||
| }, | |||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| }; | }; |
| <div> | <div> | ||||
| <search-box></search-box> | <search-box></search-box> | ||||
| <section class="detail_box"> | <section class="detail_box"> | ||||
| <div class="title_box"> | |||||
| 您搜索的关键词:招商 | |||||
| </div> | |||||
| <div class="title_box">您搜索的关键词:{{ this.queryParams.search }}</div> | |||||
| <div class="question_box"> | <div class="question_box"> | ||||
| <question-list></question-list> | |||||
| <question-list :list="dataList"></question-list> | |||||
| <div class="pagination_box"> | <div class="pagination_box"> | ||||
| <Pagination></Pagination> | |||||
| <Pagination | |||||
| :currentPage="queryParams.page" | |||||
| :total="total" | |||||
| @change-page="changePage" | |||||
| @change-page-size="changePageSize" | |||||
| ></Pagination> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </section> | </section> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||||
| //例如:import 《组件名称》 from '《组件路径》'; | |||||
| import SearchBox from "./components/SearchBox.vue"; | import SearchBox from "./components/SearchBox.vue"; | ||||
| import Pagination from "@components/Pagination.vue"; | import Pagination from "@components/Pagination.vue"; | ||||
| import QuestionList from "./components/QuestionList.vue"; | import QuestionList from "./components/QuestionList.vue"; | ||||
| //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||||
| //例如:import 《组件名称》 from '《组件路径》'; | |||||
| import { getCompanyNewsList } from "@api/company"; | |||||
| import { handlePageNation } from "@mixin/pageNationMixin"; | |||||
| export default { | export default { | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: { SearchBox, Pagination, QuestionList }, | components: { SearchBox, Pagination, QuestionList }, | ||||
| mixins: [handlePageNation], | |||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return { | return { | ||||
| currentPage3: 3, | |||||
| pageLoading: false, | |||||
| queryParams: { | |||||
| page: 1, | |||||
| pageSize: 10, | |||||
| search: "", | |||||
| }, | |||||
| total: 0, | |||||
| dataList: [], | |||||
| }; | }; | ||||
| }, | }, | ||||
| //监听属性 类似于data概念 | //监听属性 类似于data概念 | ||||
| computed: {}, | computed: {}, | ||||
| //监控data中的数据变化 | //监控data中的数据变化 | ||||
| watch: {}, | |||||
| watch: { | |||||
| "$route.query.searchWord": { | |||||
| handler(newVal, oldVal) { | |||||
| this.queryParams.search = newVal; | |||||
| this.getData(); | |||||
| }, | |||||
| }, | |||||
| deep: true, | |||||
| }, | |||||
| //方法集合 | //方法集合 | ||||
| methods: {}, | |||||
| methods: { | |||||
| getData() { | |||||
| this.pageLoading = true; | |||||
| getCompanyNewsList(this.queryParams) | |||||
| .then(res => { | |||||
| console.log(res.data); | |||||
| if (res.data.status == 0) { | |||||
| this.dataList = res.data.data.list; | |||||
| this.total = res.data.data.total; | |||||
| } else { | |||||
| this.$message.error(`获取数据失败,请刷新重试!`); | |||||
| } | |||||
| this.pageLoading = false; | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | |||||
| created() { | |||||
| this.queryParams.search = this.$route.query.searchWord; | |||||
| this.getData(); | |||||
| }, | |||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| }; | }; |
| <template> | <template> | ||||
| <div> | <div> | ||||
| <ul class="notice_ul"> | <ul class="notice_ul"> | ||||
| <li class="notice_item pointer" v-for="item in 10" :key="item"> | |||||
| <li | |||||
| class="notice_item pointer" | |||||
| v-for="item in list" | |||||
| :key="item.companyNewsId" | |||||
| @click="goDetail(item.companyNewsId)" | |||||
| > | |||||
| <div class="notice_detail"> | <div class="notice_detail"> | ||||
| <div> | <div> | ||||
| 把握住深圳企业的选址动向,招商工作就赢了一半把握住深圳企业的选址动向,招商工作就赢了一半把握住深圳企业的选址动向,招商工作就赢了一半把握住深圳企业的选址动向,招商工作就赢了一半 | |||||
| {{ item.newsName }} | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div>2022-09-01 18:00</div> | |||||
| <div>{{ item.createdOn | formatDate("YYYY-MM-DD HH:mm") }}</div> | |||||
| </li> | </li> | ||||
| </ul> | </ul> | ||||
| </div> | </div> | ||||
| //例如:import 《组件名称》 from '《组件路径》'; | //例如:import 《组件名称》 from '《组件路径》'; | ||||
| export default { | export default { | ||||
| props: { | |||||
| list: { | |||||
| types: Array, | |||||
| required: false, | |||||
| default: [], | |||||
| }, | |||||
| }, | |||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: {}, | components: {}, | ||||
| data() { | data() { | ||||
| //监控data中的数据变化 | //监控data中的数据变化 | ||||
| watch: {}, | watch: {}, | ||||
| //方法集合 | //方法集合 | ||||
| methods: {}, | |||||
| methods: { | |||||
| goDetail(companyNewsId) { | |||||
| this.$router.push({ | |||||
| path: "/park-information/question-detail", | |||||
| query: { | |||||
| companyNewsId, | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | created() {}, | ||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| beforeCreate() {}, //生命周期 - 创建之前 | |||||
| beforeMount() {}, //生命周期 - 挂载之前 | |||||
| beforeUpdate() {}, //生命周期 - 更新之前 | |||||
| updated() {}, //生命周期 - 更新之后 | |||||
| beforeDestroy() {}, //生命周期 - 销毁之前 | |||||
| destroyed() {}, //生命周期 - 销毁完成 | |||||
| activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发 | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> |
| <!-- 搜索框 --> | <!-- 搜索框 --> | ||||
| <template> | <template> | ||||
| <div class="search_box"> | <div class="search_box"> | ||||
| <img class="info_img" src="" alt="搜索" /> | |||||
| <img class="info_img" src="@assets/image/company/icon_info.png" alt="园区知识库" /> | |||||
| <span class="search_title">园区知识库</span> | <span class="search_title">园区知识库</span> | ||||
| <search-input></search-input> | |||||
| <search-input @search-data="searchData"></search-input> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| //监控data中的数据变化 | //监控data中的数据变化 | ||||
| watch: {}, | watch: {}, | ||||
| //方法集合 | //方法集合 | ||||
| methods: {}, | |||||
| methods: { | |||||
| searchData(val) { | |||||
| this.$router.push({ | |||||
| path: "/park-information/question-search", | |||||
| query: { | |||||
| searchWord: val, | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| }, | |||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | created() {}, | ||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| beforeCreate() {}, //生命周期 - 创建之前 | |||||
| beforeMount() {}, //生命周期 - 挂载之前 | |||||
| beforeUpdate() {}, //生命周期 - 更新之前 | |||||
| updated() {}, //生命周期 - 更新之后 | |||||
| beforeDestroy() {}, //生命周期 - 销毁之前 | |||||
| destroyed() {}, //生命周期 - 销毁完成 | |||||
| activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发 | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| background-color: #04102d; | background-color: #04102d; | ||||
| .info_img { | .info_img { | ||||
| @include size(36px, 36px); | @include size(36px, 36px); | ||||
| background: pink; | |||||
| margin-right: 10px; | margin-right: 10px; | ||||
| } | } | ||||
| .search_title { | .search_title { |
| <!-- --> | <!-- --> | ||||
| <template> | <template> | ||||
| <div class="input_box"> | <div class="input_box"> | ||||
| <el-input placeholder="请输入搜索内容" clearable v-model="input2"> | |||||
| <el-input | |||||
| placeholder="请输入搜索内容" | |||||
| v-model.trim="searchInput" | |||||
| clearable | |||||
| @keyup.enter.native="searchByKeyword" | |||||
| @clear="clearKeyWord" | |||||
| > | |||||
| <div slot="prefix" class="icon_box"> | <div slot="prefix" class="icon_box"> | ||||
| <img src="@assets/image/company/icon_search.png" alt="搜索" /> | <img src="@assets/image/company/icon_search.png" alt="搜索" /> | ||||
| </div> | </div> | ||||
| <div slot="append" class="pointer">搜索</div> | |||||
| <div slot="append" class="pointer" @click="searchByKeyword">搜索</div> | |||||
| </el-input> | </el-input> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return { | return { | ||||
| input2: "", | |||||
| searchInput: "", | |||||
| }; | }; | ||||
| }, | }, | ||||
| //监听属性 类似于data概念 | //监听属性 类似于data概念 | ||||
| //监控data中的数据变化 | //监控data中的数据变化 | ||||
| watch: {}, | watch: {}, | ||||
| //方法集合 | //方法集合 | ||||
| methods: {}, | |||||
| methods: { | |||||
| searchByKeyword() { | |||||
| this.$emit("search-data", this.searchInput); | |||||
| }, | |||||
| clearKeyWord() { | |||||
| this.searchInput = ""; | |||||
| this.$emit("search-data", this.searchInput); | |||||
| }, | |||||
| }, | |||||
| //生命周期 - 创建完成(可以访问当前this实例) | //生命周期 - 创建完成(可以访问当前this实例) | ||||
| created() {}, | created() {}, | ||||
| //生命周期 - 挂载完成(可以访问DOM元素) | //生命周期 - 挂载完成(可以访问DOM元素) | ||||
| mounted() {}, | mounted() {}, | ||||
| beforeCreate() {}, //生命周期 - 创建之前 | |||||
| beforeMount() {}, //生命周期 - 挂载之前 | |||||
| beforeUpdate() {}, //生命周期 - 更新之前 | |||||
| updated() {}, //生命周期 - 更新之后 | |||||
| beforeDestroy() {}, //生命周期 - 销毁之前 | |||||
| destroyed() {}, //生命周期 - 销毁完成 | |||||
| activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发 | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> |
| disableHostCheck: true, | disableHostCheck: true, | ||||
| proxy: { | proxy: { | ||||
| "/domain": { | "/domain": { | ||||
| // target: "http://192.168.18.138:80", | |||||
| target: "http://localhost:80", | |||||
| // target: "http://localhost:80", | |||||
| target: "http://192.168.18.236:18888/", | |||||
| changeOrigin: true, | changeOrigin: true, | ||||
| pathRewrite: { | pathRewrite: { | ||||
| "^/domain": "", | "^/domain": "", | ||||
| .set("@utils", resolve("./src/utils")) | .set("@utils", resolve("./src/utils")) | ||||
| .set("@components", resolve("./src/components")) | .set("@components", resolve("./src/components")) | ||||
| .set("@views", resolve("./src/views")) | .set("@views", resolve("./src/views")) | ||||
| .set("@customerService", resolve("./src/customerService")); | |||||
| .set("@mixin", resolve("./src/mixin")); | |||||
| }, | }, | ||||
| css: { | css: { | ||||
| loaderOptions: { | loaderOptions: { |