书架和个人中心订单列表

src/components/Header.vue

@@ -63,7 +63,7 @@
         width="504px"
         class="login-dialog"
         v-if="loginFlag">
-        <login @cancelLogin="cancelLogin"></login>
+        <login @cancelLogin="cancelLogin" :toUrl="toUrl"></login>
     </el-dialog>
   </div>
 </template>
@@ -106,6 +106,7 @@ export default {
       userMessage: getToken()?JSON.parse(getToken()):null,
       userShow: Cookies.get('HM21St_User_Token')?true:false,
       loginFlag: false,
+      toUrl: ''
     };
   },
   watch: {},
@@ -115,9 +116,22 @@ export default {
   methods: {
     // 切换项目
     handleCommand(command) {
-      this.$router.push({
-        path: this.projectList[command].url,
-      });
+        this.toUrl = ''
+        if(this.projectList[command].url!=='/bookShelf'){
+            this.$router.push({
+                path: this.projectList[command].url,
+            });
+        }else{
+            if(this.userMessage){
+                this.$router.push({
+                    path: this.projectList[command].url,
+                });
+            }else{
+                this.toUrl = this.projectList[command].url
+                this.loginFlag = true
+            }
+        }
+      
     },
     // 切换登录的注册
     cutLoginReg() {

src/components/common/BookCard.vue

@@ -9,7 +9,7 @@
                 <div style="padding: 12px;width: 200px;">
                     <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
                     <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 16px; width:50%;" />
-                    <el-skeleton-item variant="text" style="height: 21px; width:70%;" />
+                    <el-skeleton-item variant="text" style="height: 21px; width:70%;" v-if="!type||type!='bookShelf'" />
                 </div>
             </template>
         </el-skeleton>
@@ -38,8 +38,8 @@
             <p class="author">{{item.shelve_date||item.typeName||item.classperiod||item.author||'暂无'}}</p>
             <template v-if="!type||type!='bookShelf'">
                 <p class="price">
-                <span class="OPPOSans">￥{{item.price_discount|cutMoneyFiter}}</span>
-                <s>￥{{item.price|cutMoneyFiter}}</s>
+                <span class="OPPOSans">￥{{item.price_discount?item.price_discount:item.price|cutMoneyFiter}}</span>
+                <s v-if="item.price_discount">￥{{item.price|cutMoneyFiter}}</s>
                 </p>
             </template>
             </div>
@@ -62,17 +62,14 @@ export default {
   data() {
     //这里存放数据
     return {
-      colors: ['#EA5939', '#EA5939', '#EA5939'],
-      dataContext: [
-        { "houseId": 1, "date": "2023-02-25", "weight": 150, "rate": 1.5 },
-        { "houseId": 1, "date": "2023-02-26", "weight": 200, "rate": 1.5 },
-        { "houseId": 1, "date": "2023-02-24", "weight": 50, "rate": 1.5 },
-        { "houseId": 1, "date": "2023-02-27", "weight": 300, "rate": 1.5 },
-        { "houseId": 2, "date": "2023-02-25", "weight": 100, "rate": 3.6 },
-        { "houseId": 2, "date": "2023-02-26", "weight": 500, "rate": 7.9 },
-        { "houseId": 3, "date": "2023-02-25", "weight": 80, "rate": 7.9 },
-        { "houseId": 3, "date": "2023-02-26", "weight": 200, "rate": 7.9 }
-      ]
+      goodsTypeList:{
+        0:{
+            type: 'LB'
+        },
+        2:{
+            type: 'baozhi'
+        }
+      }
     }
   },
   //计算属性 类似于data概念
@@ -120,7 +117,7 @@ export default {
             query: {
                 headerConfig: encodeURIComponent(url),
                 isBuy:this.isBuy,
-                cardType: this.item.course_type,
+                cardType: this.item.course_type||this.goodsTypeList[this.item.type].type,
                 id: this.item.id
             },
         });

src/components/common/BookLiveCard.vue

@@ -27,8 +27,8 @@
             </div>
             <template>
                 <p class="price">
-                <span class="OPPOSans">￥{{item.price_discount|cutMoneyFiter}}</span>
-                <s>￥{{item.price|cutMoneyFiter}}</s>
+                <span class="OPPOSans">￥{{item.price_discount?item.price_discount:item.price|cutMoneyFiter}}</span>
+                <s v-if="item.price_discount">￥{{item.price|cutMoneyFiter}}</s>
                 </p>
             </template>
             </div>

src/views/bookShelf/bookItem.vue

@@ -40,8 +40,8 @@
                 <div class="sales-box">
                     <div class="sales-left">
                         <span>优惠价</span>
-                        <span class="OPPOSans">￥{{info.price_discount|cutMoneyFiter}}</span>
-                        <span class="old-price">￥{{info.price|cutMoneyFiter}}</span>
+                        <span class="OPPOSans">￥{{info.price_discount?info.price_discount:info.price|cutMoneyFiter}}</span>
+                        <span class="old-price" v-if="info.price_discount">￥{{info.price|cutMoneyFiter}}</span>
                     </div>
                     <span class="sales-right" v-if="sales>=1000">累计销售 {{salesCn}}</span>
                 </div>

src/views/bookShelf/index.vue

@@ -7,7 +7,7 @@
       :LoginNavIndex="1"
     />
     <ul class="option">
-        <li class="option-item" :class="[typeValue===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(indexo)">
+        <li class="option-item" :class="[typeIndex===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(itemo,indexo)">
             <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
             <span>{{itemo.label}}</span>
             <b>{{itemo.number}}</b>
@@ -37,12 +37,13 @@
           <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
         </el-input>
       </div>
-      <h5 class="show-title" v-if="typeValue!==0">{{optionList[typeValue].label}}<b>{{optionList[typeValue].number}}</b></h5>
-      <div class="list">
+      <h5 class="show-title" v-if="typeIndex!==0">{{optionList[typeIndex].label}}<b>{{optionList[typeIndex].number}}</b></h5>
+      <div class="list" v-if="BookList.length>0">
         <!-- v-infinite-scroll="load" -->
         <div
           v-for="(item,index) in BookList"
           :key="index+'todayNew'"
+          v-infinite-scroll="load"
           infinite-scroll-disabled="disabled"
           :style="{
               marginLeft:index==0||index%5==0?'0':'50px',
@@ -63,6 +64,10 @@
         <p v-if="loading" class="tips">加载中...</p>
         <p v-if="noMore" class="tips">没有更多了</p>
       </div>
+      <div class="nodata" v-else>
+        <img src="../../assets/nodata.png" />
+        <p>找不到文件</p>
+      </div>
     </div>
   </div>
 </template>
@@ -72,6 +77,7 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
 import BookCard from "@/components/common/BookCard.vue"
+import { getLogin } from "@/api/ajax";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -80,68 +86,51 @@ export default {
   data() {
     //这里存放数据
     return {
-      BookList: [{
-        src: require('../../assets/baozhi1.png'),
-        name: "第815期",
-        date: "2023-05-15",
-        type:'baozhi'
-      },
-      {
-        src: require('../../assets/baozhi2.png'),
-        name: "第813期",
-        typeName: '2023-05-01',
-        type:'baozhi'
-      },
-      {
-        src: require('../../assets/baozhi1.png'),
-        name: "第810期",
-        classperiod: '2023-04-10',
-        type:'baozhi'
-      },
-      {
-        src: require('../../assets/baozhi1.png'),
-        name: "第809期 ",
-        date: "2023-04-03",
-        type:'baozhi'
-      },
-      {
-        src: require('../../assets/baozhi2.png'),
-        name: "第804期",
-        date: "2023-02-27",
-        type:'baozhi'
-      },
-      {
-        src: require('../../assets/baozhi2.png'),
-        name: "第801期",
-        date: "2023-01-09",
-        type:'baozhi'
-      }
+      BookList: [
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        },
+        {
+            skeleton: true
+        }
       ],
       optionList: [
         {
             label: '全部',
             img: 'quanbu',
-            number: '6'
+            number: 0,
+            value: -1
         },
         {
             label: '画刊',
             img: 'huakan',
-            number: '0'
+            number: 0,
         },
         {
             label: '报纸',
             img: 'baozhi',
-            number: '6'
+            number: 0,
+            value: 2
         },
         {
             label: '练习册',
             img: 'xiti',
-            number: '0'
+            number: 0
         },
         {
             label: '课程',
             img: 'kecheng',
-            number: '0'
+            number: 0,
+            value: 10
         }
         // ,
         // {
@@ -150,28 +139,31 @@ export default {
         //     number: '6'
         // }
       ],
-      typeValue: 0,
+      typeValue: -1,
       changeList: [
         {
           name: "按购买时间",
           sort: "down",
-          sortName: "gmsj",
+          sortName: "buy_time",
         },
         {
           name: "按名称",
           sort: "",
-          sortName: "fbsj",
+          sortName: "name",
         },
         {
           name: "最近使用",
           sort: "",
-          sortName: "zjsy",
+          sortName: "last_use_time",
         },
       ],
-      sortField: "gmsj",
+      sortField: "",
       searchNameValue: '', // 搜索名称值
       loading: false,
-      noMore: false
+      noMore: false,
+      pageNumber: 1,
+      pageSize: 30,
+      typeIndex: 0
     }
   },
   //计算属性 类似于data概念
@@ -184,14 +176,61 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleClick(value){
-        this.typeValue = value
+    handleClick(item,index){
+        this.typeIndex = index
+        this.pageNumber = 1
+        if(item.hasOwnProperty("value")){
+            this.typeValue = item.value
+            if(item.number>0){
+                this.BookList = [
+                    {
+                        skeleton: true
+                    },
+                    {
+                        skeleton: true
+                    },
+                    {
+                        skeleton: true
+                    },
+                    {
+                        skeleton: true
+                    },
+                    {
+                        skeleton: true
+                    }
+                ]
+                this.getList()
+            }else{
+                this.BookList = []
+            }
+        }else{
+            this.BookList = []
+        }
+        
         $(".list").animate({
             scrollTop: 0
         }, 200);
     },
     // 搜索查询
     getSearch(){
+        this.pageNumber = 1
+        this.BookList = [
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            },
+            {
+                skeleton: true
+            }
+        ]
         $(".list").animate({
             scrollTop: 0
         }, 200);
@@ -223,58 +262,104 @@ export default {
       $(".list").animate({
         scrollTop: 0
       }, 200);
+      this.pageNumber = 1
       this.getList()
     },
     // 查询列表
     getList(){
-        let arr = [{
-        src: require('../../assets/bookcard-image.png'),
-        name: "名称名称名称名称名称名称名称名称名称名称名称名称",
-        date: "2012-03-15",
-      },
-      {
-        src: require('../../assets/bookcard-image.png'),
-        name: "练习册练习册",
-        typeName: '初三提高级'
-      },
-      {
-        src: require('../../assets/bookcard-image.png'),
-        name: "课程课程",
-        classperiod: '45节'
-      },
-      {
-        src: require('../../assets/bookcard-image.png'),
-        name: "名称名称名称名称名称名称名称名称名称名称名称名称",
-        date: "2012-03-15",
-      },
-      {
-        src: require('../../assets/bookcard-image.png'),
-        name: "名称名称名称名称名称名称名称名称名称名称名称名称",
-        date: "2012-03-15",
-      },
-      {
-        src: require('../../assets/bookcard-image.png'),
-        name: "名称名称名称名称名称名称名称名称名称名称名称名称",
-        date: "2012-03-15",
-      }
-      ]
-        if(this.BookList.length<100){
-            this.BookList = this.BookList.concat(arr)
-        }else{
-            this.noMore = true
+        this.loading = true
+        let MethodName = "/ShopServer/Client/BookshelfQuery/PageQueryMyGoodsList";
+        let order_column_list = []
+        if(this.sortField !== ''){
+            if(this.sortType===1){
+                order_column_list = [this.sortField + ':desc']
+            }else if(this.sortType===0){
+                // 升序不传值
+                order_column_list = [this.sortField]
+            }
         }
+        let data = {
+            goods_name: this.searchNameValue.trim(),
+            goods_type: this.typeValue,
+            page_capacity:this.pageSize,
+            cur_page:this.pageNumber,
+            order_column_list: order_column_list
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                if(this.pageNumber===1){
+                    this.BookList = []
+                    this.noMore = false
+                }
+                this.BookList = this.BookList.concat(res.goods_list)
+                if(res.total_page<=this.pageNumber){
+                    this.noMore = true
+                }
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
+        
     },
     load () {
-      this.loading = true
-      setTimeout(() => {
+        this.pageNumber++
         this.getList()
-        this.loading = false
-      }, 2000)
+    },
+    // 获取商品个数
+    getNumber(){
+        let MethodName = "/ShopServer/Client/BookshelfQuery/GetMyGoodsCount"
+        getLogin(MethodName, {}).then((res) => {
+            if(res.status===1){
+                this.optionList= [
+                    {
+                        label: '全部',
+                        img: 'quanbu',
+                        number: res.count_all,
+                        value: -1
+                    },
+                    {
+                        label: '画刊',
+                        img: 'huakan',
+                        number: 0,
+                    },
+                    {
+                        label: '报纸',
+                        img: 'baozhi',
+                        number: res.count_issue,
+                        value: 2
+                    },
+                    {
+                        label: '练习册',
+                        img: 'xiti',
+                        number: 0
+                    },
+                    {
+                        label: '课程',
+                        img: 'kecheng',
+                        number: res.count_course,
+                        value: 10
+                    }
+                    // ,
+                    // {
+                    //     label: '合刊',
+                    //     img: 'hekan',
+                    //     number: '6'
+                    // }
+                ]
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
+    this.getNumber()
+    this.getList()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -431,6 +516,7 @@ export default {
         }
         > div {
             width: 200px;
+            height: 352px;
             border-radius: 8px;
             overflow: hidden;
             background: #ffffff;
@@ -444,7 +530,19 @@ export default {
         }
     }
   }
-  
+  .nodata{
+    text-align: center;
+    img{
+        width: 329px;
+    }
+    p{
+        color: #A8A8A8;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        margin: 30px 0;
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -473,7 +571,7 @@ export default {
                 }
             }
             .el-button{
-                padding: 0;
+                padding: 10px 12px;
                 color: #ffffff;
             }
         }

src/views/login.vue

@@ -9,11 +9,11 @@
     <!-- <template v-if="tabsIndex===0"> -->
         <el-form label-position="top" label-width="80px" ref="loginPwdForm" :model="loginPwdForm" class="form" :hide-required-asterisk="true" :rules="rulesPassword" v-show="tabsIndex===0">
             <el-form-item label="账号" prop="userName">
-                <el-input v-model="loginPwdForm.userName" autocomplete="off" placeholder="用户名/邮箱/手机号" >
+                <el-input v-model="loginPwdForm.userName" autocomplete="off" placeholder="用户名/邮箱/手机号" @blur="handleTrim('loginPwdForm','userName')" >
                 </el-input>
             </el-form-item>
             <el-form-item label="密码" prop="password">
-                <el-input v-model="loginPwdForm.password" :type="passwordFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
+                <el-input v-model="loginPwdForm.password" :type="passwordFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('loginPwdForm','password')">
                     <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('passwordFlag')" v-if="passwordFlag"></i>
                     <i slot="suffix" class="show-icon" @click="changeIcon('passwordFlag')" v-else>
                         <svg-icon icon-class="eye-invisible"></svg-icon>
@@ -35,12 +35,12 @@
     <!-- <template v-if="tabsIndex===1"> -->
         <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-show="tabsIndex===1">
             <el-form-item label="手机号" prop="phone">
-                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" >
+                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" >
                     <template slot="prepend">+86</template>
                 </el-input>
             </el-form-item>
             <el-form-item label="验证码" prop="code" class="code-box">
-                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input">
+                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')">
                 </el-input>
                 <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode">
                     {{ verificationCodeShow ? time+'s' : '发送验证码' }}
@@ -66,7 +66,7 @@ import { getLogin } from "@/api/ajax";
 import { setToken } from "@/utils/auth";
 export default {
   name: "Login",
-  props: [],
+  props: ["toUrl"],
   data() {
     const validatePhone = (rule, value, callback) => {
         if(this.tabsIndex===1){
@@ -158,7 +158,13 @@ export default {
             .then((res) => {
                 this.loading = false
                 setToken(res);
-                window.location.reload()
+                if(this.toUrl){
+                    this.$router.push({
+                        path: this.toUrl,
+                    });
+                }else{
+                    window.location.reload()
+                }
             })
             .catch(() => {
                 this.loading = false
@@ -212,6 +218,10 @@ export default {
         } else {
             this_.$message.warning('请先输入手机号');
         }
+    },
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
     }
   },
   mounted() {

src/views/personalCenter/components/OrderList.vue

@@ -3,6 +3,8 @@
     <h2>订单管理</h2>
     <el-table
         :data="orderList"
+        @sort-change="handleSort"
+        :default-sort = dataSort
     >
         <el-table-column
             type="index"
@@ -10,31 +12,30 @@
             width="48">
         </el-table-column>
         <el-table-column
-            prop="orderNumber"
+            prop="sn"
             label="交易单号"
-            width="128">
+            width="200">
         </el-table-column>
         <el-table-column
-            prop="time"
+            prop="pay_time"
             label="交易时间"
-            width="144"
+            width="180"
             sortable>
         </el-table-column>
         <el-table-column
-            prop="title"
+            prop="goods_name"
             label="购买商品"
             min-width="220">
         </el-table-column>
         <el-table-column
-            label="商品类型"
-            width="128">
-            <template slot-scope="scope">
-                <span class="items-type" :style="{background:typeList[scope.row.type].bg, color:typeList[scope.row.type].color}">{{typeList[scope.row.type].text}}</span>
-                
+            label="类型"
+            width="72">
+            <template slot-scope="scope" v-if="scope.row.goods_type>=0">
+                <span class="items-type" :style="{background:typeList[scope.row.goods_type].bg, color:typeList[scope.row.goods_type].color}">{{typeList[scope.row.goods_type].text}}</span>
             </template>
         </el-table-column>
         <el-table-column
-            prop="study"
+            prop="goods_study_phase_name"
             label="学段"
             width="64">
         </el-table-column>
@@ -43,20 +44,20 @@
             label="价格"
             width="154">
             <template slot-scope="scope">
-                <span class="currectPrice">￥{{scope.row.currectPrice | cutMoneyFiter}}</span>
-                <span class="oldPrice">(￥{{scope.row.oldPrice | cutMoneyFiter}})</span>
+                <span class="currectPrice">￥{{scope.row.goods_price_discount?scope.row.goods_price_discount:scope.row.goods_price | cutMoneyFiter}}</span>
+                <span class="oldPrice" v-if="scope.row.goods_price_discount">(￥{{scope.row.goods_price | cutMoneyFiter}})</span>
             </template>
         </el-table-column>
         <el-table-column
             label="兑换码"
             width="144">
             <template slot-scope="scope">
-                <template v-if="scope.row.code=='未使用'">
-                    {{scope.row.code}}
+                <template v-if="scope.row.is_use_discount_code=='false'">
+                    未使用
                 </template>
                 <template v-else>
-                    <span class="code" :id="'copy-'+scope.row.orderNumber">{{scope.row.code}}</span>
-                    <svg-icon icon-class="copy" class="copy" @click="CopyToClipboard('copy-'+scope.row.orderNumber)"></svg-icon>
+                    <span class="code" :id="'copy-'+scope.row.discount_code">{{scope.row.discount_code}}</span>
+                    <svg-icon icon-class="copy" class="copy" @click="CopyToClipboard('copy-'+scope.row.discount_code)"></svg-icon>
                 </template>
             </template>
         </el-table-column>
@@ -64,15 +65,13 @@
             label="支付金额"
             width="96">
             <template slot-scope="scope">
-                <span>￥{{scope.row.payPrice | cutMoneyFiter}}</span>
+                <span>￥{{scope.row.pay_amount | cutMoneyFiter}}</span>
             </template>
         </el-table-column>
         <el-table-column
+            prop="pay_type_name"
             label="支付渠道"
             width="104">
-            <template slot-scope="scope">
-                {{scope.row.paymentChannel?scope.row.paymentChannel:'-'}}
-            </template>
         </el-table-column>
         <el-table-column
             prop="status"
@@ -80,8 +79,8 @@
             width="112">
             <template slot-scope="scope">
                 <div class="status-box">
-                    <span :style="{background:statusList[scope.row.status].bg}"></span>
-                    <b :style="{color:statusList[scope.row.status].textColor}">{{statusList[scope.row.status].text}}</b>
+                    <span :style="{background:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].bg}"></span>
+                    <b :style="{color:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].textColor}">{{statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].text}}</b>
                 </div>
             </template>
         </el-table-column>
@@ -121,6 +120,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { cutMoneyFiter } from '@/utils/defined';
+import { getLogin } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { },
@@ -161,110 +161,45 @@ export default {
             }
         },
         typeList:{
-            '1':{
+            2:{
                 text:'报纸',
                 color:'#165DFF',
                 bg:'#E8F7FF'
             },
-            '2':{
-                text:'画刊',
-                color:'#F53F3F',
-                bg:'#FFECE8'
-            },
-            '3':{
-                text:'练习',
-                color:'#0FC6C2',
-                bg:'#E8FFFB'
-            },
-            '4':{
+            // '2':{
+            //     text:'画刊',
+            //     color:'#F53F3F',
+            //     bg:'#FFECE8'
+            // },
+            // '3':{
+            //     text:'练习',
+            //     color:'#0FC6C2',
+            //     bg:'#E8FFFB'
+            // },
+            0:{
                 text:'课程',
                 color:'#722ED1',
                 bg:'#F5E8FF'
             },
-            '5':{
-                text:'报纸专辑',
-                color:'#165DFF',
-                bg:'#E8F7FF'
+            1:{
+                text:'课程',
+                color:'#722ED1',
+                bg:'#F5E8FF'
             },
-            '6':{
-                text:'画刊专辑',
-                color:'#F53F3F',
-                bg:'#FFECE8'
-            }
+            // '5':{
+            //     text:'报纸专辑',
+            //     color:'#165DFF',
+            //     bg:'#E8F7FF'
+            // },
+            // '6':{
+            //     text:'画刊专辑',
+            //     color:'#F53F3F',
+            //     bg:'#FFECE8'
+            // }
         },
-        orderList:[
-            {
-                orderNumber:'1234123124124',
-                title:'第 856 期 TEENS SENIOR 2',
-                time:'2021-12-12 15:32',
-                type:'1',
-                study:'高二',
-                currectPrice:'12.00',
-                oldPrice:'16.00',
-                payPrice:'12.00',
-                code:'未使用',
-                paymentChannel:'支付宝',
-                status:'success',
-                operate:'1',// 支付成功且没有使用优惠码 申请退款
-            },
-            {
-                orderNumber:'1234123124124',
-                title:'第 856 期 TEENS SENIOR 2',
-                time:'2021-12-12 15:32',
-                type:'2',
-                study:'高二',
-                currectPrice:'12',
-                oldPrice:'16',
-                payPrice:'12',
-                code:'398629081',
-                paymentChannel:'-',
-                status:'success2',
-                operate:'2',// 使用兑换码 无操作
-            },
-            {
-                orderNumber:'1234123124124',
-                title:'第 856 期 TEENS SENIOR 2',
-                time:'2021-12-12 15:32',
-                type:'1',
-                study:'高二',
-                currectPrice:'12',
-                oldPrice:'16',
-                payPrice:'12',
-                code:'未使用',
-                paymentChannel:'微信支付',
-                status:'success', // 已退款
-                operate:'1',//已退款 详情
-            },
-            {
-                orderNumber:'1234123124124',
-                title:'第 856 期 TEENS SENIOR 2',
-                time:'2021-12-12 15:32',
-                type:'1',
-                study:'高二',
-                currectPrice:'12',
-                oldPrice:'16',
-                payPrice:'12',
-                code:'未使用',
-                paymentChannel:'支付宝',
-                status:'success',
-                operate:'2',//退款失败  详情+申请退款
-            },
-            {
-                orderNumber:'1234123124124',
-                title:'第 856 期 TEENS SENIOR 2',
-                time:'2021-12-12 15:32',
-                type:'2',
-                study:'高二',
-                currectPrice:'12',
-                oldPrice:'16',
-                payPrice:'12',
-                code:'未使用',
-                paymentChannel:'支付宝',
-                status:'success2',
-                operate:'1',//退款中 
-            }
-        ],
-        total_count: 0
+        orderList:[],
+        total_count: 0,
+        dataSort: {}
     }
   },
   //计算属性 类似于data概念
@@ -275,15 +210,22 @@ export default {
   },
   //方法集合
   methods: {
+    handleSort(value){
+        let dataSort = {
+            prop: value.prop,
+            order: value.order
+        }
+        this.dataSort = dataSort
+        this.getList()
+    },
     handleSizeChange(val) {
         this.pageSize = val
+        this.pageNumber = 1
+        this.getList()
     },
     handleCurrentChange(val) {
         this.pageNumber = val
-    },
-    // 跳转文章
-    handleLink(row){
-
+        this.getList()
     },
     CopyToClipboard(element) {
       var doc = document,
@@ -308,9 +250,37 @@ export default {
       });
       window.getSelection().removeAllRanges();
     },
+    getList(){
+        let MethodName = "/ShopServer/Client/OrderManager/PageQueryMyOrderList";
+        let order_column_list = []
+        if(this.dataSort != {}){
+            if(this.dataSort.order=='descending'){
+                order_column_list = [this.dataSort.prop + ':desc']
+            }else if(this.dataSort.order=='ascending'){
+                // 升序不传值
+                order_column_list = [this.dataSort.prop]
+            }
+        }
+        let data = {
+            page_capacity:this.pageSize,
+            cur_page:this.pageNumber,
+            order_column_list: order_column_list
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+               this.orderList = res.order_list
+               this.total_count = res.total_count
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    this.getList()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {