样式调整

QYF-GitLab1

13 小时以前 07b53eedf9771d98485c9d7e310f6126a53af80e

 src/views/personalCenter/myOrder.vue

@@ -38,7 +38,7 @@
                            pItem.orderSaleMethod.product.name,
                            pItem.orderSaleMethod.product.cmsTypeRefCode,
                            item.remarks,
                            pItem.orderSaleMethod.id
                            pItem.orderSaleMethod.id,
                          )
                        "
                      >
@@ -46,11 +46,7 @@
                          <img
                            :src="
                              pItem.orderSaleMethod.product.icon
                                ? getPublicImage(
                                    pItem.orderSaleMethod.product.icon,
                                    '',
                                    ''
                                  )
                                ? getPublicImage(pItem.orderSaleMethod.product.icon, '', '')
                                : bookCover
                            "
                            alt=""
@@ -58,31 +54,28 @@
                        </div>
                        <div class="title flex ai-c">
                          {{
                            pItem.orderSaleMethod.type === "defaultSaleMethod" ||
                            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"
                          ? "图书服务-云测试"
                          : "图书服务-云学习"
                        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>
@@ -95,27 +88,17 @@
                  <span v-if="item.createDate">
                    创建时间：
                    <span>{{ item.createDate.slice(0, 10) }}</span>
                    <span style="margin-left: 5px">{{
                      item.createDate.slice(11, 19)
                    }}</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="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 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="main hover" @click="toPay(item.orderNumber)">立即支付</span>
                      <span class="grey hover" @click="cancleOrder(item.orderNumber)"
                        >取消订单</span
                      >
@@ -145,76 +128,75 @@
</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([]);
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 = [];
  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 == 'payment') {
    queryFilter.value = [{ field: 'State', value: 'WaitPay' }]
  }
  if (order.value == "complete") {
    queryFilter.value = [{ field: "State", value: "Success" }];
  if (order.value == 'complete') {
    queryFilter.value = [{ field: 'State', value: 'Success' }]
  }
  if (order.value == "cancellation") {
    queryFilter.value = [{ field: "State", value: "Cancel" }];
  if (order.value == 'cancellation') {
    queryFilter.value = [{ field: 'State', value: 'Cancel' }]
  }
  getDataList();
};
  getDataList()
}
function getDataList() {
  pages.loading = true;
  pages.loading = true
  const data = {
    start: pages.pageSize * pages.page - pages.pageSize,
    size: pages.pageSize,
    filterList: queryFilter.value,
    sort: {
      type: "Desc",
      field: "CreateDate",
      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;
        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;
    });
      pages.loading = false
    })
}

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

// watch(
//   () => userStore.token,
@@ -224,69 +206,69 @@
// )

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

//取消订单
const cancleOrder = (orderNum) => {
  MG.store.cancelOrder({ orderNum: orderNum }).then(() => {
    ElMessage({
      message: "订单已取消",
      type: "success",
    });
    getDataList();
  });
};
      message: '订单已取消',
      type: 'success',
    })
    getDataList()
  })
}
</script>
<style lang="less" scoped>
.cartClass {
@@ -365,7 +347,6 @@

    .title {
      height: 180px;
      line-height: 180px;
    }

    .state {