change
This commit is contained in:
wlikett
parent
74bd26c254
commit
1ab6209482
|
|
@ -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>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="item otherItem" v-if="pageData.isAudit == 1">已审核</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewNnum">浏览{{pageData.searchNum}}</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -111,12 +111,12 @@
|
|||
>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
status-icon
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
status-icon
|
||||
>
|
||||
|
||||
<el-row>
|
||||
|
|
@ -137,9 +137,9 @@
|
|||
<el-col :span="15">
|
||||
<el-form-item label="进场时间" prop="entryTime">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.entryTime"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
v-model="ruleForm.entryTime"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
<el-radio-button :label="1" :disabled="!pageData.isOperator">
|
||||
是
|
||||
</el-radio-button>
|
||||
<el-radio-button :label="0" >
|
||||
<el-radio-button :label="0">
|
||||
否
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
|
@ -167,13 +167,13 @@
|
|||
<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 :label="0">
|
||||
不需要
|
||||
</el-radio-button>
|
||||
<el-radio-button :label="1" >
|
||||
<el-radio-button :label="1">
|
||||
增值税普票
|
||||
</el-radio-button>
|
||||
<el-radio-button :label="2" >
|
||||
<el-radio-button :label="2">
|
||||
增值税专票
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
|
@ -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)
|
||||
|
||||
//装备收藏状态
|
||||
|
|
@ -346,46 +371,52 @@ const isCollect = ref(false)
|
|||
|
||||
//我要租 表单数据
|
||||
const ruleForm = ref({
|
||||
address:'',//进场地址
|
||||
detailAddress:'',//详细地址
|
||||
entryTime:'',//进场时间
|
||||
duration:'',//工期时长
|
||||
machinist:0,//是否需要机手
|
||||
invoiceType:0,//发票类型
|
||||
projectDescription:''//项目说明
|
||||
address: '',//进场地址
|
||||
detailAddress: '',//详细地址
|
||||
entryTime: '',//进场时间
|
||||
duration: '',//工期时长
|
||||
machinist: 0,//是否需要机手
|
||||
invoiceType: 0,//发票类型
|
||||
projectDescription: ''//项目说明
|
||||
})
|
||||
const rules = reactive({
|
||||
address:[
|
||||
address: [
|
||||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||||
],
|
||||
detailAddress:[
|
||||
detailAddress: [
|
||||
{required: true, message: '请输入详细地址', trigger: 'blur'}
|
||||
],
|
||||
entryTime:[
|
||||
entryTime: [
|
||||
{required: true, message: '请选择进场时间', trigger: 'blur'}
|
||||
],
|
||||
duration:[
|
||||
duration: [
|
||||
{required: true, message: '请输入工期时长', trigger: 'blur'}
|
||||
],
|
||||
machinist:[
|
||||
machinist: [
|
||||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||||
],
|
||||
invoiceType:[
|
||||
invoiceType: [
|
||||
{required: true, message: '请输入进场地址', trigger: 'blur'}
|
||||
],
|
||||
projectDescription:[
|
||||
projectDescription: [
|
||||
{required: true, message: '请输入项目说明', trigger: 'blur'}
|
||||
],
|
||||
})
|
||||
//打开我要租表单
|
||||
const openLease = () => {
|
||||
|
||||
dialoglease.value = true
|
||||
}
|
||||
//切换收藏状态
|
||||
const collectChange = () => {
|
||||
isCollect.value = !isCollect.value
|
||||
}
|
||||
|
||||
//打开商家电话弹窗
|
||||
const openPhone = () => {
|
||||
dialogPhone.value = !dialogPhone.value
|
||||
}
|
||||
|
||||
// 打开新标签页查看pdf
|
||||
const openPdf = (name) => {
|
||||
window.open(name)
|
||||
}
|
||||
|
|
@ -393,8 +424,8 @@ const that = {
|
|||
openPdf
|
||||
}
|
||||
|
||||
const handelDetailListClick = (fnName,arg) => {
|
||||
if(fnName){
|
||||
const handelDetailListClick = (fnName, arg) => {
|
||||
if (fnName) {
|
||||
that[fnName](arg)
|
||||
}
|
||||
}
|
||||
|
|
@ -414,17 +445,19 @@ const init = () => {
|
|||
init()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep() .el-form-item{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.el-form-item__content{
|
||||
flex: 1;
|
||||
}
|
||||
:deep() .el-form-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.equipDetail {
|
||||
user-select: none;
|
||||
margin-top: 20px;
|
||||
user-select: none;
|
||||
margin-top: 20px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue