parent
397597cbc3
commit
874c7df431
3 changed files with 340 additions and 1 deletions
@ -0,0 +1,327 @@ |
||||
<template> |
||||
<!-- 订单详情--> |
||||
<div class="placeOrder"> |
||||
<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/person' }">个人中心</el-breadcrumb-item>--> |
||||
<!-- <el-breadcrumb-item :to="{ path: '/shopping/person' }">全部订单</el-breadcrumb-item>--> |
||||
<!-- <el-breadcrumb-item>订单详情</el-breadcrumb-item>--> |
||||
<!-- </el-breadcrumb>--> |
||||
<div class="d-flex"> |
||||
<div class="l"> |
||||
<div class="card"> |
||||
<p class="f_24">待支付</p> |
||||
<!-- <p class="f_24" v-if="!this.model.pay">待支付</p>--> |
||||
<!-- <p class="f_24" v-if="!this.model.receipt && this.model.pay">待收货</p>--> |
||||
<!-- <p class="f_24" v-if="this.model.receipt">已完成</p>--> |
||||
<!-- <a class="c_333 f_12" v-if="this.model.receipt">查看发票详情</a>--> |
||||
</div> |
||||
<div class="steps"> |
||||
<a-steps direction="vertical" size="small" :current="current"> |
||||
<a-step title="提交订单" description="2022-12-24 12:23:00" > |
||||
<a-icon slot="icon" type="container" /> |
||||
</a-step> |
||||
<a-step title="已支付" description="This is a description." > |
||||
<a-icon slot="icon" type="credit-card" /> |
||||
</a-step> |
||||
|
||||
<a-step title="待生产" description="This is a description." > |
||||
<a-icon slot="icon" type="rocket" /> |
||||
</a-step> |
||||
|
||||
<a-step title="生产中" description="2022-12-24 12:23:00" > |
||||
<a-icon slot="icon" type="reconciliation" /> |
||||
</a-step> |
||||
|
||||
<a-step title="已发货" description="2022-12-24 12:23:00"> |
||||
<a-icon slot="icon" type="car" /> |
||||
</a-step> |
||||
|
||||
<a-step title="已到货" description="This is a description." > |
||||
<a-icon slot="icon" type="home" /> |
||||
</a-step> |
||||
|
||||
<a-step title="已签收" description="This is a description." > |
||||
<a-icon slot="icon" type="printer" /> |
||||
</a-step> |
||||
|
||||
</a-steps> |
||||
</div> |
||||
</div> |
||||
<div class="r"> |
||||
<div class="title d-flex"> |
||||
<span class="f_20 c_333">订单号#{{this.model.orderNum}}<span class="line f_16 c_1B">|</span>2022-08-19</span> |
||||
<div class="right d-flex f_16"><span>数量</span><span>价格</span><span>总计</span></div> |
||||
</div> |
||||
<div class="d-flex orderDiv"> |
||||
<div class="orderAddr"> |
||||
<p class="headline">配送至</p> |
||||
<a-button style="padding-top: 10px;word-wrap: break-word; |
||||
overflow-wrap: break-word; |
||||
white-space: normal; |
||||
height: auto; |
||||
text-align:left; |
||||
margin-bottom:10px; |
||||
overflow: hidden;"> |
||||
<p class="text">河南省</p> |
||||
<p class="text">驻马店市 驿城区</p> |
||||
<p class="text">黄淮学院南校区学府花园26号楼3602</p> |
||||
<p class="text d-flex"><span>463000</span><span>默认地址</span></p> |
||||
</a-button> |
||||
<a-button style="padding-top: 10px;word-wrap: break-word; |
||||
overflow-wrap: break-word; |
||||
white-space: normal; |
||||
height: auto; |
||||
margin-bottom:10px; |
||||
text-align:left; |
||||
overflow: hidden;"> |
||||
<p class="text">河南省</p> |
||||
<p class="text">驻马店市 驿城区</p> |
||||
<p class="text">黄淮学院南校区学府花园26号楼3602</p> |
||||
<p class="text">463000</p> |
||||
</a-button> |
||||
<p class="headline">已发货</p> |
||||
<p class="text">您的订单已经发出。</p> |
||||
<p class="headline">尊享免费配送，您的物流单号：</p> |
||||
<p class="text">4263882788397</p> |
||||
</div> |
||||
<div class="orderList "> |
||||
<div class="item d-flex"> |
||||
<div class="img"> |
||||
<img src="../assets/cloth001.png"> |
||||
</div> |
||||
<div class="info"> |
||||
<p class="f_14 c_333 headline">商品名商品名商品名商品名商品</p> |
||||
<p class="d-flex">款式：<span>衬衫</span></p> |
||||
<p class="d-flex">尺码：<span>XXL</span></p> |
||||
<p class="d-flex">主辅料：<span>主料1，辅料2，辅料3，辅料4，辅料5，辅料6</span></p> |
||||
</div> |
||||
<div class="right d-flex f_14 c_333"> |
||||
<span>1</span><span>2478</span><span>2478</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="heji"> |
||||
<p class="d-flex"> |
||||
<span class="leftSide f_20" style="font-weight:500">购买人</span> |
||||
<span class="midst f_16">小记</span> |
||||
<span class="rightSide f_16" style="font-weight:500">4,956</span> |
||||
</p> |
||||
<p class="d-flex"> |
||||
<span class="leftSide f_18">王贰</span> |
||||
<span class="midst f_16">运费总计</span> |
||||
<span class="rightSide f_16" style="font-weight:500">0</span> |
||||
</p> |
||||
<p class="d-flex"> |
||||
<span class="leftSide"></span> |
||||
<span class="midst f_20" style="font-weight:600">总计</span> |
||||
<span class="rightSide f_20" style="font-weight:600">4,956</span> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="btn"><router-link to="/shopping/person" class="c_fff f_16">返回</router-link></div> |
||||
</div> |
||||
</div> |
||||
<Footer></Footer> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Header from "../components/Header/HeaderView"; |
||||
import Footer from "../components/Footer/FooterView" |
||||
export default { |
||||
name: "placeOrder", |
||||
components: { Header,Footer }, |
||||
data() { |
||||
return { |
||||
current:0,//目前步骤条在第几步 |
||||
model:{ |
||||
id:'', |
||||
orderNum:'', |
||||
pay:false, |
||||
receipt:false |
||||
} |
||||
}; |
||||
}, |
||||
created() { |
||||
// this.model.id = this.$route.query.id |
||||
// this.model.orderNum = this.$route.query.orderNum |
||||
// this.model.pay = JSON.parse(this.$route.query.pay) |
||||
// this.model.receipt = JSON.parse(this.$route.query.receipt) |
||||
// switch (this.$route.query.key) { |
||||
// case 'daizhifu': |
||||
// this.current=0 |
||||
// break; |
||||
// case 'daishouhuo': |
||||
// this.current=4 |
||||
// break; |
||||
// case 'yiwancheng': |
||||
// this.current=6 |
||||
// break; |
||||
// } |
||||
}, |
||||
}; |
||||
</script> |
||||
<style> |
||||
.placeOrder .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; |
||||
padding-bottom: 100px; |
||||
padding-top: 50px; |
||||
.jz{ |
||||
.breadcrumb{ |
||||
padding-top: 50px; |
||||
padding-bottom: 50px; |
||||
} |
||||
.d-flex{ |
||||
justify-content: space-between; |
||||
.l{ |
||||
width: 300px; |
||||
.card{ |
||||
width: 300px; |
||||
height: 157px; |
||||
background: #FFFFFF; |
||||
margin-bottom: 20px; |
||||
text-align: center; |
||||
padding-top: 40px; |
||||
.f_24{ |
||||
color: #C8A985; |
||||
margin-bottom: 20px; |
||||
} |
||||
.f_12{ |
||||
padding: 5px 14px; |
||||
border: 1px solid #333333; |
||||
} |
||||
} |
||||
.steps{ |
||||
width: 300px; |
||||
height: 736px; |
||||
background: #FFFFFF; |
||||
padding: 32px 55px; |
||||
} |
||||
} |
||||
.r{ |
||||
width: 1110px; |
||||
height: 913px; |
||||
background: #FFFFFF; |
||||
padding: 54px 48px; |
||||
.title{ |
||||
padding-bottom: 15px; |
||||
border-bottom: 1px solid #DADADA; |
||||
.line{ |
||||
margin-left: 10px; |
||||
margin-right: 10px; |
||||
} |
||||
.right{ |
||||
width: 25%; |
||||
span{ |
||||
color: #C8A985; |
||||
} |
||||
} |
||||
} |
||||
.orderDiv{ |
||||
padding-bottom: 20px; |
||||
border-bottom: 1px solid #DADADA; |
||||
.orderAddr{ |
||||
width: 25%; |
||||
color: #333; |
||||
font-size: 16px; |
||||
p{ |
||||
margin-bottom: 10px; |
||||
} |
||||
.headline{ |
||||
font-weight: 500; |
||||
color: #C8A985; |
||||
margin-top: 30px; |
||||
} |
||||
.text{ |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
.orderList{ |
||||
width: 75%; |
||||
.item{ |
||||
padding-top: 30px; |
||||
border-bottom: 1px solid #DADADA; |
||||
&:last-of-type{ |
||||
border: none; |
||||
} |
||||
.img{ |
||||
width: 23.33%; |
||||
img{ |
||||
width: 180px; |
||||
height: 180px; |
||||
} |
||||
} |
||||
.info{ |
||||
width: 43.33%; |
||||
padding-right: 15px; |
||||
.headline{ |
||||
font-weight: 500; |
||||
} |
||||
p{ |
||||
span{ |
||||
margin-left: 10px; |
||||
display: inline-block; |
||||
width: 75%; |
||||
} |
||||
} |
||||
} |
||||
.right{ |
||||
width: 33.33%; |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
|
||||
}} |
||||
.heji{ |
||||
padding: 30px 20px; |
||||
p{ |
||||
span{ |
||||
width: 20%; |
||||
color: #333; |
||||
} |
||||
.leftSide{ |
||||
text-align: left; |
||||
|
||||
} |
||||
.midst{ |
||||
text-align: center; |
||||
|
||||
} |
||||
.rightSide{ |
||||
text-align: right; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btn{ |
||||
a{ |
||||
display: inline-block; |
||||
width: 284px; |
||||
height: 56px; |
||||
background: #1B1B1B; |
||||
line-height: 56px; |
||||
} |
||||
&:hover{ |
||||
color: red; |
||||
} |
||||
text-align: center; |
||||
margin-top: 60px; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue