服装智能制造软件平台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.
548 lines
18 KiB
548 lines
18 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;" > |
|
<j-area-linkage disabled type="cascader" v-model="defaultAddr.addr1" placeholder="请选择省市区"/> |
|
<p class="text f_12">{{defaultAddr.addr2}}</p> |
|
<p class="text d-flex f_14"><span>{{defaultAddr.postCode}}</span><span v-if="defaultAddr.flag">默认地址</span></p> |
|
</a-button> |
|
<a-button @click="showModal">选择其他地址</a-button> |
|
</div> |
|
<div class="orderList "> |
|
<div class="item d-flex"> |
|
<div class="img"> |
|
<img :src="tp"> |
|
</div> |
|
<div class="info"> |
|
<p class="f_14 c_333 headline">{{this.dingdaninfo.goodsName}}</p> |
|
<p class="d-flex">款式：<span>{{this.dingdaninfo.styleNames}}</span></p> |
|
<p class="d-flex">尺码：<span>{{this.dingdaninfo.modelNumber}}</span></p> |
|
<p class="d-flex">主辅料：<span>{{this.dingdaninfo.name}}</span></p> |
|
</div> |
|
<div class="right d-flex f_14 c_333"> |
|
<span> |
|
<el-input-number style="width: 80px" controls-position="right" size="mini" v-model="dingdaninfo.num" @change="handleChange" :min="1"></el-input-number> |
|
</span> |
|
<span>{{this.dingdaninfo.price}}</span> |
|
<span>{{this.dingdaninfo.total}}</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">{{this.dingdaninfo.total}}</span> |
|
</p> |
|
<p class="d-flex"> |
|
<span class="leftSide f_18">{{this.dingdaninfo.buyer}}</span> |
|
<span class="midst f_16">运费总计</span> |
|
<span class="rightSide f_16" style="font-weight:500">{{this.dingdaninfo.fare}}</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">{{this.dingdaninfo.all}}</span> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="btn"> |
|
<a class="c_fff f_16" @click="handleBack">返回</a> |
|
<a class="c_fff f_16" @click="tj()">提交</a> |
|
</div> |
|
</div> |
|
</div> |
|
<a-modal :width="800" v-model="visible" title="选择其他地址" @ok="handleOk" @cancel="handleCancel"> |
|
<a-radio-group v-model="value" @change="onChange"> |
|
<a-radio :style="radioStyle" v-for="(item,index) in formInline" :key="index" :value="item.id"> |
|
<div style="display: flex;align-items: center"> |
|
<j-area-linkage type="cascader" v-model="item.addr1" placeholder="请选择省市区" style="margin-right: 20px"/> |
|
<span style="margin-right: 20px;word-wrap: break-word; |
|
overflow-wrap: break-word; |
|
white-space: normal;">{{item.addr2}}</span><span>{{item.postCode}}</span> |
|
</div> |
|
|
|
</a-radio> |
|
</a-radio-group> |
|
</a-modal> |
|
<a-modal v-model="visible2" class="toPay"> |
|
<template slot="title"> |
|
<div class="c_1B f_20" style="text-align: center;padding: 5px;font-weight: 500">支付宝支付</div> |
|
</template> |
|
<div class="d-flex" |
|
style=" |
|
width: 450px; |
|
padding: 30px 10px; |
|
margin: 0 auto;"> |
|
<div class="l" |
|
style=" |
|
width: 120px; |
|
height: 120px; |
|
margin-right: 20px;" @click="zhifu"> |
|
<img style="width: 120px; |
|
height: 120px;" src="../assets/erweima.png"/> |
|
</div> |
|
<div class="r" style="width:290px"> |
|
<p class="f_16 c_4B">总计: ￥{{this.dingdaninfo.all}}</p> |
|
<p class="f_14 c_4B">请使用支付宝扫描左图二维码进行支付</p> |
|
<p class="f_14 c_4B">请您在15分钟内付款以免订单被取消，如有疑问，请联系客服。</p> |
|
<p class="f_14 c_4B">订单发货后您将收到订单发货通知短信</p> |
|
</div> |
|
</div> |
|
<template slot="footer"> |
|
<div class="d-flex" style="justify-content: center;align-items:center"> |
|
<a-button style="margin-right: 30px;border:none;font-size: 12px">手机不在身边？ 登录账号付款</a-button> |
|
<a-button style="font-size: 12px" size="small" @click="handleCancel"> |
|
返回 |
|
</a-button> |
|
</div> |
|
|
|
</template> |
|
</a-modal> |
|
<Footer></Footer> |
|
|
|
</div> |
|
</template> |
|
<script> |
|
import Header from "../components/Header/HeaderView"; |
|
import Footer from "../components/Footer/FooterView" |
|
import { httpAction, getAction } from '@/api/manage' |
|
export default { |
|
name: "placeOrder", |
|
components: { Header,Footer }, |
|
data() { |
|
return { |
|
url: { |
|
xd: "/zyorders/zyOrders/xd", |
|
dzlist: "/zyorders/zyOrders/dzlist", |
|
TJorder: "/zyorders/zyOrders/TJorder", |
|
zf: "/zyorders/zyOrders/zf", |
|
}, |
|
ordersid:"", |
|
tp:"../assets/cloth001.png", |
|
dingdaninfo:{ |
|
orderNum:111111, |
|
createTime:'2022-08-19', |
|
goodsName:'男士职业正装外套', |
|
styleNames:'test01', |
|
modelNumber:'S', |
|
name:'白色素面布', |
|
typeName:'有纺树脂衬', |
|
num:1, |
|
price:2478, |
|
total:2478, |
|
buyer:'张三', |
|
fare:0,//运费 |
|
all:0//合计 |
|
},//订单信息 |
|
value: 1,//弹窗选择的地址id |
|
radioAddr:{ |
|
|
|
},//弹窗选择的地址 |
|
radioStyle: { |
|
display: 'flex', |
|
alignItems:'center' |
|
}, |
|
current:0,//目前步骤条在第几步 |
|
visible:false,//地址弹窗是否显示 |
|
visible2:false,//支付弹窗是否显示 |
|
// 全部地址列表 |
|
formInline: [ |
|
{ |
|
id:134325, |
|
user: false, |
|
addr1:'210521', |
|
addr2:'黄淮学院南校区学府花园26号楼弹窗1', |
|
postCode:'463800', |
|
flag:false//是否默认地址 |
|
}, |
|
{ |
|
id:2432, |
|
user: false, |
|
addr1:'210521', |
|
addr2:'黄淮学院南校区学府花园26号楼弹窗2', |
|
postCode:'463800', |
|
flag:false |
|
}, |
|
{ |
|
id:324345, |
|
user: false, |
|
addr1:'210521', |
|
addr2:'黄淮学院南校区学府花园26号楼弹窗3', |
|
postCode:'463800', |
|
flag:false |
|
|
|
}, |
|
{ |
|
id:424365, |
|
user: false, |
|
addr1:'210521', |
|
addr2:'黄淮学院南校区学府花园26号楼弹窗4', |
|
postCode:'463800', |
|
flag:false |
|
}, |
|
], |
|
model:{ |
|
id:'',//订单id |
|
orderNum:'1111111',//订单编号 |
|
orderTime:'2022-08-19',//下单时间 |
|
pay:false,//是否已支付 |
|
// receipt:false |
|
}, |
|
// 默认展示地址 |
|
defaultAddr:{ |
|
id:'1', |
|
addr1:'210521', |
|
addr2:'黄淮学院南校区学府花园26号楼默认1', |
|
flag:true,//是否默认地址 |
|
postCode:'463800', |
|
}, |
|
}; |
|
}, |
|
methods:{ |
|
tj(){ |
|
getAction(this.url.TJorder,{OrdersNum:this.model.orderNum,goodsid:this.$route.query.goodsid,goodsNum:this.dingdaninfo.num}).then((res1) => { |
|
if (res1.success) { |
|
this.ordersid = res1.result; |
|
//console.log(res1.result) |
|
this.visible2 = true; |
|
}else{ |
|
this.$message.error(res1.message); |
|
} |
|
}); |
|
}, |
|
zhifu() { |
|
getAction(this.url.zf,{ordersid:this.ordersid,goodsid:this.$route.query.goodsid}).then((res1) => { |
|
if (res1.success) { |
|
this.$notification['success']({ |
|
message: '支付成功！', |
|
description: |
|
'自动为您跳转首页中...', |
|
}); |
|
let that = this |
|
setTimeout(function(){ |
|
that.$router.push({ |
|
path: "/shopping/shopHome", |
|
query: { |
|
// id: item.id, |
|
}, |
|
}); |
|
},2000); |
|
}else{ |
|
this.$message.error(res1.message); |
|
} |
|
}); |
|
}, |
|
handleChange(value) { |
|
this.dingdaninfo.total = this.dingdaninfo.price*value |
|
this.dingdaninfo.all = this.dingdaninfo.total + this.dingdaninfo.fare |
|
}, |
|
onChange(e) { |
|
this.radioAddr = this.formInline.find(object => object.id == e.target.value) |
|
this.value = e.target.value |
|
}, |
|
showModal() { |
|
this.visible = true; |
|
}, |
|
handleOk(e) { |
|
this.visible = false; |
|
if(JSON.stringify(this.radioAddr) !== "{}"){ |
|
this.defaultAddr = this.radioAddr |
|
} |
|
}, |
|
handleCancel(e) { |
|
this.visible = false; |
|
this.visible2 = false; |
|
}, |
|
handleBack(){ |
|
this.$router.push({ |
|
path: "/shopping/ClothDetail", |
|
query: { id: this.$route.query.goodsid, title: this.$route.query.title ,name:this.$route.query.name,parentName:this.$route.query.parentName}, |
|
}); |
|
} |
|
}, |
|
mounted() { |
|
this.dingdaninfo.all = this.dingdaninfo.total + this.dingdaninfo.fare; |
|
getAction(this.url.dzlist).then((res) => { |
|
if (res.success) { |
|
//console.log(res.result); |
|
this.formInline = res.result; |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}); |
|
getAction(this.url.xd,{goodsid:this.$route.query.goodsid}).then((res1) => { |
|
if (res1.success) { |
|
//console.log(res1.result) |
|
this.model.orderTime = res1.result.dqsj; |
|
this.model.orderNum = res1.result.orderNum; |
|
this.defaultAddr = res1.result.address; |
|
this.dingdaninfo.buyer = res1.result.gmr; |
|
this.dingdaninfo.goodsName = res1.result.spmc; |
|
this.dingdaninfo.styleNames=res1.result.spks; |
|
this.dingdaninfo.modelNumber=this.$route.query.size; |
|
this.dingdaninfo.name=res1.result.zfl; |
|
this.dingdaninfo.price=res1.result.spjg; |
|
this.tp=res1.result.sptp; |
|
this.dingdaninfo.total = res1.result.spjg; |
|
this.dingdaninfo.all = res1.result.spjg; |
|
}else{ |
|
this.$message.error(res1.message); |
|
} |
|
}); |
|
}, |
|
}; |
|
</script> |
|
<style> |
|
.placeOrder .top .middle .fzlx { |
|
border-bottom: 2px solid #000; |
|
} |
|
</style> |
|
<style lang="less" scoped> |
|
@import '../assets/common.css'; |
|
.j-area-linkage /deep/ .area-select{ |
|
background-color: #fff; |
|
border: none; |
|
span{ |
|
padding-left: 0; |
|
font-size: 12px; |
|
color:#313131; |
|
cursor:auto; |
|
font-weight: 500; |
|
} |
|
i{ |
|
display: none; |
|
} |
|
} |
|
.ant-radio-group /deep/ .area-cascader-wrap{ |
|
height:40px; |
|
.area-select{ |
|
height: 40px; |
|
.area-selected-trigger{ |
|
height: 40px;line-height:40px; |
|
padding: 0; |
|
} |
|
} |
|
} |
|
.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> |
|
|
|
|