【update】起草组报名页面

2024-01-15 17:19:25 +08:00
parent 582057c5e8
commit 2a694be73e
8 changed files with 701 additions and 0 deletions
@@ -0,0 +1,237 @@
+import UserApi from "../../assets/js/http/userApi";
+
+// pages/signUpDraftTeamPage/signUpDraftTeamPage.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    pageTitle: '起草组报名',
+    // page-container 相关的配置
+    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
+    // 当前起草组项目id
+    id: '',
+    // 是否需要权限
+    nolimitBool: false,
+    // 选择的用户
+    selectedPerson: {},
+    // 选择用户下标
+    selectedPersonIndex: null,
+    // 当前选择的企业
+    selectedCompany: {},
+    // 企业联系人
+    personList: [{}, {}, {}],
+  },
+
+  // 选择参会单位
+  selectCompany() {
+    wx.navigateTo({
+      url: `../companyList/companyList?nolimit=true`,
+    })
+  },
+  setIdentityDisabled () {},
+  //  选择联系人
+  selectPerson(e) {
+    const that = this
+    // 设置操作的下标，onLoad事件将数据放入数组
+    console.log('操作企业联系人下标', e.currentTarget.dataset.index);
+    this.setData({
+      selectedPersonIndex: e.currentTarget.dataset.index
+    })
+    if (!!this.data.selectedCompany.id) {
+      wx.navigateTo({
+        url: `../personList/personList?companyId=${this.data.selectedCompany.id}&selectType=${e.currentTarget.dataset.selecttype}&nolimit=${that.data.nolimitBool}`,
+      })
+    } else {
+      wx.showToast({
+        title: '请先选择参会单位',
+        icon: "none",
+        duration: 800,
+      });
+    }
+  },
+  // 添加企业联系人
+  handleAddContacts () {
+    if (this.data.personList.length >= 10) {
+      wx.showToast({
+        title: '最多添加十个企业联系人',
+        icon: "none",
+        duration: 800,
+      });
+      return
+    }
+    this.data.personList.push({})
+    this.setData({
+      personList: this.data.personList
+    })
+  },
+  // 删除企业联系人
+  handleDelContacts (e) {
+    const index = e.currentTarget.dataset.index
+    if (this.data.personList.length === 1) {
+      wx.showToast({
+        title: '最少需要一个企业联系人',
+        icon: "none",
+        duration: 800,
+      });
+    } else {
+      this.setData({
+        personList: this.data.personList.filter((_, i) => index !== i)
+      })
+    }
+  },
+  // 企业联系人备注
+  inputContactsRemarks (e) {
+    const index = e.currentTarget.dataset.index
+    this.data.personList[index].remarks = e.detail.value || ''
+    this.setData({
+      personList: this.data.personList
+    })
+  },
+  // 提交
+  formSubmit(e) {
+    // 参会单位必填
+    if (!this.data.selectedCompany.id) {
+      wx.showToast({
+        title: '请先选择参会单位',
+        icon: "none",
+        duration: 800,
+      });
+      return
+    }
+    // 企业联系人1必填
+    if (!this.data.personList[0].contactsId) {
+      wx.showToast({
+        title: '请选择企业联系人1',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+    // 企业联系人不能重复
+    const personIds = this.data.personList.filter(item => item.contactsId).map(item => item.contactsId)
+    if (Array.from(new Set(personIds)).length !== personIds.length) {
+      wx.showToast({
+        title: '请选择不同的联系人',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+    const params = {}
+    // 报名起草组id
+    params.draftingGroupId = this.data.id
+    // 审核状态 1未审核 2已审核 3已驳回
+    params.checkResult = 1
+    // 选择的企业
+    params.chargeCompanyId = this.data.selectedCompany.id
+    params.chargeCompanyTemporaryName = this.data.selectedCompany.companyName
+    // 总备注
+    params.remarks = e.detail.value.remarks || ''
+    // 联络人列表
+    params.payDraftingGroupSubItemContactsList = this.data.personList.filter(item => item.contactsId)
+    console.log(params);
+    wx.showLoading({
+      title: '加载中',
+      mask: true
+    })
+    UserApi.draftingGroupRegistration(params).then(res => {
+      if (res.success) {
+        wx.showToast({
+          title: res.message,
+          icon: 'loading',
+          duration: 1500,
+          success: () => {
+            this.goBack()
+          }
+        })
+      } else {
+        wx.showToast({
+          title: res.message,
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    }).catch(e => {
+      wx.showToast({
+        title: '操作失败',
+        icon: 'error',
+        duration: 2000
+      })
+    })
+  },
+  goBack(){
+    wx.navigateBack()
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      id: options.id
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    console.log('选择的用户', this.data.selectedPersonIndex, this.data.selectedPerson);
+    if (this.data.selectedPersonIndex !== null && this.data.selectedPersonIndex !== undefined) {
+      const { id, name } = this.data.selectedPerson || {}
+      this.data.personList[this.data.selectedPersonIndex] = {
+        contactsId: id,
+        contactsTemporaryName: name,
+        remarks: ''
+      }
+      this.setData({
+        selectedPerson: {},
+        selectedPersonIndex: null,
+        personList: this.data.personList
+      })
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "起草组报名",
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}
@@ -0,0 +1,60 @@
+<!--pages/signUpDraftTeamPage/signUpDraftTeamPage.wxml-->
+<!-- 自定义头部start -->
+<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
+	<image src="../../assets/images/back.png" bindtap="goBack"></image>
+	<text>{{pageTitle}}</text>
+</view>
+<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view><!-- 空view用来填充自定义头部的padding-top -->
+<!-- 自定义头部end -->
+<view class="color-f5 wrap">
+  <form bindsubmit="formSubmit">
+    <view class="form-wrap">
+      <!-- 企业名称直接回显不可修改 -->
+      <view class="form-item mb20">
+        <text class="item-label flex-1 validate">企业名称：</text>
+        <input placeholder-class="text-right" bindtap="selectCompany" disabled="{{true}}" name="selectedCompany.companyName" data-nolimit="{{nolimitBool}}" value="{{selectedCompany.companyName}}" placeholder="请选择参会单位" />
+      </view>
+      <!--  企业联系人  -->
+      <view class="form-contacts mb20" wx:for="{{personList}}" wx:key="index">
+        <view class="form-contacts-head">
+          <view class="form-contacts-head-title {{index === 0 ? 'validate' : ''}}">企业联系人{{index + 1}}</view>
+          <view  class="form-contacts-head-icons">
+            <!-- 删除联系人 -->
+            <image src="../../assets/images/delete.png" bind:tap="handleDelContacts" data-index="{{index}}"/>
+          </view>
+        </view>
+        <view class="form-contacts-name">
+          <view class="form-item">
+            <text class="item-label flex-1">姓名：</text>
+            <input placeholder-class="text-right" data-nolimit="{{nolimitBool}}" disabled="{{true}}" bindtap="selectPerson" data-index="{{index}}" data-selectType='1' value="{{item.contactsTemporaryName}}" placeholder="请选择企业联系人" />
+          </view>
+        </view>
+        <view class="form-contacts-remarks">
+          <view class="form-item">
+            <text class="item-label flex-1">备注：</text>
+            <input name="ContactsRemarks" placeholder-class="text-right" maxlength="50" value="{{item.remarks}}"
+            bindinput="inputContactsRemarks" data-index="{{index}}" placeholder="请输入备注" />
+          </view>
+        </view>
+        <!-- 只有最后一个显示增加且联系人按钮 -->
+        <view class="contacts-add" wx:if="{{index === (personList.length - 1)}}">
+          <view class="contacts-add-btn" bind:tap="handleAddContacts">
+          <image src="../../assets/images/plus.png"/><text class="ml8">添加企业联系人</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 备注 -->
+      <view class="form-item textarea">
+        <text class="item-label">备注</text>
+        <textarea placeholder="请输入备注" name="remarks" value="{{model.remarks}}" maxlength="200" />
+      </view>
+
+      <view class="form-item">
+        <view class="btn-box">
+          <button class="submit" formType="submit">确定</button>
+        </view>
+      </view>
+    </view>
+  </form>
+</view>
@@ -0,0 +1,147 @@
+/* pages/signUpDraftTeamPage/signUpDraftTeamPage.wxss *//* pages/meeting/meeting.wxss */
+page {
+  background-color: #F5F5F5;
+}
+/* 头部筛选 start */
+.select-list {
+  border-top: 0.5px solid #F5F5F5;
+  height: 40px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+}
+
+.select-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-item image {
+  width: 11px;
+  height: 6px;
+  margin-left: 9px;
+}
+/* 头部筛选end */
+
+/* 表单 start */ 
+.form-item {
+  box-sizing: border-box;
+  display: flex;
+  padding: 32rpx;
+  font-size: 28rpx;
+  justify-content: space-between;
+  width: 100%;
+  height: 112rpx;
+  background-color: #fff;
+}
+.form-item .item-label {
+  position: relative;
+}
+/* 设置必填标记位置 */
+.form-item .item-label.validate {
+  padding-left: 20rpx;
+}
+.form-item .item-label.validate::before {
+  left: 0;
+}
+/* 联系人部分 */
+.form-contacts-head {
+  background-color: #fff;
+  box-sizing: border-box;
+  height: 112rpx;
+  padding: 32rpx;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.form-contacts-head-title {
+  position: relative;
+  padding-left: 18rpx;
+}
+/* validate占用了before伪元素，这里使用after做左侧的 */
+.form-contacts-head-title::after {
+  position: absolute;
+  top: 6rpx;
+  left: 0;
+  content: '';
+  display: block;
+  width: 6rpx;
+  height: 28rpx;
+  background: #069F99;
+  border-radius: 10rpx;
+}
+.form-contacts-head-title.validate {
+  padding-left: 38rpx;
+}
+.form-contacts-head-title.validate::before {
+  left: 18rpx;
+}
+.form-contacts-head-icons image {
+  width: 48rpx;
+  height: 48rpx;
+}
+.form-item input {
+  text-align: right;
+}
+.form-item.textarea {
+  display: block;
+  height: 264rpx;
+}
+.form-item.textarea textarea {
+  box-sizing: border-box;
+  margin-top: 24rpx;
+  padding: 20rpx;
+  width: 100%;
+  height: 134rpx;
+  border-radius: 8rpx;
+  border: 2rpx solid #C9CDD4;
+}
+/* 表单 end */
+/* 添加联系人按钮 */
+.contacts-add {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  padding: 32rpx;
+}
+.contacts-add-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 46rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #069F99;
+  border: 1px solid #069F99;
+  width: 100%;
+  height: 76rpx;
+  border-radius: 20rpx;
+}
+.contacts-add image {
+  line-height: 32rpx;
+  width: 32rpx;
+  height: 32rpx;
+}
+/* 提交按钮 */
+.btn-box {
+  width: 100%;
+  padding: 32rpx;
+}
+.btn-box .submit {
+  font-size: 32rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  width: 100%;
+  height: 76rpx;
+  border-radius: 20rpx;
+  background-color: #069F99;
+  color: white;
+}
+.ml8 {
+  margin-left: 8rpx;
+}