329 lines
12 KiB
Vue
329 lines
12 KiB
Vue
<template>
|
||
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" width="900px">
|
||
<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="couponProType">
|
||
<!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
|
||
<el-select v-model="dataForm.couponProType" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options2"
|
||
: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="8">
|
||
<el-form-item label="开始时间" prop="takeEffectType">
|
||
<el-radio-group v-model="dataForm.takeEffectType">
|
||
<el-radio :label="0">领取日</el-radio>
|
||
<el-radio :label="1">设置日期</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="开始时间" prop="takeEffectDate" v-if="dataForm.takeEffectType == '1'">
|
||
<el-date-picker
|
||
v-model="dataForm.takeEffectDate" @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">
|
||
<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-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-row>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="visible = false">取消</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: false,
|
||
options2: [{
|
||
value: 0,
|
||
label: '商品'
|
||
},{
|
||
value: 1,
|
||
label: '电子书'
|
||
}
|
||
],
|
||
options: [{
|
||
value: 0,
|
||
label: '现金券'
|
||
}, {
|
||
value: 1,
|
||
label: '折扣券'
|
||
}],
|
||
|
||
dialogVisible:false,
|
||
fileList: [], // 封面图
|
||
dataForm: {
|
||
couponType:null,
|
||
couponProType:null, // 使用商品类型
|
||
useLevel:null, // 使用门槛
|
||
id: 0,
|
||
couponName:'',
|
||
couponAmount:null,
|
||
couponUrl:'',
|
||
limitedCollar:null,
|
||
validity:'',
|
||
takeEffectType: null, // 生效方式
|
||
takeEffectDate:null,
|
||
totalCirculation:null,
|
||
remark:''
|
||
|
||
},
|
||
dataRule: {
|
||
couponType: [
|
||
{ required: true, message: '请填写本项', trigger: 'blur' }
|
||
],
|
||
couponName: [
|
||
{ required: true, message: '名称不能为空', trigger: 'blur' }
|
||
],
|
||
couponAmount: [
|
||
{ required: true, message: '优惠券面额不能为空', trigger: 'blur' }
|
||
],
|
||
takeEffectType: [
|
||
{ required: true, message: '生效方式不能为空', trigger: 'blur' }
|
||
],
|
||
validity: [
|
||
{ required: true, message: '时效不能为空', trigger: 'blur' }
|
||
],
|
||
couponProType: [
|
||
{ 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(`/book/coupon/info/${this.dataForm.id}`),
|
||
method: 'get',
|
||
params: this.$http.adornParams()
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.dataForm.id = data.coupon.id
|
||
this.dataForm.couponType = data.coupon.couponType
|
||
this.dataForm.couponName = data.coupon.couponName
|
||
this.dataForm.couponAmount = data.coupon.couponAmount
|
||
this.dataForm.limitedCollar = data.coupon.limitedCollar
|
||
this.dataForm.validity = data.coupon.validity
|
||
this.dataForm.takeEffectType = data.coupon.takeEffectType
|
||
this.dataForm.takeEffectDate = data.coupon.takeEffectDate
|
||
this.dataForm.totalCirculation = data.coupon.totalCirculation
|
||
this.dataForm.remark = data.coupon.remark
|
||
this.dataForm.useLevel = data.coupon.useLevel,
|
||
this.dataForm.couponProType = data.coupon.couponProType
|
||
// this.dataForm.couponUrl = {name:'', url:}
|
||
if (data.coupon.couponUrl != "") {
|
||
var img = { name: '', url: data.coupon.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)
|
||
},
|
||
// 表单提交
|
||
dataFormSubmit() {
|
||
this.$refs['dataForm'].validate((valid) => {
|
||
if (valid) {
|
||
this.$http({
|
||
url: this.$http.adornUrl(`/book/coupon/${!this.dataForm.id ? 'save' : 'update'}`),
|
||
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,
|
||
'takeEffectType' :this.dataForm.takeEffectType,
|
||
'takeEffectDate' :this.dataForm.takeEffectDate,
|
||
'totalCirculation' :this.dataForm.totalCirculation,
|
||
'remark':this.dataForm.remark ,
|
||
'useLevel' : this.dataForm.useLevel,
|
||
'couponProType' : this.dataForm.couponProType,
|
||
'currentState' : '1',
|
||
'delFlag':0
|
||
})
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: '操作成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.visible = false
|
||
this.$emit('refreshDataList')
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.error(data.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>
|