140 lines
3.2 KiB
Vue
140 lines
3.2 KiB
Vue
<script >
|
|
export default {
|
|
data() {
|
|
return {
|
|
ruleForm: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: ''
|
|
},
|
|
findex:0,
|
|
priceList:[
|
|
"¥100",
|
|
"¥150",
|
|
"¥200",
|
|
"¥300",
|
|
],
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
|
],
|
|
region: [
|
|
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
|
],
|
|
date1: [
|
|
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
|
],
|
|
date2: [
|
|
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
|
],
|
|
type: [
|
|
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
|
],
|
|
resource: [
|
|
{ required: true, message: '请选择活动资源', trigger: 'change' }
|
|
],
|
|
desc: [
|
|
{ required: true, message: '请填写活动形式', trigger: 'blur' }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
setIndex(index){
|
|
this.findex = index
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
alert('submit!');
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
<div class="input-box">
|
|
<div>已选油品</div>
|
|
<div>汽油92#</div>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>已选油枪</div>
|
|
<div>1号枪</div>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>油品单价</div>
|
|
<div>8.5元/L</div>
|
|
</div>
|
|
<el-input v-model="ruleForm.name" style="width: 490px" placeholder="请输入加油金额">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
<div class="box-">
|
|
<div class="fo-box" @click="setIndex(index)" :class="{ 'active' : findex == index }" v-for="(item,index) in priceList" :key="index">
|
|
{{item}}
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.hui-size{
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
.input-box{
|
|
width: 490px;
|
|
height: 36px;
|
|
border-radius: 4px;
|
|
border: 1px solid #eceff1;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 30px auto;
|
|
font-size: 14px;
|
|
color: #FF9655;
|
|
}
|
|
.box-{
|
|
width: 490px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 25px auto;
|
|
}
|
|
.fo-box{
|
|
width: 72px;
|
|
height: 36px;
|
|
background: #D8D8D8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.active{
|
|
background: #FF9655 !important;
|
|
color: #fff !important;
|
|
}
|
|
</style>
|