From 1ab6209482188725c895048fcd82bcc7e8a97e0a Mon Sep 17 00:00:00 2001
From: wlikett <2331964395@qq.com>
Date: Tue, 5 Dec 2023 20:50:06 +0800
Subject: [PATCH] change

---
 index.html                          |   2 +-
 src/components/equipDetailTable.vue | 162 ++++++++++++++++++++++++++++
 src/views/equip/detail.vue          | 133 ++++++++++++++---------
 3 files changed, 246 insertions(+), 51 deletions(-)
 create mode 100644 src/components/equipDetailTable.vue
diff --git a/index.html b/index.html
index a888544..e705424 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/src/components/equipDetailTable.vue b/src/components/equipDetailTable.vue
new file mode 100644
index 0000000..1e8fc92
--- /dev/null
+++ b/src/components/equipDetailTable.vue
@@ -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>
diff --git a/src/views/equip/detail.vue b/src/views/equip/detail.vue
index 11790e0..f80407a 100644
--- a/src/views/equip/detail.vue
+++ b/src/views/equip/detail.vue
@@ -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;
