535 lines
15 KiB
Vue
535 lines
15 KiB
Vue
<template>
|
|
<!-- 装备共享大厅 -->
|
|
<view class="h5-container goods-list">
|
|
<!-- <Navbar :navTitle="`装备共享大厅`" /> -->
|
|
<!-- <van-nav-bar title="装备共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
|
|
|
|
<view style="padding: 15px 0" class="nav-title">
|
|
<van-icon name="arrow-left" @click="onClickLeft" />
|
|
<text class="nav-title-text"> 装备共享大厅 </text>
|
|
</view>
|
|
<view style="padding: 10px">
|
|
<SearchIpt
|
|
@onSearchByType="onSearchByType"
|
|
v-model:activeTypeName="activeTypeName"
|
|
v-model:searchModelValue="searchModelValue"
|
|
/>
|
|
</view>
|
|
|
|
<view class="goods-items">
|
|
<view class="filter-box">
|
|
<view class="filter-items">
|
|
<text> 租金 </text>
|
|
<view class="filter-type">
|
|
<van-icon
|
|
name="play"
|
|
:color="searchParams.dayLeasePriceOrderBy === 'ASC' ? '#00377a' : ''"
|
|
@click="
|
|
onClickPrice(
|
|
searchParams.dayLeasePriceOrderBy === 'ASC' ? '' : 'ASC',
|
|
)
|
|
"
|
|
size="12"
|
|
/>
|
|
<van-icon
|
|
name="play"
|
|
:color="searchParams.dayLeasePriceOrderBy === 'DESC' ? '#00377a' : ''"
|
|
@click="
|
|
onClickPrice(
|
|
searchParams.dayLeasePriceOrderBy === 'DESC' ? '' : 'DESC',
|
|
)
|
|
"
|
|
size="12"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="filter-items">
|
|
<text> 上架时间 </text>
|
|
<view class="filter-type">
|
|
<van-icon
|
|
name="play"
|
|
:color="searchParams.updateTimeOrderBy === 'ASC' ? '#00377a' : ''"
|
|
@click="
|
|
onClickTime(searchParams.updateTimeOrderBy === 'ASC' ? '' : 'ASC')
|
|
"
|
|
size="12"
|
|
/>
|
|
<van-icon
|
|
name="play"
|
|
:color="searchParams.updateTimeOrderBy === 'DESC' ? '#00377a' : ''"
|
|
@click="
|
|
onClickTime(searchParams.updateTimeOrderBy === 'DESC' ? '' : 'DESC')
|
|
"
|
|
size="12"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="onFilter">
|
|
<text> 上架时间 </text>
|
|
<van-icon name="filter-o" />
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
|
|
<van-grid :column-num="2" :border="false" :gutter="4">
|
|
<van-grid-item
|
|
v-for="(item, index) in deviceList"
|
|
:key="index"
|
|
@click="onViewGoodsDetails(item)"
|
|
>
|
|
<GoodsItems :goodsInfo="item" />
|
|
</van-grid-item>
|
|
</van-grid>
|
|
|
|
<view class="loading-text">
|
|
{{ finish ? '没有更多数据了~' : '正在加载...' }}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<van-popup position="bottom" v-model:show="showBottom" :style="{ height: '60%' }">
|
|
<view class="filter-bottom">
|
|
<view
|
|
style="text-align: right; padding: 4px 8px"
|
|
@click="
|
|
() => {
|
|
showBottom = false
|
|
}
|
|
"
|
|
>
|
|
<van-icon name="close" color="#575B66" size="20" />
|
|
</view>
|
|
<view
|
|
style="
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
font-family: PingFangSC, PingFang SC;
|
|
"
|
|
>
|
|
全部筛选
|
|
</view>
|
|
|
|
<view class="filter-content">
|
|
<van-sidebar v-model="activeSelect">
|
|
<van-sidebar-item
|
|
:key="index"
|
|
:title="item.selectName"
|
|
v-for="(item, index) in selectList"
|
|
/>
|
|
</van-sidebar>
|
|
|
|
<scroll-view scroll-y class="right-btns">
|
|
<view>
|
|
<view> {{ selectList[activeSelect].selectName }} </view>
|
|
<view class="btns">
|
|
<view
|
|
:class="{ active_btn: item.isChecked }"
|
|
v-for="(item, index) in selectList[activeSelect].val_list"
|
|
:key="index"
|
|
@click="onClickTags(item)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</van-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import GoodsItems from '@/components/GoodsItems'
|
|
import SearchIpt from '@/components/SearchIpt/index'
|
|
import { getDeviceListAPI } from '@/services/index/index.js'
|
|
import { getTypeListAPI } from '@/services/common/index.js'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import { ref, computed } from 'vue'
|
|
import { useMemberStore } from '@/stores/index.js'
|
|
import { debounce } from 'lodash-es'
|
|
const memberStore = useMemberStore()
|
|
const activeSelect = ref(0)
|
|
const showBottom = ref(false)
|
|
const deviceList = ref([])
|
|
const total = ref(0)
|
|
const activeTypeName = ref('机具')
|
|
const searchModelValue = ref('')
|
|
const searchParams = ref({
|
|
keyWord: '',
|
|
ageMin: '',
|
|
ageMax: '',
|
|
companyId: '',
|
|
dayLeasePriceMin: '',
|
|
dayLeasePriceMax: '',
|
|
typeId: '',
|
|
level: '',
|
|
maStatus: 2,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
updateTimeOrderBy: '',
|
|
dayLeasePriceOrderBy: '',
|
|
})
|
|
const selectList = ref([
|
|
{
|
|
selectName: '使用年限',
|
|
val_list: [
|
|
{
|
|
name: '全部',
|
|
value: '',
|
|
isChecked: true,
|
|
},
|
|
{
|
|
name: '0-1年',
|
|
value: [0, 1],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '1-3年',
|
|
value: [1, 3],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '3-5年',
|
|
value: [3, 5],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '5-8年',
|
|
value: [5, 8],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '10年以上',
|
|
value: ['', 10],
|
|
isChecked: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
selectName: '设备类型',
|
|
val_list: [
|
|
{
|
|
name: '全部',
|
|
value: '',
|
|
isChecked: true,
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
selectName: '价格区间',
|
|
val_list: [
|
|
{
|
|
name: '全部',
|
|
value: '',
|
|
isChecked: true,
|
|
},
|
|
{
|
|
name: '0-500',
|
|
value: [0, 500],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '500-1000',
|
|
value: [500, 1000],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '1000-500',
|
|
value: [1000, 1500],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '1500-2000',
|
|
value: [1500, 2000],
|
|
isChecked: false,
|
|
},
|
|
{
|
|
name: '2000-2500',
|
|
value: [2000, 2500],
|
|
isChecked: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
selectName: '设备所属公司',
|
|
val_list: [
|
|
{
|
|
name: '全部',
|
|
value: '',
|
|
isChecked: true,
|
|
},
|
|
],
|
|
},
|
|
])
|
|
|
|
// 判断数据是否加载完毕
|
|
const finish = computed(() => {
|
|
if (total.value === deviceList.value.length) return true
|
|
})
|
|
const onScrollTolower = debounce(() => {
|
|
if (total.value > deviceList.value.length) {
|
|
searchParams.value.pageNum++
|
|
getDeviceListData()
|
|
}
|
|
}, 500)
|
|
|
|
// 获取装备列表
|
|
const getDeviceListData = async (isTap = false) => {
|
|
if (isTap) searchParams.value.pageNum = 1
|
|
const { data: result } = await getDeviceListAPI(searchParams.value)
|
|
total.value = result.total
|
|
if (isTap) {
|
|
deviceList.value = result.rows
|
|
} else {
|
|
if (result.rows.length == 0) {
|
|
deviceList.value = []
|
|
} else {
|
|
deviceList.value.push(...result.rows)
|
|
}
|
|
}
|
|
}
|
|
const onViewGoodsDetails = (item) => {
|
|
uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
|
|
}
|
|
|
|
// 获取装备分类
|
|
const getTypeListData = async () => {
|
|
const { data: res } = await getTypeListAPI()
|
|
const typeList = res.map((e) => {
|
|
return { ...e, name: e.typeName, value: e.typeId, isChecked: false }
|
|
})
|
|
selectList.value[1].val_list.push(...typeList)
|
|
}
|
|
|
|
// 标签点击
|
|
const onClickTags = (item) => {
|
|
selectList.value[activeSelect.value].val_list.forEach((e) => {
|
|
e.isChecked = false
|
|
})
|
|
item.isChecked = true
|
|
|
|
if (activeSelect.value == 0) {
|
|
if (item.value == '') {
|
|
searchParams.value.ageMin = ''
|
|
searchParams.value.ageMax = ''
|
|
} else {
|
|
searchParams.value.ageMin = item.value[0]
|
|
searchParams.value.ageMax = item.value[1]
|
|
}
|
|
}
|
|
if (activeSelect.value == 1) {
|
|
searchParams.value.typeId = item.value
|
|
searchParams.value.level = item.value ? 1 : ''
|
|
}
|
|
if (activeSelect.value == 2) {
|
|
if (item.value == '') {
|
|
searchParams.value.dayLeasePriceMin = ''
|
|
searchParams.value.dayLeasePriceMax = ''
|
|
} else {
|
|
searchParams.value.dayLeasePriceMin = item.value[0]
|
|
searchParams.value.dayLeasePriceMax = item.value[1]
|
|
}
|
|
}
|
|
if (activeSelect.value == 3) {
|
|
searchParams.value.companyId = item.value
|
|
}
|
|
getDeviceListData(true)
|
|
}
|
|
|
|
// 金额筛选
|
|
const onClickPrice = (type) => {
|
|
searchParams.value.dayLeasePriceOrderBy = type
|
|
getDeviceListData(true)
|
|
}
|
|
// 时间筛选
|
|
const onClickTime = (type) => {
|
|
searchParams.value.updateTimeOrderBy = type
|
|
getDeviceListData(true)
|
|
}
|
|
|
|
const onSearchByType = (value, type) => {
|
|
/**
|
|
* @type 1 查询机具 2 查询需求
|
|
* @value 搜索框值
|
|
*/
|
|
if (type === 2) {
|
|
uni.setStorageSync('myParam', { value: searchModelValue.value, type: 2 })
|
|
uni.switchTab({
|
|
url: `/pages/lease-demand/index`,
|
|
})
|
|
} else {
|
|
searchParams.value.keyWord = value
|
|
getDeviceListData(true)
|
|
}
|
|
}
|
|
const onClickLeft = () => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index',
|
|
})
|
|
}
|
|
|
|
const onFilter = () => {
|
|
showBottom.value = true
|
|
}
|
|
onLoad((options) => {
|
|
if (options.type == 1) {
|
|
activeTypeName.value = '机具'
|
|
}
|
|
searchParams.value.keyWord = options?.value
|
|
searchModelValue.value = options?.value
|
|
searchParams.value.typeId = options?.typeId
|
|
searchParams.value.companyId = options?.companyId
|
|
options?.typeId ? (searchParams.value.level = 3) : ''
|
|
getDeviceListData(true)
|
|
getTypeListData()
|
|
const companyList = memberStore.companyList.map((e) => {
|
|
return { ...e, name: e.companyName, value: e.companyId, isChecked: false }
|
|
})
|
|
selectList.value[3].val_list.push(...companyList)
|
|
})
|
|
|
|
onShow(() => {})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods-list {
|
|
padding: 10px;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(to bottom, #b0c7e3, #cfd9e5, #f9f9f9);
|
|
}
|
|
.search-index {
|
|
height: 80px;
|
|
justify-content: center;
|
|
|
|
.van-field {
|
|
width: 65%;
|
|
padding: 0;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border: 1px solid #00377a;
|
|
border-top-left-radius: 18px;
|
|
border-bottom-left-radius: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.van-button {
|
|
height: 36px;
|
|
width: 70px;
|
|
line-height: 36px;
|
|
background: #00377a;
|
|
border: none;
|
|
border-top-right-radius: 18px;
|
|
border-bottom-right-radius: 18px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.goods-items {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
// background: $uni-bg-color;
|
|
|
|
.filter-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.filter-items {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.filter-type {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// padding: 0 6px;
|
|
|
|
& .van-icon:first-child {
|
|
transform: rotateZ(-90deg);
|
|
margin-bottom: -3px;
|
|
}
|
|
& .van-icon:last-child {
|
|
transform: rotateZ(90deg);
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.van-tabbar {
|
|
height: 70px;
|
|
}
|
|
.scroll-item {
|
|
background-color: $uni-bg-color;
|
|
.van-grid-item {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
:deep(.van-nav-bar .van-icon),
|
|
:deep(.van-nav-bar__title) {
|
|
color: #333;
|
|
}
|
|
|
|
.filter-bottom {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.filter-content {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.right-btns {
|
|
flex: 1;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
|
|
.btns {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
view {
|
|
min-width: calc((100% - 20px) / 3);
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
min-height: 28px;
|
|
line-height: 28px;
|
|
text-align: center;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.active_btn {
|
|
color: #00377a;
|
|
background-color: #d1eae7;
|
|
}
|
|
|
|
& view:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.van-grid-item__content) {
|
|
padding: 0;
|
|
}
|
|
</style>
|