HS_MZAP/src/views/activityMan/selfMeetingReport/selfMeetingView.vue

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