jp-charge/pages/user/refundList.vue

<template>
	<view>
		<u-navbar title="退费记录"></u-navbar>
		<view class="balance">
			<view class="balanceHead">
				<view class="payPrice">
					<font>{{account.availableAmount!=null ? account.availableAmount.toFixed(2) : '0.00'}}</font><span>元</span>
				</view>
				<view class="tips">
					<p>可退费金额(元)</p><u-icon name="question-circle" 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>原路退回</font>
							<span :class=" 'state'+item.status ">{{item.statusText}}</span>
						</view>
						<view class="refundList-row" >
							<p>{{item.applicationTime}}</p>
							<p>{{item.refundAmount!=null ? item.refundAmount.toFixed(2) : '0.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: 40rpx;" v-show="account.availableAmount>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;
				//('userId'+this.userId)
			}
 
			api.personAccount().then(function(res){
				if(res.result)
				{
					_self.account = res.data;
					
				}
				//('个人余额信息'+JSON.stringify(res));
			},function(err){
				uni.showToast({
					title: err,
					icon: "none"
				})
				////('err'+JSON.stringify(err));
			});
			this.getList();
		},
		methods: {
			
			getList(){
				let data = {pageIndex:1,pageSize:100};
							api.personAccountRefundList(data).then(function(res){
								if(res.result){
									//('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 = "退款失败"
														 
									}
				//					//('res'+JSON.stringify(_self.items));
								}
							},function(err){
								uni.showToast({
									title: err,
									icon: "none"
								})
								////('err'+JSON.stringify(err));
							});
			},
			theme(type) {
			  if(type == 'elder')	
			  {
				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(){
				uni.showLoading({
					
				})
				var _this=this
				let data = {amount:_self.account.availableAmount,refundChannel:'wechat'}
				api.personAccountRefundApplication(data).then(function(res){
					uni.hideLoading()
					if(res.result){
						
						api.personAccount().then(function(res){
							if(res.result)
							{
								_self.account = res.data;
								
							}
							//('个人余额信息'+JSON.stringify(res));
						},function(err){
							uni.showToast({
								title: err,
								icon: "none"
							})
							////('err'+JSON.stringify(err));
						});
						
						_this.getList();
						
					}
					
				},function(err){
					// uni.showToast({
					// 	title:err
					// })
						uni.hideLoading();
					uni.showModal({
							content:err,
						title:'提示',
						showCancel:false,
						confirmText:'知道了'
					})
				}
				);
				////('confirm')
			},
			showTips(){
				
			}
		}
	}
</script>

<style lang="scss" scoped> 

	.slot-content {
	
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}
	.refundList-none{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.balanceHead{
		background-color: #fff;
		padding: 48rpx 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: 8rpx;
			p{
				color:#999;
				margin-right: 8rpx;
			}
		}
	}
	.balanceMain{
		background-color: #fff;
		margin-top: 24rpx;
		.balanceMain-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			border-bottom: 2rpx solid #f7f7f7;
			padding: 0 32rpx;
			.title{
				display: flex;
				align-items: center;
				span{
					margin-left: 16rpx;
					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: 6rpx;
				}
				.state0{
					color:#FF9600;
				}
				.state1{
					color:#00B962;
				}
				
				.state2{
					color:red;
				}
				.state3{
					color:red;
				}
			}
		}
		
	}
</style>