studytour-front/pages_order/growing/activity/index.vue

<template>
  <view class="page__view highlight">

    <!-- 导航栏 -->
		<navbar title="活动详情" leftClick @leftClick="$utils.navigateBack" />

    <view class="tabs">
      <uv-tabs 
        :list="tabs" 
        :scrollable="false" 
        lineColor="#00A9FF"
        lineWidth="48rpx"
        lineHeight="4rpx"
        :activeStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 500,
          'font-size': '32rpx',
          'line-height': 1.4,
          'color': '#00A9FF',
        }" 
        :inactiveStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '32rpx',
          'line-height': 1.4,
          'color': '#191919',
        }" 
        @click="clickTabs"
      ></uv-tabs>
    </view>

    <scroll-view type="custom" scroll-y="true" :scroll-into-view="scrollIntoView" class="scroll-view">
      <view class="scroll-view-content">

        <view class="cover-img">
          <image class="img" src="@/static/image/temp-20.png" mode="aspectFill"></image>
        </view>

        <view class="section" id="highlights">
          <view class="flex section-header">
            <view class="flex">
              <view class="flex icon">
                <image class="img" src="@/static/image/icon-mark.png" mode="widthFix"></image>
              </view>
              <view>活动掠影</view>
            </view>
            <view class="btn btn-mark">标记有我</view>
          </view>
          <view class="section-content highlights">
            <view class="highlights-item" v-for="(image, idx) in detail.highlights" :key="idx">
              <image class="img" :src="image" mode="scaleToFill"></image>
            </view>
          </view>
        </view>

        <view class="section" id="thoughts">
          <view class="section-header">学员心得</view>
          <view class="section-content thoughts">
            <view class="card" v-for="item in detail.thoughts" :key="item.id">
              <commentCard :data="item" @change="onCommentChange"></commentCard>
            </view>
          </view>
        </view>

        <view class="section report" id="report">
          <view class="section-header">行后报告</view>
          <view class="section-content report">
            <!-- todo -->
          </view>
        </view>

      </view>

    </scroll-view>
    
		<view class="flex bottom">
      <button class="flex btn btn-palin" @click="jumpToPoster">生成海报</button>
      <button class="flex btn btn-primary" @click="onApplyEmail">申请邮件</button>
    </view>
  </view>
</template>

<script>
  import commentCard from '@/pages_order/comment/commentCard.vue'

  export default {
    components: {
      commentCard,
    },
    data() {
      return {
        tabs: [
          { id: 'highlights', name: '活动掠影' },
          { id: 'thoughts', name: '学员心得' },
          { id: 'report', name: '行后报告' },
        ],
        current: 0,
        detail: {},
        scrollIntoView: null,
      }
    },
    onLoad() {
      this.getData()
    },
    methods: {
      async getData() {
        // todo

        this.detail = {
          highlights: [
            '/static/image/temp-38.png',
            '/static/image/temp-39.png',
            '/static/image/temp-40.png',
            '/static/image/temp-41.png',
            '/static/image/temp-42.png',
            '/static/image/temp-43.png',
            '/static/image/temp-44.png',
            '/static/image/temp-45.png',
            '/static/image/temp-46.png',
          ],
          thoughts: [],
        }
      },
			//点击tab栏
			clickTabs({ index }) {
        this.current = index
        this.scrollIntoView = this.tabs[this.current].id
			},
      onCommentChange() {
        // todo: refresh comment list
      },
      jumpToPoster() {
        // todo
      },
      onApplyEmail() {
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">

  .tabs {
    background: #D8F2FF;
  }

  .scroll-view {
    $tab-height: 44px;
    $bottom-height: 73px;
    height: calc(100vh - env(safe-area-inset-bottom) - #{$bottom-height} - #{$tab-height} - #{$navbar-height} - var(--status-bar-height) - 20rpx);

    &-content {
      padding: 32rpx;
    }
  }

  .cover-img {
    width: 100%;
    height: 348rpx;
    border-radius: 12rpx;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .section {
    margin-top: 32rpx;

    &-header {
      justify-content: space-between;
      font-size: 36rpx;
      font-weight: 600;
      color: #080808;

      .icon {
        margin-right: 24rpx;
        width: 36rpx;
        height: 36rpx;
        background: #080808;
        border-radius: 50%;
        overflow: hidden;
      
        .img {
          width: 24rpx;
          height: auto;
        }
      }

      .btn-mark {
        padding: 6rpx 22rpx;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 1.5;
        color: #FFFFFF;
        background: linear-gradient(to right, #21FEEC, #019AF9);
        border: 2rpx solid #00A9FF;
        border-radius: 30rpx;
      } 
    }

    &-content {

    }
  }

  .highlights {
    margin-top: 18rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;

    &-item {
      min-width: 0;
      border: 2rpx solid #CDCDCD;
      border-radius: 12rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 304rpx;
      }
    }
  }

  .thoughts {
    margin-top: 24rpx;

    .card + .card {
      margin-top: 24rpx;
    }
  }

  .report {
    margin-top: 24rpx;
  }

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
    z-index: 999;
    justify-content: space-between;
    column-gap: 32rpx;
		width: 100vw;
		padding: 32rpx 40rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		background: #FFFFFF;
		box-sizing: border-box;

    .btn {
      flex: 1;
      font-size: 36rpx;
      font-weight: 500;
      border-radius: 41rpx;
      line-height: 1.4;

      &-palin {
        padding: 14rpx 0;
        color: #252545;
        border: 2rpx solid #252545;
      }

      &-primary {
        padding: 14rpx 0;
        color: #FFFFFF;
        background: linear-gradient(to right, #21FEEC, #019AF9);
        border: 2rpx solid #00A9FF;
      }
    }

	}
</style>