yizhizan-h5/my/feedback/index.vue

<template>
  <view class="page-box">
    <navBar title="我要反馈" color="#000" />
    <view class="page-content">
      <view class="page" style="background-color: #ffffff">
        <view class="feedback-title">
          <text>问题和意见</text>
          <text @tap="chooseMsg">快速键入</text>
        </view>
        <view class="feedback-body">
          <textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" />
        </view>
        <view class="feedback-title"><text>联系方式</text></view>
        <view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="方便我们联系你 " />
        </view>

        <button style="" class="feedback-submit" @tap="send">提交</button>
      </view>
    </view>
    <!-- 权限说明弹窗 -->
    <u-popup mode="top" ref="permission">
      <view class="popup-content">
        <view class="popup-text-permission">选择/拍摄照片需要相机/相册权限，用于上传用户头像</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      msgContents: [
        "界面显示错乱",
        "启动缓慢，卡出翔了",
        "UI无法直视，丑哭了",
        "偶发性崩溃",
      ],
      stars: [1, 2, 3, 4, 5],
      imageList: [],
      sendDate: {
        score: 5,
        content: "",
        contact: "",
      },
    };
  },
  components: {
    navBar,
  },
  onLoad() {
    let deviceInfo = {
      appid: plus.runtime.appid,
      imei: plus.device.imei, //设备标识
      p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
      md: plus.device.model, //设备型号
      app_version: plus.runtime.version,
      plus_version: plus.runtime.innerVersion, //基座版本号
      os: plus.os.version,
      net: "" + plus.networkinfo.getCurrentType(),
    };
    this.sendDate = Object.assign(deviceInfo, this.sendDate);
  },
  methods: {
    close(e) {
      this.imageList.splice(e, 1);
    },
    chooseMsg() {
      //快速输入
      uni.showActionSheet({
        itemList: this.msgContents,
        success: (res) => {
          this.sendDate.content = this.msgContents[res.tapIndex];
        },
      });
    },
    async chooseImg() {
      // // 1. 先判断系统类型，区分Android/iOS权限
      // const systemInfo = uni.getSystemInfoSync();
      // const isAndroid = systemInfo.system.includes('Android');
      // const permissionType = isAndroid ? 'storage' : 'photos'; // Android=存储，iOS=相册

      // // 2. 权限检查（复用之前封装的 checkPermission 函数）
      // const hasPermission = this.$queue.checkPermission(
      //   permissionType,
      //   isAndroid 
      //     ? '选择/拍摄照片需要相机/相册权限，用于上传简历/求职资料' // Android 专属提示
      //     : '选择/拍摄照片需要相机/相册权限，用于上传简历/求职资料'
      // );

      // if (!hasPermission) {
      //   uni.showToast({ title: '未获取权限，无法选择照片', icon: 'none' });
      //   return;
      // }

      // 1. 检查权限状态
      const hasPermission = await this.$queue.checkPermission(
        'camera',
        '选择/拍摄照片需要相机/相册权限，用于上传用户头像',
        this
      );

      // 2. 如果未授权或者用户拒绝，显示提示
      if (!hasPermission) {
        return;
      }
      //选择图片
      uni.chooseImage({
        sourceType: ["camera", "album"],
        sizeType: "compressed",
        count: 8 - this.imageList.length,
        success: (res) => {
          this.imageList = this.imageList.concat(res.tempFilePaths);
        },
      });
    },
    chooseStar(e) {
      //点击评星
      this.sendDate.score = e;
    },
    previewImage() {
      //预览图片
      uni.previewImage({
        urls: this.imageList,
      });
    },
    send() {
      //发送反馈
      console.log(JSON.stringify(this.sendDate));

      if (!this.sendDate.content) {
        uni.showToast({
          icon: "none",
          title: "请输入反馈内容",
        });
        return;
      }
      if (!this.sendDate.contact) {
        uni.showToast({
          icon: "none",
          title: "请填写QQ或邮箱",
        });
        return;
      }
      this.$queue.showLoading("加载中...");
      this.$Request
        .postJson("/app/message/insertMessage", {
          title: this.sendDate.contact,
          content: JSON.stringify(this.sendDate),
          state: 2,
        })
        .then((res) => {
          if (res.code === 0) {
            uni.showToast({
              title: "投诉成功",
            });
            setTimeout(function () {
              uni.navigateBack();
            }, 1000);
          } else {
            uni.hideLoading();
            uni.showModal({
              showCancel: false,
              title: "投诉失败",
              content: res.msg,
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src: url("https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf") format("truetype");
}

page {
  .page-box {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .page-content {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}

view {
  font-size: 28upx;
}

/*问题反馈*/
.feedback-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20upx;
  color: #8f8f94;
  font-size: 28upx;
}

.feedback-star-view.feedback-title {
  justify-content: flex-start;
  margin: 0;
}

.feedback-body {
  font-size: 32upx;
  padding: 16upx;
  margin: 16upx;
  border-radius: 16upx;
  background: #ffffff;
  /* color: #FFF; */
}

.feedback-textare {
  height: 200upx;
  font-size: 34upx;
  line-height: 50upx;
  width: 100%;
  box-sizing: border-box;
  padding: 20upx 30upx 0;
}

.feedback-input {
  font-size: 32upx;
  height: 60upx;
  padding: 15upx 20upx;
  line-height: 60upx;
}

.feedback-submit {
  background: #016bf6;
  color: #ffffff;
  margin: 20upx;
  margin-top: 32upx;
}
</style>