detailswiper

<template>
  <detswiper class="fa">
      <detswiperitem v-for="item in itemtopimg">
          <img :src="item" alt="">
      </detswiperitem>
  </detswiper>
</template>

<script>
import detswiper from "../../../components/Swiper/Swiper.vue";
import detswiperitem from "../../../components/Swiper/SwiperItem.vue";
export default {
  name: "detailswiper",
  components: {
    detswiper,
    detswiperitem,
  },
  props: {
    itemtopimg: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>
<style scoped>
.fa{
    margin-top: 5px;
}
.fa img{
    width: 100%;
    height: 350px;
}
</style>

detailgoods

<template>
  <div>
    <div style="margin: 5px 10px">{{ this.goods.title }}</div>
    <div class="two">
      {{ this.goods.newPrice }}
      <span class="old">{{ this.goods.oldPrice }}</span>
      <span class="y">{{ this.goods.discount }}</span>
    </div>
    <div class="three">
      <span v-for="item in this.goods.columns" class="san">
        {{ item }}
      </span>
    </div>
    <div class="onefen"></div>
    <div class="four">
      <span class="fouritem" v-for="item in goods.services">
        <img :src="item.icon" />
        <span>{{ item.name }}</span></span
      >
    </div>
    <div class="twofen"></div>
  </div>
</template>

<script>
export default {
  name: "goodsdetail",
  props: {
    goods: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    console.log(this.goods);
  },
};
</script>

<style>
.two {
  margin: 5px 10px;
  font-size: 20px;
  color: rgb(427, 188, 0);
}
.old {
  font-size: 10px;
  color: darkgray;
  text-decoration: line-through;
}
.y {
  background-color: rgb(427, 188, 0);
  color: white;
  font-weight: bold;
  border-radius: 5px;
  font-size: 12px;
  margin-left: 10px;
  margin-bottom: 5px;
  padding: 0px 3px;
}
.three {
  display: flex;
  color: darkgrey;
  width: 100%;
  margin-top: 25px;
}
.san {
  flex: 1;
  margin: 5px 20px;
  font-size: 10px;
}
.onefen {
  background-color: rgb(236, 228, 228);
  width: 100%;
  height: 0.7px;
}
.four {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  padding: 10px;
  margin-top: 10px;
  overflow: hidden;
  height: 25px;
}
.fouritem img {
  width: 10px;
  height: 10px;
  position: relative;
  top: 0px;
}
.four span {
  color: #333;
  font-size: 8px;
}
.twofen {
  background-color: rgb(245, 239, 239);
  width: 100%;
  height: 6px;
}
</style>

detailshop

<template>
  <div class="shop">
    <img :src="this.shop.logo" alt="" class="logo" />
    <span class="name">{{ this.shop.name }}</span>
    <div class="sell">
        <table >
            <tr >
                <td >{{ sell +"&nbsp"}}</td>
               
                <td>{{this.shop.goodsCount}}</td>
            </tr>
             <tr >
                <td style="font-size:10px;color:rgb(93, 94, 94)">总销量</td>
                <td style="font-size:10px;color:rgb(93, 94, 94)">商品数目</td>
            </tr>
        </table>
     
    </div>
    <div class="score" >
        <div v-for="item in this.shop.score">
           {{item.name}} &nbsp &nbsp{{item.score}}  &nbsp &nbsp 
           <span :class="{ 'isbettertrue': item.isBetter }" class="isbetter"> 
               
               <span>
                   {{item.isBetter? "高":"低"}}
               </span>
               </span>
        </div>
        
    </div>
       <button class="detailshopbtn">进店逛逛</button>
  </div>
</template>

<script>
export default {
  name: "detailshop",
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created(){
      console.log("shop数据");
      console.log(this.shop.score);
  },
  computed:{
      sell(){
       if(this.shop.sells<10000){
           return this.shop.sells
       }else{
           return(this.shop.sells/10000).toFixed(1)+'万'
       }
      },

    
  }
};
</script>

<style>
.shop {
  position: relative;
}
.logo {
  width: 50px;
  height: 50px;
  border-radius: 40px;
  margin: 20px;
  display: inline-block;
}
.name {
  color: rgb(93, 94, 94);
  position: absolute;
  top: 30px;
  left: 80px;
  font-size: 20px;
}
.sell{
       width: 36%;
    font-size: 20px;
    margin-left: 25px;
    margin-top: 25px;
    border-right: 1px solid slategrey;
    padding: 0px;
}
.sell span{
    margin: 20px;
}
.score{
    position: absolute;
   right: 40px;
    top: 105px;
    line-height: 25px;
    font-size: 12px ;
    
}
.isbetter{
    background-color: rgb(55, 190, 123);
    padding: 2px;
    color: white;
    height: 15px;
    width: 15px;
   border-radius: 15px;
}
.detailshopbtn{
    background-color: rgb(241, 235, 235);
    border-radius: 20px;
    border: none;
    width: 70%;
    height: 40px;
    color: rgb(49, 47, 47);
    margin-top: 35px;
    margin-left: 59px;
}
.isbettertrue{
    background-color: red;
}
</style>

detail

<template>
   <!-- 导入导航 -->
  <detailnavbar ></detailnavbar>
  <!-- 导入轮播图 -->
  <detailswiper :itemtopimg="topimg"></detailswiper>
  <!-- 导入商品详情 -->
  <goodsdetail :goods="goods"></goodsdetail>
  <!-- 导入店铺详情 -->
  <detailshop :shop="shop"></detailshop>
</template>

<script>
import detailswiper from "./childcom/detailswiper.vue"
import detailnavbar from "./childcom/detailnavbar.vue";
//导入商品详情
import goodsdetail from "./childcom/goodsdetail.vue"
// 导入店铺详情
import detailshop from "./childcom/detailshop.vue"
import { detailjs,Goods,Shop} from "../../components/network/detail.js";
export default {
  name: "detail",
  data() {
    return {
      ids: null,
      topimg:[],
      goods:{},
      shop:{}
    };
  },
  components: {
    detailnavbar,
    detailswiper,
    goodsdetail,
    detailshop,

  },
  created() {
    this.ids = this.$route.params.id;
    detailjs(this.ids).then(res=> {
      console.log(res);
      const result = res.data.result;
      this.topimg=result.itemInfo.topImages
      // console.log(this.topimg);
        // 获取商品详情信息
      this.goods = new Goods(
        result.itemInfo,
        result.columns,
        result.shopInfo.services
      );
      //获取店铺详情
     this.shop = new Shop(result.shopInfo);
    });
    },
  methods: {},
};
</script>

<style>
</style>

写样式真的是太肝了