博客列表 >vue订单列表基本操作

vue订单列表基本操作

kiraseo_wwwkiraercom
kiraseo_wwwkiraercom原创
2022年09月22日 18:28:15513浏览

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. }

效果如下

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议