首页头部，样式调整

QYF-GitLab1

2 天以前 9cad6a832c786989be620573b09badccfe7e3b51

 src/views/personalCenter/myOrder.vue

@@ -1,3 +1,398 @@
<template>
  <div>我的订单</div>
  <!-- <page> -->
  <div class="personalPage-box">
    <div class="personalPage-title">我的订单</div>
    <div class="personalPage-content">
      <div class="cartClass">
        <el-tabs v-model="order" type="capsule" @tab-click="tabCart">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待支付" name="payment"></el-tab-pane>
          <el-tab-pane label="已完成" name="complete"></el-tab-pane>
          <el-tab-pane label="已取消" name="cancellation"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="myCarTopPage">
        <div class="cartContent" v-loading="pages.loading">
          <div class="list-box">
            <ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
              <li class="head flex">
                <span class="index">序号</span>
                <span class="clear flex1">商品信息</span>
                <span class="state">商品类型</span>
                <span class="price">价格</span>
              </li>
              <li v-for="item in dataList" :key="item.index">
                <div class="body flex ai-c">
                  <div class="index">{{ item.index }}</div>
                  <div class="list">
                    <div
                      v-for="pItem in item.productList"
                      :key="pItem.id"
                      class="listItem flex ai-c"
                    >
                      <div
                        class="clear hover"
                        @click="
                          goBookDetails(
                            pItem.orderSaleMethod.product.id,
                            pItem.orderSaleMethod.product.name,
                            pItem.orderSaleMethod.product.cmsTypeRefCode,
                            item.remarks,
                            pItem.orderSaleMethod.id,
                          )
                        "
                      >
                        <div class="cover fl">
                          <img
                            :src="
                              pItem.orderSaleMethod.product.icon
                                ? getPublicImage(pItem.orderSaleMethod.product.icon, '', '')
                                : bookCover
                            "
                            alt=""
                          />
                        </div>
                        <div class="title flex ai-c">
                          {{
                            pItem.orderSaleMethod.type === 'defaultSaleMethod' ||
                            pItem.orderSaleMethod.cmsItemList.length == 0
                              ? pItem.orderSaleMethod.product.name
                              : pItem.orderSaleMethod.product.name +
                                '：' +
                                pItem.orderSaleMethod.cmsItemList[0].name
                          }}
                        </div>
                      </div>
                      <span class="state">{{
                        pItem.orderSaleMethod.product.cmsTypeRefCode == 'digitalTextbooks'
                          ? '数字教材'
                          : pItem.orderSaleMethod.product.cmsTypeRefCode == 'jsek_digitalCourses'
                            ? '数字课程'
                            : pItem.orderSaleMethod.type == 'defaultSaleMethod'
                              ? '图书服务-电子书'
                              : pItem.orderSaleMethod.type == 'createProductSaleMethod' &&
                                  pItem.orderSaleMethod.cmsItemList == 0
                                ? '图书服务-组卷'
                                : pItem.orderSaleMethod.cmsItemList[0].type == 'questionBankFolder'
                                  ? '图书服务-云测试'
                                  : '图书服务-云学习'
                      }}</span>
                      <div class="price">
                        <span>￥{{ pItem.payPrice.toFixed(2) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count">
                  <span>订单号: {{ item.orderNumber }}</span>
                  <span v-if="item.createDate">
                    创建时间：
                    <span>{{ item.createDate.slice(0, 10) }}</span>
                    <span style="margin-left: 5px">{{ item.createDate.slice(11, 19) }}</span>
                  </span>
                  <span class="right">
                    <span
                      >总计：<span class="main">￥{{ item.totalPrice.toFixed(2) }}</span></span
                    >
                    <span class="status yes" v-if="item.state == 'Success'">已完成</span>
                    <span class="status cancel" v-if="item.state == 'Cancel'">已取消</span>
                    <span class="status cancel" v-if="item.state == 'ReFoundFinished'">已退款</span>
                    <span class="status" v-if="item.state == 'WaitPay'">
                      <span class="main hover" @click="toPay(item.orderNumber)">立即支付</span>
                      <span class="grey hover" @click="cancleOrder(item.orderNumber)"
                        >取消订单</span
                      >
                    </span>
                  </span>
                </div>
              </li>
            </ul>
            <div v-if="dataList.length == 0 && !pages.loading">
              <el-empty :image-size="200" description="暂无数据" />
            </div>
          </div>
          <div class="pagination-box" v-if="dataList.length > 0 && !pages.loading">
            <el-pagination
              v-model:current-page="pages.page"
              v-model:page-size="pages.pageSize"
              layout="total, prev, pager, next"
              :total="pages.count"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </page> -->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import bookCover from '@/assets/images/personalCenter/book-cover.png'
const router = useRouter()
const userStore = useUserStore()
const MG: any = inject('MG')
let order = ref('all')
let dataList = ref([])
let queryFilter = reactive([])
let pages = reactive({
  page: 1,
  pageSize: 5,
  count: 0,
  loading: false,
})

const tabCart = (event: Event) => {
  order.value = event.props.name
  pages.page = 1
  dataList.value = []
  if (order.value == 'all') {
    queryFilter.value = []
  }
  if (order.value == 'payment') {
    queryFilter.value = [{ field: 'State', value: 'WaitPay' }]
  }
  if (order.value == 'complete') {
    queryFilter.value = [{ field: 'State', value: 'Success' }]
  }
  if (order.value == 'cancellation') {
    queryFilter.value = [{ field: 'State', value: 'Cancel' }]
  }
  getDataList()
}
function getDataList() {
  pages.loading = true
  const data = {
    start: pages.pageSize * pages.page - pages.pageSize,
    size: pages.pageSize,
    filterList: queryFilter.value,
    sort: {
      type: 'Desc',
      field: 'CreateDate',
    },
  }
  MG.store
    .getUserOrderList(data)
    .then((res) => {
      res.datas.forEach((item, index) => {
        item.index = pages.page == 1 ? index + 1 : pages.pageSize * (pages.page - 1) + (index + 1)
        item.productList = item.saleMethodLinks
        item.time = item.createDate.slice(0, 10) + +item.createDate.slice(11, 20)
      })
      pages.count = res.totalSize
      dataList.value = [...res.datas]
      console.log('订单列表', res.datas)
      pages.loading = false
    })
    .catch(() => {
      pages.loading = false
    })
}

onMounted(() => {
  getDataList()
})

// watch(
//   () => userStore.token,
//   () => {
//     getDataList()
//   }
// )

const handleCurrentChange = (val: number) => {
  pages.page = val
  getDataList()
}
// 跳转书本详情
const goBookDetails = async (
  id: number,
  name: string,
  refCode: string,
  remarks: string,
  orderSaleMethodId: string,
) => {
  let parentData = null
  let bookId = id
  if (refCode == 'digitalCourses') {
    router.push({
      path: '/bookdetail',
      query: {
        bookId: bookId,
      },
    })
  } else if (refCode == 'digitalTextbooks') {
    router.push({
      path: '/bookdetail',
      query: {
        bookId: bookId,
      },
    })
  } else {
    parentData = await MG.store.getProductBySaleMethod({
      saleMethodId: orderSaleMethodId,
    })
    if (parentData.parentProduct.length > 0) {
      bookId = parentData.parentProduct[parentData.parentProduct.length - 1].id
    }
    router.push({
      path: '/bookdetail',
      query: {
        bookId: bookId,
      },
    })
  }
}
//立即支付
const toPay = (orderNo) => {
  router.push({
    path: '/paymentPage', //要跳转的页面
    query: {
      orderNum: orderNo,
      type: 'personalCenter',
    },
  })
}

//取消订单
const cancleOrder = (orderNum) => {
  MG.store.cancelOrder({ orderNum: orderNum }).then(() => {
    ElMessage({
      message: '订单已取消',
      type: 'success',
    })
    getDataList()
  })
}
</script>
<style lang="less" scoped>
.cartClass {
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #019e58;
    height: 1px;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    color: #545c63;
  }

  ::v-deep .is-active {
    background-color: #019e58;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }
}

.listTable {
  .head {
    font-weight: bold;
    padding: 12px 10px;
    background-color: #f3f3f3;

    .flex1 {
      padding: 0 50px;
    }
  }

  .body {
    padding: 15px 10px;
  }

  li {
    line-height: 23px;
    border-bottom: 1px solid #f4f4f4;

    .index {
      // padding: 0 20px;
      text-align: center;
      width: 80px;
      flex-shrink: 0;
    }

    .list {
      .listItem {
        padding-bottom: 10px;

        .clear {
          width: 400px;
          display: flex;
          align-items: center;
        }
      }

      :last-child {
        padding-bottom: 0px;
      }
    }

    .cover {
      box-shadow: 0px 0px 20px 1px #ccc;
      margin-right: 20px;
      width: 130px;
      height: 180px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .title {
      height: 180px;
    }

    .state {
      padding: 0 20px;
      width: 230px;
    }

    .price {
      text-align: right;
      padding: 0 20px;
      // width: 100px;
      color: #019e58;
    }

    .count {
      // text-align: right;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: rgba(205, 207, 219, 0.14);

      .right {
        float: right;
      }

      .cancel {
        color: #949494;
      }

      .status {
        margin-left: 40px;

        span {
          padding: 0 10px;
        }
      }
    }
  }
}

.list-box {
  min-height: 495px;
}

.pagination-box {
  display: flex;
  justify-content: center;
}
</style>