创建活动页面调整报名信息模块功能

 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-17 13:56:03
+ * @LastEditTime: 2022-10-17 16:15:25
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -31,9 +31,6 @@
       <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="" inputAlign="" maxlength="" placeholderStyle=""
-          rightIcon="" type="textarea" placeholder="开始输入活动详情介绍" :autosize="{ maxHeight: 200, minHeight: 100 }"
-          custom-style="padding-left: 0;" /> -->
         <activity-editor name="editor" :showTabBar="true" placeholder="开始输入活动详情介绍"></activity-editor>
       </view>
       <view class="divide-line"></view>
@@ -43,7 +40,7 @@
       </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>
+          class="sign-item" :class="{ 'checked': item.checked }"><text :class="{ 'required': item.required }">{{ item.label }}</text></view>
         <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
         <view class="sign-item" @tap="addSign">
           <van-icon name="plus" color="" />
@@ -186,12 +183,12 @@
           />
         </view> -->
         <view style="width: 22rem;">
-          <van-field :value="message" label-class="label-class" input-class="input-class" rows="1" autosize label="字段名称"
+          <van-field :value="sign_filed.name" label-class="label-class" input-class="input-class" rows="1" autosize label="字段名称"
             type="textarea" placeholder="请输入字段名称（6个字以内）" placeholder-style="color: #999;" customStyle="" inputAlign=""
-            rightIcon="" :required="true" :maxlength="6" :border="true" @change="onChange" />
+            rightIcon="" :required="true" :maxlength="6" :border="true" @change="onFiledChange" />
           <view class="form-item border">
             <view class="form-item-title fix">是否必填</view>
-            <van-switch style="float: right; padding-top: 0.5rem;" :checked="checked" @change="onChangeEdit"
+            <van-switch style="float: right; padding-top: 0.5rem;" :checked="sign_filed.checked" @change="onChangeEdit"
               size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
           </view>
           <van-row>
@@ -268,6 +265,8 @@
       toolbar-class="picker-toolbar" @confirm="onPublicTypeConfirm" @cancel="onPublicTypeCancel"
       @change="onPublicTypeChange" />
   </van-popup>
+
+  <van-toast id="van-toast" />
 </template>
 
 <script setup>
@@ -283,6 +282,8 @@ import request from '../../utils/request';
 import Taro from '@tarojs/taro'
 import mixin from '../../utils/mixin';
 import BASE_URL from '@/utils/config';
+import Toast from '@/components/vant-weapp/toast/toast';
+import { randomId } from '@/utils/tools'
 
 const message = ref('');
 const message1 = ref('');
@@ -307,6 +308,10 @@ const uploaderStyle = ref({})
 const has_image = ref(false)
 const uploader_image = ref('')
 const afterRead = (event) => {
+  wx.showLoading({
+    title: '上传中',
+    mask: true
+  });
   const { file } = event.detail;
   // 获取上传URL
   wx.uploadFile({
@@ -365,60 +370,91 @@ onMounted(() => {
   defaultTime = getTime("min", 30);
 });
 
+/******** 报名信息 ********/
 const signInfo = ref([{
   key: 'name',
   label: '姓名',
   checked: 1,
-  required: 1
+  required: 1,
+  nop: true
 }, {
   key: 'phone',
   label: '手机号',
   checked: 1,
-  required: 1
+  required: 1,
+  nop: true
 }, {
-  key: 'sex',
+  key: 'gender',
   label: '性别',
   checked: 1,
-  required: 1
+  required: 1,
+  nop: true
 }, {
-  key: 'age',
+  key: 'age_group',
   label: '年龄段',
   checked: 1,
-  required: 1
+  required: 1,
+  nop: true
 }]);
 
-const onTapSign = (item) => {
-  item.checked = !item.checked
+const onTapSign = (item) => { // 点击取消
+  if (item.nop) return false; // 如果是固定字段不能操作
+  item.checked = !item.checked;
 }
 
-const onLongPressSign = (item) => {
-  console.warn(item);
+const onLongPressSign = (item) => { // 长按编辑
+  if (item.nop) return false; // 如果是固定字段不能操作
+  // console.warn(item);
+  sign_filed.value.key = item.key;
+  sign_filed.value.name = item.label;
+  sign_filed.value.required = item.required;
   show_edit_sign.value = true;
 }
 
-const show_edit_sign = ref(false)
-
+// 报名信息弹框
+const show_edit_sign = ref(false);
+const sign_filed = ref({}); // 临时报名
+const onFiledChange = ({ detail }) => {
+  sign_filed.value.name = detail;
+}
 const onChangeEdit = ({ detail }) => {
-  console.warn(detail);
-  checked.value = detail;
+  sign_filed.value.checked = detail;
 }
-
 const closeEditSign = () => {
   show_edit_sign.value = false;
 }
-const confirmEditSign = () => {
-  show_edit_sign.value = false;
-  signInfo.value.push({
-    key: 'person',
-    label: '推荐人',
-    checked: 1,
-    required: 1
-  })
+const confirmEditSign = () => { // 确认报名信息回调
+  if (!sign_filed.value.name) {
+    Toast.fail('字段不能为空');
+  } else {
+    show_edit_sign.value = false;
+    // 如果key值存在修改，key值不存在新增
+    const result = signInfo.value.filter(item => item.key === sign_filed.value.key);
+    if (result.length) {
+      signInfo.value.forEach(item => {
+        if (item.key === sign_filed.value.key) { // key值相同
+          item.label = sign_filed.value.name;
+          item.required = sign_filed.value.checked;
+        }
+      })
+    } else {
+      signInfo.value.push({
+        key: randomId(5),
+        label: sign_filed.value.name,
+        checked: 1,
+        required: sign_filed.value.checked ? 1 : 0,
+        nop: false
+      });
+    }
+  }
 }
 
-const addSign = () => {
+const addSign = () => { // 新增-报名信息弹框
   show_edit_sign.value = true;
+  sign_filed.value.name = '';
+  sign_filed.value.checked = false;
 }
+/****************************/
 
 const show_popup = ref(false);
 const closeEditLimit = () => {

 /*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-30 13:54:32
- * @FilePath: /tswj/src/utils/tools.js
+ * @LastEditTime: 2022-10-17 15:27:10
+ * @FilePath: /swx/src/utils/tools.js
  * @Description: 文件描述
  */
 import dayjs from 'dayjs';
@@ -14,7 +14,7 @@ const formatDate = (date) => {
 
 /**
  * @description 判断浏览器属于平台
- * @returns 
+ * @returns
  */
 const wxInfo = () => {
   let u = navigator.userAgent;
@@ -32,7 +32,7 @@ const wxInfo = () => {
 /**
  * @description 判断多行省略文本
  * @param {*} id 目标dom标签
- * @returns 
+ * @returns
  */
 const hasEllipsis = (id) => {
   let oDiv = document.getElementById(id);
@@ -45,8 +45,8 @@ const hasEllipsis = (id) => {
 
 /**
  * @description 解析URL参数
- * @param {*} url 
- * @returns 
+ * @param {*} url
+ * @returns
  */
 const parseQueryString = url => {
   var json = {};
@@ -71,4 +71,15 @@ const strExist = (array, str) => {
   return exist.length > 0
 }
 
-export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist };
+const randomId = (n) => {
+  const charts = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+  var res = '';
+  for (var i = 0; i < n; i++) {
+    undefined
+    var id = Math.ceil(Math.random() * 35);
+    res += charts[id];
+  }
+  return res;
+}
+
+export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, randomId };