订单

ant-design-vue-jeecg/src/config/router.config.js

@@ -646,4 +646,8 @@ export const constantRouterMap = [
     path: '/shopping/views/person',//这里是你需要设置新窗口打开的页面的路径s
     component: () => import('@/views/shopping/pages/gerenzhongxin'),
   },
+  {
+    path: '/shopping/views/order',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/pages/orderDetails'),
+  },
 ]

ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue

@@ -8,28 +8,75 @@
       <a>量体数据</a>
     </div>
     <div class="jz">
-      <a-tabs default-active-key="1" :tabBarGutter="200" @change="callback">
+      <a-menu class="menu" v-model="current" mode="horizontal" @click="menuChange">
-        <a-tab-pane key="1" tab="我的账户">
+        <a-menu-item key="mail"> 我的账户 </a-menu-item>
-          我的账户
+        <a-menu-item key="collect"> 我的收藏 </a-menu-item>
-        </a-tab-pane>
+        <a-menu-item key="addr"> 地址管理 </a-menu-item>
-        <a-tab-pane key="2" tab="我的收藏" force-render>
+        <a-sub-menu>
-          我的收藏
+          <span slot="title" class="submenu-title-wrapper">发票管理<a-icon type="down" /></span>
-        </a-tab-pane>
+
-        <a-tab-pane key="3" tab="地址管理">
+            <a-menu-item key="invoice:1">
-          地址管理
+              Option 1
-        </a-tab-pane>
+            </a-menu-item>
-        <a-tab-pane key="4" tab="发票管理" force-render>
+            <a-menu-item key="invoice:2">
-          发票管理
+              Option 2
-        </a-tab-pane>
+            </a-menu-item>
-        <a-tab-pane key="5">
+            <a-menu-item key="invoice:3">
-          <span slot="tab">
+              Option 3
-            全部订单
+            </a-menu-item>
-            <a-icon type="down" />
+            <a-menu-item key="invoice:4">
-          </span>
+              Option 4
-          全部订单
+            </a-menu-item>
-        </a-tab-pane>
+        </a-sub-menu>
-      </a-tabs>
+        <a-sub-menu>
+          <span slot="title" class="submenu-title-wrapper">全部订单<a-icon type="down" /></span>
+            <a-menu-item key="daizhifu">
+              待支付
+            </a-menu-item>
+            <a-menu-item key="daishouhuo">
+              待收货
+            </a-menu-item>
+            <a-menu-item key="yiwancheng">
+              已完成
+            </a-menu-item>
+            <a-menu-item key="tuihuan">
+              退换服务
+            </a-menu-item>
+        </a-sub-menu>
 
+      </a-menu>
+      <div class="orderList">
+        <div class="item" v-for="(item,index) in allOrders" :key="index">
+          <div class="top d-flex">
+            <span>订单编号：{{item.orderNum}}</span>
+            <span>
+              <a class="delete">删除</a>
+              <a class="pay" v-if="!item.pay">未支付</a>
+              <a class="pay" v-if="item.pay">已支付</a>
+            </span>
+          </div>
+          <div class="bottom d-flex">
+            <div class="l">
+              <img :src="item.url">
+            </div>
+            <div class="r">
+              <p class="name f_18 c_333">{{item.name}}</p>
+              <p class="kuanshi f_16 c_666 d-flex">
+                <span>款式：{{item.type}}<span class="line">|</span>尺码：{{item.size}}<span class="line">|</span>数量：{{item.num}}件</span>
+                <span  class="f_20 c_333">¥ {{item.price}}</span>
+              </p>
+              <p><span class="c_666 f_16">主辅料：{{item.material}}</span><span class="c_333 f_14"></span></p>
+              <p class="heji d-flex">
+                <span class="f_20 c_1B">总计：¥ {{item.total}}</span>
+                <span class="f_16 c_333 ">
+                  <a class="btn ljzf" v-if="!item.pay">立即支付</a>
+                  <router-link to="/shopping/views/order" class="btn ckxq">查看详情</router-link>
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <Footer></Footer>
   </div>
@@ -42,6 +89,35 @@
     components: { Header,Footer },
     data() {
       return {
+        current: ['mail'],
+        allOrders:[
+          {
+            id:1,
+            orderNum:'CN172839729',
+            pay:false,
+            url:require("../assets/cloth001.png"),
+            name:'商品名商品名商品名商品名商品',
+            type:'衬衫',
+            size:'XXL',
+            num:2,
+            price:2456,
+            material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6',
+            total:5912
+          },
+          {
+            id:2,
+            orderNum:'CN172839730',
+            pay:true,
+            url:require("../assets/cloth002.png"),
+            name:'商品名商品名商品名商品名商品',
+            type:'衬衫',
+            size:'XXL',
+            num:3,
+            price:2456,
+            material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6',
+            total:5912
+          }
+        ],
 
       };
     },
@@ -49,6 +125,11 @@
       callback(key) {
         console.log(key);
       },
+      menuChange(key){
+        if(key == daizhifu){
+          // this.allOrders.forEach()
+        }
+      }
     },
   };
 </script>
@@ -82,12 +163,83 @@
       margin-bottom: 60px;
     }
   }
-  /*/deep/ .ant-tabs-nav{*/
+  .menu{width: 1114px;margin:0 auto}
-  /*  width: 100%;*/
+  /deep/ .ant-menu{
-  /*  & >div{*/
+    display: flex;
-  /*    display: flex;*/
+    justify-content: space-between;
-  /*    justify-content: space-around;*/
+  }
-  /*  }*/
+  .orderList{
-  /*}*/
+    /*margin-top: 60px;*/
+    width: 1114px;margin:0 auto;
+    padding: 20px;
+    .item{
+      border-bottom: 1px solid #DADADA;
+      padding-top: 30px;
+      .top{
+        justify-content: space-between;
+        color: #333;
+        .delete{
+          text-decoration: underline;
+          color: #1B1B1B;
+          margin-right: 20px;
+        }
+        .pay{
+          color: #E53E41;
+        }
+      }
+      .bottom{
+        justify-content: space-between;
+        .l{
+          img{
+            width: 230px;
+            height: 230px;
+          }
+        }
+        .r{
+          min-width: 800px;
+          padding-top: 30px;
+          .name{
+            font-weight: 500;
+          }
+          .kuanshi{
+            justify-content: space-between;
+          }
+          .line{
+            margin-left: 30px;
+            margin-right: 30px;
+          }
+          .heji{
+            justify-content: space-between;
+            .btn{
+              display: inline-block;
+              width: 145px;
+              height: 40px;
+              line-height: 40px;
+              text-align: center;
+            }
+            .ljzf{
+              background: #333333;
+              color: #fff;
+              margin-right: 20px;
+              border: 1px solid #333333;
+
+              &:hover{
+                background: rgba(0,0,0,0.7);
+                /*color: #333;*/
+              }
+            }
+            .ckxq{
+              color: #333;
+              border: 1px solid #333333;
+              &:hover{
+                background: #333;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 </style>
 

ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="orderDetails">
+    <Header fontColor="#000"></Header>
+    <div style="padding-top: 88px"></div>
+    <div class="orderMain">
+      <div class="jz">
+        <el-breadcrumb class="breadcrumb" separator="/">
+        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
+<!--        <el-breadcrumb-item>{{this.$route.query.title }}</el-breadcrumb-item>-->
+      </el-breadcrumb>
+      </div>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+  import Header from "../components/Header/HeaderView";
+  import Footer from "../components/Footer/FooterView"
+  export default {
+    name: "orderDetails",
+    components: { Header,Footer },
+    data() {
+      return {
+      };
+    },
+    methods: {
+
+    },
+  };
+</script>
+<style>
+  .orderDetails .top .middle .router-link-exact-active.router-link-active {
+    border-bottom: 2px solid #000;
+  }
+</style>
+<style lang="less" scoped>
+  @import '../assets/common.css';
+.orderMain{
+  background: #F6F6F6;
+  .breadcrumb{
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}
+</style>
+