xiangyuan-app/src/pages/dig/sharereg/bind.vue

<template>
  <CommonRoot>
    <FlexCol :gap="20" :padding="30">
      <DynamicForm
        ref="registerFormRef"
        :model="registerFormModel"
        :options="registerFormDefine"
      />
      <Height :height="20" />
      <Button type="primary" @click="registerSubmit" text="立即绑定" :loading="registerFormLoading" />
      <Button @click="cancel" text="稍后再说" :loading="registerFormLoading" />
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/store/auth';
import { useAppInit } from '@/common/composeabe/AppInit';
import { toast } from '@/components/dialog/CommonRoot';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { navTo } from '@/components/utils/PageAction';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { FieldProps } from '@/components/form/Field.vue';
import type { FormProps } from '@/components/form/Form.vue';
import { UserApi } from '@/api/auth/UserApi';
import Button from '@/components/basic/Button.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import VillageApi from '@/api/inhert/VillageApi';

/**
 * 微信绑定志愿者账号页面
 */

const authStore = useAuthStore();
const { init } = useAppInit();

const registerFormLoading = ref(false);
const registerFormRef = ref<IDynamicFormRef>();
const registerFormModel = ref({
  username: '',
  password: '',
});
const registerFormDefine : IDynamicFormOptions = {
  formItems: [
    { 
      label: '登录账号', name: 'username', type: 'text',
      additionalProps: { 
        placeholder: '请输入用户名',
      },
      rules: [{ required: true, message: '请输入用户名' }],
    },
    {
      label: '密码',
      name: 'password',
      type: 'text',
      additionalProps: { 
        placeholder: '请输入密码',
        type: 'password',
      } as FieldProps,
      rules: [{ required: true, message: '请输入密码' }],
    },
  ],
  formAdditionaProps: {
    labelWidth: '160rpx',
    labelAlign: 'right',
    innerStyle: {
      radius: '10rpx',
    },
  } as Omit<FormProps, 'model'>,
}

async function registerSubmit() {
  if (!registerFormRef.value || !registerFormModel.value)
    return;
  try {
    await registerFormRef.value.validate();
  } catch (e) {
    toast({ content: '有必填项未填写，请检查' });
    return;
  }
  try {
    registerFormLoading.value = true;
    const loginRes = await VillageApi.bindVolunteer({
      account: registerFormModel.value.username,
      password: registerFormModel.value.password,
    });
    await authStore.loginResultHandle(loginRes, UserApi.LOGIN_TYPE_USER);
    toast({ content: '注册成功' });
    setTimeout(() => navTo('/pages/index'), 800);
  } catch (e) {
    showError(e);
  } finally {
    registerFormLoading.value = false;
  }
  await init();
}
function cancel() {
  navTo('/pages/index');
}
</script>