554 lines
15 KiB
Vue
554 lines
15 KiB
Vue
<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 class="img-list">
|
||
<div v-for="item in leaseDetails.fileInfoList" :key="item.id">
|
||
<img :src="item.fileUrl" alt="" />
|
||
</div>
|
||
</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;
|
||
}
|
||
|
||
.img-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
div {
|
||
width: calc((100% - 15px) / 2);
|
||
height: 120px;
|
||
margin: 0 15px 15px 0;
|
||
|
||
&:nth-child(2n) {
|
||
margin: 0;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|