htmldev/dashboard/src/router/index.js

@@ -93,6 +93,31 @@ const routes = [
       isUseCache: false,
       keepAlive: true,
       isUseVanTabbar: false
+    },
+    props: route => ({
+      alipayForm: route.query.alipayForm,
+      wxpayHref: route.query.wxpayHref
+    })
+  },
+  {
+    path: '/orderList',
+    name: 'OrderList',
+    component: _import('views/orderList/index'),
+    meta: {
+      title: '订单',
+      isUseCache: false,
+      keepAlive: false,
+      isUseVanTabbar: false
+    }
+  },
+  {
+    path: '/orderDetail',
+    name: 'OrderDetail',
+    component: _import('views/orderDetail/index'),
+    meta: {
+      title: '订单已支付',
+      isUseCache: false,
+      keepAlive: false
     }
   },
   {

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="order-list">
+    <div class="header">
+      <Icon class="icon" name="arrow-left" size="16" color="#736F6F" />
+      <ul>
+        <li
+          v-for="(item, index) in tabList"
+          :class="{ active: index === currentTab }"
+          @click="tabChange(index)"
+        >
+          {{ item }}
+        </li>
+      </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>
+    </div>
+  </div>
+</template>
+<script>
+import { Icon, List, PullRefresh } from 'vant'
+export default {
+  components: {
+    Icon,
+    List,
+    PullRefresh
+  },
+  data () {
+    return {
+      tabList: ['订单', '赞赏', '点歌'],
+      currentTab: 0,
+      list: [],
+      loading: false,
+      finished: false,
+      isLoading: false
+    }
+  },
+  methods: {
+    onLoad () {},
+    onRefresh () {
+      setTimeout(() => {
+        Toast('刷新成功')
+        this.isLoading = false
+      }, 1000)
+    },
+    tabChange (index) {
+      this.currentTab = index
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.order-list {
+  height: 100vh;
+  position: relative;
+  .header {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 13px 19px;
+    height: 43px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    .icon {
+      margin-right: 10px;
+    }
+    ul {
+      display: flex;
+      align-items: center;
+      li {
+        color: #1f1e1e;
+        font-size: 18px;
+        margin-right: 33px;
+      }
+      .active {
+        font-size: 21px;
+        font-weight: 600;
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          width: 8px;
+          height: 4px;
+          background: #d32323;
+          border-radius: 2px;
+          bottom: -8px;
+          left: 50%;
+        }
+      }
+    }
+  }
+  .list {
+    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/ordrDetail/index.vue

@@ -0,0 +1,75 @@
+<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>