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

<template>
  <layout class="orderInfo">
    <uv-navbar
        :fixed="false"
        title="售后订单详情"
        left-arrow
        @leftClick="goBackList"
    />
    <view v-if="orderInfoData">
      <view class="orderInfo-header background-warp" :class="orderInfoData.state === 0 && 'mb-100'">
        <view class="background">
          <image
              class="image"
              :src="afterSalesBg"
              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" v-if="parseInt(orderInfoData.remainTime) > 0 && ![3,4].includes(orderInfoData.state)">
              {{remainTimeStr}}
            </view>
          </view>
<!--          <view class="address noBorder">-->
<!--            <view class="address-icon">-->
<!--              <image-->
<!--                  class="image"-->
<!--                  src="https://b2c-pro-static-dev.zkthink.com/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
              link
              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.toFixed(2) }}
                </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
                    class="info-cell-operation"
                    @click="setData(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="showModal(0)"
              v-if="[3,4].includes(orderInfoData.state)"
          >
            删除记录
          </view>
          <view
              class="order-actions-default"
              @tap="showModal(1)"
              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>
  <Modal ref="modalRef" :content="modalTitle" @confirm="confirmModal" />
</template>

<script setup>
import { computed, ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { formatDate } from '@/utils/utils'
import {
  orderCancel,
  checkForAfterSalesInfo,
  orderTake,
  orderDelete,
  orderExpress,
  afterSalesOrderDelete, afterSalesOrderRevoke
} from '@/api/order'
import { orderReStatus } from '@/config'
import { useRouter } from "@/hooks/useRouter";
import {useGlobalProperties} from "@/hooks";
import { useShearPlate } from "@/hooks/useShearPlate";
import { formatRemainTime } from '@/utils/utils'
import Modal from "@/components/Modal/index.vue";
import { afterSalesBg } from "@/utils/images";
import config from "@/uni_modules/uv-ui-tools/libs/config/config";
const {$timeFormat} = useGlobalProperties()

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


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

const modalRef = ref()
const modalType = ref(0) // 0删除记录 1撤销申请
const modalTitle = computed(()=>{
  const tipsArr = ['确认删除记录吗？','确认撤销申请吗？']
  return tipsArr[modalType.value]
})

/**
 * 打开弹窗
 * @param {number} type 0删除记录 1撤销申请
 */
function showModal(type){
  modalType.value = type
  unref(modalRef).show()
}

/**
 * 确认弹窗
 */
function confirmModal(){
  const funcArr = [doDeleteRequest,doRevoke]
  funcArr[modalType.value]()
}

/**
 * 确认删除
 * @returns {Promise<void>}
 */
async function doDeleteRequest(){
  await afterSalesOrderDelete({
    id: id.value,
    orderCode: orderInfoData.value.orderId
  })
  uni.showToast({
    title: '已删除',
    duration: 2000
  });
  setTimeout(()=>{
    toRefundList()
  },2000)
}

/**
 * 确认撤销
 * @returns {Promise<void>}
 */
async function doRevoke(){
  await afterSalesOrderRevoke({
    id: id.value,
    key: orderInfoData.value.orderId
  })
  uni.showToast({
    title: '已撤销',
    duration: 2000
  });
  setTimeout(()=>{
    toRefundList()
  },2000)
}

// 跳转列表
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: orderId.value
    }
  })
}

// 返回列表
const goBackList = () => {
  push({url: '/pages/refundList/refundList'}, {
    type:"redirectTo"
  })
}

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



</script>

<style lang="scss">
@import "../../style/images";
.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: $orderStateClock;
    }
    &.order-status-3,&.order-status-4{
      background-image: $orderStateFinish;
    }
    .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>