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

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

    <view class="main">

      <view class="flex address" v-if="addressData">
        <addressView :data="addressData" :showIcon="true" :enableCopy="true"></addressView>
      </view>

      <template v-if="orderData">

        <view class="card detail">
          <view class="flex card-top">
            <view class="title">订单详情</view>
            <view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view>
          </view>
          <view class="card-main">
            <view class="flex product" v-for="item in orderData.appletOrderProductList" :key="item.id">
              <image class="img" :src="getCoverImg(item.image)" mode="scaleToFill"></image>
              <view class="info">
                <view class="row">{{ item.productName }}</view>
                <view class="flex row">
                  <view class="row-label">产品类型：</view>
                  <!-- todo: check key -->
                  <view class="row-content">{{ getTypeDesc(item.type) || '--' }}</view>
                </view>
                <view class="flex row">
                  <view class="row-label">产品内容：</view>
                  <!-- todo: check key -->
                  <view class="row-content">{{ item.content || '--' }}</view>
                </view>
                <view class="flex price">
                  <text class="price-label">价格：</text>
                  <text class="price-unit">¥</text><text class="price-value">{{ item.price }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="flex row card-bottom">
            <view class="row-label">总价格</view>
            <view class="flex row-content price">¥<text class="price-value">{{ orderData.orderAmount }}</text></view>
          </view>
        </view>

        <view v-if="orderData.process && orderData.process.length" class="card service">
          <view class="flex card-top">
            <view class="title">售后信息</view>
          </view>
          <view class="card-main">
            <uv-steps 
              current="0" 
              direction="column" 
              dot
              activeColor="#10A934"
              inactiveColor="#C6C6C6"
            >
              <uv-steps-item 
                v-for="(item, index) in orderData.process"
                :key="item.id"
              >
                <template #title>
                  <view class="flex step-header">
                    <view :class="['step-title', index == 0 ? 'highlight' : '']">{{ item.title }}</view>
                    <view class="step-time">{{ item.createTime }}</view>
                  </view>
                </template>
                <template #desc>
                  <view class="step-desc">{{ item.text }}</view>
                </template>
              </uv-steps-item>
            </uv-steps>
          </view>
        </view>

        <view class="card info">
          <view class="flex card-top">
            <view class="title">订单信息</view>
          </view>
          <view class="card-main">
            <view class="flex row">
              <view class="row-label">订单编号</view>
              <view class="row-content">{{ orderData.orderNo }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">下单时间</view>
              <view class="row-content">{{ $dayjs(orderData.orderDate).format('YYYY-MM-DD HH:mm') }}</view>
            </view>
          </view>
        </view>

      </template>

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

    <view class="flex bottom" v-if="[0, 1, 2, 3, 4].includes(status)">
      <view class="flex bar">
        <button plain class="flex flex-column btn btn-service" open-type="contact">
          <image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image>
          <view>联系客服</view>
        </button>
        <view class="flex cols">
          <!-- 待支付 -->
          <template v-if="status == 0">
            <view class="flex col price">
              <view class="price-label">合计</view>
              <text class="price-unit">¥</text><text class="price-value">{{ orderData.orderAmount }}</text>
            </view>
            <button class="flex col btn btn-primary" @click="onPay">立即支付</button>
          </template>
          <!-- 待发货 -->
          <template v-else-if="status == 1">
            <button class="flex col btn" @click="onApplyService">申请售后</button>
            <!-- 自采检测 -->
            <template v-if="detectProduct && detectProduct.subscribeType == 0">
              <button class="flex col btn btn-primary" @click="onDetectModify">修改</button>
            </template>
          </template>
          <!-- 待收货 -->
          <template v-else-if="status == 2">
            <button class="flex col btn" @click="onApplyService">申请售后</button>
            <!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消 -->
            <template v-if="detectProduct">
              <!-- 自采检测 -->
              <template v-if="detectProduct.subscribeType == 0">
                <button class="flex col btn btn-primary" @click="onDetectSendBack">线上回寄试剂盒</button>
              </template>
              <template v-else>
                <button class="flex col btn btn-primary" @click="onDetectBook">检测预约</button>
              </template>
            </template>
            <!-- 其他商品 -->
            <template v-else>
              <button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
            </template>
          </template>
          <!-- 待评价 -->
          <template v-else-if="status == 3">
            <button class="flex col btn" @click="onApplyService">申请售后</button>
            <button class="flex col btn btn-primary" @click="onComment">立即评价</button>
          </template>
          <!-- 已完成 -->
          <template v-else-if="status == 4">
            <button class="flex col btn" @click="onApplyService">申请售后</button>
          </template>
        </view>
      </view>
    </view>

    <payPopup ref="payPopup" @paySuccess="getData"></payPopup>
    <serviceSelectPopup ref="serviceSelectPopup"></serviceSelectPopup>

  </view>
</template>

<script>
  import addressView from '@/pages_order/address/addressView.vue'
  import payPopup from '@/pages_order/order/payPopup.vue'
  import serviceSelectPopup from '@/pages_order/applyService/serviceSelectPopup.vue'

  // 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成
  const STATUS_AND_DESC_MAPPING = {
    0: '待支付',
    1: '待发货',
    2: '待收货',
    3: '待评价',
    4: '已完成',
    5: '售后',
  }

  // 产品类型（0营养剂，1预约，2课程）
  const TYPE_AND_DESC_MAPPING = {
    0: '营养剂',
    1: '检测',
    2: '课程',
  }

  export default {
    components: {
      addressView,
      payPopup,
      serviceSelectPopup,
    },
    data() {
      return {
        id: null,
        addressData: null,
        orderData: null,
      }
    },
    computed: {
      status() {
        const { orderStatus, afterSales } = this.orderData || {}

        if (afterSales) {
          return 5
        }

        return orderStatus
      },
      statusDesc() {
        return STATUS_AND_DESC_MAPPING[this.status]
      },
      detectProduct() {
        const { appletOrderProductList } = this.orderData || {}

        if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程）
          return appletOrderProductList[0]
        }
        
        return null
      },
    },
    onShow() {
      console.log('onShow')

      if (!this.id) {
        return
      }

      this.getData()

    },
    onLoad(arg) {
      this.id = arg.id

      this.getData()
    },
    onPullDownRefresh() {
      this.getData()
    },
    methods: {
      async getData() {
        try {
          const result = await this.$fetch('detailOrder', { id: this.id })

          const {
            customerName,
            customerPhone,
            deliveryAddressDetail,
            ...orderData
          } = result

          this.addressData = {
            name: customerName,
            phone: customerPhone,
            detail: deliveryAddressDetail,
          }

          this.orderData = orderData

        } catch (err) {

        }

        uni.stopPullDownRefresh()
      },
      getTypeDesc(type) {
        return TYPE_AND_DESC_MAPPING[type]
      },
      getCoverImg(image) {
        return image?.split?.(',')?.[0] || ''
      },
      onPay() {
        
        const {
          id,
          title,
          orderAmount
        } = this.orderData

        
        const obj = {
          id,
          title,
          orderAmount,
        }

        this.$refs.payPopup.open(obj)

      },
      async onConfirmReceipt() {
        try {
  
          await this.$fetch('confirmOrder', { id: this.orderData.id })

					uni.showToast({
						icon: 'success',
						title: '确认收货成功',
					});

          this.getData()

        } catch (err) {

        }
      },
      onComment() {
        this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.orderData.id}`)
      },
      onApplyService() {

        console.log('orderData', this.orderData)

        const {
          id,
          appletOrderProductList,
        } = this.orderData

        
        const obj = {
          id,
          appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })),
        }

        this.$refs.serviceSelectPopup.open(obj)
      },
      onDetectModify() {
        // todo
      },
      onDetectSendBack() {
        // todo
      },
      onDetectBook() {
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    width: 100vw;
		min-height: 100vh;
    background-color: $uni-bg-color;
    position: relative;
    
    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .main {
    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx;
	}

  .address {
    padding: 24rpx 32rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    justify-content: flex-start;
  }

  .card {
    margin-top: 40rpx;
    padding: 32rpx;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;
    
    &-top {
      margin-bottom: 32rpx;
      justify-content: space-between;
      
      .title {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        line-height: 1.4;
        color: #252545;
      }

      .status {
        display: inline-flex;
        min-width: 120rpx;
        padding: 6rpx 0;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 1.4;
        color: #252545;
        background: #F3F3F3;
        border-radius: 12rpx;

        &-0 {
          color: #FF860E;
          background: #FFF4E9;
        }

        &-1 {
          color: #2799E0;
          background: #EEF7FD;
        }

        &-2 {
          color: #7D27E0;
          background: #F5EEFD;
        }

        &-5 {
          color: #E53C29;
          background: #FDE7E5;
        }
      }
    }
  
    .row {
      justify-content: space-between;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;

      &-label {
        flex: none;
        color: #8B8B8B;
      }

      &-content {
        color: #393939;
      }
    }

    &.detail {

      .product {
        margin-bottom: 32rpx;
        column-gap: 24rpx;
      
        .img {
          flex: none;
          width: 120rpx;
          height: 120rpx;
        }

        .info {
          flex: 1;
          padding: 24rpx 32rpx;
          background: #FFFFFF;
          border-radius: 32rpx;

          .row {
            margin-bottom: 16rpx;
            justify-content: flex-start;
            column-gap: 4rpx;
          }

          .price {
            justify-content: flex-start;
            column-gap: 8rpx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 1.4;

            &-label {
              font-weight: 400;
              font-size: 26rpx;
              color: #8B8B8B;
            }

            &-unit {
              font-size: 24rpx;
              color: #7451DE;
            }

            &-value {
              font-size: 32rpx;
              color: #7451DE;
            }
          }
        }
      }

      .card-bottom {
        .price {
          column-gap: 8rpx;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          line-height: 1.4;
          color: #7451DE;

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

    &.info {
      .row + .row {
        margin-top: 32rpx;
      }
    }

    &.service {

      .step {

        &-header {
          justify-content: flex-start;
          column-gap: 24rpx;
          padding-left: 24rpx;
        }

        &-title {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          line-height: 1.4;
          color: #000000;

          &.highlight {
            font-weight: 500;
            color: #10A934;
          }
        }

        &-time {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 1.4;
          color: #8B8B8B;
        }

        &-desc {
          padding: 16rpx 0 16rpx 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 1.4;
          color: #777777;
        }

      }
    }

  }

  .notice {
    margin-top: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;

    &-header {
      font-size: 28rpx;
      line-height: 1.4;
      color: #393939;
    }

    &-content {
      margin-top: 24rpx;
      font-size: 24rpx;
      line-height: 1.4;
      color: #BABABA;
    }
  }

  .bottom {
		position: fixed;
		left: 0;
		bottom: 0;
    z-index: 2;
    
		width: 100vw;
		// height: 200rpx;
		padding: 24rpx 40rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		background: #FFFFFF;
		box-sizing: border-box;
    align-items: flex-start;

    .bar {
      width: 100%;
      column-gap: 32rpx;
    }

    .btn {
      background: transparent;
      border: none;

      &-service {
        flex: none;
        row-gap: 4rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        line-height: 1.1;
        color: #999999;

        &-icon {
          width: 52rpx;
          height: auto;
        }
      }
    }

    .cols {
      flex: 1;
      column-gap: 32rpx;

      .col {
        flex: 1;
      }
      
      .btn {
        padding: 14rpx 0;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        line-height: 1.4;
        color: #252545;
        border: 2rpx solid #252545;
        border-radius: 41rpx;

        &-primary {
          padding: 16rpx 0;
          color: #FFFFFF;
          background-image: linear-gradient(to right, #4B348F, #845CFA);
          border: none;
        }
      }

      .price {
        column-gap: 8rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 1.4;

        &-label {
          color: #626262;
        }

        &-unit,
        &-value {
          font-weight: 500;
          color: #7451DE;

          .highlight {
            font-size: 40rpx;
          }
        }

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

    }

	}

</style>