my-h5/pages/feedback/report.vue

<template>
	<view class="view-page">
		<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}"
			:navTitle="'举报'" bgColor="#fff" :emitBack="true" @backEvent="back">
		</navBar>
		<view class="content">
			<uni-forms ref="baseForm" :modelValue="formData" label-position="top">
				<uni-forms-item label="举报类型" required>
					<view class="view-picker">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="typeIndex" :range="array">
									<view class="uni-input">{{array[typeIndex]}}</view>
								</picker>
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="举报原因" required>
					<view class="">
						<uni-easyinput type="textarea" autoHeight v-model="formData.content"
							placeholder="请输入举报原因"></uni-easyinput>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="view-picker">
				<uploadImage ref="uploadImage" @changeImageList="successUpload"></uploadImage>
				<!-- <uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker> -->
			</view>
			<view class="flex-line w-fill mt-24 color-3" style="justify-content: center;">
				<view class="comfirmButton flex-line" @click="comfirm">
					确认举报
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logout from '@/static/image/union/logout.png'
	import logo from '@/static/image/logo.png';
	import uploadImage from '@/component/uploadImage.vue'
	export default {
		components: {
			headerHeight,
			uploadImage,
			navBar
		},
		data() {
			return {
				formData: {
					content: ""
				},
				optionsProps: {

				},
				array: [],
				typeList: [],
				statusBarHeight: 0,
				typeIndex: 0,
				messageText: "",
				msgType: "success"
			}
		},
		watch: {
			typeIndex(val) {
				console.log(val)
			}
		},
		onLoad(options) {
			// fromType 1-用户，2房间，3动态  fromId对应的id
			const {
				id,
				fromType,
				fromId,
				h
			} = options
			this.optionsProps = {
				id,
				fromType,
				fromId
			}
			uni.setStorageSync('token', id)
			this.statusBarHeight = h
			uni.setStorageSync('BarHeight', h)
			if (uni.getStorageSync('token')) {
				this.getTypeList()
			}
		},
		methods: {
			back() {
				this.closeWeb()
			},
			closeWeb() {
				// 关闭页面
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'closeWeb'
					});
				} else if (platform === 'android') {
					window.Android.closeWeb();

				}
			},
			async getTypeList() {
				http.get('/api/Report/report_type_list', {
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						code,
						data
					} = response
					this.typeList = data
					this.array = data.map(ele => {
						return ele.type
					})
					this.typeIndex = 0
				})
			},
			bindPickerChange({
				detail
			}) {
				// console.log()
				this.typeIndex = detail.value
			},
			comfirm() {
				const formData = {
					type_id: this.typeList[this.typeIndex].id,
					report_type: this.optionsProps.fromType || 1,
					content: this.formData.content || '',
					image: this.formData.image,
					from_id: this.optionsProps.fromId || ""
				}
				http.post('/api/Report/report', {
					...formData,
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code) {
						this.messageText = `提交成功`
						this.$refs.message.open()
						this.msgType = 'success'
						this.formData = {
							content: "",
							image: "",
						}
						this.$refs.uploadImage.clearImage()
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
				})
			},
			successUpload(list) {
				const imageList = list.map(ele => {
					return ele.tempFilePath
				})
				if (imageList && imageList.length) {
					this.formData.image = imageList.join(',')
				} else {
					this.formData.image = ""
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		border: 0;
		border-radius: 22rpx;
	}

	.view-page {
		font-family: Source Han Sans CN, Source Han Sans CN;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		// background-image: url('@/static/image/help/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;

		.content {
			padding: 0 24rpx;
			margin-top: 24rpx;

			.view-picker {
				background-color: #fff;
				padding: 21rpx;
				border-radius: 14rpx;
			}

			.comfirmButton {
				width: 600rpx;
				height: 84rpx;
				background: var(--primary-color);
				font-size: var(--font-button-size);
				color: var(--font-button-color);
				border-radius: 106rpx;
				justify-content: center;
			}
		}
	}
</style>