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.
492 lines
12 KiB
492 lines
12 KiB
2 years ago
|
<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}}</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> </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="" @tap='codeFn' :style="{marginBottom:!moreOpen?'':'0',background:details.orderWfStatus==0?'#2866FF':'#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' class="refund felx justifyContent alignItems">退款</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="footerButten felx">
|
||
|
|
<view @click="copy" 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',
|
||
|
|
butten: {
|
||
|
|
colse: '取消',
|
||
|
|
confirm: '确定',
|
||
|
|
coloseBg: '',
|
||
|
|
coloseColor: '',
|
||
|
|
confirmBg: '',
|
||
|
|
confirmColor: ''
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
if(e.jsData){
|
||
|
|
console.log(JSON.parse(e.jsData))
|
||
|
|
this.getList(JSON.parse(e.jsData).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(){
|
||
|
|
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)
|
||
|
|
console.log(this.details.secondChannelCode,'--------------------------------')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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() {
|
||
|
|
uni.setClipboardData({
|
||
|
|
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>
|