studytour-front/pages_order/message/index.vue

<template>
  <view class="page__view">
		<navbar title="详情" leftClick @leftClick="$utils.navigateBack" bgColor="#FFFFFF" />

    <view class="main">
      <view class="card">
        <view class="card-header">
          <view class="title">{{ detail.title }}</view>
          <view class="desc">{{ detail.noticeDate }}</view>
        </view>
        <view class="card-content">
			    <uv-parse :content="detail.content"></uv-parse>
        </view>
      </view>
    </view>
  
		<view class="flex bottom">
      <button plain class="flex flex-column btn btn-simple" open-type="contact">
        <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
        <view>联系客服</view>
      </button>
      <button class="col btn" @click="onContactMentor">联系导师</button>
    </view>

    <contactMentorPopup ref="contactMentorPopup" ></contactMentorPopup>

  </view>
</template>

<script>
  import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue'

  export default {
    components: {
      contactMentorPopup,
    },
    data() {
      return {
        id: null,
        detail: {},
      }
    },
    onLoad(arg) {
      const { id } = arg
      this.id = id

      this.getData()
    },
    methods: {
      async getData() {
        // todo: mark read
        try {
          this.detail = await this.$fetch('queryNoticeById', { noticeId: this.id })
        } catch (err) {

        }
      },
      onContactMentor() {
        this.$refs.contactMentorPopup.open(this.detail.teacherPhone)
      },
    },
  }
</script>

<style scoped lang="scss">

	.page__view {
		width: 100vw;
		min-height: 100vh;
		background: $uni-bg-color;
		position: relative;

    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .main {
    padding: calc(var(--status-bar-height) + 160rpx) 40rpx 326rpx 40rpx;
  }

  .card {
    padding: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background: #FFFFFF;
    border-radius: 32rpx;

    &-header {
      font-family: PingFang SC;
      line-height: 1.4;
      color: #252545;

      .title {
        font-size: 40rpx;
        font-weight: 500;
        color: #262626;
      }

      .desc {
        margin-top: 4rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }

    &-content {
      margin-top: 24rpx;
      font-size: 28rpx;
      line-height: 1.7;
      color: #3B3D3D;
    }
  }
  
  .bottom {
		position: fixed;
		left: 0;
		bottom: 0;

		width: 100vw;
		// height: 270rpx;
		background: #FFFFFF;
		box-sizing: border-box;
    padding: 24rpx 40rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
    box-sizing: border-box;
    column-gap: 32rpx;

    .col {
      flex: 1;
    }

    .btn {
      width: 100%;
      // padding: 14rpx 74rpx;
      padding: 14rpx 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #252545;
      border: 2rpx solid #252545;
      border-radius: 41rpx;
    }

    .btn-simple {
      flex: none;
      width: auto;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      line-height: 1.1;
      color: #999999;
      border: none;
      border-radius: unset;

      .icon {
        width: 52rpx;
        height: auto;
        margin-bottom: 4rpx;
      }
    }

	}

</style>