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" @click="openPhone">联系商家</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="@/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>
                            </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" @click="gethotList">换一批</div>
            </div>
            <div class="content">
                <equip-card class="item"
                            @on-click="goDetail"
                            v-for="(v, i) in hotList"
                            :key="i"
                            :url="v.picUrl"
                            :name="`${v.modelName}${v.deviceName}`"
                            :tags="[v.maStatus,v.location]"
                            :company="v.companyName"
                            :price="v.monthLeasePrice"
                            timeUnit="月"
                            :id="v.maId"></equip-card>
            </div>
        </div>

        <el-dialog
                v-model="dialoglease"
                title="填写租赁信息"
                lock-scroll
                class="dialoglease"
                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-cascader :props="addressCascader" v-model="ruleForm.address" />
                            </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"
                                        value-format="YYYY-MM-DD"
                                        type="date"
                                        placeholder="请选择"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="工期时长" prop="duration">
                                <el-input v-model="ruleForm.duration" type="number" placeholder="请输入工期时长">
                                    <template #append>天</template>
                                </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="">
                                        不需要
                                    </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="请填写项目说明" rows="5" type="textarea"
                                          v-model="ruleForm.projectDescription"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </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="submit">
                      提交
                    </el-button>
                  </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>
import ShowImg from './comoonents/showImg.vue'
import {reactive, ref} from 'vue'
import EquipCard from 'components/equipCard.vue'
import {getDetail,getHotList,equipCollect,apiSubmitLease,apiGetAddressList} 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 equipDetailTable from '@/components/equipDetailTable.vue'
import {ElMessage} from "element-plus";

const router = useRouter()
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: 'isExaminationPdf',
        fn: 'openPdf',
        arg: 'examinationPdf'
    },
    {
        label: '保险信息',
        key: 'isInsurancePdf',
        fn: 'openPdf',
        arg: 'insurancePdf'
    }
])

//
const dialogPhone = ref(false)


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

//我要租  弹窗
const dialoglease = ref(false)

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

//推荐列表
const hotList = ref([])


//我要租 表单数据
const ruleForm = ref({
    address: [],//进场地址
    detailAddress: '',//详细地址
    entryTime: '',//进场时间
    duration: '',//工期时长
    machinist: 0,//是否需要机手
    invoiceType: '',//发票类型
    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 = async () => {
    isCollect.value = !isCollect.value
    const params = {
        maId:pageData.value.maId,
        isCollect:isCollect.value
    }
    const res = await equipCollect(params)
    if(res.code == '200'){
        ElMessage({
            type:'success',
            duration:1000,
            message:`装备${isCollect.value ? '收藏' : '取消收藏'}成功`
        })
    }
}

//打开商家电话弹窗
const openPhone = () => {
    dialogPhone.value = !dialogPhone.value

}

// 打开新标签页查看pdf
const openPdf = (name) => {
    if(name){
        window.open(name)
    }
}
const that = {
    openPdf
}


const addressCascader = {
    lazy:true,
    label:'name',
    value:'id',
    lazyLoad: async (node,resolve) =>{
        const { level,data } = node
        let nodes = []
        if(level == 0){
            const arr = await getAddressData()
            nodes = arr
        }else if(level == 1){
            const arr = await getAddressData(data.code)
            nodes = arr
        }else if(level == 2){
            const arr = await getAddressData(data.code)
            nodes = arr.map((item) => ({
                ...item,
                leaf:true
            }))
        }
        resolve(nodes)
    }
}


//获取地址列表
const getAddressData = async (code = '') => {
    let params = {}
    if(code){
        params = { code }
    }

    const res = await apiGetAddressList(params)

    return res.data || []
}

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.isInsurancePdf = res.data.insurancePdf ? '点击查看' : '暂无'
    res.data.isExaminationPdf = res.data.examinationPdf ? '点击查看' : '暂无'

    isCollect.value = res.data.collectId ? true : false
    pageData.value = res.data
}

//获取推荐列表
const gethotList = async () => {
    const params = {
        pageNum:1,
        pageSize:3
    }
    const res = await getHotList(params)
    hotList.value = res.rows
}

//获取详情数据
const goDetail = (val) => {
    router.push({
        path:`/equipDetail/${val.id}`
    })
}

//提交申请
const submit = async() => {
    console.log(ruleForm.value)
    const params = {
        addressId: ruleForm.value.address[2],
        address: ruleForm.value.detailAddress,
        realStartTime: ruleForm.value.entryTime,
        duration: ruleForm.value.duration,
        isMachinist: ruleForm.value.machinist,
        invoiceType: ruleForm.value.invoiceType,
        description: ruleForm.value.projectDescription
    }

    const res = await apiSubmitLease(params)

    if(res.code == '200'){
        ElMessage({
            message:'提交租赁申请成功',
            type:'success',
            duration:1500
        })
    }
    dialoglease.value = false
}

const  init = async () => {
    await gethotList()
    await getData()
}
init()
</script>
<style scoped lang="scss">
:deep(.dialoglease){
    margin: 10px auto 0 !important;
    min-width: 855px !important;
}

: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>