merchapp/java-mall-app-shop-admin/pages/IM/complaint.vue

<template>
  <view class="complaint-container">
    <u-cell
      title="举报"
      :isLink="true"
      class="cell"
      @click="showComplaintPopup = true"
    ></u-cell>
    <u-popup
      class="complaint-popup"
      zIndex="996"
      :show="showComplaintPopup"
      mode="center"
      closeable
      @close="showComplaintPopup = false"
    >
      <view class="complaint-popup-content">
        <view class="complaint-popup-title">举报</view>
        <u-radio-group
          v-model="radiovalue1"
          placement="column"
          class="radio-group"
        >
          <u-radio
            class="radio-item"
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in radioList"
            :key="index"
            :label="item.name"
            :name="item.id"
          ></u-radio>
        </u-radio-group>
        <u--textarea
          class="textarea"
          v-model="reportContent"
          placeholder="请仔细描述举报对象的恶意行为"
          :maxlength="200"
          height="150"
          count
        ></u--textarea>
        <imgUpload
          class="imgUpload"
          :imgArr="primaryImg"
          uploadImgCount="3"
          imgCount="3"
          :imgSize="8"
          :header="header"
          :async="true"
          :config="config"
          :isAdd="true"
          url="https://mall.gpxscs.cn/mobile/shop/oss/upload"
          :formData="formData"
          @result="handerResultUrl"
        ></imgUpload>
        <view class="phone">
          <view class="lable">联系方式</view>
          <view class="input">
            <u--input
              placeholder="请输入您的手机号码"
              border="surround"
              v-model="phone"
              :maxlength="11"
            ></u--input>
          </view>
        </view>
        <view class="btn-content">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            @click="handerlSubmit"
          >
            提交
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast" class="toast"></u-toast>
  </view>
</template>

<script>
import imgUpload from "@/components/poiuy-uImgUpload/imgUpload.vue";
import { GetSubmitReport } from "@/api/complaint";
export default {
  components: {
    imgUpload,
  },
  data() {
    return {
      showComplaintPopup: false,
      radioList: [
        {
          id: "1",
          name: "该账号发布违规违法信息",
        },
        {
          id: "2",
          name: "该账号对我进行辱骂骚扰",
        },
        {
          id: "3",
          name: "该账号发布淫秽色情内容",
        },
        {
          id: "4",
          name: "该账号发布违规违法内容",
        },
        {
          id: "5",
          name: "其他",
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: "1",
      reportContent: "",
      phone: "",
      header: [],
      config: {
        delIcon: "", //删除图片icon
        resultTip: true, //结果提示
        resultType: "1", //结果展示类型
        loadIcon: "", //加载时的图标
        loadText: "", //加载时的文字
      },
      primaryImg: [],
      formData: {
        perm_key: "",
      },
      ImItemInfo: {
        username: "",
        user_id: "",
      },
    };
  },
  onShow() {
    this.formData.perm_key = uni.getStorageSync("ukey") || "";
  },
  onLoad(options) {
    if (options.reciprocalImInfo) {
      this.ImItemInfo = JSON.parse(options.reciprocalImInfo);
    }
  },
  computed: {},

  methods: {
    handerResultUrl(e, type) {
      this.primaryImg = e.all;
    },
    async handerlSubmit() {
      if (this.primaryImg.length <= 0) {
        this.$refs.uToast.show({
          message: "请上传凭证图片",
          type: "error",
          duration: 1000,
        });
        return;
      }

      if (!this.reportContent) {
        this.$refs.uToast.show({
          message: "请填写举报对象的恶意行为",
          type: "error",
          duration: 1000,
        });
        return;
      }

      if (this.phone && !uni.$u.test.mobile(this.phone)) {
        this.$refs.uToast.show({
          message: "请填写正确的手机号",
          type: "error",
          duration: 1000,
        });
        return;
      }

      let radioItem = this.radioList.find(
        (item) => item.id == this.radiovalue1
      );

      let params = {
        reportCategory: this.radiovalue1,
        reportContent: this.reportContent,
        reportedNickname: this.ImItemInfo.username,
        reportedUserId: this.ImItemInfo.friend_id,
        reporterPhone: this.phone,
        evidenceImages: JSON.stringify(
          this.primaryImg.map((item, index) => {
            return {
              url: item.url,
              description: radioItem.name + index,
            };
          })
        ),
      };
      let res = await GetSubmitReport(params);
      if (res && res.status == 200) {
        this.showComplaintPopup = false;
        this.$refs.uToast.show({
          message: "提交成功",
          type: "succeed",
          duration: 1000,
        });
        this.radiovalue1 = "1";
        this.reportContent = "";
        this.primaryImg = [];
        this.phone = "";
      }
      this.showComplaintPopup = false;
    },
  },
};
</script>

<style lang="scss">
.complaint-container {
  @import "@/styles/variables.scss";
  .cell {
    background: #fff;
  }

  .complaint-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    ::v-deep.u-fade-enter-to {
      z-index: 10076 !important;
    }

    .complaint-popup-content {
      width: 700rpx;

      .complaint-popup-title {
        padding: 40rpx;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
      }

      .radio-group {
        margin: 0 32rpx;

        .radio-item {
          margin-bottom: 24rpx !important;
        }
      }

      .textarea {
        margin: 48rpx 30rpx;
        background: #eeeeee;

        ::v-deep .u-textarea__count {
          background: #eeeeee !important;
        }
      }

      .imgUpload {
        margin: 24rpx 30rpx;
      }

      .phone {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 30rpx;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
      }

      .btn-content {
        margin: 48rpx 28rpx;

        .btn-item {
          background: $base-color;
          color: #fff;
        }
      }
    }
  }

  .complaint-popup {
    ::v-deep.u-transition {
      z-index: 995 !important;
    }
  }

  .toast {
    ::v-deep.u-transition {
      z-index: 12000 !important;
    }
  }
}
</style>