<template> <view class="content"> <view class="container"> <view class="my-header"> <view class="my-icons" @click="goback"> <uni-icons type="left" color="#ffffff" size="16"></uni-icons> </view> <view class="my-text">详情页</view> <view class="my-icons"></view> </view> <!-- 顶部区域 --> <view class="top-size"> <!-- <view style="font-weight: bold;margin-bottom: 5px;">已支付订单</view> --> <view style="font-weight: bold;margin-bottom: 5px;" v-if="oilOrder.orderStatus=='paid'">已支付订单</view> <view style="font-weight: bold;margin-bottom: 5px;" v-else-if="oilOrder.orderStatus=='payFail'">支付失败订单</view> <view style="font-weight: bold;margin-bottom: 5px;" v-else-if="oilOrder.orderStatus=='refund'">已退款订单</view> <view style="font-weight: bold;margin-bottom: 5px;" v-else-if="oilOrder.orderStatus=='refunding'">退款中订单</view> <view style="font-weight: bold;margin-bottom: 5px;" v-else>未支付订单</view> <view class="">如果有疑问请向商家进行咨询</view> </view> <view class="centen-box"> <view class="box-title">订单信息</view> <view class="dis-fx"> <view class="hui-size">油站名称</view> <view class="">{{oilOrder.storeName}}{{oilOrder.description ? "("+oilOrder.description+")" : ""}}</view> </view> <view class="dis-fx"> <view class="hui-size">加油员工</view> <view class="">{{oilOrder.realName || "--"}}</view> </view> <view class="dis-fx"> <view class="hui-size">油号油枪</view> <view class="">{{oilOrder.oilName}}/{{oilOrder.gunName}}</view> </view> <view class="dis-fx"> <view class="hui-size">油品单价</view> <view class="">¥{{oilPrice}}/L</view> </view> <view class="box-title">加油信息</view> <view class="dis-fx"> <view class="hui-size">加油金额</view> <view class="">{{oilOrder.orderAmount}}元</view> </view> <view class="dis-fx"> <view class="hui-size">加油数量</view> <view class="">{{oilOrder.oilNum}}升</view> </view> <view class="dis-fx"> <view class="hui-size">实付金额</view> <view class="">{{oilOrder.payAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.orderStatus=='paid'"> <view class="hui-size">储值卡付款金额</view> <view class="">{{ oilOrder.balanceAmount }}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.orderStatus=='paid'"> <view class="hui-size">囤油卡付款升数</view> <view class="">{{ oilOrder.oilCardAmount }}元</view> </view> <view class="box-title" v-if="AppToken && oilOrder.discountAmount>0">优惠信息</view> <view class="dis-fx" v-if="AppToken && oilOrder.activeId && oilOrder.activeType=='1'"> <view class="hui-size">满减活动优惠</view> <view class="">{{oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.activeId && oilOrder.activeType=='2'"> <view class="hui-size">折扣活动优惠</view> <view class="">{{oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.cardFavorableId"> <view class="hui-size">优惠券优惠</view> <view class="">{{oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.discountAmount>0 && !oilOrder.cardFavorableId && !oilOrder.activeId"> <view class="hui-size">会员等级优惠</view> <view class="">{{oilOrder.discountAmount}}元</view> </view> <!-- <view class="dis-fx" v-if="AppToken && oilOrder.activeId && oilOrder.activeType=='2'"> <view class="hui-size">满减活动优惠</view> <view class="">{{fullOrDiscount.deductionAmount || oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.activeId && oilOrder.activeType=='2'"> <view class="hui-size">折扣活动优惠</view> <view class="">{{fullOrDiscount.deductionAmount || oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.cardFavorableId"> <view class="hui-size">优惠券优惠</view> <view class="">{{cardFavorable.discountAmount || oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.cardFavorableId && oilOrder.discountAmount>0 && (oilOrder.discountAmount - cardFavorable.discountAmount)>0"> <view class="hui-size">会员等级优惠</view> <view class="">{{cardFavorable.discountAmount ? (oilOrder.discountAmount - cardFavorable.discountAmount) : oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="AppToken && oilOrder.cardFavorableId && oilOrder.activeId && (oilOrder.discountAmount - fullOrDiscount.deductionAmount)>0"> <view class="hui-size">会员等级优惠</view> <view class="">{{fullOrDiscount.deductionAmount ? (oilOrder.discountAmount - fullOrDiscount.deductionAmount) : oilOrder.discountAmount}}元</view> </view> --> <view class="dis-fx" v-if="AppToken && oilOrder.discountAmount>0"> <view class="hui-size">优惠合计金额</view> <view class="">{{oilOrder.discountAmount}}元</view> </view> <view class="dis-fx" v-if="oilOrder.payTime"> <view class="hui-size">交易时间</view> <view class="">{{oilOrder.payTime}}</view> </view> <view class="box-title" v-if="oilOrder.orderStatus=='paid' && oilOrder.remark">订单评价</view> <view class="dis-fx" v-if="oilOrder.orderStatus=='paid' && oilOrder.remark"> <view class="hui-size">订单评价</view> <view class="">{{ oilOrder.remark }}</view> </view> </view> <view class="anniu" v-if="oilOrder.orderStatus=='paid' && oilOrder.remark==null || oilOrder.orderStatus=='paid' && oilOrder.remark==''" @click="gocomment()"> <text>去评价</text> </view> </view> </view> </template> <script> import request from '../../utils/request' export default { data() { return { title: '', orderNo:"", oilOrder:{}, oilPrice:"", // 优惠券信息 cardFavorable:{}, // 满减或折扣信息 fullOrDiscount:{}, // 判断是否有登录token AppToken: uni.getStorageSync("App-Token"), } }, onLoad(e) { this.orderNo = e.orderNo this.getOilOrder() }, onShow() { this.getOilOrder() }, components: { }, methods: { // 获取油品订单 getOilOrder() { request({ url: "business/oilOrder/oilOrderId/" + this.orderNo, method: 'get', }).then((res) => { if(res.data){ this.oilOrder = res.data this.getOilNumber(res.data.storeId) // this.getCardFavorable(res.data.cardFavorableId) // if ( res.data.activeId && res.data.activeType){ // if (res.data.activeType == "1"){ // this.getFullFavorable(res.data.activeId) // } // if (res.data.activeType == "2"){ // this.getDiscountFavorable(res.data.activeId) // } // } } }) }, getCardFavorable(id){ if (id){ request({ url: "business/marketingActivity/cardFavorable/" + id, method: 'get', }).then((res) => { this.cardFavorable = res.data }) } }, getFullFavorable(id){ request({ url: "business/marketingActivity/activeFullminus/" + id, method: 'get', }).then((res) => { let list = res.data.activeDiscountChildList.sort((a,b) => a.amount - b.amount); list.forEach(item => { if (item.amount <= this.oilOrder.orderAmount){ this.fullOrDiscount = item return; } }) }) }, getDiscountFavorable(id){ request({ url: "business/marketingActivity/activeDiscount/" + id, method: 'get', }).then((res) => { let list = res.data.activeDiscountChildList.sort((a,b) => a.amount - b.amount); list.forEach(item => { if (item.amount <= this.oilOrder.orderAmount){ this.fullOrDiscount = item this.fullOrDiscount.deductionAmount = this.oilOrder.orderAmount - (this.oilOrder.orderAmount*item.discount) return; } }) }) }, // 获取当前店铺油号信息 getOilNumber(storeId) { let _this = this; request({ url: "business/petrolStationManagement/oilNumber/getOilNumberName/" + storeId, method: 'get', }).then((res) => { res.data.forEach(item => { if (item.oilName == _this.oilOrder.oils) { _this.oilPrice = item.oilPrice; } }) }) }, gocomment() { uni.navigateTo({ url: '/pagesMy/comment/comment?orderId=' + this.oilOrder.id }) }, goback() { uni.navigateBack() } } } </script> <style scoped lang="scss"> .content { background: #f4f5f6; } .container { width: 100%; height: 100vh; box-sizing: border-box; padding-top: 88px; } .my-header { width: 100%; height: 88px; background: #1678ff; display: flex; align-items: center; justify-content: space-between; color: #ffffff; box-sizing: border-box; padding: 0px 15px; padding-top: 40px; .my-icons { width: 20px; } position: fixed; top: 0px; } .top-size { width: 100%; height: 80px; background: #1678ff; color: white; box-sizing: border-box; padding: 20px; } .centen-box { width: 100%; box-sizing: border-box; padding: 20px; background-color: #ffffff; } .box-title { width: 100%; box-sizing: border-box; padding-bottom: 8px; border-bottom: 1px solid #dfdfdf; margin-top: 10px; } .dis-fx { width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0px auto; margin-top: 10px; font-size: 14px; } .hui-size { color: #999999; } .anniu { width: 95%; height: 55px; background: #1678ff; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 30px auto; } </style>