ali_ai_learn_web/src/pages/Personal/Orders.vue

<template>
  <div class="order">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
        <ul class="order-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="order-list-top flex-center-between">
              <div class="order-list-top-l flex-align-center">
                <el-tag :type="index == 0 ? 'primary' : index == 1 ? 'success' : 'danger'">{{ index == 0 ?
                  $t('personalCenter.daifukuan') : index == 1 ? $t('personalCenter.yiwancheng') :
                    $t('personalCenter.yiquxiao') }}</el-tag>
                <div class="">{{ $t('personalCenter.dingdanhao') }}: {{ item.orderNo }}</div>
              </div>
              <div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
            </div>
            <div class="order-list-main flex">
              <img class="image"
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
              <div class="order-list-con flex-center-between flex_1">
                <div class="">
                  <div class="title">UI界面设计教程</div>
                  <div class="">
                    <el-button type="primary" size="small" plain>技能标签</el-button>
                    <el-button type="primary" size="small" plain>技能标签</el-button>
                  </div>
                </div>
                <div class="mi_price">
                  <div class="">29900</div>
                  <div class="">{{ $t('common.mibi') }}</div>
                </div>
                <div class="mi_price price">
                  <div class="">￥239.20</div>
                  <div class="">{{ $t('common.actualAmount') }}</div>
                </div>
                <div class="">
                  <template v-if="index == 0">
                    <div class="gradient btn">
                      <img src="/src/assets/imgs/my/order1@2x.png" alt="">
                      <div class="">{{ $t('common.goPay') }}</div>
                    </div>
                    <div class="blue btn mt8">
                      <img src="/src/assets/imgs/my/order2@2x.png" alt="">
                      <div class="">{{ $t('common.cancelOrder') }}</div>
                    </div>
                  </template>
                  <template v-else-if="index == 1">
                    <div class="blue btn">
                      <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                      <div class="">{{ $t('common.applyInvoice') }}</div>
                    </div>
                    <div class="red btn mt8">
                      <img src="/src/assets/imgs/my/order4@2x.png" alt="">
                      <div class="">{{ $t('common.applyRefund') }}</div>
                    </div>
                  </template>
                  <template v-else-if="index == 2">
                    <div class="btn gradient">
                      <img src="/src/assets/imgs/my/order5@2x.png" alt="">
                      <div class="">{{ $t('common.reorder') }}</div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import type { TabsPaneContext } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import { orderList } from '@/api/my.js'

const tabs = ref([
  { label: 'personalCenter.allOrders', name: 'first' },
  { label: 'personalCenter.daifukuan', name: 'second' },
  { label: 'personalCenter.yiwancheng', name: 'third' },
  { label: 'personalCenter.yiquxiao', name: 'fourth' },
])

const activeName = ref('first')
const list = ref([]);
const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  activeName: 0
})

const handleClick = (tab: TabsPaneContext) => {
  list.value = []
  form.value.pageNum = 1;
  form.value.activeName = tab.props.name;
  getList()
}
// 获取我的订单
const getList = async () => {
  let res = await orderList(form.value);
  console.log(res.rows)
  list.value = res.rows || [];
  form.value.total = res.total;
}
const handlePageChange = (page) => {
  list.value = []
  form.value.pageNum = page;
  getList()
}

onMounted(() => {
  getList()
})

</script>
<style scoped lang="scss">
.order {
  padding-bottom: 16px;

  .order-list {
    li {
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .order-list-top {
        height: 42px;
        padding: 0 16px;
        background: #F5F7FA;
        border-radius: 16px 16px 0px 0px;

        .order-list-top-l {
          div {
            margin-left: 8px;
            font-size: 16px;
            font-weight: bold;
          }
        }

        .order-list-top-r {
          font-size: 14px;
        }
      }

      .order-list-main {
        padding: 16px;
        border-radius: 0 0 16px 16px;
        border: 1px solid #EBEEF5;

        .image {
          width: 160px;
          height: 90px;
          object-fit: cover;
          margin-right: 16px;
          border-radius: 8px;
        }

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          line-height: 1;
        }

        .mi_price {

          div {
            font-size: 18px;
            text-align: center;

            &:last-child {
              font-size: 12px;
              color: #666666;
            }
          }
        }

        .price {
          div {
            &:first-child {
              color: #FD5F3C;
            }
          }
        }

        .mt8 {
          margin-top: 8px;
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 106px;
          height: 32px;
          cursor: pointer;
          border-radius: 4px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }

          div {
            font-size: 14px;
            color: #FFFFFF;
          }
        }



        .red {
          background: #FCEBEB;

          div {
            color: #E43434;
          }
        }

        .blue {
          background: #EAF0FF;

          div {
            color: #2D71FF;
          }
        }
      }
    }
  }
}
</style>