mianxueyoupin/pages/user/complaint/complaint.vue

<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="complaint-title">
		    <view>举报{{typeName}}理由 </view>
			<view class="complaint-quick text-red">
				<text class="margin-right-xs">{{typeName}}ID:{{complaintId}}</text>
			</view>
		</view>
		<view class="cu-form-group">
			<picker @change="pickerChange" :value="complaint.reason" :range="picker">
				<view class="picker">
					{{complaint.reason>-1?picker[complaint.reason]:'请选择举报理由'}}
				</view>
			</picker>
		</view>
		
		
		<view class="complaint-title">
		    <text>{{typeName}}举报截图</text>
		</view>
		<view class="cu-bar bg-white">
			<view class="action">
				点击预览图片
			</view>
			<view class="action">
				{{complaint.images.length}}/8
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(image,index) in complaint.images" :key="index">
				 <image :src="image" @tap="previewImage(complaint.images, index)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="close(index)">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImg" v-if="complaint.images.length<8">
					<text class="wlIcon-31paishe"></text>
				</view>
			</view>
		</view>
		<view class="complaint-title">
		    <view>{{typeName}}举报详情</view>
		</view>
		<view class="cu-form-group">
			<textarea maxlength="-1" v-model="complaint.content" placeholder-class="placeholder" placeholder="请详细描述举报内容..."></textarea>
		</view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button class="cu-btn wanl-bg-redorange lg" @tap="submit">发起举报</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				picker: ['虚假交易', '诈骗欺诈', '收到空包裹', '假冒盗版', '泄露信息', '违禁物品', '未按成交价交易', '未按约定时间发货', '垃圾营销', '涉黄信息', '不实信息', '人身攻击', '违法信息', '诈骗信息'],
				complaintId: 0,
				typeName: '',
				complaint:{
					type: 0,
					complaint_user_id: 0,
					complaint_shop_id: 0,
					complaint_goods_id: 0,
					images: [],
					content: '',
					reason: -1
				}
			};
		},
		onLoad(option) {
			this.complaint.type = option.type;
			this.complaintId = option.id;
			if(option.type == 0){
				this.typeName = '用户';
				this.complaint.complaint_user_id = option.id;
			}else if(option.type == 1){
				this.typeName = '商品';
				this.complaint.complaint_goods_id = option.id;
			}else if(option.type == 2){
				this.typeName = '店铺';
				this.complaint.complaint_shop_id = option.id;
			}else if(option.type == 3){
				this.typeName = '拼团';
				this.complaint.complaint_goods_id = option.id;
			}
		},
		methods: {
			pickerChange(e){
				if(e.detail.value == -1){
					this.complaint.reason = 0;
				}else{
					this.complaint.reason = e.detail.value;
				}
			},
			chooseImg() { //选择图片
			    uni.chooseImage({
			        sourceType: ["camera", "album"],
			        sizeType: "compressed",
			        count: 8 - this.complaint.images.length,
			        success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													this.complaint.images.push(JSON.parse(data.data).data.fullurl);
												},
												fail: error =>{
													this.$wanlshop.msg(JSON.parse(error.data).msg);
												}
											});
										}
									});
								}
							}
						});
			        }
			    })
			},
			close(e){
			    this.complaint.images.splice(e,1);
			},
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			async submit() { 
				if(this.complaint.reason == -1){
					this.$wanlshop.msg('请选择举报理由');
					return false;
				}
				if(!this.complaint.content){
					this.$wanlshop.msg('请填写举报内容');
					return false;
				}
			    await uni.request({
			    	url: '/wanlshop/complaint/add',
					method: 'POST',
					data: this.complaint,
			    	success: res => {
			    		this.$wanlshop.to('/pages/page/success?type=complaint');
			    	}
			    });
			}
		}
	}
</script>

<style>
	.complaint-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 25rpx;
		color: #666;
	}
	.complaint-star-view.complaint-title {
		justify-content: flex-start;
		margin: 0;
	}
	.cu-form-group picker .picker{
		text-align: left;
	}
	.solids::after {
	    border: 2px dashed #c5c5c5;
	}
	.wanlian.cu-bar.tabbar {
		background-color: transparent;
	}
	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}
	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>