异常群众上报表单页

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@vant/area-data": "^1.4.1",
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
     "normalize.css": "^8.0.1",

src/main.js

@@ -8,7 +8,7 @@ import axios from 'axios';
 
 
 
-import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs, Popup, PickerGroup, DatePicker, TimePicker, Picker, Uploader, Dialog, List, Cell, Cascader, Search } from 'vant';
+import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs, Popup, PickerGroup, DatePicker, TimePicker, Picker, Uploader, Dialog, List, Cell, Cascader, Search, RadioGroup, Radio } from 'vant';
 import 'vant/lib/index.css';
 import store from './store';
 
@@ -43,6 +43,8 @@ app.use(router)
     .use(Cell)
     .use(Cascader)
     .use(Search)
+    .use(RadioGroup)
+    .use(Radio)
 
 app.config.globalProperties.$API = api
 app.config.globalProperties.$axios = axios

src/router/index.js

@@ -96,6 +96,14 @@ const routes = [{
         meta: {
             isShowTarbar: true,
         }
+    }, {
+        path: '/abnormalCrowd',
+        name: 'abnormalCrowd',
+        component: () =>
+            import ('../views/activityMan/abnormalcrowd/abnormalCrowdView.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
     }, {
         path: '/setting',
         name: 'setting',

src/views/activityMan/abnormalcrowd/abnormalCrowdView.vue

@@ -0,0 +1,256 @@
+<template>
+  <van-nav-bar
+    title="信息上报中心"
+    left-text=""
+    left-arrow
+    @click-left="onClickLeft"
+  />
+  <div class="main">
+    <p class="title">信教异常群众上报</p>
+    <div class="formArea">
+      <p class="miniTitle">基础信息</p>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.count"
+          center
+          label="异常人员:"
+          placeholder="请填写异常人员姓名"
+          input-align="right"
+          type="digit"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.count"
+          center
+          label="身份证号:"
+          placeholder="请填写身份证号"
+          input-align="right"
+          type="digit"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.count"
+          center
+          label="手机号:"
+          placeholder="请填写手机号"
+          input-align="right"
+          type="tel"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-cell title="性别:">
+          <template #right-icon>
+            <van-radio-group v-model="checked" direction="horizontal">
+              <van-radio name="1">男</van-radio>
+              <van-radio name="2">女</van-radio>
+            </van-radio-group>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.place"
+          center
+          readonly
+          label="籍贯:"
+          placeholder="请选择"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showArea = true"
+        />
+        <van-popup v-model:show="showArea" round position="bottom">
+          <van-cascader
+            v-model="cascaderValue"
+            title="请选择籍贯"
+            :options="options"
+            @close="showArea = false"
+            @finish="onFinish"
+          />
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.place"
+          center
+          readonly
+          label="现居地:"
+          placeholder="请选择"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showArea = true"
+        />
+        <van-popup v-model:show="showArea" round position="bottom">
+          <van-cascader
+            v-model="cascaderValue"
+            title="请选择现居地"
+            :options="options"
+            @close="showArea = false"
+            @finish="onFinish"
+          />
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.address"
+          center
+          label="详细地址:"
+          placeholder="请填写具体地址"
+          input-align="right"
+          right-icon="location"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <div class="rowTextArea">
+          <van-field
+            v-model="inputForm.into"
+            placeholder="请填写异常行为"
+            center
+            rows="2"
+            type="textarea"
+            label="异常行为:"
+            label-align="top"
+          />
+        </div>
+      </van-cell-group>
+    </div>
+    <div class="subbtn">
+      <van-button type="primary">提交</van-button>
+      <van-button type="default" hairline>取消</van-button>
+    </div>
+  </div>
+</template>
+    
+    <script>
+import { reactive, ref } from "vue";
+import { useCascaderAreaData } from "@vant/area-data";
+import personList from "../personList.vue";
+export default {
+  components: { personList },
+  setup() {
+    // 返回
+    const onClickLeft = () => {
+      history.back();
+    };
+    // 活动信息
+    const inputForm = reactive({
+      place: "",
+      count: "",
+      time: "",
+      person: "",
+      place: "",
+      address: "",
+      into: "",
+    });
+    // 获取活动时间
+    let showAct = ref(false);
+    let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
+    let currentTime = ref(["00", "00"]);
+    const getTime = () => {
+      showAct.value = false;
+      inputForm.time = `${currentDate.value.join("-")} ${currentTime.value.join(
+        ":"
+      )}`;
+    };
+    // 相关人
+    let showPerson = ref(false);
+    let list = "";
+    const selected = (val) => {
+      list = val;
+    };
+    const reselected = () => {
+      inputForm.person = list;
+    };
+    // 地区选择
+    let showArea = ref(false);
+    const cascaderValue = ref("");
+    // 选项列表，children 代表子选项，支持多级嵌套
+    const options = useCascaderAreaData();
+    // 全部选项选择完毕后，会触发 finish 事件
+    const onFinish = ({ selectedOptions }) => {
+      showArea.value = false;
+      inputForm.place = selectedOptions.map((option) => option.text).join("/");
+    };
+    // 性别
+    let checked = ref("1");
+    return {
+      inputForm,
+      // 活动时间
+      showAct,
+      currentDate,
+      currentTime,
+      getTime,
+      // 返回
+      onClickLeft,
+      // 人员选择
+      showPerson,
+      selected,
+      reselected,
+      // 地区选择
+      showArea,
+      options,
+      onFinish,
+      cascaderValue,
+      checked,
+    };
+  },
+};
+</script>
+    
+    <style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+.main p {
+  height: 40px;
+  line-height: 40px;
+  color: #36a7f3;
+  border-bottom: 1px solid #eee;
+}
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  padding-left: 20px;
+}
+.miniTitle {
+  font-size: 16px;
+}
+.formArea {
+  padding: 0px 20px;
+}
+.formArea .van-cell-group .van-field__label {
+  height: 40px;
+}
+.formArea .van-cell-group .van-cell {
+  line-height: 40px;
+}
+.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;
+  border-radius: 10px;
+}
+.rowTextArea::v-deep .van-cell {
+  display: flow-root;
+}
+.subbtn {
+  margin: 20px;
+  text-align: center;
+}
+.subbtn .van-button {
+  width: 40%;
+  margin: 5px;
+}
+.van-uploader .van-button {
+  border: none;
+  color: #36a7f3;
+  top: -4px;
+}
+.van-radio {
+  margin-right: 10px;
+}
+</style>

src/views/tab_a/tabAll.vue

@@ -56,7 +56,7 @@
 	<van-grid :border="false" >
 		<van-grid-item icon="photo-o" to="/placeActivityList" text="场所活动" />
 		<van-grid-item icon="photo-o" to="/selfMeetingList" text="私设聚会点" />
-		<van-grid-item icon="photo-o" text="信教群众异常" />
+		<van-grid-item icon="photo-o" to="/abnormalCrowd" text="信教群众异常" />
 		<van-grid-item icon="photo-o" text="场所检查" />
 		<van-grid-item icon="photo-o" text="安防设施异常" />
 		<van-grid-item icon="photo-o" text="负责人会议" />