hlm_pl_mall_h5/pages/member/refund/RefundForm.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>
            <flex-line><text class="span line-name">退款凭证</text></flex-line>
            <view class="div image-wrapper">
                <view class="div user-avatar">
            <uni-file-picker v-model="image" fileMediatype="image" mode="grid" :limit="3" :auto-upload="false"
              @select="uploadRefundImage" @delete="deleteRefundImage"></uni-file-picker>
          </view>
            </view>
            <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large mt-10" @click="submitInformation">保存</view></view>
        </view>
        <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper>
    </view></member-base>
</template>

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

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

import MemberBase from '../MemberBase'

import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"

import { uploadRefundImage, addRefundAll } from '../../../api/memberRefund'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    tuiPictureCropper
  },
  name:'MemberRefundForm',
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      cropType: '',
      order_id: 0,
      image: [],
      buyer_message: '',
      file_value: {}
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  onLoad: function (option) {
    this.order_id=option.order_id
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    submitInformation () {
      var file_value = []
        for (var i in this.file_value) {
          file_value.push(this.file_value[i])
        }
      addRefundAll(this.order_id, this.buyer_message, file_value).then(res => {
        uni.showToast({icon:'none',title: res.message})
        uni.navigateTo({url:'/pages/member/refund/RefundList'})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
      useCrop(res) {
        let index = this.cropType
        var formdata = {
          filePath: res.url,
          name: 'refund_pic'
        }
        uploadRefundImage(formdata).then(res => {
          this.file_value[index] = res.result.file_name
          this.image[index] = [{
            name: index,
            extname: 'jpg',
            url: res.result.pic
          }]
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
          uni.hideLoading()
        }).catch(function(error) {
          uni.showToast({
            icon: 'none',
            title: error.message
          })
          uni.hideLoading()
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
        })
      },
      deleteRefundImage(event) {
        let file = event.tempFile
        var index = file.uuid
        delete this.file_value[index]
      },
      cropReady() {
        this.cropperOption.img = this.cropperOption.imgUrl
      },
      cropBack(){
        this.cropperOption.imgUrl=''
        this.$forceUpdate()
      },
    uploadRefundImage(event) {
        let that = this
        let file = event.tempFiles[0]
        this.cropType = file.uuid
          that.cropperOption.imgUrl = file.path
          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
    }
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .form{background: #fff;padding:0 $pageSpace}
  .member-information {
    background: #fff;
	.order-message{
		background: #fbfbfb;
		margin: .5rem 0;
		font-size: .7rem;
		padding: .5rem;
		height: 4rem;
		border: 0;
		box-sizing: border-box;
		width: 100%;
	}
  }

</style>