需求大厅装备大厅需求发布等页面功能完善

2024-12-19 18:25:30 +08:00 · 2024-12-19 18:25:30 +08:00 · eabd11b777
parent 2d2244ab55
commit eabd11b777
29 changed files with 1359 additions and 165 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -23,8 +23,10 @@
                "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
                "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
                "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+                "@vant/area-data": "^2.0.0",
                "less": "^4.2.1",
                "less-loader": "^12.2.0",
+                "moment": "^2.30.1",
                "pinia": "^2.3.0",
                "pinia-plugin-persistedstate": "^4.1.3",
                "vant": "^4.9.10",
@ -4867,6 +4869,12 @@
            "license": "MIT",
            "peer": true
        },
+        "node_modules/@vant/area-data": {
+            "version": "2.0.0",
+            "resolved": "https://repo.huaweicloud.com/repository/npm/@vant/area-data/-/area-data-2.0.0.tgz",
+            "integrity": "sha512-zgP4AA8z09S9QTNgVCCHo9cHjcybrv22RJDYPjuCkecn4SB98T5EoPQh2TwqbQXmUhbaOGgiZGy3OUaUxnY7qg==",
+            "license": "MIT"
+        },
        "node_modules/@vant/auto-import-resolver": {
            "version": "1.2.1",
            "resolved": "https://repo.huaweicloud.com/repository/npm/@vant/auto-import-resolver/-/auto-import-resolver-1.2.1.tgz",
@ -9820,6 +9828,15 @@
            "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
            "license": "MIT"
        },
+        "node_modules/moment": {
+            "version": "2.30.1",
+            "resolved": "https://repo.huaweicloud.com/repository/npm/moment/-/moment-2.30.1.tgz",
+            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+            "license": "MIT",
+            "engines": {
+                "node": "*"
+            }
+        },
        "node_modules/ms": {
            "version": "2.1.3",
            "resolved": "https://repo.huaweicloud.com/repository/npm/ms/-/ms-2.1.3.tgz",
--- a/package.json
+++ b/package.json
@ -57,8 +57,10 @@
        "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
        "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
        "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+        "@vant/area-data": "^2.0.0",
        "less": "^4.2.1",
        "less-loader": "^12.2.0",
+        "moment": "^2.30.1",
        "pinia": "^2.3.0",
        "pinia-plugin-persistedstate": "^4.1.3",
        "vant": "^4.9.10",
--- a/src/App.vue
+++ b/src/App.vue
@ -32,8 +32,11 @@ scroll-view {
    height: 100%;
    overflow: hidden;
 }
-.van-nav-bar__content {
-    background-color: $uni-navbar-bg-color;
+:deep(.van-nav-bar__content) {
+    background-color: #75aea4;
+    .van-nav-bar__text {
+        color: #333;
+    }
 }

 .ellipsis {
--- a/src/components/Navbar/index.vue
+++ b/src/components/Navbar/index.vue
@ -0,0 +1,23 @@
+<template>
+    <van-nav-bar :title="navTitle" left-text="返回" left-arrow @click-left="onClickLeft" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+defineProps({
+    navTitle: {
+        type: String,
+        default: () => '',
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.van-nav-bar .van-icon),
+:deep(.van-nav-bar__title) {
+    color: #333 !important;
+}
+</style>
--- a/src/components/SearchIpt/index.vue
+++ b/src/components/SearchIpt/index.vue
@ -0,0 +1,115 @@
+<template>
+    <!-- 搜索框 -->
+    <view class="search-ipt">
+        <view
+            class="check-type"
+            @click="
+                () => {
+                    isSelectShow = !isSelectShow
+                }
+            "
+        >
+            {{ activeTypeName }}
+            <van-icon name="arrow-down" />
+
+            <view class="check-item" v-if="isSelectShow">
+                <view
+                    @click.stop="
+                        () => {
+                            activeTypeName = '机具'
+                            isSelectShow = !isSelectShow
+                        }
+                    "
+                >
+                    机具
+                </view>
+                <view
+                    @click.stop="
+                        () => {
+                            activeTypeName = '需求'
+                            isSelectShow = !isSelectShow
+                        }
+                    "
+                >
+                    需求
+                </view>
+            </view>
+        </view>
+        <van-field v-model="searchModelValue" />
+        <van-button square type="primary" icon="search" @click="onSearchBtn" />
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const isSelectShow = ref(false)
+const activeTypeName = ref('机具')
+const searchModelValue = ref('')
+const emits = defineEmits(['onSearchByType'])
+const onSearchBtn = () => {
+    emits('onSearchByType', searchModelValue.value, activeTypeName.value === '机具' ? 1 : 2)
+}
+</script>
+
+<style lang="scss" scoped>
+.search-ipt {
+    display: flex;
+    align-items: center;
+
+    .check-type {
+        position: relative;
+        height: 36px;
+        width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background-color: #fff;
+        border: 1px solid #22ab9b;
+        border-right: none;
+        border-top-left-radius: 18px;
+        border-bottom-left-radius: 18px;
+
+        .check-item {
+            position: absolute;
+            bottom: 0;
+            width: 70px;
+            left: 0;
+            transform: translateY(100%);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+            transition: all 0.5s;
+            background-color: #fff;
+            z-index: 9;
+            view {
+                padding: 6px;
+                font-size: 13px;
+            }
+        }
+        .check-item view:hover {
+            background-color: #00a288;
+            color: #fff;
+        }
+    }
+
+    .van-field {
+        padding: 0;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid #22ab9b;
+        // border-top-left-radius: 18px;
+        // border-bottom-left-radius: 18px;
+        padding-left: 18px;
+        border-left: none;
+    }
+
+    .van-button {
+        height: 36px;
+        width: 70px;
+        line-height: 36px;
+        background: #22ab9b;
+        border: none;
+        border-top-right-radius: 18px;
+        border-bottom-right-radius: 18px;
+        font-size: 18px;
+    }
+}
+</style>
--- a/src/components/TitleTip/index.vue
+++ b/src/components/TitleTip/index.vue
@ -0,0 +1,29 @@
+<template>
+    <!-- 标题 -->
+    <view class="title-tip">
+        <view></view>
+        <view> 订单数据 </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.title-tip {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+}
+.title-tip view:first-child {
+    width: 5px;
+    height: 18px;
+    background-color: $el-color-primary;
+    margin-right: 6px;
+}
+
+.title-tip view {
+    color: $el-color-primary;
+}
+</style>
--- a/src/pages.json
+++ b/src/pages.json
@ -7,16 +7,25 @@
                "navigationBarTitleText": "登录"
            }
        },
+        // 首页
        {
            "path": "pages/index/index",
            "style": {
-                "navigationBarTitleText": "首页"
+                "navigationStyle": "custom"
            }
        },
+        // 租赁需求大厅
        {
            "path": "pages/lease-demand/index",
            "style": {
-                "navigationBarTitleText": "租赁需求"
+                "navigationStyle": "custom"
+            }
+        },
+        // 需求发布
+        {
+            "path": "pages/demand-release/index",
+            "style": {
+                "navigationStyle": "custom"
            }
        },
        {
@ -48,42 +57,56 @@
            "style": {
                "navigationBarTitleText": "订单结算"
            }
+        },
+        // 装备列表大厅
+        {
+            "path": "pages/goods-list/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
        }
    ],
-    // "tabBar": {
-    //     "color": "#2c2c2c",
-    //     "selectedColor": "#00ad9d",
-    //     "borderStyle": "black",
-    //     "backgroundColor": "#FFFFFF",
-    //     "iconWidth": "24px",
-    //     "list": [
-    //         {
-    //             "pagePath": "pages/index/index",
-    //             "text": "首页"
-    //         },
-    //         {
-    //             "pagePath": "pages/lease-demand/index",
-    //             "text": "租赁需求"
-    //         },
-    //         {
-    //             "pagePath": "pages/cart/index",
-    //             "text": "预约车"
-    //         },
-    //         {
-    //             "pagePath": "pages/message/index",
-    //             "text": "消息"
-    //         },
-    //         {
-    //             "pagePath": "pages/my/index",
-    //             "text": "我的"
-    //         }
-    //     ]
-    // },
+    "tabBar": {
+        "color": "#2c2c2c",
+        "selectedColor": "#00ad9d",
+        "borderStyle": "black",
+        "backgroundColor": "#FFFFFF",
+        "iconWidth": "24px",
+        "list": [
+            {
+                "pagePath": "pages/index/index",
+                "text": "首页",
+                "iconPath": "static/tab-bar/home_sel.png"
+            },
+            {
+                "pagePath": "pages/lease-demand/index",
+                "text": "租赁需求",
+                "iconPath": "static/tab-bar/lease.png",
+                "selectedIconPath": "static/tab-bar/lease_sel.png"
+            },
+            {
+                "pagePath": "pages/cart/index",
+                "text": "预约车",
+                "iconPath": "static/tab-bar/car.png",
+                "visible": false
+            },
+            {
+                "pagePath": "pages/message/index",
+                "text": "消息",
+                "iconPath": "static/tab-bar/message.png"
+            },
+            {
+                "pagePath": "pages/my/index",
+                "text": "我的",
+                "iconPath": "static/tab-bar/user.png",
+                "selectedIconPath": "static/tab-bar/user_sel.png"
+            }
+        ]
+    },
    "globalStyle": {
        "navigationBarTextStyle": "#fff",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#00a288",
-        "backgroundColor": "#00a288",
-        "navigationStyle": "custom"
+        "backgroundColor": "#00a288"
    }
 }
--- a/src/pages/demand-release/index.vue
+++ b/src/pages/demand-release/index.vue
@ -0,0 +1,312 @@
+<template>
+    <!-- 需求发布 -->
+
+    <view class="h5-container">
+        <Navbar :navTitle="`需求发布`" />
+        <view class="demand-release h5-content">
+            <view class="demand-bg"></view>
+            <!-- <van-image height="0.8rem" width="4rem" :src="noticeImg" />  -->
+        </view>
+
+        <scroll-view scroll-y class="scroll-item">
+            <van-form>
+                <van-cell-group inset>
+                    <van-field
+                        v-model="demandForm.leaseName"
+                        placeholder="请输入需求名称"
+                        label="需求名称"
+                        :rules="[{ message: '请输入需求名称' }]"
+                    />
+
+                    <van-field
+                        v-model="areaName"
+                        is-link
+                        readonly
+                        name="area"
+                        label="项目所在地"
+                        placeholder="点击选择省市区"
+                        :rules="[{ message: '请选择省市区' }]"
+                        @click="showArea = true"
+                    />
+
+                    <van-field
+                        v-model="demandForm.address"
+                        name="validatorMessage"
+                        placeholder="请输入详细地址"
+                        label="详细地址"
+                        :rules="[{ message: '请输入详细地址' }]"
+                    />
+
+                    <van-field
+                        v-model="demandForm.person"
+                        placeholder="请输入联系人"
+                        label="联系人"
+                        :rules="[{ message: '请输入正确内容' }]"
+                    />
+                    <van-field
+                        v-model="demandForm.personPhone"
+                        placeholder="请输入联系电话"
+                        label="联系电话"
+                        :rules="[{ message: '请输入正确内容' }]"
+                    />
+                    <van-field
+                        v-model="demandForm.leaseStartTime"
+                        is-link
+                        readonly
+                        name="datePicker"
+                        label="租赁开始日期"
+                        placeholder="点击选择时间"
+                        @click="onOpenTimePopup(1)"
+                    />
+                    <van-field
+                        v-model="demandForm.leaseEndTime"
+                        is-link
+                        readonly
+                        name="datePicker"
+                        label="租赁结束日期"
+                        placeholder="点击选择时间"
+                        @click="onOpenTimePopup(2)"
+                    />
+                    <van-field
+                        v-model="demandForm.endTime"
+                        is-link
+                        readonly
+                        name="datePicker"
+                        label="需求截止日期"
+                        placeholder="点击选择时间"
+                        @click="onOpenTimePopup(3)"
+                    />
+                    <van-field
+                        v-model="demandForm.description"
+                        placeholder="请输入需求描述"
+                        label="需求描述"
+                        :rules="[{ message: '请输入正确内容' }]"
+                    />
+                </van-cell-group>
+            </van-form>
+
+            <van-form style="margin: 10px 0">
+                <van-cell-group inset>
+                    <van-button icon="plus" type="primary" size="mini">添加需求描述</van-button>
+                </van-cell-group>
+            </van-form>
+            <van-form v-for="(item, index) in demandDetails" :key="item.newId">
+                <van-cell-group inset>
+                    <van-field
+                        v-model="item.typeName"
+                        is-link
+                        readonly
+                        label="地区"
+                        placeholder="请选择装备类目"
+                        @click="onOpenPopup(index)"
+                    />
+                    <van-field label="预估数量">
+                        <template #input>
+                            <van-stepper v-model="item.leaseNum" />
+                        </template>
+                    </van-field>
+                    <van-field
+                        v-model="item.description"
+                        name="密码"
+                        label="装备描述"
+                        placeholder="请输入装备描述"
+                        :rules="[{ required: true, message: '请填写装备描述' }]"
+                    />
+                    <van-field name="uploader" label="参考图片/样式">
+                        <template #input>
+                            <van-uploader v-model="item.fileInfoList" />
+                        </template>
+                    </van-field>
+                </van-cell-group>
+            </van-form>
+
+            <van-form style="margin: 10px 0">
+                <van-cell-group inset>
+                    <van-button
+                        type="primary"
+                        size="small"
+                        style="width: 100%"
+                        @click="onSubmitDemand"
+                    >
+                        提交
+                    </van-button>
+                </van-cell-group>
+            </van-form>
+        </scroll-view>
+
+        <van-popup v-model:show="showArea" destroy-on-close position="bottom">
+            <van-area
+                :area-list="areaList"
+                v-model="areaListValue"
+                @confirm="onConfirmArea"
+                @cancel="showArea = false"
+            />
+        </van-popup>
+        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
+            <van-date-picker
+                v-model="timeValue"
+                @confirm="onConfirmTime"
+                @cancel="showPicker = false"
+            />
+        </van-popup>
+        <van-popup v-model:show="showEquipmentType" round position="bottom">
+            <van-cascader
+                v-model="equipmentTypeValue"
+                title="请选择装备类目"
+                :options="equipmentTypeList"
+                :field-names="fieldNames"
+                @close="onCloseEquipmentType"
+                @change="onChangeEquipmentType"
+            />
+        </van-popup>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { areaList } from '@vant/area-data'
+import { getEquipmentTypeAPI } from '@/services/common/index.js'
+import { addLeaseInfoAPI } from '@/services/demand/index.js'
+import Navbar from '@/components/Navbar/index'
+import { onLoad } from '@dcloudio/uni-app'
+const showArea = ref(false)
+const showPicker = ref(false)
+const showEquipmentType = ref(false)
+const equipmentTypeList = ref([])
+const equipmentTypeValue = ref()
+const equipmentOpenIndex = ref(0)
+const areaListValue = ref()
+const areaName = ref('')
+const timeType = ref(0)
+const timeValue = ref([])
+const fieldNames = ref({
+    text: 'name',
+    value: 'id',
+})
+const demandForm = reactive({
+    leaseName: '',
+    person: '',
+    personPhone: '',
+    leaseStartTime: '',
+    leaseEndTime: '',
+    endTime: '',
+    description: '',
+    isSubmit: true,
+    areaCode: '',
+    cityCode: '',
+    provinceCode: '',
+    address: '',
+    detailsList: [],
+})
+const demandDetails = ref([
+    {
+        newId: Date.now(),
+        typeIds: [],
+        typeId: '',
+        typeName: '',
+        leaseNum: 1,
+        fileInfoList: [],
+        description: '',
+    },
+])
+
+const getEquipmentTypeData = async () => {
+    const { data: res } = await getEquipmentTypeAPI()
+    equipmentTypeList.value = res
+}
+const onConfirm = () => {}
+
+// 打开日期选择框
+const onOpenTimePopup = (type) => {
+    timeType.value = type
+    showPicker.value = true
+}
+
+// 打开装备类目选择框
+const onOpenPopup = (index) => {
+    equipmentOpenIndex.value = index
+    showEquipmentType.value = true
+}
+const onChangeEquipmentType = (value) => {
+    demandDetails.value[equipmentOpenIndex.value].typeName =
+        value.selectedOptions[value.selectedOptions.length - 1].name
+    demandDetails.value[equipmentOpenIndex.value].typeId =
+        value.selectedOptions[value.selectedOptions.length - 1].id
+    demandDetails.value[equipmentOpenIndex.value].typeIds = []
+    demandDetails.value[equipmentOpenIndex.value].typeIds = value.selectedOptions.map((e) => e.id)
+}
+
+const onCloseEquipmentType = () => {
+    showEquipmentType.value = false
+}
+
+// 提交
+const onSubmitDemand = async () => {
+    demandForm.detailsList = demandDetails.value
+    const res = await addLeaseInfoAPI(demandForm)
+    if (res.code === 200) {
+        showSuccessToast('提交成功')
+        setTimeout(() => {
+            uni.navigateBack()
+        }, 500)
+    }
+}
+
+// 日期确定按钮
+const onConfirmTime = (val) => {
+    const [y, m, d] = val.selectedValues
+    if (timeType.value === 1) {
+        demandForm.leaseStartTime = `${y}-${m}-${d} 00:00:00`
+    }
+    if (timeType.value === 2) {
+        demandForm.leaseEndTime = `${y}-${m}-${d} 23:59:59`
+    }
+    if (timeType.value === 3) {
+        demandForm.endTime = `${y}-${m}-${d} 23:59:59`
+    }
+
+    showPicker.value = false
+}
+
+// 省市区确定按钮
+const onConfirmArea = (val) => {
+    areaName.value = ''
+    val.selectedOptions.forEach((e) => {
+        areaName.value = areaName.value + '/' + e.text
+    })
+    areaName.value = areaName.value.slice(1)
+    const [provinceCode, cityCode, areaCode] = val.selectedValues
+    Object.assign(demandForm, {
+        provinceCode,
+        cityCode,
+        areaCode,
+    })
+    showArea.value = false
+}
+
+onLoad(() => {
+    getEquipmentTypeData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.van-nav-bar .van-icon) {
+    color: #333 !important;
+}
+
+.demand-release {
+    background-color: #bde2d2;
+
+    .demand-bg {
+        width: 100%;
+        height: 120px;
+        background: url('@/static/demand/header_bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.scroll-item {
+    margin-top: 10px;
+    padding-bottom: 10px;
+}
+</style>
--- a/src/pages/goods-details/components/details-model.vue
+++ b/src/pages/goods-details/components/details-model.vue
@ -89,7 +89,7 @@ const getDeviceDetailsData = async () => {
    console.log(res, '装备详情')
 }
 const onRentNow = () => {
-    uni.navigateTo({ url: '/pages/order/index' })
+    uni.navigateTo({ url: `/pages/order/index?id=${deviceInfo.value.maId}` })
 }

 onLoad(() => {
--- a/src/pages/goods-list/index.vue
+++ b/src/pages/goods-list/index.vue
@ -0,0 +1,137 @@
+<template>
+    <!-- 装备共享大厅 -->
+    <view class="h5-container">
+        <van-nav-bar title="装备共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" />
+
+        <!-- <view class="search-index flex-row-start">
+            <van-field placeholder="搜索" />
+            <van-button square type="primary" icon="search" />
+        </view> -->
+        <view class="h5-content" style="padding: 20px">
+            <SearchIpt @onSearchByType="onSearchByType" />
+        </view>
+
+        <view class="goods-items">
+            <view class="filter-box">
+                <view class="flex-row-start">
+                    <view>
+                        使用年限
+                        <van-icon name="sort" />
+                    </view>
+                    <view>
+                        租金
+                        <van-icon name="sort" />
+                    </view>
+                    <view>
+                        上架时间
+                        <van-icon name="sort" />
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
+            <van-grid :column-num="2" :border="false">
+                <van-grid-item
+                    v-for="(item, index) in deviceList"
+                    :key="index"
+                    @click="onViewGoodsDetails(item)"
+                >
+                    <GoodsItems :goodsInfo="item" />
+                </van-grid-item>
+            </van-grid>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import GoodsItems from '@/components/GoodsItems'
+import SearchIpt from '@/components/SearchIpt/index'
+import { getDeviceListAPI } from '@/services/index/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+const active = ref('')
+const deviceList = ref([])
+const onScrollTolower = () => {
+    console.log('滚动触底')
+}
+const getDeviceListData = async () => {
+    const { data: result } = await getDeviceListAPI({})
+    deviceList.value = result.rows
+    console.log(res, '装备列表')
+}
+const onViewGoodsDetails = (item) => {
+    uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
+}
+
+const onSearchByType = (value, type) => {
+    /**
+     *  @type 1 查询机具 2 查询需求
+     *  @value 搜索框值
+     */
+    if (type === 2) {
+        uni.switchTab({
+            url: `/pages/lease-demand/index?value=${value}`,
+        })
+    } else {
+        getDeviceListData()
+    }
+}
+const onClickLeft = () => {
+    history.back()
+}
+onLoad(() => {
+    getDeviceListData()
+})
+</script>
+
+<style lang="scss" scoped>
+.search-index {
+    height: 80px;
+    justify-content: center;
+
+    .van-field {
+        width: 65%;
+        padding: 0;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid #22ab9b;
+        border-top-left-radius: 18px;
+        border-bottom-left-radius: 18px;
+        padding-left: 18px;
+    }
+
+    .van-button {
+        height: 36px;
+        width: 70px;
+        line-height: 36px;
+        background: #22ab9b;
+        border: none;
+        border-top-right-radius: 18px;
+        border-bottom-right-radius: 18px;
+        font-size: 18px;
+    }
+}
+
+.goods-items {
+    padding: 10px;
+    box-sizing: border-box;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: $uni-bg-color;
+}
+
+.flex-row-start view {
+    margin-right: 6px;
+}
+
+.van-tabbar {
+    height: 70px;
+}
+.scroll-item {
+    background-color: $uni-bg-color;
+    .van-grid-item {
+        border: none;
+    }
+}
+</style>
--- a/src/pages/index/index-old.vue
+++ b/src/pages/index/index-old.vue
@ -0,0 +1,115 @@
+<template>
+    <!-- 首页 -->
+    <view class="h5-container">
+        <van-nav-bar title="机械化装备平台" />
+        <view class="search-index flex-row-start">
+            <van-field placeholder="搜索" />
+            <van-button square type="primary" icon="search" />
+        </view>
+
+        <view class="goods-items">
+            <view class="filter-box">
+                <view class="flex-row-start">
+                    <view>
+                        使用年限
+                        <van-icon name="sort" />
+                    </view>
+                    <view>
+                        租金
+                        <van-icon name="sort" />
+                    </view>
+                    <view>
+                        上架时间
+                        <van-icon name="sort" />
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
+            <van-grid :column-num="2" :border="false">
+                <van-grid-item
+                    v-for="(item, index) in deviceList"
+                    :key="index"
+                    @click="onViewGoodsDetails(item)"
+                >
+                    <GoodsItems :goodsInfo="item" />
+                </van-grid-item>
+            </van-grid>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import GoodsItems from '@/components/GoodsItems'
+import { getDeviceListAPI } from '@/services/index/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+const active = ref('')
+const deviceList = ref([])
+const onScrollTolower = () => {
+    console.log('滚动触底')
+}
+const getDeviceListData = async () => {
+    const { data: result } = await getDeviceListAPI({})
+    deviceList.value = result.rows
+    console.log(res, '装备列表')
+}
+const onViewGoodsDetails = (item) => {
+    uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
+}
+onLoad(() => {
+    getDeviceListData()
+})
+</script>
+
+<style lang="scss" scoped>
+.search-index {
+    height: 80px;
+    justify-content: center;
+
+    .van-field {
+        width: 65%;
+        padding: 0;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid #22ab9b;
+        border-top-left-radius: 18px;
+        border-bottom-left-radius: 18px;
+        padding-left: 18px;
+    }
+
+    .van-button {
+        height: 36px;
+        width: 70px;
+        line-height: 36px;
+        background: #22ab9b;
+        border: none;
+        border-top-right-radius: 18px;
+        border-bottom-right-radius: 18px;
+        font-size: 18px;
+    }
+}
+
+.goods-items {
+    padding: 10px;
+    box-sizing: border-box;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: $uni-bg-color;
+}
+
+.flex-row-start view {
+    margin-right: 6px;
+}
+
+.van-tabbar {
+    height: 70px;
+}
+.scroll-item {
+    background-color: $uni-bg-color;
+    .van-grid-item {
+        border: none;
+    }
+}
+</style>
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -1,126 +1,178 @@
 <template>
    <!-- 首页 -->
-    <view class="h5-container">
-        <van-nav-bar title="机械化装备平台" />
-        <view class="search-index flex-row-start">
-            <van-field placeholder="搜索" />
-            <van-button square type="primary" icon="search" />
-        </view>
-
-        <view class="goods-items">
-            <view class="filter-box">
+    <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-icon name="sort" />
-                    </view>
-                    <view>
-                        租金
-                        <van-icon name="sort" />
-                    </view>
-                    <view>
-                        上架时间
-                        <van-icon name="sort" />
-                    </view>
-                </view>
+                    <van-notice-bar color="#00a288" background="transparent" left-icon="volume-o">
+                        大鹏一日同风起，扶摇直上九万里
+                    </van-notice-bar>
                </view>
            </view>

-        <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
-            <van-grid :column-num="2" :border="false">
-                <van-grid-item
-                    v-for="(item, index) in deviceList"
-                    :key="index"
-                    @click="onViewGoodsDetails(item)"
-                >
-                    <GoodsItems :goodsInfo="item" />
+            <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>
-        </scroll-view>
+        </view>

-        <!-- <van-empty description="首页欢迎您" /> -->
-
-        <van-tabbar v-model="active">
-            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
-            <van-tabbar-item icon="search">租赁</van-tabbar-item>
-            <van-tabbar-item icon="friends-o">消息</van-tabbar-item>
-            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
-        </van-tabbar>
+        <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 GoodsItems from '@/components/GoodsItems'
-import { getDeviceListAPI } from '@/services/index/index.js'
-import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
-const active = ref('')
-const deviceList = ref([])
-const onScrollTolower = () => {
-    console.log('滚动触底')
+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 getDeviceListData = async () => {
-    const { data: result } = await getDeviceListAPI({})
-    deviceList.value = result.rows
-    console.log(res, '装备列表')
-}
-const onViewGoodsDetails = (item) => {
-    uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
+
+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(() => {
-    getDeviceListData()
+    finished.value = true
 })
 </script>

 <style lang="scss" scoped>
-.search-index {
-    height: 80px;
-    justify-content: center;
+.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: 65%;
+                width: 100%;
                padding: 0;
-        height: 36px;
-        line-height: 36px;
+                height: 30px;
+                line-height: 30px;
                border: 1px solid #22ab9b;
-        border-top-left-radius: 18px;
-        border-bottom-left-radius: 18px;
+                background-color: #fff;
+                border-radius: 18px;
                padding-left: 18px;
            }
-
-    .van-button {
-        height: 36px;
-        width: 70px;
-        line-height: 36px;
-        background: #22ab9b;
-        border: none;
-        border-top-right-radius: 18px;
-        border-bottom-right-radius: 18px;
-        font-size: 18px;
        }
-}
+    }

-.goods-items {
-    padding: 10px;
+    .order-data {
+        padding: 0 20px;
        box-sizing: border-box;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    background: $uni-bg-color;
-}
+    }

-.flex-row-start view {
-    margin-right: 6px;
-}
+    .to-do-list {
+        margin-top: 10px;

-.van-tabbar {
-    height: 70px;
-}
-.scroll-item {
-    background-color: $uni-bg-color;
-    padding-bottom: 70px;
-
-    .van-grid-item {
-        border: none;
+        .items-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 12px;
+            color: #333;
+            & text:first-child {
+                color: #0292f9;
+            }
+        }
    }
 }
 </style>
--- a/src/pages/lease-demand/index.vue
+++ b/src/pages/lease-demand/index.vue
@ -1,18 +1,249 @@
 <template>
-    <!-- 租赁需求 -->
-    <view class="content">
-        <van-empty description="租赁需求欢迎您" />
+    <!-- 需求共享大厅 -->
+    <view class="h5-container">
+        <van-nav-bar title="需求共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" />
+        <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 countDownTime = ref(30 * 60 * 60 * 1000)
+const onScrollTolower = () => {
+    console.log('滚动触底')
+}
+
+const onSearchByType = (value, type) => {
+    /**
+     *  @type 1 查询机具 2 查询需求
+     *  @value 搜索框值
+     */
+    if (type === 2) {
+        uni.switchTab({
+            url: `/pages/lease-demand/index?value=${value}`,
+        })
+    } else {
+        getDeviceListData()
+    }
+}
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+
+// 获取需求列表
+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>
-.content {
+<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%;
-    height: 100%;
-    text-align: center;
+        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 .van-icon),
+:deep(.van-nav-bar__title) {
+    color: #333;
 }
 </style>
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@ -56,7 +56,8 @@ const onSubmitLogin = async () => {
    if (userResult.code === 200) {
        showToast('登录成功')
        setTimeout(() => {
-            uni.navigateTo({ url: '/pages/index/index' })
+            // uni.navigateTo({ url: '/pages/index/index' })
+            uni.switchTab({ url: '/pages/index/index' })
        }, 500)
    }
 }
--- a/src/pages/message/index.vue
+++ b/src/pages/message/index.vue
@ -1,8 +1,5 @@
 <template>
    <!-- 消息 -->
-    <view class="content">
-        <van-empty description="消息欢迎您" />
-    </view>
 </template>

 <script setup>
--- a/src/pages/order/index.vue
+++ b/src/pages/order/index.vue
@ -7,52 +7,77 @@
            <text> (1) </text>
        </view>

-        <view class="order-set">
+        <view class="order-set" v-for="(item, index) in orderList" :key="index">
            <van-row>
                <van-col span="13">
                    <view class="company-box">
                        <van-image fit="cover" width="1.5rem" height="1.2rem" :src="companyImg" />
                        <view class="company-name">
-                            <view> 安徽省合肥市 </view>
+                            <view> {{ item.companyName }} </view>
                            <van-image fit="cover" height="0.5rem" :src="companyBg" />
                        </view>
                    </view>
                </van-col>
-                <van-col span="11" class="contacts"> 联系人：李世民 13656235623 </van-col>
+                <van-col span="11" class="contacts">
+                    联系人： {{ item.person }} {{ item.personPhone }}
+                </van-col>
            </van-row>

            <van-row>
                <van-col span="18">
                    <view class="items-info">
-                        <van-image fit="cover" height="4rem" width="4rem" :src="companyBg" />
+                        <van-image fit="cover" height="4rem" width="4rem" :src="item.picUrl" />
                        <view class="info">
-                            <view>牵张机</view>
-                            <view>装备编号：</view>
-                            <view>装备型号：</view>
+                            <view style="color: #000">{{ item.deviceName }}</view>
+                            <view>装备编号：{{ item.code }}</view>
+                            <view>装备型号：{{ item.typeName }}</view>
                            <view>
                                租赁金额：
-                                <text> ￥2000/天 </text>
+                                <text style="color: var(--van-submit-bar-price-color)">
+                                    ￥{{ item.dayLeasePrice }}/天
+                                </text>
                            </view>
                            <view class="items-info">
-                                开始日期
-                                <van-image fit="cover" width="1rem" height="1rem" :src="dateIcon" />
-                                结束日期
-                                <van-image fit="cover" width="1rem" height="1rem" :src="dateIcon" />
+                                {{ startTime ? startTime : '开始日期' }}
+                                <van-image
+                                    fit="cover"
+                                    width="1rem"
+                                    height="1rem"
+                                    :src="dateIcon"
+                                    @click="onSelectTime(1)"
+                                />
+                                {{ endTime ? endTime : '结束日期' }}
+                                <van-image
+                                    fit="cover"
+                                    width="1rem"
+                                    height="1rem"
+                                    :src="dateIcon"
+                                    @click="onSelectTime(2)"
+                                />
+                            </view>
+                            <view>
+                                租赁天数：
+                                {{ item.days }}
                            </view>
                        </view>
                    </view>
                </van-col>
                <van-col span="6">
-                    <van-stepper button-size="16" />
+                    <van-stepper button-size="16" :max="item.deviceCount" v-model="item.num" />
                </van-col>
            </van-row>

            <van-row style="margin-top: 14px">
                总金额：
-                <text> ￥30000 </text>
+                <view style="color: var(--van-submit-bar-price-color)">
+                    <text> ￥ </text>
+                    <text style="font-size: 16px; font-weight: bold">
+                        {{ item.num * item.dayLeasePrice * item.days }}
+                    </text>
+                </view>
            </van-row>
            <van-row style="padding: 10px 0; margin-top: 10px; border-top: 1px solid #ccc">
-                <van-checkbox-group v-model="checked" shape="square" icon-size="16px">
+                <van-checkbox-group v-model="item.checked" shape="square" icon-size="16px">
                    <van-checkbox name="1">
                        我已阅读并同意
                        <text class="protocol" @click.stop="onViewProtocol"> 《xxx公司协议》 </text>
@ -61,16 +86,24 @@
            </van-row>
        </view>

-        <!-- <van-date-picker title="选择日期" /> -->
+        <van-popup v-model:show="showBottom" position="bottom" :destroy-on-close="true">
+            <van-date-picker
+                v-model="leaseTime"
+                @confirm="onConfirm"
+                @cancel="onCancel"
+                :min-date="minDate"
+                title="选择日期"
+            />
+        </van-popup>

        <van-submit-bar
            button-color="#579d92"
-            :price="3050"
+            :price="totalPrice"
            button-text="提交"
            @submit="onSubmitOrder"
        >
            <template #default>
-                <view class="amount"> 共计一件装备 </view>
+                <view class="amount"> 共计 1 件装备 </view>
            </template>
        </van-submit-bar>
    </view>
@ -80,10 +113,68 @@
 import companyImg from '@/static/goods/company-img.png'
 import companyBg from '@/static/goods/company-bg.png'
 import dateIcon from '@/static/goods/date-icon.png'
-import { ref } from 'vue'
+import { getDeviceDetailsAPI } from '@/services/goods/index.js'
+import { computed, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import moment from 'moment'
 const checked = ref(['1'])
-const onSubmitOrder = () => {}
+const orderList = ref([])
+const showBottom = ref(false)
+const minDate = new Date(2024, 0, 1)
+const timeType = ref(0)
+const leaseTime = ref()
+const startTime = ref()
+const endTime = ref()
+const onSubmitOrder = () => {
+    orderList.value.forEach((e) => {
+        if (e.days < 1) {
+            showFailToast('请选择租期')
+            return
+        }
+        if (!e.checked.includes('1')) {
+            showFailToast('请先阅读公司协议')
+            return
+        }
+    })
+}
 const onViewProtocol = () => {}
+const onSelectTime = (type) => {
+    timeType.value = type
+    showBottom.value = true
+}
+const onConfirm = () => {
+    if (timeType.value === 1) {
+        startTime.value = leaseTime.value.join('-')
+    } else {
+        endTime.value = leaseTime.value.join('-')
+        orderList.value[0].days = moment(endTime.value).diff(startTime.value, 'day')
+    }
+    showBottom.value = false
+}
+const onCancel = () => {
+    showBottom.value = false
+}
+
+const getDeviceDetailsData = async (id) => {
+    const { data: res } = await getDeviceDetailsAPI(id)
+    const orderInfo = {
+        rentBeginTime: '',
+        rentEndTime: '',
+        days: 0,
+        num: 1,
+        checked: [''],
+        ...res,
+    }
+    orderList.value.push(orderInfo)
+}
+const totalPrice = computed(() => {
+    const item = orderList.value[0]
+    return item?.num * item?.dayLeasePrice * item?.days * 100
+})
+
+onLoad((options) => {
+    getDeviceDetailsData(options.id)
+})
 </script>

 <style lang="scss" scoped>
@ -114,7 +205,6 @@ const onViewProtocol = () => {}
 }

 .amount {
-    margin-left: 50px;
    font-size: 13px;
    color: #ccc;
 }
@ -162,7 +252,7 @@ const onViewProtocol = () => {}
        }

        & view:first-child {
-            font-size: 13px;
+            font-size: 14px;
            font-weight: bold;
        }
    }
--- a/src/services/common/index.js
+++ b/src/services/common/index.js
@ -0,0 +1,11 @@
+import { http } from '@/utils/http'
+
+/**
+ *  获取装备分类
+ */
+export const getEquipmentTypeAPI = () => {
+    return http({
+        method: 'GET',
+        url: `/material-mall/maType/getEquipmentType`,
+    })
+}
--- a/src/services/demand/index.js
+++ b/src/services/demand/index.js
@ -0,0 +1,32 @@
+import { http } from '@/utils/http'
+
+/**
+ *  需求新增接口
+ */
+export const addLeaseInfoAPI = (data) => {
+    return http({
+        method: 'POST',
+        url: `/material-mall/ma-lease/add`,
+        data,
+    })
+}
+/**
+ *  需求列表接口
+ */
+export const getLeaseDemandListAPI = (data) => {
+    return http({
+        method: 'POST',
+        url: `/material-mall/ma-lease/leaseList`,
+        data,
+    })
+}
+/**
+ *  需求接单
+ */
+export const acceptLeaseDemandOrderAPI = (data) => {
+    return http({
+        method: 'POST',
+        url: `/material-mall/ma-lease/accept`,
+        data,
+    })
+}
--- a/src/static/demand/header_bg.png
+++ b/src/static/demand/header_bg.png
--- a/src/static/index/notice.png
+++ b/src/static/index/notice.png
--- a/src/static/index/to_do_list.png
+++ b/src/static/index/to_do_list.png
--- a/src/static/tab-bar/car.png
+++ b/src/static/tab-bar/car.png
--- a/src/static/tab-bar/home_sel.png
+++ b/src/static/tab-bar/home_sel.png
--- a/src/static/tab-bar/lease.png
+++ b/src/static/tab-bar/lease.png
--- a/src/static/tab-bar/lease_sel.png
+++ b/src/static/tab-bar/lease_sel.png
--- a/src/static/tab-bar/message.png
+++ b/src/static/tab-bar/message.png
--- a/src/static/tab-bar/user.png
+++ b/src/static/tab-bar/user.png
--- a/src/static/tab-bar/user_sel.png
+++ b/src/static/tab-bar/user_sel.png
--- a/src/style/vant.scss
+++ b/src/style/vant.scss
@ -13,6 +13,10 @@
    flex-direction: column;
    background-color: $uni-bg-color-grey;
 }
+.h5-content {
+    padding: 0 10px;
+    box-sizing: border-box;
+}

 .flex-row-start {
    display: flex;