1367 lines
43 KiB
Vue
1367 lines
43 KiB
Vue
<template>
|
||
<!-- <Navmenu></Navmenu> -->
|
||
<Breadcrumb :backPath="backPath" :backName="backName" :currentName="currentName" />
|
||
<div class="equipDetail">
|
||
<div class="top">
|
||
<div class="showImg">
|
||
<!-- <showImg :url-list="pageData.bmFileInfoList"></showImg> -->
|
||
|
||
<img alt="" :src="viewImgUrl" />
|
||
|
||
<div class="img-slide">
|
||
<div class="btn" @click="onPrevImg">
|
||
<el-icon><ArrowLeftBold /></el-icon>
|
||
</div>
|
||
<div class="img-slide-container">
|
||
<div
|
||
class="img-item"
|
||
:class="{ activeUrl: activeIndex === index }"
|
||
v-for="(item, index) in goodsImgList"
|
||
:key="index"
|
||
@click="onCheckImg(item.fileUrl, index)"
|
||
>
|
||
<img :src="item.fileUrl" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="btn" @click="onNextImg">
|
||
<el-icon><ArrowRightBold /></el-icon>
|
||
</div>
|
||
</div>
|
||
</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 otherItem">{{ pageData.maStatusStr }}</div>
|
||
<div class="item">已审核</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="viewNnum">
|
||
<div>浏览 {{ pageData.searchNum }}</div>
|
||
<div style="color: #409eff; display: flex; align-items: center">
|
||
<Location style="width: 1em; height: 1em; margin-right: 8px" />
|
||
安徽省合肥市蜀山区
|
||
</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 pageData[key]
|
||
})
|
||
.join('')
|
||
}}
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="options">
|
||
<div>
|
||
<el-button
|
||
class="item_btn"
|
||
type="primary"
|
||
:disabled="pageData.isBookCar == 0 || isType == 1"
|
||
@click="onAddCart"
|
||
>加入预约车</el-button
|
||
>
|
||
</div>
|
||
|
||
<div>
|
||
<el-button
|
||
class="item_btn applyFor"
|
||
:disabled="pageData.isBookCar == 0 || isType == 1"
|
||
:style="
|
||
pageData.isBookCar == 0 || isType == 1
|
||
? 'opacity:0.5'
|
||
: ''
|
||
"
|
||
style="background-color: #1abc9c"
|
||
@click="onHandelLessee"
|
||
>
|
||
立即承租
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="Top">
|
||
<div class="price">
|
||
￥
|
||
<span>{{ pageData.dayLeasePrice }}</span>
|
||
/天
|
||
</div>
|
||
</div>
|
||
<div class="phone">
|
||
<svg class="icon" aria-hidden="true" style="width: 24px; height: 24px">
|
||
<use xlink:href="#icon-dianhua"></use>
|
||
</svg>
|
||
<div style="font-size: 20px">{{ pageData.personPhone }}</div>
|
||
</div>
|
||
<div style="text-align: right">
|
||
<el-button type="primary" round icon="ChatDotRound">在线聊</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="businessInfo">
|
||
<div class="business">
|
||
<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] }}</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="urlList">
|
||
<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">
|
||
<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="pageData.leaseList" border style="width: 100%">
|
||
<el-table-column align="center" type="index" label="序号" width="80" />
|
||
<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>
|
||
<!-- <div class="recommend">
|
||
<div class="publicTitle">
|
||
<div>为您推荐</div>
|
||
|
||
<div class="change" @click="randomHotList">换一批</div>
|
||
</div>
|
||
<div class="content">
|
||
<equip-card
|
||
class="item"
|
||
@on-click="goDetail"
|
||
v-for="(v, i) in hotList"
|
||
:key="i"
|
||
:url="v.picUrl"
|
||
:name="`${v.modelName}${v.deviceName}`"
|
||
:tags="[v.maStatusStr, v.cityStr]"
|
||
:company="v.companyName"
|
||
:price="v.monthLeasePrice"
|
||
timeUnit="月"
|
||
:id="v.maId"
|
||
></equip-card>
|
||
</div>
|
||
</div> -->
|
||
|
||
<el-dialog
|
||
v-model="dialoglease"
|
||
title="填写租赁信息"
|
||
lock-scroll
|
||
class="dialoglease"
|
||
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-cascader :props="addressCascader" v-model="ruleForm.address" />
|
||
</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"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
placeholder="请选择"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<el-form-item label="工期时长" prop="duration">
|
||
<el-input
|
||
v-model.number="ruleForm.duration"
|
||
type="number"
|
||
placeholder="请输入工期时长"
|
||
>
|
||
<template #append>
|
||
<el-select
|
||
v-model="ruleForm.durationUnit"
|
||
placeholder="Select"
|
||
style="width: 85px"
|
||
@change="priceChange"
|
||
>
|
||
<el-option label="天" value="0" />
|
||
<el-option label="月" value="1" />
|
||
</el-select>
|
||
</template>
|
||
</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="">不需要</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="请填写项目说明"
|
||
rows="5"
|
||
type="textarea"
|
||
v-model="ruleForm.projectDescription"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-config-provider>
|
||
<equipDetailTable
|
||
:price="`${
|
||
ruleForm.durationUnit == '1' ? pageData.monthLeasePrice : pageData.dayLeasePrice
|
||
}`"
|
||
:name="`${pageData.modelName}${pageData.deviceName}`"
|
||
:company="pageData.companyName"
|
||
:url="pageData.picUrl"
|
||
:brand="pageData.brand"
|
||
:code="pageData.code"
|
||
:group="pageData.groupName"
|
||
:position="`${pageData.provinceStr}${pageData.cityStr || ''}${
|
||
pageData.areaStr || ''
|
||
}`"
|
||
:specifications="pageData.specification"
|
||
:type="pageData.typeName"
|
||
:unit="ruleForm.durationUnit == '1' ? '月' : '天'"
|
||
></equipDetailTable>
|
||
<div class="countPrice">
|
||
合计总价：
|
||
<span>{{ priceChange }}元</span>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="dialogPhone" title="服务电话" width="30%">
|
||
<div style="font-size: 16px; font-weight: 600">
|
||
{{ pageData.authPhone }}
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="openPhone">确认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import Breadcrumb from '../../components/Breadcrumb/index.vue'
|
||
|
||
import {
|
||
getDetail,
|
||
getHotList,
|
||
equipCollect,
|
||
addBookCarApi,
|
||
apiSubmitLease,
|
||
apiGetAddressList,
|
||
} from 'http/api/equip'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
// import Navmenu from '@/components/Navmenu/index.vue'
|
||
import equipDetailTable from '@/components/equipDetailTable.vue'
|
||
import { cartStore } from 'store/cart'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { mainStore } from '@/store/main'
|
||
import { getBookCarDetailsApi } from 'http/api/home/index'
|
||
|
||
const router = useRouter()
|
||
const route: any = useRoute()
|
||
const store = mainStore()
|
||
const ruleFormRef = ref()
|
||
const pageParams = route.params
|
||
const cart = cartStore()
|
||
const isType = localStorage.getItem('rolesType')
|
||
|
||
console.log(pageParams, 'pageParams')
|
||
const backPath = ref<any>('')
|
||
const backName = ref<any>('')
|
||
const currentName = ref<any>('装备详情')
|
||
const viewImgUrl = computed(() => {
|
||
if (goodsImgList.value.length > 0) {
|
||
return goodsImgList.value[activeIndex.value].fileUrl
|
||
} else {
|
||
return ''
|
||
}
|
||
})
|
||
|
||
if (router.options.history.state.back) {
|
||
backPath.value = router.options.history.state.back
|
||
const previousRoute: any = []
|
||
|
||
if (router.options.history.state.back === '/home') {
|
||
backName.value = '首页'
|
||
}
|
||
router.options.routes.forEach((route: any) => {
|
||
if (route.path === router.options.history.state.back) {
|
||
previousRoute.push(route)
|
||
} else {
|
||
if (route.children && route.children.length > 0) {
|
||
route.children.forEach((r: any) => {
|
||
if (r.path === router.options.history.state.back) {
|
||
previousRoute.push(r)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
if (previousRoute.length > 0) {
|
||
backName.value = previousRoute[0].meta.title
|
||
}
|
||
}
|
||
|
||
// 商品图片集合
|
||
const goodsImgList: any = ref([
|
||
// 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||
// 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
|
||
// 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||
// 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||
])
|
||
// 商品图片集合
|
||
const goodsAppearanceList: any = ref([
|
||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||
'https://img.d1cm.com/news/img/202406071013545196.jpg',
|
||
])
|
||
|
||
const tableData = ref([
|
||
{
|
||
order_code: '2024102310223xxx',
|
||
lease_user: '王先生',
|
||
start_time: '2024-10-11',
|
||
end_time: '2025-10-10',
|
||
lease_price: 600,
|
||
},
|
||
{
|
||
order_code: '2024102310223xxx',
|
||
lease_user: '王先生',
|
||
start_time: '2024-10-11',
|
||
end_time: '2025-10-10',
|
||
lease_price: 600,
|
||
},
|
||
{
|
||
order_code: '2024102310223xxx',
|
||
lease_user: '王先生',
|
||
start_time: '2024-10-11',
|
||
end_time: '2025-10-10',
|
||
lease_price: 600,
|
||
},
|
||
{
|
||
order_code: '2024102310223xxx',
|
||
lease_user: '王先生',
|
||
start_time: '2024-10-11',
|
||
end_time: '2025-10-10',
|
||
lease_price: 600,
|
||
},
|
||
])
|
||
|
||
// viewImgUrl.value = goodsImgList.value[0]
|
||
// 当前选中的图片索引
|
||
const activeIndex = ref<number>(0)
|
||
|
||
// 图片点击切换
|
||
const onCheckImg = (item: string, index: number) => {
|
||
activeIndex.value = index
|
||
}
|
||
// 图片上一张
|
||
const onPrevImg = () => {
|
||
if (activeIndex.value > 0) {
|
||
activeIndex.value--
|
||
}
|
||
}
|
||
// 图片下一张
|
||
const onNextImg = () => {
|
||
if (activeIndex.value + 1 < goodsImgList.value.length) {
|
||
activeIndex.value++
|
||
}
|
||
}
|
||
|
||
//设备简略基本信息
|
||
const equipBaseInfoList = reactive([
|
||
{
|
||
label: '装备编号',
|
||
key: 'code',
|
||
},
|
||
{
|
||
label: '装备类目',
|
||
key: 'groupName',
|
||
},
|
||
{
|
||
label: '装备品牌',
|
||
key: 'brand',
|
||
},
|
||
{
|
||
label: '装备型号',
|
||
key: 'typeName',
|
||
},
|
||
{
|
||
label: '联系人',
|
||
key: 'person',
|
||
},
|
||
{
|
||
label: '所属公司',
|
||
key: 'companyName',
|
||
},
|
||
{
|
||
label: '发布时间',
|
||
key: 'createTime',
|
||
},
|
||
{
|
||
label: '更新时间',
|
||
key: 'updateTime',
|
||
},
|
||
])
|
||
//商家标签信息
|
||
const businessList = reactive([
|
||
{
|
||
label: '入驻时间',
|
||
key: 'companyCreateTime',
|
||
unit: '',
|
||
},
|
||
{
|
||
label: '上架数量',
|
||
key: 'devUapNum',
|
||
unit: '台',
|
||
},
|
||
{
|
||
label: '访问量',
|
||
key: 'companyVisitNum',
|
||
unit: '',
|
||
},
|
||
])
|
||
|
||
//装备详情数据map
|
||
const equipDetailKeyList = reactive([
|
||
{
|
||
label: '装备编号',
|
||
key: 'code',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
{
|
||
label: '装备品牌',
|
||
key: 'brand',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
{
|
||
label: '装备类目',
|
||
key: 'groupName',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
{
|
||
label: '装备型号',
|
||
key: 'typeName',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
{
|
||
label: '出厂时间',
|
||
key: 'productionDate',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
{
|
||
label: '整机重量(KG)',
|
||
key: 'deviceWeight',
|
||
fn: '',
|
||
arg: '',
|
||
},
|
||
// {
|
||
// label: '装备型号',
|
||
// key: 'modelName',
|
||
// fn: '',
|
||
// arg: '',
|
||
// },
|
||
// {
|
||
// label: '序列号码',
|
||
// key: 'serialNumber',
|
||
// fn: '',
|
||
// arg: '',
|
||
// },
|
||
// {
|
||
// label: '出场时间',
|
||
// key: 'productionDate',
|
||
// fn: '',
|
||
// arg: '',
|
||
// },
|
||
// {
|
||
// label: '工作时长',
|
||
// key: 'workingHours',
|
||
// fn: '',
|
||
// arg: '',
|
||
// },
|
||
// {
|
||
// label: '检验信息',
|
||
// key: 'isExaminationPdf',
|
||
// fn: 'openPdf',
|
||
// arg: 'examinationPdf',
|
||
// },
|
||
// {
|
||
// label: '保险信息',
|
||
// key: 'isInsurancePdf',
|
||
// fn: 'openPdf',
|
||
// arg: 'insurancePdf',
|
||
// },
|
||
])
|
||
|
||
//
|
||
const dialogPhone = ref(false)
|
||
|
||
//装备详情数据
|
||
const pageData: any = ref({})
|
||
|
||
//我要租 弹窗
|
||
const dialoglease = ref(false)
|
||
|
||
//装备收藏状态
|
||
const isCollect = ref(false)
|
||
|
||
//推荐列表
|
||
const hotList = ref([])
|
||
// 展示的推荐列表
|
||
const showHotList = ref([])
|
||
|
||
const checkDuration = (rule, value, callback) => {
|
||
if ((value == '' || value == null) && value !== 0) {
|
||
return callback(new Error('请输入工期时长'))
|
||
} else if (value <= 0) {
|
||
return callback(new Error('工期时长需大于0'))
|
||
} else {
|
||
return callback()
|
||
}
|
||
}
|
||
|
||
//我要租 表单数据
|
||
const ruleForm = ref({
|
||
address: [], //进场地址
|
||
detailAddress: '', //详细地址
|
||
entryTime: '', //进场时间
|
||
duration: null, //工期时长
|
||
durationUnit: '0', //工期时长单位 0 —> 天 1 -> 月
|
||
machinist: 0, //是否需要机手
|
||
invoiceType: '', //发票类型
|
||
projectDescription: '', //项目说明
|
||
})
|
||
const rules = reactive({
|
||
address: [{ required: true, message: '请输入进场地址', trigger: 'blur' }],
|
||
detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||
entryTime: [{ required: true, message: '请选择进场时间', trigger: 'blur' }],
|
||
duration: [{ validator: checkDuration, trigger: 'blur' }],
|
||
machinist: [{ required: true, message: '请输入进场地址', trigger: 'blur' }],
|
||
invoiceType: [],
|
||
projectDescription: [{ required: true, message: '请输入项目说明', trigger: 'blur' }],
|
||
})
|
||
|
||
// //打开我要租表单
|
||
// const openLease = () => {
|
||
// dialoglease.value = true
|
||
// }
|
||
|
||
const openLease = () => {
|
||
// console.log(pageData.value)
|
||
// onAddCart()
|
||
// router.push({
|
||
// path: `/orderConfirm/${pageData.value.maId}`,
|
||
// })
|
||
}
|
||
//切换收藏状态
|
||
const collectChange = async () => {
|
||
isCollect.value = !isCollect.value
|
||
const params = {
|
||
maId: pageData.value.maId,
|
||
isCollect: isCollect.value,
|
||
}
|
||
const res = await equipCollect(params)
|
||
if (res.code == '200') {
|
||
ElMessage({
|
||
type: 'success',
|
||
duration: 1000,
|
||
message: `装备${isCollect.value ? '收藏' : '取消收藏'}成功`,
|
||
})
|
||
}
|
||
}
|
||
|
||
//计算具体价格
|
||
const priceChange = computed(() => {
|
||
//总价
|
||
let count = 0
|
||
//单价
|
||
let unitPrice = 0
|
||
// 额外机手价格
|
||
let jsPrice = 0
|
||
// 时长
|
||
let duration = 0
|
||
|
||
if (ruleForm.value.durationUnit == '0') {
|
||
unitPrice = Number(pageData.value.dayLeasePrice)
|
||
jsPrice = Number(pageData.value.jsDayPrice)
|
||
} else {
|
||
unitPrice = Number(pageData.value.monthLeasePrice)
|
||
jsPrice = Number(pageData.value.jsMonthPrice)
|
||
}
|
||
if (!ruleForm.value.machinist) {
|
||
jsPrice = 0
|
||
}
|
||
|
||
duration = Number(ruleForm.value.duration)
|
||
|
||
count = unitPrice * duration + jsPrice * duration
|
||
|
||
return Math.round(count * 100) / 100 || 0
|
||
})
|
||
|
||
//打开商家电话弹窗
|
||
const openPhone = () => {
|
||
dialogPhone.value = !dialogPhone.value
|
||
}
|
||
|
||
// 打开新标签页查看pdf
|
||
const openPdf = (name) => {
|
||
if (name) {
|
||
window.open(name)
|
||
}
|
||
}
|
||
const that = {
|
||
openPdf,
|
||
}
|
||
|
||
const addressCascader = {
|
||
lazy: true,
|
||
label: 'name',
|
||
value: 'code',
|
||
lazyLoad: async (node, resolve) => {
|
||
const { level, data } = node
|
||
let nodes = []
|
||
if (level == 0) {
|
||
const arr = await getAddressData()
|
||
nodes = arr
|
||
} else if (level == 1) {
|
||
const arr = await getAddressData(data.code)
|
||
nodes = arr
|
||
} else if (level == 2) {
|
||
const arr = await getAddressData(data.code)
|
||
nodes = arr.map((item) => ({
|
||
...item,
|
||
leaf: true,
|
||
}))
|
||
}
|
||
resolve(nodes)
|
||
},
|
||
}
|
||
|
||
const onHandelLessee = () => {
|
||
// onAddCart()
|
||
// router.push({
|
||
// path: `/orderConfirm/${props.id}`,
|
||
// })
|
||
// console.log('立即租赁')
|
||
|
||
ElMessageBox.confirm('是否确定立即承租该装备?', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
router.push({
|
||
// path: `/orderConfirm/${props.id}`,
|
||
name: 'order-confirm',
|
||
query: {
|
||
id: route.query.id,
|
||
},
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
//获取地址列表
|
||
const getAddressData = async (code = '') => {
|
||
let params = {}
|
||
if (code) {
|
||
params = { code }
|
||
}
|
||
|
||
const res = await apiGetAddressList(params)
|
||
|
||
return res.data || []
|
||
}
|
||
|
||
const handelDetailListClick = (fnName, arg) => {
|
||
if (fnName) {
|
||
that[fnName](arg)
|
||
}
|
||
}
|
||
|
||
//获取页面数据
|
||
const getData = async () => {
|
||
const res = await getDetail(route.query.id, true)
|
||
res.data.isOperatorCn = res.data.isOperator ? '是' : '否'
|
||
res.data.isInsurancePdf = res.data.insurancePdf ? '点击查看' : '暂无'
|
||
res.data.isExaminationPdf = res.data.examinationPdf ? '点击查看' : '暂无'
|
||
|
||
isCollect.value = res.data.collectId ? true : false
|
||
|
||
console.log('res详情数据', res)
|
||
pageData.value = res.data
|
||
goodsImgList.value = res.data.mainFileList
|
||
}
|
||
|
||
//获取推荐列表
|
||
const gethotList = async () => {
|
||
const params = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
}
|
||
const res = await getHotList(params)
|
||
hotList.value = res.rows
|
||
randomHotList()
|
||
}
|
||
|
||
const randomHotList = () => {
|
||
showHotList.value = random().map((key) => {
|
||
return hotList.value[key]
|
||
})
|
||
}
|
||
|
||
const random = () => {
|
||
let numbers = new Set()
|
||
while (numbers.size < 3) {
|
||
numbers.add(Math.floor(Math.random() * 10))
|
||
}
|
||
return Array.from(numbers)
|
||
}
|
||
|
||
//获取详情数据
|
||
const goDetail = (val) => {
|
||
router.push({
|
||
path: `/equipDetail/${val.id}`,
|
||
})
|
||
}
|
||
|
||
//提交申请
|
||
const submit = async (Ref) => {
|
||
if (!Ref) {
|
||
return
|
||
}
|
||
await Ref.validate(async (valid, fields) => {
|
||
if (valid) {
|
||
const params = {
|
||
provinceId: ruleForm.value.address[0],
|
||
cityId: ruleForm.value.address[1],
|
||
areaId: ruleForm.value.address[2],
|
||
address: ruleForm.value.detailAddress,
|
||
realStartTime: ruleForm.value.entryTime,
|
||
duration: ruleForm.value.duration,
|
||
isMachinist: ruleForm.value.machinist,
|
||
invoiceType: ruleForm.value.invoiceType,
|
||
description: ruleForm.value.projectDescription,
|
||
durationType: ruleForm.value.durationUnit,
|
||
cost: priceChange.value,
|
||
maId: pageData.value.maId,
|
||
orderCompany: store.userInfo.companyId,
|
||
}
|
||
|
||
const res = await apiSubmitLease(params)
|
||
|
||
if (res.code == '200') {
|
||
ElMessage({
|
||
message: '提交租赁申请成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
})
|
||
}
|
||
dialoglease.value = false
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
|
||
// const init = async () => {
|
||
// await gethotList()
|
||
// await getData()
|
||
// }
|
||
// init()
|
||
|
||
getData()
|
||
|
||
// 加入购物车
|
||
const onAddCart = async () => {
|
||
const addParams = {
|
||
maId: pageData.value.maId,
|
||
orderCompany: pageData.value.companyId,
|
||
}
|
||
ElMessageBox.confirm('是否确定加入预约车?', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
const res: any = await addBookCarApi(addParams)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: `预约车加入成功`,
|
||
})
|
||
getData()
|
||
const res: any = await getBookCarDetailsApi()
|
||
cart.SET_CART_NUM(res.data.length)
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: res.msg,
|
||
})
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
:deep(.dialoglease) {
|
||
margin: 10px auto 0 !important;
|
||
min-width: 855px !important;
|
||
}
|
||
|
||
:deep(.el-form-item) {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.el-form-item__content {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.countPrice {
|
||
padding: 10px;
|
||
text-align: right;
|
||
|
||
span {
|
||
color: red;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.equipDetail {
|
||
user-select: none;
|
||
margin-top: 20px;
|
||
|
||
.top {
|
||
display: flex;
|
||
margin-bottom: 50px;
|
||
|
||
.showImg {
|
||
width: 38%;
|
||
border-radius: 15px;
|
||
// overflow: hidden;
|
||
margin-right: 30px;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: space-between;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 73%;
|
||
}
|
||
|
||
.img-slide {
|
||
height: 25%;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
cursor: pointer;
|
||
font-size: 26px;
|
||
// &:hover {
|
||
// color: white;
|
||
// }
|
||
}
|
||
|
||
.img-slide-container {
|
||
flex: 1;
|
||
display: flex;
|
||
height: 80%;
|
||
justify-content: space-around;
|
||
|
||
.img-item {
|
||
width: calc((100% - 30px) / 4);
|
||
cursor: pointer;
|
||
|
||
img {
|
||
height: 90%;
|
||
margin-top: 5%;
|
||
}
|
||
// width: 25%;
|
||
// background-color: orange;
|
||
}
|
||
|
||
.activeUrl {
|
||
border: 1px solid #1abc9c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.baseInfo {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
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;
|
||
|
||
.item_btn {
|
||
width: 110px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.contact {
|
||
color: #ffffff;
|
||
background: #3cabff;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.applyFor {
|
||
margin-left: 50px;
|
||
// background-color: #1abc9c;
|
||
color: #f7f9fa;
|
||
box-sizing: border-box;
|
||
line-height: 38px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.phone {
|
||
padding: 15px 0;
|
||
display: flex;
|
||
align-items: 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 {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.publicTitle {
|
||
font-size: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
color: #fff;
|
||
background-color: #1abc9c;
|
||
width: 150px;
|
||
height: 65px;
|
||
line-height: 65px;
|
||
text-align: center;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.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 30px 10px;
|
||
border: 1px solid #1abc9c;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.detail {
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
cursor: pointer;
|
||
width: calc(100% / 3);
|
||
font-size: 14px;
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 600;
|
||
display: flex;
|
||
margin-bottom: 35px;
|
||
|
||
.label {
|
||
color: #8e8e8e;
|
||
width: 100px;
|
||
}
|
||
|
||
.value {
|
||
color: #333333;
|
||
flex: 1;
|
||
word-break: break-all;
|
||
// font-family: 'fangsong';
|
||
}
|
||
|
||
.fnValue {
|
||
color: #0087cd;
|
||
// font-family: 'fangsong';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.appearance {
|
||
margin-bottom: 20px;
|
||
|
||
.urlList {
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.certificate {
|
||
padding: 40px 30px 10px;
|
||
.prove-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
div {
|
||
width: calc((100% - 30px) / 3);
|
||
height: 200px;
|
||
margin: 0 15px 15px 0;
|
||
|
||
&:nth-child(3n) {
|
||
margin: 0;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 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>
|