需求详情页面完善

This commit is contained in:
BianLzhaoMin 2024-12-20 21:37:18 +08:00
parent ef77d23cec
commit 0f1d2fb3d8
10 changed files with 425 additions and 95 deletions

View File

@ -4,7 +4,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" <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 /> <van-nav-bar safe-area-inset-top />
<!-- 开启底部安全区适配 --> <!-- 开启底部安全区适配 -->

View File

@ -12,7 +12,7 @@ onShow(() => {})
page { page {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 16px;
background-color: $uni-bg-color-grey; background-color: $uni-bg-color-grey;
} }

View File

@ -71,5 +71,11 @@
"uniStatistics" : { "uniStatistics" : {
"enable" : false "enable" : false
}, },
"vueVersion": "3" "vueVersion" : "3",
"h5" : {
"router" : {
"base" : "/h5/",
"mode" : "history"
}
}
} }

View File

@ -28,6 +28,13 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
//
{
"path": "pages/demand-details/index",
"style": {
"navigationStyle": "custom"
}
},
// //
{ {
"path": "pages/cart/index", "path": "pages/cart/index",

View File

@ -443,7 +443,6 @@ const getActionBarHeight = () => {
.select('.van-safe-area-bottom') .select('.van-safe-area-bottom')
.boundingClientRect((data) => { .boundingClientRect((data) => {
if (data) { if (data) {
console.log(data, '底部高度--')
actionBarHeight.value = data.height actionBarHeight.value = data.height
} }
}) })

View File

@ -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>

View File

@ -107,11 +107,14 @@
</van-form> </van-form>
<van-form style="margin: 10px 0"> <van-form style="margin: 10px 0">
<van-cell-group inset> <view style="margin: 16px">
<van-button icon="plus" type="primary" size="mini">添加需求描述</van-button> <van-button icon="plus" type="primary" size="mini" @click="onAddDemand">
</van-cell-group> 添加需求描述
</van-button>
</view>
</van-form> </van-form>
<van-form <van-form
style="margin-bottom: 10px"
:key="item.newId" :key="item.newId"
label-width="100px" label-width="100px"
v-for="(item, index) in demandDetails" v-for="(item, index) in demandDetails"
@ -125,7 +128,7 @@
<van-field <van-field
v-model="item.typeName" v-model="item.typeName"
is-link is-link
readonly name="typeName"
label="装备类目" label="装备类目"
placeholder="请选择装备类目" placeholder="请选择装备类目"
required required
@ -135,6 +138,7 @@
<van-field <van-field
label="预估数量" label="预估数量"
required required
name="leaseNum"
:rules="[{ required: true, message: '请输入预估数量' }]" :rules="[{ required: true, message: '请输入预估数量' }]"
> >
<template #input> <template #input>
@ -152,11 +156,23 @@
<van-uploader v-model="item.fileInfoList" /> <van-uploader v-model="item.fileInfoList" />
</template> </template>
</van-field> </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-cell-group>
</van-form> </van-form>
<van-form style="margin: 10px 0"> <van-form style="margin: 10px 0">
<van-cell-group inset> <view style="margin: 16px">
<van-button <van-button
type="primary" type="primary"
size="small" size="small"
@ -165,7 +181,7 @@
> >
提交 提交
</van-button> </van-button>
</van-cell-group> </view>
</van-form> </van-form>
</scroll-view> </scroll-view>
@ -252,19 +268,47 @@ const demandDetails = ref([
description: '', 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) => { const validatorStartTime = (val) => {
console.log(val, '开始时间') if (val && new Date(val) >= new Date(demandForm.leaseEndTime)) {
return '租赁开始日期不能大于租赁结束日期'
} else {
return true
} }
const validatorEndTime = (val) => {
console.log(val, '结束时间')
} }
//
const validatorEndTime = (val) => {
if (val && new Date(val) <= new Date(demandForm.leaseStartTime)) {
return '租赁结束日期不能小于租赁开始日期'
} else {
return true
}
}
//
const getEquipmentTypeData = async () => { const getEquipmentTypeData = async () => {
const { data: res } = await getEquipmentTypeAPI() const { data: res } = await getEquipmentTypeAPI()
equipmentTypeList.value = res equipmentTypeList.value = res
} }
const onConfirm = () => {}
// //
const onOpenTimePopup = (type) => { const onOpenTimePopup = (type) => {
@ -278,8 +322,11 @@ const onOpenPopup = (index) => {
showEquipmentType.value = true showEquipmentType.value = true
} }
const onChangeEquipmentType = (value) => { const onChangeEquipmentType = (value) => {
demandDetails.value[equipmentOpenIndex.value].typeName = let equipmentName = ''
value.selectedOptions[value.selectedOptions.length - 1].name value.selectedOptions.forEach((e) => {
equipmentName = equipmentName + '/' + e.name
})
demandDetails.value[equipmentOpenIndex.value].typeName = equipmentName.slice(1)
demandDetails.value[equipmentOpenIndex.value].typeId = demandDetails.value[equipmentOpenIndex.value].typeId =
value.selectedOptions[value.selectedOptions.length - 1].id value.selectedOptions[value.selectedOptions.length - 1].id
demandDetails.value[equipmentOpenIndex.value].typeIds = [] demandDetails.value[equipmentOpenIndex.value].typeIds = []
@ -292,19 +339,27 @@ const onCloseEquipmentType = () => {
// //
const onSubmitDemand = async () => { const onSubmitDemand = async () => {
demandReleaseFormRef.value.validate().then(async (res) => { demandReleaseFormRef.value
.validate()
.then(async (res) => {
console.log(res, '主表单校验结果')
let isDemand = false let isDemand = false
//
for (let index = 0; index < demandDetails.value.length; index++) { for (let index = 0; index < demandDetails.value.length; index++) {
try { try {
const valid = demandDetailsFormRefList.value[index].validate() //
if (typeof valid == 'object') { const valid = await demandDetailsFormRefList.value[index].validate()
} catch (error) {
isDemand = true isDemand = true
throw new Error('表单校验失败') throw new Error('动态表单校验失败')
} }
} catch (error) {}
} }
//
if (isDemand) return if (isDemand) return
//
showConfirmDialog({ showConfirmDialog({
title: '温馨提示', title: '温馨提示',
message: '是否确定提交该需求', message: '是否确定提交该需求',
@ -321,6 +376,9 @@ const onSubmitDemand = async () => {
}) })
.catch(() => {}) .catch(() => {})
}) })
.catch((error) => {
console.log('主表单校验失败:', error.message)
})
} }
// //
@ -336,6 +394,7 @@ const onConfirmTime = (val) => {
demandForm.endTime = `${y}-${m}-${d} 23:59:59` demandForm.endTime = `${y}-${m}-${d} 23:59:59`
} }
timeValue.value = []
showPicker.value = false showPicker.value = false
} }
@ -357,6 +416,7 @@ const onConfirmArea = (val) => {
onLoad(() => { onLoad(() => {
getEquipmentTypeData() getEquipmentTypeData()
console.log(areaList, 'areaList')
}) })
</script> </script>

View File

@ -92,11 +92,15 @@
<view class="demand-items"> <view class="demand-items">
<view style="text-align: right"> <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 <van-button
type="primary" type="primary"
size="mini" size="small"
class="primary-lease" class="primary-lease"
style="margin-left: 10px"
:disabled="userCompanyId == d.publishCompany"
@click="onReceivingOrders(d.id)" @click="onReceivingOrders(d.id)"
> >
接单 接单
@ -114,6 +118,9 @@ import SearchIpt from '@/components/SearchIpt/index'
import { getLeaseDemandListAPI } from '@/services/demand/index.js' import { getLeaseDemandListAPI } from '@/services/demand/index.js'
import { acceptLeaseDemandOrderAPI } from '@/services/demand/index.js' import { acceptLeaseDemandOrderAPI } from '@/services/demand/index.js'
import { onLoad, onShow } from '@dcloudio/uni-app' import { onLoad, onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores/index.js'
const memberStore = useMemberStore()
const userCompanyId = ref()
import moment from 'moment' import moment from 'moment'
import { ref } from 'vue' import { ref } from 'vue'
const keywords = ref('发布') const keywords = ref('发布')
@ -146,20 +153,31 @@ const getLeaseDemandListData = async () => {
}) })
} }
//
const onReceivingOrders = (id) => { const onReceivingOrders = (id) => {
// showConfirmDialog({ showConfirmDialog({
// title: '', title: '温馨提示',
// message: '', message: '是否确认接单',
// }) })
// .then(async () => { .then(async () => {
// const res = await acceptLeaseDemandOrderAPI({ id }) const res = await acceptLeaseDemandOrderAPI({ id })
// if (res.code === 200) { if (res.code === 200) {
// showSuccessToast('') showSuccessToast('接单成功')
// getLeaseDemandListData() getLeaseDemandListData()
// }
// })
// .catch(() => {})
} }
})
.catch(() => {})
}
//
const onDemandDetails = () => {
uni.navigateTo({
url: '/pages/demand-details/index',
})
}
onLoad(() => {
userCompanyId.value = memberStore.userInfo.companyId
})
onShow(() => { onShow(() => {
getLeaseDemandListData() getLeaseDemandListData()
}) })

View File

@ -1,5 +1,6 @@
.primary-lease { .primary-lease {
--van-button-primary-background:#00a288; --van-button-primary-background:#00a288;
--van-button-primary-border-color:#00ad9d;
--el-color-primary-light-3:#00ad9d; --el-color-primary-light-3:#00ad9d;
--el-color-primary-dark-2:#00ad9d; --el-color-primary-dark-2:#00ad9d;
--el-color-primary-light-5:#78d3cb; --el-color-primary-light-5:#78d3cb;

View File

@ -31,7 +31,8 @@ export default defineConfig({
proxy: { proxy: {
// 在此处编写代理规则 // 在此处编写代理规则
'/api': { '/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, changeOrigin: true,
rewrite: (path) => { rewrite: (path) => {
return path.replace(/\/api/, '') return path.replace(/\/api/, '')