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.
292 lines
7.0 KiB
292 lines
7.0 KiB
// 可供选择的订单 |
|
// 开票列表 |
|
<template> |
|
<view class="position-re" @longtap="showMiniBtn=true"> |
|
|
|
<view class="bg-white margin-tb-sm radius "> |
|
<view class="margin-sm padding-bottom-sm solid-bottom" @tap="onCopy(item.orderSerialNumber)"> |
|
<text>{{item.orderSerialNumber}} <text class="cuIcon-copy padding-left-sm"></text></text> |
|
<text class="oil-main-color fr">{{item.orderStatus|statusConduct}}</text> |
|
</view> |
|
<view class="cu-list menu-avatar comment"> |
|
<view class="cu-item padding-top-0" @tap="toDetails(item.orderSerialNumber)"> |
|
|
|
<!-- <view class="cu-avatar text-xl" :style="'background-image:url('+imgUrl+'orders-wjy.png)'"></view> --> |
|
<view class="cu-avatar text-xl round" v-show="item.siteImages!=null" |
|
:style="'background-image:url('+item.siteImages+')'"></view> |
|
<view class="content"> |
|
<view class=" text-content text-bold text-df"> |
|
{{item.siteName}} |
|
</view> |
|
<view class="text-sm "> |
|
<view class="flex"> |
|
<view class="details"> |
|
<view class="top1 text-left"> |
|
<image class="icon icon-desc " :src="imgUrl+'orders-type.png'" alt /> |
|
<text class="padding-left-xs" v-if="item.volume"> {{item.volume | moneyFormath}}升</text> |
|
<text class="padding-left-xs"> |
|
{{item.oilsCode}} |
|
<!-- （{{item.oilsCode}}） --> |
|
</text> |
|
|
|
</view> |
|
<view class="bottom text-left"> |
|
<image class="icon icon-desc " :src="imgUrl+'orders-time.png'" alt /> |
|
|
|
<text class="padding-left-xs"> |
|
{{item.createTime}} |
|
</text> |
|
</view> |
|
<view class="bottom text-left"> |
|
<image class="icon icon-desc " :src="imgUrl+'orders-car.png'" alt /> |
|
<text class="padding-left-xs"> |
|
加油车牌： {{item.plateNumber ?item.plateNumber :'暂无'}} |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="action"> |
|
<!-- <text class="text-xxl padding-right">$4444</text> --> |
|
<view class="pay-status"> |
|
<text class=" text-bold text-xxl">￥{{item.payRealAmount|numberFilter}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <xkempty v-else></xkempty> --> |
|
<!-- 评价的弹出层 --> |
|
<view class="flex padding-sm"> |
|
<view class="flex-sub" @tap="showMiniBtn=true"> |
|
更多 |
|
</view> |
|
<view class="nowrap" v-show="!timeout"> |
|
<view class="flex-twice" v-show="item.orderStatus=='0'"> |
|
<time-down :is-day="false" :is-hour="false" :tip-text="' '" :day-text="' '" :hour-text="':'" |
|
:minute-text="':'" :second-text="' '" :datatime="datatime"></time-down> |
|
</view> |
|
</view> |
|
<view class="" v-show="timeout"> |
|
超时未支付 |
|
</view> |
|
<view class="flex-sub text-right" v-show="item.orderStatus=='0' && !timeout"> |
|
<button class="cu-btn nowrap sm bg-main-oil" |
|
@tap="makePay(item.orderSerialNumber)">立即支付</button> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<view class="radius shadow mini-btn bg-white padding flex-wrap position-ab" v-if="showMiniBtn"> |
|
<view class="margin-bottom-sm "> |
|
<button class="cu-btn nowrap bg-main-oil" @tap="deleteOrder(item.orderSerialNumber)">删除</button> |
|
</view> |
|
<view class="margin-bottom-sm" v-show="item.orderStatus=='0'"> |
|
<button class="cu-btn nowrap bg-brown" @tap="cancelOrder(item.orderSerialNumber)">取消</button> |
|
</view> |
|
<view class=" "> |
|
<button class="cu-btn nowrap " @tap="showMiniBtn=false">收起</button> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</template> |
|
|
|
<script> |
|
import timeDown from '@/components/xw-CountDown' |
|
import Empty from '@/components/Empty' |
|
import orderApi from '@/api/oil-order.js' |
|
export default { |
|
name: 'oilOrders', |
|
components: { |
|
xkempty: Empty, |
|
timeDown |
|
}, |
|
props: { |
|
item: { |
|
type: Object, |
|
default () {} |
|
} |
|
}, |
|
data() { |
|
return { |
|
showMiniBtn: false, |
|
baseURL: this.global.baseURL, |
|
imgUrl: this.global.imgURL, |
|
datatime: '', |
|
timeout: false |
|
} |
|
}, |
|
created() { |
|
if (this.item.orderStatus == '0') { |
|
this.datatime = this.timF(this.item.createTime) |
|
let now = new Date().getTime() * 0.001 |
|
this.timeout = (now - this.datatime) > 0 |
|
} |
|
}, |
|
methods: { |
|
onCopy(id) { |
|
uni.setClipboardData({ |
|
data: id, |
|
success: () => { |
|
uni.showToast({ |
|
icon: 'none', |
|
title: '订单号复制成功' |
|
}) |
|
} |
|
}) |
|
}, |
|
timF(date) { |
|
date = date.substring(0, 19) |
|
date = date.replace(/-/g, '/') |
|
var timestampDeadline = (new Date(date).getTime()) / 1000 + 60 * 10 |
|
return timestampDeadline |
|
}, |
|
makePay(id) { |
|
this.$emit('makePay', id) |
|
}, |
|
deleteOrder(id) { |
|
orderApi.delOrder(id).then(res => { |
|
if (res.code == 20000) { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none', |
|
duration: 1000 |
|
}) |
|
setTimeout(() => { |
|
this.$emit('refresh') |
|
}, 1000) |
|
} |
|
}) |
|
}, |
|
cancelOrder(id) { |
|
orderApi.cancelOrder(id).then(res => { |
|
if (res.code == 20000) { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none', |
|
duration: 1000 |
|
}) |
|
setTimeout(() => { |
|
this.$emit('refresh') |
|
}, 1000) |
|
|
|
} |
|
}) |
|
}, |
|
toDetails(id) { |
|
uni.navigateTo({ |
|
url: `/BagStation/orderDetail/orderDetail?id=${id}` |
|
}) |
|
}, |
|
onSelect(item) { |
|
// console.log('触发', '') |
|
this.$emit('onSelectItem') |
|
} |
|
|
|
}, |
|
filters: { |
|
toT(value) { |
|
if (value) { |
|
return value / 1000 |
|
} |
|
}, |
|
dateFormat(value) { |
|
if (value) { |
|
return value.substring(5, 16) |
|
} |
|
}, |
|
numberFilter(value) { |
|
if (value) { |
|
return (Math.round(value * 100) / 100).toFixed(2) |
|
} else { |
|
return value |
|
} |
|
},moneyFormath(value) { |
|
console.log(value) |
|
if (value != 'xxx.x') { |
|
let number = value.toFixed(2) |
|
return number |
|
} else { |
|
return value |
|
} |
|
}, |
|
statusConduct(value) { |
|
// 备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款 |
|
if (value) { |
|
// switch value |
|
// case "0" |
|
// return '待支付' |
|
switch (value) { |
|
case '0': |
|
return '待支付' |
|
case '1': |
|
return '已支付' |
|
case '-1': |
|
return '支付失败' |
|
case '2': |
|
return '已取消' |
|
case '3': |
|
return '已退款' |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.cu-avatar { |
|
background-color: rgba(255, 255, 255, 0); |
|
} |
|
|
|
.icon-car { |
|
height: 41px; |
|
background-size: contain; |
|
float: left; |
|
margin-top: -8px; |
|
margin-left: -6px; |
|
} |
|
|
|
.car-position { |
|
text-align: left; |
|
} |
|
|
|
.bottom { |
|
color: #333; |
|
} |
|
|
|
.icon-desc { |
|
display: inline-block; |
|
width: 12px; |
|
height: 12px; |
|
position: relative; |
|
top: 1px; |
|
line-height: 25px; |
|
} |
|
|
|
|
|
.details { |
|
position: relative; |
|
} |
|
|
|
|
|
.cu-item { |
|
position: relative; |
|
} |
|
|
|
.pay-status { |
|
position: absolute; |
|
z-index: 1; |
|
right: 100upx; |
|
bottom: 50rpx; |
|
width: 120rpx; |
|
height: 120rpx; |
|
} |
|
|
|
.mini-btn { |
|
z-index: 1; |
|
bottom: -1rem; |
|
left: 1rem; |
|
} |
|
</style>
|
|
|