hlm_pl_mall_h5/pages/member/inform/InformForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<member-base :show="false"><view class="div container">
		<!-- header -->
		<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" v-if="!inform_id">
		<!-- body -->
		<view class="div body">
			<view class="div" @click="showPopup('typeVisible')">
				<flex-line :is-link="true" :show-border="true"><text class="span line-name">举报类型</text><text class="span" slot="right">{{type_name}}</text></flex-line>
			</view>
			<view class="div" @click="showPopup('subjectVisible')">
				<flex-line :is-link="true" :show-border="true"><text class="span line-name">举报主题</text><text class="span" slot="right">{{subject_name}}</text></flex-line>
			</view>
			<flex-line class="menu-item"><text class="span">举报凭证</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="uploadInformPic" @delete="deleteInformPic"></uni-file-picker>
          </view>
			</view>
			<view class="div order-comment-body">

				<view class="div enter">
					<textarea
						placeholder="举报内容"
						v-model="content"
					></textarea>
				</view>
			</view>
			<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" v-on:click="addInform">提交</view></view>
		</view>

	<!--举报类型-->
	<uni-popup background-color="#fff" ref="typeVisible" 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('typeVisible')">
			</uni-nav-bar>
		</view>
		</view>
		<view class="div common-popup-content">
			<radio-group @change="radioChange(1,$event)" class="radio-wrapper">
			  <view class='radio-item' v-for="(item, index) in type_options" :key="index">
			    <radio :value="item.value" :checked="type==item.value" />
			    <text>{{item.label}}</text>
			  </view>
			</radio-group>
		</view>
	</view>
	</uni-popup>
		<!--举报主题-->
		<uni-popup background-color="#fff" ref="subjectVisible" 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('subjectVisible')">
				</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">
				<radio-group @change="radioChange(2,$event)" class='radio-wrapper'>  <view class='radio-item' v-for="(item, index) in subject_options" :key="index">    <radio :value="item.value" :checked="subject==item.value" />    <text>{{item.label}}</text>  </view></radio-group>
				</scroll-view>
			</view>
		</view>
		</uni-popup>
	</view>
		<view class="div" v-else>
			<!--举报信息-->
			<view class="div">
				<view class="div body">
					<flex-line :show-border="true"><text class="span line-name">举报商家</text><text class="span" slot="right">{{goods_info.store_name}}</text></flex-line>
					<flex-line :show-border="true"><text class="span line-name">举报商品</text><text class="span" slot="right">{{goods_info.goods_name}}</text></flex-line>
					<flex-line :show-border="true"><text class="span line-name">举报类型</text><text class="span" slot="right">{{subject_info.informsubject_type_name}}</text></flex-line>
					<flex-line :show-border="true"><text class="span line-name">举报主题</text><text class="span" slot="right">{{subject_info.informsubject_content}}</text></flex-line>
					<flex-line :show-border="true"><text class="span line-name">举报时间</text><text class="span" slot="right">{{$moment.unix(inform.inform_datetime).format('YYYY.MM.DD')}}</text></flex-line>
					<flex-line :show-border="true"><text class="span line-name">举报内容</text><text class="span" slot="right">{{inform.inform_content}}</text></flex-line>
					<view class="div" @click="showPopup('isshow')" v-if="inform_pic.length"><flex-line :show-border="true"><text class="span line-name">举报凭证</text><text class="span" slot="right">查看</text></flex-line></view>
					<flex-line :show-border="true"><text class="span line-name">举报状态</text><text class="span" slot="right">{{inform.inform_handle_type_text}}</text></flex-line>
					<flex-line v-if="inform.inform_handle_message" :show-border="true"><text class="span line-name">处理信息</text><text class="span" slot="right">{{inform.inform_handle_message}}</text></flex-line>
				</view>
				<uni-popup background-color="#fff" ref="isshow" v-if="inform_pic.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="inform_pic">{{ defaultindex + 1 }} / {{ inform_pic.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 inform_pic" v-bind:key="index">
									<image mode="aspectFit" class="img" v-bind:src="item" style="max-width: 100%;max-height: 100%" />
								</swiper-item>
							</swiper>
						</view>
					</view>
				</uni-popup>
			</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 { addInform, uploadInformPic, getCommonData, getInformInfo, getInformSubject } from '../../../api/memberInform'

import flexLine from '../../flexLine'
export default {
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      cropType: '',
      content: '',
      inform_id: 0,
      goods_id: 0,
      subject_options: [],
      subject_name: '',
      subject: '',
      type_options: [],
      type_name: '',
      type: '',
      image: [],
      file_value: {},
      inform: {},
      inform_pic: [],
      defaultindex: 0,
      subject_info: false,
      goods_info: false
    }
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    tuiPictureCropper
  },
  onLoad: function (option) {
    this.inform_id=option.inform_id
      this.goods_id=option.goods_id
    if (!this.inform_id) {
      getCommonData(this.goods_id).then(res => {
        let type_options = res.result.type_list

        for (var i in type_options) {
          this.type_options.push({
            label: type_options[i].informtype_name,
            value: type_options[i].informtype_id + ',' + type_options[i].informtype_name
          })
        }
        this.type = type_options[0].informtype_id + ',' + type_options[0].informtype_name
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    } else {
      getInformInfo(this.inform_id).then(res => {
        this.inform = res.result.inform_info
        this.subject_info = res.result.subject_info
        this.inform_pic = res.result.inform_pic
        this.goods_info = res.result.goods_info
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  watch: {
    subject: function (subject) {
      let temp = subject.split(',')
      this.subject_name = temp[1]
      this.hidePopup('subjectVisible')
    },
    type: function (type) {
      let temp = type.split(',')
      this.type_name = temp[1]
      this.hidePopup('typeVisible')
      getInformSubject(temp[0]).then(res => {
        let subject_options = res.result.inform_subject_list
        this.subject_options = []
        for (var i in subject_options) {
          this.subject_options.push({
            label: subject_options[i].informsubject_content,
            value: subject_options[i].informsubject_id + ',' + subject_options[i].informsubject_content
          })
        }
        this.subject = subject_options[0].informsubject_id + ',' + subject_options[0].informsubject_content
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight
  },
  methods:{
    radioChange(i,e){
      switch(i){
      case 1:
      this.type=e.detail.value
      break
      case 2:
      this.subject=e.detail.value
      break
      }

    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    handleChange (e) {
      this.defaultindex = e.detail.current
    },
    addInform () {
      var file_value = []
        for (var i in this.file_value) {
          file_value.push(this.file_value[i])
        }
      addInform(this.goods_id, this.subject, this.content, file_value).then(res => {
        uni.navigateTo({url:'/pages/member/inform/InformList'})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
      useCrop(res) {
        let index = this.cropType
        var formdata = {
          filePath: res.url,
          name: 'inform_pic'
        }
        uploadInformPic(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()
        })
      },
      deleteInformPic(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()
      },
    uploadInformPic(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;}
    }
	.ui-common-swiper {
		width: 100%;
	}
	.ui-common-swiper-item{display: flex;align-content: center}
	.common-score-wrapper .back{display: block}
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	.body {
		background: #fff;
		padding:0 $pageSpace;
		.order-comment-body {
			background: rgba(255, 255, 255, 1);
			.body-list {
				display: flex;
				justify-content: left;
				align-content: center;
				align-items: center;
				padding-bottom:0.75rem;
				border-bottom: 1px solid #e8eaed;
			}
			.image {
				width:3.7rem;
				height:3.7rem;
				flex-shrink: 0;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.comment {
				flex-basis: 100%;
				padding-left:0.75rem;
				.span {
					font-size:$h2;
					color: #7c7f88;
					text-align: left;
					display: block;
				}
				.ul {
					display: flex;
					justify-content: space-between;
					align-content: center;
					align-items: center;
					margin-top:1.2rem;
					.li {
						.img {
							width:1rem;
							height:1rem;
							flex-shrink: 0;
						}
						label {
							font-size:$subFontSize;
							color: rgba(78, 84, 93, 1);
							font-weight: normal;
						}
					}
				}
			}
			.enter {
				padding-top:0.75rem;
				textarea {
					width: 100%;
					height: 6rem;
					background: rgba(247, 249, 250, 1);
					border: 1px solid #f7f9fa;
					box-sizing: border-box;
					padding: 0.5rem 0 0 0.5rem;
					font-size:$subFontSize;
					-webkit-appearance: none;
					outline: none;
				}
			}
		}
	}
}
	.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;
        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;
					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;
		}
	}
	.radio-wrapper{
		display: block;
		padding: 0 $pageSpace;
		.radio-item{
			padding: .5rem 0;
			border-bottom: 1px dashed #f5f5f5;
		}
	}

</style>