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

export class GoodsParam{
  constructor(info,rule) {
    this.image = info.images ? info.images[0] : ‘‘;
    this.infos = info.set;
    this.sizes = rule.tables;
  }
}

data() {
    return {
      paramInfo:{ },
    }
  },
this.paramInfo = new GoodsParam(big.itemParams.info, big.itemParams.rule );

<template>
  <div class="param-info" v-if="Object.keys(paramInfo).length !== 0">
    <table v-for="(table, index) in paramInfo.sizes"
           class="info-size" :key="index">
      <tr v-for="(tr, indey) in table" :key="indey">
        <td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
      </tr>
    </table>
    <table class="info-param">
      <tr v-for="(info, index) in paramInfo.infos">
        <td class="info-param-key">{{info.key}}</td>
        <td class="param-value">{{info.value}}</td>
      </tr>
    </table>
    <div class="info-img" v-if="paramInfo.image.length !== 0">
      <img :src="paramInfo.image" >
    </div>
  </div>
</template>

<script>
export default {
name: "detailparaminfo",
  props:[‘paramInfo‘]
}
</script>

<style scoped>
.param-info {
  padding: 20px 15px;
  font-size: 14px;
  border-bottom: 5px solid #f2f5f8;
}

.param-info table {
  width: 100%;
  border-collapse: collapse;
}

.param-info table tr {
  height: 42px;
}

.param-info table tr td {
  border-bottom: 1px solid rgba(100,100,100,.1);
}

.info-param-key {
  /*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
  width: 95px;
}

<template>
  <div v-if="Object.keys(commentInfo).length !== 0" class="comment-info">
    <div class="info-header">
      <div class="header-title">用户评价</div>
      <div class="header-more">
        更多
      </div>
    </div>
    <div class="info-user">
      <img :src="commentInfo.user.avatar" >
      <span>{{commentInfo.user.uname}}</span>
    </div>
    <div class="info-detail">
      <p>{{commentInfo.content}}</p>
      <div class="info-other">
        <span class="date">{{commentInfo.created|showDate}}</span>
        <span>{{commentInfo.style}}</span>
      </div>
      <div class="info-imgs">
        <img :src="item" v-for="(item, index) in commentInfo.images">
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "../../../src/components/common/utils/timejudge";

export default {
  name: "detailcommentinfo",
  props:["commentInfo"],
  filters: {
    showDate(value) {
      let date = new Date(value*1000);
      return formatDate(date, ‘yyyy-MM-dd hh:mm:ss‘)
    }
  }
}
</script>

<style scoped>
.comment-info {
  padding: 5px 12px;
  color: #333;
  border-bottom: 5px solid #f2f5f8;
}

.info-header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.header-title {
  float: left;
  font-size: 15px;
}

.header-more {
  float: right;
  margin-right: 10px;
  font-size: 13px;
}

.info-user {
  padding: 10px 0 5px;
}

.info-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.info-user span {
  position: relative;
  font-size: 15px;
  top: -15px;
  margin-left: 10px;
}

.info-detail {
  padding: 0 5px 15px;
}

.info-detail p {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
}

.info-detail .info-other {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.info-other .date {
  margin-right: 8px;
}

.info-imgs {
  margin-top: 10px;
}

.info-imgs img {
  width: 70px;
  height: 70px;
  margin-right: 5px;
}
</style>

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ‘‘).substr(4 - RegExp.$1.length));
  }
  let o = {
    ‘M+‘: date.getMonth() + 1,
    ‘d+‘: date.getDate(),
    ‘h+‘: date.getHours(),
    ‘m+‘: date.getMinutes(),
    ‘s+‘: date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ‘‘;
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};

function padLeftZero (str) {
  return (‘00‘ + str).substr(str.length);
};

<template>
<div class="goodslist">
  <goodsitem v-for="(item,index) in goods" :goodsitem="item" :key="index">{{item}}</goodsitem>
</div>
</template>

<script>
import goodsitem from "./goodsitem";
export default {
  name: "goodslist",
  components:{goodsitem},
  props:{
    goods:{
      type:Array,
      default(){
        return[]
      }
    }
  }

}
</script>

<style scoped>
.goodslist{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  padding: 1px;
}

</style>

<template>
<div class="goodsitem" @click="itemclick">
  <a>
  <img :src="showimage" @load="imageload" >
  <div class="goodsinfo">
    <p>{{goodsitem.title}}</p>
    <span class="price">{{goodsitem.price}}</span>
    <span class="collect">{{goodsitem.cfav}}</span>
  </div>
  </a>
</div>
</template>

<script>
export default {
name: "goodsitem",
  props:{
  goodsitem: {
    type:Object,
    default(){
      return{}
    }
  }
  },
  computed:{
  showimage(){
    return this.goodsitem.image || this.goodsitem.show.img
  }
  },
methods:{
  imageload(){
    this.$bus.$emit("itemimageload")
  },
  itemclick(){
    // console.log("----跳转到详情页");
    this.$router.push(‘./detail/‘+this.goodsitem.iid)
  }
}
}
</script>

<style scoped>
.goodsitem{
  padding-bottom: 40px;
  position: relative;
  width: 48%;
}
.goodsitem img{
  width: 100%;
  border-radius: 5px;
  border:1px solid lightgoldenrodyellow;
}
.goodsinfo{
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}
.goodsinfo p{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}
.price{
  color:lightpink;
  margin-right: 20px;
}
.collect{
  position: relative;
}
.collect::before{
  content: ‘‘;
  position: absolute;
  left: -15px;
  top:-1px;
  width: 14px;
  height: 14px;
background:url("../../../assets/img/collect.png") 0 0/14px 14px;
}
</style>

 <goodslist :goods="recommends"></goodslist>