studytour-front/pages_order/order/orderDetail/index.vue

<template>
  <view class="page__view">
		<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" />

    <view class="main">

      <productCard :data="productCardData"></productCard>

      <orderInfoView :data="detail"></orderInfoView>

      <view class="notice">
        <view class="notice-header">下单须知</view>
        <view class="notice-content">
          <!-- todo: check key -->
				  <uv-parse :content="configList['order_instructions']"></uv-parse>
        </view>
      </view>

    </view>
  
		<view class="bottom">
      <view class="flex bar">
        <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>
        <!-- 已支付 -->
        <template v-if="detail.status == 1">
          <button class="col btn" @click="onContactMentor">联系导师</button>
          <button class="col btn" @click.stop="onFinish">已完成</button>
        </template>
        <!-- 待评价 -->
        <template v-else-if="data.status == 2">
          <button class="col btn" @click="onComment">立即评价</button>
          <button class="col btn" @click="onApplyService">申请售后</button>
        </template>
        <view class="col" v-else></view>
      </view>
    </view>

    <contactMentorPopup ref="contactMentorPopup"></contactMentorPopup>
		
    <commentPopup ref="commentPopup" @submitted="getData"></commentPopup>
    
  </view>
</template>

<script>
	import { mapState } from 'vuex'

  import productCard from '@/pages_order/order/components/productCard.vue'
  import orderInfoView from '@/pages_order/order/components/orderInfoView.vue'
  import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue'
  import commentPopup from '@/pages_order/comment/commentPopup.vue'

  export default {
    components: {
      productCard,
      orderInfoView,
      contactMentorPopup,
      commentPopup,
    },
    data() {
      return {
        id: null,
        detail: {},
      }
    },
    computed: {
			...mapState(['configList', 'userInfo', 'orderInfo']),
      productCardData() {
        const { 
          activityId,
          activityTitle,  
          activityBrief,
          activityTag,
          startDate,
          endDate,
        } = this.detail

        return {
          time: 'time',
          product: {
            id: activityId,
            title: activityTitle,
            brief: activityBrief,
            tagDetails: activityTag,
            dateList: [
              {
                id: 'time',
                startDate,
                endDate,
              }
            ]
          }
        }
      },
    },
    onLoad(arg) {
      const { id } = arg
      this.id = id

      this.getData()
    },
    async onPullDownRefresh() {
      await this.getData()
      uni.stopPullDownRefresh()
    },
    methods: {
      async getData() {
          try {

            this.detail = await this.$fetch('queryOrderById', { orderId: this.id })

          } catch (err) {

          }

          uni.stopPullDownRefresh()
      },
      onComment() {
        this.$refs.commentPopup.open(this.id, this.detail)
      },
      onApplyService() {
        // todo
      },
      onContactMentor() {
        this.$refs.contactMentorPopup.open(this.detail.teacherPhone)
      },
      async onFinish() {
        try {
          await this.$fetch('updateOrder', { id: this.id, status: '2' }) // 订单状态 0待支付 1已支付 2已完成
          this.getData()
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">

  @import '../styles/style.scss';

  .bottom {
    .bar {
      .price {
        justify-content: flex-start;
        column-gap: 8rpx;
        
        &-label {
          font-size: 24rpx;
          color: #626262;
        }

        &-unit,
        &-value {
          font-weight: 500;
          color: #FF4800;
        }

        &-unit {
          font-size: 24rpx;
        }

        &-value {
          font-size: 40rpx;
        }
      }

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