hlm_pl_mall_h5/pages/member/complaint/ComplaintForm.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="!complain_id">
			<!-- body -->
			<view class="div body">
				<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 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 class="div pt-10 pb-10"><view class="div common-btn ds-button-large"  @click="addComplaint">提交</view></view>
			</view>

			<!--投诉主题-->
			<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" 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 body">
				<flex-line class="menu-item" :show-border="true"><text class="span line-name">投诉信息</text></flex-line>
				<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"
									:show-indicators="true"
									:current="defaultindex"
									class="ui-common-swiper"
									@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 body" v-if="complaint.complain_state>20">
				<flex-line class="menu-item" :show-border="true"><text class="span line-name">申诉信息</text></flex-line>
				<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"
									:show-indicators="true"
									:current="defaultindex2"
									class="ui-common-swiper"
									@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 body">
				<flex-line class="menu-item" :show-border="true"><text class="span line-name">对话记录</text></flex-line>
				<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 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 class="div pt-10 pb-10"><view class="div common-btn ds-button-large"  @click="addComplaintTalk">提交</view></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></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 { addComplaint, uploadComplaintPic, getCommonData, addComplaintTalk, getComplaintInfo, getComplaintTalk } from '../../../api/memberCompliant'

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: '',
      complain_id: 0,
      order_id: 0,
      goods_id: 0,
      subject_options: [],
      subject_name: '',
      subject: '',
      image: [],
      file_value: {},
      complaint: {},
      complain_pic: [],
      appeal_pic: [],
      defaultindex: 0,
      defaultindex2: 0,
      talk_list: []
    }
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    tuiPictureCropper
  },
  onLoad: function (option) {
  this.complain_id=option.complain_id
      this.order_id=option.order_id
      this.goods_id=option.goods_id
      this.getData()
  },
  watch: {
    subject: function (subject) {
      let temp = subject.split(',')
      this.subject_name = temp[1]
      this.hidePopup('subjectVisible')
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight

  },
  methods:{
    radioChange(e){
      this.subject=e.detail.value
    },
    getData(){
    if (!this.complain_id) {
      getCommonData(this.order_id, this.goods_id).then(res => {
        let subject_options = res.result.subject_list

        for (var i in subject_options) {
          this.subject_options.push({
            label: subject_options[i].complainsubject_content,
            value: subject_options[i].complainsubject_id + ',' + subject_options[i].complainsubject_content
          })
        }
        this.subject = subject_options[0].complainsubject_id + ',' + subject_options[0].complainsubject_content
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
        uni.navigateBack({delta:1})
      })
    } else {
      getComplaintTalk(this.complain_id).then(res => {
        this.talk_list = res.result.talk_list
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
      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})
      })
    }
    },
    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.getData()
      }).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.order_id, this.goods_id, this.subject, this.content, file_value).then(res => {
        uni.navigateTo({url:'/pages/member/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.uuid
        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;}
    }
	.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>
<style lang="scss">
	.menu-content .mint-cell-title{flex:unset;width:4rem}
	.menu-content .mint-cell-value{flex:1}
</style>