sugarpark-mini-program/pagesSub/report/report.vue

<template>
	<view class="container" ref="container">
		<view id="topnav" class="topnav flex-between" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`,'background-color':`rgba(21, 17, 38,${topNavAlpha})`}" v-if="!cover.isFullScreen">
			<view class="nav-item" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{topbarTitle}}
			</view>
			<view class="nav-item"></view>
		</view>
		<view class="tip-bar flex-between">
			<view class="tip-text">
				如果你在72小时内向她支付 解锁私聊/查看相册 费用，则核实举报属实后，系统将自动退回相关的费用。
			</view>
			<image :src="`${assetsUrl}report-close.png`" mode="widthFix" class="tip-close"></image>
		</view>
		<view class="choose-content">
			<view class="choose-title">
				请选择举报原因
			</view>
			<view class="choose-list">
				<view class="choose-item flex-start" v-for="(item,index) in chooses" :key="index" @click="chooseItem(index)"> 
					<view :class="chooseIndex===index?'choosed-icon':'choose-icon'"></view>
					<view class="choose-text">
						{{item}}
					</view>
				</view>
			</view>
			<view class="add-img-tip">
				请提供相关截图，一遍我们跟进核实
			</view>
			<view class="img-box flex-start">
				<image :src="item" v-for="(item,index) in imgs" :key="index" class="img" @click="previewImg(item,index)"></image>
				<image :src="`${assetsUrl}report-add.png`" mode="widthFix" class="img" @click="chooseMedia"></image>
			</view>
			<view class="textarea-box">
				<textarea placeholder="补充描述" class="textarea" v-model="textarea" @input="textareaInput"></textarea>
				<view class="num-box">
					{{inputCount}}/{{maxCount}}
				</view>
			</view>
		</view>
		<cover-view class="btn-box" @click="send">
			确认举报
		</cover-view>
	</view>
</template>

<script>
	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
	import {encode} from '@/util/base64.js'
	export default {
		data() {
			return {
				topbarTitle:'匿名举报',
				scrollHeight:0,
				topNavAlpha:0,
				assetsUrl:this.$util.assetsUrl,
				id:null,
				chooses:['发广告','骚扰/谩骂/不文明聊天','虚假照片','发布色情/低俗/不良内容','无法联系','TA是骗子','发布招嫖信息','未成年人'],
				chooseIndex:0,
				imgs:[],
				textarea:'',
				inputCount:0,
				maxCount:200
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			platForm(){
				return this.$store.state.platform
			},
			mineInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		onLoad(options) {
			this.id=options.id;
			console.log(this.id)
		},
		mounted() {
			
			
		},
		onPageScroll(e) {
			this.topNavAlpha=e.scrollTop/250;
			this.scrollTop=e.scrollTop;
		},
		onShareAppMessage(){
			return {
				title: '糖果公园',
				path: `/pages/login/login?share=${this.userInfo.inviteCode}`,
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseItem(index){
				this.chooseIndex=index;
			},
			chooseMedia(){
				const that=this;
				uni.chooseMedia({
					count: 1,
				    mediaType: ['image'],
				    sourceType: ['album', 'camera'],
				    maxDuration: 30,
				    camera: 'back',
				    success:(res)=>{
						console.log(res.tempFiles[0]);
						uni.showLoading({
							title:'正在上传',
							mask:true
						})
						const policyText=getPolicy();
						const policy=encode(JSON.stringify(policyText));
						const key=getKey(0,res.tempFiles[0].tempFilePath.split('.')[1]);
						that.$api.public.aliossToken({}).then(resuslt=>{
							let formData={
								key:key,
								policy:policy,
								OSSAccessKeyId:resuslt.data.accessKeyId,
								signature:computeSignature(resuslt.data.accessKeySecret,policy),
								'x-oss-security-token':resuslt.data.securityToken,
								success_action_status:'200'
							}
							uni.uploadFile({
								url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
								filePath:res.tempFiles[0].tempFilePath,
								name: 'file',
								header:{
									"Content-Type": "multipart/form-data"
								},
								formData: formData,
								success: (data) => {
								    if (data.statusCode === 200) {
									    uni.hideLoading();
									    let imageUrl=`${that.$store.state.videoCdn}/${key}`;
									    let user=JSON.parse(uni.getStorageSync('user'));
										this.imgs.push(imageUrl);
								    }
								},
								fail: err => {
								    console.log(err);
								  }
							})
						})
					}
				})
			},
			textareaInput(e){
				this.inputCount=e.detail.value.length;
			},
			previewImg(item,index){
				uni.previewImage({
					urls:this.imgs,
					current:this.imgs[index]
				})
			},
			send(){
				if(this.imgs.length===0){uni.showToast({icon:'none',title:'请上传截图'});return;}
				// if(this.textarea===''){uni.showToast({icon:'none',title:'请填写描述'});return;}
				this.$api.public.accuse({desc:this.textarea,imgs:this.imgs,reason:this.chooses[this.chooseIndex],uponUserId:this.id}).then(res=>{
					if(res.data.succ){
						uni.showToast({
							icon:'success',
							title:res.data.msg
						})
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	padding-top: 216rpx;
	padding-bottom: 60rpx;
	.topnav {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(100% - 20rpx);
		z-index: 100;
		margin-left: 10rpx;
		backdrop-filter: blur(10px);
		.nav-item {
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.tip-bar{
		background: linear-gradient(133deg, #7F5CFA 0%, #654AFE 100%);
		border-radius: 32rpx;
		margin: 0rpx 32rpx 32rpx 32rpx;
		padding: 16rpx 32rpx;
		.tip-text{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
			width: 550rpx;
			height: 64rpx;
		}
		.tip-close{
			width: 	32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			
		}
	}
	.choose-content{
		margin: 0 32rpx;
		border-radius: 16rpx;
		background-color: #1F1A30;
		padding: 32rpx;
		.choose-title{
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 44rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}
		.choose-item{
			margin-bottom: 32rpx;
			.choose-icon{
				width: 32rpx;
				height: 32rpx;
				background: #332D4C;
				border-radius: 32rpx;
			}
			.choosed-icon{
				background: #6C52F4;
				border: 4rpx solid #FFFFFF;
				width: 32rpx;
				height: 32rpx;
				border-radius: 32rpx;
				box-sizing: border-box;
			}
			.choose-text{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-left: 16rpx;
			}
		}
	}
	.btn-box{
		width: 622rpx;
		height: 104rpx;
		line-height: 104rpx;
		background: #6C52F4;
		border-radius: 56rpx;
		color: #ffffff;
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX( -311rpx );
		bottom: 44rpx;
		z-index: 999;
	}
	.add-img-tip{
		font-size: 22rpx;
		font-weight: 400;
		color: #7D7DA4;
		line-height: 32rpx;
		margin-top: 56rpx;
		margin-bottom: 32rpx;
	}
	.img-box{
		flex-wrap: wrap;
		
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-top: 7rpx;
			margin-right: 7rpx;
		}
	}
	.textarea-box{
		margin-top: 32rpx;
		padding: 32rpx;
		background-color: #332D4C;
		position: relative;
		
		.textarea{
			background-color: #332D4C;
			width: 100%;
			color: #ffffff;
		}
		.num-box{
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #7D7DA4;
			line-height: 32rpx;
		}
	}
}
</style>