discounts-minapp/pages/activity/detail.vue

<template>
  <view class="page">
    <zs-header color="#000"></zs-header>
    <view class="cover">
      <image :src="goods.goodsPath + '?x-oss-process=image/resize,h_750,w_750,m_fixed'" mode="aspectFit"></image>
    </view>
    <view class="title-box">
      <view class="title">
        {{ goods.goodsName }}
      </view>
      <view class="sub-title">
        {{ goods.goodsDescribe }}
      </view>
    </view>
    <view class="class-box relative">
      <view class="class-title">
        <view class="title">课程目录</view>
        <view class="class-length">共{{ courses.length }}节课</view>
      </view>


      <view v-for="item in courses" class="class-item" @click="goCourse(item.id)">
        <view class="image">
          <image :src="item.courseImg + '?x-oss-process=image/resize,h_164,w_218,m_fixed'" mode="aspectFit"></image>
        </view>
        <view class="item-info">
          <view class="item-title">{{ item.courseName }}</view>
          <view class="item-desc">{{ item.courseMsg }}</view>
          <view class="item-progress">学习进度 {{ item.per }}%</view>
        </view>
      </view>

    </view>

    <view class="class-box" style="display: flow-root;">
      <view class="class-title">
        <view class="title">研学心得</view>
        <view v-if="communityItemDetailVo" @click="edit(communityItemDetailVo)" class="class-length">编辑</view>
      </view>
      <view v-if="!communityItemDetailVo" class="slogan">
        行走的课堂，心灵的旅行。快来记录你的心路历程吧
      </view>
      <view v-if="!communityItemDetailVo" class="btn">
        <u-button shape="circle" customStyle="keepStudy" @click="toShare">记录研学历程</u-button>
      </view>
      <view v-if="communityItemDetailVo" class="community-item">
        <view class="community-text">
          {{ communityItemDetailVo.communityDetail }}
        </view>
        <view class="community-img" v-if="communityItemDetailVo.urls.length > 0">
          <image v-for="url in communityItemDetailVo.urls.filter((e, i) => i <= 3)" :src="url" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <view class="tab-group">
      <view class="tab active" @click="handleTab(1)">
        商品详情
      </view>
    </view>
    <view class="desc-box">
      <rich-text class="goods-desc" :nodes="goods.goodsDetail"></rich-text>
    </view>

  </view>
</template>

<script>
import { getStudyDetail } from '@/api/activity'
export default {
  data() {
    return {
      goods: {

      },
      communityItemDetailVo: null,
      courses: [],
      orderNo: null,
    };
  },
  methods: {
    toShare() {
      uni.navigateTo({
        url: '/share/sharePosts?orderNo=' + this.orderNo
      });
    },
    // 去课程详情页
    goCourse(id) {
      uni.navigateTo({
        url: `./courseDetail?id=${id}&orderNo=${this.orderNo}`
      })
    },
    getDetail(orderNo) {
      getStudyDetail(orderNo).then(res => {
        if (res.success) {
          this.orderNo = orderNo
          this.goods = res.content.goodsInfoVo
          this.courses = res.content.courses
          this.goods.goodsDetail = res.content.goodsInfoVo.goodsDetail.replace(/<img/gi, '<img class="img_class" ')
          this.communityItemDetailVo = res.content.communityItemDetailVo
          // 统一处理心得图片大小
          if (this.communityItemDetailVo) {
            this.communityItemDetailVo.urls = this.communityItemDetailVo.urls.map(url => url + '?x-oss-process=image/resize,h_164,w_164,m_fixed')
          }

        }
      })
    },
    edit(row) {
      uni.navigateTo({
        url: `/share/sharePosts?orderNo=${this.orderNo}&id=${row.id}`
      });
    }
  },
  onLoad({ orderNo }) {
    this.getDetail(orderNo)
  },
  onShow() {
    if (this.orderNo) {
      this.getDetail(this.orderNo)
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #F9F9F9;
  min-height: 100vh;

  .cover {
    height: 750rpx;
    width: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .title-box {
    margin: -176rpx 20rpx 0 20rpx;

    .title {
      font-size: 36rpx;
      color: #FFFFFF;
      font-weight: bold;
      margin-bottom: 15rpx;
    }

    .sub-title {
      font-size: 24rpx;
      color: #FFFFFF;
      font-weight: bold;
    }
  }
  .relative{
    position: relative;
    z-index:2;
  }

  .class-box {
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    margin-top: 20rpx;
    padding: 28rpx 20rpx 0 20rpx;
    // overflow: overlay;


    .class-title {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        color: #222222;
        font-weight: bold;
      }

      .class-length {
        font-size: 24rpx;
        color: #AAAAAA;
      }
    }

    .class-item {
      display: flex;
      justify-content: space-between;

      .image {
        width: 218rpx;
        height: 164rpx;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }

      .item-info {
        width: 500rpx;

        .item-title {
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
          margin-bottom: 16rpx;
        }

        .item-desc {
          font-size: 24rpx;
          color: #AAAAAA;
          margin-bottom: 40rpx;
        }

        .item-progress {
          font-size: 24rpx;
          color: #AAAAAA;
        }
      }

      padding: 20rpx 0;
      border-bottom: 1px solid #F0F0F0;

      &:last-child {
        border-bottom: none;
      }
    }

    .slogan {
      font-size: 24rpx;
      color: #AAAAAA;
      margin-top: 100rpx;
      text-align: center;
      margin-bottom: 28rpx;
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-bottom: 168rpx;
      padding: 0 184rpx;
    }

    .community-item {


      .community-text {
        color: #222222;
        font-size: 24rpx;
        margin-top: 20rpx;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        /* 显示的最大行数 */
        overflow: hidden;
      }

      .community-img {
        margin-top: 22rpx;
        display: flex;
        overflow-y: scroll;

        image {
          width: 164rpx;
          height: 164rpx;
          border-radius: 16rpx;
          margin-right: 18rpx;
        }
      }
    }
  }

  .tab-group {
    display: flex;
    background: #fff;
    margin-top: 20rpx;

    .tab {
      padding: 28rpx 0;
      font-size: 32rpx;
      color: #222222;
      font-weight: Bold;
      margin-left: 20rpx;
    }

    .tab.active {
      font-weight: 600;
    }
  }

}
</style>
<style lang="scss">
.desc-box {
  padding: 0 20rpx 20rpx 20rpx;

  .goods-desc {
    color: #222222;
    font-size: 24rpx;

    .img_class {
      max-width: 100% !important;
      vertical-align: bottom;
    }
  }
}
</style>