我的订单，取消，查看功能

src/config/index.ts

@@ -54,5 +54,6 @@ export const http: any = {
     getRechargeLists: host + '/dev/refill/order/list',
     RechargeOrder: host + '/dev/refill/add',
     RechargeOrderPay: host + '/dev/refill/pay',
-    // getPetrifactionList: host+ 'dev/refill/order/list'
+    RechargeOrderDetail: host+ '/dev/refill/order/detail',
+    RechargecancelOrder: host+ '/dev/refill/order/cancel',
 };

src/extend/Http.ts

@@ -383,4 +383,21 @@ export default class Http {
             data: params,
         });
     }
+    // 充值订单详情
+    async RechargeOrderDetail(params: any = null) {
+        return this.httpClient.request({
+            url: http.RechargeOrderDetail,
+            method: 'GET',
+            data: params,
+        });
+    }
+
+    // 取消充值订单
+    async RechargecancelOrder(params: any = null) {
+        return this.httpClient.request({
+            url: http.RechargecancelOrder,
+            method: 'GET',
+            data: params,
+        });
+    }
 }

src/router/router.ts

@@ -362,4 +362,18 @@ export default [
             title: '充值列表'
         }
     },
+    // 充值订单详情
+    {
+        path: '/recharge/detail',
+        name: 'rdetail',
+        component: () => import('@/views/recharge/detail.vue'),
+        meta: {
+            icon: '',
+            keepAlive: false,
+            showTab: false,
+            showBackLeftBtn: true,
+            showBarRightBtn: false,
+            title: '充值订单详情'
+        }
+    },
 ];

src/views/order/detail.vue

@@ -120,7 +120,7 @@
 
         async created() {
             let res = await Http.getInstance().getOrderDetail({
-                id: this.$route.params["id"],
+                id: this.$route.params["id"] || localStorage.getItem('id'),
             });
             this.data = res.data;
             this.data.order_sn =  res.data.order_sn;
@@ -162,6 +162,7 @@
               Message({
                   message: '订单已取消', duration: 2000, type: "success"
               });
+              localStorage.removeItem('id')
               setTimeout(function(){
                   router.replace('/order/list')
               },1000)

src/views/order/list.vue

@@ -13,7 +13,7 @@
         <!--        <li class=""><a href="#order_pay_no" data-status="1" v-on:click="tab">未付款</a></li>-->
         <!--        </ul>-->
         <!--        </div>-->
-        <div class="list">
+        <div class="list" :style="{height:cHeigth}">
             <el-tabs   class="haoyou" @tab-click="handleClick">
                 <el-tab-pane label="待支付">
                     <ul class="list-group list-group-flush"  v-if="!data.cueShow" style="line-heigt:1.5rem">
@@ -352,6 +352,7 @@ import login from "@/store/module/login";
                     }
                 });
             }
+            localStorage.setItem('id', JSON.stringify(data["id"]))
         }
 
         //
@@ -375,6 +376,13 @@ import login from "@/store/module/login";
         //     tab.classList.remove("hide");
         //     return false;
         // }
+        get cHeigth() {
+            if (this.data.list.length > 9) {
+                return 'auto'
+            } else {
+                return '100%'
+            }
+        }
     }
 </script>
 
@@ -404,7 +412,7 @@ import login from "@/store/module/login";
     }
     .list {
         width: 100%;
-        height: 100%;
+        // height: 100%;
         position: absolute;
         background-color: #EDF0F5;
     }

src/views/recharge/detail.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="rechargeDetail">
+    <div class="user_head">
+      <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/recharge/list')">
+      <span>
+        充值订单详情
+      </span>
+    </div>
+    <div class="detail social-detail white-box" style="color:#333">
+      <h6 class="d-flex justify-content-between align-items-center pb-2" style=" font-size: 1.5rem;">
+          订单编号：
+          <label  style=" font-size: 1.3rem;" class="m-0 p-0">{{this.refill_order_sn}}</label>
+      </h6>
+      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
+        下单时间：
+        <label class="small" style=" font-size: 1.3rem;">{{this.order_time}}</label>
+      </h6>
+      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
+          用户姓名：
+          <label class="small" style=" font-size: 1.3rem;">{{realname}}</label>
+      </h6>
+      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
+        充值类别：
+        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'PetroChinaCard'">中石油</label>
+        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'SinopecCard'">中石化</label>
+        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaMobileCard'">中国移动</label>
+        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaUnicomCard'">中国联通</label>
+        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaTelecomCard'">中国电信</label>
+      </h6>
+      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
+          充值号码：
+          <label class="small" style=" font-size: 1.3rem;">{{this.card_no}}</label>
+      </h6>
+      <hr>
+      <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
+        应付金额：&yen;{{refill_amount}}
+      </h6>
+      <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
+        实付款：<span style="color: #EC2C2C">&yen;{{order_price}}</span>
+      </h6>
+    </div>
+    <div class="bottom-twobtn">
+      <button type="button" class="button-1" @click="gopay" v-if="!isShow">
+          <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
+          去缴费
+      </button>
+      <button type="button" class="button-2" @click="cancel" v-if="!isShow">
+          取消订单
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Http from "../../extend/Http";
+import {Message} from "element-ui";
+export default {
+  name: 'rechargeDetail',
+  data() {
+    return {
+      // id
+      id: '',
+      // 充值卡号
+      card_no:'',
+      // 订单状态文本
+      order_state_text: '',
+      // 支付状态文本
+      pay_status_text: '',
+      // 下单时间
+      order_time: '',
+      // 订单号
+      refill_order_sn: '',
+      // 订单金额
+      refill_amount: '',
+      // 实付金额
+      order_price: '',
+      // 卡类型
+      card_type: '',
+      realname: localStorage.getItem('realname') || '',
+      isShow: false
+    }
+  },
+  created() {
+    this.RechargeOrderDetail()
+  },
+  methods: {
+    async RechargeOrderDetail() {
+      let res = await Http.getInstance().RechargeOrderDetail({
+        order_id: this.$route.params["id"] || localStorage.getItem('rechageId'),
+      });
+      console.log('订单详情', res);
+      if (res && res.code == 1) {
+        this.refill_order_sn = res.data.refill_order_sn
+        this.order_state_text = res.data.order_state_text
+        this.order_time = res.data.order_time
+        this.card_no = res.data.card_no
+        this.refill_amount = res.data.refill_amount
+        this.order_price = res.data.order_price
+        this.card_type = res.data.card_type
+        this.id = res.data.id
+      }
+    },
+    // 去缴费
+    async gopay(){
+      let res = await Http.getInstance().RechargeOrder({
+        cardno: this.card_no,
+        amount: this.refill_amount
+      });
+      console.log('充值', res);
+      if (res && res.msg == '请求成功') {
+        localStorage.setItem('order_paying', JSON.stringify(res.data));
+        this.$router.replace({
+          name: 'opayment',
+          params: {
+            order_sn: res.data.order_sn,
+            type: '1',
+            recharfe: 'false'
+          }
+        });
+      }
+    },
+    // 取消订单
+    async cancel() {
+      let res = await Http.getInstance().RechargecancelOrder({
+        order_id: this.id || localStorage.getItem('rechageId'),
+       });
+       console.log('取消订单', res);
+      if(res && res.code == 1){
+        Message({
+            message: '订单已取消', duration: 2000, type: "success"
+        });
+        localStorage.removeItem('rechageId')
+        setTimeout(() => {
+          this.$router.replace('/recharge/list')
+        },1000)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 顶部导航
+.user_head{
+    text-align: center;
+    font-size: 2rem;
+    // font-family: 'PingFang SC';
+    padding-bottom: 1.667rem;
+    padding-top: 1rem;
+    // font-weight: bold;
+    line-height: 1.5rem;
+    background-color: #fff;
+    .leftIcon{
+        position: absolute;
+        left: 1.667rem;
+        top: 1.4rem;
+        width: 0.667rem;
+    }
+    span {
+        vertical-align: middle;
+        color: #333;
+    }
+}
+.rechargeDetail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-family: "HiraginoSansGB";
+  background: #f0f0f0;
+  padding-bottom: 5.5rem;
+}
+.white-box{
+    background: white;
+}
+hr {
+    margin: 0.5rem 0;
+}
+// 间距
+h6 {
+    line-height: 1.5;
+}
+.two-h6{
+    // color: #666666;
+    color: #333333;
+}
+.two-li{
+    // color: #999999;
+    color: #333;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    // padding-right: 1.5rem;
+}
+.detail {
+    padding: 1.2rem;
+    padding-bottom: 0;
+    font-size: 1.5rem;
+    margin-top: 1rem;
+}
+// 底部按钮
+.bottom-twobtn{
+    width: 100%;
+    padding-left: 0 !important;
+    position: fixed;
+    bottom: 0;
+    // height: 4rem;
+    height: 5rem;
+    // margin-top: 1.2rem;
+    .button-1{
+        width: 50%;
+        height: 100%;
+        border: none;
+        background: #4FDCA2;
+        color: #ffffff;
+        font-size: 1.5rem;
+        .button-2-img{
+            width: 1.5rem;
+        }
+    }
+    .button-2{
+        width: 50%;
+        height: 100%;
+        border: none;
+        background: #fff;
+        color: #7D7D7D;
+        font-size: 1.5rem;
+    }
+}
+</style>

src/views/recharge/list.vue

@@ -6,40 +6,139 @@
         充值订单
       </span>
     </div>
-    <div class="list">
+    <div class="list" :style="{height:cHeigth}">
       <el-tabs class="haoyou" @tab-click="handleClick">
-        <el-tab-pane label="待支付">
+        <el-tab-pane label="待支付" >
           <ul class="list-group list-group-flush" v-if="!cueShow" style="line-heigt:1.5rem">
             <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
               <div class="section">
                   <p class="d-flex align-items-center">
                     <span class="leftColor">订单编号</span>
-                    <span class="ml-auto rightColor"></span>
+                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
                   </p>
                   <p class="d-flex align-items-center">
                       <span class="leftColor">下单时间</span>
-                      <span class="ml-auto rightColor"></span>
+                      <span class="ml-auto rightColor">{{item.order_time}}</span>
                   </p>
               </div>
               <div class="section">
                   <p class="d-flex align-items-center">
                       <span class="leftColor">办理进度</span>
-                      <span class="ml-auto" style="color:#fb2e2e"></span>
+                      <span class="ml-auto" style="color:#fb2e2e">{{item.pay_status_text}}</span>
                   </p>
                   <p class="d-flex align-items-center">
                       <span class="leftColor">实付金额</span>
-                      <span class="ml-auto leftColor">&yen;</span>
+                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
                   </p>
               </div>
               <div class="footer  align-items-center" style="justify-content: space-between;">
                   <button class="btn btn-info" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
-                  <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)"  @click="cancel">取消订单</button>
-                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)">订单详情</a>
-                  <button style="background: #F78F7E;border:1px solid #F78F7E" class="btn btn-info" @click="gopay">去付款</button>
+                  <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="item.id" :data-key="idx"  @click="cancel">取消订单</button>
+                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
+                  <button style="background: #F78F7E;border:1px solid #F78F7E" class="btn btn-info" :data-key="idx" :data-type="item['order_type']" @click="gopay">去付款</button>
               </div>
             </li>
           </ul>
-            <div class="cuewords">
+            <div class="cuewords" v-if="cueShow">
+                <p>您暂时还没有订单</p>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="充值中" name="recharging">
+          <ul class="list-group list-group-flush" v-if="!cueShow2" style="line-heigt:1.5rem">
+            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                    <span class="leftColor">订单编号</span>
+                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">下单时间</span>
+                      <span class="ml-auto rightColor">{{item.order_time}}</span>
+                  </p>
+              </div>
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">办理进度</span>
+                      <span class="ml-auto" style="color:#fb2e2e">{{item.pay_status_text}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">实付金额</span>
+                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
+                  </p>
+              </div>
+              <div class="footer  align-items-center" style="justify-content: flex-end;">
+                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
+                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
+              </div>
+            </li>
+          </ul>
+            <div class="cuewords" v-if="cueShow2">
+                <p>您暂时还没有订单</p>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="充值成功" name="success">
+          <ul class="list-group list-group-flush" v-if="!cueShow3" style="line-heigt:1.5rem">
+            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                    <span class="leftColor">订单编号</span>
+                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">下单时间</span>
+                      <span class="ml-auto rightColor">{{item.order_time}}</span>
+                  </p>
+              </div>
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">办理进度</span>
+                      <span class="ml-auto" style="color:#fb2e2e">{{item.pay_status_text}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">实付金额</span>
+                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
+                  </p>
+              </div>
+              <div class="footer  align-items-center" style="justify-content: flex-end;">
+                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
+                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
+              </div>
+            </li>
+          </ul>
+            <div class="cuewords" v-if="cueShow3">
+                <p>您暂时还没有订单</p>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="充值失败" name="failed">
+          <ul class="list-group list-group-flush" v-if="!cueShow4" style="line-heigt:1.5rem">
+            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                    <span class="leftColor">订单编号</span>
+                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">下单时间</span>
+                      <span class="ml-auto rightColor">{{item.order_time}}</span>
+                  </p>
+              </div>
+              <div class="section">
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">办理进度</span>
+                      <span class="ml-auto" style="color:#fb2e2e">{{item.pay_status_text}}</span>
+                  </p>
+                  <p class="d-flex align-items-center">
+                      <span class="leftColor">实付金额</span>
+                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
+                  </p>
+              </div>
+              <div class="footer  align-items-center" style="justify-content: flex-end;">
+                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
+                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
+              </div>
+            </li>
+          </ul>
+            <div class="cuewords" v-if="cueShow4">
                 <p>您暂时还没有订单</p>
             </div>
         </el-tab-pane>
@@ -55,20 +154,32 @@
 
 <script>
 import Http from "../../extend/Http";
+import {MessageBox, Message} from 'element-ui';
 export default {
   name: 'rechargeList',
   data() {
     return {
       list: [],
       status: 0,
+      activeName: '',
       cueShow: false,
       cueShow2: false,
       cueShow3: false,
+      cueShow4: false,
       moreShow: false,
       hasMore: true,
       page: 1
     }
   },
+  computed: {
+    cHeigth() {
+      if (this.list.length > 9) {
+        return 'auto'
+      } else {
+        return '100%'
+      }
+    }
+  },
   created() {
     this.getRechargeLists()
   },
@@ -80,18 +191,117 @@ export default {
       });
       console.log('充值订单', res);
       if(res.data.length == 0){
-        this.cueShow = true
-        this.cueShow2 = true
-        this.cueShow3 = true
         this.moreShow = false
+        this.data.cueShow = true
+        this.data.cueShow2 = true
+        this.data.cueShow3 = true
+        this.data.cueShow4 = true
       }else{
         this.list = res.data
         this.hasMore = res.data.length >9 ;
         this.moreShow = true
       }
     },
-    handleClick(tab,event){
+    async handleClick(tab,event){
       if(tab.label == '待支付'){
+        this.list = []
+        this.page = 1
+        this.status = 0
+        let res = await Http.getInstance().getRechargeLists({
+            page: this.page,
+            order_state: this.status
+        });
+        this.list = res.data
+        if(res.data.length == 0){
+          this.moreShow = false
+          this.cueShow = true
+          this.cueShow2 = true
+          this.cueShow3 = true
+          this.cueShow4 = true
+        }else{
+            this.list = res.data
+            this.hasMore = res.data.length >9 ;
+            this.moreShow = true
+            this.cueShow = false
+            this.cueShow2 = true
+            this.cueShow3 = true
+            this.cueShow4 = true
+        }
+      } else if (tab.label == '充值中') {
+        this.list = []
+        this.page = 1
+        this.status = 1
+        let res = await Http.getInstance().getRechargeLists({
+            page: this.page,
+            order_state: this.status
+        });
+        // console.log('充值中', res);
+        this.list = res.data
+        if(res.data.length == 0){
+          this.moreShow = false
+          this.cueShow = true
+          this.cueShow2 = true
+          this.cueShow3 = true
+          this.cueShow4 = true
+        }else{
+            this.list = res.data
+            this.hasMore = res.data.length >9 ;
+            this.moreShow = true
+            this.cueShow = true
+            this.cueShow2 = false
+            this.cueShow3 = true
+            this.cueShow4 = true
+        }
+      } else if (tab.label == '充值成功') {
+        this.list = []
+        this.page = 1
+        this.status = 2
+        let res = await Http.getInstance().getRechargeLists({
+            page: this.page,
+            order_state: this.status
+        });
+        // console.log('充值成功', res);
+        this.list = res.data
+        if(res.data.length == 0){
+          this.moreShow = false
+          this.cueShow = true
+          this.cueShow2 = true
+          this.cueShow3 = true
+          this.cueShow4 = true
+        }else{
+            this.list = res.data
+            this.hasMore = res.data.length >9 ;
+            this.moreShow = true
+            this.cueShow = true
+            this.cueShow2 = true
+            this.cueShow3 = false
+            this.cueShow4 = true
+        }
+      } else {
+        this.list = []
+        this.page = 1
+        this.status = 3
+        let res = await Http.getInstance().getRechargeLists({
+            page: this.page,
+            order_state: this.status
+        });
+        // console.log('充值失败', res);
+        this.list = res.data
+        if(res.data.length == 0){
+          this.moreShow = false
+          this.cueShow = true
+          this.cueShow2 = true
+          this.cueShow3 = true
+          this.cueShow4 = true
+        }else{
+            this.list = res.data
+            this.hasMore = res.data.length >9 ;
+            this.moreShow = true
+            this.cueShow = true
+            this.cueShow2 = true
+            this.cueShow3 = true
+            this.cueShow4 = false
+        }
       }
     },
     open() {
@@ -113,7 +323,43 @@ export default {
       this.page++;
     },
     // 取消订单
-    cancel() {},
+    cancel(event) {
+      // console.log('event', event);
+      MessageBox.alert( '你确定要取消订单吗？', '温馨提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+      }).then(async() =>{
+        let data = this.list[event.target.getAttribute("data-key")];
+        // console.log(data)
+        let res = await Http.getInstance().RechargecancelOrder({
+          order_id: data.id
+        });
+        if(res && res.code == 1){
+            Message({
+                message: '订单已取消', duration: 2000, type: "success"
+            });
+            this.getRechargeLists()
+        }
+      }).catch(() => {
+      });
+    },
+    // 订单详情
+    goDetail(event) {
+      let data = this.list[event.target.getAttribute("data-key")];
+      console.log('data', data);
+      this.$router.push({
+        name: "rdetail", params: {
+          id: data["id"],
+          card_no: data['card_no'],
+          pay_status_text: data["pay_status_text"],
+          pay_status_text: data["pay_status_text"],
+          order_time: data["order_time"],
+          refill_order_sn: data["refill_order_sn"],
+          order_price: data['order_price']
+        }
+      });
+      localStorage.setItem('rechageId', JSON.stringify(data["id"]))
+    },
     // 付款
     gopay() {}
   }
@@ -144,7 +390,7 @@ export default {
 }
  .list {
     width: 100%;
-    height: 100%;
+    // height: auto;
     position: absolute;
     background-color: #EDF0F5;
 }
@@ -267,4 +513,11 @@ export default {
         text-align: center;
     }
 }
+.btn-light:hover {
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+.more {
+  height: 47px;
+}
 </style>