JP-ChargeTeam51/pages/user/finance/refundList.vue

<template>
	<view>
		<u-navbar title="退费记录"></u-navbar>
		<view class="balance">
			<view class="balanceHead">
				<view class="payPrice">
					<span>￥</span><font>{{account.totalAmount}}</font>
				</view>
				<view class="tips">
					<p>可退费金额(元)</p><u-icon name="question-line" custom-prefix="custom-icon" color="#00B962" size="32" @click="showtip = true"></u-icon>
				</view>
			</view>
			<view class="balanceMain">
				<view class="balanceMain-title">
					<view class="title">
						<u-icon name="todo-fill" custom-prefix="custom-icon" color="#6BC6A7" size="40"></u-icon>
						<span>退费记录</span>
					</view>
				</view>
				<view class="refundList">
					<view class="refundList-item" v-for="(item,index) in items" :key="index" @click="refundItem(item)"> 
						<view class="refundList-row">
							<font>退至 {{item.refundChannelText}}</font>
							<span :class="item.status == '0'? 'state1':'state2' ">{{item.statusText}}</span>
						</view>
						<view class="refundList-row" >
							<p>{{item.applicationTime}}</p>
							<p>￥{{item.refundAmount.toFixed(2)}}</p>
						</view>
					</view>
					<!--
					<view class="refundList-item">
						<view class="refundList-row">
							<font>退至 微信</font>
							<span class="state2">已退款</span>
						</view>
						<view class="refundList-row">
							<p>2021-12-31 09:00</p>
							<p>￥15.00</p>
						</view>
					</view>-->
					
					<!-- <view class="refundList-none">
						<u-image width="200px" height="200px" src="/static/img/none.svg"></u-image>
					</view> -->
				</view>
			</view>
		</view>	
		<view>
			<u-modal v-model="show" :title="title" :content='content'  :show-confirm-button="true" :show-cancel-button='true' @confirm="confirm"></u-modal> 
		</view>
		<view>
			<u-modal v-model="showtip" :title="title" :show-confirm-button="true" confirm-text="知道了" confirm-color="#00B962">
				<view class="slot-content">
					<rich-text :nodes="content1"></rich-text>
				</view>
			</u-modal> 
		</view>
				
		<view style="bottom:0;position:absolute;width: 100%;padding: 20px;" v-show="account.totalAmount>0">
			<u-button shape="circle"    style="background-color:#00b962;color:white" @click="show=true">申请退款</u-button>
		</view>
	</view>
</template>

<script>
	let _self;
	import * as api from "@/apis/refund.js"
	export default {
		data() {
			return {
				elderMode:false,
				content1:`本平台仅支持可支持金额全额退费,申请成功后退费金额将于5个工作日内退还至您的充值账户.在本平台,三个月内的支付宝充值,微信支付可申请退费.<br />退费成功后,您可以在退费记录查看退费信息和审核进度.`,
				title:'提示',
				content:'是否确定提交退费申请？申请成功后退费金额将于5个工作日内退还至您的充值账户',
				show:false,
				showtip:false,
				userId:'',
				account:{},
				items:[],
			}
		},
		onLoad(){
			_self = this;
		},
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass');
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')

			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				console.log('userId'+this.userId)
			}
 
			api.personAccount().then(function(res){
				if(res.result)
				{
					_self.account = res.data;
					
				}
				console.log('个人余额信息'+JSON.stringify(res));
			},function(err){
				uni.showToast({
					title: err,
					icon: "none"
				})
				//console.log('err'+JSON.stringify(err));
			});
			let data = {pageIndex:1,pageSize:10};
			api.personAccountRefundList(data).then(function(res){
				if(res.result){
					console.log('res'+JSON.stringify(res));
					_self.items = res.data.data;
					for(let i = 0;i< _self.items.length;i++){
						if(_self.items[i].refundChannel == 'wechat')
							_self.items[i].refundChannelText = "微信"
						else if (_self.items[i].refundChannel == 'alipay')
							_self.items[i].refundChannelText = "支付宝"
							
						if(_self.items[i].status == '0')
							_self.items[i].statusText = "退款中"
						else if (_self.items[i].status == '1')
							_self.items[i].statusText = "退款成功"
						else if (_self.items[i].status == '2')
							_self.items[i].statusText = "退款拒绝"
						else if (_self.items[i].status == '3')
							_self.items[i].statusText = "退款失败"
										 
					}
//					console.log('res'+JSON.stringify(_self.items));
				}
			},function(err){
				uni.showToast({
					title: err,
					icon: "none"
				})
				//console.log('err'+JSON.stringify(err));
			});
		},
		methods: {
			theme(type) {
			  if(type == 'dark')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  
			  } 
			},
			refundItem(item){
				uni.navigateTo({
					url:'refundDet?id='+item.id
				})
				
			},
			confirm(){
				let data = {amount:_self.account.totalAmount,refundChannel:'wechat'}
				api.personAccountRefundApplication(data).then(function(res){
					if(res.result){
						
						console.log('personAccountRefundApplication'+JSON.stringify(res));
						uni.navigateTo({
							url:'refundApp'
						})
						
					}
					
				},function(err){
					
				}
				);
				//console.log('confirm')
			},
			showTips(){
				
			}
		}
	}
</script>

<style lang="scss" scoped> 
	@import "@/_theme.scss";
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.refundList-none{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.balanceHead{
		background-color: #fff;
		padding: 24px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.payPrice{
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font{
				font-size: 36px;
				line-height: 36px;
			}
		}
		.tips{
			display: flex;
			align-items: center;
			margin-top: 4px;
			p{
				color:#999;
				margin-right: 4px;
			}
		}
	}
	.balanceMain{
		background-color: #fff;
		margin-top: 12px;
		.balanceMain-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 48px;
			border-bottom: 1px solid #f7f7f7;
			padding: 0 16PX;
			.title{
				display: flex;
				align-items: center;
				span{
					margin-left: 8px;
					font-size: 16px;
				}
			}
		}
		.refundList-item{
			padding: 12px 16px;
			.refundList-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				p{
					font-size: 12px;
					color:#888;
					margin-top: 3px;
				}
				.state1{
					color:#FF9600;
				}
				.state2{
					color:#00B962;
				}
			}
		}
		
	}
</style>