You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<!-- 步骤 -->
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<el-steps :active="active">
|
|
<el-step title="填写信息" icon="el-icon-edit"></el-step>
|
|
<el-step title="页面预览" icon="el-icon-thumb"></el-step>
|
|
<el-step title="完成发布" icon="el-icon-s-promotion"></el-step>
|
|
</el-steps>
|
|
</el-col>
|
|
</el-row>
|
|
<edit ref="edit" class="marginTop" @next="handleNext" v-if="active == 1"></edit>
|
|
<templates ref="templates" class="marginTop" @next="handleNext" v-if="active == 2"></templates>
|
|
<complete ref="complete" class="marginTop" @next="handleNext" v-if="active == 3"></complete>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Complete from './components/complete'
|
|
import Edit from './components/edit'
|
|
import Templates from './components/template'
|
|
export default {
|
|
name: 'Form',
|
|
components: { Templates, Edit, Complete },
|
|
data() {
|
|
return {
|
|
active: 1,
|
|
form: {
|
|
couponNum: 1,
|
|
},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
|
{
|
|
min: 3,
|
|
max: 5,
|
|
message: '长度在 3 到 5 个字符',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
deductionAmount: [
|
|
{ required: true, message: '请输入抵扣金额', trigger: 'blur' },
|
|
{
|
|
pattern: /^\d*(?:\.\d{0,2})?$/,
|
|
//pattern: /^1[3456789]\d{9}$/,
|
|
message: '最多能输入两位小数',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
couponNum: [{ required: true, message: '优惠券数量', trigger: 'blur' }],
|
|
shareAmount: [
|
|
{ required: true, message: '请输入分润', trigger: 'blur' },
|
|
{
|
|
pattern: /^\d*(?:\.\d{0,2})?$/,
|
|
//pattern: /^1[3456789]\d{9}$/,
|
|
message: '最多能输入两位小数',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
|
{ min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
|
|
{
|
|
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
|
|
//pattern: /^1[3456789]\d{9}$/,
|
|
message: '请输入正确的手机号码',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
imgUrl: [{ required: true, message: '请上传活动图片', trigger: 'change' }],
|
|
region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
alert('submit!')
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
resetForm() {
|
|
this.$refs.deductionAmount.reset()
|
|
this.$refs.shareAmount.reset()
|
|
this.$refs.form.resetFields()
|
|
},
|
|
handleAmount(name, amount) {
|
|
let form = Object.assign({}, this.form)
|
|
form[name] = amount
|
|
this.form = Object.assign({}, form)
|
|
},
|
|
// 下一步
|
|
handleNext(active) {
|
|
this.active = active
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container /deep/ .el-step__icon {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.marginTop {
|
|
margin-top: 30px;
|
|
}
|
|
</style>
|