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-${orderData.status}`]">{{ statusDesc }}</view>
          </view>
          <view class="card-main">
            <view class="flex product" v-for="item in orderData.productList" :key="item.id">
              <image class="img" :src="item.url" mode="scaleToFill"></image>
              <view class="info">
                <view class="row">{{ item.name }}</view>
                <view class="flex row">
                  <view class="row-label">产品类型：</view>
                  <view class="row-content">{{ item.type }}</view>
                </view>
                <view class="flex row">
                  <view class="row-label">产品内容：</view>
                  <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.toFixed(2) }}</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.amount.toFixed(2) }}</text></view>
          </view>
        </view>

        <view v-if="orderData.status == 5" 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.serviceRecords"
                :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.desc }}</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.number }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">下单时间</view>
              <view class="row-content">{{ $dayjs(orderData.createTime).format('YYYY-MM-DD HH:mm') }}</view>
            </view>
          </view>
        </view>

      </template>

      <view class="notice">
        <view class="notice-header">下单须知</view>
        <view class="notice-content">
					<!-- todo: 替换配置项key -->
				  <uv-parse :content="configList['config_agreement']"></uv-parse>
        </view>
      </view>
    </view>

    <view class="flex bottom" v-if="orderData && [0,1,2,3,4].includes(orderData.status)">
      <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="orderData.status == 0">
          <view class="flex col price">
            <view class="price-label">合计</view>
            <text class="price-unit">¥</text><text class="price-value">{{ orderData.amount.toFixed(2) }}</text>
          </view>
          <button class="flex col btn btn-primary" @click="onPay">立即支付</button>
        </template>
        <!-- 待发货 -->
        <template v-else-if="orderData.status == 1">
          <button class="flex col btn" @click="onApplyService">申请售后</button>
        </template>
        <!-- 待收货 -->
        <template v-else-if="orderData.status == 2">
          <button class="flex col btn" @click="onApplyService">申请售后</button>
          <button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
        </template>
        <!-- 待评价 -->
        <template v-else-if="orderData.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="orderData.status == 4">
          <button class="flex col btn" @click="onApplyService">申请售后</button>
        </template>
      </view>
    </view>

    <payPopup ref="payPopup"></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/service/serviceSelectPopup.vue'

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

  export default {
    components: {
      addressView,
      payPopup,
      serviceSelectPopup,
    },
    data() {
      return {
        id: null,
        addressData: null,
        orderData: null,
      }
    },
    computed: {
      statusDesc() {
        return STATUS_AND_DESC_MAPPING[this.orderData?.status]
      },
    },
    onShow() {
      console.log('onShow')

      if (!this.id) {
        return
      }

      this.fetchOrderDetail()

    },
    onLoad(arg) {
      console.log('onLoad')
      this.id = arg.id

      this.fetchOrderDetail()
    },
    methods: {
      async fetchOrderDetail() {
        console.log('fetch data')
        // todo: fetch data by id
        
        this.addressData = {
          id: '001',
          name: '郑文锦',
          phone: '18108341643',
          area: ['海南省', '海口市', '秀英区'],
          address: '秀英街道5单元183室',
          // id: '006',
          // name: '何炜',
          // phone: '18108341643',
          // area: ['新疆维吾尔自治区', '乌鲁木齐市', '沙依巴克区'],
          // address: '新疆维吾尔自治区乌鲁木齐市沙依巴克区仓房沟片区街道4单元50室',
        }
        
        this.orderData = {
          id: '001',
          url: '/pages_order/static/index/recommend-pic.png', 
          title: '月度装定制营养包',
          amount: 688,
          productList: [
            {
              id: '0011',
              url: '/pages_order/static/index/medicine-1.png', 
              name: '月度装定制营养包',
              type: '保健品',
              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
              price: 688.00,
              count: 1,
              countDesc: '1月装',
              customized: true,
            },
            {
              id: '0012',
              url: '/pages_order/static/index/medicine-2.png', 
              name: '月度装定制营养包',
              type: '保健品',
              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
              price: 688.00,
              count: 1,
              countDesc: '1月装',
              free: true,
            },
            {
              id: '0013',
              url: '/pages_order/static/index/medicine-3.png', 
              name: '月度装定制营养包',
              type: '保健品',
              content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
              price: 688.00,
              count: 1,
              countDesc: '1月装',
              free: true,
            },
          ],
          serviceRecords: [
            {
              id: '003',
              title: '退款成功',
              desc: '平台已为您退款，具体到账时间请查询支付账户',
              createTime: '2025-04-20 12:00',
            },
            {
              id: '002',
              title: '等待审核',
              desc: '您的服务单已申请成功，待售后审核',
              createTime: '2025-04-20 12:00',
            },
            {
              id: '001',
              title: '提交申请',
              desc: '包装破损',
              createTime: '2025-04-20 12:00',
            },
          ],
          userName: '周小艺',
          phone: '15558661691',
          number: 'BH872381728321983929',
          createTime: '2025-04-28 08:14',
          status: 5,
        }

        console.log('addressData', this.addressData)
        console.log('orderData', this.orderData)
      },
      onPay() {
        
        const {
          id,
          title,
          amount
        } = this.orderData

        
        const obj = {
          title,
          orderId: id,
          amount,
        }

        this.$refs.payPopup.open(obj)

      },
      onConfirmReceipt() {
        // todo: fetch confirm

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

        const {
          id,
          productList,
        } = this.orderData

        
        const obj = {
          id,
          productList,
        }

        this.$refs.serviceSelectPopup.open(obj)
      },
    },
  }
</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;
    
    column-gap: 32rpx;
		width: 100vw;
		height: 200rpx;
		padding: 24rpx 40rpx;
		background: #FFFFFF;
		box-sizing: border-box;

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