关于详情页的具体制作（二）

实现这个的时候，是想着将这些请求来的数据进行一个整合，因此我将接口中所需要的这些数据，整合成一个类而导入。如下所写：

import {request} from './request'

export function getdetails(iid){
  return request({
    url:"detail",
    params:{
      iid
    }
  })
}



export class Good{
  constructor(itemInfo,columns,shopInfo) {
 this.title = itemInfo.title;
 this.newprice = itemInfo.price;
 this.oldprice = itemInfo.oldPrice;
 this.desc = itemInfo.discountDesc;
 this.columns = columns;
 this.service = shopInfo.services;
  }
}

之后在detail.vue中进行如下操作：

import {getdetails,Good} from "../../network/detail";
export default {
  name: "detail",
  components: {Detailnav, detailswiper,detailbaseinfo},
  data() {
    return {
      iid: null,
      topImages: [],
      good:{ },
      shop:{ }
    }
  },
  created() {
    this.iid = this.$route.params.iid
    getdetails(this.iid).then(res => {
      console.log(res);
      const big =res.data.result;
      this.topImages = big.itemInfo.topImages
      console.log(this.topImages)
      this.good = new Good(big.itemInfo,big.columns,big.shopInfo)
    })
  }
}
</script>

<style scoped>

</style>

之后再做一个组件，专门用来放入图上所需要的信息以及布局：

<template>
  <div class="base-info" v-if="Object.keys(good).length !== 0">
    <div class="info-title">{{good.title}}</div>
    <div class="info-price">
      <span class="n-price">{{good.newprice}}</span>
      <span class="o-price">{{good.oldprice}}</span>
      <span class="discount">{{good.desc}}</span>
    </div>
    <div class="info-other">
      <span>{{good.columns[0]}}</span>
      <span>{{good.columns[1]}}</span>
      <span>{{good.service[good.service.length -1].name}}</span>
    </div>
    <div class="info-service">
      <span class="info-service-item" v-for="index in good.service.length-1" :key="index">
        <img :src="good.service[index-1].icon">
        <span>{{good.service[index-1].name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",
  props: {
    good: {
      type: Object
    }
  }
}
</script>

<style scoped>
.base-info {
  margin-top: 15px;
  padding: 0 8px;
  color: #999;
  border-bottom: 5px solid #f2f5f8;
}
.info-title {
  color: #222
}
.info-price {
  margin-top: 10px;
}
.info-price .n-price {
  font-size: 24px;
  color: var(--color-high-text);
}
.info-price .o-price {
  font-size: 13px;
  margin-left: 5px;
  text-decoration: line-through;
}
.info-price .discount {
  font-size: 12px;
  padding: 2px 5px;
  color: #fff;
  background-color: var(--color-high-text);
  border-radius: 8px;
  margin-left: 5px;
  position: relative;
  top: -8px;
}
.info-other {
  margin-top: 15px;
  line-height: 30px;
  display: flex;
  font-size: 13px;
  border-bottom: 1px solid rgba(100,100,100,.1);
  justify-content: space-between;
}
.info-service {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
}
.info-service-item img {
   14px;
  height: 14px;
  position: relative;
  top: 2px;
}
.info-service-item span {
  font-size: 13px;
  color: #333;
}
</style>

之后只需要再在detail.vue中在加入标签、注册此标签且绑定传输的数据即可。

 <detailbaseinfo :good="good"></detailbaseinfo>
import detailbaseinfo from "./childcomponent/detailbaseinfo";
components: {Detailnav, detailswiper,detailbaseinfo}

接下来，还有关于店铺的详情信息也可以用此方法来处理，最终实现效果如此：

还是跟做商品详情差不多，创建一个类来整合数据，个人感觉这个思想是蛮好的，所以记录下。

直接在detail.js后加入这个类即可：

export class shop{
  constructor(shopInfo) {
    this.logo = shopInfo.shopLogo
    this.name = shopInfo.name
    this.fans = shopInfo.cFans
    this.sells = shopInfo.cSells
    this.score = shopInfo.score
    this.goodsCount = shopInfo.cGoods
  }
}

之后在detail.vue中加入以下所述东西：

<script>
import {getdetails,Good,shop} from "../../network/detail";
export default {
  name: "detail",
  components: {Detailnav, detailswiper,detailbaseinfo,detailshopinfo},
  data() {
    return {
      iid: null,
      topImages: [],
      good:{ },
      shop:{ }
    }
  },
  created() {
    // console.log(this.$route.params.iid)
    this.iid = this.$route.params.iid
    getdetails(this.iid).then(res => {
      console.log(res);
      const big =res.data.result;
      this.topImages = big.itemInfo.topImages
      console.log(this.topImages)
      this.good = new Good(big.itemInfo,big.columns,big.shopInfo)
      this.shop = new shop(big.shopInfo)
    })
  }
}
</script>

<style scoped>

</style>

之后再做一个组件detailshopinfo，专门用来放入上述所需要的信息以及布局：

<template>
  <div class="shop-info">
    <div class="shop-top">
      <img :src="shop.logo">
      <span class="title">{{shop.name}}</span>
    </div>
    <div class="shop-middle">
      <div class="shop-middle-item shop-middle-left">
        <div class="info-sells">
          <div class="sells-count">
            {{shop.sells | sellCountFilter}}
          </div>
          <div class="sells-text">总销量</div>
        </div>
        <div class="info-goods">
          <div class="goods-count">
            {{shop.goodsCount}}
          </div>
          <div class="goods-text">全部宝贝</div>
        </div>
      </div>
      <div class="shop-middle-item shop-middle-right">
        <table>
          <tr v-for="(item, index) in shop.score" :key="index">
            <td>{{item.name}}</td>
            <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
            <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="shop-bottom">
      <div class="enter-shop">进店逛逛</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailShopInfo",
  props: {
    shop: {
      type: Object
    }
  },
  filters: {
    sellCountFilter: function (value) {
      if (value < 10000) return value;
      return (value/10000).toFixed(2) + '万'
    }
  }
}
</script>

<style scoped>
.shop-info {
  padding: 25px 8px;
  border-bottom: 5px solid #f2f5f8;
}

.shop-top {
  line-height: 45px;
  display: flex;
  align-items: center;
}

.shop-top img {
   45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
}

.shop-top .title {
  margin-left: 20px;
  vertical-align: center;
}

.shop-middle {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.shop-middle-item {
  flex: 1;
}

.shop-middle-left {
  display: flex;
  justify-content: space-evenly;
  color: #333;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,.1);
}

.sells-count, .goods-count {
  font-size: 18px;
}

.sells-text, .goods-text {
  margin-top: 10px;
  font-size: 12px;
}

.shop-middle-right {
  font-size: 13px;
  color: #333;
}

.shop-middle-right table {
   120px;
  margin-left: 30px;
}

.shop-middle-right table td {
  padding: 5px 0;
}

.shop-middle-right .score {
  color: #5ea732;
}

.shop-middle-right .score-better {
  color: #f13e3a;
}

.shop-middle-right .better span {
  background-color: #5ea732;
  color: #fff;
  text-align: center;
}

.shop-middle-right .better-more span {
  background-color: #f13e3a;
}

.shop-bottom {
  text-align: center;
  margin-top: 10px;
}

.enter-shop {
  display: inline-block;
  font-size: 14px;
  background-color: #f2f5f8;
   150px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
}
</style>

之后再在detail.vue中写入如下代码即可。

 <detailshopinfo :shop="shop"></detailshopinfo>
import detailshopinfo from "./childcomponent/detailshopinfo";
components: {Detailnav, detailswiper,detailbaseinfo,detailshopinfo}