12121
This commit is contained in:
caolc
489
BagStation/orderDetail/orderDetail.vue
Normal file
489
BagStation/orderDetail/orderDetail.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<view @tap.stop='showMiniBtn = false' >
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">订单支付结果</block>
|
||||
</cu-custom>
|
||||
<view class="bg-main-oil padding-bottom">
|
||||
<view class="text-center text-bold text-xl padding-xl">
|
||||
{{order.orderStatus|statusConduct}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="qr-container margin move-tops padding-bottom-xs text-centers my-shadow" v-if="showQr">
|
||||
<view class="qr-container ">
|
||||
<view class="qrimg">
|
||||
<view class="qrimg" @tap="newQrString">
|
||||
<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="250" unit="upx"
|
||||
background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
|
||||
:usingComponents="usingComponents" showLoading />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center text-sm justify-center align-center flex">
|
||||
<image src="../static/img/YDJY.png" mode="" style="width: 60upx;height:60upx;" class="margin-right-sm"></image>
|
||||
<text>壳牌</text>
|
||||
</view>
|
||||
<view class="text-center padding-top text-sm margin-bottom">
|
||||
提示：该二维码每隔3分钟自动刷新一次
|
||||
</view>
|
||||
</view>
|
||||
<view class="move-top bg-white radius my-shadow solid-top margin margin-top-0">
|
||||
<!-- <view class=" text-center padding-sm margin-bottom-sm" v-if="status=='success'">
|
||||
请提醒加油员使用
|
||||
<text class="oil-main-color">“星油云站”</text>
|
||||
进行订单核实
|
||||
</view> -->
|
||||
|
||||
<view class="padding">
|
||||
<view class="padding-bottom-xs margin-bottom-xs dashed-bottom">
|
||||
<view class="padding-tb-xs text-left" @tap="onCopy(order.orderSerialNumber)">
|
||||
订单编号：
|
||||
<text class="fr">{{order.orderSerialNumber?order.orderSerialNumber:''}} <text class="cuIcon-copy padding-left-xs"></text></text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu solid-bottom">
|
||||
<view class="cu-item arrow" @tap="toDetail(order)">
|
||||
油站：
|
||||
<text class="fr">{{order.siteName?order.siteName:''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="padding-tb-xs text-left">
|
||||
油品油枪：
|
||||
<text class="fr nowrap">
|
||||
{{order.oilsCode?order.oilsCode+' ':'' }} {{order.oilsBar?order.oilsBar+'号枪':'未选择油枪'}} </text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
加油升数：
|
||||
<text class="fr">{{order.volume?order.volume :'未输入' | moneyFormath}}L</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
油站价格：
|
||||
<text class="fr">{{order.sitePrice?order.sitePrice+'￥/L':'暂无'}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
优惠价格：
|
||||
<text class="fr">{{order.realPrice?order.realPrice+'￥/L':'暂无'}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
加油员：
|
||||
<text class="fr">{{order.siteUser}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs flex text-left">
|
||||
<view class="flex-sub">
|
||||
加油渠道： <text class="fr">{{order.channelCode|channelCodeFamt}}</text>
|
||||
</view>
|
||||
<!-- <view class="flex-sub" v-if="tyPayMethod==2">
|
||||
<third-party-voucher :pay-data="tySqRes" :show-third-result="showThirdResult" @hideModal="hideModal"
|
||||
@onShowThirdResult="onShowThirdResult"></third-party-voucher>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="dashed-top margin-top-xs padding-top-sm">
|
||||
<view class="padding-tb-xs text-left">
|
||||
加油机金额：<text class="fr">{{order.sitePriceAmount |moneyFormat}}</text>
|
||||
<!-- <text class="fr">{{order.xoilDiscountAmount>0?order.realAmount+order.xoilDiscountAmount:order.realAmount|moneyFormat}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
星油优惠：
|
||||
<text class="text-red fr">{{order.xoilDiscountAmount>0?order.xoilDiscountAmount:'xxx.x'|moneyFormat}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
优惠券：
|
||||
<text class="text-red fr">{{order.couponMark==1?order.couponDiscountAmount:'未使用优惠券'}}</text>
|
||||
</view>
|
||||
|
||||
<view class="padding-tb-xs text-left">
|
||||
合计：
|
||||
<text class="text-red text-bold text-lg fr">{{order.payRealAmount>0?order.payRealAmount:'xxx.x' }}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
支付方式：
|
||||
<text class=" fr" v-if='order.orderSource == "SXF_WECHAT_MINIAPPS" '>随行付支付</text>
|
||||
|
||||
<text class=" fr" v-else>{{order.payAccountType==0?'个人账户支付':'企业账户支付'}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
订单创建时间：
|
||||
<text class=" fr">{{order.createTime}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left" v-if="order.payTime">
|
||||
订单支付时间：
|
||||
<text class=" fr">{{order.payTime}}</text>
|
||||
</view>
|
||||
<view class="dashed-top margin-top-xs padding-top-sm">
|
||||
<view class="padding-tb-xs text-left">
|
||||
加油车牌：
|
||||
<text class=" fr">{{order.plateNumber?order.plateNumber:'暂无'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left">
|
||||
加油司机：
|
||||
<text class=" fr">{{user.name}}</text>
|
||||
</view>
|
||||
<view class="padding-tb-xs text-left" v-if="order.oilCardNature">
|
||||
油卡性质：
|
||||
<text class=" fr">{{order.oilCardNature|oilCardNatureF}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-md padding-right padding-left-xl text-right position-re" @tap.stop="showMiniBtn=true"
|
||||
v-if="order.orderStatus == 1 ">
|
||||
<view class="radius shadow mini-btn bg-white padding-xs flex-wrap position-ab ab-rihgt-bootm"
|
||||
v-if="showMiniBtn">
|
||||
<!-- <view class="margin-bottom-sm ">
|
||||
<button class="cu-btn nowrap bg-white" @tap="deleteOrder(item.orderSerialNumber)">删除</button>
|
||||
</view> -->
|
||||
<!-- <view class=" ">
|
||||
<button class="cu-btn nowrap " @tap="showMiniBtn=false">收起</button>
|
||||
</view> -->
|
||||
<view class="margin-bottom-sm">
|
||||
<button class="cu-btn nowrap bg-white" @tap="gotoInvoicing()">查看开票信息</button>
|
||||
</view>
|
||||
</view>
|
||||
<text class="text-lg">更多</text>
|
||||
</view>
|
||||
<view class="padding bg-white fixed-bottom">
|
||||
<view class="flex margin-bottom" v-if="order.orderStatus==0">
|
||||
<button class="cu-btn block flex-sub lg bg-main-oil " @tap="makePay">立即支付</button>
|
||||
<button class="cu-btn block flex-sub lg margin-left" @tap="cancelOrder">取消订单</button>
|
||||
</view>
|
||||
<button class=" cu-btn bg-white oil-main-color block flex-sub lg " open-type="contact"><text class="cuIcon-service padding-right-sm"></text>
|
||||
在线客服</button>
|
||||
<!-- <button class="cu-btn block lg margin-top " @tap="delOrder">删除订单</button> -->
|
||||
</view>
|
||||
<view class="padding placeholder-hidden">
|
||||
<view class="flex margin-bottom" v-if="order.orderStatus==0">
|
||||
<button class="cu-btn block flex-sub lg bg-main-oil " @tap="makePay">立即支付</button>
|
||||
<button class="cu-btn block flex-sub lg margin-left" @tap="cancelOrder">取消订单</button>
|
||||
</view>
|
||||
<button class=" cu-btn bg-white oil-main-color block flex-sub lg " open-type="contact"><text class="cuIcon-service padding-right-sm"></text>
|
||||
在线客服</button>
|
||||
<!-- <button class="cu-btn block lg margin-top " @tap="delOrder">删除订单</button> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThirdPartyVoucher from '../pages/components/third-party-voucher/third-party-voucher.vue'
|
||||
import toilApi from '@/api/toil.js'
|
||||
import orderApi from '@/api/oil-order.js'
|
||||
import oilSiteApi from '@/api/oil-site.js'
|
||||
import tkiQrcode from "../pages/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
|
||||
import financelApi from '@/api/oil-finance.js'
|
||||
export default {
|
||||
components: {
|
||||
ThirdPartyVoucher,
|
||||
tkiQrcode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMiniBtn: false,
|
||||
showQr:false,
|
||||
val:'',
|
||||
showThirdResult: false,
|
||||
id: '',
|
||||
order: {},
|
||||
tyIntervalCount: 0,
|
||||
tySqRes: {},
|
||||
tyPayMethod: null,
|
||||
user: uni.getStorageSync('user'),
|
||||
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
return {
|
||||
title: '订单' + this.order.orderSerialNumber,
|
||||
path: `/BagStation/orderDetail/orderDetail?id=${this.order.orderSerialNumber}`,
|
||||
imageUrl: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/login-bg.png',
|
||||
desc: '加油超便宜',
|
||||
content: 'this.share.content',
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: '分享成功'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
showMiniBtn:function(){
|
||||
// setTimeout(()=>{
|
||||
// this.showMiniBtn = false
|
||||
// },1000)
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
console.log(option,'optionoptionoptionoption')
|
||||
this.getOrderInfo();
|
||||
uni.showShareMenu();
|
||||
this.getOrderQrCode();
|
||||
let _that = this;
|
||||
|
||||
},
|
||||
onUnload(){
|
||||
if(this.timeinterval)clearInterval(this.timeinterval);
|
||||
},
|
||||
onHide(){
|
||||
console.log('onHide')
|
||||
},
|
||||
methods: {
|
||||
newQrString() {
|
||||
this.getOrderQrCode()
|
||||
},
|
||||
getOrderQrCode(){
|
||||
oilSiteApi.getOrderQrCode(this.id).then( (res)=>{
|
||||
this.val = res.data
|
||||
if(res.code == 40000){
|
||||
this.showQr = false
|
||||
}else if(res.code == 20000){
|
||||
this.showQr = true
|
||||
this.val =res.data.codeStr;
|
||||
if(!this.timeinterval){
|
||||
this.timeinterval = setInterval(() => {
|
||||
console.log('进入循环')
|
||||
this.newQrString()
|
||||
}, 1000 * 60 * 3);
|
||||
}
|
||||
}
|
||||
} )
|
||||
},
|
||||
gotoInvoicing() { //前往开票
|
||||
console.log(this.order,'+++++++++++++')
|
||||
financelApi.checkStatus(this.order.orderSerialNumber).then((res) => {
|
||||
console.log('这里是check是否开发票')
|
||||
console.log(res)
|
||||
console.log(this.order.realAmount)
|
||||
if (res.code == 20000) {
|
||||
if (res.data.openInvoicMark === 'TO_INVOICED') {
|
||||
uni.navigateTo({
|
||||
url: '/BagStation/InvoiceProgress/InvoiceProgress?orderId=' + this.order
|
||||
.orderSerialNumber + '&&payRealAmount=' + this.order.payRealAmount
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/BagStation/orderInvoicing/orderInvoicing?orderId=' + this.order
|
||||
.orderSerialNumber + '&&customerId=' + this.order.customerId + '&&payRealAmount=' + this.order.payRealAmount +
|
||||
'&&realAmount=' + this.order.realAmount + '&&code=' + 1
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 三方支付结果弹窗开始
|
||||
hideModal() {
|
||||
this.showThirdResult = false
|
||||
},
|
||||
// getThirdStatus() {
|
||||
// if (this.tyIntervalCount > 5 || this.tySqRes.otherOrderStatus != 0) {
|
||||
// this.onShowThirdResult()
|
||||
// } else {
|
||||
// setTimeout(() => {
|
||||
// this.queryOrderStatusSq()
|
||||
// }, 500)
|
||||
// }
|
||||
// },
|
||||
onShowThirdResult() {
|
||||
this.showThirdResult = true
|
||||
},
|
||||
// 上汽联名卡支付状态
|
||||
// queryOrderStatusSq() {
|
||||
// toilApi.queryOrderStatusSq(this.id).then(res => {
|
||||
// if (res.code == 20000) {
|
||||
// this.tySqRes = res.data
|
||||
// this.tyIntervalCount++
|
||||
// // otherOrderStatus //三方支付状态 0：待通知 1：通知成功 -1：通知失败
|
||||
// // console.log('联名卡支付结果', res.data)
|
||||
// this.getThirdStatus()
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
// 三方支付结果弹窗结束
|
||||
onCopy(id) {
|
||||
uni.setClipboardData({
|
||||
data: id,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '订单号复制成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getOrderInfo() {
|
||||
orderApi.selOrder(this.id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.order = res.data
|
||||
uni.setStorageSync('oilItem', res.data)
|
||||
// this.getOrderQrCode()
|
||||
if (res.data.payMethod == 2) {
|
||||
this.tyPayMethod = res.data.payMethod
|
||||
// this.queryOrderStatusSq()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
var itemS = JSON.stringify(item)
|
||||
uni.setStorageSync('siteInfo',itemS)
|
||||
uni.navigateTo({
|
||||
url: `/BagStation/pages/stationDetail/stationDetail`,
|
||||
fail: (err) => {
|
||||
// console.log(err)
|
||||
},
|
||||
success: () => {
|
||||
// console.log('err')
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelOrder() {
|
||||
orderApi.cancelOrder(this.id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
uni.$emit('orderLisetUpdate')
|
||||
this.$emit('refresh')
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
makePay() {
|
||||
orderApi.getOrderPayInfo(this.id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
uni.setStorageSync('orderMade', res.data)
|
||||
uni.navigateTo({
|
||||
url: '/BagStation/pages/makeOrder/orderPaying'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
delOrder() {
|
||||
orderApi.delOrder(this.id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/home/home'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
filters: {
|
||||
moneyFormat(value) {
|
||||
if (value != 'xxx.x') {
|
||||
console.log(value)
|
||||
return (parseInt(value * 100) / 100).toFixed(2)
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
statusConduct(value) {
|
||||
// 备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
|
||||
// switch value
|
||||
// case "0"
|
||||
// return '待支付'
|
||||
switch (value + '') {
|
||||
case '0':
|
||||
return '订单待支付'
|
||||
case '1':
|
||||
return '订单已支付'
|
||||
case '-1':
|
||||
return '订单支付失败'
|
||||
case '2':
|
||||
return '订单已取消'
|
||||
case '3':
|
||||
return '订单已退款'
|
||||
}
|
||||
},
|
||||
moneyFormath(value) {
|
||||
console.log(value)
|
||||
if (value != 'xxx.x') {
|
||||
let number = parseFloat(value).toFixed(2)
|
||||
return number
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
oilCardNatureF(value) {
|
||||
// 备注 油卡性质 1：个人 2：企业 3：外请
|
||||
// switch value
|
||||
// case "0"
|
||||
// return '待支付'
|
||||
switch (value + '') {
|
||||
case '1':
|
||||
return '个人'
|
||||
|
||||
case '2':
|
||||
return '企业'
|
||||
case '3':
|
||||
return '外请'
|
||||
}
|
||||
},
|
||||
channelCodeFamt(value) {
|
||||
if (value) {
|
||||
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
|
||||
switch (value) {
|
||||
case 'XOIL':
|
||||
return '星油'
|
||||
case 'WJY':
|
||||
return '万金油'
|
||||
case 'LV':
|
||||
return '老吕（找油网）'
|
||||
case 'TY':
|
||||
return '团油'
|
||||
case 'YDJY':
|
||||
return '一点加油（壳牌）'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>.move-tops{
|
||||
transform: translateY(-17px);
|
||||
}
|
||||
.bg-blue{
|
||||
background-color: red;
|
||||
}
|
||||
.text-centers {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-radius: 7px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.move-top {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
.ab-rihgt-bootm {
|
||||
right: 110upx;
|
||||
bottom: 10upx;
|
||||
}
|
||||
.move-top {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user