caoliancun/wx_oms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

oms

Browse Source
This commit is contained in:
caolc
2022-08-08 09:22:43 +08:00
commit fa1b5f31bd
1535 changed files with 285130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

491
orderList/orderDetails/orderDetails.vue Normal file
View File

@@ -0,0 +1,491 @@
<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>