<template> <view> <view class="width100 height180 backcor008 fotct"> <image class="imageIcon mart15" :src="imagewxUrl+imgadres"></image> <view class="fcorfff font15 mart10">已支付</view> <view class="fcor333 font24 width90 height55 backcorfff mart20 fotct fontwig6"> <text class="font15">¥</text>{{orderInfo.payPrice}} </view> <view class="width90 height25"> <image class="width100 height25" style="height: 17px;" :src="imagewxUrl+imgadres1"></image> </view> </view> <view class="width90 line1" style="margin-bottom: 1px;"></view> <image class="width90 height25" style="height: 17px;" :src="imagewxUrl+imgadres2"></image> <view class="width90 height50 fcor333 fontwig6 font16 backcorfff" style="margin-top: -4px;"> <text class="paddleft10">加油订单</text> </view> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">交易单号</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">{{orderInfo.orderNo}}</text> </view> </view> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">油站名称</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">{{orderInfo.storeName}}</text> </view> </view> <!-- <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">下单时间</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">{{orderInfo.createTime | formatDate('-')}}</text> </view> </view> --> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">支付时间</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">{{orderInfo.payTime | formatDate('-')}}</text> </view> </view> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">加油金额</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">¥{{orderInfo.gasRefuelPrice}}</text> </view> </view> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14"> <view class="width30 flleft"> <text class="paddleft10">积分抵扣</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">¥{{orderInfo.payGold / 100}}</text> </view> </view> <view class="width90 mart1 height50 backcorfff mart1 fcor666 font14" style="border-radius: 0 0 10px 10px;"> <view class="width30 flleft"> <text class="paddleft10">立即优惠</text> </view> <view class="width70 flright text1 fotrt"> <text class="paddtright10">¥{{orderInfo.totalDeductionPrice}}</text> </view> </view> <view class="btn mart50" @click="backHome()">返回首页</view> <!-- #ifdef H5 --> <image mode="widthFix" class="mart15 width90" :src="imagewxUrl+imgadres3"></image> <!-- #endif --> <!-- <view class="width90 font13 fcor999 mart10"> *本站不支持电子发票,如需发票请到加油站前台索取 </view> --> </view> </template> <script> import { getOrderByOrderNo } from '../../../Utils/Api.js'; let app = getApp(); export default { data() { return { orderInfo: '', imagewxUrl: app.globalData.imageWxImg, imgadres: 'succes.png', imgadres1: 'suline1.png', imgadres2: 'suline2.png', imgadres3: 'qrcode.png', orderNo: '' } }, filters: { //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; } }, onLoad(options) { this.orderNo = options.id; this.getOrderByOrderNo(); }, methods: { getOrderByOrderNo() { uni.showLoading({ title: '加载中...' }) let params = { orderNo: this.orderNo } getOrderByOrderNo(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.orderInfo = res.return_data; } }) }, backHome() { uni.switchTab({ url: '../../tabBar/home/home' }) } } } </script> <style lang="less"> page { background-color: #f7f7f7; } .imageIcon { width: 40px; height: 40px; } .height55 { height: 55px; line-height: 55px; } .cro { width: 100%; height: 30px; background-color: #58C4E6; position: relative; } .cro_con { position: absolute; width: 20px; height: 20px; border: 1px solid #fff; z-index: 1; background: #fff; } .cro_left_top { top: -1px; left: -1px; border-radius: 0 0 20px 0; border-bottom: 1px solid #58C4E6; border-right: 1px solid #58C4E6; } .cro_right_top { top: -1px; right: -1px; border-radius: 0 0 0 20px; border-bottom: 1px solid #58C4E6; border-left: 1px solid #58C4E6; } .cro_left_bottom { left: -1px; bottom: -1px; border-radius: 0 20px 0 0; border-top: 1px solid #58C4E6; border-right: 1px solid #58C4E6; } .cro_right_bottom { right: -1px; bottom: -1px; border-radius: 20px 0 0 0; border-top: 1px solid #58C4E6; border-left: 1px solid #58C4E6; } .btn { color: #FFFFFF; background-color: #0083f5; width: 80%; margin-left: 10%; margin-top: 80rpx; margin-bottom: 50rpx; height: 90rpx; display: flex; justify-content: center; align-items: center; border-radius: 45rpx; font-size: 40rpx; } </style>