education-front/pages_order/case/index.vue

<template>
  <view :class="['page__view', hasPoster ? 'with-bottom' : '']">
    
		<!-- 导航栏 -->
		<navbar :title="details.title" leftClick @leftClick="$utils.navigateBack" bgColor="#4883F9" color="#FFFFFF" />

    <view class="cover-image" :style="{ height: coverImageHeight }">
      <image class="img" :src="details.paperImage" mode="scaleToFill" ></image>
    </view>
    
    <!-- 学生情况 -->
    <view class="section" v-if="details.studentCondition">
      <view class="section-header">
        <arrow></arrow>
        <view>{{ details.titleOne }}</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.studentCondition"></uv-parse>
      </view>
    </view>
    
    <!-- 服务项目 -->
    <view class="section" v-if="details.serviceItem">
      <view class="section-header">
        <arrow></arrow>
        <view>{{ details.titleTwo }}</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceItem"></uv-parse>
      </view>
    </view>
    
    <!-- 服务过程 -->
    <view class="section" v-if="details.serviceProcess">
      <view class="section-header">
        <arrow></arrow>
        <view>{{ details.titleThree }}</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceProcess"></uv-parse>
      </view>
    </view>
    
    <!-- 服务结果 -->
    <view class="section" v-if="details.serviceResult">
      <view class="section-header">
        <arrow></arrow>
        <view>{{ details.titleFour }}</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceResult"></uv-parse>
      </view>
    </view>
    
    <!-- 服务感受 -->
    <view class="section" v-if="details.serviceFeeling">
      <view class="section-header">
        <arrow></arrow>
        <view>{{ details.titleFive }}</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceFeeling"></uv-parse>
      </view>
    </view>
    
    <view class="flex bottom" v-if="hasPoster">
      <view class="flex btns">
        <button class="btn" @click="jumpToPoster">保存海报</button>
        <button class="btn btn-share" open-type="share">分享文章</button>
      </view>
    </view>

  </view>
</template>

<script>
	import arrow from '@/components/base/arrow.vue'

  export default {
    components: {
      arrow,
    },
    data() {
      return {
        details: {},
        coverImageHeight: '890rpx',
      }
    },
    onLoad({ articleId }) {

      const windowWidth = uni.getSystemInfoSync().windowWidth
      this.coverImageHeight = `${(windowWidth - 18) * 890 / 750}px`

      this.getData(articleId)
    },
    onShareAppMessage(res) {
      return {
        title: this.posterData.paperDesc,
        imageUrl: this.posterData.paperImage,
        path: this.posterData.path,
      }
    },
    computed: {
      posterData() {
        const { id, title, image, paperDesc, paperImage } = this.details || {}

        return {
          paperDesc: paperDesc || title,
          paperImage: paperImage || image || '',
          path: `pages_order/case/index?articleId=${id}`
        }
      },
      hasPoster() {
        const { paperImage } = this.details || {}

        return !!paperImage
      },
    },
    methods: {
      async getData(articleId) {

        try {
          this.details = await this.$fetch('queryAriticleById', { articleId })
        } catch (err) {

        }

      },
      jumpToPoster() {
        uni.setStorageSync('posterData', this.posterData)

        uni.navigateTo({
					url: `/pages_order/case/poster`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    box-sizing: border-box;
    background: #FFFFFF;
    padding-bottom: 36rpx;

    &.with-bottom {
		  padding-bottom: calc(36rpx + 110rpx + env(safe-area-inset-bottom));
    }
  }

  .cover-image {
    position: relative;
    width: calc(100% - 18rpx*2);
    background: #FFFFFF;
    margin: 20rpx 18rpx 47rpx 18rpx;
    border-radius: 25rpx;
    overflow: hidden;

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

  .section {
    width: 100%;
    padding: 0 18rpx;
    box-sizing: border-box;

    & + & {
      margin-top: 40rpx;
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      column-gap: 5rpx;
      padding-left: 11rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #000000;
    }

    &-content {
      margin-top: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      white-space: pre-line;
      font-size: 28rpx;
      color: #000000;
      background: #F8F8F8;
      border-radius: 15rpx;
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 110rpx;
		padding-bottom: env(safe-area-inset-bottom);
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 

    .btns {
      column-gap: 34rpx;
    }

    .btn {
      padding: 20rpx 90rpx;
      font-size: 28rpx;
      color: #FFFFFF;
      background: #4883F9;
      border-radius: 42rpx;

      &-share {
        background: #FFD019;
      }

    }

  }

</style>