|
|
@@ -0,0 +1,191 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="退余额" title-color="#101010" ></u-navbar>
|
|
|
+ <!-- 余额 -->
|
|
|
+ <view class="balance">
|
|
|
+ <view class="number">
|
|
|
+ 888.00
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 可退余额(元)
|
|
|
+ <text><image class="img" src="@/assets/img/riLine-question-line 1.svg" mode="" @click="open"></image></text >
|
|
|
+ </view>
|
|
|
+ <u-modal v-model="show" :content="content"></u-modal>
|
|
|
+ </view>
|
|
|
+ <!-- 记录 -->
|
|
|
+ <view class="record">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image src="@/assets/img/riFill-file-list-3-fill 1.svg" class="img" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 退费记录
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="record-group">
|
|
|
+ <view class="item">
|
|
|
+ <view class="way-state">
|
|
|
+ <view class="way">
|
|
|
+ 退至 对公账户
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ 退款中
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time-money">
|
|
|
+ <view class="time">
|
|
|
+ 01-01 00:01
|
|
|
+ </view>
|
|
|
+ <view class="money">
|
|
|
+ 888.00元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="way-state">
|
|
|
+ <view class="way">
|
|
|
+ 退至 对公账户
|
|
|
+ </view>
|
|
|
+ <view class="state state2">
|
|
|
+ 已退款
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time-money">
|
|
|
+ <view class="time">
|
|
|
+ 01-01 00:01
|
|
|
+ </view>
|
|
|
+ <view class="money">
|
|
|
+ 888.00元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 退款 -->
|
|
|
+ <view class="bottom">
|
|
|
+ <button class="btn" @click="open2">申请退款</button>
|
|
|
+ <u-modal v-model="show2" :content="content2" :show-cancel-button="true"></u-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ show2:false,
|
|
|
+ content: '本平台仅支持可退费金额全额退费。充值退款申请成功后退费金额将于5个工作日内退还至您的充值账户、对公转账金额将退还至您的对公账户。在本平台，三个月内的支付宝充值、微信支付可申请退费。退费成功后，您可以在退费记录查看退费信息和审核进度。',
|
|
|
+ content2:'是否提交退费申请？申请成功后退费金额将于5个工作日内退款至您的充值账户。对公转账余额退费，申请成功后工作人员将在5~10个工作日内退款至您的对公账户。'
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ open2() {
|
|
|
+ this.show2 = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 余额
|
|
|
+ .balance{
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ .number{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 72rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+
|
|
|
+ .img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 记录
|
|
|
+ .record{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ .icon{
|
|
|
+ .img{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-group{
|
|
|
+ .item{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ border-top: 1px solid rgba(221,221,221,1);
|
|
|
+ .way-state{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ .way{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .state{
|
|
|
+ color: rgba(255,123,0,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .state2{
|
|
|
+ color: rgba(0,185,98,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-money{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .time{
|
|
|
+ color: rgb(153,153,153);
|
|
|
+ }
|
|
|
+ .money{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 退款
|
|
|
+ .bottom{
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ .btn{
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
