【uni-app】懂你找图--首页图片详情模块

接口文档

图片评论--ShowDoc

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;