yshop-pro-uniapp/pages/refundInfo/refundInfo.vue

<template>
  <layout class="orderInfo">
    <uv-navbar
        :fixed="false"
        title="售后订单详情"
        left-arrow
        @leftClick="goBack"
    />
    <view v-if="orderInfoData">
      <view class="orderInfo-header background-warp" :class="orderInfoData.state === 0 && 'mb-100'">
        <view class="background">
          <image
              class="image"
              src="@/static/images/refund-order-bg.png"
              mode="widthFix"
          />
        </view>
        <view class="background-content page-space">
          <view class="order-status-info">
            <view class="order-status" :class="'order-status-'+ orderInfoData.state">
              <view>
<!--                {{ orderInfoStatusMsg }}-->
                {{refundOrderStatus[orderInfoData.state]}}
              </view>
            </view>
            <view class="order-date">
              还剩1天20小时自动确认
            </view>
          </view>
<!--          <view class="address noBorder">-->
<!--            <view class="address-icon">-->
<!--              <image-->
<!--                  class="image"-->
<!--                  src="@/static/images/icon-location.png"-->
<!--              />-->
<!--            </view>-->
<!--            <view class="address-main">-->
<!--              <view class="address-header">-->
<!--                <view class="address-name">{{ orderInfoData.realName }}</view>-->
<!--                <view class="address-phone">{{ orderInfoData.userPhone }}</view>-->
<!--              </view>-->
<!--              <view class="address-content">-->
<!--                <view class="address-desc">{{ orderInfoData.userAddress }}</view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
        </view>
      </view>
      <view class="page-space">
        <view class="mb-20 card" v-if="orderInfoData.realName">
          <view class="card-head">
            <view class="card-title">
              商家收货信息
            </view>
          </view>
          <view class="card-content">
            <view class="infos">
              <view class="info-cell">
                <view class="info-cell-label">
                  收货人
                </view>
                <view class="info-cell-value">
                   <view class="address-name">{{ orderInfoData.realName }}</view>
                   <view class="address-phone">{{ orderInfoData.userPhone }}</view>
                </view>

              </view>
              <view class="info-cell">
                <view class="info-cell-label">
                  地<text class="wem1"></text>址
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.userAddress }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="mb-20 card" v-if="orderInfoData.deliverySn">
          <view class="card-head">
            <view class="card-title">
              物流信息
            </view>
          </view>
          <view class="card-content">
            <view class="infos">
              <view class="info-cell">
                <view class="info-cell-label">
                  物流单号
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.deliverySn }}
                </view>

              </view>
              <view class="info-cell">
                <view class="info-cell-label">
                  物流公司
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.deliveryName }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="order-goods  page-card mb-20">
          <goods
              list
              interval
              desc="3"
              showAction
              model
              :purchase="item.cartNum"
              :data="item.productInfo"
              :price="item.truePrice"
              v-for="(item, index) in orderInfoData.cartInfo"
          >
          </goods>
          <view class="order-infos infos mb-20 infos-right border-top">
            <view class="info-cell">
              <view class="info-cell-label">商品总价：</view>
              <view class="info-cell-value">¥{{ orderInfoData.totalPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">优惠：</view>
              <view class="info-cell-value">¥{{ orderInfoData.couponPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">运费：</view>
              <view class="info-cell-value">¥{{ orderInfoData.totalPostage }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">总计：</view>
              <view class="info-cell-value">¥{{ orderInfoData.payPrice.toFixed(2) }}</view>
            </view>
          </view>
        </view>

        <view class="mb-20 card">
          <view class="card-head">
            <view class="card-title">
              售后信息
            </view>
          </view>
          <view class="card-content">
            <view class="infos">
              <view class="info-cell">
                <view class="info-cell-label">
                  退款金额
                </view>
                <view class="info-cell-value">
                  ¥{{ orderInfoData.refundAmount }}
                </view>

              </view>
              <view class="info-cell">
                <view class="info-cell-label">
                  服务类型
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.serviceType===0?'仅退款':'退货退款' }}
                </view>
              </view>
              <view
                  class="info-cell"
              >
                <view class="info-cell-label">
                  订单编号
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.orderId }}
                </view>
              </view>
              <view
                  class="info-cell"
              >
                <view class="info-cell-label">
                  退款原因
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.reasons }}
                </view>
              </view>
              <view
                  class="info-cell"
              >
                <view class="info-cell-label">
                  详细说明
                </view>
                <view class="info-cell-value">
                  <view>{{ orderInfoData.explains }}</view>
                  <view>
                    <view></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view
            class="mb-20 card"
            v-if="orderInfoData.status > 1"
        >
          <view class="card-head">
            <view class="card-title">
              物流信息
            </view>
          </view>
          <view
              class="card-content "
              v-if="expressData"
          >
            <view class="paddingH-10">
              <uv-steps
                  current="0"
                  direction="column"
                  activeColor="#EE6D46"
                  inactiveColor="#E5E5E5"
              >
                <uv-steps-item
                    v-for="(item, index) in expressData"
                    :key="index"
                    :title="item.acceptStation"
                    :desc="item.acceptTime"
                ></uv-steps-item>
              </uv-steps>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-bar-bg"></view>

      <view
          class="order-actions bottom-bar"
      >
        <!-- 已发货 待收货 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-default"
              @tap="handleDelete"
              v-if="[3,4].includes(orderInfoData.state)"
          >
            删除记录
          </view>
          <view
              class="order-actions-default"
              @tap="handleRevoke"
              v-if="[0,1].includes(orderInfoData.state)"
          >
            撤销申请
          </view>
          <view
              class="order-actions-default"
              @tap="toRefund"
              v-if="orderInfoData.state === 5"
          >
            再次申请
          </view>
          <view
              class="order-actions-default"
              @tap="toAddLogistics"
              v-if="orderInfoData.state === 1"
          >
            填写物流
          </view>
        </view>
      </view>

    </view>
  </layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import {
  orderCancel,
  checkForAfterSalesInfo,
  orderTake,
  orderDelete,
  orderExpress,
  afterSalesOrderDelete, afterSalesOrderRevoke
} from '@/api/order'
import { orderReStatus } from '@/config'
import { useRouter } from "@/hooks/useRouter";
import {useGlobalProperties} from "@/hooks";
const {$timeFormat} = useGlobalProperties()

const {getParams,push,goBack} = useRouter()

const orderInfoData = ref(null)
const orderInfoStatusMsg = ref('')
const expressData = ref(null)
const orderId = ref(0)
const refundOrderStatus =  ref({
  0: '请耐心等待平台审核',
  1: '平台已同意退货申请，请尽早退货',
  2: '请耐心等待平台确认收货',
  3: '退款成功',
  4: '用户已取消',
  5: '商家已拒绝',
})


const handleOrderInfo = async (option) => {
  const res = await checkForAfterSalesInfo(option)
  orderInfoData.value = res
}

// 删除记录
const handleDelete = async () => {
  uni.showModal({
    title: '提示',
    content: '确认删除记录',
    success: async (res) => {
      if (res.confirm) {
        await afterSalesOrderDelete({
          id: orderId.value,
          orderCode: orderInfoData.value.orderId
        })
        uni.showToast({
          title: '已删除',
          duration: 2000
        });
        setTimeout(()=>{
          toRefundList()
        },2000)
      } else if (res.cancel) {
      }
    }
  });
}

// 撤销申请
const handleRevoke = async () => {
  uni.showModal({
    title: '提示',
    content: '确认撤销申请吗',
    success: async (res) => {
      if (res.confirm) {
        await afterSalesOrderRevoke({
          id: orderId.value,
          key: orderInfoData.value.orderId
        })
        uni.showToast({
          title: '已撤销',
          duration: 2000
        });
        setTimeout(()=>{
          toRefundList()
        },2000)
      } else if (res.cancel) {
      }
    }
  });
}

// 跳转列表
const toRefundList = () => {
  push({url: '/pages/refundList/refundList'})
}

// 填写物流
const toAddLogistics = () => {
  push({url: '/pages/addLogistics/addLogistics'}, {
    data: {
      id: orderInfoData.value.id,
      orderCode: orderInfoData.value.orderCode
    }
  })
}


// 再次申请
const toRefund = () => {
  push({url: '/pages/refund/refund'}, {
    data: {
      refundType: orderInfoData.value.serviceType,
      goods: orderInfoData.value.cartInfo.map(v=>{
        return v.productAttrUnique
      }).toString(),
      id: orderInfoData.value.id
    }
  })
}

onLoad((options) => {
  const params = getParams(options)
  orderId.value = params.id
  handleOrderInfo({
    key: params.id
  })
})



</script>

<style lang="scss">
.orderList {
  padding: 20rpx 0;
}

.page-space{
  position: relative;
  z-index: 2;
}

.order-header {}

.order-status-info {
  padding: 50rpx 0;


  .order-status {
    display: flex;
    align-items: center;
    height: 42rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-bottom: 20rpx;
    padding-left: 50rpx;
    background-size: 40rpx 40rpx;
    background-position: left center;
    background-repeat: no-repeat;
    &.order-status-0,&.order-status-1,&.order-status-2,&.order-status-5{
      background-image: url("../../static/images/icon-order-info-5.png");
    }
    &.order-status-3,&.order-status-4{
      background-image: url("../../static/images/icon-order-info-4.png");
    }
    .image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }

  .order-date {
    height: 33rpx;
    font-size: 24rpx;
    color: #FFFFFF;
  }



}

.order-infos {
  margin: 0 40rpx;
  padding: 40rpx 0 20rpx;

  &:after {
    content: '';
  }
}

.infos{
  .info-cell-label{
    .wem1{
      width: 1em;
      display: inline-block;
    }
  }
  .info-cell-value{
    display: flex;
  }
}
</style>