宗教场所录入页面

src/router/index.js

@@ -147,6 +147,15 @@ const routes = [{
         meta: {
             isShowTarbar: false,
         }
+    },
+    {
+        path: '/placeRegister',
+        name: 'placeRegister',
+        component: () =>
+            import ('../views/placeManage/placeRegister.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
     }
 ]
 

src/views/placeManage/placeRegister.vue

@@ -0,0 +1,256 @@
+<template>
+  <van-nav-bar title="智慧“和顺”" left-arrow @click-left="goback" />
+  <div class="main">
+    <p class="title">宗教场所录入</p>
+    <div class="formArea">
+      <p class="miniTitle">基础信息</p>
+      <van-cell-group>
+        <van-field
+          v-model="placeActivity.place"
+          readonly
+          label="所属宗教:"
+          placeholder="请选择宗教"
+          input-align="right"
+          right-icon="arrow-down"
+          @click="showPlace = true"
+        />
+        <van-popup v-model:show="showPlace" round position="bottom">
+          <van-picker
+            title="宗教选择"
+            :columns="places"
+            @cancel="showPlace = false"
+            @confirm="getPlace"
+          />
+        </van-popup>
+      </van-cell-group>
+      <van-cell-group>
+        <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
+          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.money"
+          center
+          label="联络人姓名:"
+          placeholder="请填写联络人姓名"
+          input-align="right"
+        />
+      </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 name="uploader" label="外景照片:">
+          <template #input>
+            <van-uploader :after-read="afterRead" />
+          </template>
+        </van-field>
+      </van-cell-group>
+      <van-cell-group>
+        <van-field name="uploader" label="内景照片:">
+          <template #input>
+            <van-uploader :after-read="afterRead" />
+          </template>
+        </van-field>
+      </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";
+export default {
+  setup() {
+    const goback = () => {
+      history.back();
+    };
+    //场所录入
+    const placeActivity = reactive({
+      activity: "",
+      place: "",
+      activityTime: "",
+      countPerson: "",
+      list: "",
+      portname: "",
+      area: "",
+      activityPlace: "",
+      address: "",
+      money: "",
+      activityName: "",
+      tel: "",
+      file: "",
+      into: "",
+    });
+    // 宗教名称
+    const places = [
+      { text: "基督教", value: "基督教" },
+      { text: "佛教", value: "佛教" },
+      { text: "伊斯兰教", value: "伊斯兰教" },
+    ];
+    let showPlace = ref(false);
+    const getPlace = ({ selectedOptions }) => {
+      showPlace.value = false;
+      placeActivity.place = selectedOptions[0].text;
+    };
+    //图片上传
+    const afterRead = (file) => {
+      // 此时可以自行将文件上传至服务器
+      console.log(file);
+    };
+
+    // 地区选择
+    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,
+      //图片上传
+      afterRead,
+      // 返回
+      goback,
+      // 地区选择
+      showArea,
+      options,
+      onFinish,
+      cascaderValue,
+    };
+  },
+};
+</script>
+
+<style lang="less">
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+.van-nav-bar {
+  background-color: #36a7f3;
+  .van-nav-bar__title {
+    color: #fff;
+  }
+  .van-badge__wrapper {
+    color: #fff;
+  }
+}
+.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>