kboss/f/web-kboss/src/views/homePage/wxDetailPage.vue

<template>
  <div class="mainBox">
    <div class="header">
      <div class="logowx"><img src="../../assets/kyy/simple_logonew.png" alt=""></div>
      <div class="btnStyle" @click="$router.push('/login')"> 登录/注册</div>
    </div>
    <div class="banner" style="margin-top: 60px">
      {{ $route.query.productType === '0' ? "供给详情" : "需求详情" }}
    </div>
    <div class="detailInfo">
      <!--      {{ JSON.stringify($route.query) }}-->
      <div class="title">{{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}
        <span class="tagS">{{
            computedWord($route.query.productType === '0' ? dataObj.supplytype : dataObj.demandtype)
          }}</span>
      </div>
      <div class="tag">发布时间: {{ $route.query.productType === '0' ? dataObj.supplybegin : dataObj.demandbegin }}

        <!--        {{ (!dataObj.supplybegin && !dataObj.demandbegin) ? : '-':'' }}-->
        {{ (!dataObj.supplybegin && !dataObj.demandbegin) ? '-' : '' }}

      </div>
      <div class="tag">发布地点：
        {{ dataObj.provincename }}
      </div>
      <!--      <div class="tag">公司名：{{ dataObj.supplybegin }} {{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}<</div>-->
      <!--      <div class="tag">节点名字：{{ dataObj.createby }} {{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}<</div>-->
      <div style="margin-top: 35px;font-size: 18px;font-weight: 500">资源信息</div>
      <ul v-if="$route.query.productType=='0'" class="detail-ul">

        <li><span style="margin-right: 15px" class="tag">资源描述:</span>{{ dataObj.supplydesc }}</li>
        <li v-if="dataObj.framepowerway"><span style="margin-right: 15px"
                                               class="tag">供电方式:</span>{{ dataObj.framepowerway }}
        </li>
        <li v-if="dataObj.framepower"><span style="margin-right: 15px"
                                            class="tag">供电功率:</span>{{ dataObj.framepower }}KW
        </li>
        <li v-if="dataObj.frameheight"><span style="margin-right: 15px"
                                             class="tag">机柜高度:</span>{{ dataObj.frameheight }}
        </li>
        <li v-if="dataObj.supplynum"><span style="margin-right: 15px" class="tag">可租数量:</span>{{
            dataObj.supplynum
          }}
        </li>
        <!--        资源-->
        <li v-if="dataObj.gpuresource"><span style="margin-right: 15px" class="tag">计算资源:</span>{{
            dataObj.gpuresource
          }}
        </li>
        <li v-if="dataObj.gpunet"><span style="margin-right: 15px" class="tag">网络架构:</span>{{
            dataObj.gpunet
          }}
        </li>
        <li v-if="dataObj.priceunit"><span style="margin-right: 15px" class="tag">计费模式:</span>{{
            dataObj.priceunit
          }}
        </li>
        <li v-if="dataObj.gpuapplypflops"><span style="margin-right: 15px" class="tag">可租算力:</span>{{
            dataObj.gpuapplypflops
          }}
        </li>
        <li v-if="dataObj.gpuoccasion"><span style="margin-right: 15px" class="tag">试用场景:</span>{{
            dataObj.gpuoccasion
          }}
        </li>
        <!--        硬件-->

        <!--        <li v-if="dataObj.supplydesc"><span style="margin-right: 15px" class="tag">试用1场景:</span>{{-->
        <!--            dataObj.supplydesc-->
        <!--          }}-->
        <!--        </li>-->
        <li v-if="dataObj.goodsaddress"><span style="margin-right: 15px" class="tag">交易地址:</span>{{
            dataObj.goodsaddress
          }}
        </li>
        <li v-if="dataObj.expiretime"><span style="margin-right: 15px" class="tag">信息过期时间:</span>{{
            dataObj.expiretime
          }}
        </li>

        <li v-if="dataObj.contactuser"><span style="margin-right: 15px" class="tag">联系人:</span>{{
            dataObj.contactuser
          }}
        </li>
        <li v-if="dataObj.infopicurl">
          <img style="width: 150px;height: 150px;" :src="dataObj.infopicurl" alt="">
        </li>
        <li>
          <span style="margin-right: 15px" class="tag">产品单价:</span>
          <span style="font-weight: 700;color: blue" @click="$router.push('/login')">登录后查看</span></li>
      </ul>
      <ul v-else-if="$route.query.productType=='1'" class="detail-ul">
        <li><span style="margin-right: 15px" class="tag">需求说明:</span>{{ dataObj.demanddesc }}</li>
        <li><span style="margin-right: 15px" class="tag">联系人员:</span>{{ dataObj.contactuser }}</li>
        <li><span style="margin-right: 15px" class="tag">联系方式:</span>{{ dataObj.contactusermobile }}</li>
        <li><span style="margin-right: 15px" class="tag">需求时间:</span>{{ dataObj.demandbegin }}</li>
        <li><span style="margin-right: 15px" class="tag">需求预算:</span>{{ dataObj.budgetprice }}</li>
      </ul>
    </div>

    <div class="footerBox">
      <!--      <div>-->
      <!--        <div class="logowx"><img src="../../assets/kyy/simple_logonew.png" alt=""></div>-->
      <!--      </div>-->
      <span>版权所有 © 2023开元云（北京）科技有限公司  </span>
    </div>
  </div>

</template>


<script>
export default {
  name: "wxDetailPage",
  data() {
    return {
      detailData: {
        name: 'asdfsadf',
        time: 'asdf',
        address: 'asdf',
        description: 'asdasdasd',
        type: 'asdf',
        dian: "sadfdsa",
        num: 19,
        price: 'asdf'
      }
    }
  },
  methods: {
    computedWord(type) {
      if (type === '1') {
        return '机柜'
      } else if (type === '2') {
        return '带宽'
      } else if (type === '4') {
        return '算力'
      } else if (type === '5') {
        return '硬件'
      }
    }
  },
  computed: {
    dataObj() {
      return this.$route.query.dataObj
    },
    // productType() {
    //   return this.$route.query.productType
    // },
  }
}
</script>


<style scoped lang="scss">
.mainBox {
  width: 100%;
  height: 100vh;
  overflow-y: auto;

}

.header {
  position: fixed;
  top: 0;
  z-index: 1002;
  background: #fff;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner {
  height: 150px;
  background: url("./img/bg.png") no-repeat center;
  background-size: cover;
  color: white;
  font-size: 30px;
  font-weight: 700;
  padding-top: 50px;
  padding-left: 15px;
}

.detailInfo {
  width: 100%;
  padding: 32px;

}

.detailInfo {
  min-height: calc(100vh - 300px);

  .title {
    font-size: 24px;
    font-weight: 500;
  }
}

.tag {
  font-size: 14px;
  color: #8a8c8f !important;
  margin: 10px 0;
  margin-right: 5px;

}

.detail-ul {
  padding: 0;
  margin: 0;
  margin-top: 20px;

  li {
    margin: 10px 0;
  }

  * {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.logowx {
  width: 100px;
  height: 100%;

}

.btnStyle {
  height: calc(100% + 2px);
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #0749f2;
}

.footerBox {
  margin-top: 15px;
  width: 100%;
  height: 70px;
  background: #18202f;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagS {
  font-size: 14px;
  margin-left: 15px;
  background: rgb(0, 180, 42);
  color: white;
  padding: 3px 5px;
  border-radius: 2px;
}
</style>