You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
13 KiB
368 lines
13 KiB
<template> |
|
<view class="body-background"></view> |
|
<mz-sticky> |
|
<view class="screen-body row pad"> |
|
<u-row :custom-style="{boxSizing:'border-box',width:'100%',flexWrap:'wrap'}"> |
|
<u-col |
|
:custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:((tabCheck === 'item')?'0 0':'0 26rpx'),boxSizing:'border-box'}"> |
|
<view class="screen-container row"> |
|
<view class="col-12"> |
|
<u-image radius="20" :src="staticImage.activityHead" mode="widthFix" width="100%" height="240"></u-image> |
|
</view> |
|
|
|
<view :style="{width:'100%',display:'flex',padding:'26rpx 0'}"> |
|
<view class="row" style="justify-content: space-around;margin-top:16rpx;"> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row " @click="openStreetPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(shows.street_name!=='')" :text="shows.street_name || '选择街道'" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="button-icon"> |
|
<u-icon name="arrow-down-fill" size="12"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row " @click="openCommunityPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(shows.community_name!=='')" :text="shows.community_name || '选择社区'" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="button-icon"> |
|
<u-icon name="arrow-down-fill" size="12"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<u-row :custom-style="{boxSizing:'border-box',width:'100%',flexWrap:'wrap'}"> |
|
<u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'16rpx 26rpx',boxSizing:'border-box'}"> |
|
<u-tabs |
|
:list="listItem" |
|
u-sticky |
|
lineWidth="40" |
|
lineHeight="4" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#F47210'}" |
|
lineColor="#F47210" |
|
:custom-style="{margin:'auto',width:'100%'}" |
|
:scrollable="false" |
|
:current="current" |
|
@change="tabsChange" |
|
></u-tabs> |
|
</u-col> |
|
</u-row> |
|
<!-- --> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
</view> |
|
</mz-sticky> |
|
|
|
|
|
<view class="room-container" :style="{display:'block'} " style="margin-top:0rpx;"> |
|
<!-- <view class="gradient-background"></view>--> |
|
<view class="item-container" style="padding:16rpx 26rpx;position: relative;z-index: 2"> |
|
<view class="item" |
|
:class="getStatusColor(item.status)" v-for="item in lists" |
|
style="padding:4rpx;background-color: #fff;border-radius:20rpx;margin-bottom:16rpx;" |
|
@click="tabCheck === 'activity' ?api.navTo('/pages/Activity/index?id='+item.id,true):api.navTo('/pages/Project/index?id='+item.id,true)"> |
|
<view class="item-img-right"> |
|
<!-- 状态：0=待报名,1=报名中,2=已抢光,3=待开始,4=活动中,5=已完成,6=已取消--> |
|
<!-- <u-image :src="staticImage.rightRed" width="96" height="96"></u-image>--> |
|
<!-- 已取消--> |
|
<u-image :src="staticImage.rightJoin" v-if="item.status === 0" width="96" height="96"></u-image> |
|
<!-- 报名中--> |
|
<u-image :src="staticImage.rightBlue" v-if="item.status === 1" width="96" height="96"></u-image> |
|
<!-- 已抢光--> |
|
<u-image :src="staticImage.rightRed" v-if="item.status === 2" width="96" height="96"></u-image> |
|
<!-- 待开始--> |
|
<u-image :src="staticImage.rightStart" v-if="item.status === 3" width="96" height="96"></u-image> |
|
<!-- 活动中--> |
|
<u-image :src="staticImage.rightGreenActivity" v-if="item.status === 4 && tabCheck === 'activity'" width="96" height="96"></u-image> |
|
<u-image :src="staticImage.rightGreenProject" v-if="item.status === 4 && tabCheck === 'project'" width="96" height="96"></u-image> |
|
<!-- 已完成--> |
|
<u-image :src="staticImage.rightOrange" v-if="item.status === 5" width="96" height="96"></u-image> |
|
<!-- 已取消--> |
|
<u-image :src="staticImage.rightCancel" v-if="item.status === 6" width="96" height="96"></u-image> |
|
</view> |
|
<view :class="getStatusColor(item.status)" style="padding:20rpx;border-radius:20rpx;"> |
|
<view class="title row" style="margin-bottom:32rpx;"> |
|
<view class="title-item blue"> |
|
<view class="title-content"> |
|
<u-text :text="item.type_name" color="#ffffff" size="28" line-height="40"></u-text> |
|
</view> |
|
</view> |
|
<view class="title-item"> |
|
<view class="title-content"> |
|
<u-text :text="item.community" color="#ffffff" size="28" line-height="40"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="body row"> |
|
<view class="cover" style="margin-right:24rpx;position:relative;"> |
|
<view style="position: absolute;top:0;left:0;z-index:10;" v-if="item.is_top === 1"> |
|
<u-image mode="widthFix" width="64" height="64" :src="staticImage.activityTop"></u-image> |
|
</view> |
|
<u-image mode="widthFix" width="260" height="160" :src="item.cover" radius="10"></u-image> |
|
</view> |
|
<view class="content col"> |
|
<view class="content-title" style="margin-bottom:32rpx;"> |
|
<u-text :text="item.title" color="#020B18" size="32"></u-text> |
|
</view> |
|
<view class="content-body"> |
|
<view class="body-address row" style="margin-bottom:10rpx;"> |
|
<view class="icon" style="margin-right:20rpx;"> |
|
<u-image mode="widthFix" width="32" height="32" :src="staticImage.listPosition"></u-image> |
|
</view> |
|
<view class="value col "> |
|
<u-text :text="item.address" color="#AFB5BE" size="28" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text> |
|
</view> |
|
</view> |
|
<view class="body-phone row" style="justify-content: flex-start"> |
|
<view class="icon" style="margin-right:20rpx;"> |
|
<u-image mode="widthFix" width="32" height="32" :src="staticImage.listTime"></u-image> |
|
</view> |
|
<view class="value row col"> |
|
<view class=""> |
|
<u-text :text="$u.timeFormat(item.start_time,'yyyy/mm/dd')" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28" |
|
marginBottom="30" marginTop="30" @loadmore="getActivityList()" v-if="(tabCheck === 'activity')"/> |
|
<u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28" |
|
marginBottom="30" marginTop="30" @loadmore="getProjectList()" v-if="(tabCheck === 'project')"/> |
|
</view> |
|
|
|
<uv-picker |
|
ref="street" |
|
:columns="[streetList]" |
|
keyName="name" |
|
@confirm="selectStreet"></uv-picker> |
|
<uv-picker |
|
ref="community" |
|
:columns="[communityList]" |
|
keyName="name" |
|
@confirm="selectCommunity"></uv-picker> |
|
</template> |
|
|
|
<script> |
|
import api from "@/utils/functions.js"; |
|
import {streetList} from "@/api/shop"; |
|
import MzCard from "@/components/MzCard/index.vue"; |
|
import {imghost} from "@/config/host"; |
|
import {getCommonStreet} from "@/api/other"; |
|
import {activityList} from "@/api/activity"; |
|
import {projectList} from "@/api/project"; |
|
|
|
export default { |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
topStyle(){ |
|
return (uni.getStorageSync('sysInfo').sysAndMenuHeight)+'px'; |
|
}, |
|
}, |
|
components: { |
|
MzCard, |
|
}, |
|
data() { |
|
return { |
|
mapShow:true, |
|
lists: [], |
|
list: [{ |
|
name: '公寓出租', |
|
id: 'room' |
|
}, { |
|
name: '商品兑换', |
|
id: 'item' |
|
},], |
|
communityList:[{name:'全部',id:''}], |
|
streetList:[{name:'全部',id:''}], |
|
listItem: [{ |
|
name: '社区活动', |
|
id: 'activity' |
|
}, { |
|
name: '项目需求', |
|
id: 'project' |
|
}], |
|
tabCheck: 'activity', |
|
current: 0, |
|
show: false, |
|
title: '暖新服务', |
|
pages: { |
|
page: 1, |
|
limit: 10, |
|
street_id:'', |
|
community_id:'', |
|
}, |
|
shows:{ |
|
street_name:'', |
|
community_name:'', |
|
}, |
|
status: 'loadmore', |
|
staticImage:{ |
|
activityHead:imghost+'/activity-head.png', |
|
position:imghost+'/map-position.png', |
|
mapClose:imghost+'/map-close.png', |
|
listPosition:imghost+'/activity-position.png', |
|
listTime:imghost+'/activity-time.png', |
|
rightRed:imghost+'/activity-red.png',//已抢光 |
|
rightBlue:imghost+'/activity-blue.png',//报名中 |
|
rightGreenProject:imghost+'/activity-green.png',//实施中 |
|
rightGreenActivity:imghost+'/activity-1-green.png',//活动中 |
|
rightOrange:imghost+'/activity-orange.png',//已完成] |
|
rightCancel:imghost+'/activity-cancel.png',//已取消 |
|
rightStart:imghost+'/activity-start.png',//待开始 |
|
rightJoin:imghost+'/activity-join.png',//待报名 |
|
activityTop:imghost+'/activity-top.png',//置顶 |
|
}, |
|
} |
|
}, |
|
methods: { |
|
activityOnBottom(){ |
|
if(this.tabCheck === 'activity'){ |
|
this.getActivityList(); |
|
}else{ |
|
this.getProjectList(); |
|
} |
|
}, |
|
selectStreet(e){ |
|
this.shows.street_name = e.value[0].name !== '全部'?e.value[0].name:''; |
|
this.pages.street_id = e.value[0].id; |
|
this.communityList = [{name:'全部',id:''}]; |
|
this.communityList = this.communityList.concat(e.value[0].children); |
|
this.getListHandle(); |
|
}, |
|
selectCommunity(e){ |
|
this.shows.community_name = e.value[0].name !== '全部'?e.value[0].name:''; |
|
this.pages.community_id = e.value[0].id; |
|
this.getListHandle(); |
|
}, |
|
getListHandle(){ |
|
if(this.tabCheck === 'activity'){ |
|
this.getActivityList(true); |
|
}else{ |
|
this.getProjectList(true); |
|
} |
|
}, |
|
getPickerData(){ |
|
getCommonStreet({}).then(res => { |
|
this.streetList = this.streetList.concat(res.data); |
|
}); |
|
}, |
|
openStreetPicker(){ |
|
this.$refs.street.open(); |
|
}, |
|
openCommunityPicker(){ |
|
this.$refs.community.open(); |
|
}, |
|
getStatusColor(status){ |
|
switch (status){ |
|
case 0: |
|
return 'red'; |
|
case 1: |
|
return 'blue'; |
|
case 2: |
|
return 'red'; |
|
case 3: |
|
return 'red'; |
|
case 4: |
|
return 'green'; |
|
case 5: |
|
return 'orange'; |
|
case 6: |
|
return 'gray'; |
|
default: |
|
return 'blue'; |
|
} |
|
}, |
|
getConfig(){ |
|
|
|
}, |
|
tabsChange(e) { |
|
this.tabCheck = e.id |
|
this.getListHandle(); |
|
}, |
|
getActivityList(clear = false) { |
|
if (clear) { |
|
this.status = 'loadmore' |
|
this.pages.page = 1; |
|
this.lists = []; |
|
} |
|
if (this.status === 'nomore') { |
|
return false; |
|
} |
|
this.status = 'loading' |
|
activityList(this.pages).then(res => { |
|
this.lists.push.apply(this.lists, res.data); |
|
if (res.data.length === 0) { |
|
this.status = 'nomore' |
|
}else{ |
|
this.status = 'loadmore' |
|
} |
|
this.pages.page++; |
|
}); |
|
}, |
|
getProjectList(clear = false) { |
|
if (clear) { |
|
this.status = 'loadmore' |
|
this.pages.page = 1; |
|
this.lists = []; |
|
} |
|
if (this.status === 'nomore') { |
|
return false; |
|
} |
|
this.status = 'loading' |
|
projectList(this.pages).then(res => { |
|
this.lists.push.apply(this.lists, res.data); |
|
if (res.data.length === 0) { |
|
this.status = 'nomore' |
|
}else{ |
|
this.status = 'loadmore' |
|
} |
|
this.pages.page++; |
|
}); |
|
}, |
|
getStreet() { |
|
streetList({}).then(res => { |
|
this.streetColumns = res.data; |
|
}); |
|
}, |
|
}, |
|
mounted() { |
|
// this.getStreet(); |
|
this.getConfig(); |
|
this.getPickerData(); |
|
let tabCheck = 'activity'; |
|
let current = 0; |
|
let activityMore = uni.getStorageSync('activityMore'); |
|
let projectMore = uni.getStorageSync('projectMore'); |
|
if(activityMore){ |
|
current = 0; |
|
tabCheck = 'activity'; |
|
uni.setStorageSync('activityMore',false); |
|
} |
|
if(projectMore){ |
|
current = 1; |
|
tabCheck = 'project'; |
|
uni.setStorageSync('projectMore',false); |
|
} |
|
|
|
this.current = current; |
|
this.tabCheck = tabCheck; |
|
this.getListHandle(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import "./components/index.scss"; |
|
</style> |