新增报名信息模块

hookehuyr
Commit 88bb4bcd7aad56dc230e3adabe6d207866435e63 88bb4bcd 1 parent d7dc21db
Showing 3 changed files with 201 additions and 7 deletions
src/pages/createActivity/index.less
src/pages/createActivity/index.vue
vantComponentConf.js
--- a/src/pages/createActivity/index.less
View file @88bb4bc
+++ b/src/pages/createActivity/index.less
View file @88bb4bc
@@ -37,3 +37,80 @@
     top: -0.5rem;
   }
 }
+
+.form-item {
+  padding: 0.5rem 1rem;
+  background-color: #FFFFFF;
+  .form-item-title {
+    font-size: 1rem;
+    &.border {
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #F2F2F2;
+    }
+    &.required::before {
+      color: red;
+      content: "*";
+      font-size: 0.9rem;
+      left: 0.5rem;
+      position: absolute;
+    }
+    .sub {
+      color: #999;
+    }
+  }
+}
+
+.sign-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #FFFFFF;
+  padding-bottom: 1rem;
+  .sign-item {
+    flex: 1;
+    width: 27%;
+    min-width: 27%;
+    max-width: 27%;
+    border: 1px solid #999999;
+    color: #999999;
+    margin: 1rem;
+    margin-right: 0;
+    margin-bottom: 0;
+    text-align: center;
+    padding: 0.5rem 0;
+    text {
+      position: relative;
+      &.required::before {
+        color: red;
+        content: "*";
+        font-size: 0.9rem;
+        left: -0.5rem;
+        position: absolute;
+      }
+    }
+    &.checked {
+      border: 1px solid #199A74;
+      color: #199A74;
+    }
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  background-color: #fff;
+  border-radius: 0.6rem;
+}
+
+.bg-gradient {
+  background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
+  /*调整下划线的宽度占百分之百  高度是3px */
+  background-size: 100% 1vw;
+  /* 调整下划线的起始位置 左侧是0 上边是1.15em */
+  background-position: 0 1rem;
+}
--- a/src/pages/createActivity/index.vue
View file @88bb4bc
+++ b/src/pages/createActivity/index.vue
View file @88bb4bc
 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-21 18:15:10
+ * @LastEditTime: 2022-09-22 14:47:45
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
 <template>
   <view>
     <van-cell-group inset>
-      <van-field :value="value1"
+      <van-field
+        :value="value1"
         label-class="label-class"
         input-class="input-class"
         label="主办方"
@@ -33,8 +34,8 @@
         @change="onChange"
       />
       <view class="divide-line"></view>
-      <view style="padding: 0.5rem; background-color: #FFFFFF;">
+      <view class="form-item">
-        <view class="uploader-title" style="font-size: 1rem;"><text style="color: red;">*</text>活动封面图<text style="color: #999;">（图片比例16:9展示最佳）</text></view>
+        <view class="form-item-title required">活动封面图<text class="sub">（图片比例16:9展示最佳）</text></view>
         <van-uploader v-if="!has_image" @after-read="afterRead">
           <view class="upload-box" :style="uploaderStyle">
             <van-icon :name="icon_upload" size="5rem" class="upload-icon" />
@@ -45,17 +46,90 @@
           <van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
         </view>
       </view>
+      <view class="divide-line"></view>
+      <view class="form-item">
+        <view class="form-item-title border">活动详情</view>
+        <van-field
+          :value="message"
+          input-class="input-class"
+          label=""
+          type="textarea"
+          placeholder="开始输入活动详情介绍"
+          :autosize="{ maxHeight: 200, minHeight: 100 }"
+          custom-style="padding-left: 0;"
+        />
+      </view>
+      <view class="divide-line"></view>
+      <view class="form-item">
+        <view class="form-item-title">报名信息<text class="sub">（ <text style="color: red;">*</text>为必填项，单击启用，长按修改）</text></view>
+      </view>
+      <view class="sign-box">
+        <view @tap="onTapSign(item)" @longpress="onLongPressSign(item)" v-for="(item, index) in signInfo" :key="index" class="sign-item" :class="{ 'checked': item.checked }"><text class="required">{{ item.label }}</text></view>
+        <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
+        <view class="sign-item"><van-icon name="plus" /></view>
+      </view>
     </van-cell-group>
   </view>
   <view @tap="onSubmit">确定发布</view>
+  <van-overlay :show="show_edit_sign" z-index="999">
+    <view class="wrapper">
+      <view class="block">
+        <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
+          <text class="bg-gradient" style="font-size: 1.15rem;">报名信息</text>
+        </view>
+        <!-- <view>
+          <AtInput
+            name='value1'
+            title='标准五个字'
+            type='text'
+            placeholder='使用 v-model:value 更新 value 值'
+            v-model:value="value1"
+          />
+        </view> -->
+        <view style="width: 22rem;">
+          <van-field
+            :value="message"
+            label-class="label-class"
+            input-class="input-class"
+            rows="1"
+            autosize
+            label="字段名称"
+            type="textarea"
+            placeholder="请输入字段名称（6个字以内）"
+            placeholder-style="color: #999;"
+            :required="true"
+            :maxlength="6"
+            :border="true"
+            @change="onChange"
+          />
+          <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
+            <view class="form-item-title" style="float: left; padding-top: 0.5rem;">是否必填</view>
+            <van-switch
+              style="float: right; padding-top: 0.5rem;"
+              :checked="checked"
+              @change="onChangeEdit"
+              size="1.5rem"
+              active-color="#199A74"
+              inactive-color="#FFFFFF"
+            />
+          </view>
+          <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
+            <view @tap="closeEditSign" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </van-overlay>
 </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'
+
 const value1 = ref('');
 const message = ref('');
+const checked = ref(false);
 const onSubmit = () => {
   console.warn(message.value);
@@ -87,7 +161,7 @@ onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
       // 获取元素宽度
-      wx.createSelectorQuery().selectAll('.uploader-title').boundingClientRect(function (rect) {
+      wx.createSelectorQuery().selectAll('.form-item-title').boundingClientRect(function (rect) {
         uploaderStyle.value = {
           width: rect[0].width - 8 + 'px'
         }
@@ -95,7 +169,49 @@ onMounted(() => {
       }).exec()
     }, 100)
   })
-})
+});
+
+const signInfo = ref([{
+  key: 'name',
+  label: '姓名',
+  checked: 1,
+  required: 1
+}, {
+  key: 'phone',
+  label: '手机号',
+  checked: 1,
+  required: 1
+}, {
+  key: 'sex',
+  label: '性别',
+  checked: 1,
+  required: 1
+}, {
+  key: 'age',
+  label: '年龄段',
+  checked: 1,
+  required: 1
+}]);
+
+const onTapSign = (item) => {
+  item.checked = !item.checked
+}
+
+const onLongPressSign = (item) => {
+  console.warn(item);
+  show_edit_sign.value = true;
+}
+
+const show_edit_sign = ref(false)
+
+const onChangeEdit = ({ detail }) => {
+  console.warn(detail);
+  checked.value = detail;
+}
+
+const closeEditSign = () => {
+  show_edit_sign.value = false;
+}
 </script>
--- a/vantComponentConf.js
View file @88bb4bc
+++ b/vantComponentConf.js
View file @88bb4bc
 /*
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-21 16:12:09
+ * @LastEditTime: 2022-09-22 14:02:05
  * @FilePath: /swx/vantComponentConf.js
  * @Description: 文件描述
  */
@@ -32,6 +32,7 @@ const vantComponentNames = [
   "checkbox",
   "transition",
   "uploader",
+  "switch",
 ];
 module.exports = vantComponentNames;