完成了表单校验

src/styles/style.css

@@ -28,7 +28,7 @@
 .title {
     height: 50px;
     line-height: 50px;
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 700;
     padding-left: 20px;
     border-bottom: 1px solid #eee;

src/views/activityMan/differentbelievers/ReligiousPeopleReportList.vue

@@ -6,6 +6,7 @@
     left-arrow
     @click-left="onClickLeft"
     @click-right="onClickRight"
+    :style="{ 'background-color': selectColor }"
   >
     <template #right>
       <van-icon name="plus" size="18" />
@@ -145,6 +146,8 @@ export default {
     const onClickLeft = () => {
       history.back();
     };
+    // 导航栏颜色
+    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
     // 上报
     const onClickRight = () => {
       router.push("/differentbelievers");
@@ -226,8 +229,8 @@ export default {
       searchVal.value = "";
       searchShow.value = false;
     };
-   // 删除
-   const deleteItem = (val) => {
+    // 删除
+    const deleteItem = (val) => {
       xm.showConfirm({
         title: "删除确认",
         message: "确认删除该记录",
@@ -266,6 +269,7 @@ export default {
     return {
       active,
       onClickLeft,
+      selectColor,
       list,
       readList,
       onLoad,

src/views/activityMan/differentbelievers/ReligiousPeopleReportView.vue

@@ -9,12 +9,20 @@
   <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
   <div class="main" v-if="!isLoading">
     <p class="title">信教异常群众上报</p>
-    <div class="formArea">
+    <van-form
+      class="formArea"
+      @submit="submit"
+      show-error
+      :show-error-message="false"
+      validate-trigger="onChange"
+    >
       <p class="miniTitle">基础信息</p>
       <van-cell-group>
         <van-field
           v-model="inputForm.abnormalName"
           center
+          required
+          :rules="[{ required: true }]"
           label="异常人员:"
           placeholder="请填写异常人员姓名"
           input-align="right"
@@ -24,6 +32,8 @@
         <van-field
           v-model="inputForm.abnormalIdcar"
           center
+          required
+          :rules="[{ required: true }]"
           label="身份证号:"
           placeholder="请填写身份证号"
           input-align="right"
@@ -34,6 +44,8 @@
         <van-field
           v-model="inputForm.abnormalPhone"
           center
+          required
+          :rules="[{ required: true }]"
           label="手机号:"
           placeholder="请填写手机号"
           input-align="right"
@@ -41,22 +53,30 @@
         />
       </van-cell-group>
       <van-cell-group>
-        <van-cell title="性别:">
-          <template #right-icon>
+        <van-field
+          name="radio"
+          label="性别:"
+          required
+          :rules="[{ required: true }]"
+          input-align="right"
+        >
+          <template #input>
             <van-radio-group v-model="inputForm.sex" direction="horizontal">
               <van-radio name="1">男</van-radio>
               <van-radio name="2">女</van-radio>
             </van-radio-group>
           </template>
-        </van-cell>
+        </van-field>
       </van-cell-group>
       <van-cell-group>
         <van-field
           v-model="inputForm.nativePlace"
           center
           readonly
+          required
+          :rules="[{ required: true }]"
           label="籍贯:"
-          placeholder="请选择"
+          placeholder="请选择籍贯"
           input-align="right"
           right-icon="arrow-down"
           @click="showArea = true"
@@ -76,8 +96,10 @@
           v-model="inputForm.currentResidence"
           center
           readonly
+          required
+          :rules="[{ required: true }]"
           label="现居地:"
-          placeholder="请选择"
+          placeholder="请选择现居地"
           input-align="right"
           right-icon="arrow-down"
           @click="showCurrentArea = true"
@@ -115,11 +137,11 @@
           />
         </div>
       </van-cell-group>
-    </div>
-    <div class="subbtn">
-      <van-button type="primary" @click="submit">提交</van-button>
-      <van-button type="default" hairline>取消</van-button>
-    </div>
+      <div class="subbtn">
+        <van-button type="primary" native-type="submit">提交</van-button>
+        <van-button type="default" hairline>取消</van-button>
+      </div>
+    </van-form>
   </div>
 </template>
     
@@ -141,7 +163,7 @@ export default {
       id: "",
       abnormalName: "",
       abnormalIdcar: "",
-      sex: "",
+      sex: "1",
       abnormalPhone: "",
       nativePlace: "",
       currentResidence: "",
@@ -223,9 +245,6 @@ export default {
 </script>
     
 <style scoped>
-.van-cell__value .van-field__right-icon .van-icon-location {
-  color: #36a7f3 !important;
-}
 .rowTextArea::v-deep .van-field__value {
   width: 98%;
   border: 2px solid #ccc;
@@ -235,16 +254,7 @@ export default {
 .rowTextArea::v-deep .van-cell {
   display: flow-root;
 }
-.van-uploader .van-button {
-  border: none;
-  color: #36a7f3;
-  top: -4px;
-}
 .van-radio {
   margin-right: 10px;
 }
-.van-loading {
-  text-align: center;
-  margin-top: 80px;
-}
 </style>

src/views/activityMan/placeactivity/placeActivityList.vue

@@ -13,23 +13,17 @@
     </template>
   </van-nav-bar>
   <div class="main">
-    <div class="search-area">
-      <van-search
-        v-model="searchVal"
-        clearable
-        show-action
-        shape="round"
-        placeholder="请输入搜索关键词"
-        label="活动名称"
-        input-align="center"
-        @search="onSearch"
-        @cancel="onCancel"
-      >
-      </van-search>
-      <van-dropdown-menu :overlay="false">
-        <van-dropdown-item title="点击更多搜索项"> </van-dropdown-item>
-      </van-dropdown-menu>
-    </div>
+    <van-search
+      v-model="searchVal"
+      clearable
+      show-action
+      shape="round"
+      label="活动名称"
+      placeholder="请输入搜索关键词"
+      input-align="center"
+      @search="onSearch"
+      @cancel="onCancel"
+    />
     <van-tabs
       v-show="!searchShow"
       v-model:active="active"
@@ -380,4 +374,13 @@ export default {
 </script>
 
 <style scoped>
+/* .search-area {
+  display: flex;
+}
+.tab-menu {
+  width: 20%;
+}
+.search-item {
+  width: 80%;
+} */
 </style>

src/views/activityMan/placeactivity/placeActivityView.vue

@@ -9,7 +9,13 @@
   <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
   <div class="main" v-show="!isLoading">
     <p class="title">场所活动上报</p>
-    <div class="formArea">
+    <van-form
+      class="formArea"
+      @submit="submit"
+      show-error
+      :show-error-message="false"
+      validate-trigger="onChange"
+    >
       <p class="miniTitle">基础信息</p>
       <van-cell-group>
         <van-field
@@ -26,8 +32,9 @@
           v-model="placeActivity.siteName.name"
           readonly
           required
+          :rules="[{ required: true }]"
           label="场所名称:"
-          placeholder="请选择"
+          placeholder="请选择场所名称"
           input-align="right"
           right-icon="arrow-down"
           @click="showPlace = true"
@@ -85,6 +92,7 @@
           v-model="placeActivity.knownList.name"
           center
           required
+          :rules="[{ required: true }]"
           label="已知名单:"
           placeholder="请选择参会已知名单"
           input-align="right"
@@ -215,11 +223,13 @@
           </template>
         </van-field>
       </van-cell-group>
-    </div>
-    <div class="subbtn">
-      <van-button type="primary" @click="submit">提交</van-button>
-      <van-button type="default" hairline @click="onClickLeft">暂存</van-button>
-    </div>
+      <div class="subbtn">
+        <van-button type="primary" native-type="submit">提交</van-button>
+        <van-button type="default" hairline @click="onClickLeft"
+          >暂存</van-button
+        >
+      </div>
+    </van-form>
   </div>
 </template>
 

src/views/activityMan/selfMeetingReport/selfMeetingList.vue

@@ -7,6 +7,7 @@
     left-arrow
     @click-left="onClickLeft"
     @click-right="onClickRight"
+    :style="{ 'background-color': selectColor }"
   >
     <template #right>
       <van-icon name="plus" size="18" />
@@ -15,15 +16,25 @@
   <div class="main">
     <van-search
       v-model="searchVal"
+      readonly
       clearable
       show-action
       shape="round"
-      placeholder="请输入搜索关键词"
+      placeholder="请选择地点"
       label="地点"
       input-align="center"
-      @search="onSearch"
       @cancel="onCancel"
-    />
+      @click-input="showArea = true"
+    /><van-popup v-model:show="showArea" round position="bottom">
+      <van-cascader
+        v-model="cascaderValue"
+        title="请选择所在地区"
+        :options="options"
+        @close="showArea = false"
+        @finish="onFinish"
+        :field-names="fieldNames"
+      />
+    </van-popup>
     <van-tabs
       v-show="!searchShow"
       v-model:active="active"
@@ -153,12 +164,15 @@
 import { ref } from "vue";
 import PrivatePartyPointService from "@/api/privateparty/PrivatePartyPointService";
 import { useRouter } from "vue-router";
+import tools from "@/api/sys/tools";
 export default {
   name: "selfMeetingList",
   setup() {
     const onClickLeft = () => {
       history.back();
     };
+    // 导航栏颜色
+    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
     // 上报
     const onClickRight = () => {
       router.push("/selfMeeting");
@@ -217,11 +231,23 @@ export default {
           index1++;
         });
     };
-    // 搜索
-    let searchShow = ref(false);
-    let searchList = ref([]);
-    const searchVal = ref("");
-    const onSearch = () => {
+    // 地区选择
+    let showArea = ref(false);
+    const cascaderValue = ref("");
+    const fieldNames = {
+      text: "name",
+      value: "code",
+      children: "children",
+    };
+    // 选项列表，children 代表子选项，支持多级嵌套
+    let options = ref([]);
+    new tools().treeData().then((res) => {
+      options.value.push(res[0]);
+    });
+    // 全部选项选择完毕后，会触发 finish 事件
+    const onFinish = ({ selectedOptions }) => {
+      showArea.value = false;
+      searchVal.value = selectedOptions.map((option) => option.name).join("/");
       searchShow.value = true;
       searchList.value = [];
       new PrivatePartyPointService()
@@ -236,6 +262,13 @@ export default {
           loading.value = false;
         });
     };
+    // 搜索
+    let searchShow = ref(false);
+    let searchList = ref([]);
+    const searchVal = ref("");
+    // const onSearch = () => {
+
+    // };
     const onCancel = () => {
       searchVal.value = "";
       searchShow.value = false;
@@ -280,6 +313,7 @@ export default {
     return {
       active,
       onClickLeft,
+      selectColor,
       list,
       readList,
       onLoad,
@@ -288,10 +322,16 @@ export default {
       onLoad1,
       loading1,
       finished1,
+      // 地区选择
+      showArea,
+      fieldNames,
+      options,
+      onFinish,
+      cascaderValue,
       searchShow,
       searchVal,
       searchList,
-      onSearch,
+      // onSearch,
       onCancel,
       onClickRight,
       updateItem,

src/views/activityMan/selfMeetingReport/selfMeetingView.vue

@@ -9,13 +9,20 @@
   <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
   <div class="main" v-show="!isLoading">
     <p class="title">私设聚会点上报</p>
-    <div class="formArea">
+    <van-form
+      class="formArea"
+      @submit="submit"
+      show-error
+      :show-error-message="false"
+    >
       <p class="miniTitle">基础信息</p>
       <van-cell-group>
         <van-field
           v-model="inputForm.placeSelectName"
           center
           readonly
+          required
+          :rules="[{ required: true }]"
           label="地点:"
           placeholder="请填写参加地点"
           input-align="right"
@@ -85,6 +92,7 @@
           v-model="inputForm.relatedPersons.name"
           center
           required
+          :rules="[{ required: true }]"
           label="相关人:"
           placeholder="请选择相关人"
           input-align="right"
@@ -107,11 +115,11 @@
           </template>
         </van-field>
       </van-cell-group>
-    </div>
-    <div class="subbtn">
-      <van-button type="primary" @click="submit">提交</van-button>
-      <van-button type="default" hairline>取消</van-button>
-    </div>
+      <div class="subbtn">
+        <van-button type="primary" native-type="submit">提交</van-button>
+        <van-button type="default" hairline>取消</van-button>
+      </div>
+    </van-form>
   </div>
 </template>