359 lines
12 KiB
Vue
359 lines
12 KiB
Vue
<template>
|
||
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" width="900px" @close="closeDia">
|
||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
|
||
label-width="100px">
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="优惠卷类型" prop="couponType">
|
||
<!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
|
||
<el-select v-model="dataForm.couponType" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8"><el-form-item label="使用门槛" prop="useLevel">
|
||
<el-input v-model="dataForm.useLevel" placeholder="" oninput="value=value.replace(/[^\d.]/g,'')">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
|
||
</el-form-item></el-col>
|
||
<el-col :span="8"><el-form-item label="优惠卷范围" prop="couponRange">
|
||
<!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
|
||
<el-select v-model="dataForm.couponRange" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in rangList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item></el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="优惠券名称" prop="couponName">
|
||
<el-input v-model="dataForm.couponName" placeholder="名称"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="面额：" prop="couponAmount">
|
||
<el-input v-model="dataForm.couponAmount" placeholder="面额" oninput="value=value.replace(/[^\d.]/g,'')">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="每人限领：" prop="limitedCollar">
|
||
<el-input v-model="dataForm.limitedCollar" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="">
|
||
<template slot="append">张</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row ::gutter="10">
|
||
</el-row>
|
||
<el-row ::gutter="10">
|
||
<el-col :span="24">
|
||
<el-form-item label="生效方式" prop="effectType">
|
||
<el-radio-group v-model="dataForm.effectType">
|
||
<el-radio :label="0">长期有效</el-radio>
|
||
<el-radio :label="1">领取生效</el-radio>
|
||
<el-radio :label="2">自定义</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="开始时间" prop="effectTime" v-if="dataForm.effectType == '2'">
|
||
<el-date-picker
|
||
v-model="dataForm.effectTime" @change="datePicked"
|
||
type="datetime" value-format="timestamp"
|
||
placeholder="选择日期时间"
|
||
default-time="12:00:00">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" v-show="dataForm.effectType == '1'">
|
||
<el-form-item label="时效" prop="validity">
|
||
<el-input placeholder="" v-model="dataForm.validity" oninput="value=value.replace(/[^\d.]/g,'')">
|
||
<template slot="append">天</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row ::gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="总发行量" prop="totalCirculation">
|
||
<el-input v-model="dataForm.totalCirculation" placeholder="发行数量" oninput="value=value.replace(/[^\d.]/g,'')">
|
||
<template slot="append">张</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="24">
|
||
<el-form-item label="封面图" prop="couponUrl">
|
||
<el-upload :limit="1" class="el-uploadfeng"
|
||
:action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
|
||
:on-preview="handlePictureCardPreview" :file-list="fileList" :on-success="handlePicSuccess"
|
||
accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||
<img width="100%" :src="dataForm.couponUrl" alt="">
|
||
</el-dialog>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="dataForm.remark" placeholder="备注" type="textarea" rows="2" autosize>
|
||
</el-input>
|
||
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="closeDia">取消</el-button>
|
||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import global from '../../common/common.vue' //引入共用组间
|
||
export default {
|
||
baseUrl:global.baseUrl,
|
||
data() {
|
||
return {
|
||
baseUrl:global.baseUrl,
|
||
visible: true,
|
||
options2: [{
|
||
value: 0,
|
||
label: '商品'
|
||
},{
|
||
value: 1,
|
||
label: '电子书'
|
||
}
|
||
],
|
||
options: [{
|
||
value: 0,
|
||
label: '现金券'
|
||
}, {
|
||
value: 1,
|
||
label: '折扣券'
|
||
}],
|
||
rangList: global.rangList,
|
||
TypeList: global.TypeList,
|
||
dialogVisible:false,
|
||
fileList: [], // 封面图
|
||
dataForm: {
|
||
couponType:null,
|
||
couponRange:null, // 使用商品类型
|
||
useLevel:null, // 使用门槛
|
||
id: 0,
|
||
couponName:'',
|
||
couponAmount:null,
|
||
couponUrl:'',
|
||
limitedCollar:null,
|
||
validity:'',
|
||
effectType: null, // 生效方式
|
||
effectTime:null,
|
||
totalCirculation:null,
|
||
remark:''
|
||
|
||
},
|
||
dataRule: {
|
||
couponType: [
|
||
{ required: true, message: '请填写本项', trigger: 'blur' }
|
||
],
|
||
couponName: [
|
||
{ required: true, message: '名称不能为空', trigger: 'blur' }
|
||
],
|
||
couponAmount: [
|
||
{ required: true, message: '优惠券面额不能为空', trigger: 'blur' }
|
||
],
|
||
effectType: [
|
||
{ required: true, message: '生效方式不能为空', trigger: 'blur' }
|
||
],
|
||
// validity: [
|
||
// { required: true, message: '时效不能为空', trigger: 'blur' }
|
||
// ],
|
||
couponRange: [
|
||
{ required: true, message: '商品类型不能为空', trigger: 'blur' }
|
||
],
|
||
useLevel: [
|
||
{ required: true, message: '使用门槛；0表示无门槛', trigger: 'blur' }
|
||
],
|
||
// startTime: [
|
||
// { required: true, message: '开始使用时间不能为空', trigger: 'blur' }
|
||
// ],
|
||
// endTime: [
|
||
// { required: true, message: '结束使用时间不能为空', trigger: 'blur' }
|
||
// ],
|
||
// useType: [
|
||
// { required: true, message: '使用类型：0->全场通用；1->指定分类；2->指定商品不能为空', trigger: 'blur' }
|
||
// ],
|
||
// note: [
|
||
// { required: true, message: '备注不能为空', trigger: 'blur' }
|
||
// ],
|
||
// publishCount: [
|
||
// { required: true, message: '发行数量不能为空', trigger: 'blur' }
|
||
// ],
|
||
// useCount: [
|
||
// { required: true, message: '已使用数量不能为空', trigger: 'blur' }
|
||
// ],
|
||
// receiveCount: [
|
||
// { required: true, message: '领取数量不能为空', trigger: 'blur' }
|
||
// ],
|
||
// enableTime: [
|
||
// { required: true, message: '可以领取的日期不能为空', trigger: 'blur' }
|
||
// ],
|
||
// code: [
|
||
// { required: true, message: '优惠码不能为空', trigger: 'blur' }
|
||
// ],
|
||
// memberLevel: [
|
||
// { required: true, message: '可领取的会员类型：0->无限制不能为空', trigger: 'blur' }
|
||
// ]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
init(id) {
|
||
this.dataForm.id = id || 0
|
||
this.visible = true
|
||
this.$nextTick(() => {
|
||
this.$refs['dataForm'].resetFields()
|
||
if (this.dataForm.id) {
|
||
this.$http({
|
||
url: this.$http.adornUrl(`/common/coupon/getCouponInfo`),
|
||
method: 'post',
|
||
data: this.$http.adornData(
|
||
{ id: this.dataForm.id}
|
||
)
|
||
}).then(({ data }) => {
|
||
if(data.code !==0) return this.$message.error(data.msg)
|
||
if (data && data.code === 0) {
|
||
this.dataForm = data.couponEntity
|
||
// this.dataForm.couponUrl = {name:'', url:}
|
||
if (data.couponEntity.couponUrl != "") {
|
||
var img = { name: '', url: data.ouponEntity.couponUrl }
|
||
var attr = []
|
||
attr.push(img)
|
||
this.fileList = attr
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handlePicSuccess(res, file) {
|
||
if (res.msg == "success") {
|
||
this.dataForm.couponUrl = res.url;
|
||
this.$message.success("上传成功");
|
||
} else {
|
||
this.$message.error("上传失败");
|
||
}
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.dataForm.couponUrl = '';
|
||
},
|
||
handlePictureCardPreview(file) {
|
||
this.dataForm.couponUrl = file.url;
|
||
this.dialogVisible = true;
|
||
},
|
||
datePicked(){
|
||
console.log(this.dataForm.startTime)
|
||
},
|
||
closeDia(){
|
||
this.visible = false
|
||
this.dataForm.couponUrl = '';
|
||
this.$refs.dataForm.resetFields()
|
||
this.dataForm ={
|
||
couponType:null,
|
||
couponRange:null, // 使用商品类型
|
||
useLevel:null, // 使用门槛
|
||
id: 0,
|
||
couponName:'',
|
||
couponAmount:null,
|
||
couponUrl:'',
|
||
limitedCollar:null,
|
||
validity:'',
|
||
effectType: null, // 生效方式
|
||
effectTime:null,
|
||
totalCirculation:null,
|
||
remark:''
|
||
|
||
}
|
||
},
|
||
|
||
// 表单提交
|
||
dataFormSubmit() {
|
||
this.$refs['dataForm'].validate((valid) => {
|
||
if (valid) {
|
||
|
||
this.$http({
|
||
url: this.$http.adornUrl(`/common/coupon/${!this.dataForm.id ? 'addCoupon' : 'updateCoupon'}`),
|
||
method: 'post',
|
||
data: this.$http.adornData({
|
||
'id': this.dataForm.id || undefined,
|
||
'couponType':this.dataForm.couponType,
|
||
'couponName':this.dataForm.couponName,
|
||
'couponAmount' :this.dataForm.couponAmount,
|
||
'couponUrl': this.dataForm.couponUrl,
|
||
'limitedCollar' :this.dataForm.limitedCollar,
|
||
'validity' :this.dataForm.validity,
|
||
'effectType' :this.dataForm.effectType,
|
||
'effectTime' :this.dataForm.effectTime,
|
||
'totalCirculation' :this.dataForm.totalCirculation,
|
||
'remark':this.dataForm.remark ,
|
||
'useLevel' : this.dataForm.useLevel,
|
||
'couponRange' : this.dataForm.couponRange,
|
||
'currentState' : '1',
|
||
'delFlag':0
|
||
})
|
||
}).then(({ data }) => {
|
||
if(data.code!==0) return this.$message.error(data.msg)
|
||
|
||
if (data && data.code === 0) {
|
||
|
||
this.$message({
|
||
message: '操作成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.dataForm.couponUrl = ''
|
||
this.closeDia()
|
||
this.$emit('refreshDataList')
|
||
}
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
this.$message.error(err.msg)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.el-form-item__label {
|
||
font-size: 12px;
|
||
}
|
||
.el-uploadfeng {
|
||
/deep/ .el-upload-list__item {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
/deep/ .el-upload--picture-card {
|
||
width: 60px;
|
||
height: 60px;
|
||
line-height: 70px;
|
||
|
||
}}
|
||
</style>
|