【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,101 @@
+import UserApi from "../../assets/js/http/userApi"
+
+// pages/signUpDraftTeamEntrance/signUpDraftTeamEntrance.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 起草组id
+    id: '',
+    // 起草组详情信息
+    draftingDetailIngfo: {},
+  },
+  // 报名
+  signUp() {
+    const that = this
+    wx.navigateTo({
+      url: `../signUpDraftTeamPage/signUpDraftTeamPage?id=${this.data.id}`,
+    })
+  },
+  // 获取信息
+  loadData() {
+    UserApi.getDraftGroupInfoById({ id: this.data.id }).then(res => {
+      if (res.success) {
+        this.setData({
+          draftingDetailIngfo: res.result || {}
+        })
+      }
+    }).catch(err => {
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none'
+      })
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    let url = decodeURIComponent(options.q)
+    let id = url.split('=')[1]
+    // 用于测试代码
+    id = '1746776208124739585'
+    this.setData({ id })
+    this.loadData()
+  },
+  goBack(){
+    wx.navigateBack()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "起草组报名入口",
+  "usingComponents": {}
+}
@@ -0,0 +1,43 @@
+<!--起草组报名入口-->
+<view>
+  <view class="basic-info">
+    <view class="meeting-name">
+      <text>起草组项目名称</text>
+      <text>{{draftingDetailIngfo.draftingGroupProject || ''}}</text>
+    </view>
+    <view>
+      <text>关联工作组</text>
+      <text>{{draftingDetailIngfo.workingGroupName || ''}}</text>
+    </view>
+    <view>
+      <text>负责人A</text>
+      <text>{{draftingDetailIngfo.principalNameA || ''}}</text>
+    </view>
+    <view>
+      <text>负责人B</text>
+      <text>{{draftingDetailIngfo.principalNameB || ''}}</text>
+    </view>
+    <view>
+      <text>每年召开次数</text>
+      <text>{{draftingDetailIngfo.convokeNum || ''}}</text>
+    </view>
+    <view>
+      <text>运行周期</text>
+      <text>{{draftingDetailIngfo.operationCycle || ''}}</text>
+    </view>
+
+    <view class="sign-in">
+      <text>任务及目标</text>
+      <text class="sign-in-text">{{draftingDetailIngfo.missionAndObjectives === null ? '' : draftingDetailIngfo.missionAndObjectives}}</text>
+    </view>
+    <view class="sign-in">
+      <text>备注</text>
+      <text class="sign-in-text">{{draftingDetailIngfo.remarks === null ? '' : draftingDetailIngfo.remarks}}</text>
+    </view>
+  </view>
+</view>
+
+<view class="sign-up-empty"></view>
+<view class="sign-up">
+  <button class="sign-up-btn" bindtap='signUp'>报名</button>
+</view>
@@ -0,0 +1,104 @@
+/* pages/signUpDraftTeamEntrance/signUpDraftTeamEntrance.wxss */
+page{
+  box-sizing: border-box;
+  background-color: #F5F5F5;
+}
+.basic-info .title{
+  height: 40px;
+}
+.basic-info .title text{
+  display: block;
+  border-left: 3px solid #069F99;
+  height: 14px;
+  padding-left: 10px;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  font-size: 15px;
+  font-weight: 500;
+}
+.basic-info view{
+  background-color: #FFF;
+  padding: 15px;
+  min-height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  font-size: 14px;
+  border-bottom: 0.5px solid #f5f5f5;
+  position: relative;
+}
+.basic-info view.wrap-text-view .basic-label{
+  flex-basis: 120rpx;
+}
+.basic-info view.wrap-text-view > text:nth-of-type(2){
+  flex: 1;
+  width: 0;
+  margin-left: 10rpx;
+  text-align: right;
+}
+.basic-info view:last-child{
+  border-bottom: 0;
+}
+.meeting-name{
+  margin-bottom: 10px;
+}
+.warning-text{
+  position: absolute !important;
+  top: 5px;
+  left: 75px;
+  color: #FF5E60 !important;
+  font-size: 10px !important;
+  padding: 0 !important;
+}
+.warning-text image{
+  width: 10px;
+  height: 10px;
+}
+.sign-up-empty{
+  height: 60px;
+  width: 100%;
+  display: block;
+  margin-top: 10px;
+}
+.sign-up{
+  width: 100%;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.sign-up text{
+  background-color: #069F99;
+  height: 40px;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: block;
+  text-align: center;
+  line-height: 40px;
+}
+.sign-up-btn {
+  background-color: #069F99;
+  font-weight: 500;
+  color:#fff
+}
+
+.basic-info view.sign-in {
+  display: flex!important;
+  flex-direction: column!important;
+  align-items: start;
+  justify-content: start;
+  height: auto!important;
+}
+.sign-in-text {
+margin-top: 15px;
+}
+.block-text {
+  display: block;
+}
@@ -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;
+}