<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
<view class="my-text">囤油升数</view>
<view class="my-icons"></view>
</view>
<!-- 顶部区域 -->
<view class="top-box" v-for="(item,index) in refuelMoney" :key="index">
<!-- <view class="kuangbox">使用规则 </view> -->
<view class="box-title">囤油升数</view>
<view class="box-nmb">{{item.type}}<!-- : {{item.oilName}} --></view>
<view class="box-nmb">剩余升数: {{item.refuelMoney}}升</view>
<!-- <view class="dis-bt">
<view class="">累计获得0.00</view>
<view class="">已经抵用0.00</view>
</view> -->
</view>
<!-- <view class="box-gang">
<view class="">明细</view>
<view class="hui-anniu">全部 <u-icon name="arrow-down-fill" size="18"></u-icon> </view>
</view> -->
<view class="fuji" v-for="(item,index) in list" :key="index">
<view class="mx-box">
<view class="m-b-box">
<!-- <view class="box-name">加油站名称</view>
<view class="moneyname">充值成功</view> -->
<view class="box-name">{{getStoreName(storeList,item.storeId)}}</view>
<view class="moneyname" v-if="item.payStatus=='paid'">已支付</view>
<view class="moneyname" v-else-if="item.payStatus=='payFail'">支付失败</view>
<view class="moneyname" v-else-if="item.payStatus=='refund'">已退款</view>
<view class="moneyname" v-else-if="item.payStatus=='refunding'">退款中</view>
<view class="moneyname" v-else>未支付</view>
</view>
<view class="y-bt">
<view class="sizehui">油品名称</view>
<view class="sizehei">{{item.type}}:{{item.oilName}}</view>
</view>
<!-- <view class="y-bt">
<view class="sizehui">油品名称</view>
<view class="sizehei">￥{{item.oilName}}</view>
</view> -->
<view class="y-bt">
<view class="sizehui">订单金额</view>
<view class="sizehei">￥{{item.rechargeBalance}}</view>
</view>
<view class="y-bt">
<view class="sizehui">锁价单价</view>
<view class="sizehong">{{item.obtain}}元/L</view>
</view>
<view class="y-bt">
<view class="sizehui">订单时间</view>
<view class="sizehei">{{item.createTime}}</view>
</view>
<view class="y-bt">
<view class="sizehui">到期时间</view>
<view class="sizehei">{{item.expireTime ? item.expireTime : '不限时间'}}</view>
</view>
<!-- <view class="dibu">
<view class="xiaanniu">评价有礼</view>
</view> -->
</view>
</view>
</view>
</view>
</template>
<script>
import request from "../../utils/request";
export default {
data() {
return {
list: [],
totalDetail: '',
show: false,
query: {
mtUserId: '',
storeId: '',
chainStoreId: '',
recordName: '囤油卡',
pageNo: 1,
pageSize: 10
},
refuelMoney: [],
title: '',
// 店铺列表信息
storeList: [],
}
},
components: {
},
onShow() {
this.storeId = uni.getStorageSync("storeId");
this.query.storeId = uni.getStorageSync("storeId")
this.query.chainStoreId = uni.getStorageSync('chainStoreId')
this.list = []
this.getAllOrderList();
this.getUserBalance()
this.getStores();
},
methods: {
// 查询店铺列表信息
getStores() {
let _this = this;
request({
url: "business/storeInformation/store/list",
method: 'get',
}).then((res) => {
_this.storeList = res.data
})
},
getStoreName(list, id) {
let name = "";
list.forEach(item => {
if (item.id == id) {
if (item.description != "" && item.description != null) {
name = item.name + "(" + item.description + ")"
} else {
name = item.name
}
}
})
return name;
},
// 查询全部充值订单
getAllOrderList() {
request({
url: 'business/marketingActivity/cardValueRecord/selectAllRecord',
method: 'get',
params: this.query
}).then((res) => {
if (res.code == 200) {
if (this.pageNo != 1) {
this.list = this.list.concat(res.data.records)
} else {
this.list = res.data.records
}
this.totalDetail = res.data.total
this.show = false
uni.hideLoading();
}
})
},
goback() {
uni.navigateBack()
},
getUserBalance() {
request({
url: '/business/userManager/user/getUserBalanceApplet',
method: 'get',
params: this.query
}).then(res => {
console.log(res)
if (res.code == 200) {
this.cardBalance = res.data.cardBalance,
this.refuelMoney = JSON.parse(res.data.refuelMoney);
}
})
}
}
}
</script>
<style scoped lang="scss">
.moni {
width: 100%;
}
.content {
background: #f4f5f6;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.top-box {
width: 90%;
// height: 105px;
border-radius: 8px;
background-color: #056cf2;
margin: 10px auto;
box-sizing: border-box;
padding: 10px;
color: white;
position: relative;
}
.kuangbox {
position: absolute;
top: 15px;
right: 15px;
box-sizing: border-box;
padding: 5px 10px;
background: #024192;
display: flex;
border-radius: 50px;
color: white;
font-size: 12px;
}
.dis-bt {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.box-title {}
.box-nmb {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}
.box-gang {
width: 90%;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hui-anniu {
box-sizing: border-box;
padding: 5px 10px;
background: #ebecef;
display: flex;
border-radius: 50px;
}
.fuji {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
.mx-box {
width: 100%;
border-radius: 8px;
background-color: #ffffff;
box-sizing: border-box;
padding: 10px;
}
.m-b-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #dedede;
padding-bottom: 10px;
}
.y-bt {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px auto;
}
.box-name {
font-size: 16px;
font-weight: bold;
}
.moneyname {
font-size: 16px;
color: #056cf2;
}
.sizehui {
font-size: 14px;
color: #999999;
}
.sizehei {
font-size: 14px;
}
.sizehong {
font-size: 14px;
color: crimson;
}
.dibu {
display: flex;
align-items: center;
justify-content: flex-end;
}
.xiaanniu {
width: 90px;
background-color: #1678ff;
color: white;
border-radius: 50px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-top: 10px;
}
</style>