xiangqin/pages/index/indexjubao.vue

<template>
	<view class="index">
		<view class="" v-if="!success">
			<view class="" style="width: 690rpx;
background: #FFFFFF;
border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;">
				<view class="u-flex u-row-between" style="font-size: 28rpx;padding: 20rpx 0;" @click="show=true">
					<text style="white-space: nowrap;">举报类型</text>
					<view class="u-flex">
						<text>{{select!=null?select.title:'请选择举报类型'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-between" style="font-size: 28rpx;padding: 20rpx 0;" >
					<text style="white-space: nowrap;">举报人ID</text>
					<view class="u-flex">
						<input type="text" v-model="uuid" placeholder="请填写被举报人ID" style="text-align: right;">
					</view>
				</view>
			</view>
			<view class=""  style="width: 690rpx;
background: #FFFFFF;
border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;margin-top: 20rpx;">
				
			<view class="" style="font-size: 32rpx;color: #222;font-weight: 600;margin:20rpx 0">
				<text style="color: #FF2929;">*</text>具体情况
			</view>
			<textarea name="" id="" cols="30" rows="10" class="area" placeholder="请详细描述所遇到的问题…" maxlength="100" style="width: 650rpx;" v-model="content"></textarea>
			<view class="" style="font-size: 32rpx;color: #222;font-weight: 600;margin: 20rpx 0;">
				<text style="color: #FF2929;">*</text>证据截图（最多6张）
			</view>
			<view class="" style="font-size: 24rpx;color: #999999;margin-bottom: 20rpx;">
				直观的截图是非常有利的证据
			</view>
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				name="3"
				:multiple='false'
				:maxCount="6"
				:previewFullImage="true"
				
			></u-upload>
			</view>
			<view class="" style="margin-top: 78rpx;">
				<u-button text="提交"  shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)" @click="submit"></u-button>
			</view>
			<u-picker :show="show" title="举报原因" keyName="title" :columns="columns" @confirm='change' @cancel='cancel' :closeOnClickOverlay='true'>
			</u-picker>
		</view>
		<view class="u-flex-col" style="padding-top: 162rpx;"  v-else>
			<image src="../../static/profile/success.png" mode="" style="width: 112rpx;height: 112rpx;"></image>
			<text style="font-size: 36rpx;color: #000;font-weight: 600;margin: 40rpx;">提交成功</text>
			<text style="font-size: 24rpx;color: #888888;margin-bottom: 182rpx;">您的举报我们已经收到，请耐心等待处理结果</text>
			<u-button text="返回会员主页"  shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)" @click="back"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getReason()
		},
		data() {
			return {
				success:false,
				content:'',
				uuid:'',
				show: false,
				columns: [
					[]
				],
				select:null,
				fileList: [],
			}
		},
		methods: {
			submit(){
				if(!this.select){
					this.$u.toast('请选择举报类型')
					return
				}
				if(!this.uuid){
					this.$u.toast('请填写被举报人')
					return
				}
				if(!this.content){
					this.$u.toast('请填写举报原因')
					return
				}
				var arr=[]
				this.fileList.forEach(item=>{
					arr.push(item.url)
				})
				uni.$u.http.post('/api/index/report',{uuid:this.uuid,type:this.select.id,content:this.content,r_images:arr.toString()}).then(res => {
				if(res.code==1){
					this.success=true
				}
				
				})
			},
			getReason(){
				uni.$u.http.post('/api/index/report_problem').then(res => {
				this.columns=[res.data]
				
				})
			},
			back(){
					uni.navigateBack({
						
					})
			},
			change(e) {
				this.select = e.value[0]
				// // console.log(this.columns[0][this.current])
				this.show = false
			},
			cancel() {
				this.show = false
			},
			// 删除图片
							deletePic(event) {
								var that=this
								uni.showModal({
									title: '',
									content: '是否删除这张图片',
									confirmColor:'#FF3D3D',
									confirmText:'删除',
									success: function (res) {
										if (res.confirm) {
											that.fileList.splice(event.index, 1)
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
			
							},
							// 新增图片
							async afterRead(event) {
								// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
								let lists = [].concat(event.file)
								let fileListLen = this.fileList.length
								lists.map((item) => {
									this.fileList.push({
										...item,
										status: 'uploading',
										message: '上传中'
									})
								})
								for (let i = 0; i < lists.length; i++) {
									const result = await this.uploadFilePromise(lists[i].url)
									let item = this.fileList[fileListLen]
									this.fileList.splice(fileListLen, 1, Object.assign(item, {
										status: 'success',
										message: '',
										url: result
									}))
									fileListLen++
								}
							},
							uploadFilePromise(url) {
								return new Promise((resolve, reject) => {
									let a = uni.uploadFile({
										url: this.$url+'/api/Publics/uploadLocality', // 仅为示例，非真实的接口地址
										filePath: url,
										name: 'file',
										success: (res) => {
											setTimeout(() => {
												resolve(JSON.parse(res.data).data.url)
											}, 1000)
										}
									});
								})
							},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F2FD;
	}
	.area{
		box-sizing: border-box;
		padding: 20rpx;
		margin: 0 auto;
		width: 690rpx;
		height: 280rpx;
		background: #F3F3F3;
		border-radius: 20rpx;
	}
.index{
	padding: 30rpx;
}
</style>