devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 后台返回列表H5点击按钮加载更多分页数据与van-tab记住选中状态_vue点击加载更多请求

作者：AllinToyou | 2024-02-16 22:39:20

赞

踩

vue点击加载更多请求

效果图（点击更多订单加载，一次加载10条）：

  1. <template>
  2.   <div id="order" class="wap-el page-container wap-com-page">
  3.     <section>
  4.       <com-header></com-header>
  5.     </section>
  6.     <div class="com-top-blue-bg">
  7.       <div class="com-top-blue-bg-cont"></div>
  8.     </div>
  9.     <div class="order-box">
  10.       <div class="com-title-box">
  11.         <!-- 返回按钮 -->
  12.         <div class="wap-page-return" @click="$router.go(-1)"></div>
  13.         <div class="com-page-title">我的订单</div>
  14.       </div>
  15.       <van-tabs v-model="activeStatus" @change="changeTab" animated>
  16.         <van-tab
  17.           v-for="item in orderTitle"
  18.           :key="item.orderStatus"
  19.           :title="item.name"
  20.         >
  21.           <div class="order-cont" v-show="isData">
  22.             <div
  23.               class="order-tab-content"
  24.               v-for="(item1, index1) in list"
  25.               :key="index1"
  26.               @click="goDetail(item1)"
  27.             >
  28.               <div class="order-tab-box">
  29.                 <div class="order-tab-title-box">
  30.                   <div class="order-tab-title flex-center-start">
  31.                     <img
  32.                       class="order-tab-title-img"
  33.                       :src="item1.toolApplicationIcon"
  34.                       alt=""
  35.                     />
  36.                     <div class="order-tab-title-text">
  37.                       {{ item1.toolApplicationName }}
  38.                     </div>
  39.                   </div>
  40.                   <div class="order-status-box">
  41.                     <div
  42.                       class="order-status 1"
  43.                       :class="`order-status${item1.orderStatus == 1 ? 1 : 0}`"
  44.                     >
  45.                       {{ orderStatusVal[item1.orderStatus] }}
  46.                     </div>
  47.                   </div>
  48.                 </div>
  49.                 <div class="order-tab-item-box">
  50.                   <div class="order-tab-item flex-center-between">
  51.                     <div class="order-tab-item-name">订单总金额</div>
  52.                     <div class="order-tab-item-cont">
  53.                       ¥{{ item1.totalPrice }}
  54.                     </div>
  55.                   </div>
  56.                   <div class="order-tab-item flex-center-between">
  57.                     <div class="order-tab-item-name">实付金额</div>
  58.                     <div class="order-tab-item-cont">
  59.                       ¥{{ item1.realPrice }}
  60.                     </div>
  61.                   </div>
  62.                   <div class="order-tab-item flex-center-between">
  63.                     <div class="order-tab-item-name">下单时间</div>
  64.                     <div class="order-tab-item-cont">
  65.                       {{ item1.createDate }}
  66.                     </div>
  67.                   </div>
  68.                 </div>
  69.               </div>
  70.             </div>
  71.             <div class="flex-center-center" v-if="list.length < total">
  72.               <div class="more-order flex-center-center" @click="moreOrder">
  73.                 <span>更多订单</span>
  74.                 <img
  75.                   class="blue-double-right-arrow"
  76.                   :src="`${NEW_ASSET_IMG}/common/blue_double_right_arrow.png`"
  77.                   alt=""
  78.                 />
  79.               </div>
  80.             </div>
  81.           </div>
  82.           <!-- 无订单 -->
  83.           <div
  84.             class="wap-not-data-box flex-column-center-center"
  85.             v-show="!isData"
  86.           >
  87.             <img
  88.               class="wap-not-data-img"
  89.               :src="`${NEW_ASSET_IMG}/common/wap_not_data.png`"
  90.             />
  91.             <p class="wap-not-data-text">暂无订单</p>
  92.           </div>
  93.         </van-tab>
  94.       </van-tabs>
  95.     </div>
  96.   </div>
  97. </template>
  98.  
  99. <script>
  100. export default {
  101.   name: "order",
  102.   components: {
  103.     "com-header": () => import("@/components/common/com-header"),
  104.   },
  105.   data() {
  106.     return {
  107.       page: 1,
  108.       pageSize: 10,
  109.       total: "", //页总数
  110.       nav_index: 0,
  111.       activeStatus: this.$route.query.orderStatus
  112.         ? Number(this.$route.query.orderStatus)
  113.         : "", //订单状态（-3 已退款-2 退款申请中-1：已取消 0：待支付 1：已支付）
  114.       orderStatus: "",
  115.       orderStatusVal: {
  116.         "-3": "已退款",
  117.         "-2": "退款申请中",
  118.         "-1": "已取消",
  119.         0: "待支付",
  120.         1: "已支付",
  121.       }, //订单状态
  122.       orderTitle: [
  123.         { orderStatus: "", name: "全部" }, //status自定义
  124.         { orderStatus: "1", name: "已支付" },
  125.         { orderStatus: "0", name: "待支付" },
  126.         { orderStatus: "-2", name: "退款申请中" },
  127.         { orderStatus: "-3", name: "已退款" },
  128.         { orderStatus: "-1", name: "已取消" },
  129.       ],
  130.       list: [], //订单数据
  131.       isData: true, //是否有数据
  132.     };
  133.   },
  134.   computed: {},
  135.   watch: {},
  136.   methods: {
  137.     getOrderList(isMore, orderStatus) {
  138.       const params = `?page=${this.page}&pageSize=${this.pageSize}&orderStatus=${orderStatus}`;
  139.       this.$orderAPI.getOrders(params).then(({ code, msg, data }) => {
  140.         if (code) {
  141.           this.$message.warning(msg);
  142.           return;
  143.         }
  144.         this.total = Number(data.pageNumVO.total);
  145.         if (isMore) {
  146.           if (data.list.length <= this.total) {
  147.             this.list.push(...data.list);
  148.           } else {
  149.             this.list = data.list;
  150.           }
  151.         } else {
  152.           this.list = data.list;
  153.         }
  154.         this.isData = data.list.length <= 0 ? false : true; //是否显示无数据
  155.       });
  156.     },
  157.     changeTab(e) {
  158.       this.nav_index = e;
  159.       let data = {
  160.         0: "",
  161.         1: 1,
  162.         2: 0,
  163.         3: -2,
  164.         4: -3,
  165.         5: -1,
  166.       };
  167.       this.orderStatus = data[e];
  168.       this.getOrderList(0, data[e]);
  169.       window.sessionStorage.setItem("order_idx", `${this.nav_index}`);
  170.     },
  171.     goDetail(item) {
  172.       this.$router.push({
  173.         path: `/order-detail?toolOrderId=${item.toolOrderId}&orderStatus=${item.orderStatus}`,
  174.       });
  175.     },
  176.     moreOrder() {
  177.       this.page++;
  178.       this.getOrderList(1, this.orderStatus);
  179.     },
  180.   },
  181.   created() {},
  182.   mounted() {
  183.     let order_idx = window.sessionStorage.getItem("order_idx") || "";
  184.     if (order_idx != "") {
  185.       this.activeStatus = Number(order_idx);
  186.       let statusVal =
  187.         this.activeStatus == 1
  188.           ? 1
  189.           : this.activeStatus == 2
  190.           ? 0
  191.           : this.activeStatus == 3
  192.           ? -2
  193.           : this.activeStatus == 4
  194.           ? -3
  195.           : this.activeStatus == 5
  196.           ? -1
  197.           : "";
  198.       this.$nextTick(() => {
  199.         this.getOrderList(0, statusVal);
  200.       });
  201.     }else{
  202.       this.getOrderList(0,this.orderStatus);
  203.     }
  204.   },
  205.   beforeCreate() {},
  206.   beforeMount() {},
  207.   beforeUpdate() {},
  208.   updated() {},
  209.   beforeDestroy() {},
  210.   destroyed() {},
  211.   activated() {},
  212. };
  213. </script>
  214. <style lang='scss' scoped>
  215. #order {
  216.   ::v-deep .van-tab {
  217.     padding: 0;
  218.   }
  219.   ::v-deep .van-tabs__nav {
  220.     background-color: transparent;
  221.   }
  222.   .order-box {
  223.     position: relative;
  224.     z-index: 10;
  225.   }
  226.  
  227.   .order-tab-title-box {
  228.     padding: 0.31rem 0.33rem;
  229.     background: linear-gradient(310deg, #ddebff 0%, #ece8ff 48%, #f3f1fd 100%);
  230.     border-radius: 0.16rem 0.16rem 0 0;
  231.     position: relative;
  232.   }
  233.   .order-status-box {
  234.     position: absolute;
  235.     top: 0;
  236.     right: -0.11rem;
  237.   }
  238.   .order-status {
  239.     width: fit-content;
  240.     position: relative;
  241.     padding: 0.06rem 0.15rem;
  242.     font-size: 0.16rem;
  243.     font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  244.     font-weight: 500;
  245.     line-height: 0.27rem;
  246.     letter-spacing: 0.02rem;
  247.     border-radius: 0.06rem 0.06rem 0px 0.06rem;
  248.   }
  249.   .order-status1 {
  250.     background: linear-gradient(315deg, #4265fe 0%, #10f7ff 100%);
  251.     color: #ffffff;
  252.   }
  253.   .order-status0 {
  254.     background: linear-gradient(315deg, #8e8e8e 0%, #d7d7d7 100%);
  255.     color: #ffffff;
  256.   }
  257.   .clip-triangle {
  258.     -webkit-clip-path: polygon(50% 40%, 0% 100%, 100% 100%);
  259.     clip-path: polygon(50% 40%, 0% 100%, 100% 100%);
  260.   }
  261.   .order-status0,
  262.   .order-status1 {
  263.     &::after {
  264.       content: "";
  265.       position: absolute;
  266.       bottom: -0.08rem;
  267.       right: 0.0178rem;
  268.       width: 0.16rem;
  269.       height: 0.14rem;
  270.       transform: rotate(-45deg);
  271.       @extend .clip-triangle;
  272.     }
  273.   }
  274.   .order-status0::after {
  275.     background-color: rgba(123, 123, 123, 1);
  276.   }
  277.   .order-status1::after {
  278.     background-color: rgba(8, 53, 182, 1);
  279.   }
  280.   .order-cont {
  281.     padding: 0 0.32rem 0.7rem 0.32rem;
  282.   }
  283.   .order-tab-title-img {
  284.     width: 0.64rem;
  285.     height: 0.64rem;
  286.   }
  287.   .order-tab-content {
  288.     margin-top: 0.32rem;
  289.   }
  290.   .order-tab-title-text {
  291.     font-size: 0.32rem;
  292.     font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  293.     font-weight: 500;
  294.     color: #000000;
  295.     line-height: 0.48rem;
  296.     letter-spacing: 0.02rem;
  297.     margin-left: 0.16rem;
  298.   }
  299.   .order-tab-item-box {
  300.     padding: 0 0.32rem 0.4rem 0.32rem;
  301.     background: rgba(255, 255, 255, 1);
  302.     border-radius: 0 0 0.16rem 0.16rem;
  303.     border: 1px solid #979797;
  304.     border-top: none;
  305.   }
  306.   .order-tab-item {
  307.     font-size: 0.28rem;
  308.     font-family: PingFangSC-Regular, PingFang SC;
  309.     font-weight: 400;
  310.     color: #242424;
  311.     line-height: 0.36rem;
  312.     letter-spacing: 0.01rem;
  313.     padding-top: 0.32rem;
  314.   }
  315.   // 暂无数据
  316.   .wap-not-data-box {
  317.     padding: 1.74rem 0 0 0;
  318.     .wap-not-data-img {
  319.       width: 2.58rem;
  320.       height: 2.52rem;
  321.     }
  322.     .wap-not-data-text {
  323.       font-size: 0.26rem;
  324.       font-family: PingFangSC-Regular, PingFang SC;
  325.       font-weight: 400;
  326.       color: #242424;
  327.       line-height: 0.37rem;
  328.       letter-spacing: 1px;
  329.       margin-top: 0.32rem;
  330.     }
  331.   }
  332.   .more-order {
  333.     font-size: 0.26rem;
  334.     font-family: PingFangSC-Medium, PingFang SC;
  335.     font-weight: 500;
  336.     color: #0064ff;
  337.     line-height: 0.26rem;
  338.     margin-top: 0.4rem;
  339.     .blue-double-right-arrow {
  340.       width: 0.27rem;
  341.       height: 0.27rem;
  342.     }
  343.   }
  344. }
  345. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/97370
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号