Zlpt_Portal/src/views/equip/detail.vue

<template>
    <Navmenu></Navmenu>
    <div class="equipDetail">
        <div class="top">
            <div class="showImg">
                <showImg :url-list="pageData.pictures || []"></showImg>
            </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">{{ pageData.maStatus }}</div>
                                <div class="item otherItem" v-if="pageData.isAudit == 1">已审核</div>
                            </div>
                        </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>
                                <div class="value">{{
                                    v.key.split(',').map(key => {
                                      return pageData[key]
                                    }).join('')
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="Top">
                            <div class="price">
                                ￥
                                <span>{{ pageData.monthLeasePrice }}</span>
                                /月
                            </div>
                            <div class="collect" @click="collectChange">
                                <el-icon class="no" v-show="!isCollect">
                                    <Star/>
                                </el-icon>
                                <el-icon class="yes" v-show="isCollect">
                                    <StarFilled/>
                                </el-icon>
                                {{ isCollect ? '装备已收藏' : '收藏装备' }}
                            </div>
                        </div>
                        <div class="options">
                            <div class="item contact">联系商家</div>
                            <div class="item applyFor" @click="openLease">我要租</div>
                        </div>
                    </div>
                </div>
                <div class="businessInfo">
                    <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png"/>

                    <div class="business">
                        <img
                                :src="pageData.companyLogoUrl"
                                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>
                            </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="publicLine"></div>
            <div class="urlList publicContent">
                <img :src="v" v-for="(v, i) in (pageData.pictures || [])" :key="i"/>
            </div>
        </div>
        <div class="recommend">
            <div class="publicTitle">
                <div>为您推荐</div>

                <div class="change">换一批</div>
            </div>
            <div class="content">
                <equip-card class="item" v-for="(v, i) in 3" :key="i" :id="i"></equip-card>
            </div>
        </div>

        <el-dialog
                v-model="dialoglease"
                title="填写租赁信息"
                lock-scroll
                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-input placeholder="请输入地址" v-model="ruleForm.address"></el-input>
                            </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"
                                    type="date"
                                    placeholder="请选择"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="工期时长" prop="duration">
                                <el-input placeholder="请输入地址" v-model="ruleForm.duration"></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="0" >
                                        不需要
                                    </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="请填写项目说明" 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>

            <template #footer>
                  <span class="dialog-footer">
                    <el-button type="primary" @click="dialoglease = false">
                      提交
                    </el-button>
                  </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import ShowImg from './comoonents/showImg.vue'
import {reactive, ref} from 'vue'
import EquipCard from 'components/equipCard.vue'
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'

const route = useRoute()

const pageParams = route.params
//设备简略基本信息
const equipBaseInfoList = reactive([
    {
        label: '设备规格',
        key: 'specification'
    },
    {
        label: '设备单位',
        key: 'companyName'
    },
    {
        label: '配备机手',
        key: 'isOperatorCn'
    },
    {
        label: '发布时间',
        key: 'createTime'
    },
    {
        label: '更新时间',
        key: 'updateTime'
    }
])
//商家标签信息
const businessList = reactive([
    {
        label: '入驻时间',
        key: 'companyCreateTime',
        unit: ''
    },
    {
        label: '上架数量',
        key: 'companyUpNum',
        unit: '台'
    }
])

//装备详情数据map
const equipDetailKeyList = reactive([
    {
        label: '装备编号',
        key: 'code',
        fn: '',
        arg: ''
    },
    {
        label: '装备类别',
        key: 'typeName',
        fn: '',
        arg: ''
    },
    {
        label: '装备组别',
        key: 'groupName',
        fn: '',
        arg: ''
    },
    {
        label: '装备名称',
        key: 'deviceName',
        fn: '',
        arg: ''
    },
    {
        label: '规格/操作重量',
        key: 'specification',
        fn: '',
        arg: ''
    },
    {
        label: '品牌',
        key: 'brand',
        fn: '',
        arg: ''
    },
    {
        label: '装备型号',
        key: 'modelName',
        fn: '',
        arg: ''
    },
    {
        label: '序列号码',
        key: 'serialNumber',
        fn: '',
        arg: ''
    },
    {
        label: '出场时间',
        key: 'productionDate',
        fn: '',
        arg: ''
    },
    {
        label: '工作时长',
        key: 'workingHours',
        fn: '',
        arg: ''
    },
    {
        label: '检验信息',
        key: 'look',
        fn: 'openPdf',
        arg: 'examinationPdf'
    },
    {
        label: '保险信息',
        key: 'look',
        fn: 'openPdf',
        arg: 'insurancePdf'
    }
])

//


//装备详情数据
const pageData = ref({})

//
const dialoglease = ref(false)

//装备收藏状态
const isCollect = ref(false)

//我要租 表单数据
const ruleForm = ref({
    address:'',//进场地址
    detailAddress:'',//详细地址
    entryTime:'',//进场时间
    duration:'',//工期时长
    machinist:0,//是否需要机手
    invoiceType:0,//发票类型
    projectDescription:''//项目说明
})
const rules = reactive({
    address:[
        {required: true, message: '请输入进场地址', trigger: 'blur'}
    ],
    detailAddress:[
        {required: true, message: '请输入详细地址', trigger: 'blur'}
    ],
    entryTime:[
        {required: true, message: '请选择进场时间', trigger: 'blur'}
    ],
    duration:[
        {required: true, message: '请输入工期时长', trigger: 'blur'}
    ],
    machinist:[
        {required: true, message: '请输入进场地址', trigger: 'blur'}
    ],
    invoiceType:[
        {required: true, message: '请输入进场地址', trigger: 'blur'}
    ],
    projectDescription:[
        {required: true, message: '请输入项目说明', trigger: 'blur'}
    ],
})
//打开我要租表单
const openLease = () => {

    dialoglease.value = true
}
//切换收藏状态
const collectChange = () => {
    isCollect.value = !isCollect.value
}
const openPdf = (name) => {
    window.open(name)
}
const that = {
    openPdf
}

const handelDetailListClick = (fnName,arg) => {
    if(fnName){
        that[fnName](arg)
    }
}

//获取页面数据
const getData = async () => {
    const res = await getDetail(pageParams.id)
    res.data.isOperatorCn = res.data.isOperator ? '是' : '否'
    res.data.look = '点击查看'
    isCollect.value = res.data.collectId ? true : false
    pageData.value = res.data
    console.log(pageData.value)
}
const init = () => {
    getData()
}
init()
</script>
<style scoped lang="scss">
:deep() .el-form-item{
    display: flex;
    width: 100%;
    .el-form-item__content{
        flex: 1;
    }
}

.equipDetail {
    user-select: none;
    margin-top: 20px;
  .top {
    display: flex;
    margin-bottom: 50px;

    .showImg {
      width: 38%;
      border-radius: 15px;
      overflow: hidden;
      margin-right: 30px;
    }

    .baseInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .equipInfo {
        display: flex;

        .left {
          margin-right: 5px;

          .title {
            display: flex;
            align-items: center;

            .name {
              font-size: 24px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              color: #000000;
            }

            .tag {
              display: flex;
              align-items: center;

              .item {
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #005af2;
                margin-left: 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;
          }

          .infoBox {
            margin-top: 20px;

            .item {
              display: flex;
              align-items: center;
              margin-bottom: 18px;

              .label {
                font-size: 15px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #8e8e8e;
                margin-right: 15px;
              }

              .value {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                color: #333333;
              }
            }
          }
        }

        .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;
            }
          }

          .options {
            display: flex;
            justify-content: flex-end;

            .item {
              cursor: pointer;
              width: 110px;
              height: 40px;
              line-height: 40px;
              border-radius: 4px;
              font-size: 18px;
              font-weight: 600;
              text-align: center;
            }

            .contact {
              color: #ffffff;
              background: #3cabff;
              margin-right: 20px;
            }

            .applyFor {
              border: 1px solid #3cabff;
              color: #3cabff;
              box-sizing: border-box;
              line-height: 38px;
            }
          }
        }
      }

      .businessInfo {
        width: 100%;
        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: 20px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              color: #333333;
              margin-bottom: 12px;
            }

            .other {
              display: flex;

              .item {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
                display: flex;
                margin-right: 15px;

                .label {
                }

                .value {
                }
              }
            }
          }
        }
      }
    }
  }

  .publicTitle {
    font-size: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #333333;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .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 70px 10px;
  }

  .detail {
    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        cursor: pointer;
        width: calc(100% / 3);
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        display: flex;
        margin-bottom: 35px;

        .label {
          color: #8e8e8e;
        }

        .value {
          color: #333333;
        }

        .fnValue {
          color: #0087cd;
        }
      }
    }
  }

  .appearance {
    margin-bottom: 20px;

    .urlList {
      img {
        width: 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>