需求大厅功能初步完善
This commit is contained in:
BianLzhaoMin
parent
078f56595f
commit
2d18d62583
|
|
@ -3,15 +3,51 @@
|
|||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export { }
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
EquipCard: typeof import('./src/components/equipCard.vue')['default']
|
||||
EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
|
||||
EquipCardNew: typeof import('./src/components/equipCardNew/index.vue')['default']
|
||||
|
|
|
|||
|
|
@ -7,13 +7,8 @@ VITE_API_URL = '/proxyApi'
|
|||
# 开发环境接口地址
|
||||
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
|
||||
|
||||
<<<<<<< HEAD
|
||||
VITE_proxyTarget = 'http://localhost:18080' # 马帅
|
||||
VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
|
||||
# VITE_proxyTarget = 'http://192.168.0.244:28580' # 马帅
|
||||
=======
|
||||
# VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
|
||||
VITE_proxyTarget = 'http://192.168.0.244:28580' # 马帅
|
||||
>>>>>>> dev-sy
|
||||
# VITE_proxyTarget = 'http://192.168.2.129:18080' # 马帅
|
||||
|
||||
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ VITE_ENV = 'production'
|
|||
VITE_BUILD_MODE = 'prod'
|
||||
|
||||
# 线上环境接口地址
|
||||
VITE_API_URL = 'https://production.com'
|
||||
VITE_API_URL = '/proxyApi'
|
||||
|
|
@ -9,6 +9,16 @@ export const getCompanyListApi = () => {
|
|||
export const getHotSearchListApi = () => {
|
||||
return get('/material-mall/maType/getHotSearch', {})
|
||||
}
|
||||
export const getLeaseListApi = (data: any = {}) => {
|
||||
return post('/material-mall/ma-lease/leaseList', data)
|
||||
}
|
||||
export const getLeaseInfoByIdApi = (data: any = {}) => {
|
||||
return get('/material-mall/ma-lease/getById', data)
|
||||
}
|
||||
// 立即接单
|
||||
export const setAcceptByIdApi = (data: any = {}) => {
|
||||
return post('/material-mall/ma-lease/accept', data)
|
||||
}
|
||||
|
||||
export const apiGetCollect = (params = {}) => {
|
||||
return post('/zlpt-equip/dev/userCollectList', params)
|
||||
|
|
|
|||
|
|
@ -131,19 +131,19 @@ const routes: Array<RouteRecordRaw> = [
|
|||
path: '/parity',
|
||||
name: 'parity',
|
||||
meta: {
|
||||
title: '寻源比价',
|
||||
title: '租赁需求大厅',
|
||||
isLogin: true,
|
||||
AuthFlag: false,
|
||||
activeName: 'parity',
|
||||
},
|
||||
redirect: '/parity/hall',
|
||||
// redirect: '/parity/hall',
|
||||
component: () => import('views/parity/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: 'hall',
|
||||
name: 'hall',
|
||||
meta: {
|
||||
title: '寻源比价大厅',
|
||||
title: '租赁需求大厅',
|
||||
isLogin: true,
|
||||
AuthFlag: false,
|
||||
activeName: 'parity',
|
||||
|
|
@ -413,7 +413,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||
},
|
||||
]
|
||||
},
|
||||
// 预约车页面
|
||||
// 预约车页面
|
||||
{
|
||||
path: '/cart',
|
||||
name: 'cart',
|
||||
|
|
@ -434,6 +434,17 @@ const routes: Array<RouteRecordRaw> = [
|
|||
keepAlive: false,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
// 需求详情页面
|
||||
{
|
||||
path: '/demand-details',
|
||||
name: 'demand-details',
|
||||
component: () => import('views/demand-details/index.vue'),
|
||||
meta: {
|
||||
title: '需求详情',
|
||||
keepAlive: false,
|
||||
AuthFlag: false
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,530 @@
|
|||
<template>
|
||||
<Header />
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ name: 'parity' }">租赁需求大厅</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>需求详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<div class="baseInfo">
|
||||
<div class="equipInfo">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<div class="name">
|
||||
{{ leaseDetails.leaseName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infoBox">
|
||||
<el-row class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
|
||||
<el-col :span="5">
|
||||
<div class="label">{{ v.label }}：</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="value">
|
||||
{{
|
||||
v.key
|
||||
.split(',')
|
||||
.map((key) => {
|
||||
return leaseDetails[key]
|
||||
})
|
||||
.join('')
|
||||
}}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="item">
|
||||
<el-col :span="5">
|
||||
<div class="label">参考图片/样式：</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div>999</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="count-down">
|
||||
<el-icon style="margin-right: 10px; font-size: 20px; font-weight: bold">
|
||||
<Warning />
|
||||
</el-icon>
|
||||
<div>
|
||||
<el-countdown
|
||||
format="剩余：DD[天]HH[小时]mm[分]"
|
||||
:value="
|
||||
moment(leaseDetails.endTime, 'YYYY-MM-DD HH:mm:ss').valueOf()
|
||||
"
|
||||
>
|
||||
</el-countdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<svg
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
style="width: 24px; height: 24px; margin-right: 15px"
|
||||
>
|
||||
<use xlink:href="#icon-dianhua"></use>
|
||||
</svg>
|
||||
<div style="font-size: 20px; letter-spacing: 2px">
|
||||
{{ leaseDetails.personPhone }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right">
|
||||
<el-button type="primary" round icon="ChatDotRound">在线聊</el-button>
|
||||
</div>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
class="item_btn applyFor"
|
||||
style="background-color: #1abc9c"
|
||||
:style="
|
||||
userId == leaseDetails.publishUser ? 'opacity:0.5;color:#fff' : ''
|
||||
"
|
||||
@click="onAcceptOrders"
|
||||
:disabled="userId == leaseDetails.publishUser"
|
||||
>
|
||||
立即接单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FooterInfo />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from '../../components/header/index.vue'
|
||||
import FooterInfo from '../../components/FooterInfo/index.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getLeaseInfoByIdApi, setAcceptByIdApi } from 'http/api/home/index'
|
||||
import moment from 'moment'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { mainStore } from 'store/main'
|
||||
|
||||
const leaseDetails = reactive<any>({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store: any = mainStore()
|
||||
const userId = store.userInfo.userId
|
||||
|
||||
//设备简略基本信息
|
||||
const equipBaseInfoList = reactive([
|
||||
{
|
||||
label: '需求编号',
|
||||
key: 'leaseCode',
|
||||
},
|
||||
{
|
||||
label: '装备类目',
|
||||
key: 'groupName',
|
||||
},
|
||||
{
|
||||
label: '联系人',
|
||||
key: 'person',
|
||||
},
|
||||
{
|
||||
label: '所属公司',
|
||||
key: 'companyName',
|
||||
},
|
||||
{
|
||||
label: '所属地市',
|
||||
key: 'operateAddress',
|
||||
},
|
||||
{
|
||||
label: '预估数量',
|
||||
key: 'leaseNum',
|
||||
},
|
||||
{
|
||||
label: '预估租赁天数',
|
||||
key: 'leaseDay',
|
||||
},
|
||||
{
|
||||
label: '发布时间',
|
||||
key: 'startTime',
|
||||
},
|
||||
{
|
||||
label: '截止时间',
|
||||
key: 'endTime',
|
||||
},
|
||||
{
|
||||
label: '需求描述',
|
||||
key: 'description',
|
||||
},
|
||||
])
|
||||
|
||||
// 获取详情数据
|
||||
const getLeaseInfoByIdData = async () => {
|
||||
const res: any = await getLeaseInfoByIdApi({ id: route.query.id })
|
||||
Object.assign(leaseDetails, res.data)
|
||||
}
|
||||
|
||||
// 立即接单
|
||||
const onAcceptOrders = () => {
|
||||
ElMessageBox.confirm('确定立即接单吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
})
|
||||
.then(async () => {
|
||||
const res: any = await setAcceptByIdApi({ id: leaseDetails.id })
|
||||
if (res.code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '接单成功',
|
||||
})
|
||||
setTimeout(() => {
|
||||
router.replace({ name: 'parity' })
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getLeaseInfoByIdData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
background: #eeeff6;
|
||||
font-size: 14px;
|
||||
|
||||
.cart-title {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.cart-title div:first-child {
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background-color: #4fabfe;
|
||||
}
|
||||
|
||||
.cart-th {
|
||||
margin: 15px 0;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
|
||||
.cart-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.user-name,
|
||||
.user-phone {
|
||||
padding: 3px 18px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 20px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.goods-code {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
div {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lease-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
color: #ff4800;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.protocol-handle {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
font-size: 13px;
|
||||
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.baseInfo {
|
||||
width: 75%;
|
||||
margin: 35px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
overflow: hidden;
|
||||
|
||||
.equipInfo {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
margin-right: 5px;
|
||||
width: 62%;
|
||||
|
||||
.title {
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005af2;
|
||||
margin-right: 15px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #005af2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.otherItem {
|
||||
border-color: #ff6734;
|
||||
color: #ff6734;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewNnum {
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #bcbcbc;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
margin-top: 20px;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
color: #8e8e8e;
|
||||
// margin-right: 15px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 13px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.contact {
|
||||
color: #ffffff;
|
||||
background: #3cabff;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.collect {
|
||||
user-select: none;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
color: #acacac;
|
||||
cursor: pointer;
|
||||
|
||||
.no {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.yes {
|
||||
font-size: 20px;
|
||||
color: #1b7eff;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #ff4800;
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
margin: 30px 0 50px 0;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.businessInfo {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
// height: 147px;
|
||||
background: #f7f9fa;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 25px 15px;
|
||||
|
||||
.bgCar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.business {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.fonts {
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.other {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #747373;
|
||||
display: flex;
|
||||
margin-right: 60px;
|
||||
|
||||
.label {
|
||||
}
|
||||
|
||||
.value {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_btn {
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.applyFor {
|
||||
margin-top: 80px;
|
||||
color: #f7f9fa;
|
||||
box-sizing: border-box;
|
||||
line-height: 38px;
|
||||
}
|
||||
.count-down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #dd2323;
|
||||
}
|
||||
:deep .el-statistic__content {
|
||||
color: #dd2323;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -98,20 +98,8 @@
|
|||
<span>{{ pageData.dayLeasePrice }}</span>
|
||||
/天
|
||||
</div>
|
||||
<!-- <div class="collect" v-authBtn="() => collectChange">
|
||||
<el-icon class="no" v-show="!isCollect">
|
||||
<Star />
|
||||
</el-icon>
|
||||
<el-icon class="yes" v-show="isCollect">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
{{ isCollect ? '装备已收藏' : '收藏装备' }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="phone">
|
||||
<!-- <PhoneFilled
|
||||
style="width: 2em; height: 2em; margin-right: 8px; color: #409eff"
|
||||
/> -->
|
||||
<svg class="icon" aria-hidden="true" style="width: 24px; height: 24px">
|
||||
<use xlink:href="#icon-dianhua"></use>
|
||||
</svg>
|
||||
|
|
@ -123,10 +111,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="businessInfo">
|
||||
<!-- <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" /> -->
|
||||
|
||||
<div class="business">
|
||||
<!-- <img src="@/assets/img/bns-logo.png" class="avatar" /> -->
|
||||
<div class="fonts">
|
||||
<div class="name">{{ pageData.companyName }}</div>
|
||||
<div class="other">
|
||||
|
|
@ -158,34 +143,49 @@
|
|||
</div>
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">装备外观</div>
|
||||
<!-- <div class="publicLine"></div> -->
|
||||
<div class="urlList">
|
||||
<img :src="v" v-for="(v, i) in goodsAppearanceList" :key="i" />
|
||||
<img :src="v.fileUrl" v-for="(v, i) in pageData.detailsFileList" :key="i" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">证书展示</div>
|
||||
<div class="certificate">
|
||||
<div>
|
||||
合格证：
|
||||
<a>xxxxxx.pdf</a>
|
||||
</div>
|
||||
<div>
|
||||
检测证明：
|
||||
<a>xxxxxx.pdf</a>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>合格证：</div>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<div class="prove-container">
|
||||
<div v-for="item in pageData.insurancePdf" :key="item.id">
|
||||
<img :src="item.fileUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>检测证明：</div>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<div class="prove-container">
|
||||
<div v-for="item in pageData.examinationPdf" :key="item.id">
|
||||
<img :src="item.fileUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">出租记录</div>
|
||||
<div class="rental-record">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table :data="pageData.leaseList" border style="width: 100%">
|
||||
<el-table-column align="center" type="index" label="序号" width="80" />
|
||||
<el-table-column align="center" prop="order_code" label="订单号" />
|
||||
<el-table-column align="center" prop="lease_user" label="出租方" />
|
||||
<el-table-column align="center" prop="start_time" label="租赁开始时间" />
|
||||
<el-table-column align="center" prop="end_time" label="租赁结束时间" />
|
||||
<el-table-column align="center" prop="lease_price" label="租赁费用" />
|
||||
<el-table-column align="center" prop="orderCode" label="订单号" />
|
||||
<el-table-column align="center" prop="leaseName" label="租赁方" />
|
||||
<el-table-column align="center" prop="leaseStartTime" label="租赁开始时间" />
|
||||
<el-table-column align="center" prop="leaseEndTime" label="租赁结束时间" />
|
||||
<el-table-column align="center" prop="leasePrice" label="租赁费用" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -377,6 +377,8 @@ const route = useRoute()
|
|||
const store = mainStore()
|
||||
const ruleFormRef = ref()
|
||||
const pageParams = route.params
|
||||
|
||||
console.log(pageParams, 'pageParams')
|
||||
const backPath = ref<any>('')
|
||||
const backName = ref<any>('')
|
||||
const currentName = ref<any>('装备详情')
|
||||
|
|
@ -560,13 +562,13 @@ const equipDetailKeyList = reactive([
|
|||
},
|
||||
{
|
||||
label: '出厂时间',
|
||||
key: 'specification',
|
||||
key: 'productionDate',
|
||||
fn: '',
|
||||
arg: '',
|
||||
},
|
||||
{
|
||||
label: '整机重量(KG)',
|
||||
key: '',
|
||||
key: 'deviceWeight',
|
||||
fn: '',
|
||||
arg: '',
|
||||
},
|
||||
|
|
@ -855,11 +857,13 @@ const submit = async (Ref) => {
|
|||
})
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
await gethotList()
|
||||
await getData()
|
||||
}
|
||||
init()
|
||||
// const init = async () => {
|
||||
// await gethotList()
|
||||
// await getData()
|
||||
// }
|
||||
// init()
|
||||
|
||||
getData()
|
||||
|
||||
// 加入购物车
|
||||
const onAddCart = async () => {
|
||||
|
|
@ -1272,14 +1276,23 @@ const onAddCart = async () => {
|
|||
|
||||
.certificate {
|
||||
padding: 40px 30px 10px;
|
||||
div {
|
||||
.prove-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
color: #54b4ff;
|
||||
cursor: pointer;
|
||||
div {
|
||||
width: calc((100% - 30px) / 3);
|
||||
height: 200px;
|
||||
margin: 0 15px 15px 0;
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ const screenChooseList: any = reactive([
|
|||
index: 2,
|
||||
},
|
||||
{
|
||||
name: '1500-20000',
|
||||
name: '1500-2000',
|
||||
value: [1500, 2000],
|
||||
isChecked: false,
|
||||
index: 2,
|
||||
|
|
|
|||
|
|
@ -62,14 +62,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="showList">
|
||||
<div class="demand-card">
|
||||
<div class="showList" v-if="leaseList.length > 0">
|
||||
<div class="demand-card" v-for="item in leaseList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<div>国网***工程起重机租赁需求</div>
|
||||
<div style="font-size: 20px; font-weight: bold; letter-spacing: 1px">
|
||||
{{ item.leaseName }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>剩余----</div>
|
||||
<div class="count-down">
|
||||
<el-icon style="margin-right: 10px"><Warning /></el-icon>
|
||||
<!-- 剩余：08天12小时24分 -->
|
||||
<div>
|
||||
<el-countdown
|
||||
format="剩余： DD [天] HH [小时] mm [分]"
|
||||
:value="moment(item.endTime, 'YYYY-MM-DD HH:mm:ss').valueOf()"
|
||||
>
|
||||
</el-countdown>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
@ -77,49 +89,84 @@
|
|||
<el-col :span="2">
|
||||
<div>装备类目</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
<el-col :span="5">
|
||||
<div>{{ item.groupName }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>租赁公司</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
<el-col :span="5">
|
||||
<div>{{ item.companyName }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>联系人</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
<el-col :span="5">
|
||||
<div>{{ item.person }}</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>联系电话</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>{{ item.personPhone }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>装备类目</div>
|
||||
<el-col :span="2">
|
||||
<div>预估数量</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
<el-col :span="5">
|
||||
<div>{{ item.leaseNum }}</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>预估租期(天)</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>{{ item.leaseDay }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>装备类目</div>
|
||||
<el-col :span="2">
|
||||
<div>发布时间</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div>一级/二级/三级</div>
|
||||
<el-col :span="5">
|
||||
<div>{{ item.startTime }}</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>截止时间</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>{{ item.endTime }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="btn-items">
|
||||
<el-button
|
||||
style="background-color: #62c171; color: #fff; padding: 20px 24px"
|
||||
@click="router.push({ name: 'demand-details', query: { id: item.id } })"
|
||||
>
|
||||
需求详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="padding: 20px 40px"
|
||||
:disabled="userId == item.publishUser"
|
||||
@click="onAcceptOrders(item.id)"
|
||||
>
|
||||
接单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="noData">
|
||||
<div class="noData" v-else>
|
||||
<el-empty :image-size="200" />
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<div class="pagination" v-if="leaseList.length > 0">
|
||||
<el-pagination
|
||||
size="small"
|
||||
background
|
||||
|
|
@ -135,21 +182,19 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import EquipCard from '@/components/equipCard.vue'
|
||||
import EquipCardHall from '@/components/equipCardHall/index.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
apiGetAddressList,
|
||||
apiGetEquipTypeList,
|
||||
getTypeListApi,
|
||||
getDeviceListApi,
|
||||
} from '@/http/api/equip'
|
||||
import { getCompanyListApi } from '@/http/api/home'
|
||||
import $bus from '@/utils/bus'
|
||||
import NavMenu from '@/components/Navmenu/index.vue'
|
||||
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTypeListApi, getDeviceListApi } from 'http/api/equip'
|
||||
import { getCompanyListApi, getLeaseListApi, setAcceptByIdApi } from 'http/api/home'
|
||||
import $bus from 'utils/bus'
|
||||
import NavMenu from 'components/Navmenu/index.vue'
|
||||
import moment from 'moment'
|
||||
import { mainStore } from 'store/main'
|
||||
const router = useRouter()
|
||||
const route: any = useRoute()
|
||||
const store: any = mainStore()
|
||||
const userId = store.userInfo.userId
|
||||
const leaseList = ref<any>([])
|
||||
|
||||
//筛选条件列表数据
|
||||
const screenChooseList: any = reactive([
|
||||
|
|
@ -245,7 +290,7 @@ const equipList: any = ref([])
|
|||
|
||||
// 获取装备分类
|
||||
const getTypeListData = async () => {
|
||||
const res = await getTypeListApi()
|
||||
const res: any = await getTypeListApi()
|
||||
const typeList = res.data.map((e: any) => {
|
||||
return { ...e, name: e.typeName, value: e.typeId, isChecked: false, index: 0 }
|
||||
})
|
||||
|
|
@ -255,7 +300,7 @@ getTypeListData()
|
|||
|
||||
// 获取设备所在地
|
||||
const getCompanyAddressListData = async () => {
|
||||
const res = await getCompanyListApi()
|
||||
const res: any = await getCompanyListApi()
|
||||
const addressList = res.data.map((e: any) => {
|
||||
return { ...e, name: e.operateAddress, value: e.companyId, isChecked: false, index: 1 }
|
||||
})
|
||||
|
|
@ -268,36 +313,56 @@ const getCompanyAddressListData = async () => {
|
|||
}
|
||||
getCompanyAddressListData()
|
||||
|
||||
// 查询装备列表数据
|
||||
const getDeviceListData = async (params: any = null, keyWord: any = null) => {
|
||||
// 组装查询参数
|
||||
const getLeaseListData = async () => {
|
||||
const searchParams: any = {
|
||||
keyWord: keyWord ? keyWord : '',
|
||||
ageMin: '',
|
||||
ageMax: '',
|
||||
companyId: '',
|
||||
dayLeasePriceMin: '',
|
||||
dayLeasePriceMax: '',
|
||||
typeId: '',
|
||||
level: '',
|
||||
maStatus: 2,
|
||||
dayLeasePriceOrderBy:
|
||||
optionActive.value == 1 ? screenOptionList[optionActive.value].sort : '',
|
||||
updateTimeOrderBy: optionActive.value == 2 ? screenOptionList[optionActive.value].sort : '',
|
||||
startTime: '',
|
||||
leaseDay: '',
|
||||
endTime: '',
|
||||
leaseNum: '',
|
||||
pageNum: 1,
|
||||
pageSize: 1,
|
||||
}
|
||||
|
||||
screenChooseList.forEach((e: any, index: number) => {
|
||||
e.list.forEach((j: any) => {
|
||||
if (index === 0 && j.isChecked) {
|
||||
searchParams.typeId = j.value
|
||||
searchParams.level = j.value ? 1 : ''
|
||||
}
|
||||
|
||||
if ((index === 1 || index === 2) && j.isChecked) {
|
||||
searchParams.companyId = j.value
|
||||
if (index == 1 && j.isChecked) {
|
||||
searchParams.companyId = searchParams.companyId ? searchParams.companyId : j.value
|
||||
}
|
||||
if (index == 2 && j.isChecked) {
|
||||
searchParams.companyId = searchParams.companyId ? searchParams.companyId : j.value
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
console.log(searchParams, 'searchParams')
|
||||
const { data: res }: any = await getLeaseListApi(searchParams)
|
||||
|
||||
leaseList.value = res.rows
|
||||
}
|
||||
|
||||
// 查询装备列表数据
|
||||
const getDeviceListData = async (params: any = null, keyWord: any = null) => {
|
||||
// 组装查询参数
|
||||
const searchParams: any = {
|
||||
companyId: '',
|
||||
typeId: '',
|
||||
level: '',
|
||||
startTime: '',
|
||||
leaseDay: '',
|
||||
endTime: '',
|
||||
leaseNum: '',
|
||||
pageNum: 1,
|
||||
pageSize: 1,
|
||||
}
|
||||
|
||||
if (params) {
|
||||
searchParams.level = params.level ? params.level : ''
|
||||
searchParams.typeId = params.typeId ? params.typeId : ''
|
||||
|
|
@ -306,7 +371,7 @@ const getDeviceListData = async (params: any = null, keyWord: any = null) => {
|
|||
}
|
||||
|
||||
Object.assign(searchParams, pageData)
|
||||
const { data: res } = await getDeviceListApi(searchParams)
|
||||
const { data: res }: any = await getDeviceListApi(searchParams)
|
||||
equipList.value = res.rows
|
||||
total.value = res.total
|
||||
}
|
||||
|
|
@ -321,14 +386,14 @@ const onClearTags = () => {
|
|||
}
|
||||
})
|
||||
})
|
||||
getDeviceListData()
|
||||
getLeaseListData()
|
||||
}
|
||||
|
||||
//删除条件
|
||||
const handleClose = (tag: any) => {
|
||||
tag.isChecked = false
|
||||
screenChooseList[tag.index].list[0].isChecked = true
|
||||
getDeviceListData()
|
||||
// getDeviceListData()
|
||||
}
|
||||
|
||||
// 排序操作
|
||||
|
|
@ -339,7 +404,7 @@ const changeOption = (val: any) => {
|
|||
|
||||
console.log(screenOptionList, 'screenOptionList')
|
||||
optionActive.value = val.id
|
||||
getDeviceListData()
|
||||
// getDeviceListData()
|
||||
}
|
||||
|
||||
//选中后添加到 大类中的select字段
|
||||
|
|
@ -348,18 +413,20 @@ const selectScreen = (type: any, item: any, index: number) => {
|
|||
e.isChecked = false
|
||||
})
|
||||
item.isChecked = !item.isChecked
|
||||
getDeviceListData()
|
||||
// getDeviceListData()
|
||||
getLeaseListData()
|
||||
}
|
||||
|
||||
//分页page变化
|
||||
const onCurrentChange = (val: number) => {
|
||||
pageData.pageNum = val
|
||||
getDeviceListData()
|
||||
// getDeviceListData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getLeaseListData()
|
||||
$bus.on('search', (val: any) => {
|
||||
getDeviceListData(null, val)
|
||||
// getDeviceListData(null, val)
|
||||
})
|
||||
let routeParams: any = null
|
||||
if (route.query.level && route.query.typeId) {
|
||||
|
|
@ -378,16 +445,32 @@ onMounted(() => {
|
|||
keyWord: route.query.keyWord,
|
||||
}
|
||||
}
|
||||
getDeviceListData(routeParams, null)
|
||||
// getDeviceListData(routeParams, null)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
$bus.off('search')
|
||||
})
|
||||
|
||||
// 点击跳转装备详情
|
||||
const onHandleDetails = (id: number | string) => {
|
||||
router.push(`/equipDetail/${id}`)
|
||||
// 接单
|
||||
const onAcceptOrders = (id: any) => {
|
||||
ElMessageBox.confirm('确定接单吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
})
|
||||
.then(async () => {
|
||||
const res: any = await setAcceptByIdApi({ id })
|
||||
if (res.code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '接单成功',
|
||||
})
|
||||
|
||||
getLeaseListData()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -509,22 +592,33 @@ const onHandleDetails = (id: number | string) => {
|
|||
}
|
||||
|
||||
.showList {
|
||||
background-color: orange;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// background-color: pink;
|
||||
.demand-card {
|
||||
margin-bottom: 15px;
|
||||
padding: 15px 25px;
|
||||
border-radius: 14px;
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
|
||||
// .card {
|
||||
// width: calc((100% - 45px) / 4);
|
||||
// margin-right: 15px;
|
||||
// cursor: pointer;
|
||||
// &:nth-child(4n) {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
.el-row {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// margin-bottom: 15px !important;
|
||||
// }
|
||||
.count-down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #dd2323;
|
||||
}
|
||||
|
||||
.btn-items {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
@ -537,4 +631,8 @@ const onHandleDetails = (id: number | string) => {
|
|||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #3cb4a6;
|
||||
}
|
||||
:deep .el-statistic__content {
|
||||
color: #dd2323;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue