xiamen-sb-uniapp/pages/repair-check/repair-return.vue

<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view
            class="p3 bg-color-white"
            style="margin-top: -50rpx; border-radius: 20rpx"
        >
            <u-form :model="form" ref="uForm" :label-width="150">
                <u-form-item label="驳回原因" prop="checkContent" required>
                    <u-input v-model="form.checkContent" type="textarea" :height="50" />
                </u-form-item>
            </u-form>
            <view class="p-fixed d-flex j-around a-center footer">
                <view
                    class="main-color-bg text-color-white common"
                    @tap="handleSubmit"
                >提交</view
                >
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                checkContent: ''
            },
            rules: {
                descripition: [
                    {
                        required: true,
                        message: '请输入驳回原因',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        };
    },
    onLoad(options) {
        this.form.id = options.id;
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        handleSubmit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.$Http.returnRepair(this.form).then((res) => {
                        uni.navigateBack({
                            delta: 1
                        });
                    });
                }
            });
        }
    }
};
</script>

<style lang="less">
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10000;
  border-top: 1rpx solid #f4f4f4;
  height: 100rpx;

  .common {
    padding: 15rpx 200rpx;
    border-radius: 30rpx;
    background-color: #0082ff;
    color: #fff;
  }
}
</style>