education-front/pages_order/case/index.vue

<template>
  <view class="page__view">
    
		<!-- 导航栏 -->
		<navbar :title="details.title" leftClick @leftClick="$utils.navigateBack" bgColor="#4883F9" color="#FFFFFF" />

    <!-- 轮播图 -->
    <view class="swiper">
      <uv-swiper :list="bannerList" keyName="image" :autoplay="bannerList.length > 1" :indicator="bannerList.length > 1" indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="424rpx"></uv-swiper>
    </view>
    
    <!-- 学生情况 -->
    <view class="section">
      <view class="section-header">
        <arrow></arrow>
        <view>学生情况</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.studentCondition"></uv-parse>
      </view>
    </view>
    
    <!-- 服务项目 -->
    <view class="section">
      <view class="section-header">
        <arrow></arrow>
        <view>服务项目</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceItem"></uv-parse>
      </view>
    </view>
    
    <!-- 服务过程 -->
    <view class="section">
      <view class="section-header">
        <arrow></arrow>
        <view>服务过程</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceProcess"></uv-parse>
      </view>
    </view>
    
    <!-- 服务结果 -->
    <view class="section">
      <view class="section-header">
        <arrow></arrow>
        <view>服务结果</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceResult"></uv-parse>
      </view>
    </view>
    
    <!-- 服务感受 -->
    <view class="section">
      <view class="section-header">
        <arrow></arrow>
        <view>服务感受</view>
      </view>
      <view class="section-content">
				<uv-parse :content="details.serviceFeeling"></uv-parse>
      </view>
    </view>
    
    <view class="flex bottom">
      <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: {},
      }
    },
    onLoad({ articleId }) {
      this.getData(articleId)
    },
    onShareAppMessage(res) {
      return {
        title: this.posterData.paperDesc,
        imageUrl: this.posterData.paperImage,
        path: this.posterData.path,
      }
    },
    computed: {
      bannerList() {
        const { image } = this.details || {}
        return (image || '').split(',').map(url => ({ image: url }))
      },
      posterData() {
        const { id, title, paperDesc, paperImage } = this.details || {}

        return {
          paperDesc: paperDesc || title,
          paperImage: paperImage || this.bannerList?.[0]?.image || '',
          path: `pages_order/case/index?articleId=${id}`
        }
      },
    },
    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/poster/index`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    box-sizing: border-box;
    background: #FFFFFF;
		padding-bottom: calc(36rpx + 110rpx + env(safe-area-inset-bottom));
  }

  .swiper {
    margin: 20rpx 18rpx 47rpx 18rpx;
    border-radius: 25rpx;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 15rpx;
      height: 15rpx;
    }

    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      width: 15rpx;
    }
  }

  .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>