志愿者活动取消报名增加时间段

subpages/heart/pages/heartDetail/heartDetail.js

@@ -35,6 +35,9 @@ Page({
     dialogTips: '',
     sponsor: '', // 主办方
     periodList: [], // 时间段
+    actPeriodId: [], // 
+    cancelPeriodList: [], // 取消报名的时间段
+    textareaValue: '', // 取消原因
   },
   onLoad: function (options) {
     console.log("当前时间" + getTimestamp())
@@ -52,8 +55,6 @@ Page({
     // }
     // 获取默认网格
     this.getDefaultGridInfo()
-    // 获取活动时间段
-    this.getActPeriods()
   },
   onReachBottom () {
     if (this.data.curSize == this.data.pageSize) {
@@ -131,6 +132,8 @@ Page({
       //   dialogConfirmText: '确定',
       //   dialogCancelText: ''
       // })
+      // 获取活动时间段
+      this.getActPeriods()
       this.setData({
         // dialogVisible: !this.data.dialogVisible,
         showPeriodDialog: !this.data.showPeriodDialog,
@@ -141,6 +144,8 @@ Page({
         dialogCancelText: "否"
       })
     } else if (uservolunteerflag == 1) {
+      // 获取活动时间段
+      this.getActPeriods()
       this.setData({
         // dialogVisible: !this.data.dialogVisible,
         showPeriodDialog: !this.data.showPeriodDialog,
@@ -181,6 +186,7 @@ Page({
   },
   // 取消报名
   prompt () {
+    this.getSignInActPeriods()
     const now = getTimestamp()
     if (now > this.data.detail.signupEndTime) {
       this.setData({
@@ -246,8 +252,18 @@ Page({
   },
   cancelSignupCallback (e) {
     let id = this.data.id
-    let reason = e.detail.data
+    let actPeriodId = this.data.actPeriodId
-    api.cancelsignup(id, reason).then(() => {
+    let reason = this.data.textareaValue
+    console.log(this.data.actPeriodId)
+    if (actPeriodId.length == 0) {
+      wx.showToast({
+        title: "请选择取消的时间段",
+        icon: "none",
+        duration: 2000
+      })
+      return
+    }
+    api.cancelsignup(id, reason, actPeriodId).then(() => {
       wx.showToast({
         title: "取消报名成功",
         icon: "none",
@@ -349,11 +365,41 @@ Page({
     }
   },
   getActPeriods () {
+    this.setData({
+      periodList: [],
+      actPeriodId: [],
+    })
     api.getActPeriods(this.data.id).then(res => {
       console.log(res.data)
       this.setData({
         periodList: res.data
       })
     })
+  },
+  textareaInput (e) {
+    this.setData({
+      textareaValue: e.detail.value
+    })
+  },
+  closeCancelDialog () {
+    this.setData({
+      cancelPeriodList: [],
+      actPeriodId: [],
+      textareaValue: '',
+      cancelSignupVisible: !this.data.cancelSignupVisible,
+      cancelSignupTipValue: ""
+    })
+  },
+  getSignInActPeriods () {
+    this.setData({
+      cancelPeriodList: [],
+      actPeriodId: [],
+    })
+    api.getSignInActPeriods(this.data.id).then(res => {
+      console.log(res.data)
+      this.setData({
+        cancelPeriodList: res.data
+      })
+    }).catch(err => {})
   }
 })

subpages/heart/pages/heartDetail/heartDetail.wxml

@@ -364,26 +364,28 @@
   </view>
 </view>
 
-<coverview-dialog bind:confirm="confirmDialog" dialogVisible="{{dialogVisible}}" title="{{dialogTitle}}"
+<!-- <cancel-signup-dialog title="取消报名" cancelText="否" confirmText="是" tipVisible="{{cancelSignupTipVisible}}"
-  content="{{dialogContent}}" confirmText="{{dialogConfirmText}}" cancelText="{{dialogCancelText}}">
-</coverview-dialog>
-
-<cancel-signup-dialog title="取消报名" cancelText="否" confirmText="是" tipVisible="{{cancelSignupTipVisible}}"
   tipValue="{{cancelSignupTipValue}}" bind:confirm="cancelSignupCallback" cancelSignupVisible="{{cancelSignupVisible}}">
-</cancel-signup-dialog>
+</cancel-signup-dialog> -->
 
 <view class="period" wx:if="{{showPeriodDialog}}">
   <view class="period-dialog">
     <view class="period-title">请选择时间段</view>
     <scroll-view class="period-content" scroll-y enhanced show-scrollbar>
+      <view class="item-header">
+        <view class="item-header-1">活动时间段</view>
+        <view class="item-header-2">剩余名额</view>
+      </view>
       <checkbox-group bindchange="checkboxChange" class="checkbox-group">
-        <label class="checkbox-item" wx:for="{{periodList}}" wx:key="index">
+        <label class="checkbox-item {{item.actPeriodQuotaCategory == 1 && (item.actPeriodQuota - item.actPeriodSignUpNum) < 1 ? 'disabled' : ''}}" wx:for="{{periodList}}" wx:key="index">
           <view class="item-labels">
             <view class="item-label">{{item.actPeriodStartTime}} 至</view>
             <view class="item-label">{{item.actPeriodEndTime}}</view>
           </view>
+          <view class="item-quota" wx:if="{{item.actPeriodQuotaCategory == 0}}">不限</view>
+          <view class="item-quota" wx:else>{{item.actPeriodQuota - item.actPeriodSignUpNum}}</view>
           <view class="item-value">
-            <checkbox value="{{item.id}}" checked="{{item.checked}}"/>
+            <checkbox value="{{item.id}}" checked="{{item.checked}}" disabled="{{item.actPeriodQuotaCategory == 1 && (item.actPeriodQuota - item.actPeriodSignUpNum) < 1 ? true : false}}"/>
           </view>
         </label>
       </checkbox-group>
@@ -396,4 +398,33 @@
       <view class="footer-confirm" bindtap="onConfirmPeriod">确定</view>
     </view>
   </view>
+</view>
+
+<view class="period" wx:if="{{cancelSignupVisible}}">
+  <view class="period-dialog">
+    <view class="period-title">请选择时间段</view>
+    <view class="period-content" scroll-y enhanced show-scrollbar>
+      <checkbox-group bindchange="checkboxChange" class="checkbox-group">
+        <label class="checkbox-item" wx:for="{{cancelPeriodList}}" wx:key="index">
+          <view class="item-labels">
+            <view class="item-label">{{item.actPeriodStartTime}} 至</view>
+            <view class="item-label">{{item.actPeriodEndTime}}</view>
+          </view>
+          <view class="item-value">
+            <checkbox value="{{item.id}}" checked="{{item.checked}}"/>
+          </view>
+        </label>
+      </checkbox-group>
+    </view>
+    <view class="tips" wx:if="{{cancelSignupTipValue}}">
+      {{cancelSignupTipValue}}
+    </view>
+    <view class="textarea">
+      <textarea value="{{textareaValue}}" bindblur="textareaInput"  bindinput="textareaInput" placeholder-class="textarea-placeholder" cursor-spacing="70" placeholder="请输入取消原因"/>
+    </view>
+    <view class="period-footer">
+      <view class="footer-cancel" bindtap="closeCancelDialog">否</view>
+      <view class="footer-confirm" bindtap="cancelSignupCallback">是</view>
+    </view>
+  </view>
 </view>

subpages/heart/pages/heartDetail/heartDetail.wxss

@@ -390,14 +390,24 @@ line-height: 75rpx;
   font-size: 36rpx;
 }
 .period-dialog .period-content {
-  height: 400rpx;
+  max-height: 400rpx;
   padding: 20rpx 30rpx;
   box-sizing: border-box;
+  overflow: auto;
+}
+.period-dialog .period-content .item-header {
+  display: flex;
+}
+.item-header .item-header-1 {
+  width: 380rpx;
 }
 .period-dialog .period-content .checkbox-group {
   height: 100%;
   /* overflow: auto; */
 }
+.disabled {
+  opacity: 0.5;
+}
 .checkbox-group .checkbox-item {
   display: flex;
   width: 100%;
@@ -436,3 +446,21 @@ line-height: 75rpx;
   text-align: center;
   color: #04BCA0;
 }
+.period-dialog .textarea {
+  width: 100%;
+  height: 345rpx;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+  padding: 27rpx 17rpx 0;
+  margin-bottom: 20rpx;
+}
+.period-dialog .textarea textarea {
+  width: 100%;
+  height: 100%;
+  font-size: 32rpx;
+  line-height: 44rpx;
+  color: #666;    
+  background-color: #f7f7f7;
+  padding: 10rpx;
+  box-sizing: border-box;
+}

utils/api.js

@@ -75,7 +75,8 @@ module.exports = {
   getVolunteerDepts: getVolunteerDepts,
   getCharityPoints: getCharityPoints,
   //
-  getActPeriods
+  getActPeriods,
+  getSignInActPeriods
 }
 
 function getToken (wxCode) {
@@ -444,10 +445,11 @@ function authenticate (data) {
 /**
  * 取消报名
  */
-function cancelsignup (id, response) {
+ function cancelsignup (id, response, actPeriodId) {
   return fly.post("heart/act/cancelsignup", {
     actId: id,
-    failureReason: response
+    failureReason: response,
+    actPeriodId: actPeriodId
   })
 }
 
@@ -643,4 +645,8 @@ function getCharityPoints (para) {
 // 活动参与时间段列表接口
 function getActPeriods (actId) {
   return fly.get(`heart/act/getActPeriods`, {actId: actId})
+}
+// 取消报名时间段列表接口
+function getSignInActPeriods (actId) {
+  return fly.get(`heart/act/getSignInActPeriods`, {actId: actId})
 }