效果如下
完整代码
<template>
<view class="honourInfo">
<view class="content-box">
<u-form class="lh-40" ref="uForm" :model="form" :rules="rules">
<view v-for="(item,index) of dataList" :key="item.id">
<u-form-item :label="item.name" :prop="'value' +item.id" labelWidth="80" borderBottom
:required='item.isRequired == 1'>
<u--input v-if="item.type == 1" maxlength='20' v-model="form['value' + item.id]"
:placeholder="'请填写' + item.name" border="none" clearable />
<u--textarea v-else-if="item.type == 2" maxlength='500' v-model="form['value' + item.id]"
:placeholder="'请填写' + item.name" count clearable />
</u-form-item>
</view>
</u-form>
</view>
<view class="submit">
<view class="submit-btn" @click="submit">发送</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {},
dataList: [{
"id": 1,
"name": "活动感想",
"value": '',
"type": 1, //文本 最大长度20字以内 2超文本 最大长度500字以内
"isRequired": 1, //是否为必填
},
{
"id": 2,
"name": "活动目标",
"value": '',
"type": 1, //文本 最大长度20字以内 2超文本 最大长度500字以内
"isRequired": 1, //是否为必填
},
{
"id": 3,
"name": "活动说明",
"value": '',
"type": 2, //文本 最大长度20字以内 2超文本 最大长度500字以内
"isRequired": 0, //是否为必填
},
],
rules: {},
rankName: '',
isLock: false, //防止多次提交
};
},
computed: {
userInfo() {
return this.$store.state.user.USER_INFO
}
},
onLoad() {
this.getFrom()
},
methods: {
getFrom() {
let rules = {}
let from = {}
this.dataList.forEach(item => {
from['value' + item.id] = ''
rules['value' + item.id] = {
required: item.isRequired == 1 ? true : false,
message: `请选择${item.name}`,
trigger: ['blur']
};
})
console.log(from, rules)
this.form = from
this.rules = rules
},
submit() {
console.log(this.form)
let arr = this.dataList.map(item => {
item.value = this.form['value' + item.id]
return item
})
console.log(arr)
this.$refs.uForm.validate().then(res => {})
},
},
}
</script>
<style lang="scss" scoped>
page {
background: #F9F9F9;
height: calc(100% - 116rpx);
}
.lh-40 {
line-height: 40rpx;
::v-deep .u-form-item__body__left__content__label {
color: #999999;
}
}
.honourInfo {
.content-box {
margin-top: 16rpx;
padding: 24rpx 32rpx 0 32rpx;
font-size: 32rpx;
font-weight: 400;
line-height: 80rpx;
background: #FFFFFF;
.upload {
margin: 10rpx 0;
display: flex;
.left {
width: 160rpx;
font-family: Source Han Sans CN;
color: #999999;
}
}
}
.submit {
position: fixed;
bottom: 0;
z-index: 9999;
margin-top: 20rpx;
height: 98rpx;
width: 100%;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(139, 139, 139, 0.15);
display: flex;
align-items: center;
justify-content: center;
&-btn {
// margin: 14rpx auto;
width: 690rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
background: #FFA758;
border-radius: 10rpx;
}
}
}
</style>