Merge branch 'main' into dev-sjf-2023-12-5
This commit is contained in:
commit
561fa32a42
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>机具租赁商城</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<el-table :data="[props]"
|
||||
border
|
||||
:header-cell-class-name="headerClassName"
|
||||
style="width: 100%">
|
||||
<el-table-column label="装备" min-width="200" >
|
||||
<template #default="scope">
|
||||
<div class="equipData">
|
||||
<div class="name">
|
||||
{{ scope.row.name }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
<div class="Img">
|
||||
<img :src="scope.row.url">
|
||||
</div>
|
||||
<div class="state">
|
||||
<div class="item" v-for="(v,i) in stateList" :key="i">
|
||||
<div class="label">
|
||||
{{ v.label }}：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ scope.row[v.key] || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="租金" min-width="120" >
|
||||
<template #default="scope">
|
||||
{{ scope.row.price }}/{{ scope.row.unit }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company" label="供应商" min-width="180" />
|
||||
</el-table>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
name:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
url:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
code:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
group:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
brand:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
specifications:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
position:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
price:{
|
||||
type: [String, Number],
|
||||
default:''
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default:''
|
||||
},
|
||||
company: {
|
||||
type: String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const stateList = ref([
|
||||
{
|
||||
label:'装备编号',
|
||||
key:'code'
|
||||
},{
|
||||
label:'装备类别',
|
||||
key:'type'
|
||||
},{
|
||||
label:'装备组别',
|
||||
key:'group'
|
||||
},{
|
||||
label:'品牌',
|
||||
key:'brand'
|
||||
},{
|
||||
label:'设备规格',
|
||||
key:'specifications'
|
||||
},{
|
||||
label:'设备位置',
|
||||
key:'position'
|
||||
},
|
||||
])
|
||||
|
||||
const headerClassName = () => {
|
||||
return 'headerColor'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep() .headerColor{
|
||||
background: #3E98FF !important;
|
||||
color: white !important;
|
||||
}
|
||||
.equipData{
|
||||
.name{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
}
|
||||
.desc{
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.Img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e5e5e5;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.state{
|
||||
flex: 1;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label{
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #858585;
|
||||
}
|
||||
.value{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="item contact">联系商家</div>
|
||||
<div class="item contact" @click="openPhone">联系商家</div>
|
||||
<div class="item applyFor" @click="openLease">我要租</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -183,20 +183,26 @@
|
|||
<el-row>
|
||||
<el-col :span="15">
|
||||
<el-form-item label="项目说明" prop="projectDescription">
|
||||
<el-input placeholder="请填写项目说明" type="textarea" v-model="ruleForm.projectDescription"></el-input>
|
||||
<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>
|
||||
|
||||
<equipDetailTable
|
||||
:price="pageData.monthLeasePrice"
|
||||
:name="`${pageData.modelName}${pageData.deviceName}`"
|
||||
:company="pageData.companyName"
|
||||
:url="pageData.picUrl"
|
||||
:brand="pageData.brand"
|
||||
:code="pageData.code"
|
||||
:group="pageData.groupName"
|
||||
:position="pageData.location"
|
||||
:specifications="pageData.specification"
|
||||
:type="pageData.typeName"
|
||||
unit="月"
|
||||
></equipDetailTable>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="dialoglease = false">
|
||||
|
|
@ -205,6 +211,23 @@
|
|||
</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>
|
||||
|
|
@ -215,6 +238,7 @@ 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'
|
||||
import equipDetailTable from '@/components/equipDetailTable.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
|
|
@ -333,12 +357,13 @@ const equipDetailKeyList = reactive([
|
|||
])
|
||||
|
||||
//
|
||||
const dialogPhone = ref(false)
|
||||
|
||||
|
||||
//装备详情数据
|
||||
const pageData = ref({})
|
||||
|
||||
//
|
||||
//我要租 弹窗
|
||||
const dialoglease = ref(false)
|
||||
|
||||
//装备收藏状态
|
||||
|
|
@ -379,13 +404,19 @@ const rules = reactive({
|
|||
})
|
||||
//打开我要租表单
|
||||
const openLease = () => {
|
||||
|
||||
dialoglease.value = true
|
||||
}
|
||||
//切换收藏状态
|
||||
const collectChange = () => {
|
||||
isCollect.value = !isCollect.value
|
||||
}
|
||||
|
||||
//打开商家电话弹窗
|
||||
const openPhone = () => {
|
||||
dialogPhone.value = !dialogPhone.value
|
||||
}
|
||||
|
||||
// 打开新标签页查看pdf
|
||||
const openPdf = (name) => {
|
||||
window.open(name)
|
||||
}
|
||||
|
|
@ -417,6 +448,7 @@ init()
|
|||
:deep() .el-form-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -425,6 +457,7 @@ init()
|
|||
.equipDetail {
|
||||
user-select: none;
|
||||
margin-top: 20px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue