yu
/
CostumingPlatform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单

Browse Source
zhc4dev
暖暖 2 years ago
parent eab6847482
commit 8c6280e8ad
3 changed files with 232 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ant-design-vue-jeecg/src/config/router.config.js
  2. 208
      ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
  3. 48
      ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue

4
ant-design-vue-jeecg/src/config/router.config.js
Unescape View File

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

208
ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
Unescape View File

@ -8,28 +8,75 @@
<a>量体数据</a> <a>量体数据</a>
</div> </div>
<div class="jz"> <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-tab-pane>
<a-tab-pane key="4" tab="发票管理" force-render>
发票管理
</a-tab-pane>
<a-tab-pane key="5">
<span slot="tab">
全部订单
<a-icon type="down" />
</span>
全部订单
</a-tab-pane>
</a-tabs>
<a-menu-item key="invoice:1">
Option 1
</a-menu-item>
<a-menu-item key="invoice:2">
Option 2
</a-menu-item>
<a-menu-item key="invoice:3">
Option 3
</a-menu-item>
<a-menu-item key="invoice:4">
Option 4
</a-menu-item>
</a-sub-menu>
<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> </div>
<Footer></Footer> <Footer></Footer>
</div> </div>
@ -42,6 +89,35 @@
components: { Header,Footer }, components: { Header,Footer },
data() { data() {
return { 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) { callback(key) {
console.log(key); console.log(key);
}, },
menuChange(key){
if(key == daizhifu){
// this.allOrders.forEach()
}
}
}, },
}; };
</script> </script>
@ -82,12 +163,83 @@
margin-bottom: 60px; 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> </style>

48
ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save