menjin
/
renli-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改发布样式方式为css

Browse Source
master
Sigo 4 years ago
parent 02a19df35f
commit b60f4e9572
5 changed files with 413 additions and 6 deletions
Show Stats Download Patch File Download Diff File

48
src/pages/discount-coupon/issue/components/complete.vue
Unescape Escape View File

@ -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>

174
src/pages/discount-coupon/issue/components/edit.vue
Unescape Escape View File

@ -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>

82
src/pages/discount-coupon/issue/components/template.vue
Unescape Escape View File

@ -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>

102
src/pages/discount-coupon/issue/index.vue
Unescape Escape View File

@ -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>

13
src/router/index.js
Unescape Escape View File

@ -4,8 +4,7 @@ import Layout from "../layout/layout.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
routes: [{
path: "/",
redirect: "/login"
},
@ -782,7 +781,15 @@ const router = new VueRouter({
title: "会员等级",
index: "memberClass"
}
}
},
{
path: "/couponIssue",
component: () => import("../pages/discount-coupon/issue/index.vue"),
meta: {
title: "发布",
index: "couponIssue"
}
},
]
}
]

Write Preview
Loading…
Cancel
Save