HS_MZAP/src/views/placeManage/placeRegister/placeRegisterInfo.vue

<template>
  <van-nav-bar
    fixed
    title="场所详细信息"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main" style="height: 100vh">
    <div class="banner">
      <img src="../../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info" style="height: 600px">
      <van-tabs v-model:active="active" swipeable>
        <!-- 基础信息 -->
        <van-tab>
          <template #title> <van-icon name="orders-o" />基础信息</template>
          <div style="padding: 0 10px; height: 570px; overflow: auto">
            <van-cell-group>
              <van-field
                name="uploader"
                label-align="top"
                label-width="8em"
                label="场所内外景照片:"
              >
                <template #input>
                  <van-uploader
                    v-model="fileList"
                    :after-read="afterRead1"
                    :max-count="6"
                    capture="camera"
                    accept=""
                    :before-delete="fjdelete"
                  >
                  </van-uploader>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.name"
                center
                required
                clearable
                label="场所名称:"
                input-align="right"
                placeholder="请输入场所名称"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="religiousType"
                readonly
                required
                label="宗教类型:"
                name="validator"
                placeholder="请选择教别"
                input-align="right"
                right-icon="arrow-down"
                @click="hs_religious = true"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.tyshxydm"
                center
                label-width="7em"
                clearable
                label="社会信用代码:"
                input-align="right"
                placeholder="请输入社会信用代码"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.contact"
                center
                label-width="7em"
                clearable
                label="场所联系人:"
                input-align="right"
                placeholder="请填写场所联系人"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.contactNumber"
                center
                label-width="7em"
                clearable
                label="联系电话:"
                input-align="right"
                placeholder="请输入联系电话"
              />
            </van-cell-group>

            <van-cell-group>
              <van-field
                v-model="dataitem.placeSelectName"
                center
                clearable
                label="场所地点:"
                input-align="right"
                placeholder="请输入场所地点"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.place"
                center
                clearable
                label="详细地点:"
                input-align="right"
                placeholder="请输入详细场所地点"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.longitude"
                center
                clearable
                label-width="7em"
                label="场所坐标-经度:"
                input-align="right"
                placeholder="请输入场所经度坐标"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.latitude"
                center
                clearable
                label-width="7em"
                label="场所坐标-纬度:"
                input-align="right"
                placeholder="请输入场所纬度坐标"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.peopleThreshold"
                center
                clearable
                required
                label="额定人数:"
                input-align="right"
                placeholder="请输入场所额定人数"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.siteType"
                center
                clearable
                required
                label="场所类型:"
                input-align="right"
                placeholder="请选择场所类型"
              >
                <template #input>
                  <span v-if="dataitem.siteType == 1">线下</span>
                  <span v-if="dataitem.siteType == 0">线上</span>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.nature"
                center
                required
                clearable
                label="场所性质:"
                input-align="right"
                placeholder="请选择场所性质"
              >
                <template #input>
                  <span v-if="dataitem.siteType == 1">寺观教堂</span>
                  <span v-if="dataitem.siteType == 0">固定场所</span>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.place"
                center
                clearable
                label-width="7em"
                label="文物保护级别:"
                input-align="right"
                placeholder="请输入文物保护级别"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.constructionStage"
                center
                required
                clearable
                label-width="7em"
                label="场所建设阶段:"
                input-align="right"
                placeholder="请选择场所建设阶段"
              >
                <template #input>
                  <span v-if="dataitem.siteType == 1">建设完成</span>
                  <span v-if="dataitem.siteType == 0">筹备</span>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.place"
                center
                clearable
                label="建筑面积(㎡):"
                input-align="right"
                placeholder="请输入场所建筑面积"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.place"
                center
                clearable
                label="占地面积(㎡):"
                input-align="right"
                placeholder="请输入场所占地面积"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.plan"
                center
                clearable
                label="场所规划:"
                input-align="right"
                placeholder="请填写场所规划"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.mainRoads"
                center
                clearable
                label-width="8em"
                label="出入口主要道路:"
                input-align="right"
                placeholder="请填写出入口主要道路"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.publicArea"
                center
                clearable
                label-width="7em"
                label="外围公共区域:"
                input-align="right"
                placeholder="请填写外围公共区域"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                name="uploader"
                label-width="8em"
                label="宗教礼仪空间:"
              >
                <template #input>
                  <van-uploader>
                    <van-button type="primary"> 点击上传 </van-button>
                  </van-uploader>
                </template>
              </van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="message"
                rows="1"
                autosize
                label="备注："
                type="textarea"
                placeholder="请输入备注"
              />
            </van-cell-group>
          </div>
        </van-tab>
        <!-- 备案信息 -->
        <van-tab>
          <template #title> <van-icon name="bulb-o" />备案信息 </template>
          <div style="padding: 0 10px; height: 570px; overflow: auto">
            <van-cell-group>
              <van-field
                v-model="dataitem.filingNo"
                center
                clearable
                label="场所备案号:"
                input-align="right"
                placeholder="请输入场所备案号"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.approvedEstablishmentTime"
                center
                required
                clearable
                label-width="8em"
                label="批准设立时间:"
                input-align="right"
                placeholder="请选择批准设立时间"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.approveOffice"
                center
                required
                clearable
                label="登记机关:"
                input-align="right"
                placeholder="请输入登记机关"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.registrationDate"
                center
                required
                clearable
                label="登记日期:"
                input-align="right"
                placeholder="请选择登记日期"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.teachingStaff"
                center
                required
                clearable
                label-width="7em"
                label="主要教职人员:"
                input-align="right"
                placeholder="请输入主要教职人员"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.registrationAuthority"
                center
                clearable
                label-width="7em"
                label="批准设立机关:"
                input-align="right"
                placeholder="请输入批准设立机关"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.registrationAuthority"
                center
                clearable
                label-width="10em"
                label="宗教部门管理人员:"
                input-align="right"
                placeholder="请选择宗教部门管理人员"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="dataitem.registrationAuthority"
                center
                clearable
                label-width="10em"
                label="公安部门管理人员:"
                input-align="right"
                placeholder="请选择公安部门管理人员"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                name="uploader"
                label-width="10em"
                label="场所建设审批手续:"
              >
                <template #input>
                  <van-uploader>
                    <van-button type="primary"> 点击上传 </van-button>
                  </van-uploader>
                </template>
              </van-field>
            </van-cell-group>
          </div>
        </van-tab>
        <!-- 互联网专区 -->
        <van-tab>
          <template #title> <van-icon name="desktop-o" />互联网专区 </template>
          <div style="padding: 0 10px; height: 570px; overflow: auto">
            <div style="overflow: hidden">
              <p style="font-weight: 700">
                直播间<van-button
                  type="primary"
                  size="mini"
                  style="margin-left: 10px; vertical-align: middle"
                  >新增</van-button
                >
              </p>
              <div>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="所属平台:"
                    input-align="right"
                    placeholder="请选择所属平台"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="直播账号:"
                    input-align="right"
                    placeholder="请输入直播账号"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="管理员:"
                    input-align="right"
                    placeholder="请填写管理员"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="联系方式:"
                    input-align="right"
                    placeholder="请输入联系方式"
                  />
                </van-cell-group>
                <van-button type="danger" size="mini" color="#e6a23c"
                  >删除</van-button
                >
              </div>
            </div>
            <div style="overflow: hidden">
              <p style="font-weight: 700">
                公众号<van-button
                  type="primary"
                  size="mini"
                  style="margin-left: 10px; vertical-align: middle"
                  >新增</van-button
                >
              </p>
              <div>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="公众号账号:"
                    input-align="right"
                    placeholder="请输入直播账号"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="管理员:"
                    input-align="right"
                    placeholder="请填写管理员"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="联系方式:"
                    input-align="right"
                    placeholder="请输入联系方式"
                  />
                </van-cell-group>
                <van-button type="danger" size="mini" color="#e6a23c"
                  >删除</van-button
                >
              </div>
            </div>
            <div style="overflow: hidden">
              <p style="font-weight: 700">
                微信群<van-button
                  type="primary"
                  size="mini"
                  style="margin-left: 10px; vertical-align: middle"
                  >新增</van-button
                >
              </p>
              <div>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="微信群账号:"
                    input-align="right"
                    placeholder="请输入直播账号"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="管理员:"
                    input-align="right"
                    placeholder="请填写管理员"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="联系方式:"
                    input-align="right"
                    placeholder="请输入联系方式"
                  />
                </van-cell-group>
                <van-button type="danger" size="mini" color="#e6a23c"
                  >删除</van-button
                >
              </div>
            </div>
            <div style="overflow: hidden">
              <p style="font-weight: 700">网站</p>
              <div>
                <van-cell-group>
                  <van-field
                    v-model="dataitem.registrationAuthority"
                    center
                    clearable
                    label-width="7em"
                    label="网站地址:"
                    input-align="right"
                    placeholder="请输入网站地址"
                  />
                </van-cell-group>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="btn">
        <van-button type="primary">确认</van-button>
      </div>
    </div>
    <!-- 宗教类型 -->
    <van-popup v-model:show="hs_religious" round position="bottom">
      <van-picker
        title="宗教类型"
        :columns="religious"
        @cancel="hs_religious = false"
        @confirm="getreligious"
      />
    </van-popup>
    <!-- 场所地点 -->
    <!-- 场所类型 -->
    <!-- 场所性质 -->
    <!-- 场所建设阶段 -->
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import placeRegister from "@/api/placeRegister/placeRegister";
import tools from "@/api/sys/tools";
export default {
  setup() {
    const active = ref(0);
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //场所数据
    let dataitem = ref({});
    //数据接收
    const router = useRouter();
    onMounted(() => {
      var id = JSON.parse(router.currentRoute.value.query.id);
      new placeRegister().queryById(id).then((res) => {
        // console.log(res);
        dataitem.value = res;
        religiousType.value = getreligiousT(dataitem.value.religiousType);
      });
    });
    //宗教类型
    const religiousType = ref("");
    const getreligiousT = (type) => {
      const typeObject = {
        1: "伊斯兰教",
        2: "基督教",
        3: "天主教",
        4: "佛教",
        5: "道教",
      };
      return typeObject[type];
    };
    const religious = [
      { text: "伊斯兰教", value: "1" },
      { text: "基督教", value: "2" },
      { text: "天主教", value: "3" },
      { text: "佛教", value: "4" },
      { text: "道教", value: "5" },
    ];
    let hs_religious = ref(false);
    const getreligious = ({ selectedOptions }) => {
      hs_religious.value = false;
      // const json = Object.assign(inputForm.value, {
      //   religion: selectedOptions[0].value,
      // });
      // inputForm.value = json;
      religiousType.value = selectedOptions[0].text;
    };
    //图片上传
    let fileList = ref([]);
    let fileImg = ref([]);
    const afterRead1 = (file) => {
      new tools()
        .uploadFile(file, `religioussites/siteinfo/religiousSitesInfo`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          placeActivity.placeData.scenesImage += "" + data.url;
          fileImg.value.push(data);
        });
    };
    const fjdelete = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.file == fileList.value[index].file) {
          let delurl = fileImg.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileImg.value.splice(index, 1);
          fileList.value.splice(index, 1);
        }
      }
    };
    //返回
    const onClickLeft = () => {
      history.back();
    };
    return {
      onClickLeft,
      dataitem,
      selectColor,
      active,
      //图片上传
      fileList,
      afterRead1,
      //图片删除
      fjdelete,
      //宗教类型
      religiousType,
      hs_religious,
      religious,
      getreligious,
    };
  },
};
</script>

<style lang="less">
.btn {
  margin: 10px auto;
  .van-button {
    width: 100%;
    height: 50px;
  }
}
</style>