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>
</template>

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

  export default {
    components: {
      arrow,
    },
    data() {
      return {
        details: {},
      }
    },
    onLoad({ articleId }) {
      this.getData(articleId)
    },
    computed: {
      bannerList() {
        const { image } = this.details || {}
        return (image || '').split(',').map(url => ({ image: url }))
      }
    },
    methods: {
      async getData(articleId) {

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

        }

      },
    },
  }
</script>

<style scoped lang="scss">

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

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

</style>