服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
9.8 KiB
334 lines
9.8 KiB
<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="this.model.orderTime" > |
|
<a-icon slot="icon" type="container" /> |
|
</a-step> |
|
<a-step title="已支付" > |
|
<a-icon slot="icon" type="credit-card" /> |
|
</a-step> |
|
|
|
<a-step title="待生产" > |
|
<a-icon slot="icon" type="rocket" /> |
|
</a-step> |
|
|
|
<a-step title="生产中" > |
|
<a-icon slot="icon" type="reconciliation" /> |
|
</a-step> |
|
|
|
<a-step title="已发货" > |
|
<a-icon slot="icon" type="car" /> |
|
</a-step> |
|
|
|
<a-step title="已到货" > |
|
<a-icon slot="icon" type="home" /> |
|
</a-step> |
|
|
|
<a-step title="已签收" > |
|
<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>{{this.model.orderTime}}</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 |
|
class="defaultAddr" |
|
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;" v-for="(item,index) in addrList" :key="index" @click="chooseAddr(item)" > |
|
<p class="text">{{item.addr1}}</p> |
|
<p class="text">{{item.addr2}}</p> |
|
<p class="text d-flex"><span>463000</span><span v-if="item.flag">默认地址</span></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"> |
|
<a class="c_fff f_16" @click="handleBack">返回</a> |
|
<a class="c_fff f_16">提交</a> |
|
</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:'',//订单id |
|
orderNum:'1111111',//订单编号 |
|
orderTime:'2022-08-19',//下单时间 |
|
pay:false,//是否已支付 |
|
// receipt:false |
|
}, |
|
addrList:[//地址列表 |
|
{ |
|
id:1, |
|
addr1:'河南省 驻马店市 驿城区', |
|
addr2:'黄淮学院南校区学府花园26号楼3602', |
|
flag:true//是否默认地址 |
|
}, |
|
{ |
|
id:2, |
|
addr1:'河南省 驻马店市 驿城区', |
|
addr2:'黄淮学院南校区学府花园26号楼3601', |
|
flag:false |
|
} |
|
] |
|
}; |
|
}, |
|
methods:{ |
|
chooseAddr(item){ |
|
console.log(item) |
|
}, |
|
handleBack(){ |
|
this.$router.push({ |
|
path: "/shopping/ClothDetail", |
|
query: { |
|
// id: item.id, |
|
}, |
|
}); |
|
} |
|
}, |
|
mounted() { |
|
|
|
}, |
|
}; |
|
</script> |
|
<style> |
|
.placeOrder .top .middle .fzlx { |
|
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; |
|
margin-right: 20px; |
|
} |
|
&:hover{ |
|
color: red; |
|
} |
|
text-align: center; |
|
margin-top: 60px; |
|
} |
|
} |
|
</style> |
|
|
|
|