Skip to content

S
shuchengMiniPro
Commit 43dd6aab authored by 王玉鑫's avatar 王玉鑫
Browse files
Options

feat: 产业园详情

parent d3803f05
Hide whitespace changes
Inline Side-by-side
Showing with 536 additions and 5 deletions
src/api/url/index.js
View file @ 43dd6aab
...@@ -9,5 +9,7 @@ export default { ...@@ -9,5 +9,7 @@ export default {
// 载体列表 // 载体列表
carrierList: '/postcard/api/carrier/v1.0/page', carrierList: '/postcard/api/carrier/v1.0/page',
// 产业园详情 // 产业园详情
industrialDetail: '/postcard/api/parkInfo/v1.0/detail' industrialDetail: '/postcard/api/parkInfo/v1.0/detail',
// 载体详情
carrierDetail: '/postcard/api/carrier/v1.0/detail',
} }
src/main.js
View file @ 43dd6aab
...@@ -5,6 +5,7 @@ import fetch from './utils/request.js' ...@@ -5,6 +5,7 @@ import fetch from './utils/request.js'
import store from './store' import store from './store'
import VueCompositionAPI from '@vue/composition-api' import VueCompositionAPI from '@vue/composition-api'
import uView from 'uview-ui' import uView from 'uview-ui'
// import '@/utils/filters.js';
Vue.use(uView) Vue.use(uView)
// 如此配置即可 // 如此配置即可
...@@ -26,6 +27,14 @@ Array.prototype.removeItem = function (val) { ...@@ -26,6 +27,14 @@ Array.prototype.removeItem = function (val) {
this.splice(index, 1); this.splice(index, 1);
} }
} }
Vue.filter('handleValue', function(value, unit = '') {
if (value || value === 0) {
return `${value}${unit}`
} else {
return '--';
}
})
Object.defineProperty(Array.prototype, 'removeItem', { Object.defineProperty(Array.prototype, 'removeItem', {
enumerable: false enumerable: false
}) })
......
src/pages.json
View file @ 43dd6aab
...@@ -31,6 +31,18 @@ ...@@ -31,6 +31,18 @@
"style": { "style": {
"navigationBarTitleText": "投资舒城" "navigationBarTitleText": "投资舒城"
} }
},
{
"path": "pages/detail/industrialDetail",
"style": {
"navigationBarTitleText": "产业园详情"
}
},
{
"path": "pages/detail/carrierDetail",
"style": {
"navigationBarTitleText": "载体详情"
}
} }
], ],
"tabBar": { "tabBar": {
......
src/pages/detail/carrierDetail.vue 0 → 100644
View file @ 43dd6aab
<template>
<div class="carrier-detail">
<CommonDetail detail-type="carrier" :queryUrl="queryUrl">
<template #default="{ detail }">
<div v-if="detail">
<div class="detail-cell">
<div class="detail-cell__title">{{ detail.name }}</div>
<div class="detail-cell__body">
<div class="flex detail-cell__line">
<div class="detail-cell__info flex1">
<div class="detail-cell__info-name">产业园级别：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.levelName) }}
</div>
</div>
<div class="detail-cell__info flex1">
<div class="detail-cell__info-name">占地面积：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.coverArea, "亩") }}
</div>
</div>
</div>
<div class="detail-cell__line">
<div class="detail-cell__info">
<div class="detail-cell__info-name">详细地址：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.address) }}
</div>
</div>
</div>
</div>
</div>
<!-- 园区介绍 -->
<div class="detail-cell">
<div class="detail-cell__title">园区介绍</div>
<div class="detail-cell__body text-26">
{{ detail.description }}
</div>
</div>
<!-- 产业基础 -->
<div class="detail-cell">
<div class="detail-cell__title">产业基础</div>
<div class="detail-cell__body">
<div class="detail-cell__line">
<div class="detail-cell__info text-26">
<div class="detail-cell__info-name">主导产业：</div>
<div class="detail-cell__info-value">
{{ detail.primaryIndustry }}
</div>
</div>
</div>
<div class="detail-cell__line">
<div class="detail-cell__info text-26">
<div class="detail-cell__info-name">招商方向：</div>
<div class="detail-cell__info-value">
{{ handleValue(businessInfo(detail)) }}
</div>
</div>
</div>
</div>
</div>
<!-- 产业支持 -->
<div v-if="detail.resources.length > 0" class="detail-cell">
<div class="detail-cell__title">产业支持</div>
<div class="detail-cell__body">
<div class="flex gap-20 flex-wrap">
<div
v-for="item of detail.resources"
:key="item"
class="detail-cell__word-info"
>
{{ item }}
</div>
</div>
</div>
</div>
<!-- 园内配套 -->
<div v-if="detail.setUp.length > 0" class="detail-cell">
<div class="detail-cell__title">园区内配套</div>
<div class="detail-cell__body">
<div class="flex gap-20 flex-wrap">
<div
v-for="item of detail.setUp"
:key="item"
class="detail-cell__word-info"
>
{{ item }}
</div>
</div>
</div>
</div>
<!-- 园内载体 -->
<div v-if="detail.parkCarrier.length > 0" class="detail-cell">
<div class="detail-cell__title">园区内配套</div>
<div class="detail-cell__body">
<div
v-for="item of detail.parkCarrier"
:key="item.id"
class="detail-cell__list-item"
>
<ListItem :item="item">
<template>
<div class="flex">
<div class="flex align-center flex1">
<div>类型：</div>
<div>{{ handleValue(item.type) }}</div>
</div>
<div class="flex align-center flex1">
<div>面积：</div>
<div>{{ handleValue(item.area, "m²") }}</div>
</div>
</div>
</template>
</ListItem>
</div>
</div>
</div>
</div>
</template>
</CommonDetail>
</div>
</template>
<script>
import CommonDetail from "./components/CommonDetail.vue";
import api from "@/api/url/index.js";
import { handleValue } from "@/utils/utils.js";
import ListItem from "./components/ListItem.vue";
export default {
name: "IndustrialDetail",
components: {
CommonDetail,
ListItem,
},
data() {
return {
queryUrl: api.industrialDetail,
};
},
methods: {
handleValue,
businessInfo(detail) {
const { investmentDetails } = detail;
return investmentDetails
? investmentDetails
.map(({ codeName, details }) => {
return `${codeName}-${details}`;
})
.join("；")
: "";
},
},
};
</script>
<style lang="scss">
.carrier-detail {
.detail-cell {
margin-right: 30rpx;
margin-left: 30rpx;
padding: 30rpx;
background-color: white;
border-radius: 4rpx;
& ~ .detail-cell {
margin-top: 20rpx;
}
&__title {
color: #333333;
font-size: 30rpx;
font-weight: 600;
line-height: 30rpx;
}
&__body {
margin-top: 40rpx;
}
&__info {
display: flex;
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
color: #606266;
}
&__line {
& ~ .detail-cell__line {
margin-top: 23rpx;
}
}
&__info-name {
flex: none;
}
&__word-info {
position: relative;
padding-left: 50rpx;
padding-right: 30rpx;
display: flex;
align-items: center;
height: 60rpx;
outline: 2rpx solid #e6e6e6;
font-size: 28rpx;
&::after {
content: "";
width: 20rpx;
height: 20rpx;
background: url("@/static/img/icon-green-true.png") no-repeat;
background-size: contain;
position: absolute;
left: 20rpx;
top: 20rpx;
}
}
&__list-item ~ .detail-cell__list-item {
margin-top: 40rpx;
}
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-20 {
gap: 20rpx;
}
.text-26 {
font-size: 26rpx;
}
}
</style>
src/pages/detail/components/CommonDetail.vue
View file @ 43dd6aab
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:height="320" :height="320"
></u-swiper> ></u-swiper>
</div> </div>
<div> <div class="common-detail__cells">
<slot :detail="detail"></slot> <slot :detail="detail"></slot>
</div> </div>
<div class="common-detail__bottom-cell"> <div class="common-detail__bottom-cell">
...@@ -90,7 +90,7 @@ export default defineComponent({ ...@@ -90,7 +90,7 @@ export default defineComponent({
}, },
}, },
mounted() { mounted() {
this.detailId = this.$root.$mp.query.id || "132097"; this.detailId = this.$root.$mp.query.id;
this.init(); this.init();
}, },
methods: { methods: {
...@@ -129,6 +129,13 @@ export default defineComponent({ ...@@ -129,6 +129,13 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
.common-detail { .common-detail {
padding-bottom: 180rpx;
background-color: #f4f4f4;
overflow-y: auto;
overflow-x: hidden;
&__cells {
margin-top: 20rpx;
}
&__bottom-cell { &__bottom-cell {
position: fixed; position: fixed;
right: 0; right: 0;
......
src/pages/detail/components/ListItem.vue 0 → 100644
View file @ 43dd6aab
<template>
<div class="list-item">
<div>
<image class="list-item__main-pic" :src="item.imgUrl"></image>
</div>
<div class="list-item__right-cell flex1">
<div class="ell list-item__title">{{ item.name }}</div>
<div class="list-item__content">
<div class="flex align-center mb-20">
<div>地区：</div>
<div>{{ handleValue(address) }}</div>
</div>
<slot></slot>
</div>
</div>
<div></div>
</div>
</template>
<script>
import { handleValue } from "@/utils/utils.js";
export default {
name: "ListItem",
props: {
item: {
type: Object,
default: () => ({}),
},
},
computed: {
address() {
const { cityName, provinceName, regionName } = this.item;
return [provinceName, cityName, regionName].filter((i) => i).join("-");
},
},
methods: {
handleValue,
},
};
</script>
<style lang="scss">
.list-item {
display: flex;
&__main-pic {
width: 178rpx;
height: 134rpx;
}
&__right-cell {
margin-left: 20rpx;
width: 0;
}
&__title {
margin-bottom: 30rpx;
color: #333333;
font-weight: 500;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
}
&__content {
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
color: #606266;
}
.mb-20 {
margin-bottom: 20rpx;
}
}
</style>
src/pages/detail/industrialDetail.vue
View file @ 43dd6aab
<template> <template>
<div> <div class="industrial-detail">
<CommonDetail detail-type="industrial" :queryUrl="queryUrl"></CommonDetail> <CommonDetail detail-type="industrial" :queryUrl="queryUrl">
<template #default="{ detail }">
<div v-if="detail">
<div class="detail-cell">
<div class="detail-cell__title">{{ detail.name }}</div>
<div class="detail-cell__body">
<div class="flex detail-cell__line">
<div class="detail-cell__info flex1">
<div class="detail-cell__info-name">产业园级别：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.levelName) }}
</div>
</div>
<div class="detail-cell__info flex1">
<div class="detail-cell__info-name">占地面积：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.coverArea, "亩") }}
</div>
</div>
</div>
<div class="detail-cell__line">
<div class="detail-cell__info">
<div class="detail-cell__info-name">详细地址：</div>
<div class="detail-cell__info-value">
{{ handleValue(detail.address) }}
</div>
</div>
</div>
</div>
</div>
<!-- 园区介绍 -->
<div class="detail-cell">
<div class="detail-cell__title">园区介绍</div>
<div class="detail-cell__body text-26">
{{ detail.description }}
</div>
</div>
<!-- 产业基础 -->
<div class="detail-cell">
<div class="detail-cell__title">产业基础</div>
<div class="detail-cell__body">
<div class="detail-cell__line">
<div class="detail-cell__info text-26">
<div class="detail-cell__info-name">主导产业：</div>
<div class="detail-cell__info-value">
{{ detail.primaryIndustry }}
</div>
</div>
</div>
<div class="detail-cell__line">
<div class="detail-cell__info text-26">
<div class="detail-cell__info-name">招商方向：</div>
<div class="detail-cell__info-value">
{{ handleValue(businessInfo(detail)) }}
</div>
</div>
</div>
</div>
</div>
<!-- 产业支持 -->
<div v-if="detail.resources.length > 0" class="detail-cell">
<div class="detail-cell__title">产业支持</div>
<div class="detail-cell__body">
<div class="flex gap-20 flex-wrap">
<div
v-for="item of detail.resources"
:key="item"
class="detail-cell__word-info"
>
{{ item }}
</div>
</div>
</div>
</div>
<!-- 园内配套 -->
<div v-if="detail.setUp.length > 0" class="detail-cell">
<div class="detail-cell__title">园区内配套</div>
<div class="detail-cell__body">
<div class="flex gap-20 flex-wrap">
<div
v-for="item of detail.setUp"
:key="item"
class="detail-cell__word-info"
>
{{ item }}
</div>
</div>
</div>
</div>
<!-- 园内载体 -->
<div v-if="detail.parkCarrier.length > 0" class="detail-cell">
<div class="detail-cell__title">园区内配套</div>
<div class="detail-cell__body">
<div
v-for="item of detail.parkCarrier"
:key="item.id"
class="detail-cell__list-item"
>
<ListItem :item="item">
<template>
<div class="flex">
<div class="flex align-center flex1">
<div>类型：</div>
<div>{{ handleValue(item.type) }}</div>
</div>
<div class="flex align-center flex1">
<div>面积：</div>
<div>{{ handleValue(item.area, "m²") }}</div>
</div>
</div>
</template>
</ListItem>
</div>
</div>
</div>
</div>
</template>
</CommonDetail>
</div> </div>
</template> </template>
<script> <script>
import CommonDetail from "./components/CommonDetail.vue"; import CommonDetail from "./components/CommonDetail.vue";
import api from "@/api/url/index.js"; import api from "@/api/url/index.js";
import { handleValue } from "@/utils/utils.js";
import ListItem from "./components/ListItem.vue";
export default { export default {
name: "IndustrialDetail", name: "IndustrialDetail",
components: { components: {
CommonDetail, CommonDetail,
ListItem,
}, },
data() { data() {
return { return {
queryUrl: api.industrialDetail, queryUrl: api.industrialDetail,
}; };
}, },
methods: {
handleValue,
businessInfo(detail) {
const { investmentDetails } = detail;
return investmentDetails
? investmentDetails
.map(({ codeName, details }) => {
return `${codeName}-${details}`;
})
.join("；")
: "";
},
},
}; };
</script> </script>
<style lang="scss">
.industrial-detail {
.detail-cell {
margin-right: 30rpx;
margin-left: 30rpx;
padding: 30rpx;
background-color: white;
border-radius: 4rpx;
& ~ .detail-cell {
margin-top: 20rpx;
}
&__title {
color: #333333;
font-size: 30rpx;
font-weight: 600;
line-height: 30rpx;
}
&__body {
margin-top: 40rpx;
}
&__info {
display: flex;
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
color: #606266;
}
&__line {
& ~ .detail-cell__line {
margin-top: 23rpx;
}
}
&__info-name {
flex: none;
}
&__word-info {
position: relative;
padding-left: 50rpx;
padding-right: 30rpx;
display: flex;
align-items: center;
height: 60rpx;
outline: 2rpx solid #e6e6e6;
font-size: 28rpx;
&::after {
content: "";
width: 20rpx;
height: 20rpx;
background: url("@/static/img/icon-green-true.png") no-repeat;
background-size: contain;
position: absolute;
left: 20rpx;
top: 20rpx;
}
}
&__list-item ~ .detail-cell__list-item {
margin-top: 40rpx;
}
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-20 {
gap: 20rpx;
}
.text-26 {
font-size: 26rpx;
}
}
</style>
src/utils/utils.js 0 → 100644
View file @ 43dd6aab
export function handleValue(value, unit = '') {
if (value || value === 0) {
return `${value}${unit}`
} else {
return '--';
}
}
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 to comment