Skip to content

M
marketing
Commit 7bc8dca1 by 陈羽
Options

update:修复bug

parent 77ab7f2d
Showing with 141 additions and 40 deletions
src/views/ecm/marketing-event/components/item-card.vue
......@@ -3,7 +3,7 @@
<img v-if="item.status === 0" :src="require('../assets/img/delete_icon.png')" draggable="false" class="flag" />
<img v-else-if="item.couponStock <= 0" :src="require('../assets/img/stock_icon.png')" draggable="false" class="flag" />
<div class="dm-card__item" :style="{ background: item.cardColor }">
<img class="dm-card__item__avatar" :src="item.brandLogo || loadErrorImg" alt="" />
<!-- <img class="dm-card__item__avatar" :src="item.brandLogo || loadErrorImg" alt="" /> -->
<div class="inline-block">
<el-tooltip open-delay="200" effect="dark" :content="item.coupCardId" placement="top-start">
<p class="dm-card__item__title">{{ item.cardName }}</p>
......
src/views/sign/assets/style/index.css
......@@ -145,6 +145,9 @@
vertical-align: middle;
cursor: pointer;
}
.dm-marketing__opt--icon {
margin-left: 0;
}
.dm-marketing__opt--icon:hover,
.dm-marketing__opt--icon--bottom:hover {
color: #1890ff;
......@@ -202,16 +205,60 @@
/* item */
/* card */
.dm-card__item__wrap {
position: relative;
display: inline-block;
width: 280px;
height: 101px;
margin: 0 10px 0 0;
padding: 18px 20px;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid rgba(228, 231, 237, 1);
border-radius: 4px;
}
.dm-card__item {
padding: 0 15px;
background: rgba(72, 170, 3, 0.85);
height: 106px;
line-height: 106px;
}
.dm-card__item__avatar {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
}
.dm-card__item__title {
vertical-align: middle;
margin-left: 8px;
max-width: 180px;
font-size: 16px;
font-weight: 500;
line-height: 30px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-card__item__desc {
vertical-align: middle;
margin-left: 8px;
max-width: 200px;
font-size: 12px;
line-height: 20px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-card__item--bottom {
vertical-align: middle;
line-height: 106px;
color: #909399;
font-size: 12px;
line-height: 36px;
padding-left: 15px;
}
/* integral */
.dm-integral__item__wrap {
box-sizing: border-box;
......
src/views/sign/components/item-card.vue
<template>
<div class="dm-card__item__wrap">
<el-tooltip open-delay="200" effect="dark" :content="item.prizeId" placement="top-start">
<p class="dm-card__item__title" style="font-size:24px;color: #303133;margin-left: 0;">{{ item.couponName }}</p>
</el-tooltip>
<p class="dm-card__item--bottom" style="font-size:16px;margin-top:15px;padding:0">卡券状态：{{ item.couponStatus === 0 ? '已删除' : '有效' }}</p>
<img v-if="item.status === 0" :src="require('../assets/img/delete_icon.png')" draggable="false" class="flag" />
<img v-else-if="item.couponStock <= 0" :src="require('../assets/img/stock_icon.png')" draggable="false" class="flag" />
<div class="dm-card__item" :style="{ background: item.cardColor }">
<img class="dm-card__item__avatar" :src="item.brandLogo || loadErrorImg" alt="" />
<div class="inline-block">
<el-tooltip open-delay="200" effect="dark" :content="item.coupCardId" placement="top-start">
<p class="dm-card__item__title">{{ item.cardName }}</p>
</el-tooltip>
<p class="dm-card__item__desc" v-if="item.cardEffectiveMode !== 0">领取后{{ (item.startDay === 0 ? '当' : '第' + item.startDay) + '天，有效天数' + item.limitDay }}天</p>
<p class="dm-card__item__desc" v-if="item.cardEffectiveMode === 0">{{ formatDateTimeByType(item.beginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(item.endDate, 'yyyy-MM-dd') }}</p>
</div>
</div>
<p class="dm-card__item--bottom">
<span>适用{{ item.storeMode === 0 ? '所有门店' : item.storeMode === 1 ? '部分分组' : '部分门店' }}</span>
</p>
<div v-if="overdue" class="danger-color fz12 mt5"><i class="el-icon-warning mr5 fz12"></i>超过投放期限</div>
</div>
</template>
<script>
import { formatDateTimeByType } from '../assets/utils.js';
export default {
name: 'item-card',
data() {
return {};
return {
formatDateTimeByType,
// eslint-disable-next-line
loadErrorImg: require('../assets/img/loaderror.png')
};
},
props: {
item: {
......@@ -20,8 +37,32 @@ export default {
return {};
}
}
},
computed: {
overdue() {
const { putEndDate, putBeginDate, putEffectiveMode } = this.item;
if (putEffectiveMode == 0) {
return new Date() > new Date(putEndDate) || new Date() < new Date(putBeginDate);
}
return false;
}
},
mounted() {
console.log(this.item);
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import '../assets/style/index.css';
.dm-card__item__wrap {
position: relative;
img.flag {
position: absolute;
right: 0px;
top: -2px;
z-index: 5;
width: 70px;
}
}
</style>
src/views/sign/components/lib-card.vue
......@@ -6,7 +6,7 @@
<el-select style="width:120px;margin-right:10px;" v-model="listParams.cardTypes" placeholder="卡券类型" @change="refresh">
<el-option v-for="item in cardTypesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<!-- <span class="fz12 gray">{{ limitTips }}{{ total }}张。 </span> -->
<span class="fz12 gray">{{ limitTips }}{{ total }}张。 </span>
</div>
<!-- <div class="fr">
<el-button type="primary" @click="add">新建卡券</el-button>
......@@ -101,7 +101,7 @@ export default {
pageSize: 5,
cardTypes: '', // 0：抵金券，1：折扣券，2：兑换券
requestProject: 'gic-web',
cardLimitType: this.cardLimitType,
cardLimitType: 3,
cardType: ''
},
total: 0,
......
src/views/sign/index.vue
......@@ -12,6 +12,7 @@ export default {
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '门店签到', path: '/signIn' }]);
this.$store.commit('aside_handler', false);
this.$nextTick(_ => {
this.$store.commit('aside_handler', true);
});
......
src/views/sign/setting.vue
......@@ -11,7 +11,7 @@
</el-radio-group>
<!-- 签到日期选择指定日期 -->
<el-form-item prop="date" class="date_picker_item">
<el-date-picker v-if="form.dateType === 2" v-model="date" @change="change" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<el-date-picker v-if="form.dateType === 2" v-model="date" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:294px;"></el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label="签到时段" prop="timeType">
......@@ -20,9 +20,7 @@
<el-radio :label="2">指定时段</el-radio>
</el-radio-group>
<!-- 签到时段选择指定时段 -->
<el-form-item prop="time" class="date_picker_item">
<el-time-picker v-if="form.timeType === 2" v-model="time" value-format="HH:mm:ss" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
</el-form-item>
<el-form-item prop="time" class="date_picker_item" v-if="form.timeType === 2"> <el-time-picker v-model="form.timeStart" class="store-sign-timepicker" align="center" placeholder="开始时间" style="width:135px;" value-format="HH:mm:ss"> </el-time-picker><span style="margin: 0 5px;">至</span><el-time-picker v-model="form.timeEnd" align="center" placeholder="结束时间" style="width:135px;" value-format="HH:mm:ss"> </el-time-picker> </el-form-item>
</el-form-item>
<el-form-item label="签到间隔" prop="signInterval">
<el-radio-group v-model="form.signInterval" class="sign-time">
......@@ -31,8 +29,8 @@
<el-radio :label="3">每月<span v-if="form.signInterval === 3" class="tips">每个用户每月可在门店签到一次。每月1号0:00刷新签到次数</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="签到门店" prop="storeFilterId">
<vue-gic-store-new :options="options" :isAdd="isAdd" :creatorId="creatorId" :uuid.sync="form.storeFilterId" ref="storeNew" scenes="auth"></vue-gic-store-new>
<el-form-item label="签到门店" prop="storeFilterId" v-if="form.storeFilterId">
<vue-gic-store-card :options="options" :isAdd="isAdd" :uuid.sync="form.storeFilterId" ref="storeCard"></vue-gic-store-card>
</el-form-item>
<el-form-item label="签到距离" prop="signDistance">
<el-input-number v-model="form.signDistance" controls-position="right" class="shortInput" @change="handleChange" :min="100" :max="5000"></el-input-number><span style="margin-left:9px;">米</span>
......@@ -50,7 +48,7 @@
<el-form-item label="签到规则说明" prop="remark">
<el-input v-model="form.remark" class="long-input" type="textarea" resize="none" rows="4" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item label="签到福利" prop="prize">
<el-form-item label="签到福利">
<section class="dm-marketing">
<div class="dm-marketing__opt--wrap" style="margin-bottom:10px;" v-if="!itemCom">
<i class="el-icon-plus dm-marketing__opt--icon" @click="optTopShow = !optTopShow"></i>
......@@ -68,6 +66,9 @@
</div>
<span class="tips">*支持每人限领张数≥100张的卡券。</span>
</section>
<el-form-item prop="prizeType">
<el-input type="text" v-model="form.prizeType" style="display:none;"></el-input>
</el-form-item>
</el-form-item>
<el-button type="primary" @click="onSubmit('form')" style="margin:24px 0 50px 111px;">保存</el-button>
</el-form>
......@@ -96,7 +97,7 @@ const defaultForm = {
timeStart: 0, // 签到指定时段(开始)
timeEnd: 0, // 签到指定时段(结束)
signInterval: 0, // 签到间隔 签到间隔1每天2每周3每月
storeFilterId: 0, // 签到门店
storeFilterId: '', // 签到门店
signDistance: 0, // 签到距离
memberSearchId: '', // 签到人群
remark: '', // 签到规则说明
......@@ -122,12 +123,20 @@ export default {
}
};
const validTime = (rule, value, callback) => {
if (this.form.timeType && !this.form.time) {
if (this.form.timeType === 2 && (!this.form.timeStart || !this.form.timeEnd)) {
return callback(new Error('请选择指定时段'));
} else {
callback();
}
};
const validPrize = (rule, value, callback) => {
console.log(value);
if (this.form.prizeType === 0) {
return callback(new Error('请选择签到福利'));
} else {
callback();
}
};
return {
loading: false,
// 门店筛选器
......@@ -140,6 +149,7 @@ export default {
storeConfig: null,
// 人群筛选器
getSaveData: '',
brandLogo: '', // 公司logo
hasSearchData: '{}', // 当前页回显的数据(接口返回)
toggleTag: false, // 控制(确认取消)按钮显示的参数,仅供参考,可自行修改
saveTag: false, // 控制(保存)按钮显示的参数,仅供参考,可自行修改
......@@ -157,7 +167,8 @@ export default {
showDialog: false, // 弹窗显示隐藏
rules: {
date: { validator: validDate, trigger: 'blur' },
time: { validator: validTime, trigger: 'blur' }
time: { validator: validTime, trigger: 'blur' },
prizeType: { validator: validPrize, trigger: 'change' }
},
pickerOptions: {
disabledDate: time => {
......@@ -177,37 +188,29 @@ export default {
if (res.errorCode === 0 && res.result) {
this.isAdd = false;
this.form = { ...res.result };
this.brandLogo = res.result.brandLogo;
this.hasSearchData = this.form.memberSearchId;
if (this.form.dateType && this.form.dateStart && this.form.dateEnd) {
this.date[0] = formatDateTimeByType(this.form.dateStart, 'yyyy-MM-dd');
this.date[1] = formatDateTimeByType(this.form.dateEnd, 'yyyy-MM-dd');
}
if (this.form.timeType) {
this.form.time = [];
this.time[0] = this.form.timeStart;
this.time[1] = this.form.timeEnd;
}
if (this.form.prizeType === 1) {
this.prizeItem.integralCount = this.form.prizeValue;
this.itemCom = 'item-integral';
} else {
this.prizeItem = { prizeId: this.form.prizeId, couponName: this.form.couponName, couponStatus: this.form.couponStatus || null };
this.prizeItem = { ...this.form.coupon, brandLogo: this.brandLogo };
this.itemCom = 'item-card';
}
}
},
async onSubmit(formName) {
this.$refs[formName].validate(async valid => {
this.$refs.form.validate(valid => {
if (valid) {
const params = { ...this.form };
if (params.dateType) {
params.dateStart = this.date[0];
params.dateEnd = this.date[1];
}
if (params.timeType) {
params.timeStart = this.time[0];
params.timeEnd = this.time[1];
}
if (params.prizeType === 1) {
delete params.prizeId;
} else {
......@@ -225,9 +228,6 @@ export default {
}
});
},
change(val) {
console.log(val);
},
/*-------人群筛选器的方法-------*/
getData() {
this.$refs.peopleFilter.confirmSet();
......@@ -266,16 +266,17 @@ export default {
},
// 签到福利保存
saveToList(val) {
this.prizeItem = val;
if (val.comName === 'integral') {
this.form.prizeType = 1;
this.itemCom = 'item-integral';
this.form.prizeValue = val.integralCount;
this.prizeItem = val;
this.form.prizeId = null;
} else {
this.form.prizeType = 2;
this.itemCom = 'item-card';
this.form.prizeId = val.coupCardId;
this.form.couponName = val.cardName;
this.prizeItem = { prizeId: val.coupCardId, couponName: val.cardName, couponStatus: this.form.couponStatus || null };
this.prizeItem = { ...val, brandLogo: this.brandLogo };
this.form.prizeValue = '';
}
},
......@@ -288,13 +289,16 @@ export default {
delItem() {
this.itemCom = '';
this.prizeItem = {};
this.form.prizeType = 0;
this.form.prizeValue = '';
this.form.prizeId = '';
},
// 新增前置 不能超过营销事件限制数量
addItem(v) {
this.dialogCom = 'lib-' + v.value;
// 新增的时候设置为空对象
this.form.prizeType = v.value === 'card' ? 2 : 1;
this.form.prizeValue = '';
this.form.prizeId = '';
this.prizeItem = {};
this.showDialog = true;
}
......@@ -356,7 +360,6 @@ export default {
}
}
.tips {
margin-left: 10px;
color: #606266;
}
.sign-time {
......@@ -368,3 +371,12 @@ export default {
}
}
</style>
<style lang="scss">
.store-sign-timepicker {
width: 158px;
.el-input__inner {
text-align: center;
padding-right: 17px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment