hlm_pl_mall_store/pages/seller/complaint/ComplaintForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<seller-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">
			<view class="div menu-item"><text class="span line-name">投诉信息</text></view>
			<view class="div menu-content">
        <flex-line :show-border="true"><text class="span line-name">投诉状态</text><text class="span" slot="right">{{complaint.complain_state_text}}</text></flex-line>
				<flex-line :show-border="true"><text class="span line-name">投诉人</text><text class="span" slot="right">{{complaint.accused_name}}</text></flex-line>
				<flex-line :show-border="true"><text class="span line-name">投诉主题</text><text class="span" slot="right">{{complaint.complain_subject_content}}</text></flex-line>
				<flex-line :show-border="true"><text class="span line-name">投诉时间</text><text class="span" slot="right">{{$moment.unix(complaint.complain_datetime).format('YYYY.MM.DD')}}</text></flex-line>
				<flex-line :show-border="true"><text class="span line-name">投诉内容</text><text class="span" slot="right">{{complaint.complain_content}}</text></flex-line>
				<view class="div" @click="showPopup('isshow')" v-if="complain_pic.length"><flex-line :show-border="true"><text class="span line-name">投诉凭证</text><text class="span" slot="right">查看</text></flex-line></view>
			</view>
			<uni-popup background-color="#fff" ref="isshow" v-if="complain_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="complain_pic"
					>{{ defaultindex + 1 }} / {{ complain_pic.length }}</text
					>
					</view>

					<view class="div picture-body">
						<swiper
								:autoplay="false"
								:indicator-dots="true"
								:current="defaultindex"
								class="ui-common-swiper"
								:prevent="false"
								:stop-propagation="true"
								@change="handleChange"
						>
							<swiper-item
									class="ui-common-swiper-item"
									v-for="(item, index) in complain_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 class="div" v-if="complaint.complain_state>20">
			<view class="div menu-item"><text class="span line-name">申诉信息</text></view>
			<view class="div menu-content">
				<flex-line :show-border="true"><text class="span line-name">申诉时间</text><text class="span" slot="right">{{$moment.unix(complaint.appeal_datetime).format('YYYY.MM.DD')}}</text></flex-line>
				<flex-line :show-border="true"><text class="span line-name">申诉内容</text><text class="span" slot="right">{{complaint.appeal_message}}</text></flex-line>
				<view class="div" @click="showPopup('isshow2')" v-if="appeal_pic.length"><flex-line :show-border="true"><text class="span line-name">申诉凭证</text><text class="span" slot="right">查看</text></flex-line></view>
			</view>
			<uni-popup background-color="#fff" ref="isshow2" v-if="appeal_pic.length>0">
				<view class="div preview-picture">
          <title-header />
					<view
							class="div picture-header"
							v-on:click="hidePopup('isshow2')"
					>
					<text class="span">关闭</text
					><text class="span" v-if="appeal_pic"
					>{{ defaultindex2 + 1 }} / {{ appeal_pic.length }}</text
					>
					</view>

					<view class="div picture-body">
						<swiper
								:autoplay="false"
								:indicator-dots="true"
								:current="defaultindex2"
								class="ui-common-swiper"
								:prevent="false"
								:stop-propagation="true"
								@change="handleChange2"
						>
							<swiper-item
									class="ui-common-swiper-item"
									v-for="(item, index) in appeal_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 class="div" v-if="complaint.complain_state==20">
		<!-- body -->
		<view class="div body">
			<flex-line class="div"><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="uploadComplaintPic" @delete="deleteComplaintPic"></uni-file-picker>
          </view>
			</view>
			<view class="div order-comment-body">

				<view class="div enter">
					<textarea
						placeholder="申诉内容"
						v-model="content"
					></textarea>
				</view>
			</view>
		</view>
	<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large"  @click="addComplaint">提交</view></view>
</view>
		<view class="div" v-else>
			<!--对话-->
			<view class="div body">
				<view class="div menu-item"><text class="span line-name">对话记录</text></view>
        <view class="div menu-content"><flex-line v-for="(item,index) in talk_list" :key="index" :show-border="true"><text class="span line-name">{{item.talk}}</text></flex-line></view>
			</view>
			<view class="div" v-if="complaint.complain_state>20 && complaint.complain_state<99">
			<view class="div body">
				<view class="div order-comment-body">

					<view class="div enter">
					<textarea
							placeholder="对话内容"
							v-model="content"
					></textarea>
					</view>
				</view>
			</view>
				<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large"  @click="addComplaintTalk">提交</view></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>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'
import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
import { getComplaintInfo, addComplaint, uploadComplaintPic, addComplaintTalk, getComplaintTalk } from '../../../api/sellerCompliant'

import flexLine from '../../flexLine'
export default {
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      cropType: '',
      content: '',
      complain_id: 0,
      subjectVisible: false,
      subject_options: [],
      subject_name: '',
      subject: '',
      image: [],
      file_value: {},
      complaint: {},
      complain_pic: [],
      appeal_pic: [],
      defaultindex: 0,
      defaultindex2: 0,
      talk_list: []
    }
  },
  onLoad: function (option) {
	  this.complain_id	= option.complain_id
	  getComplaintInfo(this.complain_id).then(res => {
	  	this.complaint = res.result.complain_info
		  this.complain_pic = res.result.complain_pic
		  this.appeal_pic = res.result.appeal_pic
	  }).catch(function (error) {
	  	uni.showToast({icon:'none',title: error.message})
	  })
	  this.getComplaintTalk()
  },
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    tuiPictureCropper
  },
  watch: {
	  subject: function (subject) {
	  	let temp = subject.split(',')
      this.subject_name = temp[1]
      this.subjectVisible = false
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
    getComplaintTalk(){
    getComplaintTalk(this.complain_id).then(res => {
		  this.talk_list = res.result.talk_list
	  }).catch(function (error) {
		  uni.showToast({icon:'none',title: error.message})
	  })
    },
	  showPopup(id){
	    this.$refs[id].open()
	  },
	  hidePopup(id){
	    this.$refs[id].close()
	  },
	  goBack(){uni.navigateBack({delta:1})},
	  handleChange (e) {
		  this.defaultindex = e.detail.current
	  },
	  handleChange2 (e) {
		  this.defaultindex2 = e.detail.current
	  },
	  addComplaintTalk () {
		  addComplaintTalk(this.complain_id, this.content).then(res => {
			  this.getComplaintTalk()
		  }).catch(function (error) {
			  uni.showToast({icon:'none',title: error.message})
		  })
	  },
	  addComplaint () {
        var file_value = []
        for (var i in this.file_value) {
          file_value.push(this.file_value[i])
        }
		  addComplaint(this.complain_id, this.content, file_value).then(res => {
        uni.navigateTo({url:'/pages/seller/complaint/ComplaintList'})
		  }).catch(function (error) {
			  uni.showToast({icon:'none',title: error.message})
		  })
	  },
	  useCrop(res) {
        let index = this.cropType
        var formdata = {
          filePath: res.url,
          name: 'complain_pic'
        }
        uploadComplaintPic(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()
        })
      },
      deleteComplaintPic(event) {
        let file = event.tempFile
        var index = file.name
        delete this.file_value[index]
      },
      cropReady() {
        this.cropperOption.img = this.cropperOption.imgUrl
      },
	  cropBack(){
	    this.cropperOption.imgUrl=''
	    this.$forceUpdate()
	  },
    uploadComplaintPic(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;}
    }
	.common-header-wrap .common-header{box-shadow: unset}
	.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 {
		top: 2.2rem;
		width: 100%;
		padding: 0 $pageSpace;
		background-color: #fff;
		box-sizing: border-box;
		.order-comment-body {
			background: rgba(255, 255, 255, 1);
			padding: 0.75rem 0;
			.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.75rem;
				height: 3.75rem;
				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: 0.95rem;
							height: 0.95rem;
							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: 11rem;
					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;
				}
			}
		}
	}
}
	.image-wrapper{background-color: #fff;}
	
	.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;
      padding-top:var(--status-bar-height);
			.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;
		}
	}
	.menu-item{padding:0 $pageSpace;line-height:2rem;font-size:$h2;}
  .menu-content{background:#fff;padding:0 $pageSpace;}

</style>