一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--订单列表
advertisement

使用vue全家桶高仿小米商城--订单列表

此次也是最后一个页面完成了,需要改变的页面就是orderList.vue页面了,同时要在components里面加入一个文件,NoData.vue(无订单数据时候展示的页面)

1、
NoData.vue代码如下:
  1. <template>  
  2.   <div class="no-data">  
  3.     <img src="./../../public/images/icon-no-data.png" alt="">  
  4.     <p>当前暂无提交的订单记录...</p>  
  5.   </div>  
  6. </template>  
  7. <script>  
  8. export default{  
  9.   name:'no-data'  
  10. }  
  11. </script>  
  12. <style lang="scss">  
  13.   .no-data{  
  14.     text-align:center;  
  15.     font-size:20px;  
  16.     color:#999999;  
  17.     margin:50px 0;  
  18.     img{  
  19.       width:240px;  
  20.       height:180px;  
  21.       margin-bottom:30px;  
  22.     }  
  23.   }  
  24. </style>  
2、orderList.vue页面代码如下:
  1. <template>  
  2.     <div class="order-list">  
  3.         <order-header title="订单列表">  
  4.             <template v-slot:tip>  
  5.                 <span>请谨防钓鱼链接或诈骗电话,了解更多></span>  
  6.             </template>  
  7.         </order-header>  
  8.         <div class="wrapper">  
  9.             <div class="container">  
  10.                 <div class="order-box">  
  11.                     <loading v-if="loading"></loading>  
  12.                     <div class="order" v-for="(order,index) in list" :key="index">  
  13.                         <div class="order-title">  
  14.                             <div class="item-info fl">  
  15.                                 {{order.createTime}}  
  16.                                 <span>|</span>  
  17.                                 {{order.receiverName}}  
  18.                                 <span>|</span>  
  19.                                 订单号:{{order.orderNo}}  
  20.                                 <span>|</span>  
  21.                                 {{order.paymentTypeDesc}}  
  22.                             </div>  
  23.                             <div class="item-money fr">  
  24.                                 <span>应付金额:</span>  
  25.                                 <span class="money">{{order.payment}}</span>  
  26.                                 <span>元</span>  
  27.                             </div>  
  28.                         </div>  
  29.                         <div class="order-content clearfix">  
  30.                             <div class="good-box fl">  
  31.                                 <div class="good-list" v-for="(item,i) in order.orderItemVoList" :key="i">  
  32.                                     <div class="good-img">  
  33.                                         <img v-lazy="item.productImage" alt="">  
  34.                                     </div>  
  35.                                     <div class="good-name">  
  36.                                         <div class="p-name">{{item.productName}}</div>  
  37.                                         <div class="p-money">{{item.totalPrice + 'X' + item.quantity}}元</div>  
  38.                                     </div>  
  39.                                 </div>  
  40.                             </div>  
  41.                             <div class="good-state fr" v-if="order.status == 20">  
  42.                                 <a href="javascript:;">{{order.statusDesc}}</a>  
  43.                             </div>  
  44.                             <div class="good-state fr" v-else>  
  45.                                 <a href="javascript:;" @click="goPay(order.orderNo)">{{order.statusDesc}}</a>  
  46.                             </div>  
  47.                         </div>  
  48.                     </div>  
  49.                     <el-pagination   
  50.                         v-if="pageShow"  
  51.                         class="pagination"   
  52.                         background layout="prev, pager, next"  
  53.                         :pageSize="pageSize"   
  54.                         :total="total"   
  55.                         @current-change="handleChange">  
  56.                     </el-pagination>  
  57.                     <div class="load-more" v-if="false">  
  58.                         <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>  
  59.                     </div>  
  60.                     <div class="scroll-more"   
  61.                         v-infinite-scroll="scrollMore"   
  62.                         infinite-scroll-disabled="true"   
  63.                         infinite-scroll-distance="410"  
  64.                         v-if="false"  
  65.                         >  
  66.                         <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">  
  67.                     </div>  
  68.                     <no-data v-if="!loading && list.length==0"></no-data>  
  69.                 </div>  
  70.             </div>  
  71.         </div>  
  72.     </div>  
  73. </template>  
  74. <script>  
  75.     import OrderHeader from './../components/OrderHeader'  
  76.     import Loading from './../components/Loading'  
  77.     import NoData from './../components/NoData'  
  78.     import { Pagination,Button } from 'element-ui'  
  79.     import infiniteScroll from 'vue-infinite-scroll'  
  80.     export default {  
  81.         name: 'order-list',  
  82.         components: {  
  83.             OrderHeader,  
  84.             Loading,  
  85.             NoData,  
  86.             [Pagination.name]: Pagination,  
  87.             [Button.name]: Button  
  88.         },  
  89.         directives: {  
  90.             infiniteScroll  
  91.         },  
  92.         data() {  
  93.             return {  
  94.                 loading: false,  
  95.                 list: [],  
  96.                 pageSize: 10,  
  97.                 pageNum: 1,  
  98.                 total: 0,  
  99.                 showNextPage: true//加载更多:是否显示按钮  
  100.                 busy: false//滚动加载,是否触发  
  101.                 pageShow:true  
  102.             }  
  103.         },  
  104.         mounted() {  
  105.             this.getOrderList();  
  106.         },  
  107.         methods: {  
  108.             getOrderList() {  
  109.                 this.loading = true;  
  110.                 this.busy = true;  
  111.                 this.axios.get('/orders', {  
  112.                     params: {  
  113.                         pageSize: 10,  
  114.                         pageNum: this.pageNum  
  115.                     }  
  116.                 }).then((res) => {  
  117.                     this.loading = false;  
  118.                     this.list = this.list.concat(res.list);  
  119.                     this.total = res.total;  
  120.                     this.showNextPage = res.hasNextPage;  
  121.                     this.busy = false;  
  122.                     ifthis.list==0 ){  
  123.                         this.pageShow = false  
  124.                     }  
  125.                 }).catch(() => {  
  126.                     this.loading = false;  
  127.                 })  
  128.             },  
  129.             goPay(orderNo) {  
  130.                 // 三种路由跳转方式  
  131.                 // this.$router.push('/order/pay')  
  132.                 /*this.$router.push({ 
  133.                   name:'order-pay', 
  134.                   query:{ 
  135.                     orderNo 
  136.                   } 
  137.                 })*/  
  138.                 this.$router.push({  
  139.                     path: '/order/pay',  
  140.                     query: {  
  141.                         orderNo  
  142.                     }  
  143.                 })  
  144.             },  
  145.             // 第一种方法:分页器  
  146.             handleChange(pageNum) {  
  147.                 this.pageNum = pageNum;  
  148.                 this.getOrderList();  
  149.             },  
  150.             // 第二种方法:加载更多按钮  
  151.             loadMore() {  
  152.                 this.pageNum++;  
  153.                 this.getOrderList();  
  154.             },  
  155.             // 第三种方法:滚动加载,通过npm插件实现  
  156.             scrollMore() {  
  157.                 this.busy = true;  
  158.                 setTimeout(() => {  
  159.                     this.pageNum++;  
  160.                     this.getList();  
  161.                 }, 500);  
  162.             },  
  163.             // 专门给scrollMore使用  
  164.             getList() {  
  165.                 this.loading = true;  
  166.                 this.axios.get('/orders', {  
  167.                     params: {  
  168.                         pageSize: 10,  
  169.                         pageNum: this.pageNum  
  170.                     }  
  171.                 }).then((res) => {  
  172.                     this.list = this.list.concat(res.list);  
  173.                     this.loading = false;  
  174.                     if (res.hasNextPage) {  
  175.                         this.busy = false;  
  176.                     } else {  
  177.                         this.busy = true;  
  178.                     }  
  179.                 });  
  180.             },  
  181.         }  
  182.     }  
  183. </script>  
  184. <style lang="scss">  
  185.     @import './../assets/scss/config.scss';  
  186.     @import './../assets/scss/mixin.scss';  
  187.   
  188.     .order-list {  
  189.         .wrapper {  
  190.             background-color: $colorJ;  
  191.             padding-top: 33px;  
  192.             padding-bottom: 110px;  
  193.   
  194.             .order-box {  
  195.                 .order {  
  196.                     @include border();  
  197.                     background-color: $colorG;  
  198.                     margin-bottom: 31px;  
  199.   
  200.                     &:last-child {  
  201.                         margin-bottom: 0;  
  202.                     }  
  203.   
  204.                     .order-title {  
  205.                         @include height(74px);  
  206.                         background-color: $colorK;  
  207.                         padding: 0 43px;  
  208.                         font-size: 16px;  
  209.                         color: $colorC;  
  210.   
  211.                         .item-info {  
  212.                             span {  
  213.                                 margin: 0 9px;  
  214.                             }  
  215.                         }  
  216.   
  217.                         .money {  
  218.                             font-size: 26px;  
  219.                             color: $colorB;  
  220.                         }  
  221.                     }  
  222.   
  223.                     .order-content {  
  224.                         padding: 0 43px;  
  225.   
  226.                         .good-box {  
  227.                             width: 88%;  
  228.   
  229.                             .good-list {  
  230.                                 display: flex;  
  231.                                 align-items: center;  
  232.                                 height: 145px;  
  233.   
  234.                                 .good-img {  
  235.                                     width: 112px;  
  236.   
  237.                                     img {  
  238.                                         width: 100%;  
  239.                                     }  
  240.                                 }  
  241.   
  242.                                 .good-name {  
  243.                                     font-size: 20px;  
  244.                                     color: $colorB;  
  245.                                 }  
  246.                             }  
  247.                         }  
  248.   
  249.                         .good-state {  
  250.                             @include height(145px);  
  251.                             font-size: 20px;  
  252.                             color: $colorA;  
  253.   
  254.                             a {  
  255.                                 color: $colorA;  
  256.                             }  
  257.                         }  
  258.                     }  
  259.                 }  
  260.   
  261.                 .pagination {  
  262.                     text-align: right;  
  263.                 }  
  264.   
  265.                 .el-pagination.is-background .el-pager li:not(.disabled).active {  
  266.                     background-color: #FF6600;  
  267.                 }  
  268.   
  269.                 .el-button--primary {  
  270.                     background-color: #FF6600;  
  271.                     border-color: #FF6600;  
  272.                 }  
  273.   
  274.                 .load-more,  
  275.                 .scroll-more {  
  276.                     text-align: center;  
  277.                 }  
  278.             }  
  279.         }  
  280.     }  
  281. </style>

部分效果截图如下:




zhangren.online
上一篇:使用vue全家桶高仿小米商城--订单结算
下一篇:使用vue全家桶高仿小米商城--路由按需加载优化

您可能喜欢

回到顶部