746 lines
20 KiB
Vue
746 lines
20 KiB
Vue
<template>
|
||
<Navmenu></Navmenu>
|
||
<div class="equipDetail">
|
||
<div class="top">
|
||
<div class="showImg">
|
||
<showImg :url-list="pageData.pictures || []"></showImg>
|
||
</div>
|
||
<div class="baseInfo">
|
||
<div class="equipInfo">
|
||
<div class="left">
|
||
<div class="title">
|
||
<div class="name">{{ pageData.modelName }}{{ pageData.deviceName }}</div>
|
||
<div class="tag">
|
||
<div class="item">{{ pageData.maStatus }}</div>
|
||
<div class="item otherItem" v-if="pageData.isAudit == 1">已审核</div>
|
||
</div>
|
||
</div>
|
||
<div class="viewNnum">浏览{{pageData.searchNum}}</div>
|
||
<div class="infoBox">
|
||
<div class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
|
||
<div class="label">{{ v.label }}：</div>
|
||
<div class="value">{{
|
||
v.key.split(',').map(key => {
|
||
return pageData[key]
|
||
}).join('')
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="Top">
|
||
<div class="price">
|
||
￥
|
||
<span>{{ pageData.monthLeasePrice }}</span>
|
||
/月
|
||
</div>
|
||
<div class="collect" @click="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="options">
|
||
<div class="item contact">联系商家</div>
|
||
<div class="item applyFor" @click="openLease">我要租</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="businessInfo">
|
||
<img class="bgCar" src="@/assets/img/equipDetail/gouwu.png"/>
|
||
|
||
<div class="business">
|
||
<img
|
||
:src="pageData.companyLogoUrl"
|
||
class="avatar"/>
|
||
<div class="fonts">
|
||
<div class="name">{{ pageData.companyName }}</div>
|
||
<div class="other">
|
||
<div class="item" v-for="(v, i) in businessList" :key="i">
|
||
<div class="label">{{ v.label }}：</div>
|
||
<div class="value">{{ pageData[v.key] }}{{ v.unit }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail">
|
||
<div class="publicTitle">装备详情</div>
|
||
<div class="publicLine"></div>
|
||
<div class="list publicContent">
|
||
<div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
|
||
<div class="label">{{ v.label }}：</div>
|
||
<div :class="v.fn ? 'fnValue' : 'value'" @click="handelDetailListClick(v.fn,pageData[v.arg])">{{
|
||
pageData[v.key]
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="appearance">
|
||
<div class="publicTitle">装备外观</div>
|
||
<div class="publicLine"></div>
|
||
<div class="urlList publicContent">
|
||
<img :src="v" v-for="(v, i) in (pageData.pictures || [])" :key="i"/>
|
||
</div>
|
||
</div>
|
||
<div class="recommend">
|
||
<div class="publicTitle">
|
||
<div>为您推荐</div>
|
||
|
||
<div class="change">换一批</div>
|
||
</div>
|
||
<div class="content">
|
||
<equip-card class="item" v-for="(v, i) in 3" :key="i" :id="i"></equip-card>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog
|
||
v-model="dialoglease"
|
||
title="填写租赁信息"
|
||
lock-scroll
|
||
width="60%"
|
||
>
|
||
<el-config-provider :locale="zhCn">
|
||
<el-form
|
||
ref="ruleFormRef"
|
||
:model="ruleForm"
|
||
:rules="rules"
|
||
label-width="120px"
|
||
class="demo-ruleForm"
|
||
status-icon
|
||
>
|
||
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="设备进场地址" prop="address">
|
||
<el-input placeholder="请输入地址" v-model="ruleForm.address"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="详细地址" prop="detailAddress">
|
||
<el-input placeholder="请输入地址" v-model="ruleForm.detailAddress"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="进场时间" prop="entryTime">
|
||
<el-date-picker
|
||
v-model="ruleForm.entryTime"
|
||
type="date"
|
||
placeholder="请选择"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="工期时长" prop="duration">
|
||
<el-input placeholder="请输入地址" v-model="ruleForm.duration"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="7">
|
||
<el-form-item label="是否需要机手" prop="machinist">
|
||
<el-radio-group v-model="ruleForm.machinist">
|
||
<el-radio-button :label="1" :disabled="!pageData.isOperator">
|
||
是
|
||
</el-radio-button>
|
||
<el-radio-button :label="0" >
|
||
否
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="发票类型" prop="invoiceType">
|
||
<el-radio-group v-model="ruleForm.invoiceType">
|
||
<el-radio-button :label="0" >
|
||
不需要
|
||
</el-radio-button>
|
||
<el-radio-button :label="1" >
|
||
增值税普票
|
||
</el-radio-button>
|
||
<el-radio-button :label="2" >
|
||
增值税专票
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="项目说明" prop="projectDescription">
|
||
<el-input placeholder="请填写项目说明" type="textarea" v-model="ruleForm.projectDescription"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-table :data="[pageData]" border style="width: 100%">
|
||
<el-table-column prop="date" label="装备" width="180" >
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="租金" width="180" />
|
||
<el-table-column prop="address" label="供应商" />
|
||
</el-table>
|
||
</el-config-provider>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="dialoglease = false">
|
||
提交
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import ShowImg from './comoonents/showImg.vue'
|
||
import {reactive, ref} from 'vue'
|
||
import EquipCard from 'components/equipCard.vue'
|
||
import {getDetail} from "@/http/api/equip"
|
||
import {useRoute} from "vue-router";
|
||
import Navmenu from '@/components/Navmenu/index.vue'
|
||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||
|
||
const route = useRoute()
|
||
|
||
const pageParams = route.params
|
||
//设备简略基本信息
|
||
const equipBaseInfoList = reactive([
|
||
{
|
||
label: '设备规格',
|
||
key: 'specification'
|
||
},
|
||
{
|
||
label: '设备单位',
|
||
key: 'companyName'
|
||
},
|
||
{
|
||
label: '配备机手',
|
||
key: 'isOperatorCn'
|
||
},
|
||
{
|
||
label: '发布时间',
|
||
key: 'createTime'
|
||
},
|
||
{
|
||
label: '更新时间',
|
||
key: 'updateTime'
|
||
}
|
||
])
|
||
//商家标签信息
|
||
const businessList = reactive([
|
||
{
|
||
label: '入驻时间',
|
||
key: 'companyCreateTime',
|
||
unit: ''
|
||
},
|
||
{
|
||
label: '上架数量',
|
||
key: 'companyUpNum',
|
||
unit: '台'
|
||
}
|
||
])
|
||
|
||
//装备详情数据map
|
||
const equipDetailKeyList = reactive([
|
||
{
|
||
label: '装备编号',
|
||
key: 'code',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '装备类别',
|
||
key: 'typeName',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '装备组别',
|
||
key: 'groupName',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '装备名称',
|
||
key: 'deviceName',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '规格/操作重量',
|
||
key: 'specification',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '品牌',
|
||
key: 'brand',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '装备型号',
|
||
key: 'modelName',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '序列号码',
|
||
key: 'serialNumber',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '出场时间',
|
||
key: 'productionDate',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '工作时长',
|
||
key: 'workingHours',
|
||
fn: '',
|
||
arg: ''
|
||
},
|
||
{
|
||
label: '检验信息',
|
||
key: 'look',
|
||
fn: 'openPdf',
|
||
arg: 'examinationPdf'
|
||
},
|
||
{
|
||
label: '保险信息',
|
||
key: 'look',
|
||
fn: 'openPdf',
|
||
arg: 'insurancePdf'
|
||
}
|
||
])
|
||
|
||
//
|
||
|
||
|
||
//装备详情数据
|
||
const pageData = ref({})
|
||
|
||
//
|
||
const dialoglease = ref(false)
|
||
|
||
//装备收藏状态
|
||
const isCollect = ref(false)
|
||
|
||
//我要租 表单数据
|
||
const ruleForm = ref({
|
||
address:'',//进场地址
|
||
detailAddress:'',//详细地址
|
||
entryTime:'',//进场时间
|
||
duration:'',//工期时长
|
||
machinist:0,//是否需要机手
|
||
invoiceType:0,//发票类型
|
||
projectDescription:''//项目说明
|
||
})
|
||
const rules = reactive({
|
||
address:[
|
||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||
],
|
||
detailAddress:[
|
||
{required: true, message: '请输入详细地址', trigger: 'blur'}
|
||
],
|
||
entryTime:[
|
||
{required: true, message: '请选择进场时间', trigger: 'blur'}
|
||
],
|
||
duration:[
|
||
{required: true, message: '请输入工期时长', trigger: 'blur'}
|
||
],
|
||
machinist:[
|
||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||
],
|
||
invoiceType:[
|
||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||
],
|
||
projectDescription:[
|
||
{required: true, message: '请输入项目说明', trigger: 'blur'}
|
||
],
|
||
})
|
||
//打开我要租表单
|
||
const openLease = () => {
|
||
|
||
dialoglease.value = true
|
||
}
|
||
//切换收藏状态
|
||
const collectChange = () => {
|
||
isCollect.value = !isCollect.value
|
||
}
|
||
const openPdf = (name) => {
|
||
window.open(name)
|
||
}
|
||
const that = {
|
||
openPdf
|
||
}
|
||
|
||
const handelDetailListClick = (fnName,arg) => {
|
||
if(fnName){
|
||
that[fnName](arg)
|
||
}
|
||
}
|
||
|
||
//获取页面数据
|
||
const getData = async () => {
|
||
const res = await getDetail(pageParams.id)
|
||
res.data.isOperatorCn = res.data.isOperator ? '是' : '否'
|
||
res.data.look = '点击查看'
|
||
isCollect.value = res.data.collectId ? true : false
|
||
pageData.value = res.data
|
||
console.log(pageData.value)
|
||
}
|
||
const init = () => {
|
||
getData()
|
||
}
|
||
init()
|
||
</script>
|
||
<style scoped lang="scss">
|
||
:deep() .el-form-item{
|
||
display: flex;
|
||
width: 100%;
|
||
.el-form-item__content{
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.equipDetail {
|
||
user-select: none;
|
||
margin-top: 20px;
|
||
.top {
|
||
display: flex;
|
||
margin-bottom: 50px;
|
||
|
||
.showImg {
|
||
width: 38%;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.baseInfo {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.equipInfo {
|
||
display: flex;
|
||
|
||
.left {
|
||
margin-right: 5px;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
font-size: 24px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
}
|
||
|
||
.tag {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item {
|
||
font-size: 13px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #005af2;
|
||
margin-left: 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;
|
||
}
|
||
|
||
.infoBox {
|
||
margin-top: 20px;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
|
||
.label {
|
||
font-size: 15px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #8e8e8e;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.value {
|
||
font-size: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.item {
|
||
cursor: pointer;
|
||
width: 110px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border-radius: 4px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
|
||
.contact {
|
||
color: #ffffff;
|
||
background: #3cabff;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.applyFor {
|
||
border: 1px solid #3cabff;
|
||
color: #3cabff;
|
||
box-sizing: border-box;
|
||
line-height: 38px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.businessInfo {
|
||
width: 100%;
|
||
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: 20px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.other {
|
||
display: flex;
|
||
|
||
.item {
|
||
font-size: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
display: flex;
|
||
margin-right: 15px;
|
||
|
||
.label {
|
||
}
|
||
|
||
.value {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.publicTitle {
|
||
font-size: 20px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.publicLine {
|
||
width: 100%;
|
||
height: 12px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
position: relative;
|
||
|
||
&:before {
|
||
content: '';
|
||
height: 3px;
|
||
width: 40px;
|
||
background: #2282ff;
|
||
border-radius: 2px;
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 20px;
|
||
}
|
||
}
|
||
|
||
.publicContent {
|
||
box-sizing: border-box;
|
||
padding: 40px 70px 10px;
|
||
}
|
||
|
||
.detail {
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
cursor: pointer;
|
||
width: calc(100% / 3);
|
||
font-size: 16px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
display: flex;
|
||
margin-bottom: 35px;
|
||
|
||
.label {
|
||
color: #8e8e8e;
|
||
}
|
||
|
||
.value {
|
||
color: #333333;
|
||
}
|
||
|
||
.fnValue {
|
||
color: #0087cd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.appearance {
|
||
margin-bottom: 20px;
|
||
|
||
.urlList {
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recommend {
|
||
.change {
|
||
font-size: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #9d9d9d;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
.item {
|
||
width: calc((100% - 40px) / 3);
|
||
|
||
&:nth-child(3n - 1) {
|
||
margin: 0 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|