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

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store'

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

const userStore = useUserStore()

const model = reactive({
    name: '',
    phone: '',
    result: '',
    description: '',
})
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'],
    },
})

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

function submitForm() {
    uFormRef.value.validate().then((valid) => {
        if (valid) {
            uni.$u.toast('校验通过')
        }
        else {
            uni.$u.toast('校验失败')
        }
    }).catch(() => {
        // 处理验证错误
        uni.$u.toast('校验失败')
    })
}
</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"
                        placeholder="请输入申请人姓名"
                    />
                </u-form-item>
                <u-form-item
                    ref="item2"
                    label="电话"
                    prop="phone"
                    :border-bottom="true"
                >
                    <u-input
                        v-model="model.phone"
                        border="none"
                        placeholder="请输入小程序登录的手机号"
                    />
                </u-form-item>
                <u-form-item
                    ref="item3"
                    label="申请结果"
                    :border-bottom="true"
                >
                    <view class="form-item-result u-text-danger">
                        已拒绝
                    </view>
                    <view class="form-item-result u-text-success">
                        已通过
                    </view>
                </u-form-item>
                <view class="form-item-des">
                    <u-form-item
                        ref="item4"
                        label="拒绝说明"
                        :border-bottom="true"
                    >
                        <u-textarea
                            v-model="model.description"
                            placeholder="此处显示拒绝说明"
                            border="none"
                            disabled
                        />
                    </u-form-item>
                </view>
            </u-form>

            <view 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;
}
.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: 52rpx;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
}
</style>