419 lines
12 KiB
Vue
419 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<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="foreground" :pdground="foreground" :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>壳牌 {{test}} {{tsets}}</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">
|
||
<!-- <view class="cu-item arrow" @tap="toDetail(order)">
|
||
|
||
</view> -->
|
||
油站
|
||
<text class="fr nowrap">{{order.siteName?order.siteName:''}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
油品油枪
|
||
<text class="fr nowrap">
|
||
{{order.oilsCode?order.oilsCode+' ':'' }}{{ order.gunName?order.gunName+'号枪': order.oilsBar?order.oilsBar+'号枪':'未选择油枪'}} </text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
{{order.oilProductType=='GAS'?'加气重量：':'加油升数：'}}
|
||
<text
|
||
class="fr nowrap">{{order.volume?'约':''}}{{order.volume?order.volume:'未输入' |moneyFormath}}{{order.oilProductType=='GAS'?'L':'L'}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
油站价格
|
||
<text
|
||
class="fr">{{order.sitePrice?order.sitePrice+'￥/' +( order.oilProductType=='GAS'?'L':'L') :'暂无'}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
优惠价格
|
||
<text class="fr">约{{moneyIntercept(order.realPrice) }}￥/{{order.oilProductType=='GAS'?'L':'L'}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
加油员
|
||
<text class="fr">{{order.siteUser}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
加油渠道
|
||
<text class="fr">{{order.channelCode|channelCodeFamt}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
星油优惠
|
||
<!-- order.xoilDiscountAmount>0?order.xoilDiscountAmount:'xxx.x'|moneyFormat -->
|
||
<text class="text-red fr">{{ moneyIntercept(order.xoilDiscountAmount)}}</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'|moneyFormat}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
支付方式
|
||
<text class=" fr">{{order.payAccountType==0?'星油豆':'企业账户支付'}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left" v-if="order.payTime">
|
||
订单支付时间
|
||
<text class=" fr">{{order.payTime}}</text>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
{{order.suppleMark==0 ? '订单创建时间' : '补单订单创建时间'}}
|
||
<text class=" fr">{{order.orderTime||` ${order.createTime}`}}</text>
|
||
</view>
|
||
|
||
<view class="dashed-top margin-top-xs padding-top-sm">
|
||
<view class="padding-tb-xs text-left">
|
||
加油车牌
|
||
<text class=" fr">{{order.plateNumber}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="padding-tb-xs text-left">
|
||
加油司机
|
||
<text class=" fr">{{order.customerName}} {{order.customerCode}}</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 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>
|
||
<view class="cu-btn bg-white oil-main-color block flex-sub lg" @click="makeCall">
|
||
<text class="cuIcon-service padding-right-sm">联系客服</text>
|
||
</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>
|
||
<view class="cu-btn bg-white oil-main-color block flex-sub lg" @click="makeCall">
|
||
<text class="cuIcon-service padding-right-sm">联系客服</text>
|
||
</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 orderApi from '@/api/oil-order.js'
|
||
import tkiQrcode from "../pages/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
|
||
|
||
import oilSiteApi from '@/api/oil-site.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
foreground: '#000',
|
||
showQr: false,
|
||
val: '',
|
||
id: '',
|
||
test: null,
|
||
tsets: '',
|
||
order: {}
|
||
}
|
||
},
|
||
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'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
tkiQrcode
|
||
},
|
||
methods: {
|
||
// 拨打电话
|
||
makeCall() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '4008-56-5355' //仅为示例
|
||
})
|
||
},
|
||
newQrString() {
|
||
this.getOrderQrCode()
|
||
},
|
||
getOrderQrCode() {
|
||
oilSiteApi.getOrderQrCode(this.order.orderSerialNumber).then((res) => {
|
||
console.log(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;
|
||
this.foreground = this.val.indexOf('SHLFC/V1') == -1 ? '#000' : '#1A487E';
|
||
}
|
||
})
|
||
},
|
||
onCopy(id) {
|
||
uni.setClipboardData({
|
||
data: id,
|
||
success: () => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '订单号复制成功'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getOrderInfo() {
|
||
orderApi.selOrder(this.id).then(res => {
|
||
if (res.code == 20000) {
|
||
// uni.setStorageSync('oilItem', res.data)
|
||
this.order = res.data
|
||
this.getOrderQrCode()
|
||
}
|
||
})
|
||
},
|
||
toDetail(item) {
|
||
let itemS = JSON.stringify(item)
|
||
console.log(itemS)
|
||
uni.navigateTo({
|
||
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
||
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(() => {
|
||
this.$emit('refresh')
|
||
}, 1000)
|
||
|
||
}
|
||
})
|
||
},
|
||
makePay() {
|
||
orderApi.getOrderPayInfo(this.id).then(res => {
|
||
if (res.code == 20000) {
|
||
// console.log('oilItem',uni.getStorageSync('oilItem'))
|
||
// if(res.data.secondChannelCode === 'SQ'){
|
||
// res.data.listTag = res.data.sqSiteBelong === 'JKJY' ? '集卡加油' :'上汽联名卡'
|
||
// }
|
||
uni.setStorageSync('orderMade', res.data)
|
||
uni.setStorageSync('oilItem', 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)
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
onLoad(option) {
|
||
console.log('++++++++++++++++++', option)
|
||
this.test = option.id
|
||
this.id = option.id
|
||
this.tsets = option.name
|
||
this.getOrderInfo()
|
||
uni.showShareMenu()
|
||
let _that = this
|
||
this.timeinterval = setInterval(() => {
|
||
console.log('1')
|
||
_that.newQrString()
|
||
}, 1000 * 60 * 3);
|
||
},
|
||
filters: {
|
||
moneyIntercept(value) {
|
||
if (value) {
|
||
console.log(value)
|
||
let valus = (parseInt(value * 100) / 100).toFixed(2) + '￥/'
|
||
console.log(valus)
|
||
return valus
|
||
} else {
|
||
return '暂无'
|
||
}
|
||
},
|
||
moneyFormath(value) {
|
||
console.log(value)
|
||
if (value != 'xxx.x') {
|
||
let number = value.toFixed(2)
|
||
return number
|
||
} else {
|
||
return value
|
||
}
|
||
},
|
||
moneyFormat(value) {
|
||
if (value != 'xxx.x') {
|
||
return "￥" + (Math.round(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 '订单已退款'
|
||
case '4':
|
||
return '退款中'
|
||
case '5':
|
||
return '退款失败'
|
||
}
|
||
},
|
||
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-red {
|
||
background-color: #FF6700;
|
||
}
|
||
|
||
.text-centers {
|
||
text-align: center;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
border-radius: 7px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.move-top {
|
||
margin-top: -2rem;
|
||
}
|
||
</style>
|