Zlpt_Portal_h5/src/pages/lease-demand/index.vue

<template>
    <!-- 需求共享大厅 -->
    <view class="h5-container">
        <van-nav-bar title="需求共享大厅" />
        <view class="demand-header">
            <view>
                <SearchIpt @onSearchByType="onSearchByType" />
            </view>

            <navigator class="demand-release" url="/pages/demand-release/index">
                <view>
                    <van-highlight
                        :keywords="keywords"
                        source-string="需求发布"
                        highlight-class="custom-class"
                    />
                </view>
                <view>发布机具需求信息</view>
            </navigator>
        </view>

        <view class="goods-items h5-content">
            <view class="filter-box">
                <view>
                    使用年限
                    <van-icon name="sort" />
                </view>
                <view>
                    租金
                    <van-icon name="sort" />
                </view>
                <view>
                    上架时间
                    <van-icon name="sort" />
                </view>
            </view>
        </view>

        <scroll-view scroll-y class="scroll-item h5-content" @scrolltolower="onScrollTolower">
            <van-grid :column-num="1" :gutter="4">
                <van-grid-item v-for="d in leaseDemandLis" :key="d.id">
                    <view class="demand-items">
                        <view style="font-weight: bold; font-size: 16px">
                            {{ d.leaseName }}
                        </view>
                        <view class="count-down">
                            剩余：
                            <van-count-down :time="d.countDownTime">
                                <template #default="timeData">
                                    <text class="block">
                                        {{
                                            timeData.days > 10 ? timeData.days : '0' + timeData.days
                                        }}
                                    </text>
                                    <text class="colon">天</text>
                                    <text class="block">
                                        {{
                                            timeData.hours > 10
                                                ? timeData.hours
                                                : '0' + timeData.hours
                                        }}
                                    </text>
                                    <text class="colon">时</text>
                                    <text class="block"
                                        >{{
                                            timeData.minutes > 10
                                                ? timeData.minutes
                                                : '0' + timeData.minutes
                                        }}
                                    </text>
                                    <text class="colon">分</text>
                                </template>
                            </van-count-down>
                        </view>
                    </view>
                    <view class="demand-items">
                        <view> 装备类目： </view>
                    </view>

                    <view class="demand-items">
                        <view> 租赁公司： {{ d.companyName }} </view>
                        <view> 联系电话： {{ d.personPhone }} </view>
                    </view>
                    <view class="demand-items">
                        <view> 联系人： {{ d.person }} </view>
                        <view> 预估租期(天)： {{ d.leaseDay }} </view>
                    </view>
                    <view class="demand-items">
                        <view> 预估数量： {{ d.leaseTotalNum }} </view>
                        <view> 截止时间： {{ d.endTime }} </view>
                    </view>

                    <view class="demand-items">
                        <view style="text-align: right">
                            <van-button type="success" size="mini">需求详情</van-button>
                            <van-button
                                type="primary"
                                size="mini"
                                class="primary-lease"
                                @click="onReceivingOrders(d.id)"
                            >
                                接单
                            </van-button>
                        </view>
                    </view>
                </van-grid-item>
            </van-grid>
        </scroll-view>
    </view>
</template>

<script setup>
import SearchIpt from '@/components/SearchIpt/index'
import { getLeaseDemandListAPI } from '@/services/demand/index.js'
import { acceptLeaseDemandOrderAPI } from '@/services/demand/index.js'
import { onLoad } from '@dcloudio/uni-app'
import moment from 'moment'
import { ref } from 'vue'
const keywords = ref('发布')
const leaseDemandLis = ref([])
const onScrollTolower = () => {
    console.log('滚动触底')
}

const onSearchByType = (value, type) => {
    /**
     *  @type 1 查询机具 2 查询需求
     *  @value 搜索框值
     */
    if (type === 2) {
        getLeaseDemandListData()
    } else {
        uni.navigateTo({ url: '/pages/goods-list/index' })
    }
}

// 获取需求列表
const getLeaseDemandListData = async () => {
    const { data: res } = await getLeaseDemandListAPI({})
    leaseDemandLis.value = res.rows
    const nowTime = moment()
    leaseDemandLis.value.forEach((e) => {
        e.countDownTime =
            moment.duration(moment(e.endTime, 'YYYY-MM-DD HH:mm:ss').diff(nowTime)).asSeconds() *
            1000
    })
}

const onReceivingOrders = (id) => {
    uni.showModal({
        title: '温馨提示',
        content: '是否确认接单？',
        success: async () => {
            const res = await acceptLeaseDemandOrderAPI({ id })
            if (res.code === 200) {
                showSuccessToast('接单成功')
                getLeaseDemandListData()
            }
        },
    })
}
onLoad(() => {
    getLeaseDemandListData()
})
</script>

<style lang="scss" scoped>
.demand-header {
    padding: 5px 20px 15px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #6caf97, #78b0a9, #b8d0cf);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
.demand-release {
    padding: 15px 6px;
    margin-bottom: 10px;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 6px;
    background: linear-gradient(to left, #73cabe, #a2dcd5, #ccebe8);
    view {
        font-style: italic;
        font-size: 13px;
        letter-spacing: 2px;
    }

    & view:first-child {
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: bold;
    }
}

.filter-box {
    display: flex;
    align-items: center;
}

.scroll-item {
    // background-color: $uni-bg-color;
    :deep(.van-grid-item__content) {
        background-color: #f6fbfd;
        border-radius: 6px;
    }

    .demand-items {
        width: 100%;
        padding: 2px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #333;

        view {
            flex: 1;
        }

        .count-down {
            display: flex;
            align-items: center;
            color: #ee0a24;
            font-size: 13px;

            .van-count-down {
                color: #ee0a24;
                letter-spacing: 1px;
                font-size: 13px;
            }
        }
    }
}

:deep(.van-highlight__tag) {
    color: $el-color-primary;
}

:deep(.van-nav-bar__title) {
    color: #333;
}
</style>