完成了活动场所上报的页面布局

src/main.js

@@ -7,7 +7,8 @@ import api from '@/api';
 import axios from 'axios';
 
 
-import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs } 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 } from 'vant';
 import 'vant/lib/index.css';
 import store from './store';
 
@@ -31,6 +32,12 @@ app.use(router)
     .use(Col)
     .use(Tab)
     .use(Tabs)
+    .use(Popup)
+    .use(PickerGroup)
+    .use(DatePicker)
+    .use(TimePicker)
+    .use(Picker)
+    .use(Uploader)
 
 app.config.globalProperties.$API = api
 app.config.globalProperties.$axios = axios

src/router/index.js

@@ -1,83 +1,100 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: () => import('../views/login/login.vue'),
-    meta:{
-      isShowTarbar:false,
+const routes = [{
+        path: '/',
+        name: 'home',
+        component: () =>
+            import ('../views/login/login.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
+    }, {
+        path: '/login',
+        name: 'login',
+        component: () =>
+            import ('../views/login/login.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
+    }, {
+        path: '/forget',
+        name: 'forget',
+        component: () =>
+            import ('../views/login/forget.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
+    }, {
+        path: '/tab_a',
+        name: 'tab_a',
+        component: () =>
+            import ('../views/tab_a/tab_a.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/toBeDone',
+        name: 'toBeDone',
+        component: () =>
+            import ('../views/toBeDone/toBeDone.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/siteMan',
+        name: 'siteMan',
+        component: () =>
+            import ('../views/siteMan/siteMan.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/activityMan',
+        name: 'activityMan',
+        component: () =>
+            import ('../views/activityMan/activityMan.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, , {
+        path: '/placeActivity',
+        name: 'placeActivity',
+        component: () =>
+            import ('../views/activityMan/placeactivity/placeActivityView.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/setting',
+        name: 'setting',
+        component: () =>
+            import ('../views/setting/setting.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
+    }, {
+        path: '/tabAll',
+        name: 'tabAll',
+        component: () =>
+            import ('../views/tab_a/tabAll.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: () =>
+            import ('../views/AboutView.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
     }
-  },{
-    path: '/login',
-    name: 'login',
-    component: () => import('../views/login/login.vue'),
-    meta:{
-      isShowTarbar:false,
-    }
-  },{
-    path: '/forget',
-    name: 'forget',
-    component: () => import('../views/login/forget.vue'),
-    meta:{
-      isShowTarbar:false,
-    }
-  },{
-    path: '/tab_a',
-    name: 'tab_a',
-    component: () => import('../views/tab_a/tab_a.vue'),
-    meta:{
-      isShowTarbar:true,
-    }
-  },{
-    path: '/toBeDone',
-    name: 'toBeDone',
-    component: () => import('../views/toBeDone/toBeDone.vue'),
-    meta:{
-      isShowTarbar:true,
-    }
-  },{
-    path: '/siteMan',
-    name: 'siteMan',
-    component: () => import('../views/siteMan/siteMan.vue'),
-    meta:{
-      isShowTarbar:true,
-    }
-  },{
-    path: '/activityMan',
-    name: 'activityMan',
-    component: () => import('../views/activityMan/activityMan.vue'),
-    meta:{
-      isShowTarbar:true,
-    }
-  },{
-    path: '/setting',
-    name: 'setting',
-    component: () => import('../views/setting/setting.vue'),
-    meta:{
-      isShowTarbar:true,
-    }
-  },{
-    path: '/tabAll',
-    name: 'tabAll',
-    component: () => import('../views/tab_a/tabAll.vue'),
-    meta:{
-      isShowTarbar:false,
-    }
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import('../views/AboutView.vue'),
-    meta:{
-      isShowTarbar:false,
-    }
-  }
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
+    history: createWebHashHistory(),
+    routes,
 })
 
-export default router
+export default router

src/views/activityMan/placeactivity/placeActivityView.vue

@@ -0,0 +1,295 @@
+<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="placeActivity.activity"
+          center
+          label="活动名称:"
+          placeholder="请填写活动名称"
+          input-align="right"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.place"
+          readonly
+          required
+          label="场所名称:"
+          placeholder="请选择"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showPlace = true"
+        />
+        <van-popup v-model:show="showPlace" round position="bottom">
+          <van-picker
+            :columns="places"
+            @cancel="showPlace = false"
+            @confirm="getPlace"
+          />
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.activityTime"
+          center
+          label="活动时间:"
+          placeholder="请选择时间"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showAct = true"
+        />
+        <van-popup v-model:show="showAct" round position="bottom">
+          <van-picker-group
+            title="活动时间"
+            :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="placeActivity.countPerson"
+          center
+          label="参会人数:"
+          placeholder="请填写参会人数"
+          input-align="right"
+          type="digit"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.list"
+          center
+          required
+          label="已知名单:"
+          placeholder="请选择参会已知名单"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.portname"
+          center
+          label="报告人:"
+          placeholder="请选择报告人"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.area"
+          center
+          label="参加范围:"
+          placeholder="请填写参加范围"
+          input-align="right"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.activityPlace"
+          center
+          label="活动地点:"
+          placeholder="请填写参加地点"
+          input-align="right"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.address"
+          center
+          label="详细地址:"
+          placeholder="请填写活参加地点"
+          input-align="right"
+          right-icon="location"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.money"
+          center
+          label="经费来源:"
+          placeholder="请选择"
+          input-align="right"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.activityName"
+          center
+          label="活动负责人:"
+          placeholder="请选择活动负责人"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.tel"
+          center
+          label="联系方式:"
+          placeholder="请填写联系方式"
+          input-align="right"
+        />
+      </van-cell-group>
+      <van-cell-group>
+        <van-field name="uploader" label="安全预案:">
+          <template #input>
+            <van-uploader>
+              <van-button icon="plus">上传文件</van-button>
+            </van-uploader>
+          </template>
+        </van-field>
+      </van-cell-group>
+      <van-cell-group>
+        <div class="rowTextArea">
+          <van-field
+            v-model="placeActivity.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 { ref } from "vue";
+export default {
+  setup() {
+    // 返回
+    const onClickLeft = () => {
+      history.back();
+    };
+    // 活动信息
+    const placeActivity = {
+      activity: "",
+      place: "",
+      activityTime: "",
+      countPerson: "",
+      list: '',
+      portname: "",
+      area: "",
+      activityPlace: "",
+      address: "",
+      money: "",
+      activityName: "",
+      tel: "",
+      file: "",
+      into: "",
+    };
+    // 场所名称
+    const places = [
+      { text: "杭州", value: "Hangzhou" },
+      { text: "宁波", value: "Ningbo" },
+      { text: "温州", value: "Wenzhou" },
+      { text: "绍兴", value: "Shaoxing" },
+      { text: "湖州", value: "Huzhou" },
+    ];
+    const 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"]);
+    const getTime = () => {
+      showAct.value = false;
+      placeActivity.activityTime = `${currentDate.value.join(
+        "-"
+      )} ${currentTime.value.join(":")}`;
+    };
+
+    return {
+      placeActivity,
+      showPlace,
+      places,
+      getPlace,
+      showAct,
+      currentDate,
+      currentTime,
+      getTime,
+      onClickLeft,
+    };
+  },
+};
+</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;
+}
+.formArea .van-field__right-icon {
+    color: #36a7f3;
+}
+.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;
+}
+</style>

src/views/tab_a/tabAll.vue

@@ -54,7 +54,7 @@
 	</div>	
 
 	<van-grid :border="false" >
-		<van-grid-item icon="photo-o" text="场所活动" />
+		<van-grid-item icon="photo-o" to="/placeActivity" text="场所活动" />
 		<van-grid-item icon="photo-o" text="私设聚会点" />
 		<van-grid-item icon="photo-o" text="信教群众异常" />
 		<van-grid-item icon="photo-o" text="场所检查" />