订单列表，订单详情，退款订单详情

htmldev/dashboard/src/router/index.js

@@ -103,12 +103,19 @@ const routes = [
     path: '/orderList',
     name: 'OrderList',
     component: _import('views/orderList/index'),
-    meta: {
-      title: '订单',
-      isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: false
-    }
+    children: [
+      {
+        path: '',
+        name: 'Order',
+        component: _import('views/orderList/order'),
+        meta: {
+          title: '订单',
+          isUseCache: false,
+          keepAlive: false,
+          isUseVanTabbar: false
+        },
+      }
+    ]
   },
   {
     path: '/orderDetail',
@@ -120,6 +127,16 @@ const routes = [
       keepAlive: false
     }
   },
+  {
+    path: '/refundList',
+    name: 'RefundList',
+    component: _import('views/refundList/index'),
+    meta: {
+      title: '退款记录',
+      isUseCache: false,
+      keepAlive: false
+    }
+  },
   {
     path: '/sell/goods',
     name: 'SellGoods',

htmldev/dashboard/src/views/orderDetail/api/api.js

@@ -0,0 +1,9 @@
+import request from '@/api/request'
+/**
+ * 订单详情接口
+ */
+ export const apiOrderDetail = (params) => request({
+    method: 'GET',
+    url: '/api/v1/user/order/detail',
+    params:params
+  })

htmldev/dashboard/src/views/orderDetail/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="order-detail">
+      <div class="top" v-if="refund_price" @click="goRefundList()">
+          <span>退款金额： {{refund_price}}元</span>
+          <span>退款成功</span>
+      </div>
+      <div class="main">
+          <ul :class="['list',{'list-open':openList}]">
+              <li v-for="item,index in list" :key="index">
+                  <img :src="item.product_img_url" alt="">
+                  <div class="item-right">
+                      <p><span>{{item.product_name}}</span><span>￥{{item.product_price | fen2Yuan}}</span></p>
+                      <p><span>{{item.product_attach}}</span><span>*{{item.product_num}}</span></p>
+                  </div>
+              </li>
+          </ul>
+          <div class="btn-open" v-if="list.length>3&&!openList" @click="openList=true">展开（共{{list.length}}件）</div>
+          <p class="row"><span>订座预约款</span><span>-¥{{prepare_price | fen2Yuan}}</span></p>
+          <p class="row"><span>优惠券</span><span>-¥{{coupon_price | fen2Yuan}}</span></p>
+          <p class="row row-1"><span>小计</span><span>¥{{order_price | fen2Yuan}}</span></p>
+      </div>
+      <div class="bottom">
+          <div class="row"><span class="label">订单编号：</span><span class="value">{{order_number}}</span></div>
+          <div class="row"><span class="label">桌号：</span><span class="value-1">{{place_number}}</span></div>
+          <div class="row"><span class="label">创建时间：</span><span class="value">{{created_at}}</span></div>
+          <div class="row"><span class="label">支付时间：</span><span class="value">{{order_pay_time}}</span></div>
+          <div class="row"><span class="label">支付方式：</span><span class="value">{{order_pay_type==1?'微信':"支付宝"}}</span></div>
+      </div>
+  </div>
+</template>
+<script>
+import {apiOrderDetail} from './api/api'
+
+export default {
+  data() {
+    return {
+        openList:false,
+        refund_price:0,
+        list:[],
+        prepare_price:0,
+        coupon_price:0,
+        order_price:0,
+        order_number:'',
+        place_number:'',
+        created_at:'',
+        order_pay_time:'',
+        order_pay_type:''
+    }
+  },
+  mounted(){
+      this.getDetail()
+  },
+  methods:{
+      goRefundList(){
+          this.$router.push({
+              path:'/refundList',
+              query:{
+                  id:this.$route.query.id
+              }
+          })
+      },
+      getDetail(){
+          apiOrderDetail({id:this.$route.query.id}).then(res=>{
+              if(res.code==200){
+                  this.refund_price=res.data.order_refund_price
+                  this.list=res.data.order_detail
+                  this.prepare_price=res.data.order_prepare_price
+                  this.coupon_price=res.data.order_coupon_price
+                  this.order_price=res.data.order_price
+                  this.order_number=res.data.order_number
+                  this.place_number=res.data.place_number
+                  this.created_at=res.data.created_at
+                  this.order_pay_time=res.data.order_pay_time
+                  this.order_pay_type=res.data.order_pay_type
+              }
+          })
+      }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.top{
+    background: #fff;
+    padding: 19px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 8px 0;
+    span{
+        font-size: 16px;
+        &:first-child{
+            color: #1F1E1E;
+        }
+        &:last-child{
+            color: #E55E10;
+        }
+    }
+}
+.main{
+    background: #fff;
+    padding: 20px 0;
+    .list{
+        max-height:212px;
+        overflow: hidden;
+        li{
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            margin-bottom: 12px;
+            img{
+               width: 60px;
+                height: 60px;
+                border-radius: 8px; 
+                margin-right: 10px;
+            }
+            .item-right{
+                flex: 1;
+                p{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    &:first-child{
+                        color: #1F1E1E;
+                        font-size: 16px;
+                        margin-bottom: 14px;
+                    }
+                    &:last-child{
+                        color: #736F6F;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+    .list-open{
+        max-height: none;
+    }
+    .btn-open{
+        text-align: center;
+        color: #CCC6C6;
+        font-size: 14px;
+    }
+    .row{
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 11px 20px;
+        span{
+            font-weight: 500;
+            &:first-child{
+                color: #1F1E1E;
+            }
+             &:last-child{
+                color: #D32323;
+            }
+        }
+    }
+    .row-1{
+        color: #1F1E1E;
+        font-size: 14px;
+        border-top: 1px solid #F2F2F2;
+        span{
+             &:last-child{
+                font-size: 18px;
+            }
+        }
+    }
+}
+.bottom{
+    padding: 20px;
+    background: #fff;
+    margin-top: 8px;
+    .row{
+        display: flex;
+        font-size: 14px;
+        margin-bottom: 8px;
+        .label{
+            color: #736F6F;
+            width: 75px;
+        }
+        .value{
+            color: #1F1E1E;
+        }
+        .value-1{
+            color: #009CFF;
+        }
+    }
+}
+</style>

htmldev/dashboard/src/views/orderList/api/api.js

@@ -0,0 +1,17 @@
+import request from '@/api/request'
+/**
+ * 订单列表接口
+ */
+ export const apiOrderList = (params) => request({
+    method: 'GET',
+    url: '/api/v1/user/order/list',
+    params:params
+  })
+/**
+ * 订单取消接口
+ */
+ export const apiOrderCancel = (params) => request({
+    method: 'GET',
+    url: '/api/v1/user/order/cancel',
+    params:params
+  })

htmldev/dashboard/src/views/orderList/index.vue

@@ -13,55 +13,24 @@
       </ul>
     </div>
     <div class="list">
-      <List
-        v-model="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <PullRefresh v-model="isLoading" @refresh="onRefresh">
-          <div class="list-item" v-for="item in 10">
-            <div class="title">
-              <span class="left">已支付订单</span>
-              <span class="right">交易成功</span>
-            </div>
-            <div class="content">
-              <p class="amount">￥100</p>
-              <p class="time">下单时间：2021-05-07 19:23</p>
-              <i class="icon"></i>
-            </div>
-          </div>
-        </PullRefresh>
-      </List>
+      <router-view></router-view>
     </div>
   </div>
 </template>
 <script>
-import { Icon, List, PullRefresh } from 'vant'
+import { Icon } from 'vant'
 export default {
   components: {
     Icon,
-    List,
-    PullRefresh
+ 
   },
   data () {
     return {
-      tabList: ['订单', '赞赏', '点歌'],
+      tabList: ['订单'],
       currentTab: 0,
-      list: [],
-      loading: false,
-      finished: false,
-      isLoading: false
     }
   },
   methods: {
-    onLoad () {},
-    onRefresh () {
-      setTimeout(() => {
-        Toast('刷新成功')
-        this.isLoading = false
-      }, 1000)
-    },
     tabChange (index) {
       this.currentTab = index
     }
@@ -115,52 +84,6 @@ export default {
     height: 100vh;
     padding-top: 43px;
   }
-  .list-item {
-    width: 355px;
-    height: 120px;
-    background: #ffffff;
-    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.04);
-    border-radius: 4px;
-    border: 1px solid #f2f2f2;
-    margin: 10px 10px 0;
-    .title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 16px 8px;
-      border-bottom: 1px solid #f2f2f2;
-      .left {
-        color: #1f1e1e;
-        font-size: 16px;
-      }
-      .right {
-        color: #ccc6c6;
-        font-size: 14px;
-      }
-    }
-    .content {
-      position: relative;
-      padding: 9px 16px 12px;
-      .icon {
-        position: absolute;
-        width: 21px;
-        height: 21px;
-        top: 15px;
-        right: 17px;
-        background: url("./image/icon-alipay.png") 0 0 no-repeat;
-        background-size: cover;
-      }
-      .amount {
-        font-size: 24px;
-        font-weight: 500;
-        color: #d32323;
-      }
-      .time {
-        color: #736f6f;
-        font-size: 12px;
-        margin-top: 8px;
-      }
-    }
-  }
+  
 }
 </style>

htmldev/dashboard/src/views/orderList/order.vue

@@ -0,0 +1,235 @@
+<template>
+  <List
+    v-model="loading"
+    :finished="finished"
+    finished-text="没有更多了"
+    @load="onLoad"
+  >
+    <PullRefresh v-model="isLoading" @refresh="onRefresh">
+      <div class="list-item" v-for="(item, index) in list" :key="index">
+        <div class="title">
+          <span class="left">{{ changeStatus(item.order_status) }}</span>
+          <span
+            :class="[
+              'right',
+              { 'color-orange': changeState(item.order_status) == '发生退款' },
+            ]"
+            >{{ changeState(item.order_status) }}</span
+          >
+        </div>
+        <div class="content">
+          <p class="amount">￥{{ item.order_price | fen2Yuan }}</p>
+          <p class="time">下单时间：{{ item.created_at }}</p>
+          <i :class="['icon', { 'icon-wx': item.order_pay_type == 1 }]"></i>
+          <div class="btn-box">
+            <div
+              class="btn-primary"
+              v-if="item.order_status !== 0"
+              @click="goDetail(item.id)"
+            >
+              查看订单
+            </div>
+            <div class="btn-primary" v-if="item.order_status === 0">支付</div>
+            <div
+              class="btn-defaule"
+              v-if="item.order_status === 0"
+              @click="cancel(item.id)"
+            >
+              取消
+            </div>
+          </div>
+        </div>
+      </div>
+    </PullRefresh>
+  </List>
+</template>
+<script>
+import { List, PullRefresh, Dialog, Toast } from "vant";
+import { apiOrderList, apiOrderCancel } from "./api/api";
+
+export default {
+  components: {
+    List,
+    PullRefresh,
+    [Dialog.Component.name]: Dialog.Component,
+  },
+  data() {
+    return {
+      loading: false,
+      finished: true,
+      isLoading: false,
+      page: 1,
+      page_size: 10,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    cancel(id) {
+      let _this = this;
+      Dialog.confirm({
+        title: "",
+        message: "确定要取消吗",
+      })
+        .then(() => {
+          apiOrderCancel({ id: id }).then((res) => {
+            Toast(res.msg);
+            _this.getList();
+          });
+        })
+        .catch((err) => {
+          Toast(err);
+        });
+    },
+    goDetail(id) {
+      this.$router.push({
+        path: "/orderDetail",
+        query: {
+          id: id,
+        },
+      });
+    },
+    changeStatus(status) {
+      switch (status) {
+        case 0:
+          return "待支付订单";
+          break;
+        case 1:
+          return "已支付订单";
+          break;
+        case 2:
+          return "全部退款订单";
+          break;
+        case 3:
+          return "部分退款订单";
+          break;
+        case 4:
+          return "已取消订单";
+          break;
+      }
+    },
+    changeState(status) {
+      switch (status) {
+        case 0:
+          return "待支付";
+          break;
+        case 1:
+          return "订单已支付成功";
+          break;
+        case 2:
+          return "发生退款";
+          break;
+        case 3:
+          return "发生退款";
+          break;
+        case 4:
+          return "已取消";
+          break;
+      }
+    },
+    getList() {
+      apiOrderList({ page: this.page, page_size: this.page_size }).then(
+        (res) => {
+          this.isLoading = false;
+          if (res.code == 200) {
+            this.list = res.data.list;
+          }
+        }
+      );
+    },
+    onLoad() {
+      this.page += 1;
+      this.finished = false;
+      apiOrderList({ page: this.page, page_size: this.page_size }).then(
+        (res) => {
+          if (res.code == 200) {
+            this.list = this.list.concat(res.data.list);
+            this.finished = true;
+          }
+        }
+      );
+    },
+    onRefresh() {
+      this.page = 1;
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.list-item {
+  width: 355px;
+  background: #ffffff;
+  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  border: 1px solid #f2f2f2;
+  margin: 10px 10px 0;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 16px 8px;
+    border-bottom: 1px solid #f2f2f2;
+    .left {
+      color: #1f1e1e;
+      font-size: 16px;
+    }
+    .right {
+      color: #ccc6c6;
+      font-size: 14px;
+    }
+  }
+  .content {
+    position: relative;
+    padding: 9px 16px 12px;
+    .icon {
+      position: absolute;
+      width: 21px;
+      height: 21px;
+      top: 15px;
+      right: 17px;
+      background: url("./image/icon-alipay.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+    .icon-wx {
+      background: url("./image/icon-wx.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+    .amount {
+      font-size: 24px;
+      font-weight: 500;
+      color: #d32323;
+    }
+    .time {
+      color: #736f6f;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+    .btn-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 16px;
+      > div {
+        padding: 4px 19px 3px;
+        font-size: 12px;
+        border-radius: 12px;
+        margin-left: 10px;
+      }
+      .btn-primary {
+        background: #d32323;
+        color: #fff;
+      }
+      .btn-defaule {
+        background: #ffffff;
+        border: 1px solid #f2f2f2;
+      }
+    }
+  }
+}
+.color-orange {
+  color: #e55e10 !important;
+}
+</style>

htmldev/dashboard/src/views/ordrDetail/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="order-detail">
-      <div class="top">
-          <span>退款金额： 32.6元</span>
-          <span>退款成功</span>
-      </div>
-      <div class="main">
-          <ul class="list">
-              <li>
-                  <img src="" alt="">
-                  <div class="item-right">
-                      <p><span>曼哈顿</span><span>￥1000</span></p>
-                      <p><span>标准+茉莉初雪+标准糖</span><span>*2</span></p>
-                  </div>
-              </li>
-          </ul>
-      </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {}
-  }
-};
-</script>
-<style lang="scss" scoped>
-.top{
-    background: #fff;
-    padding: 19px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 8px 0;
-    span{
-        font-size: 16px;
-        &:first-child{
-            color: #1F1E1E;
-        }
-        &:last-child{
-            color: #E55E10;
-        }
-    }
-}
-.main{
-    background: #fff;
-    .list{
-        li{
-            display: flex;
-            align-items: center;
-            img{
-               width: 60px;
-                height: 60px;
-                border-radius: 8px; 
-                margin-right: 10px;
-            }
-            .item-right{
-                p{
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    &:first-child{
-                        color: #1F1E1E;
-                        font-size: 16px;
-                    }
-                    &:last-child{
-                        color: #736F6F;
-                        font-size: 14px;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

htmldev/dashboard/src/views/refundList/api/api.js

@@ -0,0 +1,9 @@
+import request from '@/api/request'
+/**
+ * 订单退款详情接口
+ */
+ export const apiRefundList = (params) => request({
+    method: 'GET',
+    url: '/api/v1/user/order/refund/detail',
+    params:params
+  })

htmldev/dashboard/src/views/refundList/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="refund-list">
+    <ul>
+      <li v-for="item,index in list" :key="index">
+        <div class="top">
+          <div class="row1"><span>退款详情</span><span>{{changeStatus(item.order_refund_status)}}</span></div>
+          <div class="row2">退款金额： {{item.order_price | fen2Yuan}}元</div>
+        </div>
+        <div class="middle">
+          <div class="row3">退款信息</div>
+          <div class="row4" v-for="val,idx in item.products" :key="idx">
+            <img :src="val.product_img_url" alt="" />
+            <div class="item-right">
+              <p>
+                <span>{{ val.product_name }}</span
+                ><span>￥{{ val.product_price | fen2Yuan }}</span>
+              </p>
+              <p>
+                <span>{{ val.product_attach }}</span
+                ><span>*{{ val.product_num }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="row">
+            <span class="label">订单编号：</span
+            ><span class="value">{{ item.order_number }}</span>
+          </div>
+          <div class="row">
+            <span class="label">桌号：</span
+            ><span class="value-1">{{ item.place_number }}</span>
+          </div>
+          <div class="row">
+            <span class="label">退款时间：</span
+            ><span class="value">{{ item.created_at }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { apiRefundList } from "./api/api";
+export default {
+  data() {
+    return {
+        list:[]
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods:{
+      changeStatus(status){
+          switch(status){
+              case 0: return '退款中'
+              break;
+               case 1: return '退款成功'
+              break;
+               case 2: return '退款失败'
+              break;
+          }
+      },
+      getList(){
+          apiRefundList({id:this.$route.query.id}).then(res=>{
+              if(res.code===200){
+                  this.list=res.data.list
+              }
+          })
+      }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.refund-list {
+  li {
+    margin-top: 10px;
+    background: #fff;
+    .top{
+        padding: 16px 20px 10px;
+        border-bottom: 1px solid #F2F2F2;
+    }
+    .row1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      span {
+        &:first-child {
+          color: #1f1e1e;
+          font-size: 18px;
+        }
+        &:last-child {
+          color: #d32323;
+          font-size: 14px;
+        }
+      }
+    }
+    .row2,.row3 {
+      color: #1f1e1e;
+      font-size: 14px;
+    }
+    .middle{
+        padding: 9px 20px 20px;
+        border-bottom: 1px solid #F2F2F2;
+        .row4{
+           display: flex;
+            align-items: center;
+            margin-top: 10px;
+            img{
+               width: 60px;
+                height: 60px;
+                border-radius: 8px; 
+                margin-right: 10px;
+            }
+            .item-right{
+                flex: 1;
+                p{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    &:first-child{
+                        color: #1F1E1E;
+                        font-size: 16px;
+                        margin-bottom: 14px;
+                    }
+                    &:last-child{
+                        color: #736F6F;
+                        font-size: 14px;
+                    }
+                }
+            } 
+        }
+    }
+    .bottom{
+        padding: 20px;
+        background: #fff;
+        margin-top: 8px;
+        .row{
+            display: flex;
+            font-size: 14px;
+            margin-bottom: 8px;
+            .label{
+                color: #736F6F;
+                width: 75px;
+            }
+            .value{
+                color: #1F1E1E;
+            }
+            .value-1{
+                color: #009CFF;
+            }
+        }
+    }
+  }
+}
+</style>