需求详情页面完善

2024-12-20 21:37:18 +08:00 · 2024-12-20 21:37:18 +08:00 · 0f1d2fb3d8
parent ef77d23cec
commit 0f1d2fb3d8
10 changed files with 425 additions and 95 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,10 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+
+  <!-- <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> -->
  <!-- 开启顶部安全区适配 -->
  <van-nav-bar safe-area-inset-top />
  <!-- 开启底部安全区适配 -->
--- a/src/App.vue
+++ b/src/App.vue
@ -12,7 +12,7 @@ onShow(() => {})
 page {
    width: 100%;
    height: 100%;
-    font-size: 14px;
+    font-size: 16px;
    background-color: $uni-bg-color-grey;
 }

--- a/src/manifest.json
+++ b/src/manifest.json
@ -1,31 +1,31 @@
 {
-    "name": "",
-    "appid": "",
-    "description": "",
-    "versionName": "1.0.0",
-    "versionCode": "100",
-    "transformPx": false,
+    "name" : "",
+    "appid" : "",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
    /* 5+App特有相关 */
-    "app-plus": {
-        "usingComponents": true,
-        "nvueStyleCompiler": "uni-app",
-        "compilerVersion": 3,
-        "splashscreen": {
-            "alwaysShowBeforeRender": true,
-            "waiting": true,
-            "autoclose": true,
-            "delay": 0
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
        },
-        "compatible": {
-            "ignoreVersion": true
+        "compatible" : {
+            "ignoreVersion" : true
        },
        /* 模块配置 */
-        "modules": {},
+        "modules" : {},
        /* 应用发布信息 */
-        "distribute": {
+        "distribute" : {
            /* android打包配置 */
-            "android": {
-                "permissions": [
+            "android" : {
+                "permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
@ -44,32 +44,38 @@
                ]
            },
            /* ios打包配置 */
-            "ios": {},
+            "ios" : {},
            /* SDK配置 */
-            "sdkConfigs": {}
+            "sdkConfigs" : {}
        }
    },
    /* 快应用特有相关 */
-    "quickapp": {},
+    "quickapp" : {},
    /* 小程序特有相关 */
-    "mp-weixin": {
-        "appid": "",
-        "setting": {
-            "urlCheck": false
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
        },
-        "usingComponents": true
+        "usingComponents" : true
    },
-    "mp-alipay": {
-        "usingComponents": true
+    "mp-alipay" : {
+        "usingComponents" : true
    },
-    "mp-baidu": {
-        "usingComponents": true
+    "mp-baidu" : {
+        "usingComponents" : true
    },
-    "mp-toutiao": {
-        "usingComponents": true
+    "mp-toutiao" : {
+        "usingComponents" : true
    },
-    "uniStatistics": {
-        "enable": false
+    "uniStatistics" : {
+        "enable" : false
    },
-    "vueVersion": "3"
+    "vueVersion" : "3",
+    "h5" : {
+        "router" : {
+            "base" : "/h5/",
+            "mode" : "history"
+        }
+    }
 }
--- a/src/pages.json
+++ b/src/pages.json
@ -28,6 +28,13 @@
                "navigationStyle": "custom"
            }
        },
+        // 需求详情
+        {
+            "path": "pages/demand-details/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
        // 预约车
        {
            "path": "pages/cart/index",
--- a/src/pages/cart/index.vue
+++ b/src/pages/cart/index.vue
@ -443,7 +443,6 @@ const getActionBarHeight = () => {
        .select('.van-safe-area-bottom')
        .boundingClientRect((data) => {
            if (data) {
-                console.log(data, '底部高度--')
                actionBarHeight.value = data.height
            }
        })
--- a/src/pages/demand-details/index.vue
+++ b/src/pages/demand-details/index.vue
@ -0,0 +1,235 @@
+<template>
+    <!-- 需求详情 -->
+    <view class="h5-container">
+        <Navbar :navTitle="`需求详情`" />
+
+        <scroll-view scroll-y :style="{ paddingBottom: actionBarHeight + 'px' }">
+            <view class="swiper-container">
+                <van-swipe
+                    :autoplay="5000"
+                    lazy-render
+                    :show-indicators="false"
+                    @change="onSwiperChange"
+                >
+                    <van-swipe-item v-for="image in images" :key="image.id">
+                        <van-image fit="cover" position="center" :src="image" />
+                    </van-swipe-item>
+                </van-swipe>
+                <view class="count-tip"> {{ activeIndex }}/{{ goodsPicCount }} </view>
+            </view>
+
+            <view class="demand-details">
+                <view class="goods-name card-style">
+                    <view class="box_1">
+                        <text style="color: #2cb0a0"> {{ deviceInfo.deviceName }} </text>
+                        <view style="color: #fff">
+                            <text class="no-bold">￥</text>
+                            <text> {{ deviceInfo.dayLeasePrice }}</text>
+                            <text class="no-bold">/天 </text>
+                        </view>
+                    </view>
+                    <view class="text-right">
+                        {{ deviceInfo.personPhone }} <van-icon name="phone-o"
+                    /></view>
+                    <view class="text-right">
+                        <text> 发布时间：{{ deviceInfo.createTime?.slice(0, 10) }} </text>
+                        <text> 更新时间：{{ deviceInfo.updateTime?.slice(0, 10) }}</text>
+                        <text> 浏览次数：{{ deviceInfo.searchNum }} </text>
+                    </view>
+                </view>
+
+                <view class="card-style goods-company">
+                    <h4>安徽送变电公司</h4>
+                    <view>
+                        <text> 入驻时间：{{ deviceInfo.companyCreateTime }} </text>
+                        <text> 上架数量：{{ deviceInfo.devUapNum }} </text>
+                        <text> 访问量：{{ deviceInfo.companyVisitNum }} </text>
+                    </view>
+                    <view>
+                        <van-icon name="location-o" />
+                        <text> 合肥市 </text>
+                    </view>
+                </view>
+
+                <view class="card-style demand-list">
+                    <view>
+                        <text> 1 </text>
+                        <text> 装备 </text>
+                        <text> 1 </text>
+                    </view>
+                    <view>
+                        <text>装备类目：</text>
+                        <text>预估数量：</text>
+                    </view>
+
+                    <van-grid style="margin-top: 10px" :gutter="6" :column-num="2">
+                        <van-grid-item v-for="value in 8" :key="value">
+                            <van-image
+                                fit="cover"
+                                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                            />
+                        </van-grid-item>
+                    </van-grid>
+                </view>
+
+                <view class="card-style order-taking">
+                    <view class="order-taking-th">
+                        <view style="width: 20%">接单人</view>
+                        <view style="width: 40%">接单联系电话</view>
+                        <view style="width: 30%">接单公司</view>
+                        <view style="width: 30%"> 接单时间 </view>
+                    </view>
+                    <view class="order-taking-td">
+                        <view style="width: 20%">接单人</view>
+                        <view style="width: 40%">接单联系电话</view>
+                        <view style="width: 30%">接单公司</view>
+                        <view style="width: 30%"> 接单时间 </view>
+                    </view>
+                    <view class="order-taking-td">
+                        <view style="width: 20%">接单人</view>
+                        <view style="width: 40%">接单联系电话</view>
+                        <view style="width: 30%">接单公司</view>
+                        <view style="width: 30%"> 接单时间 </view>
+                    </view>
+                </view>
+            </view>
+
+            <van-action-bar>
+                <van-action-bar-icon icon="chat-o" text="在线聊" />
+                <van-action-bar-button text="立即接单" color="#22ab9b" @click="onReceivingOrders" />
+            </van-action-bar>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import Navbar from '@/components/Navbar/index'
+import { onLoad } from '@dcloudio/uni-app'
+import { nextTick, ref } from 'vue'
+const activeIndex = ref(1)
+const goodsPicCount = ref(2)
+const deviceInfo = ref({})
+const actionBarHeight = ref(0)
+const images = ref([
+    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
+    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
+])
+const onSwiperChange = (e) => {
+    activeIndex.value = e + 1
+}
+const onReceivingOrders = () => {}
+
+// 获取底部操作栏高度 适配底部内容
+const getActionBarHeight = () => {
+    const query = uni.createSelectorQuery().in(this)
+    query
+        .select('.van-action-bar')
+        .boundingClientRect((data) => {
+            if (data) {
+                actionBarHeight.value = data.height
+            }
+        })
+        .exec()
+}
+
+onLoad(() => {
+    nextTick(() => {
+        getActionBarHeight()
+    })
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.van-nav-bar .van-icon) {
+    color: #333 !important;
+}
+.swiper-container {
+    position: relative !important;
+    .count-tip {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        padding: 2px 8px;
+        border-radius: 2px;
+        background-color: #bcbcbc;
+        color: #fff;
+    }
+}
+
+.demand-details {
+    padding: 10px;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #bfdfdb, #f9f9f9, #fff);
+
+    .card-style {
+        width: 97%;
+        margin: 5px auto 0;
+        border-radius: 6px;
+        padding: 8px 12px;
+        box-sizing: border-box;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+    .goods-name {
+        color: #fff;
+        background: linear-gradient(to right, #e8f4f3, #93dad1, #5fb0a5);
+        .box_1 {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 18px;
+            font-weight: bold;
+            letter-spacing: 2px;
+
+            .no-bold {
+                font-size: 13px;
+                font-weight: normal;
+            }
+        }
+
+        .text-right {
+            margin-top: 6px;
+            font-size: 12px;
+            text-align: right;
+        }
+    }
+}
+
+.goods-company text,
+.goods-details text,
+.demand-list text {
+    margin-right: 16px;
+    font-size: 13px;
+    color: #5c5b5b;
+}
+
+.goods-company view,
+.goods-details view,
+.goods-company h4 {
+    padding: 2px 0;
+}
+.order-taking .order-taking-th,
+.order-taking .order-taking-td {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    background-color: #e5f2f7;
+    font-size: 13px;
+
+    view {
+        text-align: center;
+    }
+}
+.order-taking .order-taking-td {
+    background-color: transparent !important;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+    color: #413e3e;
+}
+:deep(.van-grid-item__content) {
+    padding: 0;
+}
+:deep(.van-action-bar) {
+    z-index: 9;
+}
+</style>
--- a/src/pages/demand-release/index.vue
+++ b/src/pages/demand-release/index.vue
@ -107,11 +107,14 @@
            </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>
+                <view style="margin: 16px">
+                    <van-button icon="plus" type="primary" size="mini" @click="onAddDemand">
+                        添加需求描述
+                    </van-button>
+                </view>
            </van-form>
            <van-form
+                style="margin-bottom: 10px"
                :key="item.newId"
                label-width="100px"
                v-for="(item, index) in demandDetails"
@ -125,7 +128,7 @@
                    <van-field
                        v-model="item.typeName"
                        is-link
-                        readonly
+                        name="typeName"
                        label="装备类目"
                        placeholder="请选择装备类目"
                        required
@ -135,6 +138,7 @@
                    <van-field
                        label="预估数量"
                        required
+                        name="leaseNum"
                        :rules="[{ required: true, message: '请输入预估数量' }]"
                    >
                        <template #input>
@ -152,11 +156,23 @@
                            <van-uploader v-model="item.fileInfoList" />
                        </template>
                    </van-field>
+
+                    <view style="margin: 16px" v-if="index !== 0">
+                        <van-button
+                            icon="delete"
+                            type="danger"
+                            size="mini"
+                            style="width: 100%"
+                            @click="onDeleteDemand(index)"
+                        >
+                            移除
+                        </van-button>
+                    </view>
                </van-cell-group>
            </van-form>

            <van-form style="margin: 10px 0">
-                <van-cell-group inset>
+                <view style="margin: 16px">
                    <van-button
                        type="primary"
                        size="small"
@ -165,7 +181,7 @@
                    >
                        提交
                    </van-button>
-                </van-cell-group>
+                </view>
            </van-form>
        </scroll-view>

@ -252,19 +268,47 @@ const demandDetails = ref([
        description: '',
    },
 ])
+// 添加需求描述
+const onAddDemand = () => {
+    demandDetails.value.push({
+        newId: Date.now(),
+        typeIds: [],
+        typeId: '',
+        typeName: '',
+        leaseNum: 1,
+        fileInfoList: [],
+        description: '',
+    })
+}

+// 移除
+const onDeleteDemand = (index) => {
+    demandDetails.value.splice(index, 1)
+}
+
+// 校验租赁开始日期
 const validatorStartTime = (val) => {
-    console.log(val, '开始时间')
-}
-const validatorEndTime = (val) => {
-    console.log(val, '结束时间')
+    if (val && new Date(val) >= new Date(demandForm.leaseEndTime)) {
+        return '租赁开始日期不能大于租赁结束日期'
+    } else {
+        return true
+    }
 }

+// 校验租赁结束日期
+const validatorEndTime = (val) => {
+    if (val && new Date(val) <= new Date(demandForm.leaseStartTime)) {
+        return '租赁结束日期不能小于租赁开始日期'
+    } else {
+        return true
+    }
+}
+
+// 获取装备类目
 const getEquipmentTypeData = async () => {
    const { data: res } = await getEquipmentTypeAPI()
    equipmentTypeList.value = res
 }
-const onConfirm = () => {}

 // 打开日期选择框
 const onOpenTimePopup = (type) => {
@ -278,8 +322,11 @@ const onOpenPopup = (index) => {
    showEquipmentType.value = true
 }
 const onChangeEquipmentType = (value) => {
-    demandDetails.value[equipmentOpenIndex.value].typeName =
-        value.selectedOptions[value.selectedOptions.length - 1].name
+    let equipmentName = ''
+    value.selectedOptions.forEach((e) => {
+        equipmentName = equipmentName + '/' + e.name
+    })
+    demandDetails.value[equipmentOpenIndex.value].typeName = equipmentName.slice(1)
    demandDetails.value[equipmentOpenIndex.value].typeId =
        value.selectedOptions[value.selectedOptions.length - 1].id
    demandDetails.value[equipmentOpenIndex.value].typeIds = []
@ -292,35 +339,46 @@ const onCloseEquipmentType = () => {

 // 提交
 const onSubmitDemand = async () => {
-    demandReleaseFormRef.value.validate().then(async (res) => {
-        let isDemand = false
-        for (let index = 0; index < demandDetails.value.length; index++) {
-            try {
-                const valid = demandDetailsFormRefList.value[index].validate()
-                if (typeof valid == 'object') {
-                    isDemand = true
-                    throw new Error('表单校验失败')
-                }
-            } catch (error) {}
-        }
+    demandReleaseFormRef.value
+        .validate()
+        .then(async (res) => {
+            console.log(res, '主表单校验结果')
+            let isDemand = false

-        if (isDemand) return
-        showConfirmDialog({
-            title: '温馨提示',
-            message: '是否确定提交该需求',
-        })
-            .then(async () => {
-                demandForm.detailsList = demandDetails.value
-                const res = await addLeaseInfoAPI(demandForm)
-                if (res.code === 200) {
-                    showSuccessToast('提交成功')
-                    setTimeout(() => {
-                        uni.navigateBack()
-                    }, 500)
+            // 校验动态表单列表
+            for (let index = 0; index < demandDetails.value.length; index++) {
+                try {
+                    // 等待每个动态表单的校验结果
+                    const valid = await demandDetailsFormRefList.value[index].validate()
+                } catch (error) {
+                    isDemand = true
+                    throw new Error('动态表单校验失败')
                }
+            }
+
+            // 如果主表单或动态表单校验不通过，终止提交
+            if (isDemand) return
+
+            // 如果校验通过，弹出确认对话框
+            showConfirmDialog({
+                title: '温馨提示',
+                message: '是否确定提交该需求',
            })
-            .catch(() => {})
-    })
+                .then(async () => {
+                    demandForm.detailsList = demandDetails.value
+                    const res = await addLeaseInfoAPI(demandForm)
+                    if (res.code === 200) {
+                        showSuccessToast('提交成功')
+                        setTimeout(() => {
+                            uni.navigateBack()
+                        }, 500)
+                    }
+                })
+                .catch(() => {})
+        })
+        .catch((error) => {
+            console.log('主表单校验失败:', error.message)
+        })
 }

 // 日期确定按钮
@ -336,6 +394,7 @@ const onConfirmTime = (val) => {
        demandForm.endTime = `${y}-${m}-${d} 23:59:59`
    }

+    timeValue.value = []
    showPicker.value = false
 }

@ -357,6 +416,7 @@ const onConfirmArea = (val) => {

 onLoad(() => {
    getEquipmentTypeData()
+    console.log(areaList, 'areaList')
 })
 </script>

--- a/src/pages/lease-demand/index.vue
+++ b/src/pages/lease-demand/index.vue
@ -92,11 +92,15 @@

                    <view class="demand-items">
                        <view style="text-align: right">
-                            <van-button type="success" size="mini">需求详情</van-button>
+                            <van-button type="success" size="small" @click="onDemandDetails"
+                                >需求详情</van-button
+                            >
                            <van-button
                                type="primary"
-                                size="mini"
+                                size="small"
                                class="primary-lease"
+                                style="margin-left: 10px"
+                                :disabled="userCompanyId == d.publishCompany"
                                @click="onReceivingOrders(d.id)"
                            >
                                接单
@ -114,6 +118,9 @@ import SearchIpt from '@/components/SearchIpt/index'
 import { getLeaseDemandListAPI } from '@/services/demand/index.js'
 import { acceptLeaseDemandOrderAPI } from '@/services/demand/index.js'
 import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useMemberStore } from '@/stores/index.js'
+const memberStore = useMemberStore()
+const userCompanyId = ref()
 import moment from 'moment'
 import { ref } from 'vue'
 const keywords = ref('发布')
@ -146,20 +153,31 @@ const getLeaseDemandListData = async () => {
    })
 }

+// 接单
 const onReceivingOrders = (id) => {
-    // showConfirmDialog({
-    //     title: '温馨提示',
-    //     message: '是否确认接单',
-    // })
-    //     .then(async () => {
-    //         const res = await acceptLeaseDemandOrderAPI({ id })
-    //         if (res.code === 200) {
-    //             showSuccessToast('接单成功')
-    //             getLeaseDemandListData()
-    //         }
-    //     })
-    //     .catch(() => {})
+    showConfirmDialog({
+        title: '温馨提示',
+        message: '是否确认接单',
+    })
+        .then(async () => {
+            const res = await acceptLeaseDemandOrderAPI({ id })
+            if (res.code === 200) {
+                showSuccessToast('接单成功')
+                getLeaseDemandListData()
+            }
+        })
+        .catch(() => {})
 }
+
+// 需求详情
+const onDemandDetails = () => {
+    uni.navigateTo({
+        url: '/pages/demand-details/index',
+    })
+}
+onLoad(() => {
+    userCompanyId.value = memberStore.userInfo.companyId
+})
 onShow(() => {
    getLeaseDemandListData()
 })
--- a/src/style/vant.scss
+++ b/src/style/vant.scss
@ -1,5 +1,6 @@
 .primary-lease {
    --van-button-primary-background:#00a288;
+    --van-button-primary-border-color:#00ad9d;
    --el-color-primary-light-3:#00ad9d;
    --el-color-primary-dark-2:#00ad9d;
    --el-color-primary-light-5:#78d3cb;
--- a/vite.config.js
+++ b/vite.config.js
@ -31,7 +31,8 @@ export default defineConfig({
        proxy: {
            // 在此处编写代理规则
            '/api': {
-                target: 'ttp://192.168.0.244:28580',
+                target: 'http://36.33.26.201:17788/proxyApi',
+                // target: 'http://192.168.0.244:28580',
                changeOrigin: true,
                rewrite: (path) => {
                    return path.replace(/\/api/, '')