diff --git a/ant-design-vue-jeecg/src/config/router.config.js b/ant-design-vue-jeecg/src/config/router.config.js index 9031de02..9a5f5124 100644 --- a/ant-design-vue-jeecg/src/config/router.config.js +++ b/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'), + }, ] diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue b/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue index 824682e7..64ce25d0 100644 --- a/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue +++ b/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue @@ -8,28 +8,75 @@ 量体数据
- - - 我的账户 - - - 我的收藏 - - - 地址管理 - - - 发票管理 - - - - 全部订单 - - - 全部订单 - - + + 我的账户 + 我的收藏 + 地址管理 + + 发票管理 + + Option 1 + + + Option 2 + + + Option 3 + + + Option 4 + + + + 全部订单 + + 待支付 + + + 待收货 + + + 已完成 + + + 退换服务 + + + + +
+
+
+ 订单编号:{{item.orderNum}} + + 删除 + 未支付 + 已支付 + +
+
+
+ +
+
+

{{item.name}}

+

+ 款式:{{item.type}}|尺码:{{item.size}}|数量:{{item.num}}件 + ¥ {{item.price}} +

+

主辅料:{{item.material}}

+

+ 总计:¥ {{item.total}} + + 立即支付 + 查看详情 + +

+
+
+
+
@@ -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() + } + } }, }; @@ -82,12 +163,83 @@ margin-bottom: 60px; } } - /*/deep/ .ant-tabs-nav{*/ - /* width: 100%;*/ - /* & >div{*/ - /* display: flex;*/ - /* justify-content: space-around;*/ - /* }*/ - /*}*/ + .menu{width: 1114px;margin:0 auto} + /deep/ .ant-menu{ + display: flex; + justify-content: space-between; + } + .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; + } + } + } + } + } + } + } diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue b/ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue new file mode 100644 index 00000000..e2c370cd --- /dev/null +++ b/ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue @@ -0,0 +1,48 @@ + + + + +