|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="padding-top-xs">
|
|
|
<view class="cu-card ">
|
|
|
<view class="cu-item shadow bgColor">
|
|
|
<view class="flex padding-sm justify-between">
|
|
|
<!-- left -->
|
|
|
<view class="padding-tb-lg">
|
|
|
<text class="account">账户余额（元）</text>
|
|
|
<view class="padding-top-xs accountNum">{{money}}</view>
|
|
|
</view>
|
|
|
<!-- right -->
|
|
|
<view class="padding-top-xl">
|
|
|
<view class="padding-top-sm">
|
|
|
<button class="cu-btn round" @click="goRecharge"
|
|
|
style="background: #fff; color: #2ebc6a;">充值</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tab_cls">
|
|
|
<uv-subsection :list="tab_list" :current="tab_current" @change="tab_change"></uv-subsection>
|
|
|
</view>
|
|
|
<!-- refundStatus == 0 才可以退款 -->
|
|
|
<!-- <view class="action padding-lr-sm padding-bottom-sm"><text class="cuIcon-titles textBlue"></text>充值明细</view> -->
|
|
|
<view class="content_pay">
|
|
|
<view class="cu-card " v-for="(item,index) in payData" :key="index" v-if="payData.length!=0">
|
|
|
<view class="cu-item shadow">
|
|
|
<view class="flex padding-sm justify-between">
|
|
|
<!-- left -->
|
|
|
<view>
|
|
|
<view class="flex" style="align-items: center;">
|
|
|
<view class="payState">
|
|
|
付款成功
|
|
|
</view>
|
|
|
<text class="refund_moneny"
|
|
|
v-if="tab_current == 0 && money >= item.payPrice / 100 && item.refundStatus == 0"
|
|
|
@click="handle_refund(item.id)">退款</text>
|
|
|
</view>
|
|
|
<view class="margin-top-sm payTime" v-if="tab_current == 0">{{item.payTime}}</view>
|
|
|
<view class="margin-top-sm payTime" v-else>{{item.createTime}}</view>
|
|
|
</view>
|
|
|
<!-- right -->
|
|
|
<view>
|
|
|
<view class="text-price payMoney">
|
|
|
{{tab_current == 0? (item.payPrice / 100): (item.price / 100) }}
|
|
|
</view>
|
|
|
<view class="allMoney" v-if="tab_current == 0">
|
|
|
<text>实际到账金额：</text>
|
|
|
{{item.totalPrice?item.totalPrice / 100: 0}}元
|
|
|
</view>
|
|
|
<view class="allMoney" v-else>
|
|
|
<text>实际消费金额：</text>
|
|
|
{{item.price?item.price / 100: 0}}元
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else class="center">
|
|
|
<image class="noneImg" src="../../static/user/none.png" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import config from '@/common/config/config.js';
|
|
|
// import {
|
|
|
// AESDecrypt
|
|
|
// } from '../../../static/utils/encodes.js';
|
|
|
import PayWalletApi from '@/sheep/api/pay/wallet';
|
|
|
import {
|
|
|
reactive,
|
|
|
ref,
|
|
|
} from "vue";
|
|
|
import {
|
|
|
onLoad,
|
|
|
onShow,
|
|
|
onReachBottom
|
|
|
} from "@dcloudio/uni-app";
|
|
|
const money = ref(0.00)
|
|
|
const money_team = ref(0.00)
|
|
|
const payData = ref([])
|
|
|
const total = ref()
|
|
|
const totalPages = ref() //总页数，用于判断是否加载完
|
|
|
const size = ref(10)
|
|
|
const pageNo = ref(1)
|
|
|
const tab_list = ref([
|
|
|
'充值明细', '消费明细'
|
|
|
])
|
|
|
const tab_current = ref(0)
|
|
|
onLoad(() => {
|
|
|
handle_bindType()
|
|
|
// getPayconsumption()
|
|
|
})
|
|
|
onShow(() => {
|
|
|
getPayList(0)
|
|
|
})
|
|
|
const tab_change = (e) => {
|
|
|
tab_current.value = e
|
|
|
pageNo.value = 1
|
|
|
if (e == 1) {
|
|
|
getPayList_consumption()
|
|
|
} else if (e == 0) {
|
|
|
getPayList(0)
|
|
|
}
|
|
|
}
|
|
|
const handle_bindType = async (type) => {
|
|
|
let data = {
|
|
|
bindType: 1
|
|
|
}
|
|
|
uni.$request({
|
|
|
url: config.baseUrl + "app-api/pay/wallet/get",
|
|
|
data
|
|
|
}).then(res => {
|
|
|
money.value = res.data.data.balance / 100
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const goRecharge = () => {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/index/recharge/recharge'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const handle_refund = (id) => {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '是否确认提交退款申请？',
|
|
|
success: function(res) {
|
|
|
if (res.confirm) {
|
|
|
handle_refund_submit(id)
|
|
|
} else if (res.cancel) {
|
|
|
// console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const handle_refund_submit = async (id) => {
|
|
|
await uni.$request({
|
|
|
url: config.baseUrl +
|
|
|
`app-api/pay/wallet-recharge/refund?id=${id}`
|
|
|
}).then(res => {
|
|
|
// console.log(res, '退款');
|
|
|
uni.showLoading({
|
|
|
title: '申请中...请稍后'
|
|
|
})
|
|
|
if (res.data.code == 0) {
|
|
|
setTimeout(() => {
|
|
|
uni.showToast({
|
|
|
title: '申请成功',
|
|
|
duration: 2000,
|
|
|
icon: 'success'
|
|
|
});
|
|
|
}, 2000)
|
|
|
setTimeout(() => {
|
|
|
handle_bindType()
|
|
|
uni.hideLoading()
|
|
|
}, 4000)
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
uni.showToast({
|
|
|
title: res.data.msg,
|
|
|
duration: 2000,
|
|
|
icon: 'error'
|
|
|
});
|
|
|
}, 2000)
|
|
|
setTimeout(() => {
|
|
|
handle_bindType()
|
|
|
uni.hideLoading()
|
|
|
}, 4000)
|
|
|
|
|
|
}
|
|
|
// if()
|
|
|
})
|
|
|
}
|
|
|
const getPayList = async (type) => {
|
|
|
let param = {
|
|
|
pageNo: pageNo.value,
|
|
|
pageSize: 10
|
|
|
}
|
|
|
await uni.$request({
|
|
|
url: config.baseUrl +
|
|
|
`app-api/pay/wallet-recharge/page?bindType=1&pageNo=${param.pageNo}&pageSize=${param.pageSize}`
|
|
|
}).then(res => {
|
|
|
// console.log(res, '充值明细');
|
|
|
totalPages.value = res.data.data.total
|
|
|
if (type == 1) {
|
|
|
payData.value.concat(res.data.data.list)
|
|
|
} else {
|
|
|
payData.value = res.data.data.list
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const getPayList_consumption = async (type) => {
|
|
|
let param = {
|
|
|
pageNo: pageNo.value,
|
|
|
pageSize: 10
|
|
|
}
|
|
|
await uni.$request({
|
|
|
url: config.baseUrl +
|
|
|
`app-api/pay/wallet-transaction/page?type=3&bindType=1&pageNo=${param.pageNo}&pageSize=${param.pageSize}`
|
|
|
}).then(res => {
|
|
|
// console.log(res, '充值明细');
|
|
|
totalPages.value = res.data.data.total
|
|
|
if (type == 1) {
|
|
|
payData.value.concat(res.data.data.list)
|
|
|
} else {
|
|
|
payData.value = res.data.data.list
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const getPayconsumption = async () => {
|
|
|
let param = {
|
|
|
pageNo: pageNo.value,
|
|
|
}
|
|
|
const {
|
|
|
data,
|
|
|
code
|
|
|
} = await PayWalletApi.getWalletTransactionPage(param)
|
|
|
// console.log(data, 'data')
|
|
|
}
|
|
|
onReachBottom(async () => {
|
|
|
if (payData.value.length == totalPages.value) {
|
|
|
uni.$u.toast('没有更多啦');
|
|
|
return
|
|
|
}
|
|
|
pageNo.value++
|
|
|
getPayList(1)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
background: #F7F8FA;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.textBlue {
|
|
|
color: #4C91FF;
|
|
|
}
|
|
|
|
|
|
.bgColor {
|
|
|
background-image: linear-gradient(to right bottom, #42cc7d, #23b360);
|
|
|
}
|
|
|
|
|
|
.account {
|
|
|
color: #fff;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.accountNum {
|
|
|
font-size: 44rpx;
|
|
|
font-weight: 700;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.u-button--plain {
|
|
|
background-color: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
|
|
|
.payState {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
padding: 4rpx 8rpx;
|
|
|
border: 1px solid #4C91FF;
|
|
|
border-radius: 8rpx;
|
|
|
color: #4C91FF;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.non-payment {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
color: #FF7B0E;
|
|
|
border: 1px solid #FF7B0E;
|
|
|
padding: 4rpx 8rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.refunded-faild {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
color: #F2634F;
|
|
|
border: 1px solid #F2634F;
|
|
|
padding: 4rpx 8rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.refund-success {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
color: #6BECA0;
|
|
|
border: 1px solid #6BECA0;
|
|
|
padding: 4rpx 8rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.pay {
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.payTime {
|
|
|
color: #808080;
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.payMoney {
|
|
|
color: #4C91FF;
|
|
|
font-size: 40rpx;
|
|
|
font-weight: 400;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.allMoney {
|
|
|
color: #808080;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.cu-card>.cu-item {
|
|
|
margin: 0 30rpx 30rpx 30rpx;
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
.noneImg {
|
|
|
width: 336rpx;
|
|
|
height: 452rpx;
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.tab_cls {
|
|
|
padding: 0 30rpx;
|
|
|
}
|
|
|
|
|
|
.content_pay {
|
|
|
margin-top: 15rpx;
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
overflow-y: scroll;
|
|
|
}
|
|
|
|
|
|
.refund_moneny {
|
|
|
font-size: 13px;
|
|
|
text-decoration: underline;
|
|
|
margin-left: 10rpx;
|
|
|
color: red;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background-color: #F7F8FA;
|
|
|
}
|
|
|
</style> |
