epmet-resi-rizhao/pages/group/topic/newTopic/newTopic.ts

import { inputSync, nextTick, doAfterLogin } from "@utils/tools";
import {
  wxShowModal,
  wxUploadFile,
  wxRequestPost,
  wxChooseImage,
} from "@utils/promise-wx-api";
import getLocation from "@utils/location";
import validate from "@utils/validate/index.js";

const app = getApp();

Page({
  data: {
    groupId: "",
    topicId: "",

    showedHint: false,

    tabRecord: false,

    textHeight: "320rpx",
    viewHeight: "100%",

    // not-started underway success failed
    submitStatus: "not-started",

    placeholderText: `1、发起您的话题，请将话题描述清晰。
2、在小组得到帮助、建议，能有助于更快的解决问题。
3、还有机会被转发到【党群议事】，让问题更快解决`,

    fmData: {
      wx_form_id: "",
      gridId: "",
      customerId: "",
      groupId: "",
      topicDraftId: "", //  草稿id
      topicContent: "",
      longitude: "",
      dimension: "",
      province: "",
      city: "",
      area: "",
      address: "",
      videoList: [],
      voiceList: [], // 语音文件
      docList: [], // 文档
      imageList: [],
      locateAddress: "",
      locateLongitude: "",
      locateDimension: "",
    },
    // 本地选择作品图片路径数组
    imgList: [
      // {
      //     tempFilePath: '', // 本地录制文件临时路径
      //     src: '', // 上传路径
      //     valid: true, // 是否合法
      // }
    ],
    // 最大上传图片数量
    maxLimitImg: 3,

    submitBtnIsAllowed: false,
    dialogVisible: false,
    templateList: [], //消息模板列表
  },

  // 更新data数据后需主动触发
  $afterUpdateData() {
    this.computeSubmitBtnIsAllowed();
    if (this.data.fmData.voiceList.length > 0)
      this.setData({ submitBtnIsAllowed: true });
  },

  computeSubmitBtnIsAllowed(isQuiet = true) {
    const { fmData, submitStatus } = this.data,
      vlt = validate(fmData, {
        topicContent: [
          {
            rule: "required",
            message: "请输入话题内容",
          },
        ],
        address: [
          {
            rule: "required",
            message: "请输入定位地址",
          },
        ],
        voiceList: [],
      });
    if (!vlt.valid) {
      if (!isQuiet) {
        wx.showToast({
          title: vlt.error,
          icon: "none",
          duration: 1500,
        });
      }
      this.setData({
        submitBtnIsAllowed: false,
      });
      return false;
    } else {
      this.setData({
        submitBtnIsAllowed: submitStatus !== "success",
      });
      return true;
    }
  },

  async onLoad(query) {
    wx.showLoading({
      title: "",
      mask: true,
    });

    await doAfterLogin();

    const { gid, tid } = query;
    this.setData({ groupId: gid, topicId: tid });
    if (tid) {
      this.getInfo();
    }
    this.getTemplate();
    this.getLocation();

    wx.hideLoading();
  },

  onShow() {},
  onReady() {
    // this.requestMsg = this.selectComponent('#requestMsg')
    this.computedViewHeight();
  },
  inputSync,

  // 强行获取地址信息，或打扰用户给予授权
  toughGetLocation() {
    this.getLocation(false);
    wx.chooseLocation({
      success: (res) => {
        console.log("resadddres", res);
        const { fmData } = this.data;
        this.setData({
          fmData: {
            ...fmData,
            address: res.address,
            longitude: res.longitude,
            dimension: res.latitude,
          },
        });
      },
    });
  },
  // 获取话题详情
  async getInfo() {
    const { topicId } = this.data;

    const {
      data: {
        data: { code, data },
      },
      msg,
    } = await wxRequestPost(
      "resi/group/topicdraft/detail",
      {
        topicDraftId: topicId,
      },
      {
        // isMock: true
      }
    );

    if (msg === "success" && code === 0) {
      let { fmData, imgList } = this.data;
      for (var n in data) {
        fmData[n] = data[n];
      }
      imgList = fmData.imageList.map((item) => {
        return {
          tempFilePath: item,
          src: item,
          valid: true,
        };
      });
      console.log("datafffff", data);
      this.setData({ fmData, imgList });
    }
  },
  // 获取地理位置信息
  async getLocation(isQuiet = true) {
    const { msg, data } = await getLocation(isQuiet);
    console.log(msg, data);
    if (msg === "success") {
      const { fmData } = this.data;
      this.setData({
        fmData: {
          ...fmData,
          address: data.address,
          province: data.province,
          city: data.city,
          area: data.district,
          longitude: data.longitude,
          dimension: data.latitude,
          locateAddress: data.address,
          locateLongitude: data.longitude,
          locateDimension: data.latitude,
        },
      });
      this.computeSubmitBtnIsAllowed();
    }
  },

  // 点击查看作品图集
  previewImg(e) {
    const {
      target: {
        dataset: { index },
      },
    } = e;
    const { imgList } = this.data,
      currentImg = imgList[index].tempFilePath,
      imgArr = imgList.map((item) => item.tempFilePath);
    wx.previewImage({
      current: currentImg,
      urls: imgArr,
    });
  },

  delImg(e) {
    const {
      target: {
        dataset: { index },
      },
    } = e;
    let { imgList } = this.data;
    imgList.splice(index, 1);
    this.setData({
      imgList,
    });
    // this.computeSubmitBtnIsAllowed();
  },

  async addImg() {
    const { imgList, maxLimitImg } = this.data,
      len = imgList.length;
    if (len >= maxLimitImg) {
      return wx.showToast({
        title: `最多上传 ${maxLimitImg} 张图片。`,
        icon: "none",
        duration: 1500,
      });
    } else {
      const { msg, data } = await wxChooseImage({
        count: maxLimitImg - len,
        sizeType: ["compressed"],
      });
      if (msg === "success") {
        const { tempFilePaths } = data;
        let newImgList = tempFilePaths.map((tempFilePath) => {
          return {
            tempFilePath,
            src: "",
            valid: true,
          };
        });
        this.setData({
          imgList: imgList.concat(newImgList),
        });
        // this.computeSubmitBtnIsAllowed();
      }
    }
  },
  // 上传图片
  async uploadImgs() {
    if (this.data.imgList.length === 0) {
      return;
    }
    // 必须先开了，否则可能会冲突
    wx.showLoading({
      title: "上传图片中",
      mask: true,
    });

    // 上传图片，返回地址
    const uploadedImgList = await new Promise(async (reslove) => {
      let { imgList } = this.data,
        residueNum = imgList.length;
      imgList.forEach(async (img, index) => {
        if (img.src == "") {
          const {
            data: { data },
            msg,
          } = await wxUploadFile("oss/file/uploadimg", img.tempFilePath, {
            // isMock: true
          });
          if (msg === "success" && data.code === 0) {
            img.src = data.data.url;
            img.valid = true;
          }
        }
        imgList[index] = img;

        residueNum -= 1;
        if (residueNum === 0) {
          reslove(imgList);
        }
      });
    });

    wx.hideLoading();

    console.log(uploadedImgList);

    this.setData({ imgList: uploadedImgList });

    const imgsValid = uploadedImgList.every((item) => item.valid),
      imgsAllUploaded = uploadedImgList.every((item) => item.src != "");
    if (!imgsValid) {
      wx.showToast({
        title: "图片可能包含非法内容",
        icon: "none",
        duration: 1500,
      });
      return Promise.reject();
    } else if (!imgsAllUploaded) {
      wx.showToast({
        title: "上传图片出错，请重试",
        icon: "none",
        duration: 1500,
      });
      return Promise.reject();
    } else {
      return;
    }
  },

  // 提交话题
  async submit(e) {
    // this.setData({ dialogVisible: true }) return
    const { fmData, groupId, imgList } = this.data;
    if (!this.computeSubmitBtnIsAllowed(false) && fmData.voiceList.length === 0) {
      return;
    }

    fmData.topicContent = fmData.topicContent.trim();
    console.log("topicContent", fmData.topicContent.length);
    if (fmData.topicContent === "" && fmData.voiceList.length === 0) {
      console.log("fmData.voiceList.length", fmData.voiceList.length);
      return wx.showToast({
        title: "话题内容或话题语音不能为空",
        icon: "none",
        duration: 1500,
      });
    }

    const retConfirm = await wxShowModal({
      title: "确认提交？",
    });
    if (retConfirm.msg !== "success" || !retConfirm.data.confirm) {
      return;
    }

    await this.uploadImgs();

    // 获取 formId 用于发送模板消息
    if (e.detail.formId) {
      fmData.wx_form_id = e.detail.formId;
    }
    fmData.groupId = groupId;
    fmData.gridId = app.globalData.gridId;
    fmData.customerId = app.globalData.customerId;
    fmData.imageList = imgList.map((item) => {
      return item.src;
    });
    // fmData.attachmentList = imgList.map(item => {
    //   return item.src;
    // });
    this.setData({ fmData });

    wx.showLoading({
      title: "正在提交中",
      mask: true,
    });
    // topicdraft/createtopic topic/createtopic attachmentList
    const {
      data: { data },
      msg,
    } = await wxRequestPost("resi/group/topicdraft/createtopic", fmData, {
      // isMock: true
    });
    wx.hideLoading();

    if (msg === "success" && data.code === 0) {
      this.setData({
        dialogVisible: true,
      });

      // await this.requestMsg.handleMsg()
    }
  },
  // 获取订阅消息列表
  async getTemplate() {
    const {
      data: {
        data: { code, data },
      },
      msg,
    } = await wxRequestPost(
      "message/wxmpmessage/templatelistv2",
      {
        app: "resi",
        customerId: app.globalData.customerId,
      },
      {
        // isMock: true
      }
    );
    console.log("ddddatattt", data);
    if (msg === "success" && code === 0) {
      this.setData({
        templateList: data,
      });
    }
  },
  handleRequestMsg() {
    const { templateList } = this.data;
    let hasAgree = false;
    wx.requestSubscribeMessage({
      tmplIds: templateList.map((item) => item.templateId),
      success: (res) => {
        console.log("res", res);
        if (res.errMsg === "requestSubscribeMessage:ok") {
          templateList.forEach((item) => {
            if (res[item.templateId] === "accept") hasAgree = true;
          });
          if (hasAgree) {
            wx.showToast({
              title: "订阅成功",
              icon: "none",
              duration: 1500,
            });
          }
          console.log("successss", res);
        }
      },
      fail: (err) => {
        console.log("err", err);
        wx.showToast({
          title: err.errMsg,
          icon: "none",
          duration: 1500,
        });
      },
      complete: async () => {
        this.setData({
          submitStatus: "success",
        });
        if (this.data.topicId) {
          wx.reLaunch({
            url: "/subpages/mine/pages/works/topic-part/start-topic/index",
          });
          return;
        }
        // this.computeSubmitBtnIsAllowed();

        await nextTick(1000);

        wx.navigateBack({
          delta: 1,
        });
      },
    });
  },
  async submitComfire() {
    this.setData({
      dialogVisible: false,
    });
    if (this.data.templateList && this.data.templateList.length > 0) {
      await this.handleRequestMsg();
    } else {
      this.setData({
        submitStatus: "success",
      });
      if (this.data.topicId) {
        wx.reLaunch({
          url: "/subpages/mine/pages/works/topic-part/start-topic/index",
        });
        return;
      }
      // this.computeSubmitBtnIsAllowed();

      await nextTick(1000);

      wx.navigateBack({
        delta: 1,
      });
    }
  },
  // 动态计算轮播高度
  computedViewHeight(height = 0) {
    let that = this;
    let query = wx.createSelectorQuery().in(this);
    const ress = wx.getSystemInfoSync();
    let _height = height || 20;
    query
      .selectAll(".btn, .topic-record")
      .boundingClientRect(function (res) {
        
        console.log(ress.windowHeight, res[0].height, res[1].height);
        let _h = 0;
        _h = ress.windowHeight - res[0].height - _height - 50;
        if (res[1].height) _h = ress.windowHeight - res[1].height - _height;

        console.log("++++++", _h);
        that.setData({
          viewHeight: _h + "px",
        });
      })
      .exec();
  },
  handleTapRecord() {
    this.setData({
      tabRecord: !this.data.tabRecord,
    });
    this.computedViewHeight();
  },
  handleRecordFinish(e) {
    let {
      fmData: { voiceList },
    } = this.data;
    const { url, duration } = e.detail;
    voiceList.push({ url, duration });
    console.log("eeeeee", e.detail);
    this.setData({
      "fmData.voiceList": voiceList,
      tabRecord: false,
      submitBtnIsAllowed: true,
    });
    this.computedViewHeight();
  },
  handleAudioDel() {
    let {
      fmData: { voiceList },
    } = this.data;
    voiceList.shift();
    this.setData({
      "fmData.voiceList": voiceList,
    });
    this.computeSubmitBtnIsAllowed();
    console.log("dddddddddel");
  },
});