✨ feat(创建活动): 高级配置字段业务逻辑调整

hookehuyr
Commit c9a3cdbcb06b7741cb4937e38913995d067cd40f c9a3cdbc 1 parent 999b0273
Showing 1 changed file with 99 additions and 49 deletions
src/pages/createActivity/index.vue
--- a/src/pages/createActivity/index.vue
View file @c9a3cdb
+++ b/src/pages/createActivity/index.vue
View file @c9a3cdb
 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-17 17:25:54
+ * @LastEditTime: 2022-10-17 18:30:58
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -83,10 +83,10 @@
           :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
           maxlength="" type="" :border="true" @tap="show_activity_type_popup=true" :required="false" :disabled="true" />
         <!-- 活动地址 -->
-        <van-field :value="message1" label-class="label-class-super" input-class="input-class" label="活动地址"
+        <van-field :value="address" label-class="label-class-super" input-class="input-class" label="活动地址"
           type="textarea" placeholder="请输入地址或位置说明" placeholder-style="color: #999;" customStyle="" inputAlign="right"
           rightIcon="" :required="false" maxlength="" :border="false" :autosize="{ maxHeight: 80, minHeight: 20 }"
-          @change="onChange1" />
+          @change="onAddressChange" />
       </view>
       <view class="divide-line"></view>
       <view>
@@ -117,7 +117,7 @@
               允许内部人员报名活动
               <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
             </view>
-            <van-switch style="float: right; padding-top: 0.5rem;" :checked="limit_number" @change="onChangeLimit"
+            <van-switch style="float: right; padding-top: 0.5rem;" :checked="is_inner" @change="onInnerChange"
               size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
           </view>
         </view>
@@ -127,24 +127,24 @@
               屏蔽黑名单用户
               <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
             </view>
-            <van-switch style="float: right; padding-top: 0.5rem;" :checked="limit_number" @change="onChangeLimit"
+            <van-switch style="float: right; padding-top: 0.5rem;" :checked="is_black" @change="onBlackChange"
               size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
           </view>
         </view>
         <view class="form-item server-sub">
           <van-row>
-            <van-col span="12">
+            <van-col span="10">
               <view class="form-item-title fix">
                 服务岗位报名
                 <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
               </view>
             </van-col>
-            <van-col span="12">
+            <van-col span="14">
               <view style="">
-                <van-field :value="message1" label-class="label-class-super" input-class="input-class" label=""
+                <van-field :value="job_post" label-class="label-class-super" input-class="input-class" label=""
                   type="textarea" placeholder="岗位名以逗号分隔" placeholder-style="color: #999;" customStyle=""
-                  inputAlign="right" rightIcon="" :required="false" maxlength="" :border="false"
+                  inputAlign="left" rightIcon="" :required="false" maxlength="" :border="false"
-                  :autosize="{ maxHeight: 80, minHeight: 20 }" @change="onChange1" />
+                  :autosize="{ maxHeight: 80, minHeight: 20 }" @change="onExtendChange" @blur="onExtendBlur" />
               </view>
             </van-col>
@@ -276,16 +276,31 @@ import BASE_URL from '@/utils/config';
 import Toast from '@/components/vant-weapp/toast/toast';
 import { randomId } from '@/utils/tools'
-
-const message1 = ref('');
-
 const activity_name = ref('');
 const onChange = ({ detail }) => {
   activity_name.value = detail
 }
-const onChange1 = ({ detail }) => {
+
-  // console.warn(detail);
+/***** 主办方选择弹框列表 *****/
-  // message1.value = detail
+const show_org_popup = ref(false);
+const org_type = ref('');
+const host_id = ref('');
+// const org_type_columns = ref([]);
+const onOrgTypeChange = (event) => {
+  // const { picker, value, index } = event.detail;
+  // console.warn(value);
+  // console.warn(index);
+  // org_type.value = value.text;
+  // host_id.value = value.id; // 主办方ID
+}
+const onOrgTypeConfirm = (event) => { // 主办方弹框确认按钮回调
+  const detail = event.detail;
+  org_type.value = detail.value.text; // 主办方名称
+  host_id.value = detail.value.id; // 主办方ID
+  show_org_popup.value = false;
+}
+const onOrgTypeCancel = (event) => {
+  show_org_popup.value = false;
 }
 /**************** 上传模块 ******************/
@@ -511,78 +526,113 @@ const confirmEditLimit = () => { // 提交人数限制
   }
 }
+/******* 是否发布 *******/
 const show_publish_popup = ref(false);
+const status = ref('disable'); // disable=未发布，enable=已发布
 const publish_status = ref('暂不发布');
 const columns = ref(['暂不发布', '立即发布']);
 const onPublishChange = (event) => {
-  const { picker, value, index } = event.detail;
+  // const { picker, value, index } = event.detail;
-  console.warn(value);
+  // console.warn(value);
-  console.warn(index);
+  // console.warn(index);
-  publish_status.value = value;
+  // publish_status.value = value;
 }
 const onPublishConfirm = (event) => {
+  const { picker, value, index } = event.detail;
+  // console.warn(value);
+  // console.warn(index);
+  if (index) { // 已发布
+    status.value = 'enable';
+  } else { // 未发布
+    status.value = 'disable';
+  }
+  publish_status.value = value;
   show_publish_popup.value = false;
 }
 const onPublishCancel = (event) => {
   show_publish_popup.value = false;
 }
+/***** 活动方法 *****/
 const show_activity_type_popup = ref(false);
 const activity_type = ref('现场活动');
+const mode = ref('offline'); // offline=现场活动，online=线上活动
 const activity_type_columns = ref(['现场活动', '线上活动']);
 const onActivityTypeChange = (event) => {
-  const { picker, value, index } = event.detail;
+  // const { picker, value, index } = event.detail;
-  console.warn(value);
+  // console.warn(value);
-  console.warn(index);
+  // console.warn(index);
-  activity_type.value = value;
+  // activity_type.value = value;
 }
 const onActivityTypeConfirm = (event) => {
+  const { picker, value, index } = event.detail;
+  if (index) { // 已发布
+    mode.value = 'online';
+  } else { // 现场活动
+    mode.value = 'offline';
+  }
+  activity_type.value = value;
   show_activity_type_popup.value = false;
 }
 const onActivityTypeCancel = (event) => {
   show_activity_type_popup.value = false;
 }
+const address = ref('');
+const onAddressChange = ({ detail }) => {
+  address.value = detail
+}
+
+
+/****** 是否公开显示 ******/
 const show_public_popup = ref(false);
 const public_type = ref('不公开');
+const is_public = ref(0);
 const public_type_columns = ref(['不公开', '公开']);
 const onPublicTypeChange = (event) => {
-  const { picker, value, index } = event.detail;
+  // const { picker, value, index } = event.detail;
-  console.warn(value);
+  // console.warn(value);
-  console.warn(index);
+  // console.warn(index);
-  public_type.value = value;
+  // public_type.value = value;
 }
 const onPublicTypeConfirm = (event) => {
+  const { picker, value, index } = event.detail;
+  if (index) { // 公开
+    is_public.value = 1;
+  } else { // 不公开
+    is_public.value = 0;
+  }
+  public_type.value = value;
   show_public_popup.value = false;
 }
 const onPublicTypeCancel = (event) => {
   show_public_popup.value = false;
 }
-/***** 主办方选择弹框列表 *****/
+const is_inner = ref(0); // 是否允许内部人员报名。1=允许，0=不允许
-const show_org_popup = ref(false);
+const is_black = ref(0); // 是否屏蔽黑名单。1=屏蔽，0=不屏蔽
-const org_type = ref('');
+const onInnerChange = ({ detail }) => {
-const host_id = ref('');
+  is_inner.value = detail
-// const org_type_columns = ref([]);
+};
-const onOrgTypeChange = (event) => {
+const onBlackChange = ({ detail }) => {
-  // const { picker, value, index } = event.detail;
+  is_black.value = detail
-  // console.warn(value);
+};
-  // console.warn(index);
-  // org_type.value = value.text;
-  // host_id.value = value.id; // 主办方ID
-}
-const onOrgTypeConfirm = (event) => { // 主办方弹框确认按钮回调
-  const detail = event.detail;
-  org_type.value = detail.value.text; // 主办方名称
-  host_id.value = detail.value.id; // 主办方ID
-  show_org_popup.value = false;
-}
-const onOrgTypeCancel = (event) => {
-  show_org_popup.value = false;
-}
+const extend = ref(''); // 义工岗位
+const job_post = ref(''); // 义工岗位
+const onExtendChange = ({ detail }) => {
+  job_post.value = detail;
+  extend.value = detail.split('，');
+}
+const onExtendBlur = () => { // TODO：提交时可以才检查一次
+  console.warn(job_post.value.indexOf(','));
+  if (job_post.value.indexOf(',') >= 0) {
+    Toast('请使用中文标点逗号');
+  }
+}
 const onSubmit = () => {
+  console.warn(extend.value);
 }
 </script>