zoukankan      html  css  js  c++  java
  • 关于详情页的具体制作(二)

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

    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}
  • 相关阅读:
    防删没什么意思啊,直接写废你~
    绝大多数情况下,没有解决不了的问题,只有因为平时缺少练习而惧怕问题的复杂度,畏惧的心理让我们选择避让,采取并不那么好的方案去解决问题
    Java 模拟面试题
    Crossthread operation not valid: Control 'progressBar1' accessed from a thread other than the thread it was created on
    一步步从数据库备份恢复SharePoint Portal Server 2003
    【转】理解 JavaScript 闭包
    Just For Fun
    The database schema is too old to perform this operation in this SharePoint cluster. Please upgrade the database and...
    Hello World!
    使用filter筛选刚体碰撞
  • 原文地址:https://www.cnblogs.com/ljylearnsmore/p/14272713.html
Copyright © 2011-2022 走看看