出租设备查询

src/pages.json

@@ -181,6 +181,12 @@
             "style": {
                 "navigationBarTitleText": "公告详情"
             }
+        },
+        {
+            "path": "pages/my/leaseSearch",
+            "style": {
+                "navigationStyle": "custom"
+            }
         }
     ],
     "tabBar": {

src/pages/my/index.vue

@@ -47,6 +47,12 @@
                             <text>承租订单</text>
                         </view>
                     </van-grid-item>
+                    <van-grid-item @click="handleEquipment">
+                        <view>
+                            <van-icon name="coupon" />
+                            <text>出租设备查询</text>
+                        </view>
+                    </van-grid-item>
                 </van-grid>
             </van-cell-group>
         </view>
@@ -79,6 +85,11 @@ const onJumpMyDemand = () => {
     uni.navigateTo({ url: '/pages/my-demand/index' })
 }
 
+// 出租设备查询
+const handleEquipment = () => {
+    uni.navigateTo({ url: '/pages/my/leaseSearch' })
+}
+
 onLoad(() => {
     userInfo.value = memberStore.userInfo
     userCompanyName.value = memberStore.userCompanyName

src/pages/my/leaseSearch.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="h5-container my-setting">
+        <view style="padding: 15px" class="nav-title">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text class="nav-title-text">出租设备查询</text>
+        </view>
+
+        <div>
+            <van-search
+                v-model="queryParams.keyWord"
+                placeholder="请输入搜索关键词"
+                @blur="getList"
+            />
+        </div>
+
+        <scroll-view scroll-y :style="{ height: scrollHeight + 'px' }" @scrolltolower="loadMore">
+            <div class="content" v-if="tableList.length > 0">
+                <div class="list-card" v-for="(item, index) in tableList" :key="index">
+                    <div class="list-item">
+                        <div>装备类目:</div>
+                        <div class="item-cont">
+                            {{ item.firstName }}>{{ item.secondName }}>{{ item.thirdName }}
+                        </div>
+                    </div>
+                    <div class="list-item">
+                        <div>装备名称:</div>
+                        <div class="item-cont">{{ item.deviceName }}</div>
+                    </div>
+                    <div class="list-item">
+                        <div>装备型号:</div>
+                        <div class="item-cont">{{ item.typeName }}</div>
+                    </div>
+                    <div class="list-item">
+                        <div>在租数量:</div>
+                        <div>{{ item.deviceCount }}</div>
+                    </div>
+                    <div class="list-item">
+                        <div>出租方联系人:</div>
+                        <div>{{ item.person }}</div>
+                    </div>
+                    <div class="list-item">
+                        <div>出租方联系方式:</div>
+                        <div>{{ item.personPhone }}</div>
+                    </div>
+                </div>
+
+                <!-- 加载提示 -->
+                <view v-if="loading" class="loading">加载中...</view>
+                <view v-if="noMoreData" class="loading">没有更多数据了</view>
+            </div>
+            <div v-else>
+                <div class="loading">暂无数据</div>
+            </div>
+        </scroll-view>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getLeaseDevListApi } from '@/services/index/index'
+
+const scrollHeight = uni.getSystemInfoSync().windowHeight - 54 // 50是顶部搜索框的高度
+const loading = ref(false)
+const noMoreData = ref(false)
+const total = ref(0)
+const tableList = ref([])
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 10,
+    keyWord: '',
+})
+
+onLoad(() => {
+    getList()
+})
+
+// 返回
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+
+// 获取列表数据
+const getList = async () => {
+    console.log('getList')
+    try {
+        console.log('🚀 ~ getList ~ queryParams.value:', queryParams)
+        const res = await getLeaseDevListApi(queryParams)
+        console.log('🚀 ~ getList ~ res:', res)
+        if (res.code === 200) {
+            tableList.value = res.data.rows
+            total.value = res.data.total
+            if (tableList.value.length > 0 && tableList.value.length == total.value) {
+                noMoreData.value = true
+            }
+        }
+        loading.value = false
+    } catch (error) {
+        console.log('🚀 ~ getList ~ error:', error)
+        tableList.value = []
+        loading.value = false
+    }
+}
+
+// 滚动
+const loadMore = () => {
+    console.log('loadMore')
+    if (tableList.value.length < total.value) {
+        loading.value = true
+        queryParams.pageSize += 10
+        getList()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-setting {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px 0;
+}
+.content {
+    padding: 10px;
+
+    .list-card {
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #fff;
+        border-radius: 5px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        .list-item {
+            line-height: 1.9;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-all;
+
+            .item-cont {
+                width: 70%;
+                text-align: end;
+            }
+        }
+    }
+}
+.loading {
+    text-align: center;
+    line-height: 1.9;
+}
+</style>

src/services/index/index.js

@@ -48,3 +48,12 @@ export const resetPassWordAPI = (data) => {
         data,
     })
 }
+
+// 获取出租设备列表
+export function getLeaseDevListApi(data) {
+    return http({
+        url: '/material-mall/comprehensive/getLeaseDevList',
+        method: 'get',
+        data
+    })
+}