接口文档
5.图片详情
5.1 封装超链接组件
1.缓存图片详情页面需要滑动的图片数组和图片索引
1.1自定义组件并使用
首先在src下新建公共组件文件夹components并在下面新建超链接组件文件goDetail,定义组件
<template>
<!-- 定义组件 -->
<view>
组件
<slot></slot>
</view>
</template>
然后返回需要用到组件的首页推荐页面引入并使用组件
<script>
// 引入组件
import goDetail from "@/components/goDetail";
export default {
// 声明
components: {
goDetail,
},
</script>
//使用组件
<template>
<view class="monthes_item" v-for="item in monthes.items" :key="item.id">
<!-- 被<go-detail></go-detail>包住的地方替换插槽<slot></slot>位置 -->
<go-detail>
<image
mode="aspectFill"
:src="item.thumb + item.rule.replace('$<Height>', 360)"
></image>
</go-detail>
</view>
</template>
1.2传递接收数据(图片数组和图片索引)
首先给go-detail写一下属性
<template>
<view class="monthes_item" v-for="(item,index) in monthes.items" :key="item.id">
<go-detail :list="monthes.items" :index="index">
<image
mode="aspectFill"
:src="item.thumb + item.rule.replace('$<Height>', 360)"
></image>
</go-detail>
</view>
</template>
然后返回goDetail页接收数据
<script>
export default {
//接收数据
props:{
list:Array,
index:Number
},
mounted(){
console.log(this.list)
console.log(this.index)
}
};
</script>
2.跳转到图片的详情页面
首先在goDetail页面加一个点击事件
<template>
<!-- 定义组件 -->
<view @click="handleClick">
<slot></slot>
</view>
</template>
<script>
export default {
//接收数据
props:{
list:Array,
index:Number
},
mounted(){
// console.log(this.list)
// console.log(this.index)
},
methods:{
handleClick(){
// 1 将数据缓存下拉
getApp().globalData.imgList=this.list;
getApp().globalData.imgIndex=this.index;
// 2 再实现点击跳转页面
uni.navigateTo({
url:"/pages/imgDetail/index"
})
}
}
};
</script>
然后在page下新建图片详情页imgDetail
<template>
<view>
图片详情
</view>
</template>
<script>
export default {
onLoad(){
console.log(getApp().globalData)
}
};
</script>
5.2 使用moment.js处理特殊时间格式
<template>
<view class="user_time">{
{imgDetail.cnTime}}</view>
</template>
<script>
import moment from "moment";
// 设置语言为中文
moment.locale("zh-cn");
export default {
onLoad(){
console.log(getApp().globalData)
// xxx年前的数据
// atime的含义是秒,moment函数接收的是毫秒,所以乘1000
this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow();
}
};
</script>
5.3 发送请求获取数据
1.用户信息
1.1获取用户信息数据
<script>
import moment from "moment";
// 设置语言为中文
moment.locale("zh-cn");
export default {
data(){
return{
// 图片信息对象 包含着用户头像等
imgDetail:{}
}
},
onLoad(){
// console.log(getApp().globalData)
// 解构
const{imgList,imgIndex}=getApp().globalData;
this.imgDetail=imgList[imgIndex];
// xxx年前的数据
// atime的含义是秒,moment函数接收的是毫秒,所以乘1000
this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow();
}
};
</script>
1.2用户信息动态渲染
<template>
<view>
<!-- 用户信息 开始 -->
<view class="user_info">
<view class="user_icon"><image :src="imgDetail.user.avatar" mode="widthFix"></image></view>
<view class="user_desc">
<view class="user_name">{
{imgDetail.user.name}}</view>
<view class="user_time">{
{imgDetail.cnTime}}</view>
</view>
</view>
<!-- 用户信息 结束 -->
<!-- 高清大图 开始 -->
<view class="high_img">
<image mode="widthFix" :src="imgDetail.newThumb"></image>
</view>
<!-- 高清大图 结束 -->
<!-- 点赞 开始 -->
<view class="user_rank">
<view class="rank">
<text class="iconfont icondianzan">{
{imgDetail.rank}}</text>
</view>
<view class="user_collect">
<text class="iconfont iconshoucang">收藏</text>
</view>
</view>
<!-- 点赞 结束 -->
</view>
</template>
<script>
export default {
onLoad(){
this.imgDetail.newThumb=imgDetail.thumb+imgDetail.rule.replace('$<Height>',360);
}
};
</script>
<style lang="scss" scoped>
.user_info {
display: flex;
padding: 20rpx;
.user_icon {
padding: 0 20rpx;
image {
width: 88px;
border-radius: 50%;
}
}
.user_desc {
.user_name {
color: #000;
font-weight: 600;
}
.user_time {
color: #ccc;
font-size: 24rpx;
padding: 10rpx 0;
}
}
}
.user_rank {
display: flex;
height: 80rpx;
border-bottom: 5rpx solid #eee;
.rank {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.user_collect {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
2.评论数据
2.1获取评论数据
<script>
export default {
data(){
return{
// 图片信息对象 包含着用户头像等
imgDetail:{},
// 专辑数据 数组
album:[],
// 最热评论
hot:[],
// 最新评论
comment:[]
}
},
onLoad(){
// console.log(getApp().globalData)
// 解构
const{imgList,imgIndex}=getApp().globalData;
this.imgDetail=imgList[imgIndex];
this.imgDetail.newThumb=
imgDetail.thumb+imgDetail.rule.replace('$<Height>',360);
// 获取图片详情的id
// this.imgDetail.id
this.getComments(this.imgDetail.id);
},
methods:{
getComments(id){
this.request({
url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
})
.then(result=>{
// console.log(result);
this.album=result.res.album;