小程序-自定义组件封装.收集formid

第一次写文章,主要是记录一下之前公司中业务的需要,封装formid的一个思路,方便自己和其他人,不多说,上代码

//index.wxml
<!-- index.wxml -->
<form class="container fontSize_30 lh_1" report-submit bindsubmit="formSubmit">
  <button form-type="submit" data-type="3" class="search_box fontSize_30 bg_fff">
    <view class="search_text flex color_999">
      <view class="iconfont icon_search fontSize_26 lh_1"></view>
      <!-- 图标 -->
      <view class="search_btn">搜索</view>
    </view>
  </button>
  <view class="problem_list">
    <!-- 问题1 -->
    <button form-type="submit" data-type="2" data-id="{{item.consult_id}}" class="problem_item bg_fff" wx:for="{{newsList}}" wx:key="{{item.consult_id}}">
      <view class="problem_item_top flex">
        <view class="user_area flex flex_1">
          <view class="user_img_wrap">
            <image class="user_img w_100 h_100" src="{{item.member_avatarUrl? item.member_avatarUrl: defaultHead}}" mode="scaleToFill"></image>
          </view>
          <view class="user_msg_right">
            <view class="user_name fontSize_30 color_theme">{{item.member_nickname}}</view>
            <view class="time fontSize_26 color_999">{{item.create_time}}</view>
          </view>
        </view>
        <view class="status {{item.consult_replay_status==1? 'color_999':'color_theme'}} box_sizing">
          <view class="status_text">{{item.consult_replay_status==1?"【待答复】":"【已答复】"}}</view>
        </view>
      </view>
      <view class="problem_item_content fontSize_30 color_333">{{item.consult_content}}</view>
    </button>
  </view>
  <!-- 找晚报按钮 -->
  <button bindgetuserinfo="formSubmit" data-type="1" open-type="getUserInfo" class="discover_evening_paper text_center fontSize_26 color_fff bg_theme box_sizing">
    <view class="click text_center">点击</view>
    <view>找晚报</view>
  </button>
</form>

//index.js
const common = require("../../utils/common");
let isHide = false
Page({
  data: {
    defaultHead: ''
  },
  onLoad() {
    this.fetchListData(1);
    this.setData({
      defaultHead: common.imgUrl + 'head.png'
    })
  },
  onShow() {
    if (isHide) {
      console.log("onShow")
      this.fetchListData(1);
    }
  },
  onHide() {
    isHide = true
  },
  data: {
    page: 1,
    newsList: [],
    total: 0
  },
  formSubmit(e) {
    if (e.detail.errMsg == "getUserInfo:fail auth deny") {
      return;
    }
    if (!wx.getStorageSync("userInfo")) {
      common.BindUser(e);
    }
    if (e.detail.formId) {
      common.collectFormID(e);
    }
    let type = e.detail.target ?
      e.detail.target.dataset.type - 0 :
      e.target.dataset.type - 0;

    if (type == 1) {
      wx.navigateTo({
        url: "/pages/index/modules/submitQuestion/submitQuestion"
      });
      return;
    }
    if (type == 2) {
      wx.navigateTo({
        url: "/pages/index/modules/questionDetail/questionDetail?id=" +
          e.detail.target.dataset.id
      });
      return;
    }
    if (type == 3) {
      wx.navigateTo({
        url: "/pages/search/search?type=1"
      });
      return;
    }
  },
  onReachBottom() {
    if (this.data.page * 10 >= this.data.total) {
      wx.showToast({
        title: "到底了~~",
        icon: "none"
      });
      return;
    }
    this.data.page++;
    this.fetchListData(2);
  },
  fetchListData(type) {
    let params = {
      url: "/index/community/Consult/selectConsultList.html",
      data: {
        page: this.data.page,
        limit: 10
      }
    };
    common.request(params).then(res => {
      let newList = []
      if (type == 1) {
        newList = res.data.obj
      } else {
        newList = this.data.newsList.concat(res.data.obj)
      }
      this.setData({
        newsList: newList,
        total: res.data.total
      })
      // let newsList = JSON.parse(JSON.stringify(this.data.newsList)) || [];
      // newsList = newsList.concat(res.data.obj || []);
      // this.setData({
      //   newsList,
      //   total: res.data.total
      // });
    });
  }
});

//common.js
 collectFormID(e) {
    let formID = e.detail.formId;
    // wx.setStorageSync("form_id_time");
    let formIDList = wx.getStorageSync("formIDList") || [];
    formIDList.unshift({
      form_id: formID,
      create_time: parseInt(new Date().getTime() / 1000)
    });
    if (formIDList.length > 2) {
      // return;
      let params = {
        url: "/index/common/Formid/saveFormID.html",
        data: {
          form_id: formIDList
        }
      };
      this.request(params).then(res => {
        formIDList = [];
        wx.setStorage({
          key: "formIDList",
          data: formIDList
        });
      });
      return;
    }
    wx.setStorage({
      key: "formIDList",
      data: formIDList
    });
  },

其实思路比较简单,是wxml中,以from为最大容器,所以的action都是button组件