yjxp-web/src/views/signPage/index.vue

<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="form.nick_name"
            name="姓名"
            label="姓名"
            placeholder="请填写姓名"
            required
            :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
            v-model="form.duties"
            name="职务"
            label="职务"
            placeholder="请填写职务"
            required
            :rules="[{ required: true, message: '请填写职务' }]"
        />
        <van-field
            v-model="form.dept_name"
            name="单位"
            label="单位"
            placeholder="请填写单位"
            required
            :rules="[{ required: true, message: '请填写单位' }]"
        />
        <van-field
            v-model="form.phone"
            name="联系方式"
            label="联系方式"
            placeholder="请填写联系方式"
            required
            :rules="[
                { required: true, message: '请填写联系方式' },
                { validator: validatePhone, message: '请输入正确的联系方式' }
            ]"
        />

        <van-field
            v-show="type === '2'"
            readonly
            v-model="form.sign_time"
            name="签到时间"
            label="签到时间"
        />
      </van-cell-group>

      <div class="button-list" v-if="type === '1'">
        <van-button :loading="loading" loading-text="签到中..." block type="primary" native-type="submit">
          确定签到
        </van-button>

        <div class="div-line"></div>

        <van-button block type="default" @click="handleSignCancel" v-if="type === '1'">
          取消签到
        </van-button>
      </div>

      <div class="button-list" v-if="type === '2'">
        <van-button :loading="loading" loading-text="签退中..." block type="danger" native-type="submit">
          确定签退
        </van-button>

        <div class="div-line"></div>

        <van-button block type="default" @click="handleSignCancel">
          取消签退
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup name="signPage">
import {onMounted, ref} from "vue";
import {validatePhone} from "@/utils/validate";
import { getSignInfo, signEvent } from '@/api/event';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter()

const loading = ref(false);

const event_id = route.query.event_id as string;

// 1 签到 2 签退
const type = ref('1');
const form = ref({
  user_id: '0',
  nick_name: '',
  dept_id: '0',
  dept_name: '',
  duties: '',
  sign_time: '',
  phone: ''
})

// 提交
const onSubmit = () => {
  const submitMethod = type.value === '1' ? '1' : '2';
  const data = {
    ...form.value,
    event_id: event_id,
    type: submitMethod
  };
  loading.value = true;
  signEvent(data).then((res)=>{
    loading.value = false;
    router.push("/signOK?type="+submitMethod)
  })
}


const handleSignCancel = () => {
  router.push("/")
}

onMounted(() => {
  if (/(wxworklocal)/i.test(navigator.userAgent)) {
    getSignInfo({event_id: event_id}).then((res)=> {
      const user = res.data;
      console.log('user', user);
      type.value = user.sign_time == '' ? '1' : '2';

      form.value = {
        user_id: user.user_id,
        nick_name: user.nick_name,
        dept_id: user.dept_id,
        dept_name: user.dept_name,
        duties: user.duties,
        sign_time: user.sign_time,
        phone: user.phone
      }
    })
  }
})
</script>

<style lang="scss" scoped>
.container {
  padding-top: 16px;

  .button-list {
    margin: 16px;
  }
  .div-line {
    height: 16px;
  }
}
</style>