couponCenter_mpapp/src/pages-A/applyForm/index.vue

<script lang="ts" setup>
import {
    useRequest
} from 'alova/client'
import {
    reactive,
    ref,
    computed
} from 'vue'
import {
    couponIssuerApplyByAdd,
    getCouponIssuerApplyById
} from '@/api/me'
import {
    useUserStore
} from '@/store'

definePage({
    style: {
        navigationBarTitleText: '发券人申请',
    },
})

const userStore = useUserStore()

let model = reactive({
    name: '',
    phone: '',
    status: '0',
    auditRemark: '',
})
const rules = reactive({
    name: {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change'],
    },
    phone: {
        type: 'string',
        required: true,
        message: '请填写电话',
        pattern: /^1[3-9]\d{9}$/,
        trigger: ['blur', 'change'],
    },
})
// 发卷人查询审核状态
const {
    send: getCouponIssuerApplyByIdRequest,
    data: couponIssuerApplyByIdData,
} = useRequest(getCouponIssuerApplyById, {
    immediate: false,
})
const formResult = ref(null)
onLoad(async (options) => {
    await getCouponIssuerApplyByIdRequest()
    console.log(999999, couponIssuerApplyByIdData.value?.status)
    if (couponIssuerApplyByIdData.value && couponIssuerApplyByIdData.value?.status && (couponIssuerApplyByIdData.value.status === '1' || couponIssuerApplyByIdData.value.status === '2')) {
        formResult.value = couponIssuerApplyByIdData.value
        model = couponIssuerApplyByIdData.value
    }
})

// 使用 ref 创建响应式引用
const uFormRef = ref(null)

// 发劵人审核-添加
const {
    send: couponIssuerApplyByAddRequest,
    data: couponIssuerApplyByAddData,
} = useRequest(couponIssuerApplyByAdd, {
    immediate: false,
}).onSuccess(() => {
    // 返回上一页
    console.log('提交成功：', couponIssuerApplyByAddData)
    uni.showToast({
        title: '校验通过',
        icon: 'success',
    })
    uni.navigateBack()
}).onError((error) => {
    console.log('校验失败：', error)
    uni.showToast({
        title: error.error.message,
        icon: 'error',
    })
})

function submitForm() {
    uFormRef.value.validate().then((valid) => {
        if (valid) {
            const couponIssuerApplyByAddForm = {
                name: model.name,
                phone: model.phone,
            }
            couponIssuerApplyByAddRequest(couponIssuerApplyByAddForm)
        }
        else {
            uni.showToast({
                title: '校验失败',
                icon: 'error',
            })
        }
    }).catch(() => {
        // 处理验证错误
        uni.showToast({
            title: '校验失败',
            icon: 'error',
        })
    })
}

const isShowBtn = computed(() => {
    return !formResult.value || (!!formResult.value && (formResult.value.status !== '1' && formResult.value.status !== '2'))
})
</script>

<template>
    <view class="form-container">
        <view class="form-wrapper">
            <u-form ref="uFormRef" label-position="left" :model="model" :rules="rules">
                <u-form-item ref="item1" label="申请人姓名" prop="name" :border-bottom="true">
                    <u-input v-model="model.name" border="none" :disabled="formResult" placeholder="请输入申请人姓名" />
                </u-form-item>
                <u-form-item ref="item2" label="电话" prop="phone" :border-bottom="true">
                    <u-input v-model="model.phone" border="none" :disabled="formResult" placeholder="请输入小程序登录的手机号" />
                </u-form-item>
                <u-form-item v-if="formResult" ref="item3" label="申请结果" :border-bottom="true">
                    <view v-if="formResult.status === '2'" class="form-item-result u-text-danger">
                        已拒绝
                    </view>
                    <view v-else class="form-item-result u-text-success">
                        已通过
                    </view>
                </u-form-item>
                <view v-if="formResult && formResult.status === '2'" class="form-item-des">
                    <u-form-item ref="item4" label="拒绝说明" :border-bottom="true">
                        <u-textarea v-model="model.auditRemark" placeholder="此处显示拒绝说明" border="none" disabled />
                    </u-form-item>
                </view>
            </u-form>

            <view v-if="isShowBtn" class="form-btn" @click="submitForm">
                提交申请
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
::v-deep .u-form-item__body__left {
    width: 150rpx !important;
    font-weight: 400 !important;
    font-size: 26rpx !important;
    color: #333333 !important;
}

::v-deep .u-input__content__field-wrapper__field {
    text-align: right !important;
}

::v-deep .u-form-item__body__left__content__label {
    color: #333333 !important;
    font-size: 26rpx !important;
    font-weight: 400 !important;
}

::v-deep .u-line {
    border-color: #eeeeee !important;
}

::v-deep .u-form-item__body__right__content__slot {
    display: flex;
    justify-content: flex-end;
}

/* 为禁用状态的input添加白色背景 */
::v-deep .u-input__content__field-wrapper__field {
    background-color: #fff !important;
}

.form-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 20rpx;
}

.form-wrapper {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 0 32rpx;
}

.form-item-result {
    width: 112rpx;
    height: 44rpx;
    line-height: 44rpx;
    border-radius: 10rpx;
    text-align: center;

    &.u-text-danger {
        color: #ff3333;
        background: rgba(#ff7171, 0.2);
    }

    &.u-text-success {
        color: #64a6ff;
        background: rgba(#64a6ff, 0.2);
    }
}

.form-item-des {
    ::v-deep .u-form-item__body {
        flex-direction: column !important;
        gap: 32rpx !important;
    }
}

.form-btn {
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
    border-radius: 10rpx;
    position: fixed;
    bottom: 62rpx;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
}
</style>