Zlpt_Portal_h5/src/pages/index/index.vue

<template>
    <!-- 首页 -->
    <view class="index-container h5-container">
        <view class="index-header">
            <view class="flex-row-start">
                <van-icon name="manager" style="margin-right: 6px" />
                <van-popover
                    size="small"
                    :show-arrow="false"
                    :actions="userActions"
                    v-model:show="showPopover"
                    @select="onUserSelect"
                >
                    <template #reference>
                        <text> {{ activeUser }} </text>
                        <van-icon name="arrow-down" />
                    </template>
                </van-popover>
            </view>

            <view class="user-name"> 您好！安徽送变电公司 / 李世民 </view>
            <view class="notice-box">
                <van-image height="0.8rem" width="4rem" :src="noticeImg" />
                <view>
                    <van-notice-bar color="#00a288" background="transparent" left-icon="volume-o">
                        大鹏一日同风起，扶摇直上九万里
                    </van-notice-bar>
                </view>
            </view>

            <view class="search-ipt">
                <!-- <van-field placeholder="搜索" /> -->
                <SearchIpt @onSearchByType="onSearchByType" />
            </view>
        </view>

        <view class="order-data">
            <TitleTip />

            <van-grid :column-num="3">
                <van-grid-item v-for="value in 6" :key="value">
                    <text> 我的订单 </text>
                    <text>我的订单</text>
                    <text>30</text>
                </van-grid-item>
            </van-grid>
        </view>

        <view class="to-do-list h5-content">
            <van-image height="0.8rem" width="4rem" :src="toDoList" />
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-cell v-for="item in 4" :key="item">
                    <view class="items-info">
                        您有一条费用待确认
                        <text>查看更多</text>
                    </view>
                </van-cell>
            </van-list>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import noticeImg from '@/static/index/notice.png'
import toDoList from '@/static/index/to_do_list.png'
import SearchIpt from '@/components/SearchIpt/index'
import TitleTip from '@/components/TitleTip/index'
import { onLoad } from '@dcloudio/uni-app'
const showPopover = ref(false)
const activeUser = ref('出租方')
const loading = ref(false)
const finished = ref(false)
const userActions = ref([
    { text: '出租方', userType: 1 },
    { text: '承租方', userType: 2 },
])
const onUserSelect = (e) => {
    activeUser.value = e.text
    uni.setTabBarItem({
        index: 2,
        visible: e.userType == 1 ? false : true,
    })
}

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

onLoad(() => {
    finished.value = true
})
</script>

<style lang="scss" scoped>
.index-container {
    .index-header {
        padding: 5px 20px 30px;
        box-sizing: border-box;
        background: linear-gradient(to bottom, #6caf97, #78b0a9, #b8d0cf);
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;

        .user-name {
            text-align: center;
            padding: 16px 0;
            font-size: 16px;
        }

        .notice-box {
            display: flex;
            align-items: center;
            padding: 0 4px;
            background-color: #bcd7d4;
            border-radius: 6px;

            view {
                flex: 1;
            }

            .van-notice-bar__left-icon,
            .van-notice-bar__right-icon {
                color: #df3939;
            }
        }

        .search-ipt {
            margin-top: 10px;
            .van-field {
                width: 100%;
                padding: 0;
                height: 30px;
                line-height: 30px;
                border: 1px solid #22ab9b;
                background-color: #fff;
                border-radius: 18px;
                padding-left: 18px;
            }
        }
    }

    .order-data {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .to-do-list {
        margin-top: 10px;

        .items-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #333;
            & text:first-child {
                color: #0292f9;
            }
        }
    }
}
</style>