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

<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="form.user_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" style="margin: 16px;">
        
        <van-button :loading="loading" loading-text="签到中..." block type="primary" native-type="submit" v-if="type === '1'">
          确定签到
        </van-button>

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

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

        <van-button block type="default" @click="handleSignCancel" v-if="type === '2'">
          取消签退
        </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: '',
  user_name: '',
  dept_id: '',
  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(() => {
  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,
      user_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: 10px;
}
</style>