hlm_pl_mall_h5/pages/member/vrrefund/VrRefundForm.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 form">
			<view class="div field-line-right" ><textarea class="order-message field-input"  v-model="buyer_message" placeholder="退款说明:" ></textarea></view>
            <view class="div" @click="showPopup('codeVisible')">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">可退款兑换码</text></flex-line>
            </view>
            <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submitInformation">保存</view></view>
        </view>
        <uni-popup background-color="#fff" ref="codeVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <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="hidePopup('codeVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                <checkbox-group @change="checkboxChange">
                        <label v-for="(item,index) in code_options" :key="index">
                            <checkbox :value="item.value" :checked="code==item.value" />{{item.label}}
                        </label>
                </checkbox-group>
				</scroll-view>
            </view>
        </view>
        </uni-popup>
    </view></member-base>
</template>

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

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

import MemberBase from '../MemberBase'

import { getCommonData, addVrRefund } from '../../../api/memberVrRefund'
import flexLine from '../../flexLine'
export default {
  components:{

  TitleHeader,

  MemberBase,

  flexLine,

  },
  name:'MemberVrRefundForm',
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      code: [],
      code_options: [],
      order_id: 0,
      buyer_message: '',
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  onLoad: function (option) {
    this.order_id=option.order_id
    getCommonData(this.order_id).then(res => {
      let code_list = res.result.code_list
      for (var i in code_list) {
        this.code_options.push({
          label: code_list[i].vr_code,
          value: code_list[i].rec_id+''
        })
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
  },
  methods:{
    checkboxChange(e){
      this.code = e.detail.value;
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    submitInformation () {
      addVrRefund(this.order_id, this.code, this.buyer_message).then(res => {
        uni.showToast({icon:'none',title: res.message})
        uni.navigateTo({url:'/pages/member/vrrefund/VrRefundList'})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }

  }
}
</script>
<style  lang="scss" scoped>
    .member-information {
        background: #fff;
        .form{background: #fff;padding:0 $pageSpace}
		.order-message{background: #fbfbfb;
			margin: .5rem 0;
			font-size: .7rem;
			padding: .5rem;
			height: 4rem;
			border: 0;
			box-sizing: border-box;
			width: 100%;
		}
    }

</style>