Election/src/pages/mine/add.vue

<script setup lang="ts">
import useUserStore from '@/store/user'
import { add as addAPi, type listType, getMember_mobile  } from '@/api/user'
	import { getSign   } from '@/api/login'

const userStore = useUserStore()

interface formListType extends listType {
    openid: string
}

const formData = reactive<formListType>({
    openid: userStore.openId,
    name: '',
    age: 0,
    sex: 1,
    nation: '',
    mobile: userStore.mobile,
    position: '',
    work_unit: ''
})

const onSubmit = uni.$util.debounce(() => {
    if (formData.name === '') {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
    } else if (formData.mobile === '') {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
    } else if (formData.work_unit === '') {
        uni.showToast({ title: '请输入工作单位', icon: 'none' })
    } else {
        uni.showLoading({ title: '提交中...', mask: true })

        addAPi(formData).then(() => {
            uni.hideLoading()
            uni.showToast({ title: '签到成功，等待投票！', icon: 'none' })
			getMember_mobile({openid: userStore.openId}).then((res:any)=> {
						userStore.userInfo = res.data
						getSign({ openid: userStore.openId, meetId: userStore.meetId })
					})
            setTimeout(() => uni.switchTab({ url: '/pages/mine/index?flash='+ true }), 500)
        })
		
		
		
    }
})
</script>
<template>
    <view class="userview">
        <view class="userview-info box">
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label required">姓名</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.name" style="text-align: right" />
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label required">电话</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.mobile" style="text-align: right" />
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label">性别</view>
                <view class="userview-info-item-content flex">
					<u-radio-group v-model="formData.sex" placement="row">
					    <u-radio shape="circle" label="男" :name="1" />
					    <u-radio shape="circle" label="女" :name="2" />
					</u-radio-group>
                    <!-- <input placeholder="请输入" v-model="formData.sex" style="text-align: right" /> -->
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label">民族</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.nation" style="text-align: right" />
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label">年龄</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.age" style="text-align: right" />
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label required">工作单位</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.work_unit" style="text-align: right" />
                </view>
            </view>
            <view class="flex-center-between userview-info-item">
                <view class="userview-info-item-label">职位</view>
                <view class="userview-info-item-content flex">
                    <input placeholder="请输入" v-model="formData.position" style="text-align: right" />
                </view>
            </view>
        </view>
        <view class="bts" @click="onSubmit">确认信息</view>
    </view>
</template>

<style scoped lang="scss">
.userview {
    width: 100%;
    padding: 32rpx;
    min-height: calc(100vh - 94px);
    box-sizing: border-box;
    background-color: #f9fafb;

    .box {
        margin-bottom: 60rpx;
        border-radius: 24rpx;
        background-color: #ffffff;
        box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
    }

    &-info {
        font-size: 28rpx;
        font-weight: normal;
        line-height: 40rpx;
        padding: 0 32rpx 32rpx;
        border: 1rpx solid #fff;

        &-item {
            padding: 60rpx 0 24rpx;
            border-top: 1rpx solid #e5e7eb;

            &:first-child {
                border: none;
            }

            &-label {
                color: #4b5563;
                position: relative;

                &.required::before {
                    content: '*';
                    color: #f56c6c;
                    margin-right: 4px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -16rpx;
                }
            }

            &-content {
                color: #1f2937;
            }
        }
    }

    .bts {
        color: #fff;
        font-size: 28rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 8rpx;
        padding: 24rpx 80rpx;
        letter-spacing: 4rpx;
        border: 1rpx solid #2563eb;
        background-color: #2563eb;
    }
}
</style>