142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
<template>
|
|
<view sytle="height:100%;background: #fff;">
|
|
<GList
|
|
v-if="dataList.length !== 0"
|
|
style="background: #F3F4F6;height: 100vh;"
|
|
>
|
|
<view class="px-30 py-28">
|
|
<view
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
class="pay-item mb-24"
|
|
>
|
|
<view
|
|
class="pay-item-header flex-center"
|
|
:class="{ status: item.status === 0 }"
|
|
>
|
|
<text class="pay-item-header-text">
|
|
充值{{ item.money || 0 }}元{{
|
|
item.status === 1 ? '已支付' : '未支付'
|
|
}}
|
|
</text>
|
|
</view>
|
|
<view class="pay-item-bottom">
|
|
<view
|
|
class="flex-row mb-20 mt-8"
|
|
style="justify-content: space-between;"
|
|
>
|
|
<text class="pay-item-bottom-left">
|
|
订单号码
|
|
</text>
|
|
<text class="pay-item-bottom-right">
|
|
{{ item.out_trade_no }}
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="flex-row"
|
|
style="justify-content: space-between;"
|
|
>
|
|
<text class="pay-item-bottom-left">
|
|
下单时间
|
|
</text>
|
|
<text class="pay-item-bottom-right">
|
|
{{ item.create_time }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</GList>
|
|
<view
|
|
v-else
|
|
class="flex-1 flex-center"
|
|
style="height: 100%;background-color: #ffffff;"
|
|
>
|
|
<GNoData
|
|
image="pay-noData"
|
|
text="暂无充值记录~"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { rechargerecord } from '@/api/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataList: []
|
|
};
|
|
},
|
|
created() {
|
|
this.$showLoading(true);
|
|
this.getDataList();
|
|
},
|
|
methods: {
|
|
getDataList() {
|
|
rechargerecord().then(res => {
|
|
this.dataList = res || [];
|
|
this.$showLoading(false);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dataItem {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.pay-text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
.pay-unit {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
.pay-status-1 {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
.pay-item {
|
|
height: 264rpx;
|
|
background-image: url('https://diyyhdapi.qinjiu8.com/payBackgrunp.png');
|
|
background-size: 100% 100%;
|
|
.pay-item-header {
|
|
height: 104rpx;
|
|
.pay-item-header-text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.pay-item-bottom {
|
|
padding: 24rpx;
|
|
justify-content: space-between;
|
|
.pay-item-bottom-left {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
.pay-item-bottom-right {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
&.status {
|
|
.pay-item-header-text {
|
|
color: #ce3636;
|
|
}
|
|
}
|
|
}
|
|
</style>
|