hjb_pc/pages/users/order_list.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
const { handleIntoPage } = useOrder()
const tabList = ref([
  {
    name: '全部',
    type: -1,
  },
  {
    name: '待付款',
    type: 0,
  },
  {
    name: '待发货',
    type: 1,
  },
  {
    name: '待收货',
    type: 4,
  },
  {
    name: '已取消',
    type: 9,
  },
])

const bgColor = reactive<any>({
  bgColor: '',
  Color: '#E93323',
  width: '36rpx',
  timeTxtwidth: '16rpx',
  isDay: true,
  fontSize: '14px',
})

/**
 * 我的订单列表
 */
import { PageQuery } from '~/types/global'
import { orderListApi } from '~/server/orderApi'
import { orderStatusFilter, productTypeFilter, productTypeNameFilter } from '~/utils/filter'
const where = reactive<PageQuery>({
  page: 1,
  limit: 10,
  status: -1,
  keywords: '',
})
const {
  data: tableData,
  refresh,
  pending: listLoading,
} = await useAsyncData(async () => orderListApi(where), {
  default: () => ({
    list: [],
    total: 0,
  }),
})
// 分页数据
const pageChange = (e: number) => {
  where.page = e
  refresh()
}

const handleChangeTab = async (type: string) => {
  where.status = type
  where.page = 1
  refresh()
}

//去订单详情
import { linkNavigateTo } from '~/utils/util'
import useOrder from '~/composables/useOrder'
import { CartBatchAdd } from '~/types/order'
import NotLoggedIn from '~/components/notLoggedIn.vue'
const handleToOrderDetails =async (orderNo: string) => {
  listLoading.value = true
  await linkNavigateTo(`/order/order_details`, { orderNo: orderNo })
}

//去退款列表
const handleToOrderRefund = async (orderNo: string) =>{
  listLoading.value = true
  await linkNavigateTo(`/users/refund_list`, {  type: 9,orderNo: orderNo })
}

const useOrders = useOrder()
//再次购买
const handleByAgain = async (cartInfo: Array<any>) => {
  let cartListRequest: Array<CartBatchAdd> = []
  cartInfo.map((item) => {
    cartListRequest.push({
      productId: parseFloat(item.productId),
      productAttrUnique: item.attrValueId,
      cartNum: parseFloat(item.payNum),
    })
  })
  try {
    listLoading.value = true
    await useOrders.onByAgain(cartListRequest)
    listLoading.value = false
  } catch (e) {
    listLoading.value = false
  }
}

//删除订单
const handleDelOrder = async (orderNo: string) => {
  await useOrders.onDeleteOrder(orderNo).then(async () => {
    await refresh()
  })
}

//确认收货
const handleConfirmOrder = async (orderNo: string) => {
  useOrders.onConfirmOrder(orderNo).then(async () => {
    await refresh()
  })
}

//取消订单
const handleCancelOrder = async (orderNo: string) => {
  useOrders.onCancelOrder(orderNo).then(async () => {
    await refresh()
  })
}

//立即付款
const handlePaymentOrder = (orderNo: string) => {
  linkNavigateTo(`/order/order_payment`, { orderNo: orderNo })
}

//倒计时结束
const stopTime = (isShowCancelTime: boolean, item: any) => {
  item.isShowCancelTime = true
}
</script>

<template>
  <div class="order-list h-100%" v-loading="listLoading">
    <!--tab导航信息-->
    <div class="flex-between-center mb-23px">
      <div class="acea-row">
        <div
          v-for="item in tabList"
          :key="item.type"
          class="item text-16px mr-50px cursor-pointer"
          :class="where.status === item.type ? 'font-color font-500' : 'text-#666'"
          @click="handleChangeTab(item.type)"
        >
          {{ item.name }}
        </div>
      </div>
      <el-input @keyup.enter="refresh" v-model="where.keywords" style="width: 275px" placeholder="搜索商品名称或订单号">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </div>
    <!--订单信息-->
    <div v-if="tableData.total>0">
      <div v-for="item in tableData.list" :key="item.id" class="b-rd-12px w-100% overflow-hidden borderSol-eee mb-20px">
        <div class="h-54px lh-52px text-14px flex-between-center bg-#FAFAFA px-20px">
          <div class="flex items-center">
            <div v-if="item.type === 2" class="mr-10px font-color">
              {{ '【' + productTypeNameFilter(item.type) + '】' }}
            </div>
            <div
              class="text-#fff labelClass mr-20px"
              :class="item.status === 6 || item.status === 9 ? 'bg-#BBBBBB' : 'bg-#E93323'"
            >
              {{ orderStatusFilter(item.status) }}
            </div>
            <div class="text-#999999 mr-20px oppoSans-R">{{ item.createTime }}</div>
            <div class="text-#999999 mr-50px oppoSans-R">
              订单号：<span class="text-#333333 font-400 orderNo oppoSans-R">{{ item.orderNo }}</span>
            </div>
            <div
              @click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })"
              v-show="item.merName"
              class="cursors text-14px merchant-home"
            >
              <span class="iconfont icon-guanzhudianpu mr-5px line1" style="font-size: 14px"></span><span>{{ item.merName }}</span>
            </div>
            <div class="acea-row font-color" v-if="item.status === 0 && !item.isShowCancelTime">
              <countDown
                class="ml-5px mr-5px"
                :is-day="true"
                :tip-text="' '"
                :day-text="' '"
                :hour-text="' : '"
                :minute-text="' : '"
                :second-text="' '"
                :datatime="item.cancelTime / 1000"
                :isCol="false"
                :bgColor="bgColor"
                :dataItem="item"
                @stopTime="stopTime"
              >
              </countDown>
              <div>后订单取消</div>
            </div>
          </div>
          <div class="text-12px fontColor333 dinProSemiBold">
            <span class="oppoSans-M">￥</span><span class="text-20px dinProRegular font-600">{{ item.payPrice }}</span>
          </div>
        </div>
        <div class="flex justify-between pl-20px">
          <div
            @click="handleToOrderDetails(item.orderNo)"
            class="w-786px mt-20px mb-20px orderProduct"
            style="border-right: 1px dashed #eeeeee"
          >
            <template v-for="(itm, indexs) in item.orderInfoList" :key="indexs">
              <order-product :list="itm"></order-product>
            </template>
          </div>
          <!--操作-->
          <!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
          <div class="w-180px pt-20px pb-6px">
            <div
              v-if="item.status === 0 && !item.isShowCancelTime"
              class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center font-color text-12px mb-14px"
              style="border: 1px solid #e93323"
              @click="handlePaymentOrder(item.orderNo)"
            >
              立即支付
            </div>
            <div
                v-if="item.status === 4"
                @click="handleConfirmOrder(item.orderNo)"
                class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center font-color text-12px mb-14px"
                style="border: 1px solid #e93323"
            >
              确认收货
            </div>
            <div
              v-if="(item.status === 4 || item.status === 9 || item.status === 6) && item.type === 0"
              class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-12px mb-14px"
              :style="item.status === 4?'':'border: 1px solid #e93323'"
              :class="item.status === 4 ? 'text-#333 borderSol': 'font-color'"
              @click="handleByAgain(item.orderInfoList)"
            >
              再次购买
            </div>
            <div
              v-if="item.status === 0"
              @click="handleCancelOrder(item.orderNo)"
              class="m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol cursors mb14px"
            >
              取消订单
            </div>
            <div
              v-if="item.status == 6 || item.status == 9"
              @click="handleDelOrder(item.orderNo)"
              class="m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol cursors mb14px"
            >
              删除订单
            </div>
            <div
              @click="handleToOrderDetails(item.orderNo)"
              class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol mb-14px"
            >
              查看详情
            </div>
            <div
                v-if="item.status>0 && item.status<6"
                @click="handleToOrderRefund(item.orderNo)"
                class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol mb-14px"
            >
              申请退款
            </div>
          </div>
        </div>
      </div>
      <div class="acea-row row-middle mt-30px">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.total"
            :page-size="where.limit"
            :current-page="where.page"
          @update:current-page="pageChange"
          class="page-item"
        />
      </div>
    </div>
    <div v-else class="w-100%">
      <empty-page title="暂无订单呦~">
        <template v-slot:emptyImage>
          <img src="@/assets/images/wudingdan.png" />
        </template>
      </empty-page>
    </div>
  </div>
</template>

<style scoped lang="scss">
.merchant-home{
  color: #333333;
  &:hover{
    color: #E93323 !important;
  }
}
.orderNo{
  &:hover{
    color: #E93323 !important;
  }
}
.order-list {
  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
  }
  :deep(.el-input) {
    --el-fill-color-blank: #f7f7f7 !important;
    --el-border-radius-base: 20px;
  }
}
.orderProduct {
  :deep(.orderProduct) {
    &:last-child {
      margin-bottom: 0 !important;
    }
  }
}
</style>