HS_MZAP/src/views/placeManage/placeRegister.vue

<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>