微信小程序实现举报功能

lee2813

已于 2024-01-12 21:47:56 修改

阅读量6.1k

点赞数

分类专栏：微信小程序文章标签： java 小程序

于 2021-04-23 16:27:19 首次发布

本文链接：https://blog.csdn.net/Tom870223050/article/details/116059021

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了前端通过WXML和JS实现的举报表单，包括picker和textarea组件的使用，以及如何将用户选择和描述通过POST请求发送到后端UserController的/reportUser接口。后端成功保存举报信息后返回响应确认举报成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、后台接口
//userController.java

前端接收一个usersReportd对象，包含数据如下

@PostMapping("/reportUser")
	public IMoocJSONResult reportUser(@RequestBody UsersReport usersReport) throws Exception {

		// 保存举报信息
		userService.reportUser(usersReport);

		return IMoocJSONResult.errorMsg("举报成功...有你平台变得更美好...");
	}

二、前端
1.report.wxml

举报页面包含一个form表单，其中有一个picker组件用于选择举报的原因，一个textarea组件用于输入用户举报描述，一个submitReport方法提交表单信息

//report.js

reasonIndex用于获取picker组件根据选择reasonIndex值加载举报的原因，reasonContent用于获取textarea组件输入的用户举报描述，然后向后端发送request请求，后台进行数据库操作成功后回调举报成功信息：“举报成功…有你平台变得更美好…”。

submitReport:function(e) {
      var me = this;

      var reasonIndex = e.detail.value.reasonIndex;
      var reasonContent = e.detail.value.reasonContent;

      var user = app.getGlobalUserInfo();
      var currentUserId = user.id;
     //表示举报原因为必选项
      if (reasonIndex == null || reasonIndex == '' || reasonIndex == undefined) {
        wx.showToast({
          title: '选择举报理由',
          icon: "none"
        })
        return;
      }

      var serverUrl = app.serverUrl;
      wx.request({
        url: serverUrl + '/user/reportUser',
        method: 'POST',
        data: {
          dealUserId: me.data.publishUserId,
          dealVideoId: me.data.videoId,
          title: app.reportReasonArray[reasonIndex],
          content:reasonContent,
          userid: currentUserId
        },
        header: {
          'content-type': 'application/json', // 默认值
          'headerUserId': user.id,
          'headerUserToken': user.userToken
        },
        success:function(res) {
          wx.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
            success: function() {
              wx.navigateBack();
            }
          })
        }

      })

    }