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.
522 lines
13 KiB
522 lines
13 KiB
<template> |
|
<view class="details_body"> |
|
<view class="details_body_car"> |
|
<view class="details_body_car_lable"> |
|
<view class="sign"> |
|
<image style="width: 65%;height: 65%;" :src="details.siteImages"></image> |
|
</view> |
|
<view class="payLi felx justifyContent alignItems">{{details.payAccountType==0?'个人':'企业'}}</view> |
|
<view :style="{background:paymentStatus(details.orderStatus).bg,color:paymentStatus(details.orderStatus).color}" class="payment felx justifyContent alignItems">{{paymentStatus(details.orderStatus).text}}</view> |
|
</view> |
|
<view class="paymentInformation"> |
|
<view class=" flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text"> |
|
{{details.siteName}} |
|
<uni-icons @click="copy(details.siteName)" style="margin-left: 10rpx;" color="#bbbbbb" custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons> |
|
</view> |
|
<view class="smallText">{{details.siteId}}</view> |
|
</view> |
|
</view> |
|
<view style="margin:33rpx 0;" class="flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text"> <text>{{details.customerName}}</text> <text style="margin-left:35rpx;">{{details.customerPhone}}</text> <uni-icons @click="copy(details.customerPhone)" style="margin-left: 10rpx;" color="#bbbbbb" custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons> </view> |
|
<view class="smallText">{{details.customerId}}</view> |
|
</view> |
|
</view> |
|
<view class="flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text">{{details.accountCardCode?details.accountCardCode:'暂无'}}</view> |
|
<view v-if="details.companyName" class="smallText">{{details.companyName}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="splitLine"> |
|
<view style="margin-left: -20rpx;" class="splitLineyuan"></view> |
|
<view class="Line"> |
|
<image src="@/static/line.png" style="width: 100%; height: 1px"></image> |
|
</view> |
|
<view style="margin-right: -20rpx;" class="splitLineyuan"></view> |
|
</view> |
|
<view style="padding: 0 43rpx;"> |
|
<view class="price felx"> |
|
<view> |
|
<view class="smallText">价格</view> |
|
<view class="bgtext">{{ details.realAmount}}<text style="position: relative;left: 20rpx;" class="Text">元</text> |
|
</view> |
|
</view> |
|
<view style="margin-left: 143rpx;"> |
|
<view class="smallText">升数</view> |
|
<view class="bgtext">{{details.volume}} <text style="position: relative;left: 20rpx;" class="Text">L</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view style="margin-top: 45rpx;" class="felx"> |
|
<view class="olitype felx justifyContent alignItems Text">{{details.oilsCode}}</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.realPrice}}</view> |
|
<view class="smallText">实际单价</view> |
|
</view> |
|
</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.marketPrice}}</view> |
|
<view class="smallText">国际单价</view> |
|
</view> |
|
</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.sitePrice}}</view> |
|
<view class="smallText">油站单价</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="details.orderWfStatus==0" @tap='codeFn' :style="{marginBottom:!moreOpen?'':'0',background:'#228B22'}" |
|
class="writeOff felx justifyContent alignItems ">待核销</view> |
|
<view v-else :style="{marginBottom:!moreOpen?'':'0',background:'#BBBBBB'}" |
|
class="writeOff felx justifyContent alignItems ">已核销</view> |
|
<view v-if="!moreOpen" @click="moreOpen=!moreOpen" class="moreButten felx justifyContent alignItems smallText "> |
|
更多信息&退款信息 |
|
<uni-icons :style="{transform:moreOpen?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s' }" size="15" class="content-clear-icon" type="bottom" color="#c0c4cc" ></uni-icons> |
|
</view> |
|
<view class="dxx" :style="{height:moreOpen?'265rpx':'0rpx'}"> |
|
<view class="splitLine"> |
|
<view style="margin-left: -20rpx;" class="splitLineyuan"></view> |
|
<view class="Line"> |
|
<image src="@/static/line.png" style="width: 100%; height: 1px"></image> |
|
</view> |
|
<view style="margin-right: -20rpx;" class="splitLineyuan"></view> |
|
</view> |
|
<view class="more"> |
|
<view @tap='moreOpen=false' style="display: flex; justify-content: space-between;" class="Text"> |
|
{{details.orderSerialNumber}} |
|
<uni-icons :style="{transform:moreOpen?'rotate(0deg)':'rotate(180deg)',transition:'transform .3s' }" size="15" class="content-clear-icon" type="top" color="#c0c4cc" ></uni-icons> |
|
|
|
</view> |
|
<view style="margin-bottom:33rpx;" class="smallText">{{details.createTime}}</view> |
|
<view @tap="refund" :style="{background:details.orderStatus==1?'':'#bbbbbb'}" class="refund felx justifyContent alignItems">退款</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="footerButten felx"> |
|
<view @click="copy(details.orderSerialNumber)" class="copyButten felx justifyContent alignItems">复制订单号</view> |
|
<!-- <button class="forwardButten felx justifyContent alignItems" open-type="share">分享</button> --> |
|
</view> |
|
<popup :show='show' @confirmFn='confirmFn' @closeFn='closeFn' :butten='butten' :styles="{height:'350rpx',width:'350rpx'}" v-model="iShow.seting"> |
|
<view slot="coment"> |
|
<view style="height: 350rpx;display: flex;align-items: center; width: 100%;justify-content: center;flex-wrap: wrap;flex-direction: column;"> |
|
<view v-if="!details.secondChannelCode" style="width: 100%; font-size: 34rpx;text-align: center; margin-bottom: 15rpx;" class="smallText">核销二维码</view> |
|
<qrcode v-if="iShow.seting&&details.secondChannelCode" ref="qrcode" cid="2" loadMake iconSize="10" :val="details.secondChannelCode" unit="upx" |
|
background="#fff" foreground="#000" pdground="#000" onval |
|
@result="qrR" /> |
|
<view v-if="!details.secondChannelCode"> |
|
二维码生成错误 |
|
</view> |
|
</view> |
|
</view> |
|
</popup> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import orderList from '@/api/orderList' |
|
import qrcode from '@/components/tki-qrcode/tki-qrcode' |
|
|
|
import tool from '@/utils/tool.js' |
|
export default { |
|
onShareAppMessage(res) { |
|
return { |
|
title: '订单详情', |
|
path: '/orderList/orderDetails/orderDetails' |
|
} |
|
}, |
|
components: { |
|
qrcode |
|
}, |
|
data() { |
|
return { |
|
details:{}, |
|
show:{ |
|
img:false, |
|
footer:false |
|
}, |
|
iShow: { |
|
seting: false |
|
}, |
|
moreOpen: false, |
|
val:'898989898', |
|
id:null, |
|
butten: { |
|
colse: '取消', |
|
confirm: '确定', |
|
coloseBg: '', |
|
coloseColor: '', |
|
confirmBg: '', |
|
confirmColor: '' |
|
}, |
|
} |
|
}, |
|
onLoad(e) { |
|
if(e.jsData){ |
|
console.log(JSON.parse(e.jsData)); |
|
this.id = JSON.parse(e.jsData).id |
|
this.getList(this.id) |
|
} |
|
|
|
}, |
|
methods: { |
|
codeFn(){ |
|
if(this.details.orderWfStatus==0){ |
|
|
|
orderList.getOrderQrCodeOms(this.details.orderSerialNumber).then(res=>{ |
|
if(res.code==20000){ |
|
console.log(res) |
|
this.val = res.data.codeStr |
|
this.iShow.seting=true |
|
}else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none' |
|
}) |
|
} |
|
}) |
|
|
|
}else{ |
|
this.iShow.seting=false |
|
} |
|
}, |
|
refund(){ |
|
if(this.details.orderStatus!==1) return ; |
|
let that =this |
|
uni.showModal({ |
|
title: '提示', |
|
content: '是否确认退款', |
|
success: function (res) { |
|
if (res.confirm) { |
|
orderList.refund({id:that.id}).then(res=>{ |
|
if(res.code==20000){ |
|
uni.showToast({ |
|
title: '退款成功', |
|
duration: 2000 |
|
}); |
|
setTimeout(()=>{ |
|
that.getList(that.id) |
|
},1000) |
|
} |
|
}) |
|
console.log('用户点击确定'); |
|
} else if (res.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
}, |
|
paymentStatus(e){ |
|
switch(e){ |
|
case 0: |
|
return { |
|
text:'待支付', |
|
color:'#EBC153', |
|
bg:'#FFF6DD' |
|
} |
|
break; |
|
case 1: |
|
return { |
|
text:'已支付', |
|
color:'#17A00E', |
|
bg:'#D1FFDA' |
|
} |
|
break; |
|
case -1: |
|
return { |
|
text:'支付失败', |
|
color:'#EC4645', |
|
bg:'#FFC8C8' |
|
} |
|
break; |
|
case 2: |
|
return { |
|
text:'已取消', |
|
color:'#999999', |
|
bg:'#E9E9E9' |
|
} |
|
break; |
|
case 3: |
|
return { |
|
text:'已退款', |
|
color:'#999999', |
|
bg:'' |
|
} |
|
break; |
|
case 4: |
|
return { |
|
text:'退款中', |
|
color:'#EBC153', |
|
bg:'' |
|
} |
|
// return '退款中' |
|
break; |
|
case 5: |
|
return { |
|
text:'退款失败', |
|
color:'#EC4645', |
|
bg:'' |
|
} |
|
break; |
|
} |
|
}, |
|
getList(e){ |
|
orderList.findOrderDetails({ |
|
orderId:e |
|
}).then(res=>{ |
|
if(res.code!==20000)return |
|
this.details = res.data; |
|
tool.numberSetting(this.details,['realAmount','volume','realPrice','marketPrice','sitePrice'],2); |
|
}) |
|
}, |
|
qrR(){ |
|
console.log('1') |
|
}, |
|
closeFn() { |
|
console.log('点击取消') |
|
}, |
|
confirmFn() { |
|
console.log('点击确定') |
|
}, |
|
share() { |
|
uni.share({ |
|
provider: "weixin", |
|
scene: "WXSceneTimeline", |
|
type: 1, |
|
summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！", |
|
success: function(res) { |
|
console.log("success:" + JSON.stringify(res)); |
|
}, |
|
fail: function(err) { |
|
console.log("fail:" + JSON.stringify(err)); |
|
} |
|
}); |
|
}, |
|
copy(text) { |
|
uni.setClipboardData({ |
|
data:`${text}`, |
|
// data: `订单ID:${this.details.id}\n订单流水号:${this.details.orderSerialNumber}\n订单金额:${this.details.realAmount}元\n订单升数:${this.details.volume}升\n订单类型:${this.details.payAccountType==0?'个人':'企业'}\n司机姓名:${this.details.customerName}\n司机id:${this.details.customerId} ${this.details.companyName?'\n订单所属公司:' + this.details.companyName :''}\n手机号码:${this.details.customerPhone}`, //要被复制的内容 |
|
// ${(this.details.payAccountType==0?'司机姓名':'订单所属公司') + ':' + (this.details.payAccountType==0? this.details.customerName:this.details.companyName)} |
|
success: () => { //复制成功的回调函数 |
|
uni.showToast({ //提示 |
|
title: '复制成功' |
|
}) |
|
} |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.copyButten { |
|
flex: 1; |
|
height: 76rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
margin-right: 19rpx; |
|
} |
|
|
|
.forwardButten { |
|
flex: 1; |
|
height: 76rpx; |
|
background: #28C445; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
font-size: 32rpx; |
|
} |
|
|
|
.footerButten { |
|
padding: 0 43rpx; |
|
font-size: 32rpx; |
|
color: #FFFFFF; |
|
margin: 43rpx 0; |
|
} |
|
|
|
.dxx { |
|
transition: all .3s; |
|
overflow: hidden; |
|
} |
|
|
|
.refund { |
|
height: 76rpx; |
|
width: 308rpx; |
|
background: #EC4645; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
font-size: 32rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
.more { |
|
padding: 0 43rpx; |
|
} |
|
|
|
.moreButten { |
|
height: 67rpx; |
|
background: #F0F0F0; |
|
margin: 0 43rpx; |
|
border-radius: 10rpx; |
|
} |
|
|
|
.writeOff { |
|
height: 92rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
font-size: 32rpx; |
|
margin: 37rpx 43rpx; |
|
color: #FFFFFF; |
|
font-weight: 500; |
|
} |
|
|
|
.bgtext { |
|
font-size: 38rpx; |
|
font-family: PingFang SC; |
|
font-weight: bold; |
|
color: #EC4645; |
|
} |
|
|
|
.actualUnitPrice { |
|
width: 160rpx; |
|
height: 108rpx; |
|
background: #F4F4F4; |
|
margin-left: 19rpx; |
|
text-align: center; |
|
} |
|
|
|
.olitype { |
|
width: 67rpx; |
|
height: 108rpx; |
|
background: #F4F4F4; |
|
} |
|
|
|
.price { |
|
padding-left: 80rpx; |
|
} |
|
|
|
.Line { |
|
position: relative; |
|
width: calc(100% - 100rpx); |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.splitLineyuan { |
|
width: 45rpx; |
|
height: 45rpx; |
|
border-radius: 50%; |
|
background-color: #F0F2FF; |
|
} |
|
|
|
.splitLine { |
|
height: 45rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
position: relative; |
|
margin: 20rpx 0; |
|
} |
|
|
|
.Text { |
|
font-size: 28rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #333333; |
|
} |
|
|
|
.smallText { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #BBBBBB; |
|
} |
|
|
|
.paymentInformation { |
|
padding-top: 140rpx; |
|
padding-left: 35rpx; |
|
padding-right: 35rpx; |
|
} |
|
|
|
.details_body_car_lable .payment { |
|
width: 160rpx; |
|
height: 48rpx; |
|
background: #D1FFDA; |
|
color: #17A00E; |
|
font-size: 30rpx; |
|
position: absolute; |
|
right: 46rpx; |
|
} |
|
|
|
.justifyContent { |
|
justify-content: center; |
|
} |
|
|
|
.alignItems { |
|
align-items: center; |
|
} |
|
|
|
.felx { |
|
display: flex; |
|
} |
|
|
|
.details_body_car_lable .payLi { |
|
width: 100rpx; |
|
height: 44rpx; |
|
background: #2866FF; |
|
border-radius: 0px 0px 12rpx 12rpx; |
|
color: #FFFFFF; |
|
margin-left: 51rpx; |
|
|
|
} |
|
|
|
.details_body_car_lable .sign { |
|
width: 140rpx; |
|
height: 140rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); |
|
border-radius: 50%; |
|
top: -50rpx; |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.details_body_car_lable { |
|
width: 100%; |
|
position: absolute; |
|
top: 0; |
|
display: flex; |
|
padding: 0 46rpx; |
|
} |
|
|
|
.details_body_car { |
|
width: 100%; |
|
/* height: 1003rpx; */ |
|
background-color: #FFFFFF; |
|
border-radius: 20rpx; |
|
position: relative; |
|
/* box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); */ |
|
padding-bottom: 63rpx; |
|
|
|
} |
|
|
|
.details_body { |
|
padding: 0 31rpx; |
|
padding-top: 65rpx; |
|
width: 100vw; |
|
height: 100vh; |
|
overflow: auto; |
|
} |
|
</style>
|
|
|