20230303
This commit is contained in:
悠悠小鹿
633
src/views/modules/activity/activity-add-or-update.vue
Normal file
633
src/views/modules/activity/activity-add-or-update.vue
Normal file
@@ -0,0 +1,633 @@
|
||||
<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="12">
|
||||
<el-form-item label="活动名称" prop="activityName">
|
||||
<el-input v-model="dataForm.activityName" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="活动类型" prop="activityType">
|
||||
<!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
|
||||
<el-select v-model="dataForm.activityType" placeholder="请选择">
|
||||
<el-option v-for="item in activityTypeList" :key="item.dictType" :label="item.dictValue"
|
||||
:value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="触发操作" prop="activityManner">
|
||||
<!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
|
||||
<el-select v-model="dataForm.activityManner" placeholder="请选择">
|
||||
<el-option v-for="item in activityOprateTypeList" :key="item.dictType" :label="item.dictValue"
|
||||
:value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" v-if="dataForm.activityManner == 2">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="活动内容" prop="activedContent.activedetailCode" style="margin-bottom: 0;">
|
||||
<el-radio-group v-model="dataForm.activedContent.activedetailCode">
|
||||
<el-radio-button :label="0">购买商品</el-radio-button>
|
||||
<!-- <el-radio-button :label="1">满额</el-radio-button> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" v-if="dataForm.activityManner == 3">
|
||||
<el-col :span="24" style="margin-bottom: 15px;">
|
||||
<el-form-item label="活动内容" prop="activedContent.chongzhiCode" style="margin-bottom: 0;">
|
||||
<el-radio-group v-model="dataForm.activedContent.chongzhiCode">
|
||||
<el-radio-button :label="0">阶梯满减</el-radio-button>
|
||||
<el-radio-button :label="1">满额赠</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24" v-if="dataForm.activityManner != 1 && dataForm.activityManner != 3">
|
||||
<el-form-item label="" prop="activedeProductsImgList">
|
||||
<div style=" padding: 10px; border: 1px dashed #eee; background-color: #f8f8f8;">
|
||||
<!-- <span style="font-size: 12px; color: #888;">活动主体</span> -->
|
||||
<span class="add" type="text" plain @click="selectProducts">选择商品</span>
|
||||
<div style="overflow-y: scroll; ">
|
||||
<el-upload class="pictureList" action="http://59.110.212.44:9100/pb/oss/fileoss" list-type="picture"
|
||||
:on-preview="handlePictureCardPreview1" :file-list="ProductsListFileList"
|
||||
:on-success="handlePicSuccess1" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove1">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.activedeProductsImgList" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-if="dataForm.activityManner == 3">
|
||||
<el-form-item label="活动内容">
|
||||
<!-- 阶梯满减 -->
|
||||
<div v-if="dataForm.activedContent.chongzhiCode == 0">
|
||||
<el-table border :data="dataForm.activedContent.chongzhiMJList" style="width: 500px">
|
||||
<el-table-column
|
||||
prop="region"
|
||||
label="满额" >
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.region" placeholder="请输入满减额"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
label="积分数" >
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.value" placeholder="请输入积分数"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作" width="60px">
|
||||
<template slot-scope="scope"><el-button type="text" @click="deleteMJRow(scope.row)">删除</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="text-align: center; width: 500px; background-color:#fafafa;"><el-button type="text" size="mini" @click="addmanjian">添加一项</el-button></div>
|
||||
</div>
|
||||
<div v-if="dataForm.activedContent.chongzhiCode == 1">
|
||||
<!-- 满额赠送 -->
|
||||
<el-table border :data="dataForm.activedContent.chongZList" style="width: 500px">
|
||||
<el-table-column
|
||||
prop="region"
|
||||
label="满额" >
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.region" placeholder="请输入门槛"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="region"
|
||||
label="满额" >
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="dataForm.activedContent.chongZList[scope.$index].code" placeholder="请选择">
|
||||
<el-option v-for="item in zengsongCodeList" :key="item.dictType" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input v-model="scope.row.region" placeholder="请输入门槛"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="region"
|
||||
label="操作" >
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="dataForm.activityManner == 2 || dataForm.activityManner == 1">
|
||||
<el-form-item label="">
|
||||
<div style=" padding: 10px; border: 1px dashed #eee; background-color: #f8f8f8;">
|
||||
<!-- <span style="font-size: 12px; color: #888;">赠送专区</span> -->
|
||||
<el-form-item label="" prop="activedContent.zengsongCode" style="margin-bottom: 0;">
|
||||
<el-checkbox-group @change="zengpinTypeChange"
|
||||
v-model="dataForm.activedContent.zengsongCode">
|
||||
<el-checkbox v-for="item in zengsongCodeList" :label="item.label" :key="item.value">{{item.value}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<ul class="couponList" >
|
||||
<li v-for="(item, index) in dataForm.activedContent.couponList" :key="item.id">
|
||||
<span>￥{{ item.couponAmount }} 元 </span><i>有效期至：2023-03-01 22:00:00</i>
|
||||
<div class="delbtn" @click="deleteCoupon(index)">×</div>
|
||||
</li>
|
||||
<div style="clear: both;">
|
||||
<span class="add" v-if="this.couponButtonShow" type="text" plain
|
||||
@click="selectCoupon">选择优惠券</span>
|
||||
</div>
|
||||
</ul>
|
||||
<!-- 送积分 -->
|
||||
<div v-if="this.pointButtonShow" style="border-bottom: 1px solid #eee; padding: 10px 0;">
|
||||
<el-form-item label="获赠" prop="point" style="width: 250px;"
|
||||
label-width="40px">
|
||||
<el-input size="mini" v-model="dataForm.point" placeholder="积分分值">
|
||||
<template slot="append">积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 送产品 -->
|
||||
<div v-if="dataForm.activedContent.zProductsList.length > 0" style="margin-top: 10px;">
|
||||
<el-table v-if="dataForm.activedContent.zProductsList" :data="dataForm.activedContent.zProductsList"
|
||||
stripe style="width: 100%">
|
||||
<el-table-column prop="productName" label="商品名">
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.productImages" alt="" width="30px" height="30px">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="deleteSelectePro(scope.row)" size="mini">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<span class="add" v-if="this.proButtonShow" type="text" plain
|
||||
@click="selectZPro">选择商品</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="活动时间" prop="startTime">
|
||||
<el-date-picker style="width: 100%;" v-model="dataForm.startTime" type="datetimerange"
|
||||
value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="活动封面图" prop="productImages">
|
||||
<el-upload :limit="1" class="el-uploadfeng" action="http://59.110.212.44:9100/pb/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.productImages" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input type="textarea" v-model="dataForm.remark" placeholder="备注"></el-input>
|
||||
</el-form-item>
|
||||
</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>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
startTimeradio: 0,
|
||||
dialogVisible: false,
|
||||
couponButtonShow:false, // 添加优惠券按钮
|
||||
proButtonShow:false, // 添加商品按钮
|
||||
pointButtonShow:false, // 添加积分
|
||||
fileList: [], // 封面图
|
||||
ProductsListFileList: [], // 活动的产品列表
|
||||
activityTypeList: [],
|
||||
activityOprateTypeList: [],
|
||||
zengsongCodeList:[
|
||||
{label:0 ,value:'送优惠券'},
|
||||
{label:1 ,value:'送积分'},
|
||||
{label:2 ,value:'送商品'},
|
||||
], // 产品类型
|
||||
amount: null, // 达标金额
|
||||
point: null, //积分
|
||||
dataForm: {
|
||||
// 新增属性
|
||||
activityType: '0',
|
||||
activityManner:'1',
|
||||
productImages: '', // 优惠券封面
|
||||
// fengImg: '', // 优惠券封面
|
||||
activedeProductsImgList: [], // 活动的产品图片列表
|
||||
activedContent: { // 活动
|
||||
activedetailCode: '0',
|
||||
zengsongCode: [],
|
||||
chongzhiCode:0, // 满减类型
|
||||
productCode: 0, // 购买产品类型
|
||||
ACProductsList: [], // 参加活动的产品列表
|
||||
couponList: [], // 优惠券列表
|
||||
zProductsList: [], // 赠送商品列表
|
||||
chongzhiMJList:[{ // 充值阶梯满减List
|
||||
region:null,
|
||||
value:null
|
||||
}],
|
||||
chongZList:[{
|
||||
region:null,
|
||||
gift:{ // 赠品
|
||||
code:0, // 赠品状态码
|
||||
list:[], // 赠品列表
|
||||
number:null , // 赠送的积分数 int
|
||||
}
|
||||
}],// 充值满额赠List
|
||||
},
|
||||
associatedId: null,
|
||||
id: 0,
|
||||
validity: '',
|
||||
activityName: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
remark: '',
|
||||
},
|
||||
dataRule: {
|
||||
// type: [
|
||||
// { required: true, message: '优惠卷类型；0->全场赠券；1->会员赠券；2->购物赠券；3->注册赠券不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// name: [
|
||||
// { required: true, message: '名称不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// platform: [
|
||||
// { required: true, message: '使用平台：0->全部；1->移动；2->PC不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// count: [
|
||||
// { required: true, message: '数量不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// amount: [
|
||||
// { required: true, message: '金额不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// perLimit: [
|
||||
// { required: true, message: '每人限领张数不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// minPoint: [
|
||||
// { 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' }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
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.type = data.coupon.type
|
||||
this.dataForm.name = data.coupon.name
|
||||
this.dataForm.platform = data.coupon.platform
|
||||
this.dataForm.count = data.coupon.count
|
||||
this.dataForm.amount = data.coupon.amount
|
||||
this.dataForm.perLimit = data.coupon.perLimit
|
||||
this.dataForm.minPoint = data.coupon.minPoint
|
||||
this.dataForm.startTime = data.coupon.startTime
|
||||
this.dataForm.endTime = data.coupon.endTime
|
||||
this.dataForm.useType = data.coupon.useType
|
||||
this.dataForm.note = data.coupon.note
|
||||
this.dataForm.publishCount = data.coupon.publishCount
|
||||
this.dataForm.useCount = data.coupon.useCount
|
||||
this.dataForm.receiveCount = data.coupon.receiveCount
|
||||
this.dataForm.enableTime = data.coupon.enableTime
|
||||
this.dataForm.code = data.coupon.code
|
||||
this.dataForm.memberLevel = data.coupon.memberLevel
|
||||
this.startTime = [this.dataForm.startTime, this.dataForm.endTime]
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getActivityType()
|
||||
this.getActivityOprateType()
|
||||
})
|
||||
},
|
||||
zengpinTypeChange(){
|
||||
console.log(this.dataForm.activedContent.zengsongCode)
|
||||
if(this.dataForm.activedContent.zengsongCode.includes(0)){ this.couponButtonShow = true}else{
|
||||
this.couponButtonShow = false
|
||||
}
|
||||
if(this.dataForm.activedContent.zengsongCode.includes(1)){this.pointButtonShow = true}else{
|
||||
this.pointButtonShow = false
|
||||
}
|
||||
if(this.dataForm.activedContent.zengsongCode.includes(2)){ this.proButtonShow = true}else{
|
||||
this.proButtonShow = false
|
||||
}
|
||||
},
|
||||
// 获取活动类型
|
||||
getActivityType() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/sysdictdata/selectByType/activity_type'),
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
console.log(data)
|
||||
this.activityTypeList = data.dataList
|
||||
})
|
||||
},
|
||||
// 获取出发类型
|
||||
getActivityOprateType() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/sysdictdata/selectByType/activity_oprate_type'),
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
this.activityOprateTypeList = data.dataList
|
||||
})
|
||||
},
|
||||
addmanjian(){
|
||||
this.dataForm.activedContent.chongzhiMJList.push({region:null, value:null})
|
||||
},
|
||||
deleteMJRow(row){ //删除满减
|
||||
var i = this.dataForm.activedContent.chongzhiMJList.findIndex(item => item.value === row.value)
|
||||
this.dataForm.activedContent.chongzhiMJList.splice(i, 1)
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.productImages = res;
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.productImages = '';
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.productImages = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 商品列表
|
||||
handlePicSuccess1(res, file) {
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.activedeProductsImgList = res;
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
selectProducts() {
|
||||
// this.ProListVisible = true
|
||||
this.$emit("showProlist", true);
|
||||
// this.$bus.$emit('selectTitle','shangpin')
|
||||
this.$bus.$emit('getListInMes', {
|
||||
selectTitle: 'shangpin',
|
||||
ProductList: this.dataForm.activedContent.ACProductsList
|
||||
})
|
||||
// this.ProListVisible = true
|
||||
},
|
||||
selectZPro() {
|
||||
this.$emit("showProlist", true);
|
||||
this.$bus.$emit('getListInMes', {
|
||||
selectTitle: 'zengshangpin',
|
||||
ProductList: this.dataForm.activedContent.zProductsList
|
||||
})
|
||||
},
|
||||
selectCoupon() {
|
||||
this.$emit("showCouponlist", true);
|
||||
this.$bus.$emit('getCouListInMes', {
|
||||
List: this.dataForm.activedContent.couponList
|
||||
})
|
||||
},
|
||||
handleRemove1(file, fileList) {
|
||||
var i = this.dataForm.activedContent.ACProductsList.findIndex(item => item.productImages === file.url)
|
||||
this.dataForm.activedContent.ACProductsList.splice(i, 1)
|
||||
},
|
||||
handlePictureCardPreview1(file) {
|
||||
this.dataForm.activedeProductsImgList = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
deleteCoupon(i){
|
||||
this.dataForm.activedContent.couponList.splice(i, 1)
|
||||
},
|
||||
datePicked() {
|
||||
console.log(this.dataForm.startTime)
|
||||
},
|
||||
deleteSelectePro(row){
|
||||
var i = this.dataForm.activedContent.zProductsList.findIndex(item => item.productId === row.productId)
|
||||
this.dataForm.activedContent.zProductsList.splice(i, 1)
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/activity/${!this.dataForm.id ? 'save' : 'update'}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
'id': this.dataForm.id || undefined,
|
||||
'activityName': this.dataForm.activityName,
|
||||
'activityType': this.dataForm.activityType,
|
||||
'activityManner': this.dataForm.activityManner,
|
||||
'activityContent': this.dataForm.activityContent,
|
||||
'amount': this.dataForm.amount,
|
||||
'associatedId': this.dataForm.associatedId,
|
||||
'point': this.dataForm.point,
|
||||
'validity': this.dataForm.validity,
|
||||
'beginTime': this.dataForm.beginTime,
|
||||
'endTime': this.dataForm.enableTime,
|
||||
'remark': this.dataForm.remark,
|
||||
'activityUrl': this.dataForm.productImages
|
||||
})
|
||||
}).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)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getImgList() {
|
||||
var arr = []
|
||||
this.dataForm.activedContent.ACProductsList.forEach(item => {
|
||||
arr.push({ name: item.productName, url: item.productImages })
|
||||
})
|
||||
this.ProductsListFileList = arr
|
||||
console.log(this.ProductsListFileList)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.log(454545)
|
||||
this.$bus.$on("haveSelected", (data) => {
|
||||
if (data.title == "shangpin") { // 获得活动商品列表
|
||||
this.dataForm.activedContent.ACProductsList = data.list
|
||||
this.$nextTick(() => {
|
||||
this.getImgList()
|
||||
})
|
||||
}
|
||||
if (data.title == "zengshangpin") { // 获得赠品商品列表
|
||||
this.dataForm.activedContent.zProductsList = data.list
|
||||
console.log(this.dataForm.activedContent.zProductsList, 'zProductsList')
|
||||
}
|
||||
});
|
||||
this.$bus.$on("haveSelectedCoupon", (data) => {
|
||||
this.dataForm.activedContent.couponList = data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.couponList {
|
||||
padding-left: 0;
|
||||
margin: 0; overflow: hidden; border-bottom: 1px solid #eee;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 79px;
|
||||
background: url(../../../../static/img/couponBg.jpg) no-repeat left top;
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: bisque;
|
||||
line-height: 20px;
|
||||
margin-top: 18px;
|
||||
display: block;
|
||||
}
|
||||
.delbtn{position: absolute; cursor: pointer; width: 15px; height: 15px; top: 10px; line-height: 11px; border-radius: 20px; right: 5px; color: #eee; border: 1px solid #eee; font-size: 12px; margin-top: 0;}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
color: bisque;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-uploadfeng {
|
||||
/deep/ .el-upload-list__item {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pictureList {
|
||||
/deep/.el-upload--picture {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-upload-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-upload-list__item {
|
||||
// width: 50%;
|
||||
padding: 5px 5px 5px 87px;
|
||||
height: 40px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.el-upload-list__item-name {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
outline: none;
|
||||
color: #17B3A3;
|
||||
cursor: pointer;
|
||||
}</style>
|
||||
228
src/views/modules/activity/activityList.vue
Normal file
228
src/views/modules/activity/activityList.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-radio-group size="mini" v-model="couponActiveName" style="margin-bottom: 15px;" @tab-click="handleClick">
|
||||
<el-radio-button label="0">全部</el-radio-button>
|
||||
<el-radio-button label="1">生效中</el-radio-button>
|
||||
<el-radio-button label="2">已过期</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input size="mini" v-model="dataForm.key" placeholder="参数名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="mini" @click="getDataList()">查询</el-button>
|
||||
<el-button size="mini" v-if="isAuth('book:coupon:save')" type="primary" @click="addOrUpdateHandle()">新增活动</el-button>
|
||||
<!-- <el-button v-if="isAuth('book:coupon:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="selectionChangeHandle"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="序号" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="活动名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="封面图">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="开始时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="结束时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
|
||||
<el-button type="text" size="small" >活动详情</el-button>
|
||||
<!-- <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update @showProlist = "showProlist" @showCouponlist = "showCouponlist" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||
<!-- 商品列表 -->
|
||||
<ProListCom ref="ProList" :visible="ProListVisible" @ProListClose = "ProListClose"></ProListCom>
|
||||
<CouponListCom ref="CouponList" :visible="CouponListVisible" @CouponListClose = "CouponListClose"></CouponListCom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProListCom from '../shop/pubilc-pro-list'
|
||||
import AddOrUpdate from './activity-add-or-update'
|
||||
import CouponListCom from '../coupon/pubilc-coupon-list'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataForm: {
|
||||
key: ''
|
||||
},
|
||||
CouponListVisible:false,
|
||||
ProListVisible:false,
|
||||
couponActiveName:'0',
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
ProListCom,
|
||||
CouponListCom
|
||||
},
|
||||
activated () {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(){
|
||||
console.log(this.couponActiveName)
|
||||
// console.log(787878)
|
||||
},
|
||||
showProlist(){
|
||||
this.ProListVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ProList.getDataList()
|
||||
})
|
||||
|
||||
},
|
||||
showCouponlist(){
|
||||
this.CouponListVisible = true;
|
||||
console.log(45455)
|
||||
this.$nextTick(() => {
|
||||
this.$refs.CouponList.getDataList()
|
||||
})
|
||||
},
|
||||
ProListClose(){
|
||||
this.ProListVisible = false;
|
||||
},
|
||||
CouponListClose(){
|
||||
this.CouponListVisible = false
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList () {
|
||||
this.dataListLoading = true
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/activity/list'),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({
|
||||
'page': this.pageIndex,
|
||||
'limit': this.pageSize,
|
||||
'key': this.dataForm.key,
|
||||
'currentState':this.couponActiveName
|
||||
})
|
||||
}).then(({data}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list
|
||||
this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle (val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle (val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle (val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle (id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteHandle (id) {
|
||||
var ids = id ? [id] : this.dataListSelections.map(item => {
|
||||
return item.id
|
||||
})
|
||||
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/activity/delete'),
|
||||
method: 'post',
|
||||
data: this.$http.adornData(ids, false)
|
||||
}).then(({data}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},watch:{
|
||||
couponActiveName: {
|
||||
handler(val, oldVal) {
|
||||
this.getDataList()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user