xmhjc-applet/supplierPages/pages/supplier/base/SupplyDeclarationFrom.vue

<template>
<view class="formbg">
    <view class="scrollview">
    <u--form :rules="rules" labelPosition="left" :model="form"  ref="uForm">
        <u-form-item class="formItem" prop="businessName" :labelWidth="labelWidth" label="商品"  borderBottom >
            <u--input :input-align="inputaligh" placeholder="填写供应商名称" v-model="form.supplierName" border="none" disabled ></u--input>
        </u-form-item>

        <view class="margin20"></view>
        <u-form-item class="formItem" prop="num" :labelWidth="labelWidth" label="商品数量"  borderBottom >
            <u--input :input-align="inputaligh" placeholder="填写商品数量（个）" v-model="form.num" border="none" clearable ></u--input>
        </u-form-item>

        <view class="margin20"></view>
        <u-form-item class="formItem" prop="price" :labelWidth="labelWidth" label="商品价格"  borderBottom >
            <u--input :input-align="inputaligh" placeholder="填写商品价格（元）" v-model="form.price" border="none" clearable ></u--input>
        </u-form-item>

        <view class="margin20"></view>

        <u-form-item class="formItem" prop="contact" :labelWidth="labelWidth" label="联系人"  borderBottom >
            <u--input :input-align="inputaligh" placeholder="请输入联系人" v-model="form.contact" border="none" clearable ></u--input>
        </u-form-item>
        
        <view class="margin20"></view>

        <u-form-item class="formItem" prop="phone" :labelWidth="labelWidth" label="联系电话"  borderBottom >
            <u--input :input-align="inputaligh" placeholder="请输入联系电话" v-model="form.phone" border="none" clearable ></u--input>
        </u-form-item>

      
    </u--form>
    
    <view style="height: 100rpx;"></view>
</view>

<view class="btnbox" style="left: 24rpx;">
    <view @click="submit('submit')" class="btn2">
        提交审核
    </view>
</view>
</view>
</template>

<script>
import {
    declareSupplier
    } from '@/http/api/common.js'
export default {
props: {
    selectData: {
        type: Object,
        default: null,
    },
},
data() {
    return {
        form:{
            "supplierId": "",
            "supplierName": "",
            "num": "",
            "price": "",
            "contact": "",
            "phone": "",
        },
        
        rules: {
            'num': {
                type: 'string',
                required: true,
                message: '请填写数量',
                trigger: ['blur', 'change']
            },
            'price': {
                type: 'string',
                required: true,
                message: '请填写价格',
                trigger: ['blur', 'change']
            },
            'contact': {
                type: 'string',
                required: true,
                message: '请输入联系人',
                trigger: ['blur', 'change']
            },
            'phone':[ 
                {
                    type: 'string',
                    required: true,
                    message: '请输入联系电话',
                    trigger: ['blur', 'change']
                },
                {
                    validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                    },
                    message: '手机号码格式不正确',
                    // 触发器可以同时用blur和change
                    trigger: ['blur'],
                }
            ]
        },
        inputaligh:'right',
      
        labelWidth:140,
        popupShow:false,
        popupText:'',
        popupBtn:'上传营业执照',
        popupImgurl:'',
        cityShow:false,
        cityloading:false,

        cityColumns: [],
        columnData: [],

        categoryShow:false,
        categoryColumns: [],
        showType:'1',
    }
},
components: {
    
},

onLoad(e) {
    let data = uni.getStorageSync('checkSupplierData')
    this.form.supplierName = data.businessName
    this.form.supplierId = data.id

    console.log('this.form',this.form);
},

onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm?.setRules(this.rules)
},

methods: {
    
    async submit(type){
       
        this.$refs.uForm.validate().then(async res1 => {
            console.log(res1);
           
            let res = await declareSupplier(this.form)
            if (res.data.code == 200) {
                uni.navigateTo({
                    url: '/supplierPages/pages/supplier/supplierSuccess'
                });
            }
        }).catch(errors => {
            // uni.$u.toast('校验失败')
        })
    },

}
}
</script>

<style lang="less" scoped>
.formbg{
    width: 750rpx;
    height: 100vh;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #f6f6f6;

    position: fixed;
    top: 0;
    z-index: 100;
}
.scrollview{
    width: 100vw;
    height: calc(100vh - 120rpx);
}
.formItemTitle{
    margin: 20rpx 0 20rpx 30rpx;
}

.u-form-item{
    background-color: #fff;
}
/deep/.u-form-item__body__left__content{
    padding-left: 30rpx;
}
/deep/.u-form-item__body__right{
    padding-right: 30rpx;
}
/deep/.u-form-item__body{
    padding: 30rpx 0;
}
.selectInput{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.formItem {
    background: #fff;
}
.btn2{
    width: 650rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    margin-left: 10rpx;
}
.margin20{
    margin-top: 20rpx;
}
.btnflex{
    padding: 24rpx;
}
</style>