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