Merge branch 'master' of http://192.168.31.40:10101/r/Demay_New
十七
4 years ago
commit
9bf67edb3b
@ -0,0 +1,106 @@
|
||||
<!-- 金额输入框 -->
|
||||
<template>
|
||||
<el-input v-model.trim="form.moneyShow" :placeholder="placeholder" @blur="handleBlur" @focus="handleFocus" @input="handleInput" @paste.native.capture.prevent="handlePaste">
|
||||
<i slot="prefix" class="el-input__icon el-icon-coin"></i>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
moneyShow: null,
|
||||
money: null,
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
placeholder: String,
|
||||
name: String,
|
||||
},
|
||||
methods: {
|
||||
// 失去焦点
|
||||
handleBlur() {
|
||||
let form = Object.assign({}, this.form)
|
||||
form.moneyShow = this.$thousands(this.form.money)
|
||||
this.form = Object.assign({}, form)
|
||||
},
|
||||
// 获取焦点
|
||||
handleFocus() {
|
||||
let form = Object.assign({}, this.form)
|
||||
form.moneyShow = form.money
|
||||
this.form = Object.assign({}, form)
|
||||
},
|
||||
// 输入时
|
||||
handleInput(value) {
|
||||
let amount
|
||||
// 最后一个字符
|
||||
let last = value.charAt(value.length - 1)
|
||||
// 去掉最后一个字符的后的
|
||||
let cutLast = value.substring(0, value.length - 1)
|
||||
let form = Object.assign({}, this.form)
|
||||
let num = /^[0-9]*$/
|
||||
if (last) {
|
||||
if (num.test(last) || last == '.') {
|
||||
if (last == '.') {
|
||||
if (cutLast.includes('.')) {
|
||||
amount = value.substring(0, value.length - 1)
|
||||
} else {
|
||||
amount = value
|
||||
}
|
||||
} else {
|
||||
amount = value
|
||||
}
|
||||
} else {
|
||||
amount = value.substring(0, value.length - 1)
|
||||
}
|
||||
}
|
||||
form.moneyShow = amount
|
||||
form.money = amount
|
||||
this.form = Object.assign({}, form)
|
||||
this.$emit('amount', this.name, amount)
|
||||
},
|
||||
// 粘贴时
|
||||
handlePaste(res) {
|
||||
let amount
|
||||
let num = /^[0-9]*$/
|
||||
let clip = res.clipboardData.getData('Text')
|
||||
let form = Object.assign({}, this.form)
|
||||
if (num.test(clip)) {
|
||||
amount = form.money + clip
|
||||
} else if (clip.includes('.')) {
|
||||
if (clip.split('.').length > 2) {
|
||||
amount = form.money
|
||||
} else {
|
||||
if (clip.split('.').length > 0) {
|
||||
if (num.test(clip.split('.')[0]) && num.test(clip.split('.')[1])) {
|
||||
if (form.money.includes('.')) {
|
||||
amount = form.money
|
||||
} else {
|
||||
amount = form.money + clip
|
||||
}
|
||||
} else {
|
||||
amount = form.money
|
||||
}
|
||||
} else {
|
||||
amount = form.money
|
||||
}
|
||||
}
|
||||
} else {
|
||||
amount = form.money
|
||||
}
|
||||
form.moneyShow = amount
|
||||
form.money = amount
|
||||
this.form = Object.assign({}, form)
|
||||
this.$emit('amount', this.name, amount)
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.form = Object.assign({}, {})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="icon">
|
||||
<i class="el-icon-success"></i>
|
||||
</div>
|
||||
<div class="title">优惠券发布成功</div>
|
||||
<div class="btn">
|
||||
<el-button class="sub" type="primary" size="medium" @click="GoOn">继续发布</el-button>
|
||||
<el-button size="medium" @click="complete">完成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
choose: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
GoOn() {
|
||||
this.$emit('next', 1)
|
||||
},
|
||||
complete() {
|
||||
this.$router.push('/active/management')
|
||||
this.$store.dispatch('tabsBar/delRoute', { path: '/active/issue' })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.container .icon {
|
||||
font-size: 80px;
|
||||
color: #67c23a;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.container .title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.container .btn .sub {
|
||||
margin-right: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 填写信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="auto" class="form" size="medium">
|
||||
<el-form-item label="优惠券名称" prop="couponName">
|
||||
<el-input v-model.trim="form.couponName" placeholder="优惠券名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券数量" prop="couponNumber">
|
||||
<el-input v-model.trim="form.couponNumber" placeholder="优惠券数量"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠限制" prop="serviceConditions">
|
||||
<el-radio v-model="form.serviceConditions" :label="0">满减</el-radio>
|
||||
<el-radio v-model="form.serviceConditions" :label="1">没有限制</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠方式" prop="couponType">
|
||||
<el-radio v-model="form.couponType" :label="0">代金券</el-radio>
|
||||
<el-radio v-model="form.couponType" :label="1">折扣券</el-radio>
|
||||
<el-radio v-model="form.couponType" :label="2">代扣券</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="满减金额" prop="fullReductionMoney">
|
||||
<amount-input ref="fullReductionMoney" @amount="handleAmount" name="fullReductionMoney" placeholder="满减金额（满多少可以减）"></amount-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="适用门店" prop="suitableStore">
|
||||
<el-input v-model.trim="form.suitableStore" placeholder="优惠券适用的门店"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="适用项目" prop="suitableProject">
|
||||
<el-input v-model.trim="form.suitableProject" placeholder="优惠券适用的项目"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效方式" prop="indateType">
|
||||
<el-radio v-model="form.indateType" :label="0">领取后多少天</el-radio>
|
||||
<el-radio v-model="form.indateType" :label="1">固定日期</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.indateType===0" :prop="form.indateType===0?'startDay':''">
|
||||
<el-input v-model.trim="form.startDay" placeholder="领取后多少天生效"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.indateType===1" :prop="form.indateType===1?'endDay':''">
|
||||
<el-input v-model.trim="form.endDay" placeholder="多少天内有效生效"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享提成规则" prop="shareCommissionRules">
|
||||
<el-radio v-model="form.shareCommissionRules" :label="0">固定提成</el-radio>
|
||||
<el-radio v-model="form.shareCommissionRules" :label="1">单据金额抽成(%)</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.shareCommissionRules===0" :prop="form.shareCommissionRules===0?'fixedAmount':''">
|
||||
<amount-input ref="fixedAmount" @amount="handleAmount" name="fixedAmount" placeholder="固定提成(元)"></amount-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.shareCommissionRules===1" :prop="form.shareCommissionRules===1?'orderCommission':''">
|
||||
<amount-input ref="orderCommission" @amount="handleAmount" name="orderCommission" placeholder="单据金额抽成(%)"></amount-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<div class="box">
|
||||
<el-button type="warning" @click="handleNext" size="medium">下一步</el-button>
|
||||
<!-- <el-button type="primary" @click="handleNext" size="medium">提交</el-button> -->
|
||||
<el-button @click="resetForm" size="medium">重置</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AmountInput from '@/components/AmountInput/index'
|
||||
export default {
|
||||
name: 'Form',
|
||||
components: { AmountInput },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
couponNum: 1,
|
||||
},
|
||||
rules: {
|
||||
couponName: [
|
||||
{ required: true, message: '请输入优惠券名称', trigger: 'blur' },
|
||||
],
|
||||
couponNumber: [
|
||||
{ required: true, message: '请输入优惠券数量', trigger: 'blur' },
|
||||
],
|
||||
serviceConditions: [
|
||||
{ required: true, message: '请选择优惠限制', trigger: ['blur', 'change'] },
|
||||
],
|
||||
couponType: [
|
||||
{ required: true, message: '请选择优惠方式', trigger: ['blur', 'change'] },
|
||||
],
|
||||
|
||||
fullReductionMoney: [
|
||||
{ required: true, message: '请输入满减金额', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^\d*(?:\.\d{0,2})?$/,
|
||||
//pattern: /^1[3456789]\d{9}$/,
|
||||
message: '最多能输入两位小数',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
suitableStore: [
|
||||
{ required: true, message: '请选择适用门店', trigger: ['blur', 'change'] },
|
||||
],
|
||||
suitableProject: [
|
||||
{ required: true, message: '请选择适用项目', trigger: ['blur', 'change'] },
|
||||
],
|
||||
indateType: [
|
||||
{ required: true, message: '请选择有效方式', trigger: ['blur', 'change'] },
|
||||
],
|
||||
shareCommissionRules: [
|
||||
{ required: true, message: '请选择分享提成规则', trigger: ['blur', 'change'] },
|
||||
],
|
||||
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: {
|
||||
// 下一步
|
||||
handleNext() {
|
||||
console.log(123);
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('next', 2)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.fullReductionMoney.reset()
|
||||
this.$refs.fixedAmount.reset()
|
||||
this.$refs.orderCommission.reset()
|
||||
this.$refs.form.resetFields()
|
||||
this.$baseMessage('重置成功', 'success')
|
||||
},
|
||||
handleAmount(name, amount) {
|
||||
let form = Object.assign({}, this.form)
|
||||
form[name] = amount
|
||||
this.form = Object.assign({}, form)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container .form {
|
||||
width: 500px;
|
||||
/* // margin: 0 auto; */
|
||||
}
|
||||
.container .box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50px 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 选择模板 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<div class="box">
|
||||
<div class="box-item">
|
||||
<div class="item" :class="choose == 1 ? 'choose' : ''" @click="handleChoose(1)"></div>
|
||||
<div :class="choose == 1 ? 'choose' : ''">模板一</div>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<div class="item" :class="choose == 2 ? 'choose' : ''" @click="handleChoose(2)"></div>
|
||||
<div :class="choose == 2 ? 'choose' : ''">模板二</div>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<div class="item" :class="choose == 3 ? 'choose' : ''" @click="handleChoose(3)"></div>
|
||||
<div :class="choose == 3 ? 'choose' : ''">模板三</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<div class="box">
|
||||
<el-button type="warning" @click="handleLast" size="medium">上一步</el-button>
|
||||
<el-button type="primary" @click="handleNext" size="medium">提交</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
choose: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChoose(num) {
|
||||
this.choose = num
|
||||
},
|
||||
// 上一步
|
||||
handleLast() {
|
||||
this.$emit('next', 1)
|
||||
},
|
||||
// 提交
|
||||
handleNext() {
|
||||
this.$emit('next', 3)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container .box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.container .box .box-item {
|
||||
text-align: center;
|
||||
margin-right: 80px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.container .box .box-item:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.container .box .box-item .item {
|
||||
width: 250px;
|
||||
height: 380px;
|
||||
border: 3px solid #dddddd;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.container .box .box-item .choose {
|
||||
color: #5470c6;
|
||||
border-color: #5470c6;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,108 @@
|
||||
<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>
|
||||
<style scoped>
|
||||
.marginTop {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue