✨ feat(创建的活动): 时间过滤器控件调整

hookehuyr
Commit 649d972130f540ce2f36f32ba0c4e4b0be0de318 649d9721 1 parent 04981c6d
Showing 4 changed files with 186 additions and 8 deletions
src/components/vant-weapp/datetime-picker/index.js
src/pages/myCreateActivity/index.less
src/pages/myCreateActivity/index.vue
vantComponentConf.js
--- a/src/components/vant-weapp/datetime-picker/index.js
View file @649d972
+++ b/src/components/vant-weapp/datetime-picker/index.js
View file @649d972
@@ -97,7 +97,11 @@ VantComponent({
             return this.picker;
         },
         updateColumns() {
-            const { formatter = defaultFormatter } = this.data;
+            // const { formatter = defaultFormatter } = this.data;
+            let { formatter } = this.data;
+            if (defaultFormatter) {
+                formatter = defaultFormatter;
+            }
             const results = this.getOriginColumns().map((column) => ({
                 values: column.values.map((value) => formatter(column.type, value)),
             }));
--- a/src/pages/myCreateActivity/index.less
View file @649d972
+++ b/src/pages/myCreateActivity/index.less
View file @649d972
@@ -54,3 +54,30 @@
   /* 调整下划线的起始位置 左侧是0 上边是1.15em */
   background-position: 0 1.1rem;
 }
+
+.time-wrapper {
+  .border {
+    overflow: auto;
+    border-bottom: 1px solid #F2F2F2;
+    .fix {
+      float: left;
+      padding-top: 0.6rem;
+    }
+  }
+}
+.time-button-wrapper {
+  padding: 1rem 0;
+  margin: 1rem;
+  text-align: center;
+  .button {
+    padding: 0.5rem 1rem; border-radius: 1rem;
+  }
+  .cancel {
+    color: #199A74;
+    border: 1px solid #199A74;
+  }
+  .confirm {
+    color: #FFFFFF;
+    background-color: #199A74;
+  }
+}
--- a/src/pages/myCreateActivity/index.vue
View file @649d972
+++ b/src/pages/myCreateActivity/index.vue
View file @649d972
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-01 17:50:59
+ * @LastEditTime: 2022-11-03 15:35:34
  * @FilePath: /swx/src/pages/myCreateActivity/index.vue
  * @Description: 创建的活动页面
 -->
@@ -57,13 +57,13 @@
       </view>
     </view>
     <view style="padding: 0 1rem;">
-      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
+      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 0.5rem 1rem;overflow: auto; margin-bottom: 1px;">
-        <view @tap="show_status_popup=true" style="float: left; color: #666666; font-size: 0.9rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem;">
+        <view @tap="show_time_popup=true" style="float: left; color: #666666; font-size: 0.8rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem; margin-top: 0.85rem;">
-          &nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
+          &nbsp;{{ filter_status_time === '' ? '全部' : filter_status_time }}&nbsp;&nbsp;
           <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
         </view>
         <view style="float: right; margin-top: 0.25rem;">
-          <text style="font-size: 1rem; color: #999999; vertical-align: super;">仅看进行中</text>&nbsp;
+          <view style="font-size: 0.85rem; color: #999999; vertical-align: super;">仅看进行中</view>&nbsp;
           <van-switch :checked="check_status" @change="onChange" size="22px" active-color="#199A74" />
         </view>
       </view>
@@ -88,8 +88,75 @@
       :default-index="defaultIndex"
       toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel"/>
   </van-popup>
-  <van-toast id="van-toast" />
+  <!-- 选择时间控件弹出框 -->
+  <van-popup :show="show_time_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
+    <view class="time-wrapper">
+      <view class="form-item border" style="padding: 0.25rem 0.25rem 0.25rem 1rem;">
+        <van-row>
+          <van-col span="10" offset="0">
+            <view class="form-item-title fix">
+              活动开始时间
+              <!-- <van-icon name="question-o" size="1rem" color="" class="vip-icon" /> -->
+            </view>
+          </van-col>
+          <van-col span="14" offset="0">
+            <!-- 报名开始时间 -->
+            <van-field @tap="showBeginTime" :value="filter_begin_time" label-class="label-class-super" input-class="input-class" label=""
+            :right-icon="icon_sel" input-align="right" placeholder="请选择时间" placeholder-style="color: #999;" customStyle=""
+            maxlength="" type="" :border="false" :required="false" :disabled="true" />
+          </van-col>
+        </van-row>
+      </view>
+      <view class="form-item border" style="padding: 0.25rem 0.25rem 0.25rem 1rem;">
+        <van-row>
+          <van-col span="10" offset="0">
+            <view class="form-item-title fix">
+              活动结束时间
+              <!-- <van-icon name="question-o" size="1rem" color="" class="vip-icon" /> -->
+            </view>
+          </van-col>
+          <van-col span="14" offset="0">
+            <!-- 活动结束时间 -->
+            <van-field @tap="showEndTime" :value="filter_end_time" label-class="label-class-super" input-class="input-class" label=""
+            :right-icon="icon_sel" input-align="right" placeholder="请选择时间" placeholder-style="color: #999;" customStyle=""
+            maxlength="" type="" :border="false" :required="false" :disabled="true" />
+          </van-col>
+        </van-row>
+      </view>
+    </view>
+    <van-row>
+      <van-col span="12" offset="0">
+        <view class="time-button-wrapper">
+          <view class="button cancel" @tap="closeTime">重置</view>
+        </view>
+      </van-col>
+      <van-col span="12" offset="0">
+        <view class="time-button-wrapper">
+          <view class="button confirm" @tap="confirmTime">确定</view>
+        </view>
+      </van-col>
+    </van-row>
+  </van-popup>
+  <van-popup :show="show_begin_time" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-datetime-picker
+      type="date"
+      :value="currentBeginDate"
+      :formatter="formatter"
+      @confirm="onBeginConfirm"
+      @cancel="onBeginCancel"
+    />
+  </van-popup>
+  <van-popup :show="show_end_time" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
+    <van-datetime-picker
+      type="date"
+      :value="currentEndDate"
+      :formatter="formatter"
+      @confirm="onEndConfirm"
+      @cancel="onEndCancel"
+    />
+  </van-popup>
+  <van-toast id="van-toast" />
   <van-dialog title="温馨提示" :show="copy_show" :show-cancel-button="true" message="是否确认复制活动？" confirm-button-color="#199A74" @confirm="onCopyConfirm" @cancel="onCopyCancel"></van-dialog>
   <van-dialog title="温馨提示" :show="edit_show" :show-cancel-button="true" message="是否确认编辑活动？" confirm-button-color="#199A74" @confirm="onEditConfirm" @cancel="onEditCancel"></van-dialog>
   <van-dialog title="温馨提示" :show="finish_show" :show-cancel-button="true" message="是否确认结束活动？" confirm-button-color="#199A74" @confirm="onFinishConfirm" @cancel="onFinishCancel"></van-dialog>
@@ -122,6 +189,7 @@ import { hostListAPI } from '@/api/Host/index'
 import { addListAPI, endActivityAPI, delActivityAPI, copyActivityAPI } from '@/api/Activity/index';
 import { hostStore } from '@/stores/host'
 import { formatDate } from '@/utils/tools.js'
+import icon_sel from '@/images/icon/sel@2x.png'
 export default {
   name: "myCreateActivityPage",
@@ -217,6 +285,13 @@ export default {
       copy_show: false,
       finish_show: false,
       delete_show: false,
+      show_time_popup: false,
+      filter_begin_time: '',
+      filter_end_time: '',
+      currentBeginDate: new Date().getTime(),
+      currentEndDate: new Date().getTime(),
+      minDate: new Date().getTime(),
+      filter_status_time: ''
     };
   },
   methods: {
@@ -408,7 +483,78 @@ export default {
     onCopyCancel () {
       this.activity_id = '';
       this.copy_show = false;
+    },
+    closeTime () { // 重置查询时间
+      // this.show_time_popup = false;
+      this.filter_begin_time = '';
+      this.filter_end_time = '';
+      this.currentBeginDate = new Date().getTime();
+      this.currentEndDate = new Date().getTime();
+    },
+    confirmTime () { // 确认时间区间
+      if (+new Date(this.filter_begin_time) > +new Date(this.filter_end_time)) {
+        Toast('开始时间不能大于结束时间')
+      } else {
+        this.show_time_popup = false;
+        if (this.filter_begin_time && this.filter_end_time) {
+          this.filter_status_time = `${this.filter_begin_time} ~ ${this.filter_end_time}`;
+        } else {
+          this.filter_status_time = '';
+        }
+        this.time_begin = this.filter_begin_time;
+        this.time_end = this.filter_end_time;
+        // 查询数据
+        this.activity_list = [];
+        this.flag = true;
+        this.page = 0;
+        this.getList();
+      }
+    },
+    formatter (type, value) {
+      if (type === 'year') {
+        return `${value}年`;
       }
+      if (type === 'month') {
+        return `${value}月`;
+      }
+      return value;
+    },
+    // onBeginInput(event) {
+    //   this.currentBeginDate = event.detail;
+    //   this.filter_begin_time = moment(event.detail).format('YYYY-MM-DD')
+    // },
+    // onEndInput(event) {
+    //   this.currentEndDate = event.detail;
+    //   this.filter_end_time = moment(event.detail).format('YYYY-MM-DD')
+    // },
+    showBeginTime () {
+      this.show_time_popup = false;
+      this.show_begin_time = true;
+    },
+    showEndTime () {
+      this.show_time_popup = false;
+      this.show_end_time = true;
+    },
+    onBeginConfirm ({ detail }) {
+      this.show_time_popup = true;
+      this.show_begin_time = false;
+      this.currentBeginDate = detail;
+      this.filter_begin_time = moment(detail).format('YYYY-MM-DD')
+    },
+    onBeginCancel () {
+      this.show_time_popup = true;
+      this.show_begin_time = false;
+    },
+    onEndConfirm({ detail }) {
+      this.show_time_popup = true;
+      this.show_end_time = false;
+      this.currentEndDate = detail;
+      this.filter_end_time = moment(detail).format('YYYY-MM-DD')
+    },
+    onEndCancel () {
+      this.show_time_popup = true;
+      this.show_end_time = false;
+    },
   },
 };
 </script>
--- a/vantComponentConf.js
View file @649d972
+++ b/vantComponentConf.js
View file @649d972
 /*
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-21 10:05:55
+ * @LastEditTime: 2022-11-03 14:15:39
  * @FilePath: /swx/vantComponentConf.js
  * @Description: 文件描述
  */
@@ -37,6 +37,7 @@ const vantComponentNames = [
   "radio",
   "radio-group",
   "tag",
+  "datetime-picker",
 ];
 module.exports = vantComponentNames;