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