123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <template>
- <view class="container flex_column_start_start">
- <view class="top flex_column_start_center">
- <view class="member_info flex_row_center_center">
- <view class="avatar" :style="{backgroundImage: 'url('+userCenterData.memberAvatar+')'}" />
- <text class="name">{{rechargeDetail.memberName}}</text>
- </view>
- <view :class="{amount:true,success:rechargeDetail.rechargeState==2,flex_row_center_center:true}">
- <text class="flag">+</text>
- <text>{{rechargeDetail.payAmount}}</text>
- </view>
- <view class="tip">{{$L('交易金额')}}</view>
- </view>
- <view v-for="(item,key,index) in detail" :key='index' class="detail_item flex_row_between_center">
- <text class="left">{{item.name}}</text>
- <text class="right">{{item.value}}</text>
- </view>
- <view v-if='rechargeDetail.payState==1' class="recharge_btn flex_row_center_center" @click="confirmRecharge">{{$L('继续充值')}}</view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- export default {
- data() {
- return {
- rechargeDetail: {}, //充值数据
- detail: [],
- rechargeId:'', //充值id
- };
- },
- onLoad(options) {
- if(options.rechargeId){
- this.rechargeId = options.rechargeId;
- this.getDetail(options.rechargeId);
- }
- },
- computed: {
- ...mapState(['userInfo', 'userCenterData'])
- },
- mounted() {
- },
- methods: {
- //获取充值详情
- getDetail(id) {
- this.$request({
- url: 'v3/member/front/balanceRecharge/detail',
- data: {
- key: this.userInfo.access_token,
- rechargeId: id,
- },
- }).then(res => {
- if (res.state == 200) {
- this.rechargeDetail = res.data;
- if (res.data.rechargeState == 2) {
- this.detail.push({
- name: '交易状态',
- value: res.data.payStateValue
- });
- this.detail.push({
- name: '交易方式',
- value: res.data.rechargeName
- });
- this.detail.push({
- name: '交易时间',
- value: res.data.createTime
- });
- this.detail.push({
- name: '交易单号',
- value: res.data.rechargeSn
- });
- this.detail.push({
- name: '交易流水号',
- value: res.data.tradeSn
- });
- } else {
- this.detail.push({
- name: '交易状态',
- value: res.data.payStateValue
- });
- this.detail.push({
- name: '交易时间',
- value: res.data.createTime
- });
- }
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //继续充值
- confirmRecharge() {
- uni.navigateTo({
- url: '/pages/recharge/recharge?rechargeSn=' + this.rechargeDetail.rechargeSn + '&payMethodType=rechargeDetail' + '&rechargeId=' + this.rechargeId,
- })
- },
- }
- }
- </script>
- <style lang='scss'>
- /* 高度自适应 $height为设计图上的高度*/
- @function calcAdaptHeight($height) {
- @return $height/1334*100*1vh;
- }
- page {
- background: #ffffff;
- width: 750rpx;
- margin: 0 auto;
- .container {
- margin-top: 20rpx;
- flex: 1;
- background: #fff;
- .top {
- width: 100%;
- height: calcAdaptHeight(354);
- border-bottom: 1rpx solid rgba(0, 0, 0, .1);
- .member_info {
- margin-top: calcAdaptHeight(95);
- .avatar {
- background-size: contain;
- background-position: center center;
- background-repeat: no-repeat;
- width: 51rpx;
- height: 51rpx;
- overflow: hidden;
- background-color: #F8F6F7;
- border-radius: 50%;
- }
- .name {
- color: $main-font-color;
- font-size: 32rpx;
- margin-left: 10rpx;
- }
- }
- .amount {
- color: $main-third-color;
- font-size: 48rpx;
- font-weight: bold;
- margin-top: calcAdaptHeight(40);
- &.success {
- color: #FF2121;
- }
- .flag {
- margin-top: -5rpx;
- margin-right: 3rpx;
- }
- }
- .tip {
- color: $main-third-color;
- font-size: 28rpx;
- margin-top: calcAdaptHeight(12);
- }
- }
- .detail_item {
- width: 100%;
- padding: calcAdaptHeight(50) 40rpx 0;
- .left {
- color: $main-font-color;
- font-size: 28rpx;
- }
- .right {
- color: $main-third-color;
- font-size: 26rpx;
- }
- }
- .recharge_btn {
- position: absolute;
- left: 50%;
- transform: translateX(-375rpx);
- bottom: 40rpx;
- width: 670rpx;
- margin: 0 40rpx;
- height: 88rpx;
- background: linear-gradient(-90deg, rgba(252, 29, 28, 1) 0%, rgba(255, 122, 24, 1) 100%);
- box-shadow: 0px 3rpx 20rpx 0px rgba(252, 31, 28, 0.26);
- border-radius: 44rpx;
- color: #fff;
- font-size: 36rpx;
- }
- }
- }
- uni-page-body {
- display: flex;
- height: 100%;
- }
- </style>
|