持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
我们对列表页改进下，练习使用下过滤器。在列表展示时增加展示时间，由于时间返回是一个时间戳格式，我们可以使用过滤器修改格式后展示，修改 news-item.vue 如下：
<template>
<view>
<view class="news_item" v-for="(item,index) in list" :key='index'>
<image :src="item.goods_small_logo"></image>
<view class="right">
<view class="title">{{item.goods_name}}</view>
<view class="info">
<text>价格：￥{{item.goods_price}}</text>
<text>发布时间：{{item.add_time | formatDate}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:['list'],
filters:{
formatDate(date){
const nDate = new Date(date*1000)
const year = nDate.getFullYear()
const month = (nDate.getMonth()+1).toString().padStart(2,0)
const day = nDate.getDay().toString().padStart(2,0)
return year+'-'+month+'-'+day
}
}
}
</script>
<style lang="scss">
.news_item{
display: flex;
padding: 10rpx 20rpx;
border-bottom: 1px solid $shop-color;
image{
width: 200rpx;
height: 200rpx;
min-width: 200rpx;
min-height: 200rpx;
}
.right{
margin-left: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title{
font-size: 30rpx;
}
.info{
font-size: 24rpx;
text:nth-child(2){
margin-left: 20rpx;
}
}
}
}
</style>
运行结果如图：
可以看到过滤器中我们封装一个函数，参数是你拿到的时间戳，如果是13位直接用，如果是10位*1000，然后分别获得年月日，拼接起来返回即可。我们在获得月时，需要+1，然后使用padStart进行了处理，如果不满两位，就在前面加一个0
我们也可以在 main.js 中定义一个全局的过滤器：
Vue.filter('formatDate',(date)=>{
const nDate = new Date(date*1000)
const year = nDate.getFullYear()
const month = (nDate.getMonth()+1).toString().padStart(2,0)
const day = nDate.getDay().toString().padStart(2,0)
return year+'-'+month+'-'+day
})
接下来我们完成资讯详情，我们首先在 news-item.vue 中增加点击事件navigator，然后使用在这个方法里使用this.$emit来触发父组件中itemClick方法。navigator这个方法还需要传入 goods_id
<template>
<view>
<view class="news_item" @click="navigator(item.goods_id)" v-for="(item,index) in list" :key='index'>
......
</view>
</view>
</template>
<script>
export default {
......
methods:{
navigator(id){
this.$emit('itemClick',id)
}
}
}
</script>
......
然后我们来到父组件 news.vue ，注册itemClick方法，然后调用goDetail，在这个方法里跳转详情页即可
<template>
<view class="news">
<news-item @itemClick='goDetail' :list='newsList'></news-item>
</view>
</template>
<script>
......
export default {
......
methods: {
......
goDetail(id){
console.log(id)
uni.navigateTo({
url:'/pages/news-detail/news-detail?id='+id
})
}
},
......
}
</script>
......
然后我们创建详情页，新建 news-detail.vue 组件，我们在 onLoad 中接收传过来的值，然后调用详情的接口，由于我们这里没有资讯详情的接口，所以我们先调用商品详情的接口，下一节我们完成商品详情时，直接使用这个页面即可
<template>
<view class="news_detail">
</view>
</template>
<script>
export default {
data() {
return {
id:0,
detail:{}
}
},
methods: {
async getDetail(){
const res = await this.$myRequest({
url:'/api/public/v1/goods/detail',
data: {
goods_id: this.id
}
})
this.detail = res.data.message
console.log(res)
},
},
onLoad(options) {
this.id = options.id
this.getDetail()
}
}
</script>
<style>
</style>
