完成了场所活动和私设聚会的基本布局

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

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 } 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 } from 'vant';
 import 'vant/lib/index.css';
 import store from './store';
 
@@ -38,6 +38,11 @@ app.use(router)
     .use(TimePicker)
     .use(Picker)
     .use(Uploader)
+    .use(Dialog)
+    .use(List)
+    .use(Cell)
+    .use(Cascader)
+    .use(Search)
 
 app.config.globalProperties.$API = api
 app.config.globalProperties.$axios = axios

src/router/index.js

@@ -56,7 +56,15 @@ const routes = [{
         meta: {
             isShowTarbar: true,
         }
-    }, , {
+    }, {
+        path: '/placeActivityList',
+        name: 'placeActivityList',
+        component: () =>
+            import ('../views/activityMan/placeactivity/placeActivityList.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
         path: '/placeActivity',
         name: 'placeActivity',
         component: () =>
@@ -64,6 +72,22 @@ const routes = [{
         meta: {
             isShowTarbar: true,
         }
+    }, {
+        path: '/selfMeetingList',
+        name: 'selfMeetingList',
+        component: () =>
+            import ('../views/activityMan/selfMeetingReport/selfMeetingList.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/selfMeeting',
+        name: 'selfMeeting',
+        component: () =>
+            import ('../views/activityMan/selfMeetingReport/selfMeetingView.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
     }, {
         path: '/setting',
         name: 'setting',

src/views/activityMan/personList.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="personList">
+    <van-search
+      v-model="value"
+      show-action
+      placeholder="请输入搜索关键词"
+      @search="onSearch"
+      @cancel="onCancel"
+    />
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-cell title="全选">
+        <template #right-icon>
+          <input type="checkbox" v-model="isAll" @change="selectAll" />
+        </template>
+      </van-cell>
+      <van-cell v-for="(item, index) in list" :key="item" :title="item">
+        <template #right-icon>
+          <input
+            type="checkbox"
+            :ref="getList"
+            @change="selectPerson(item, index)"
+          />
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { ref, toRef } from "vue";
+
+export default {
+  name: "personList",
+  emits: ["selected"],
+  setup(props, { emit }) {
+    const list = [];
+    const loading = ref(false);
+    const finished = ref(false);
+
+    const onLoad = () => {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          list.push(list.length + 1);
+        }
+
+        // 加载状态结束
+        loading.value = false;
+
+        // 数据全部加载完成
+        if (list.length >= 10) {
+          finished.value = true;
+        }
+      }, 1000);
+    };
+    // 搜索
+    const value = ref("");
+    const onSearch = (val) => showToast(val);
+    const onCancel = () => showToast("取消");
+    // 选择人员
+    let selects = [];
+    // 全选
+    let isAll = ref(false);
+    let checks = [];
+    const getList = (el) => {
+      checks.push(el);
+    };
+    const selectAll = () => {
+      checks.forEach((item) => {
+        item.checked = isAll.value;
+      });
+      if (isAll) {
+        selects = list;
+      } else {
+        selects = [];
+      }
+      emit("selected", selects.join(","));
+    };
+    const selectPerson = (value, index) => {
+      if (checks[index].checked) {
+        selects.push(value);
+      } else {
+        selects.splice(selects.indexOf(value), 1);
+      }
+
+      if (selects.length == getList.length) {
+        isAll.value = true;
+      } else {
+        isAll.value = false;
+      }
+      emit("selected", selects.join(","));
+    };
+    return {
+      list,
+      onLoad,
+      loading,
+      finished,
+      selectPerson,
+      value,
+      onSearch,
+      onCancel,
+      selectAll,
+      getList,
+      isAll,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.personList {
+  height: 65vh;
+  overflow: auto;
+  margin: 10px;
+}
+.van-button {
+  top: -5px;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+}
+.van-list {
+  height: 80%;
+  margin-top: 5px;
+}
+.keyword {
+  width: 70%;
+  height: 25px;
+  border-radius: 25px;
+  border: 1px solid;
+  padding-left: 15px;
+}
+</style>

src/views/activityMan/placeactivity/placeActivityView.vue

@@ -31,6 +31,7 @@
         />
         <van-popup v-model:show="showPlace" round position="bottom">
           <van-picker
+            title="活动场所"
             :columns="places"
             @cancel="showPlace = false"
             @confirm="getPlace"
@@ -41,6 +42,7 @@
         <van-field
           v-model="placeActivity.activityTime"
           center
+          readonly
           label="活动时间:"
           placeholder="请选择时间"
           input-align="right"
@@ -79,7 +81,16 @@
           placeholder="请选择参会已知名单"
           input-align="right"
           right-icon="arrow-down"
+          @click="showPerson = true"
         />
+        <van-dialog
+          v-model:show="showPerson"
+          title="选择人员名单"
+          show-cancel-button
+          @confirm="reselected"
+        >
+          <person-list @selected="selected"></person-list>
+        </van-dialog>
       </van-cell-group>
       <van-cell-group>
         <van-field
@@ -104,10 +115,22 @@
         <van-field
           v-model="placeActivity.activityPlace"
           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
@@ -136,12 +159,21 @@
           placeholder="请选择活动负责人"
           input-align="right"
           right-icon="arrow-down"
+          @click="showReport = true"
         />
+        <van-dialog
+          v-model:show="showReport"
+          title="选择活动负责人"
+          show-cancel-button
+        >
+          <person-list></person-list>
+        </van-dialog>
       </van-cell-group>
       <van-cell-group>
         <van-field
           v-model="placeActivity.tel"
           center
+          type="tel"
           label="联系方式:"
           placeholder="请填写联系方式"
           input-align="right"
@@ -177,20 +209,22 @@
 </template>
 
 <script>
-import { ref } from "vue";
+import { reactive, ref } from "vue";
+import personList from "../personList.vue";
 export default {
+  components: { personList },
   setup() {
     // 返回
     const onClickLeft = () => {
       history.back();
     };
     // 活动信息
-    const placeActivity = {
+    const placeActivity = reactive({
       activity: "",
       place: "",
       activityTime: "",
       countPerson: "",
-      list: '',
+      list: "",
       portname: "",
       area: "",
       activityPlace: "",
@@ -200,7 +234,7 @@ export default {
       tel: "",
       file: "",
       into: "",
-    };
+    });
     // 场所名称
     const places = [
       { text: "杭州", value: "Hangzhou" },
@@ -209,32 +243,82 @@ export default {
       { text: "绍兴", value: "Shaoxing" },
       { text: "湖州", value: "Huzhou" },
     ];
-    const showPlace = ref(false);
+    let showPlace = ref(false);
     const getPlace = ({ selectedOptions }) => {
       showPlace.value = false;
       placeActivity.place = selectedOptions[0].text;
     };
     // 获取活动时间
-    const showAct = ref(false);
-    const currentDate = ref(["2022", "06", "01"]);
-    const currentTime = ref(["12", "00"]);
+    let showAct = ref(false);
+    let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
+    let currentTime = ref(["00", "00"]);
     const getTime = () => {
       showAct.value = false;
       placeActivity.activityTime = `${currentDate.value.join(
         "-"
       )} ${currentTime.value.join(":")}`;
     };
-
+    // 已知名单
+    let showPerson = ref(false);
+    // 活动负责人
+    let showReport = ref(false);
+    const show = () => {
+      showPerson = true;
+    };
+    let list = "";
+    const selected = (val) => {
+      
+      list = val;
+    };
+    const reselected = () => {
+      placeActivity.list = list;
+    };
+    // 地区选择
+    let showArea = ref(false);
+    const cascaderValue = ref("");
+    // 选项列表，children 代表子选项，支持多级嵌套
+    const options = [
+      {
+        text: "浙江省",
+        value: "330000",
+        children: [{ text: "杭州市", value: "330100" }],
+      },
+      {
+        text: "江苏省",
+        value: "320000",
+        children: [{ text: "南京市", value: "320100" }],
+      },
+    ];
+    // 全部选项选择完毕后，会触发 finish 事件
+    const onFinish = ({ selectedOptions }) => {
+      showArea.value = false;
+      placeActivity.activityPlace = selectedOptions
+        .map((option) => option.text)
+        .join("/");
+    };
     return {
       placeActivity,
+      // 活动场所
       showPlace,
       places,
       getPlace,
+      // 活动时间
       showAct,
       currentDate,
       currentTime,
       getTime,
+      // 返回
       onClickLeft,
+      // 人员选择
+      showPerson,
+      showReport,
+      selected,
+      reselected,
+      // 地区选择
+      showArea,
+      options,
+      onFinish,
+      cascaderValue,
     };
   },
 };
@@ -268,8 +352,8 @@ export default {
 .formArea .van-cell-group .van-cell {
   line-height: 40px;
 }
-.formArea .van-field__right-icon {
-    color: #36a7f3;
+.van-cell__value .van-field__right-icon .van-icon-location {
+  color: #36a7f3!important;
 }
 .rowTextArea::v-deep .van-field__value {
   width: 98%;
@@ -292,4 +376,8 @@ export default {
   color: #36a7f3;
   top: -4px;
 }
+.van-dialog {
+  width: 80%;
+  top: 50%;
+}
 </style>

src/views/activityMan/selfMeetingReport/selfMeetingList.vue

@@ -0,0 +1,85 @@
+<template>
+  <van-nav-bar
+    title="私设聚会点"
+    left-text=""
+    left-arrow
+    @click-left="onClickLeft"
+  />
+  <div class="search">
+    <input type="text" placeholder="请输入查询信息" class="keyword" />
+    <van-button icon="search" type="primary" size="small">查询</van-button>
+  </div>
+  <van-list
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="没有更多了"
+    @load="onLoad"
+  >
+    <van-button type="primary" size="small" to="/selfMeeting"
+      >上报</van-button
+    >
+    <van-cell v-for="item in list" :key="item" :title="item" is-link>
+    </van-cell>
+  </van-list>
+</template>
+  
+  <script>
+import { ref } from "vue";
+export default {
+  name: "placeActivityList",
+  setup() {
+    const onClickLeft = () => {
+      history.back();
+    };
+    const list = ref([]);
+    const loading = ref(false);
+    const finished = ref(false);
+
+    const onLoad = () => {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          list.value.push(list.value.length + 1);
+        }
+
+        // 加载状态结束
+        loading.value = false;
+
+        // 数据全部加载完成
+        if (list.value.length >= 10) {
+          finished.value = true;
+        }
+      }, 1000);
+    };
+    return {
+      onClickLeft,
+      list,
+      onLoad,
+      loading,
+      finished,
+    };
+  },
+};
+</script>
+  
+  <style>
+.van-button {
+  top: -5px;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+}
+.van-list {
+  height: 80%;
+  margin-top: 5px;
+}
+.keyword {
+  width: 70%;
+  height: 25px;
+  border-radius: 25px;
+  border: 1px solid;
+  padding-left: 15px;
+}
+</style>

src/views/activityMan/selfMeetingReport/selfMeetingView.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.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>
+        <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.time"
+          center
+          readonly
+          label="时间:"
+          placeholder="请选择时间"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showAct = true"
+        />
+        <van-popup v-model:show="showAct" round position="bottom">
+          <van-picker-group
+            :tabs="['选择日期', '选择时间']"
+            next-step-text="下一步"
+            @confirm="getTime"
+            @cancel="showAct = false"
+          >
+            <van-date-picker v-model="currentDate" />
+            <van-time-picker v-model="currentTime" />
+          </van-picker-group>
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="inputForm.person"
+          center
+          required
+          label="相关人:"
+          placeholder="请选择相关人"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showPerson = true"
+        />
+        <van-dialog
+          v-model:show="showPerson"
+          title="选择人员"
+          show-cancel-button
+          @confirm="reselected"
+        >
+          <person-list @selected="selected"></person-list>
+        </van-dialog>
+      </van-cell-group>
+      <van-cell-group>
+        <div class="rowTextArea">
+          <van-field
+            v-model="inputForm.into"
+            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 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 = [
+      {
+        text: "浙江省",
+        value: "330000",
+        children: [{ text: "杭州市", value: "330100" }],
+      },
+      {
+        text: "江苏省",
+        value: "320000",
+        children: [{ text: "南京市", value: "320100" }],
+      },
+    ];
+    // 全部选项选择完毕后，会触发 finish 事件
+    const onFinish = ({ selectedOptions }) => {
+      showArea.value = false;
+      inputForm.place = selectedOptions.map((option) => option.text).join("/");
+    };
+    return {
+      inputForm,
+      // 活动时间
+      showAct,
+      currentDate,
+      currentTime,
+      getTime,
+      // 返回
+      onClickLeft,
+      // 人员选择
+      showPerson,
+      selected,
+      reselected,
+      // 地区选择
+      showArea,
+      options,
+      onFinish,
+      cascaderValue,
+    };
+  },
+};
+</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-dialog {
+  width: 80%;
+  top: 50%;
+}
+</style>

src/views/tab_a/tabAll.vue

@@ -54,8 +54,8 @@
 	</div>	
 
 	<van-grid :border="false" >
-		<van-grid-item icon="photo-o" to="/placeActivity" text="场所活动" />
-		<van-grid-item icon="photo-o" text="私设聚会点" />
+		<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" text="场所检查" />
 		<van-grid-item icon="photo-o" text="安防设施异常" />