hlm_pl_mall_h5/pages/member/refund/RefundView.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">{{refund.reason_info}}</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>
            <view class="div" @click="showPopup('isshow')"><flex-line :show-border="true"><text class="span line-name">退款凭证</text><text class="span" slot="right">{{pic_list.length>0?'查看':''}}</text></flex-line></view>
            <flex-line :show-border="true"><text class="span line-name">商家审核</text><text class="span" slot="right">{{refund.seller_state}}</text></flex-line>
            <flex-line v-if="refund.seller_message" :show-border="true"><text class="span line-name">商家备注</text><text class="span" slot="right">{{refund.seller_message}}</text></flex-line>
            <flex-line :show-border="true"><text class="span line-name">平台审核</text><text class="span" slot="right">{{refund.admin_state}}</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>
        <uni-popup background-color="#fff" ref="isshow" v-if="pic_list.length>0">
            <view class="div preview-picture">
              <title-header />
                <view
                        class="div picture-header"
                        v-on:click="hidePopup('isshow')"
                >
					<text class="span">关闭</text
                    ><text class="span" v-if="pic_list"
                >{{ defaultindex + 1 }} / {{ pic_list.length }}</text
                >
                </view>

                <view class="div picture-body">
                    <swiper
                            :autoplay="false"
                            :show-indicators="true"
                            :current="defaultindex"
                            class="ui-common-swiper"
                            @change="handleChange"
                    >
                        <swiper-item
                                class="ui-common-swiper-item"
                                v-for="(item, index) in pic_list"
                                v-bind:key="index"
                        >
                            <image mode="aspectFit" class="img" v-bind:src="item" style="max-width: 100%;max-height: 100%" @click="setPopHeader()" />
                        </swiper-item>

                    </swiper>
                </view>
            </view>
        </uni-popup>
    </view></member-base>
</template>

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

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

import MemberBase from '../MemberBase'

import { getRefundInfo } from '../../../api/memberRefund'
import flexLine from '../../flexLine'
export default {
  components:{

  TitleHeader,

  MemberBase,

  flexLine,

  },
  name:'MemberRefundView',
  data(){
    return {
      navHeight: 0,
      refund_id: 0,
      refund: {},
      pic_list: [],
      defaultindex: 0
    }
  },
  mounted(){

  // #ifdef  MP-WEIXIN

  this.navHeight = uni.getMenuButtonBoundingClientRect().top

  // #endif

  },
  computed:{

  fontSize(){

    return getFontSize()

  },

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

  methods:{
      showPopup(id){
        this.$refs[id].open()
      },
      hidePopup(id){
        this.$refs[id].close()
      },
      goBack(){uni.navigateBack({delta:1})},
      /*
              handleChange: 轮播图改变时设置是否阻止事件冒泡
              @params: index 当前滑动的index
           */
      handleChange(e) {
          this.defaultindex = e.detail.current
      },
  }
}
</script>
<style  lang="scss" scoped>
    .main-content{background: #fff;padding:0 $pageSpace}
    .ui-common-swiper {
        width: 100%;
    }
    .ui-common-swiper-item{display: flex;align-content: center}
    .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;
        display: flex;
        flex-direction: column;
        .picture-header {
            color: #000;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            width: 100%;
            top: 0;
            padding-top:var(--status-bar-height);
            .span {
                font-size:$subFontSize;
                font-weight: normal;
      height:2.2rem;
      line-height:2.2rem;
			&:first-child {
        position: absolute;
                    cursor: pointer;
                    position: absolute;
                    left:0.75rem;
                    background-size:1.2rem;
                    display: inline-block;
                    height:2.2rem;
                    line-height:2.2rem;
                }
            }
        }
        .picture-body {
            flex:1;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
        }
    }

</style>