search

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

vue订单列表基本操作

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

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>
  49.             </div>
  50.             <div    @click="page()" v-if="jia">
  51.             <button class="order-go colorff" style="color:#fff;width:80%;margin-top:30px;margin-left:10%;">加载更多</button>
  52.         </div>
  53.         </div>
  54.     </div>
  55. </template>
  56. <script>
  57.     import { reactive, toRefs } from "vue";
  58.     import { Userorder } from "../../network/index.js";
  59.     export default({
  60.         setup() {
  61.             const data = reactive({
  62.                         order:[],
  63.                         p : 1,
  64.                          count : 1,
  65.                        sid:0,
  66.                        jia : true,
  67.             });
  68.             //获取订单方法            
  69.             Userorder().then( (e)=>{
  70.                 data.order = e.data.data.order;
  71.                 data.count = e.data.data.num;
  72.                console.log( e);
  74.             } );
  75.             //选择方法
  76.             const status_cat = (ee) =>{
  77.                 data.sid = ee;
  78.                 Userorder({sid: data.sid}).then( (e)=>{
  79.                     data.order = e.data.data.order;
  80.                 data.count = e.data.data.num;
  81.             } )
  82.             data.jia = true;
  83.             data.p = 1;
  84.             }
  86.             //分页方法
  87.             const page = ()=>{
  88.             data.p++;
  89.             Userorder({p:data.p,sid: data.sid}).then( (e)=>{
  90.                 data.order  =  data.order .concat(  e.data.data.order);
  91.                 data.count = e.data.data.num;
  92.                 if(data.p >= data.count){
  93.                     data.jia = false;
  94.                 }
  95.             } )
  96.         }
  99.             return {
  100.                 ...toRefs(data),
  101.                 status_cat,
  102.                 page,
  103.             }
  104.         }
  105.     })
  106.     </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.     }

效果如下

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

上一条：自定义loader使用说明，以APICloud平台为例下一条：gird常用的9个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多