• 关于详情页的具体制作(二)


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

    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}
  • 相关阅读:
    Angularjs演示Service功能
    初始化应用程序数据ng-init指令
    AngularJs的ng-include的使用与实现
    把视图转换为字符串
    学习angularjs的内置API函数
    AngularJs自定义过滤器filter
    ASP.NET MVC的切片(Section)脚本(script)
    在ASP.NET MVC部署AngularJs
    MS SQL的某一数据库成了Single User模式
    AngularJs的MVC模式
  • 原文地址:https://www.cnblogs.com/ljylearnsmore/p/14272713.html
Copyright © 2020-2023  润新知