Skip to content

S
shuchengMiniPro
Commit f839327d authored by shilei's avatar shilei
Browse files
Options

招商政策、重点企业、招商亮点

parent 9a5da067
Hide whitespace changes
Inline Side-by-side
Showing with 537 additions and 16 deletions
src/api/url/index.js
View file @ f839327d
......@@ -12,4 +12,6 @@ export default {
industrialDetail: '/postcard/api/parkInfo/v1.0/detail',
// 载体详情
carrierDetail: '/postcard/api/carrier/v1.0/detail',
// 招商引资-招商亮点
investmentLights: '/postcard/api/developmentInfo/v1.0/detail',
}
src/components/touch-box/touch-box.vue 0 → 100644
View file @ f839327d
<template>
<view class="you-touchbox" :class="{touchend:isTouchEnd}" @touchstart="onTouchStart"
@touchmove.stop.prevent="onTouchmove" @touchend="onTouchend"
:style="{top: top + distance + 'px',zIndex,height:windowHeight+'px'}">
<view class="you-touchbox-content" :style="customStyle" @click.stop.prevent>
<view class="touch-line-box">
<view class="touch-line"></view>
</view>
<slot></slot>
</view>
</view>
</template>
<script>
/**
* @author youbolin @2022-3-2 18:29
*/
export default {
name: "touch-box",
props: {
// 禁用滑动
disable: {
type: Boolean,
default: false
},
zIndex: {
type: [Number, String],
default: 100
},
// 自定义样式
customStyle: [String, Object],
// 自定义安全区域
customSafeArea: {
type: Object,
default () {
return {
h5Top: null,
wxTop: null,
bottom: null
}
}
},
// 最高top
maxTop: {
type: [Number, String],
default: 0.8
},
// 最低top
minTop: {
type: [Number, String],
default: 0.4
},
// 初始top
initTop: {
type: [Number, String],
default: 'min'
},
// 自动复位
auto: {
type: Boolean,
default: true
},
// 最高最低限制
limit: {
type: Boolean,
default: true
}
},
data() {
return {
windowHeight: null, // 可使用区域高度
windowTop: null,
touchStartY: null, // 开始滑动时的Y轴坐标
top: null, // 上拉框top
max: null, // maxTop
min: null, // minTop
distance: 0, // 滑动距离
isTouchEnd: false, // 是否滑动结束Flag
boundary: null, // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间
startTime: null, // 开始滑动时间
};
},
mounted() {
let {
windowHeight, // 可使用窗口高度
windowTop // 可使用窗口的顶部位置
} = uni.getSystemInfoSync()
this.windowHeight = windowHeight
this.windowTop = windowTop
let {
h5Top,
wxTop,
bottom
} = this.customSafeArea
// H5自定义安全区域
// #ifndef MP
if (h5Top) {
this.windowHeight -= h5Top
windowTop += h5Top
}
// #endif
if (bottom) this.windowHeight -= bottom
// 上拉框最大高度top
if (this.maxTop <= 1) this.max = this.windowHeight * (1 - +this.maxTop)
else this.max = +this.maxTop
// 上拉框最小高度top
if (this.minTop <= 1) this.min = this.windowHeight * (1 - +this.minTop)
else this.min = this.windowHeight - (+this.minTop)
// 初始的上拉框top
if (['min', 'max'].includes(this.initTop)) this.top = this.initTop === 'min' ? this.min : this.max
else if (this.initTop <= 1) this.top = this.windowHeight * (1 - +this.initTop)
else this.top = +this.initTop
// 微信自定义安全区域
// #ifdef MP
if (wxTop) {
this.max += wxTop === 'menuBtn' ? uni.getMenuButtonBoundingClientRect().bottom + 10 : wxTop
this.top += wxTop
}
// #endif
// H5自定义安全区域
// #ifndef MP
this.max += windowTop
this.min += windowTop
this.top += windowTop
// #endif
this.boundary = (this.max + this.min) / 2 // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间
},
methods: {
setBottom(value) {
if (this.auto) this.isTouchEnd = true
if (value <= 1) this.top = this.windowHeight * (1 - +value)
else this.top = (this.windowHeight - +value)
// #ifndef MP
this.top += this.windowTop
// #endif
},
onTouchStart(e) {
if (this.disable) return
this.isTouchEnd = false // 关闭滑动结束Flag，作用为是否开启上拉框的过渡效果
// #ifndef APP-NVUE
this.top = e.currentTarget.offsetTop // 手指触碰到上拉框时，将上拉框top设置为上拉框当前的top
// #endif
// #ifdef APP-NVUE
this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标
// #endif
// #ifndef APP-NVUE
this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标
// #endif
this.startTime = Date.now() // 设置滑动开始时间
},
onTouchmove(e) {
if (this.disable) return
// #ifdef APP-NVUE
let distance = e.touches[0].screenY - this.touchStartY // 滑动的距离
// #endif
// #ifndef APP-NVUE
let distance = e.touches[0].clientY - this.touchStartY // 滑动的距离
// #endif
if (this.limit) { // 是否开启高度限制
let nowTop = this.top + distance // 此次滑动的上拉框top值
if (nowTop < this.max || nowTop > this.min) {
// 如果滑动时上拉框top小于最大高度top就让上拉框top等于最大高度top
// 如果滑动时上拉框top大于最小高度top就让上拉框top等于最小高度top
this.top = nowTop < this.max ? this.max : this.min
this.distance = 0 // 滑动距离归零
// #ifdef APP-NVUE
this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标
// #endif
// #ifndef APP-NVUE
this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标
// #endif
return
}
}
this.distance = distance // 更新滑动距离
},
onTouchend(e) {
if (this.disable) return
this.top = this.top + this.distance // 更新上拉框top
if (this.auto) { // 是否开启自动复位
this.isTouchEnd = true // 开启滑动结束Flag
let time = (Date.now() - this.startTime) / 1000 // 滑动时间为 滑动结束时间 - 滑动开始时间
let speed = Math.abs(this.distance) / time // 滑动速度为 滑动距离/滑动时间
if (speed > 800) { // 如果速度大于800px/秒
this.top = this.distance > 0 ? this.min : this.max // 根据滑动方向设置top的值
// return this.distance = 0 // 滑动距离归零
} else {
if (this.top < this.boundary) this.top = this.max // 如果上拉框top小于分界线就让上拉框top等于最大高度top
else this.top = this.min // 如果上拉框top大于分界线就让上拉框top等于最小高度top
}
}
// 滑动结束时top信息
this.$emit('get-end-detail', {
minTop: this.min,
maxTop: this.max,
curTop: this.top
})
this.distance = 0 // 滑动距离归零
}
}
}
</script>
<style lang="scss" scoped>
.you-touchbox {
position: fixed;
left: 0;
right: 0;
padding: 0 24rpx;
background: #fff;
border-radius: 16rpx 16rpx 0 0;
}
.touchend {
transition-property: top;
transition-duration: .6s;
}
.you-touchbox-content {
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
background-color: #fff;
}
.touch-line-box {
padding: 5px 0 10px;
/* #ifdef APP-NVUE */
align-items: center;
/* #endif */
}
.touch-line {
/* #ifndef APP-NVUE */
margin: 0 auto;
/* #endif */
width: 45px;
height: 5px;
border-radius: 25px;
background: rgba(51, 51, 51, 0.2);
}
</style>
src/pages.json
View file @ f839327d
......@@ -48,6 +48,12 @@
"style": {
"navigationBarTitleText": "土地详情"
}
},
{
"path": "pages/inviteInvestment/policyDetail"
},
{
"path": "pages/inviteInvestment/industryDetail"
}
],
"tabBar": {
......
src/pages/entryPark/index.vue
View file @ f839327d
......@@ -13,10 +13,10 @@
<span class="line" v-if="activeBar === index"></span>
</view>
</view>
<div style="height: 80rpx"></div>
<div style="height: 60rpx"></div>
<div
class="flex align-center justify-between"
style="padding: 25rpx 23rpx;background: #fff;position: fixed;top: 80rpx;width: 100vw "
style="padding: 25rpx 23rpx;background: #fff;position: fixed;top: 60rpx;width: 100vw "
>
<div class="flex align-center">
<div class="search-input">
......@@ -51,9 +51,9 @@
:dataObj="dataObj"
@change="change"
themeColor="#C0322B"
:top="192"
:top="186"
></dropdown-vue>
<div style="height: 192rpx" :style="{height: activeBar === 1 ? '112rpx': '192rpx'}"></div>
<div style="height: 172rpx" :style="{height: activeBar === 1 ? '112rpx': '186rpx'}"></div>
<view class="tab-contant">
<view
class="media-card"
......@@ -415,16 +415,17 @@ export default {
flex-direction: column;
justify-content: space-between;
align-items: center;
min-width: 96rpx;
}
.active {
// color: #bf0000;
}
.line {
width: 50rpx;
height: 6rpx;
border-radius: 3rpx;
margin-top: 15rpx;
background-color: #bf0000;
width: 96rpx;
height: 10rpx;
border-radius: 10rpx;
margin-top: -10rpx;
background: linear-gradient(to right, #4374EF 0%, #FFFFFF 100%);
display: inline-block;
overflow: hidden;
}
......
src/pages/index/index.vue
View file @ f839327d
......@@ -4,8 +4,8 @@
<img src="/static/img/home/bg.png" style="width: 100vw;" mode='widthFix' alt="">
</div>
<bab-touchbox @maxtHeight="handleMax" @currentHeight="handleCurrent">
<div :style="{height: maxHeight + 'px', 'overflow-y': allowScroll ? 'auto': 'hidden'}">
<touch-box @maxtHeight="handleMax" @currentHeight="handleCurrent">
<div>
<div style="height: 50rpx;"></div>
<video v-if="videoInfo.videourl" style="width: 100%;height: 318rpx;" :src="videoInfo.videourl" :poster="videoInfo.videoCover" object-fit="fill"></video>
<section-title-vue title="舒城荣誉"></section-title-vue>
......@@ -65,15 +65,16 @@
</div>
<div style="height: 200rpx;"></div>
</div>
</bab-touchbox>
</touch-box>
</page-meta>
</template>
<script>
import BabTouchbox from '@/components/bab-Touchbox/bab-Touchbox.vue'
import API from '@/api/url'
import sectionTitleVue from '@/components/section-title/section-title.vue'
import TouchBox from '../../components/touch-box/touch-box.vue'
export default{
components: {BabTouchbox, sectionTitleVue},
components: {BabTouchbox, sectionTitleVue, TouchBox},
data() {
return {
honorList: [
......
src/pages/inviteInvestment/index.vue
View file @ f839327d
<template>
<div>招商引资</div>
</template>
\ No newline at end of file
<div>
<view class="tab_bar">
<view
class="tab_item"
:class="{ active: activeBar === index }"
@click="changeTab(index)"
v-for="(tab, index) in tabBarList"
:key="index"
>
<p>{{ tab }}</p>
<span class="line" v-if="activeBar === index"></span>
</view>
</view>
<div style="padding: 80rpx 23rpx;padding-top: 80rpx;">
<!-- 招商亮点 -->
<div v-if="activeBar === 0">
<div v-for="light in lights" :key="light.title">
<section-title :title="light.title"></section-title>
<p style="font-size: 22rpx;color: #606266;padding-left: 6rpx;">{{light.titleIntroduce}}</p>
</div>
</div>
<!-- 重点产业 -->
<div v-if="activeBar === 1" style="padding: 40rpx 23rpx;">
<div class="section-box" @click="toIndustryDetail(1)">
<img class="icon-industry" style="width: 226rpx;" src="/static/img/icon-invest-industry_3.png" alt="">
<p class="industry-name">装备制造业</p>
</div>
<div class="section-box" @click="toIndustryDetail(0)">
<img class="icon-industry" src="/static/img/icon-invest-industry_2.png" alt="">
<p class="industry-name">电子信息产业</p>
</div>
<div class="section-box" @click="toIndustryDetail(2)">
<img class="icon-industry" src="/static/img/icon-invest-industry_4.png" alt="">
<p class="industry-name">农副食品加工产业</p>
</div>
</div>
<!-- 招商政策 -->
<div v-if="activeBar === 2" style="padding: 40rpx 23rpx;">
<div class="section-box policy-section" style="background: #F5FAFF;" @click="toPolicyDetail(0)">
<img class="icon-industry" src="/static/img/icon-invest-policy_1.png" alt="">
<p class="industry-name" style="color: #0462C1">征地和购买厂房</p>
</div>
<div class="section-box policy-section" style="background: #F2FDFC;" @click="toPolicyDetail(1)">
<img class="icon-industry" src="/static/img/icon-invest-industry_3.png" alt="">
<p class="industry-name" style="color: #01A192">租赁厂房</p>
</div>
<div class="section-box policy-section" style="background: #F4F5FF;" @click="toPolicyDetail(2)">
<img class="icon-industry" src="/static/img/icon-invest-policy_2.png" alt="">
<p class="industry-name" style="color: #8108C0;">其他</p>
</div>
</div>
<!-- 要素成本 -->
<div v-if="activeBar === 3">
</div>
</div>
<div>
</div>
</div>
<!-- <div>招商引资</div> -->
</template>
<script>
import API from '@/api/url';
import sectionTitle from '../../components/section-title/section-title.vue';
import {mapMutations} from 'vuex';
export default {
components: { sectionTitle },
data() {
return {
tabBarList: ["招商亮点", "重点企业", "招商政策", "要素成本"],
activeBar: 0,
lights: []
}
},
mounted() {
this.$fetch({
url: API.investmentLights,
methods: 'get',
success: res => {
console.log(res)
this.lights = res.investmentLights;
this.setPolicyList(res.policys);
this.setPrimaryIndustryList(res.primaryIndustrys);
}
})
},
methods: {
...mapMutations(['setPolicyList', 'setPrimaryIndustryList']),
changeTab(index) {
this.activeBar = index;
},
toPolicyDetail(index) {
uni.navigateTo({
url: '/pages/inviteInvestment/policyDetail?id=' + index,
success: (result) => {
},
fail: () => {},
complete: () => {}
});
},
toIndustryDetail(index) {
uni.navigateTo({
url: '/pages/inviteInvestment/industryDetail?id=' + index,
success: (result) => {
},
fail: () => {},
complete: () => {}
});
}
}
}
</script>
<style lang="scss" scoped>
.tab_bar {
border-bottom: 1rpx solid #fff;
display: flex;
justify-content: space-between;
padding: 0 30rpx;
padding-top: 15rpx;
background-color: #fff;
position: fixed;
top: 0;
width: 100vw;
box-sizing: border-box;
}
.tab_item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.active {
// color: #bf0000;
}
.line {
width: 50rpx;
height: 6rpx;
border-radius: 3rpx;
margin-top: 15rpx;
background-color: #bf0000;
display: inline-block;
overflow: hidden;
}
.section-box {
background: url("/static/img/icon-invest-industry_1.png") 100% 100% no-repeat;
background-size: contain;
height: 183rpx;
position: relative;
margin-bottom: 5rpx;
}
.policy-section {
height: 180rpx;
margin-bottom: 20rpx;
border-radius: 8rpx;
.icon-industry {
width: 127rpx;
height: 107rpx;
left: 100rpx;
top: 37rpx;
}
.industry-name {
padding-left: 304rpx;
}
}
.icon-industry {
position: absolute;
top: 0;
left: 21rpx;
width: 267rpx;
height: 168rpx;
}
.industry-name {
font-size: 34rpx;
color: #003AB9;
font-weight: bold;
padding-top: 73rpx;
padding-left: 216rpx;
}
</style>
\ No newline at end of file
src/pages/inviteInvestment/industryDetail.vue 0 → 100644
View file @ f839327d
<template>
<div style="padding: 40rpx 23rpx;">
<div>
<section-title title="产业概况"></section-title>
<p style="font-size: 22rpx;color: #606266;padding-left: 6rpx;">{{primaryIndustryList[pageId].titleIntroduce}}</p>
</div>
</div>
</template>
<script>
import store from '@/store'
import sectionTitle from '../../components/section-title/section-title.vue'
export default {
components: { sectionTitle },
data() {
return {
pageId: 0
}
},
computed: {
primaryIndustryList() {
return store.state.primaryIndustryList
}
},
mounted(){
this.pageId = this.$root.$mp.query.id;
uni.setNavigationBarTitle({
title: this.primaryIndustryList[this.pageId].title
});
}
}
</script>
<style></style>
\ No newline at end of file
src/pages/inviteInvestment/policyDetail.vue 0 → 100644
View file @ f839327d
<template>
<div style="padding: 40rpx 23rpx;">
<div v-for="policy in policyList[pageId].info" :key='policy.name'>
<section-title :title="policy.name"></section-title>
<p style="font-size: 22rpx;color: #606266;padding-left: 6rpx;">{{policy.content}}</p>
</div>
</div>
</template>
<script>
import store from '@/store'
import sectionTitle from '../../components/section-title/section-title.vue'
export default {
components: { sectionTitle },
data() {
return {
pageId: 0
}
},
computed: {
policyList() {
return store.state.policyList
}
},
mounted(){
this.pageId = this.$root.$mp.query.id;
uni.setNavigationBarTitle({
title: this.policyList[this.pageId].type
});
}
}
</script>
<style></style>
\ No newline at end of file
src/store/index.js
View file @ f839327d
......@@ -4,6 +4,19 @@ import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
policyList: [],
primaryIndustryList: []
},
mutations: {
setPolicyList(state, provider) {
state.policyList = provider;
},
setPrimaryIndustryList(state, provider) {
state.primaryIndustryList = provider
}
}
})
export default store
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