panqihua
2 years ago
parent
c05eb9f1e9
commit
07a4c2c2a4
@ -0,0 +1,236 @@ |
||||
<template> |
||||
<div v-if="showDetail"> |
||||
<div class="title">订单动态</div> |
||||
<el-steps :active="4" finish-status="success" align-center> |
||||
<el-step title="2022-12-31 12:31" description="创建订单"></el-step> |
||||
<el-step title="2022-12-31 12:31" description="支付成功/待支付"></el-step> |
||||
<el-step title="2022-12-31 12:31" description="已收货/待收货"></el-step> |
||||
<el-step title="2022-12-31 12:31" description="已完成/已取消"></el-step> |
||||
</el-steps> |
||||
<div class="title">订单信息</div> |
||||
<el-form :inline="true" label-width="100px" label-position="left" class="form"> |
||||
<el-form-item label="订单号"> |
||||
<el-input v-model="form.orderId"></el-input> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="用户昵称"> |
||||
<el-input v-model="form.user.nickName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="用户ID" style="margin-left:20px"> |
||||
<el-input v-model="form.user.userId"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="配送物流"> |
||||
<el-input v-model="form.logisticsCompany"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="快递单号" style="margin-left:20px"> |
||||
<el-input v-model="form.expressNumber"></el-input> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="创建时间"> |
||||
<el-input v-model="form.createTime"></el-input> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="收货人姓名"> |
||||
<el-input v-model="form.address.userName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="收货电话" style="margin-left:20px"> |
||||
<el-input v-model="form.address.phone"></el-input> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="收货地址"> |
||||
<el-select v-model="form.address.province" placeholder="请选择"> |
||||
|
||||
</el-select> |
||||
<el-select v-model="form.address.city" placeholder="请选择"> |
||||
|
||||
</el-select> |
||||
<el-select v-model="form.address.area" placeholder="请选择"> |
||||
|
||||
</el-select> |
||||
<br /> |
||||
<el-input v-model="form.address.address" style="margin-top:10px"></el-input> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
<div class="title">商品列表</div> |
||||
<el-row type="flex" class="count"> |
||||
<el-col>合计：￥1230.00</el-col> |
||||
<el-col>店铺优惠：-￥10.00</el-col> |
||||
<el-col>平台优惠券：￥125.00</el-col> |
||||
<el-col>实付款：￥1234.00</el-col> |
||||
</el-row> |
||||
<el-table :data="form.shopList" border> |
||||
<el-table-column label="商品编码" align="center"> |
||||
DS000001 |
||||
</el-table-column> |
||||
<el-table-column label="商品名称" align="center"> |
||||
联想笔记本 |
||||
</el-table-column> |
||||
<el-table-column label="商品图片" align="center"> |
||||
<img src="http://dummyimage.com/50x50" /> |
||||
</el-table-column> |
||||
<el-table-column label="规格" align="center"> |
||||
黑色，L |
||||
</el-table-column> |
||||
<el-table-column label="数量" align="center"> |
||||
10 |
||||
</el-table-column> |
||||
<el-table-column label="金额" align="center"> |
||||
￥120.00 |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="btn"> |
||||
<el-button type="primary" @click="save">保存</el-button> |
||||
<el-button @click="$emit('view')">查看物流信息</el-button> |
||||
<el-button @click="$emit('close')">关闭</el-button> |
||||
</div> |
||||
</div> |
||||
<div v-else> |
||||
<div class="logistics-info">物流公司：xxxxx<br /> |
||||
物流单号：xxxx<br /> |
||||
起点：湖北省武汉市东西湖区xxx<br /> |
||||
目的地：xxxx<br /> |
||||
发货时间：xxx<br /> |
||||
签收时间：xxx<br /> |
||||
完成时间：xxx |
||||
</div> |
||||
|
||||
<div class="progress"> |
||||
<div class="circle start"></div> |
||||
<template v-for="item in 4"> |
||||
<div class="line"></div> |
||||
<div class="info"> |
||||
昨天<br /> |
||||
15:56 |
||||
<div class="line-f"> |
||||
<div class="line"></div> |
||||
<div class="circle"></div> |
||||
<div class="line"></div> |
||||
</div> |
||||
已揽件<br /> |
||||
xxxxxxxxxxxxxxx |
||||
</div> |
||||
</template> |
||||
<div class="line"></div> |
||||
<i class="el-icon-caret-right end" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "OrderDetail", |
||||
props: { |
||||
showDetail: Boolean |
||||
}, |
||||
data() { |
||||
return { |
||||
|
||||
form: { |
||||
orderId: '1213154154153', |
||||
user: { |
||||
userId: 123131, |
||||
nickName: '用户昵称' |
||||
}, |
||||
logisticsCompany: '美团转送', |
||||
expressNumber: '13132131361313132', |
||||
createTime: '2022-12-31 12:31', |
||||
address: { |
||||
userName: '账单', |
||||
phone: '18888888888', |
||||
province: '河南省', |
||||
city: '郑州市', |
||||
area: '金水区', |
||||
address: '光明路128号' |
||||
}, |
||||
shopList: [undefined] |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
console.info(this.showDetail) |
||||
debugger |
||||
}, |
||||
methods: { |
||||
save() { |
||||
this.$modal.msgSuccess('保存成功') |
||||
this.$emit('close') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
$progress-color: #1684fc; |
||||
$circle-size: 20px; |
||||
|
||||
.logistics-info { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.progress { |
||||
margin-top: 50px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&>.end { |
||||
font-size: #{$circle-size*1.5}; |
||||
position: relative; |
||||
left: -2%; |
||||
color: $progress-color; |
||||
} |
||||
|
||||
&>.line { |
||||
background-color: $progress-color; |
||||
height: 2px; |
||||
width: 8%; |
||||
} |
||||
|
||||
&>.info { |
||||
text-align: center; |
||||
|
||||
&>div { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
|
||||
.line { |
||||
background-color: $progress-color; |
||||
height: 2px; |
||||
flex: auto; |
||||
} |
||||
} |
||||
|
||||
.circle { |
||||
border-radius: 50%; |
||||
width: $circle-size; |
||||
height: $circle-size; |
||||
background-color: #555353; |
||||
} |
||||
|
||||
.circle.start { |
||||
|
||||
background-color: $progress-color; |
||||
} |
||||
|
||||
} |
||||
|
||||
.btn { |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.count { |
||||
margin: 20px 0 |
||||
} |
||||
|
||||
.form { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
text-align: left; |
||||
font-family: SourceHanSansSC-regular; |
||||
margin: 10px 0; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue