bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码提交

This commit is contained in:
BianLzhaoMin 2024-11-26 15:38:36 +08:00
parent efce0fd406
commit 3f9cd683a4
13 changed files with 422 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components.d.ts vendored
View File

@ -7,15 +7,18 @@ 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']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
@ -23,8 +26,16 @@ declare module 'vue' {
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
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']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
EquipCard: typeof import('./src/components/equipCard.vue')['default']
EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']

29
src/assets/font/demo_index.html
View File

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe862;</span>
<div class="name">电话</div>
<div class="code-name">&amp;#xe862;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">购物车</div>
@ -498,9 +504,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1732329564134') format('woff2'),
url('iconfont.woff?t=1732329564134') format('woff'),
url('iconfont.ttf?t=1732329564134') format('truetype');
src: url('iconfont.woff2?t=1732599020939') format('woff2'),
url('iconfont.woff?t=1732599020939') format('woff'),
url('iconfont.ttf?t=1732599020939') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -526,6 +532,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-dianhua"></span>
<div class="name">
电话
</div>
<div class="code-name">.icon-dianhua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gouwuche2"></span>
<div class="name">
@ -1192,6 +1207,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#icon-dianhua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gouwuche2"></use>

10
src/assets/font/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3152246 */
src: url('iconfont.woff2?t=1732329564134') format('woff2'),
url('iconfont.woff?t=1732329564134') format('woff'),
url('iconfont.ttf?t=1732329564134') format('truetype');
src: url('iconfont.woff2?t=1732599020939') format('woff2'),
url('iconfont.woff?t=1732599020939') format('woff'),
url('iconfont.ttf?t=1732599020939') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-dianhua:before {
content: "\e862";
}
.icon-gouwuche2:before {
content: "\e639";
}

2
src/assets/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
src/assets/font/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "8288971",
"name": "电话",
"font_class": "dianhua",
"unicode": "e862",
"unicode_decimal": 59490
},
{
"icon_id": "3826040",
"name": "购物车",

BIN
src/assets/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/font/iconfont.woff2
View File

Binary file not shown.

23
src/components/Breadcrumb/index.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: backPath }">{{ backName }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ currentName }}</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script setup lang="ts">
defineProps({
backPath: {
type: String,
default: () => '',
},
backName: {
type: String,
default: () => '',
},
currentName: {
type: String,
default: () => '',
},
})
</script>

7
src/http/index.ts
View File

@ -30,7 +30,9 @@ service.interceptors.request.use(
)
// 响应拦截
service.interceptors.response.use(
(res) => {
ElMessage.closeAll()
const { data } = res
if (data.code == '200') {
return data
@ -40,13 +42,16 @@ service.interceptors.response.use(
} else if (data.code == '401') {
ElMessage.error(data.msg)
router.push('/login')
} else if (data.code == '500') {
ElMessage.error('请求失败')
}
else {
return data
}
},
(error) => {
ElMessage.closeAll()
ElMessage.error('请求失败')
console.log('error-异常', error)
}
)

2
src/router/index.ts
View File

@ -95,7 +95,7 @@ const routes: Array<RouteRecordRaw> = [
name: 'equipList',
component: () => import('views/equip/list.vue'),
meta: {
title: '',
title: '装备共享大厅',
activeName: 'equipList',
}
},

431
src/views/equip/detail.vue
View File

@ -1,9 +1,32 @@
<template>
<Navmenu></Navmenu>
<!-- <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">
@ -18,7 +41,7 @@
</div> -->
</div>
<div class="viewNnum">
<div>浏览 100</div>
<div>浏览 {{ pageData.searchNum }}</div>
<div style="color: #409eff; display: flex; align-items: center">
<Location style="width: 1em; height: 1em; margin-right: 8px" />
安徽省合肥市蜀山区
@ -44,9 +67,26 @@
</el-row>
<div class="options">
<div class="item_btn contact" @click="onAddCart">加入预约车</div>
<div class="item_btn applyFor" v-authBtn="() => openLease">
立即承租
<div>
<el-button
class="item_btn"
type="primary"
:disabled="pageData.isBookCar == 0"
@click="onAddCart"
>加入预约车</el-button
>
</div>
<div>
<el-button
class="item_btn applyFor"
:disabled="pageData.isBookCar == 0"
:style="pageData.isBookCar == 0 ? 'opacity:0.5' : ''"
style="background-color: #1abc9c"
v-authBtn="() => openLease"
>
立即承租
</el-button>
</div>
</div>
</div>
@ -69,10 +109,13 @@
</div> -->
</div>
<div class="phone">
<PhoneFilled
<!-- <PhoneFilled
style="width: 2em; height: 2em; margin-right: 8px; color: #409eff"
/>
<div style="font-size: 20px">187555555</div>
/> -->
<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>
@ -80,16 +123,16 @@
</div>
</div>
<div class="businessInfo">
<img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" />
<!-- <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" /> -->
<div class="business">
<img src="@/assets/img/bns-logo.png" class="avatar" />
<!-- <img src="@/assets/img/bns-logo.png" 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 class="value">{{ pageData[v.key] }}</div>
</div>
</div>
</div>
@ -100,7 +143,7 @@
<div class="detail">
<div class="publicTitle">装备详情</div>
<div class="publicLine"></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>
@ -115,12 +158,38 @@
</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 class="publicLine"></div> -->
<div class="urlList">
<img :src="v" v-for="(v, i) in goodsAppearanceList" :key="i" />
</div>
</div>
<div class="recommend">
<div class="appearance">
<div class="publicTitle">证书展示</div>
<div class="certificate">
<div>
合格证：
<a>xxxxxx.pdf</a>
</div>
<div>
检测证明：
<a>xxxxxx.pdf</a>
</div>
</div>
</div>
<div class="appearance">
<div class="publicTitle">出租记录</div>
<div class="rental-record">
<el-table :data="tableData" 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>
</div>
</div>
<!-- <div class="recommend">
<div class="publicTitle">
<div>为您推荐</div>
@ -141,7 +210,7 @@
:id="v.maId"
></equip-card>
</div>
</div>
</div> -->
<el-dialog
v-model="dialoglease"
@ -287,33 +356,128 @@
</div>
</template>
<script lang="ts" setup>
import ShowImg from './comoonents/showImg.vue'
import { computed, reactive, ref } from 'vue'
import EquipCard from 'components/equipCard.vue'
import Breadcrumb from '../../components/Breadcrumb/index.vue'
import {
getDetail,
getHotList,
equipCollect,
addBookCarApi,
apiSubmitLease,
apiGetAddressList,
addBookCarApi,
} from '@/http/api/equip'
import { useRoute, useRouter } from 'vue-router'
import Navmenu from '@/components/Navmenu/index.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import Navmenu from '@/components/Navmenu/index.vue'
import equipDetailTable from '@/components/equipDetailTable.vue'
import { ElMessage } from 'element-plus'
import { mainStore } from '@/store/main'
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref()
const store = mainStore()
const ruleFormRef = ref()
const pageParams = route.params
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([
{
@ -358,9 +522,14 @@ const businessList = reactive([
},
{
label: '上架数量',
key: 'companyUpNum',
key: 'devUapNum',
unit: '台',
},
{
label: '访问量',
key: 'companyVisitNum',
unit: '',
},
])
//装备详情数据map
@ -372,71 +541,71 @@ const equipDetailKeyList = reactive([
arg: '',
},
{
label: '装备类别',
key: 'typeName',
fn: '',
arg: '',
},
{
label: '装备组别',
key: 'groupName',
fn: '',
arg: '',
},
{
label: '装备名称',
key: 'deviceName',
fn: '',
arg: '',
},
{
label: '规格',
key: 'specification',
fn: '',
arg: '',
},
{
label: '品牌',
label: '装备品牌',
key: 'brand',
fn: '',
arg: '',
},
{
label: '装备类目',
key: 'groupName',
fn: '',
arg: '',
},
{
label: '装备型号',
key: 'modelName',
key: 'typeName',
fn: '',
arg: '',
},
{
label: '序列号码',
key: 'serialNumber',
label: '出厂时间',
key: 'specification',
fn: '',
arg: '',
},
{
label: '出场时间',
key: 'productionDate',
label: '整机重量(KG)',
key: '',
fn: '',
arg: '',
},
{
label: '工作时长',
key: 'workingHours',
fn: '',
arg: '',
},
{
label: '检验信息',
key: 'isExaminationPdf',
fn: 'openPdf',
arg: 'examinationPdf',
},
{
label: '保险信息',
key: 'isInsurancePdf',
fn: 'openPdf',
arg: 'insurancePdf',
},
// {
// 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',
// },
])
//
@ -605,6 +774,7 @@ const getData = async () => {
console.log('res详情数据', res)
pageData.value = res.data
goodsImgList.value = res.data.mainFileList
}
//获取推荐列表
@ -741,8 +911,54 @@ const onAddCart = async () => {
.showImg {
width: 38%;
border-radius: 15px;
overflow: hidden;
// 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 {
@ -828,13 +1044,13 @@ const onAddCart = async () => {
.options {
display: flex;
align-items: center;
.item_btn {
cursor: pointer;
width: 110px;
height: 40px;
line-height: 40px;
border-radius: 8px;
height: 36px;
line-height: 36px;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
@ -846,7 +1062,8 @@ const onAddCart = async () => {
}
.applyFor {
background-color: #1abc9c;
margin-left: 50px;
// background-color: #1abc9c;
color: #f7f9fa;
box-sizing: border-box;
line-height: 38px;
@ -905,7 +1122,8 @@ const onAddCart = async () => {
.businessInfo {
width: 100%;
height: 147px;
margin-top: 10px;
// height: 147px;
background: #f7f9fa;
border-radius: 15px;
position: relative;
@ -933,7 +1151,7 @@ const onAddCart = async () => {
.fonts {
.name {
font-size: 20px;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #333333;
@ -944,12 +1162,12 @@ const onAddCart = async () => {
display: flex;
.item {
font-size: 14px;
font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #333333;
color: #747373;
display: flex;
margin-right: 15px;
margin-right: 60px;
.label {
}
@ -965,14 +1183,15 @@ const onAddCart = async () => {
}
.publicTitle {
font-size: 20px;
font-size: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #333333;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
background-color: #1abc9c;
width: 150px;
height: 65px;
line-height: 65px;
text-align: center;
letter-spacing: 1px;
}
.publicLine {
@ -995,7 +1214,9 @@ const onAddCart = async () => {
.publicContent {
box-sizing: border-box;
padding: 40px 70px 10px;
padding: 40px 30px 10px;
border: 1px solid #1abc9c;
margin-bottom: 20px;
}
.detail {
@ -1006,9 +1227,9 @@ const onAddCart = async () => {
.item {
cursor: pointer;
width: calc(100% / 3);
font-size: 16px;
font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
// font-weight: 600;
display: flex;
margin-bottom: 35px;
@ -1040,6 +1261,20 @@ const onAddCart = async () => {
width: 100%;
}
}
.certificate {
padding: 40px 30px 10px;
div {
display: flex;
align-items: center;
margin-bottom: 30px;
a {
color: #54b4ff;
cursor: pointer;
}
}
}
}
.recommend {

16
src/views/equip/list.vue
View File

@ -96,6 +96,7 @@
:price="v.dayLeasePrice"
:company="v.companyName"
:personPhone="v.personPhone"
@click="onHandleDetails(v.maId)"
/>
<!-- <equip-card
class="card"
@ -372,7 +373,7 @@ const getDeviceListData = async (params: any = null, keyWord: any = null) => {
}
if (index === 3 && j.isChecked) {
searchParams.companyId = j.value
searchParams.level = 1
searchParams.level = j.value ? 1 : ''
}
})
})
@ -427,17 +428,9 @@ const selectScreen = (type: any, item: any, index: number) => {
e.isChecked = false
})
item.isChecked = !item.isChecked
// activeParams[type] = item.value
getDeviceListData()
}
//装备card被点击
const toDetail = (data) => {
router.push({
path: `/equipDetail/${data.id}`,
})
}
//分页page变化
const onCurrentChange = (val: number) => {
pageData.pageNum = val
@ -471,6 +464,11 @@ onMounted(() => {
onUnmounted(() => {
$bus.off('search')
})
// 点击跳转装备详情
const onHandleDetails = (id: number | string) => {
router.push(`/equipDetail/${id}`)
}
</script>
<style lang="scss" scoped>
.equipList {