Blogger Information
Blog 62
fans 3
comment 1
visits 29894
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue订单列表基本操作
kiraseo_wwwkiraercom
Original
517 people have browsed it

vue订单列表基本操作

订单列表 翻页功能、切换状态功能

代码如下

  1. <template>
  2. <div id="menu1"></div>
  3. <div style="position: relative; max-width: 640px;">
  4. <router-link to="/user" class="order-back colorff text-center ft22">返回</router-link>
  5. </div>
  6. <div class="course-tab" data-ydui-tab>
  7. <div class="procuct-box layout-column layout-align-space-between-center ft28">
  8. <ul class="procuct-item-tit my-refer-tit tab-nav b-line layout-row layout-align-space-between-end">
  9. <li class="my-refer-li tab-nav-item ft28" @click="status_cat(0)" :class="sid==0?'tab-active':''"><a href="javascript:;">全部</a></li>
  10. <li class="my-refer-li tab-nav-item ft28" @click="status_cat(1)" :class="sid==1?'tab-active':''"><a href="javascript:;">待支付</a></li>
  11. <li class="my-refer-li tab-nav-item ft28" @click="status_cat(3)" :class="sid==3?'tab-active':''"><a href="javascript:;">待发货</a></li>
  12. <li class="my-refer-li tab-nav-item ft28" @click="status_cat(4)" :class="sid==4?'tab-active':''"><a href="javascript:;">待收货</a></li>
  13. <li class="my-refer-li tab-nav-item ft28" @click="status_cat(9)" :class="sid==9?'tab-active':''"><a href="javascript:;">已完成</a></li>
  14. </ul>
  15. </div>
  16. <div class="tab-panel ft28 color5c">
  17. <!-- 全部 -->
  18. <div class="tab-panel-item tab-active">
  19. <div class="order-info" v-for="(item,key,index) in order " :key="index" >
  20. <div class="order-info-top layout-row layout-align-space-between-center">
  21. <div>订单号:{{item.ooid}}</div>
  22. <div class="color-green">{{item.status_v}}</div>
  23. </div>
  24. <div class="order-info-center">
  25. <router-link to="/order_details">
  26. <div class="order-line layout-row layout-align-space-between-center">
  27. <div class="order-img">
  28. <img :src="item.img_s">
  29. </div>
  30. <div class="order-rit layout-column layout-align-space-between-start color5c">
  31. <div>
  32. <div class="coures-title ft26">{{item.title}}</div>
  33. <!-- <div class="order-lable colorb1 layout-row layout-align-start-center">
  34. <span>{{item.know_text}}</span>
  35. </div> -->
  36. </div>
  37. <div class="coures-txt-bot layout-row layout-align-end-center">
  38. <div class="colorb1 ft26">{{item.add_time_v}}</div>
  39. </div>
  40. </div>
  41. </div>
  42. </router-link>
  43. <!-- <div class="order-info-bot layout-row layout-align-end-center">
  44. <router-link to="/purchased_details" class="order-go colorff text-center" style="color:#fff;">去上课</router-link>
  45. </div> -->
  46. </div>
  47. </div>
  48. </div>
  49. <div @click="page()" v-if="jia">
  50. <button class="order-go colorff" style="color:#fff;width:80%;margin-top:30px;margin-left:10%;">加载更多</button>
  51. </div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import { reactive, toRefs } from "vue";
  57. import { Userorder } from "../../network/index.js";
  58. export default({
  59. setup() {
  60. const data = reactive({
  61. order:[],
  62. p : 1,
  63. count : 1,
  64. sid:0,
  65. jia : true,
  66. });
  67. //获取订单方法
  68. Userorder().then( (e)=>{
  69. data.order = e.data.data.order;
  70. data.count = e.data.data.num;
  71. console.log( e);
  72. } );
  73. //选择方法
  74. const status_cat = (ee) =>{
  75. data.sid = ee;
  76. Userorder({sid: data.sid}).then( (e)=>{
  77. data.order = e.data.data.order;
  78. data.count = e.data.data.num;
  79. } )
  80. data.jia = true;
  81. data.p = 1;
  82. }
  83. //分页方法
  84. const page = ()=>{
  85. data.p++;
  86. Userorder({p:data.p,sid: data.sid}).then( (e)=>{
  87. data.order = data.order .concat( e.data.data.order);
  88. data.count = e.data.data.num;
  89. if(data.p >= data.count){
  90. data.jia = false;
  91. }
  92. } )
  93. }
  94. return {
  95. ...toRefs(data),
  96. status_cat,
  97. page,
  98. }
  99. }
  100. })
  101. </script>
  1. public function userorder(){
  2. $status = input('post.sid',0);
  3. $p = input('post.p',1);
  4. $where = [];
  5. switch ($status){
  6. case 1:
  7. $where[] = ['a.status','=',1];
  8. break;
  9. case 2:
  10. $where[] = ['a.status','=',2];
  11. break;
  12. case 3:
  13. $where[] = ['a.status','=',3];
  14. break;
  15. case 4:
  16. $where[] = ['a.status','=',4];
  17. break;
  18. case 9:
  19. $where[] = ['a.status','=',9];
  20. break;
  21. }
  22. $p = input('post.p',1);
  23. $data = Request::param('token');
  24. $uid= Ticket::get($data,'phpcn');
  25. $num = Db::table('bew_order')->where('uid','=',$uid)->count();
  26. $order= Db::table('bew_order')
  27. ->alias('a')
  28. ->field('a.ooid,a.status,a.add_time,w.title,w.img,w.know_text')
  29. ->leftJoin('bew_course w','a.cou_id = w.id')
  30. ->where('a.uid','=',$uid)
  31. ->where($where)
  32. ->page($p,5)
  33. ->select()->toArray();
  34. foreach ( $order as &$order_v){
  35. switch ($order_v['status']){
  36. case 1:
  37. $order_v['status_v']='订单待支付';
  38. break;
  39. case 2:
  40. $order_v['status_v']='订单已支付';
  41. break;
  42. case 3:
  43. $order_v['status_v']='订单已发货';
  44. break;
  45. case 4:
  46. $order_v['status_v']='订单已收货';
  47. break;
  48. case 9:
  49. $order_v['status_v']='订单已完成';
  50. break;
  51. }
  52. $order_v['img_s']= $this->get_url().(explode(';',$order_v['img']))[0];
  53. $order_v['add_time_v']= date('Y-m-d',$order_v['add_time']);
  54. }
  55. $arr= [
  56. 'code'=>0,
  57. 'msg'=>'成功',
  58. 'data'=>[
  59. 'order'=>$order,
  60. 'num'=>ceil($num/5),
  61. ]
  62. ];
  63. echo json_encode($arr);
  64. }

效果如下

列表和翻页效果效果
列表和翻页效果
切换效果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post