Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f9de97e7 1 parent 843ac575

✨ feat(创建活动): 新增，是否发布，活动方式，活动地址，公开显示，允许内部报名，黑名单，岗位报名功能字段

Inline Side-by-side
Showing 3 changed files with 292 additions and 14 deletions
......@@ -120,3 +120,9 @@
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1rem;
}
.picker-toolbar {
.van-picker__confirm {
color: #199A74;
}
}
......
<!--
* @Date: 2022-09-21 16:04:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-26 09:06:31
* @LastEditTime: 2022-09-26 11:56:39
* @FilePath: /swx/src/pages/createActivity/index.vue
* @Description: 创建活动页面
-->
......@@ -9,7 +9,7 @@
<view>
<van-cell-group inset>
<van-field
:value="value1"
:value="org_type"
label-class="label-class"
input-class="input-class"
label="主办方"
......@@ -20,6 +20,7 @@
inputAlign=""
maxlength=""
type="text"
@tap="show_org_popup=true"
:required="true"
:disabled="true" />
<view class="divide-line"></view>
......@@ -80,12 +81,13 @@
<view class="sign-item" @tap="addSign"><van-icon name="plus" color="" /></view>
</view>
<view class="divide-line"></view>
<view style="background-color: #FFFFFF;">
<view class="advanced-title" style="background-color: #FFFFFF;">
<view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
<text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text>
</view>
</view>
<view>
<view class="advanced-settings-modules">
<!-- 活动时间 -->
<timePickerData
:start-time="startTime"
:end-time="endTime"
......@@ -99,14 +101,16 @@
label="活动时间"
right-icon="arrow-down"
input-align="right"
placeholder="请选择活动时间"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="true"
:required="false"
:disabled="true" />
</timePickerData>
<!-- 报名开始时间 -->
<timePickerData
:start-time="startTime"
:end-time="endTime"
......@@ -120,14 +124,16 @@
label="报名开始时间"
right-icon="arrow-down"
input-align="right"
placeholder="请选择报名开始时间"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="true"
:required="false"
:disabled="true" />
</timePickerData>
<!-- 报名截止时间 -->
<timePickerData
:start-time="startTime"
:end-time="endTime"
......@@ -141,14 +147,16 @@
label="报名截止时间"
right-icon="arrow-down"
input-align="right"
placeholder="请选择报名截止时间"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="true"
:required="false"
:disabled="true" />
</timePickerData>
<!-- 人数限制 -->
<van-field
:value="person_num"
label-class="label-class-super"
......@@ -156,24 +164,189 @@
label="人数限制"
right-icon="arrow-down"
input-align="right"
placeholder="请选择人数限制"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="true"
@tap="show_popup=true"
:required="false"
:disabled="true" />
<!-- 是否发布 -->
<van-field
:value="publish_status"
label-class="label-class-super"
input-class="input-class"
label="是否发布"
right-icon="arrow-down"
input-align="right"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="true"
@tap="show_publish_popup=true"
:required="false"
:disabled="true" />
<!-- 活动方式 -->
<van-field
:value="activity_type"
label-class="label-class-super"
input-class="input-class"
label="活动方式"
right-icon="arrow-down"
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="活动地址"
type="textarea"
placeholder="请输入地址或位置说明"
placeholder-style="color: #999;"
customStyle=""
inputAlign="right"
rightIcon=""
:required="false"
maxlength=""
:border="false"
:autosize="{ maxHeight: 80, minHeight: 20 }"
@change="onChange1"
/>
</view>
<view class="divide-line"></view>
<view>
<view class="form-item" style="padding-right: 0;">
<view style="border-bottom: 1px solid #F2F2F2; overflow: auto;">
<van-row>
<van-col span="12">
<view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
是否公开显示
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
</view>
</van-col>
<van-col span="12">
<view style="">
<van-field
:value="public_type"
label-class="label-class-super"
input-class="input-class"
label=""
right-icon="arrow-down"
input-align="right"
placeholder="请选择"
placeholder-style="color: #999;"
customStyle=""
maxlength=""
type=""
:border="false"
@tap="show_public_popup=true"
:required="false"
:disabled="true" />
</view>
</van-col>
</van-row>
</view>
</view>
<view class="form-item" style="padding-top: 0;">
<view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
<view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
允许内部人员报名活动
<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"
size="1.5rem"
active-color="#199A74"
inactive-color="#FFFFFF"
/>
</view>
</view>
<view class="form-item" style="padding-top: 0;">
<view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
<view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
屏蔽黑名单用户
<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"
size="1.5rem"
active-color="#199A74"
inactive-color="#FFFFFF"
/>
</view>
</view>
<view class="form-item" style="padding-top: 0; padding-right: 0;">
<van-row>
<van-col span="12">
<view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
服务岗位报名
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
</view>
</van-col>
<van-col span="12">
<view style="">
<van-field
:value="message1"
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"
/>
</view>
</van-col>
</van-row>
</view>
</view>
</van-cell-group>
</view>
<view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);">
<view style="padding: 1rem 0; margin: 1rem; margin-top: 0; text-align: center;">
<view style="padding: 1rem 0; margin: 1rem; padding-bottom: 2rem; margin-top: 0; text-align: center;">
<view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view>
</view>
</view>
<!-- 活动主办方弹出框 -->
<van-popup :show="show_org_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<van-picker
:show-toolbar="true"
confirm-button-text="确定"
:columns="org_type_columns"
toolbar-class="picker-toolbar"
@confirm="onOrgTypeConfirm"
@cancel="onOrgTypeCancel"
@change="onOrgTypeChange" />
</van-popup>
<!-- 报名信息弹出框 -->
<van-overlay :show="show_edit_sign" z-index="999">
<view class="wrapper">
<view class="block">
......@@ -238,7 +411,7 @@
</view>
</view>
</van-overlay>
<!-- 人数限制弹出框 -->
<van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<view>
<view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
......@@ -300,16 +473,51 @@
</van-col>
</van-row>
</van-popup>
<!-- 是否发布弹出框 -->
<van-popup :show="show_publish_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<van-picker
:show-toolbar="true"
confirm-button-text="确定"
:columns="columns"
toolbar-class="picker-toolbar"
@confirm="onPublishConfirm"
@cancel="onPublishCancel"
@change="onPublishChange" />
</van-popup>
<!-- 活动方式弹出框 -->
<van-popup :show="show_activity_type_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<van-picker
:show-toolbar="true"
confirm-button-text="确定"
:columns="activity_type_columns"
toolbar-class="picker-toolbar"
@confirm="onActivityTypeConfirm"
@cancel="onActivityTypeCancel"
@change="onActivityTypeChange" />
</van-popup>
<!-- 是否公开显示弹出框 -->
<van-popup :show="show_public_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<van-picker
:show-toolbar="true"
confirm-button-text="确定"
:columns="public_type_columns"
toolbar-class="picker-toolbar"
@confirm="onPublicTypeConfirm"
@cancel="onPublicTypeCancel"
@change="onPublicTypeChange" />
</van-popup>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
// import icon_home1 from '@/images/icon/home01@2x.png'
import icon_upload from '@/images/icon/upload@2x.png'
import icon_vip from '@/images/icon/vip@2x.png'
import timePickerData from "@/components/time-picker-data/picker";
const value1 = ref('');
const message = ref('');
const message1 = ref('');
const checked = ref(false);
const onSubmit = () => {
......@@ -320,6 +528,10 @@ const onChange = ({ detail }) => {
console.warn(detail);
message.value = detail
}
const onChange1 = ({ detail }) => {
// console.warn(detail);
// message1.value = detail
}
/**************** 上传模块 ******************/
const uploader_width = ref('')
......@@ -412,9 +624,6 @@ const addSign = () => {
}
const show_popup = ref(false);
const onClosePopup = () => {
show_popup.value = false;
}
const closeEditLimit = () => {
show_popup.value = false;
}
......@@ -447,13 +656,76 @@ const onResult = (arr) => {
}
const person_num = ref('')
const limit_number = ref(false);
const min_number = ref('');
const max_number = ref('');
const onChangeLimit = ({ detail }) => {
limit_number.value = detail
}
const show_publish_popup = ref(false);
const publish_status = ref('暂不发布');
const columns = ref(['暂不发布', '立即发布']);
const onPublishChange = (event) => {
const { picker, value, index } = event.detail;
console.warn(value);
console.warn(index);
publish_status.value = value;
}
const onPublishConfirm = (event) => {
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 activity_type_columns = ref(['现场活动', '线上活动']);
const onActivityTypeChange = (event) => {
const { picker, value, index } = event.detail;
console.warn(value);
console.warn(index);
activity_type.value = value;
}
const onActivityTypeConfirm = (event) => {
show_activity_type_popup.value = false;
}
const onActivityTypeCancel = (event) => {
show_activity_type_popup.value = false;
}
const show_public_popup = ref(false);
const public_type = ref('不公开');
const public_type_columns = ref(['不公开', '公开']);
const onPublicTypeChange = (event) => {
const { picker, value, index } = event.detail;
console.warn(value);
console.warn(index);
public_type.value = value;
}
const onPublicTypeConfirm = (event) => {
show_public_popup.value = false;
}
const onPublicTypeCancel = (event) => {
show_public_popup.value = false;
}
const show_org_popup = ref(false);
const org_type = 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;
}
const onOrgTypeConfirm = (event) => {
show_org_popup.value = false;
}
const onOrgTypeCancel = (event) => {
show_org_popup.value = false;
}
</script>
<script>
......