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" @click="onMark">标记有我</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" @click="previewImage(detail.highlights, idx)"></image>
            </view>
          </view>
        </view>

        <view class="section" id="thoughts">
          <view class="flex section-header">
            <view>学员心得</view>
            <view class="btn" @click="onAdd">新增心得</view>
          </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>

    <markPopup ref="markPopup"></markPopup>
    
    <record-form-popup ref="recordFormPopup" @submitted="getData"></record-form-popup>

    <posterPopup ref="posterPopup"></posterPopup>

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

<script>
  // import commentCard from '@/pages_order/comment/commentCard.vue'
  import commentCard from './commentCard.vue'
  import markPopup from '@/pages_order/growing/activity/markPopup.vue'
	import recordFormPopup from '@/pages_order/comment/recordFormPopup.vue'
	import posterPopup from '@/components/base/posterPopup.vue'

  export default {
    components: {
      commentCard,
      markPopup,
      recordFormPopup,
      posterPopup,
    },
    data() {
      return {
        id: null,
        tabs: [
          { id: 'highlights', name: '活动掠影' },
          { id: 'thoughts', name: '学员心得' },
          { id: 'report', name: '行后报告' },
        ],
        current: 0,
        detail: {},
        scrollIntoView: null,
      }
    },
    onLoad(arg) {
      const { id, shareId } = arg
      
			if (shareId) {
				uni.setStorageSync('shareId', shareId)
			}
      
			if (shareId && !uni.getStorageSync('token')) {
				
				uni.navigateTo({
					url: '/pages_order/auth/wxLogin'
				})

				return
			}

      this.id = id

      this.getData()
    },
    methods: {
      async getData() {

        try {
          const result = await this.$fetch('queryExperienceById', { recordId: this.id })
          const { imageContentList, experienceList } = result
          
          this.detail = {
            highlights: imageContentList.reduce((arr, item) => {
              return arr.concat(item.image?.split?.(',') || [])
            }, []),
            thoughts: experienceList,
            // todo: check key about "行后报告"
          }
        } catch (err) {

        }

      },
			//点击tab栏
			clickTabs({ index }) {
        this.current = index
        this.scrollIntoView = this.tabs[this.current].id
			},
      onCommentChange() {
        // todo: refresh comment list
      },
      openPosterPopup() {
        const path = `/pages_order/growing/activity/index?id=${this.id}&shareId=${this.userInfo.id}`
        this.$refs.posterPopup.open(path)
      },
      onApplyEmail() {
			  this.$utils.navigateTo(`/pages_order/growing/activity/applyEmail?id=${this.id}`)
      },
      onMark() {
        this.$refs.markPopup.open(this.id)
      },
      onAdd() {
        this.$refs.recordFormPopup.open()
      },
      previewImage(arr, index) {
        uni.previewImage({
          urls: arr,
          current: arr[index], // 当前显示图片的链接
        });
      },
    },
  }
</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 {
        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>