314 lines
7.0 KiB
Vue
314 lines
7.0 KiB
Vue
<template>
|
||
<view class="message-container">
|
||
<!-- 可滚动的内容区域 -->
|
||
<view class="content-container" :style="'height:'+height+'px'">
|
||
<view class="searchFilter" id="searchFilterId">
|
||
<view class="search">
|
||
<u-search :show-action="false" placeholder="输入项目名称、企业名称" v-model="params.keyword" bgColor="#CADBFF"
|
||
@search="handleSearch"></u-search>
|
||
</view>
|
||
<u-dropdown :duration="0" class="dropdown">
|
||
<u-dropdown-item class="u-dropdown" v-model="areaFilter" title="区域筛选"
|
||
:options="areaOptions"></u-dropdown-item>
|
||
<u-dropdown-item class="u-dropdown" v-model="timeFilter" title="时间筛选"
|
||
:options="timeOptions"></u-dropdown-item>
|
||
<u-dropdown-item class="u-dropdown" v-model="typeFilter" title="类型筛选"
|
||
:options="typeOptions"></u-dropdown-item>
|
||
</u-dropdown>
|
||
</view>
|
||
|
||
<view class="program-list" :style="'height:'+scrollHeight+'px'">
|
||
<scroll-view scroll-y="true" style="height: 100%;" v-if="programList.length!=0" @scrolltolower="loadData">
|
||
<view class="program-item" v-for="item in programList" @click="handleDetail(item)">
|
||
<view class="program-avatar">
|
||
<image style="width: 100%;height: 100%;border-radius: 50%;"
|
||
:src="getImageUrl(item.user.avatar)" mode=""></image>
|
||
</view>
|
||
<view class="program-info">
|
||
<view class="program-name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="company-name">
|
||
{{item.company}}
|
||
</view>
|
||
<view class="program-address">
|
||
项目地点：{{item.address}}
|
||
</view>
|
||
<view class="program-contact">
|
||
项目联系人：{{maskPhoneNumber(item.user.username)}}
|
||
</view>
|
||
<view class="program-introduction">
|
||
项目简介：{{item.introduction}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore color="#fff" :status="status" />
|
||
<view class="box-div"></view>
|
||
</scroll-view>
|
||
|
||
<view style="height: 100%;" v-else>
|
||
<u-empty></u-empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<Tabbar id="tabbarId"></Tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
|
||
import {
|
||
onReady
|
||
} from '@dcloudio/uni-app';
|
||
import { onReady as onUniReady, onPullDownRefresh } from '@dcloudio/uni-app';
|
||
import { programAPI } from '../../api/program';
|
||
import { getImageUrl, maskPhoneNumber } from '../../util/common';
|
||
const instance = getCurrentInstance();
|
||
|
||
const height = ref(0)
|
||
const scrollHeight = ref(0)
|
||
|
||
const loadHeight = () => {
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
let screenHeight = res.screenHeight
|
||
uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
|
||
height.value = screenHeight - data.height
|
||
}).exec()
|
||
uni.createSelectorQuery().in(instance.proxy).select("#searchFilterId").boundingClientRect((data : any) => {
|
||
scrollHeight.value = height.value - data.height
|
||
}).exec()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 筛选
|
||
const keyword = ref('')
|
||
const areaFilter = ref('')
|
||
const timeFilter = ref('')
|
||
const typeFilter = ref('')
|
||
|
||
const areaOptions = [
|
||
{
|
||
label: '默认排序',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '距离优先',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '价格优先',
|
||
value: 3,
|
||
}]
|
||
const timeOptions = [
|
||
{
|
||
label: '默认排序',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '距离优先',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '价格优先',
|
||
value: 3,
|
||
}]
|
||
const typeOptions = [
|
||
{
|
||
label: '默认排序',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '距离优先',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '价格优先',
|
||
value: 3,
|
||
}]
|
||
|
||
// 列表
|
||
const programList = ref([])
|
||
const defaultSize = 5
|
||
const params = ref({
|
||
page: 1,
|
||
size: defaultSize,
|
||
keyword: ''
|
||
})
|
||
const status = ref('loadmore')
|
||
const maxPage = ref()
|
||
|
||
// 加载数据
|
||
const loadData = () => {
|
||
if (status.value == 'nomore') return
|
||
programAPI.getList(params.value).then(res => {
|
||
programList.value = programList.value.concat(res.data.list)
|
||
maxPage.value = res.data.pages
|
||
params.value.page++
|
||
if (params.value.page > maxPage.value) {
|
||
status.value = 'nomore'
|
||
}
|
||
}).finally(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
}
|
||
|
||
// 查看详情
|
||
const handleDetail = (item) => {
|
||
uni.navigateTo({
|
||
url: '/pages/program/programDetail?programId=' + item.id
|
||
})
|
||
}
|
||
|
||
// 查询
|
||
const handleSearch = () => {
|
||
params.value = {
|
||
page: 1,
|
||
size: defaultSize,
|
||
keyword: params.value.keyword
|
||
}
|
||
programList.value = []
|
||
loadData()
|
||
}
|
||
|
||
// 刷新
|
||
onPullDownRefresh(async () => {
|
||
// 全局刷新
|
||
params.value = {
|
||
page: 1,
|
||
size: defaultSize,
|
||
keyword: ''
|
||
}
|
||
programList.value = []
|
||
loadData()
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
})
|
||
|
||
onUniReady(() => {
|
||
loadHeight()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.message-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: linear-gradient(270deg, #65A7FF 0%, #458CF9 23.08%, #3F82FF 50%, #458CF9 71.15%, #65A7FF 100%);
|
||
|
||
/* 内容滚动区域 */
|
||
.content-container {
|
||
width: 100%;
|
||
|
||
.searchFilter {
|
||
background-color: transparent;
|
||
|
||
.search {
|
||
padding: 80rpx 42rpx 0;
|
||
}
|
||
}
|
||
|
||
::v-deep .dropdown {
|
||
.u-dropdown__menu__item__text {
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
.program-list {
|
||
margin-top: 20rpx;
|
||
|
||
.program-item {
|
||
background-color: #F0F3FF;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 42rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
display: flex;
|
||
|
||
.program-avatar {
|
||
width: 20%;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.program-info {
|
||
width: 80%;
|
||
margin-left: 20rpx;
|
||
|
||
.program-name {
|
||
font-family: SF Pro;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 32rpx;
|
||
leading-trim: NONE;
|
||
line-height: 48rpx;
|
||
letter-spacing: 0%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.company-name {
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.program-address {
|
||
font-family: Work Sans;
|
||
font-weight: 300;
|
||
font-style: Light;
|
||
font-size: 24rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
color: #000;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.program-contact {
|
||
font-family: Work Sans;
|
||
font-weight: 300;
|
||
font-style: Light;
|
||
font-size: 20rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
color: #000;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.program-introduction {
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
color: #000;
|
||
margin-bottom: 10rpx;
|
||
|
||
/* 关键样式 */
|
||
white-space: nowrap;
|
||
/* 不换行 */
|
||
overflow: hidden;
|
||
/* 超出隐藏 */
|
||
text-overflow: ellipsis;
|
||
/* 显示省略号 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-div {
|
||
padding: 30rpx 0rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |