订单

src/main/nine-space/src/views/Mine.vue

@@ -88,7 +88,7 @@
       :to="{ path: '/orders' }"
     />
     <van-grid column-num="3" :border="false" :gutter="10">
-      <van-grid-item text="全部订单" :border="false">
+      <van-grid-item text="全部订单" :border="false" :to="{ path: '/orders' }">
         <template v-slot:icon>
           <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
         </template>
@@ -98,7 +98,16 @@
           <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
         </template>
       </van-grid-item> -->
-      <van-grid-item text="交易中" :border="false">
+      <van-grid-item
+        text="交易中"
+        :border="false"
+        :to="{
+          path: '/orders',
+          query: {
+            type: 'PROCESSING',
+          },
+        }"
+      >
         <template v-slot:icon>
           <img
             class="grid-img"
@@ -106,7 +115,16 @@
           />
         </template>
       </van-grid-item>
-      <van-grid-item text="已完成" :border="false">
+      <van-grid-item
+        text="已完成"
+        :to="{
+          path: '/orders',
+          query: {
+            type: 'FINISH',
+          },
+        }"
+        :border="false"
+      >
         <template v-slot:icon>
           <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
         </template>

src/main/nine-space/src/views/order/Detail.vue

@@ -29,6 +29,47 @@
         </div>
       </div>
     </div>
+    <div class="info-item">
+      <div class="text1">商品费用</div>
+      <div class="text1">¥{{ info.price }}</div>
+    </div>
+    <div class="info-item">
+      <div class="text1">GAS费用</div>
+      <div class="text1">¥{{ info.gasPrice }}</div>
+    </div>
+    <div class="info-item">
+      <div class="text1">实际支付</div>
+      <div class="text1">¥{{ info.totalPrice }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="text1">支付方式</div>
+      <div class="text1">
+        {{ getLabelName(info.payMethod, payMethodOptions) }}支付
+      </div>
+    </div>
+
+    <div class="tips-item">
+      <div class="text1">订单编号</div>
+      <div class="text2">
+        <van-button @click="copy" color="#939599" plain size="mini"
+          >复制</van-button
+        >
+        <span>{{ info.id }}</span>
+      </div>
+    </div>
+    <div class="tips-item">
+      <div class="text1">创建时间</div>
+      <div class="text2">
+        {{ info.createdAt }}
+      </div>
+    </div>
+    <div class="tips-item">
+      <div class="text1">付款时间</div>
+      <div class="text2">
+        {{ info.payTime }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -36,6 +77,7 @@
 import order from "../../mixins/order";
 export default {
   name: "detail",
+  inject: ["bs"],
   data() {
     return {
       info: {},
@@ -43,13 +85,37 @@ export default {
   },
   mixins: [order],
   mounted() {
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+    });
     this.$http.get("/order/get/" + this.$route.query.id).then((res) => {
       this.info = res;
+      setTimeout(() => {
+        this.bs.value.refresh();
+      }, 500);
     });
   },
+  methods: {
+    copy() {
+      this.$copyText(this.info.id).then(
+        (e) => {
+          this.$toast.success("复制成功");
+          console.log(e);
+        },
+        (e) => {
+          this.$toast("复制失败");
+          console.log(e);
+        }
+      );
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+.order {
+  padding-bottom: 50px;
+}
 .order-top {
   padding: 26px 16px 20px;
   .text1 {
@@ -64,4 +130,77 @@ export default {
     line-height: 24px;
   }
 }
+.product {
+  padding: 0 16px 20px;
+  border-bottom: 1px solid #202122;
+  .product-name {
+    padding: 15px 0 12px;
+  }
+  .product-info {
+    display: flex;
+
+    .van-image {
+      flex-shrink: 0;
+    }
+    .product-content {
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      margin-left: 10px;
+      .text1 {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 22px;
+      }
+
+      .text2 {
+        font-size: 14px;
+        color: #939599;
+        line-height: 24px;
+        margin-top: 4px;
+      }
+      .price {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+      }
+    }
+  }
+}
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 60px;
+  align-items: center;
+  border-bottom: 1px solid #202122;
+}
+.tips-item {
+  display: flex;
+  justify-content: space-between;
+  height: 40px;
+  align-items: center;
+  padding: 0 16px;
+  .text1 {
+    font-size: 13px;
+    color: #939599;
+    line-height: 24px;
+  }
+  .text2 {
+    font-size: 13px;
+    span {
+      vertical-align: middle;
+    }
+
+    .van-button {
+      vertical-align: middle;
+      margin-right: 5px;
+      height: 20px;
+      font-size: 13px;
+    }
+  }
+}
 </style>

src/main/nine-space/src/views/order/Orders.vue

@@ -41,6 +41,8 @@
     <div class="list">
       <order-info v-for="item in list" :key="item.id" :info="item"></order-info>
     </div>
+
+    <van-empty v-if="empty" description="还没有订单哦~" />
   </div>
 </template>
 
@@ -72,6 +74,7 @@ export default {
           name: "已完成",
         },
       ],
+      empty: false,
     };
   },
   beforeUnmount() {
@@ -82,6 +85,9 @@ export default {
     }
   },
   mounted() {
+    if (this.$route.query.type) {
+      this.type = this.$route.query.type;
+    }
     this.$nextTick(() => {
       this.stiky = this.$refs.top.$el.childNodes[0];
     });
@@ -93,6 +99,7 @@ export default {
         message: "加载中...",
         forbidClick: true,
       });
+      this.empty = false;
       this.$http
         .post(
           "/order/all",
@@ -108,13 +115,19 @@ export default {
         )
         .then((res) => {
           this.list = res.content;
-          console.log(this.bs);
+          this.empty = res.empty;
           setTimeout(() => {
             this.bs.value.refresh();
           }, 500);
         });
     },
     changeStatus(name) {
+      this.$router.replace({
+        path: "/orders",
+        query: {
+          type: name,
+        },
+      });
       this.getList();
     },
     change(isFixed) {