【Vue项目复习笔记】商品评论信息的展示

在data()里面增加一个变量

 commentInfo:{}
1

在created（）里面取出评论信息

 // 取出评论（有评论只取一条，没有就不取）
      if(data.rate.cRate!==0){
        this.commentInfo=data.rate.list[0]
      }
1
2
3
4

新建DetailCommentInfo.vue

<template>
  <div>
    <div v-if="Object.keys(commentInfo).length !== 0" class="comment-info">
      <div class="info-header">
        <div class="header-title">用户评价</div>
        <div class="header-more">
          更多
<!--          一个箭头-->
          <i class="arrow-right"></i>
        </div>
      </div>
      <div class="info-user">
        <img :src="commentInfo.user.avatar" alt="" />
        <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"
            :key="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from 'common/utils';

export default {
  name: "DetailCommentInfo",
  props: {
    commentInfo: {
      type: Object,
      default(){
        return{}
      }
    },
  },
  filters: {
    showDate(value) {
      //1.将时间戳转化为Date对象
      const  date = new Date(value * 1000);

      //2.将date进行格式化
      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, 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

导入到Detail.vue中，注册，传入数据

  <detail-comment-info :comment-info="commentInfo"></detail-comment-info>
1

最后的结果如下：

但是这里面值得注意的是，时间的展示。

服务器返回的并不是对应的时间，而是一串数字。它是以Unix时间元年为起点，返回对应的时间戳。比如上面的1535694719，这个数字就是一个时间戳。我们要做的就是将这个时间戳转化为对应的我们想要展示的时间。那么：如何将时间戳转成时间格式化字符串（在开发中非常常用）？
第一步：将时间戳转化为Date对象

const date=new Date(1535694719*1000)
1

因为时间戳是秒，而上面的Date对象是毫秒，所以要乘上1000

第二步：将date进行格式化，转成对应的字符串

在项目中应用如下：

 filters: {
    showDate(value) {
      //1.将时间戳转化为Date对象
      const  date = new Date(value * 1000);

      //2.将date进行格式化
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
1
2
3
4
5
6
7
8
9

yyyy：其中y是year
MM:Month月，之所以大写是将其与minutes做一个区分
dd:day 日
hh:hour小时(h12小时制，H24小时制)
其中我们的formatDate在utils中进行封装

export function formatDate(date, fmt) {
  //1.获取年份 y+表示一个或者多个
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      // () + "" 将数字变成字符串
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  //2.获取
  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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33