hlm_pl_mall_h5/pages/member/vrrefund/VrRefundView.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div member-information">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="退款详情" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
            <flex-line :show-border="true"><text class="span line-name">退款编号</text><text class="span" slot="right">{{refund.refund_sn}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">退款兑换码</text><text class="span" slot="right">{{code_array.join(',')}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">退款金额</text><text class="span" slot="right">{{refund.refund_amount}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">退款说明</text><text class="span" slot="right">{{refund.buyer_message}}</text></flex-line>
            <flex-line v-if="refund.admin_message" :show-border="true"><text class="span line-name">平台备注</text><text class="span" slot="right">{{refund.admin_message}}</text></flex-line>
        </view>

    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'

import TitleHeader from '../../TitleHeader'

import MemberBase from '../MemberBase'

import { getVrRefundInfo } from '../../../api/memberVrRefund'
import flexLine from '../../flexLine'
export default {
  components:{

  TitleHeader,

  MemberBase,

  flexLine,

  },
  name:'MemberVrRefundView',
  data(){
    return {
      navHeight: 0,
      refund_id: 0,
      refund: {},
        code_array:[],
    }
  },
  mounted(){

  // #ifdef  MP-WEIXIN

  this.navHeight = uni.getMenuButtonBoundingClientRect().top

  // #endif

  },
  computed:{

  fontSize(){

    return getFontSize()

  },

  },
  onLoad: function (option) {
    this.refund_id=option.refund_id
    getVrRefundInfo(this.refund_id).then(res => {
      this.refund = res.result.refund
      this.code_array = res.result.code_array
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  methods:{

  goBack(){uni.navigateBack({delta:1})},

  }
}
</script>
<style  lang="scss" scoped>
    .main-content{background: #fff;padding:0 $pageSpace}
    .swipe-wrapper {
        width: 100%;
    }
    .mint-popup {
        width: 100%;
        height: 100%;
        background-color: #000;
    }
    .mint-swipe,
    .mint-swipe-items-wrap {
        position: static;
    }
    .preview-picture {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000;
        .picture-header {
            height:2.2rem;
            color: #000;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            width: 100%;
            top: 0;
            .span {
                font-size:$subFontSize;
                font-weight: normal;
                &:first-child {
                    cursor: pointer;
                    position: absolute;
                    left:0.75rem;
                    background-size:1.2rem;
                    display: inline-block;
                    height:2.2rem;
                    line-height:2.2rem;
                }
            }
        }
        .picture-body {
            position: absolute;
            top:2.2rem;
            bottom:0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
        }
    }

</style>