dl_uniapp/pages/mine/set/report-form.vue

<template>
	<view class="suggest-content">
		<navigation-bar-vue title="举报" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="card-detail">
			<view class="item-field">
				<view class="item-lable">
					举报类型
				</view>
        <view class="item-value">
          <uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="dataTree"
                           v-model="dataObj.reportType" @change="onchange" @nodeclick="onnodeclick"
                           @popupopened="onpopupopened" @popupclosed="onpopupclosed">
          </uni-data-picker>
        </view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					举报内容
				</view>
				<view class="item-value">
					<textarea v-model="dataObj.content" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					上传凭证
				</view>
				<view class="item-value">
					<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile"
						limit="9"></uni-file-picker>
				</view>
			</view>
			<view class="item-field-row">
				<view class="item-lable is-required">
					举报同时拉黑
				</view>
				<view class="item-value">
					<switch color="#FC1F3E" checked @change="switch1Change" />
				</view>
			</view>
			<view class="item-field" style="align-items: center;">
				<view class="submit-box" @click="submitForm">告诉管理员</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {categoryTreeData} from '@/api/business/base.js';
	import {saveReport} from '@/api/business/notice.js';
  import upload from '@/utils/upload'
  import {toast} from '@/utils/common.js'
  import config from '@/config';
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
        uploadUrl: config.baseUrl,
				dataObj: {
					content: ""
				},
				sizeType: ['compressed'],
        dataTree:[],
				firstList: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					}
				],
				secondList: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					}
				],
				//图片数组
				fileList: [],
				//一级举报类型
				firstCode: "",
				//二级举报类型
				secondCode: "",
				//是否需要选择二级举报类型
				ifShowSecond: false,
        //被举报id
        reportUserId:'',
        //通告主id
        reportNoticeId:''
			}
		},

    onLoad(option){
		  this.reportUserId = option.userId
      this.reportNoticeId = option.noticeId
    },

    onShow(){
		  //获取分类树
		  this.getCategory()
    },

		methods: {
      onnodeclick(e) {
        console.log(e, 135);
      },
      onpopupopened(e) {
        console.log('popupopened');
      },
      onpopupclosed(e) {
        console.log('popupclosed');
      },
      onchange(e) {
        console.log('onchange:', e);
      },

      /**获取分类树*/
      getCategory(){
        categoryTreeData({code:'report_type'}).then(res => {
          if (res.code == 200) {
            this.dataTree = res.data
          }
        })
      },

			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			afterRead(file) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log(res, '215')
						this.fileList.push({
							url: res.url
						})
						console.log(this.fileList, 'fileList')
					})
				}
			},
			deleteFile(file, index) {
				this.fileList.splice(index, 1);
			},
			/**提交*/
			submitForm() {
			  //凭证图片
        if (this.fileList.length > 0) {
          this.dataObj.images = this.fileList
              .map(item => item.url.replace(this.uploadUrl, ''))
              .join(',');
        }
        this.dataObj.userType = '02'
        this.dataObj.reportUserId = this.reportUserId
        this.dataObj.reportUserType = '01'
        this.dataObj.reportNoticeId = this.reportNoticeId
        saveReport(this.dataObj).then(res=>{
          if (res.code ==200) {
            uni.showToast({
              icon: 'success',
              duration: 2000,
              title: '举报成功'
            });
            uni.navigateBack()
          }
        }).catch((e)=>{
          toast(e)
        })
      },
			/**
			 * 去我的建议列表
			 */
			goMySuggest() {
				this.$tab.navigateTo('/pages/mine/set/my-suggest')
			},
			change(e) {
				this.ifShowSecond = true
				console.log("e:", e);
			},
			changeSecond(e) {
				console.log("e:", e);
			}
		}
	}
</script>

<style lang="scss">
	.suggest-content {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.card-detail {
			border-top: 1rpx solid #F2F2F2;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: center;
			position: relative;

			.item-field-row {
				width: 100%;
				display: flex;
				align-items: self-start;
				justify-content: start;
				padding-bottom: 15rpx;

				.img-upload {
					width: 50%;
					margin: 10rpx 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.is-required {
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}

				.item-lable {
					width: 210rpx;
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: start;

				}

				.item-value {
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					input {
						width: 100%;
						padding-left: 20rpx;
						line-height: 1;
						height: 70rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.choose-add {
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					textarea {
						width: 100%;
						height: 150rpx;
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}
				}
			}

			.item-field {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: center;

				.item-lable {
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.item-value {
					width: 100%;

					input {
						padding-left: 20rpx;
						line-height: 1;
						height: 70rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.choose-add {
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					textarea {
						width: 100%;
						height: 150rpx;
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}
				}

				.submit-box {
					padding: 15rpx 0;
					background-color: #FC1F3E;
					color: white;
					width: 70%;
					border-radius: 10rpx;
					margin-top: 60rpx;
					text-align: center;
				}

				.my-suggest-dom {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>