SteelfurnitureWeb/src/views/home/index.vue

<template>
  <div class="bg-F5">
    <div class="container">
      <el-row class="mt2rem" :gutter="20">
        <el-col :span="4">
          <mymenu></mymenu>
        </el-col>
        <el-col :span="14">
          <el-carousel class="bannerD marquee" :autoplay="false">
            <el-carousel-item>
              <img class="banner" src="@assets/lunbo1.png" att />
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner" src="@assets/lunbo2.png" att />
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner" src="@assets/lunbo3.png" att />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="6">
          <div class="loginDiv">
            <div class="txDiv">
              <img
                v-if="loginAccount == ''"
                src="@assets/touxiang01.png"
                alt=""
              />
              <img v-else src="@assets/touxiang02.png" alt="" />
            </div>
            <div class="username" v-if="loginAccount == ''">您还未登录哦！</div>
            <div class="username" v-else>{{ loginAccount }}</div>
            <div class="btnDiv" v-if="loginAccount == ''">
              <router-link to="/login">
                <el-button class="leftBtn">登录</el-button>
              </router-link>
              <router-link to="/register">
                <el-button class="rightBtn">注册</el-button>
              </router-link>
            </div>
          </div>
          <div class="noticeDiv">
            <div class="noticeTitle">
              通知公告
              <router-link to="/news?active=first">
                <span class="more"
                  >more<i class="el-icon-d-arrow-right"></i
                ></span>
              </router-link>
            </div>
            <div
              class="notice"
              v-for="item in noticeListTzgg"
              :key="item.noticeId"
            >
              <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
                {{ item.noticeTitle }}
              </router-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
      <div class="fwnl">
        <div class="fwnlItem">
          <div class="numDiv">
            <img src="@assets/qiyeruzhu.png" alt />
            <span>1536</span>
          </div>
          <div class="titleDiv">
            <span>1536</span>
            家钢制家具生产企业入驻
          </div>
          <div class="line"></div>
        </div>
        <div class="fwnlItem">
          <div class="numDiv">
            <img src="@assets/chanpin.png" alt />
            <span>1536</span>
          </div>
          <div class="titleDiv">
            <span>1536</span>
            个钢制家具产品入驻
          </div>
          <div class="line"></div>
        </div>
        <div class="fwnlItem">
          <div class="numDiv">
            <img src="@assets/huiyuan.png" alt />
            <span>1536</span>
          </div>
          <div class="titleDiv">
            <span>1536</span>
            位平台会员注册
          </div>
          <div class="line"></div>
        </div>
        <div class="fwnlItem">
          <div class="numDiv">
            <img src="@assets/yingyee.png" alt />
            <span>1536</span>
          </div>
          <div class="titleDiv">
            <span>1536</span>
            万在线电商营业额
          </div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 广告位 -->
      <div class="ggzw bg-84 mt2rem">办公系列广告占位</div>
      <div class="partTitle">
        <span class="orangeLine"></span>热门商品
        <router-link to="/mall">
          <span class="more">more<i class="el-icon-d-arrow-right"></i></span>
        </router-link>
      </div>
      <div class="rmsp">
        <router-link
          :to="`/shop/${item.companyId}/${item.id}`"
          class="product"
          v-for="item in hotlistArr"
          :key="item.id"
        >
          <div class="rmspItem">
            <div class="imgDiv">
              <img :src="item.cover" alt />
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="money">
              ¥
              <span>{{ item.price }}</span>
            </div>
            <div class="company mt15px">{{ item.companyName }}</div>
          </div>
        </router-link>
      </div>
      <div class="partTitle">
        <span class="orangeLine"></span>品牌商家<span class="more"
          >more<i class="el-icon-d-arrow-right"></i
        ></span>
      </div>
      <div class="rmsp">
        <div class="ppsjItem" v-for="item in 5" :key="item">
          <div class="imgDiv2">
            <img src="@assets/changjia.png" alt />
          </div>
          <div class="name">洛阳科飞亚有限公司</div>
          <div class="company">主营商品:文件柜，办公柜，文件柜，办公柜</div>
        </div>
      </div>
      <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
      <el-row :gutter="20" class="xqgy">
        <el-col :span="4">
          <mymenu></mymenu>
        </el-col>
        <el-col :span="10">
          <div class="xqDiv">
            <div class="xqTitle">
              <img src="@assets/xuqiu.png" alt />需求
              <router-link to="/info?active=demand">
                <span class="more"
                  >more<i class="el-icon-d-arrow-right"></i
                ></span>
              </router-link>
            </div>
            <router-link
              :to="`/info/buyDetail?id=${item.id}`"
              v-for="item in demandList"
              :key="item.id"
            >
              <div class="xq">
                <div class="con">【求购】{{ item.purchaseTitle }}</div>
                <div class="date">{{ item.releaseTime }}</div>
              </div>
            </router-link>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="xqDiv">
            <div class="xqTitle">
              <img src="@assets/gongyingshang.png" alt />供应商
              <router-link to="/info?active=supply">
                <span class="more"
                  >more<i class="el-icon-d-arrow-right"></i
                ></span>
              </router-link>
            </div>
            <router-link
              :to="`/info/supplyDetail?id=${item.id}`"
              v-for="item in supplyList"
              :key="item.id"
            >
              <div class="xq">
                <div class="con">【供应】{{ item.supplyTitle }}</div>
                <div class="date">{{ item.releaseTime }}</div>
              </div>
            </router-link>
          </div>
        </el-col>
      </el-row>
      <!-- 广告位 -->
      <div class="ggzw bg-88 mt2rem">智能家具保险柜广告占位</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="partTitle">
            <span class="orangeLine"></span>行业资讯
            <router-link to="/news?active=second">
              <span class="more"
                >more<i class="el-icon-d-arrow-right"></i
              ></span>
            </router-link>
          </div>
          <div class="hyzxDiv">
            <router-link
              :to="`/news/newsDetail?noticeId=${hyzxFirst.noticeId}`"
            >
              <div class="topDiv">
                <div class="leftDiv">
                  <div>
                    <img :src="hyzxFirst.fmzFileUrl" alt />
                  </div>
                </div>
                <div class="rightDiv">
                  <div class="title">{{ hyzxFirst.noticeTitle }}</div>
                  <div class="content" v-html="hyzxFirst.noticeContent"></div>
                  <div class="date">{{ hyzxFirst.createTime }}</div>
                </div>
              </div>
            </router-link>
            <ul class="bottomUl">
              <li v-for="item in hyzxOther" :key="item.noticeId">
                <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
                  {{ item.noticeTitle }}
                </router-link>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="partTitle">
            <span class="orangeLine"></span>家具保养
            <router-link to="/news?active=third">
              <span class="more"
                >more<i class="el-icon-d-arrow-right"></i
              ></span>
            </router-link>
          </div>
          <div class="hyzxDiv">
            <router-link
              :to="`/news/newsDetail?noticeId=${jjbyFirst.noticeId}`"
            >
              <div class="topDiv">
                <div class="leftDiv">
                  <div>
                    <img :src="hyzxFirst.fmzFileUrl" alt />
                  </div>
                </div>
                <div class="rightDiv">
                  <div class="title">{{ jjbyFirst.noticeTitle }}</div>
                  <div class="content" v-html="jjbyFirst.noticeContent"></div>
                  <div class="date">{{ jjbyFirst.createTime }}</div>
                </div>
              </div>
            </router-link>
            <ul class="bottomUl">
              <li v-for="item in hyzxOther" :key="item.noticeId">
                <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
                  {{ item.noticeTitle }}
                </router-link>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { Component, Vue } from "vue-property-decorator";
import mymenu from "@/components/menu.vue";
export default {
  name: "app",
  components: {
    mymenu
  },
  data() {
    return {
      shangpin: [],
      demandList: [],
      supplyList: [],
      noticeListTzgg: [],
      noticeListHyzx: [],
      hyzxFirst: {},
      hyzxOther: [],
      noticeListJjby: [],
      jjbyFirst: {},
      jjbyOther: [],
      loginAccount: "",
      hotlistArr: []
    };
  },
  methods: {
    // 通知公告前5条 liuqiwen
    noticeList(noticeType) {
      var that = this;
      that
        .$post("/interface/notice/getNoticeListTop5", {
          noticeType: noticeType
        })
        .then(function(res) {
          if (!res[0]) {
            for (let i = 0; i < res[1].list.length; i++) {
              res[1].list[i].fmzFileUrl =
                that.$basePath + res[1].list[i].fmzFileUrl;
            }
            if (noticeType == 1) {
              that.noticeListTzgg = res[1].list;
            } else if (noticeType == 2) {
              that.noticeListHyzx = res[1].list;
              that.hyzxFirst = that.noticeListHyzx[0];
              that.hyzxOther = that.noticeListHyzx.splice(1, 4);
            } else {
              that.noticeListJjby = res[1].list;
              that.jjbyFirst = that.noticeListJjby[0];
              that.jjbyOther = that.noticeListJjby.splice(1, 4);
            }
          }
        });
    },
    // 需求信息前十条数据  liuqiwen
    demandInfoTenList() {
      var that = this;
      that.$post("/demand/info/getDemandInfoTenList").then(function(res) {
        console.log(res);
        if (!res[0]) {
          that.demandList = res[1].demandList;
        }
      });
    },
    // 供应信息前10条 liuqiwen
    supplyInfoTenLsit() {
      var that = this;
      that.$post("/supply/info/getSupplyInfoTenLsit").then(function(res) {
        console.log(res);
        if (!res[0]) {
          that.supplyList = res[1].supplyList;
        }
      });
    },
    // 热门商品 liuqiwen
    hotlist() {
      var that = this;
      that.$post("/goods/info/hotlist").then(function(res) {
        console.log(res);
        if (!res[0]) {
          for (let i = 0; i < res[1].list.length; i++) {
            res[1].list[i].cover = that.$basePath + res[1].list[i].cover;
          }
          that.hotlistArr = res[1].list;
        }
      });
    }
  },
  activated() {
    if (this.$store.state.user.UserInfo) {
      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
    }
  },
  mounted() {
    this.noticeList(1);
    this.noticeList(2);
    this.noticeList(3);
    this.demandInfoTenList();
    this.supplyInfoTenLsit();
    this.hotlist();
  }
};
</script>
<style lang="scss" scoped>
.bannerD {
  height: 39rem;
  .banner {
    width: 100%;
    height: 100%;
  }
}
.loginDiv {
  height: 16rem;
  background: #fff;
  border-radius: 0.4rem;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  .txDiv {
    img {
      height: 5.8rem;
      width: 5.8rem;
      border-radius: 50%;
    }
  }
  .username {
    height: 2.4rem;
    line-height: 2.4rem;
    font-size: 1.2rem;
    color: #666;
  }
  .btnDiv {
    padding-top: 1rem;
    font-size: 1.4rem;
    .leftBtn {
      width: 40%;
      height: 2.8rem;
      line-height: 2.8rem;
      color: #fff;
      background: #fd5522;
      margin-right: 1rem;
      padding: 0;
      border: 0;
    }
    .rightBtn {
      width: 40%;
      height: 2.8rem;
      line-height: 2.8rem;
      color: #fd5522;
      border-color: #fd5522;
      background: #fff;
      padding: 0;
      // border: 0;
    }
  }
}
.noticeDiv {
  margin-top: 1rem;
  height: 22rem;
  background: #fff;
  border-radius: 0.4rem;
  padding: 2rem;
  box-sizing: border-box;
  .noticeTitle {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
    color: #333;
    .more {
      line-height: 3rem;
      font-size: 1.4rem;
      color: #999;
      float: right;
    }
  }
  .notice {
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    font-size: 1.4rem;
    color: #666;
    a {
      color: #666;
    }
  }
}
.partTitle {
  padding: 3rem 0 2rem 0;
  font-size: 1.8rem;
  color: #333;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
  .more {
    line-height: 3rem;
    font-size: 1.4rem;
    color: #999;
    float: right;
  }
}
.fwnl {
  width: 100%;
  height: 17rem;
  display: table;
  background: #fff;
  text-align: center;
  .fwnlItem {
    width: 25%;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    .numDiv {
      margin-bottom: 1rem;
      img {
        height: 3.6rem;
        vertical-align: bottom;
      }
      span {
        font-size: 1.8rem;
        color: #fd5522;
        font-weight: bold;
        vertical-align: bottom;
        margin-left: 1rem;
      }
    }
    .titleDiv {
      font-size: 1.6rem;
      color: #333;
    }
    .line {
      width: 0.1rem;
      height: 4rem;
      background: #e5e5e5;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -2rem;
    }
  }
}
.ggzw {
  height: 13rem;
  line-height: 13rem;
  font-size: 2.6rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.rmsp {
  width: 100%;
  overflow: hidden;
  .rmspItem,
  .ppsjItem {
    width: 18%;
    float: left;
    margin-right: 2.5%;
    background: #fff;
    border-radius: 0.4rem;
    box-sizing: border-box;
    &:last-child {
      margin-right: 0;
    }
    .name {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.4rem;
      color: #333;
      font-weight: bold;
      margin-top: 2rem;
      overflow: hidden;
    }
    .company {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.2rem;
      color: #666;
      overflow: hidden;
    }
  }
  .rmspItem {
    padding: 2rem;
    .imgDiv {
      border: 0.1rem solid #e5e5e5;
      text-align: center;
      line-height: 0;
      img {
        width: 100%;
      }
    }
    .money {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.8rem;
      color: #fd5522;
      margin-top: 1.5rem;
    }
  }
  .ppsjItem {
    padding-bottom: 1.6rem;
    .imgDiv {
      img {
        width: 100%;
      }
    }
    .name {
      padding: 0 2rem;
      box-sizing: border-box;
    }
    .company {
      padding: 0 2rem;
      box-sizing: border-box;
    }
  }
}
.xqgy {
  .xqDiv {
    background: #fff;
    padding: 2rem;
    box-sizing: border-box;
    .xqTitle {
      height: 3rem;
      line-height: 3rem;
      font-size: 1.6rem;
      color: #fd5522;
      img {
        height: 1.6rem;
        vertical-align: middle;
        margin-right: 1rem;
      }
      .more {
        line-height: 3rem;
        font-size: 1.4rem;
        color: #999;
        float: right;
      }
    }
    .xq {
      height: 3.6rem;
      line-height: 3.6rem;
      overflow: hidden;
      .con {
        width: 65%;
        float: left;
        height: 100%;
        font-size: 1.4rem;
        color: #333;
        padding-right: 1rem;
        box-sizing: border-box;
        overflow: hidden;
      }
      .date {
        width: 35%;
        float: left;
        height: 100%;
        font-size: 1.2rem;
        color: #666;
        text-align: right;
      }
    }
  }
}
.hyzxDiv {
  background: #fff;
  border-radius: 0.4rem;
  padding: 1.6rem;
  box-sizing: border-box;
  margin-bottom: 4rem;
  .topDiv {
    width: 100%;
    display: table;
    border: 0.1rem solid #e5e5e5;
    .leftDiv {
      display: table-cell;
      width: 30%;
      text-align: center;
      vertical-align: top;
      div {
        width: 80%;
        display: inline-block;
        border: 0.1rem solid #e5e5e5;
        line-height: 0;
        img {
          width: 100%;
        }
      }
    }
    .rightDiv {
      display: table-cell;
      width: 70%;
      padding-left: 1rem;
      box-sizing: border-box;
      vertical-align: top;
      .title {
        font-size: 1.6rem;
        color: #333;
        height: 3rem;
        line-height: 3rem;
        overflow: hidden;
      }
      .content {
        height: 5rem;
        line-height: 2.5rem;
        font-size: 1.2rem;
        color: #666;
        overflow: hidden;
      }
      .date {
        font-size: 1.2rem;
        color: #666;
        line-height: 2.4rem;
      }
    }
  }
  .bottomUl {
    list-style: none;
    padding-top: 1rem;
    li {
      height: 3rem;
      line-height: 3rem;
      font-size: 1.4rem;
      color: #333;
      overflow: hidden;
    }
  }
}
.bg-88 {
  background: #889fe9;
}
.bg-84 {
  background: #84ccc9;
}
.mt15px {
  margin-top: 1.5rem;
}
.mt2rem {
  margin-top: 2rem;
}
</style>