Skip to content

M
marketing
Commit c8caabee by chenxin
Options

fix: 链接小工具

parent 47442554
Showing with 490 additions and 14 deletions
src/components/linktools-full/card-list.vue 0 → 100644
<template>
<div>
<div class="filter-list">
<el-select v-model="cardType" style="width: 200px;" placeholder="卡券类型" clearable @change="handleChange">
<el-option v-for="item in cardOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input v-model="cardName" style="width: 200px; margin-left: 20px;" clear placeholder="输入卡券名称" @keyup.native.enter="handleSearch"></el-input>
</div>
<el-table ref="multipleTable" :data="cardData" class="card-table" tooltip-effect="dark" style="width: 100%" @row-click="handleCurrentChangeRow">
<el-table-column label width="55">
<template slot-scope="scope">
<el-radio class="radio-style" :label="scope.row.integralMallProId" :value="cardId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="卡券名称" prop="cardName"> </el-table-column>
<el-table-column prop="proSubName" label="备注名"></el-table-column>
<el-table-column prop="integralCost" label="兑换限制"></el-table-column>
<el-table-column prop="virtualStock" label="库存"></el-table-column>
</el-table>
<div class="pagination" v-if="total > 0">
<dm-pagination @current-change="cardCurrentChange" :current-page="cardCurrentPage" small :page-size="cardPageSize" layout="prev, pager, next" :total="total"></dm-pagination>
</div>
</div>
</template>
<script>
import qs from 'qs';
export default {
name: 'card-list',
props: {
pname: String,
cardId: String
},
data() {
return {
cardType: null, // 卡券类型
cardOptions: [
{ value: 1, label: '折扣券' },
{ value: 0, label: '抵金券' }
],
cardName: '',
cardCurrentPage: 1,
cardPageSize: 5,
cardLimitType: 1,
cardData: [],
total: 0
};
},
methods: {
// 当某行点击的时候
handleCurrentChangeRow(row) {
this.$nextTick(_ => {
// if (row.integralMallProId == this.radio) {
this.$emit('pass-id', row);
// }
});
},
getCardList() {
var param = {
currentPage: this.cardCurrentPage,
pageSize: this.cardPageSize,
requestProject: this.pname,
cardType: this.cardType,
proName: this.cardName
};
this.axios
.get(this.baseUrl + '/api-integral-mall/page-cards-plug', { params: param })
.then(res => {
const resData = res.data;
if (resData.errorCode == 0) {
if (!!resData.result) {
if (!!resData.result.rows) {
this.cardData = resData.result.rows;
} else {
this.cardData = [];
}
this.total = resData.result.total;
}
} else {
this.$message.error({ duration: 1000, message: resData.message });
}
})
.catch(error => {
this.$message.error({
duration: 10000,
message: error.message
});
});
},
// 当前切换分页
cardCurrentChange(val) {
this.cardCurrentPage = val;
this.getCardList();
},
handleChange(val) {
this.cardCurrentPage = 1;
this.getCardList();
},
handleSearch() {
this.cardCurrentPage = 1;
this.getCardList();
}
},
created() {
const host = window.location.origin;
this.baseUrl = host.indexOf('localhost') > -1 ? 'http://gicdev.demogic.com' : host;
},
mounted() {
this.getCardList();
}
};
</script>
<style scoped>
.filter-list {
margin-bottom: 10px;
}
.pagination {
text-align: right;
margin-top: 10px;
}
</style>
src/components/linktools-full/gift-list.vue 0 → 100644
<template>
<div class="gift-list">
<div class="links-tools-row">
<el-select v-model="giftVal" style="width: 200px;" placeholder="礼品类型" clearable @change="handleChange">
<el-option v-for="item in giftOptions" :key="item.integralMallCategoryId" :label="item.categoryName" :value="item.integralMallCategoryId"></el-option>
</el-select>
<el-input v-model="giftName" style="width: 200px; margin-left: 20px;" placeholder="输入礼品名称" @keyup.native.enter="handleSearch"></el-input>
</div>
<div class="goods-link-content">
<ul class="goods-link-list">
<li class="goods-link-item" v-for="(item, index) in goodsList" :key="index" :class="activeIndex == index ? 'good-highlight' : ''" @click="selectGoodLinkItem(item, index)">
<img :src="item.mainImageUrl" class="img" alt="商品图片" />
<div class="inline-block goods-message">
<p class="limit-2 pro-name">{{ item.proName }}</p>
<p class="gray-color pro-code pro-name">所需积分：{{ item.integralCost }}</p>
<p class="pro-price pro-name">所需现金：{{ item.cashCost }}</p>
</div>
</li>
</ul>
</div>
<div class="links-tools-page" v-if="total > 0">
<dm-pagination @current-change="handleChangePage" :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"></dm-pagination>
</div>
</div>
</template>
<script>
import qs from 'qs';
export default {
name: 'gift-list',
props: {
pname: String,
giftId: String
},
data() {
return {
currentPage: 1,
activeIndex: -1,
pageSize: 6,
total: 0,
giftVal: null,
giftOptions: [],
goodsList: [],
giftName: ''
};
},
created() {
const host = window.location.origin;
this.baseUrl = host.indexOf('localhost') > -1 ? 'http://gicdev.demogic.com' : host;
},
methods: {
// 分类
getGiftList() {
this.axios.get(`${this.baseUrl}/api-integral-mall/load-category?requestProject=gic-web`).then(res => {
const resData = res.data;
if (resData.errorCode === 0) {
if (!!resData.result && resData.result.length) {
this.giftOptions = resData.result;
}
}
});
},
// 分页换页
handleChangePage(val) {
this.currentPage = val;
this.getData();
},
handleChange() {
this.currentPage = 1;
this.getData();
},
// 分页数据 integralCost积分费用 cashCost现金费用 proName
getData() {
const params = {
requestProject: 'gic-web',
currentPage: this.currentPage,
pageSize: this.pageSize,
category: this.giftVal,
giftName: this.giftName,
changeType: -1,
releaseType: -1,
showStatus: 1,
porHot: -1
};
this.axios.post(`${this.baseUrl}/api-integral-mall/page-gift`, qs.stringify(params)).then(res => {
const data = res.data;
if (data.errorCode == 0) {
if (!!data.result && data.result.rows) {
this.goodsList = data.result.rows;
this.goodsList.map((el, index) => {
if (el.integralMallProId == this.giftId) {
this.selectGoodLinkItem(el, index);
}
});
}
this.total = data.result.total || 0;
}
});
},
selectGoodLinkItem(item, i) {
this.activeIndex = i;
this.$emit('pass-gift', item);
},
handleSearch() {
this.currentPage = 1;
this.getData();
}
},
mounted() {
this.getGiftList();
this.getData();
}
};
</script>
<style scoped>
.links-tools-row {
margin-bottom: 10px;
}
.links-tools-row .goods-link-item {
display: inline-block;
vertical-align: middle;
width: 307px;
padding: 8px;
margin-right: 7px;
margin-bottom: 10px;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
}
.links-tools-row .goods-link-item .img {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 80px;
}
.links-tools-page {
text-align: right;
}
.links-tools-row .goods-link-item:hover {
cursor: pointer;
border-color: #1890ff;
}
.links-tools-row .goods-link-item .goods-message {
margin-left: 10px;
padding: 5px;
width: 198px;
box-sizing: border-box;
font-size: 12px;
}
.links-tools-row .good-highlight {
border-color: #1890ff;
}
.goods-link-item .goods-message .pro-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 8px 0;
}
</style>
src/components/linktools-full/goods-tree.vue 0 → 100644
<template>
<div class="plug-sg">
<el-popover popper-class="plug-sg__popover" placement="bottom" trigger="click" v-model="treeVis">
<el-input slot="reference" suffix-icon="el-icon-arrow-down" v-model="ategory" placeholder="所有分类"></el-input>
<el-tree class="plug-sg__tree" ref="tree" :default-expand-all="true" node-key="mallProTagId" :data="treeData" :props="defaultProps" :highlight-current="true" :current-node-key="currentGoodId" @node-click="handleNodeClick"> </el-tree>
<div class="good-tree-btn">
<el-button @click.prevent.stop="hideTree" type="text" size="small" style="color:#303133">取消</el-button>
<el-button @click.prevent.stop="confirmBtn" type="text" size="small">确定</el-button>
</div>
</el-popover>
</div>
</template>
<script>
export default {
name: 'goods-tree',
props: {
model: {
type: Object,
default() {
return {};
}
},
width: {
type: String,
default: '300'
},
treeData: Array,
currentGoodId: String
},
data() {
return {
treeVis: false,
ategory: '',
defaultProps: {
children: 'childrenList',
label: 'tagName'
}
};
},
methods: {
handleNodeClick(data) {
this.mallData = data;
this.ategory = data.tagName;
},
hideTree() {
this.treeVis = false;
},
confirmBtn() {
this.treeVis = false;
},
getRewriteData(treeData) {
treeData.map(el => {
if (el.mallProTagId == this.currentGoodId) {
this.treeVis = true;
this.handleNodeClick(el);
} else if (Array.isArray(el.childrenList)) {
this.getRewriteData(el.childrenList);
}
});
}
},
watch: {
treeVis(newval) {
if (!newval) {
if (this.mallData) {
this.$emit('pass-mall', this.mallData);
}
}
},
treeData(treeData) {
if (this.currentGoodId && Array.isArray(treeData)) {
this.getRewriteData(treeData);
}
}
}
};
</script>
<style lang="scss">
.plug-sg {
display: inline-block;
width: 200px;
&__popover {
padding: 10px 0 0 0;
}
&__btn {
height: 36px;
padding: 0 10px;
border-top: 1px solid #ebeef5;
line-height: 34px;
text-align: right;
&--cancel {
color: #606266;
}
}
&__tree {
height: 260px;
width: 200px;
overflow-y: auto;
.el-tree-node__label {
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
}
}
.good-tree-btn {
float: right;
margin-right: 10px;
}
</style>
src/views/card/form.js
......@@ -3,6 +3,7 @@
*/
import { _debounce } from '@/utils/index';
import dmUploadImg from '@/components/upload/img';
import linktools from '@/components/linktools-full/index';
import { formatDateTimeByType, deepClone } from '@/utils/index.js';
import xxSysp_mix from '@/mixins/selector.js'; // 商品选择器方法
import { listEntepriseWeimobShop, listEntepriseWeimobCoupon } from '@/service/api/commonApi.js';
......@@ -30,6 +31,7 @@ const initForm = {
cardEffectiveMode: 0,
dateTime: [], // 用户使用有效期
sendDateTime: [], // 卡券模板投放期限
sendDateType: 0, //
costValue: 0, //成本费用
startDay: 0,
limitDay: null,
......@@ -58,6 +60,24 @@ const goods = { ok: '', no: '', flag: false };
export default {
mixins: [xxSysp_mix],
data() {
const checkSendDateTime = (rule, value, callback) => {
const { sendDateTime, cardEffectiveMode, dateTime, sendDateType } = this.form;
if (cardEffectiveMode == 0 || (cardEffectiveMode == 1 && sendDateType == 1)) {
if (!(sendDateTime && sendDateTime[0])) {
callback(new Error('请选择卡券模板投放期限'));
return;
}
if (new Date(sendDateTime[1]) < new Date()) {
callback(new Error('卡券模板投放期限开始时间不能大于当前时间'));
return;
}
if (cardEffectiveMode == 0 && new Date(dateTime[1]) < new Date(sendDateTime[1])) {
callback(new Error('卡券模板投放期限结束日期不能超出卡券使用有效期结束日期'));
return;
}
}
callback();
};
return {
requestProject: 'marketing',
creatorId: '',
......@@ -79,7 +99,8 @@ export default {
costValue: { required: true, type: 'number', min: 0, message: '请输入成本费用', trigger: 'blur' },
cardDenomination: { required: true, type: 'number', message: '此项不能为空', trigger: 'blur' },
cardExplain: { required: true, message: '适用门店说明不能为空', trigger: 'blur' },
useDescript: { required: true, message: '使用说明不能为空', trigger: 'blur' }
useDescript: { required: true, message: '使用说明不能为空', trigger: 'blur' },
sendDateTime: { required: true, validator: checkSendDateTime, trigger: 'change' }
},
startDayOptions: [],
cardApplyChannelOptions: [],
......@@ -133,7 +154,8 @@ export default {
nowWmShopData: {}, // 存储wm店铺数据
giveEnable: false, // 支持转赠
refundEnable: false, // 支持退货
discount_limit: { type: 1, count: undefined, flag: false } // 适用商品折扣
discount_limit: { type: 1, count: undefined, flag: false }, // 适用商品折扣
linkToolsVisible: false // 链接小工具
};
},
watch: {
......@@ -208,7 +230,8 @@ export default {
},
components: {
'dm-upload-img': dmUploadImg,
'dm-goods-input': dmGoodsInput
'dm-goods-input': dmGoodsInput,
linktools
},
computed: {
asideShow() {
......@@ -229,10 +252,6 @@ export default {
// 当输入完整用户使用有效期后，出现卡券模板投放期限
const { cardEffectiveMode, limitDay, dateTime } = this.form;
if (cardEffectiveMode == 0) {
// 用户使用有效期=固定日期，则默认卡券模板投放期限开始时间=今天，结束日期=用户使用有效期结束日期
if (dateTime && dateTime[0]) {
this.form.sendDateTime = [...dateTime];
}
return !!(dateTime && dateTime[0] && dateTime[1]);
}
if (cardEffectiveMode == 1) {
......@@ -242,6 +261,28 @@ export default {
}
},
methods: {
// changeDateTime
setSendDateTime(dateTime) {
if (dateTime && dateTime[0]) {
this.form.sendDateTime = [...dateTime];
}
},
// 改变用户使用有效期类型
changeCardEffectiveMode(val) {
const { dateTime } = this.form;
if (val == 0) {
// 卡券模板投放期限
// 用户使用有效期=固定日期，则默认卡券模板投放期限开始时间=今天，结束日期=用户使用有效期结束日期
if (dateTime && dateTime[0]) {
this.setSendDateTime(dateTime);
return;
}
}
if (val == 1) {
this.form.sendDateType = 0;
}
this.form.sendDateTime = [,];
},
//切换卡券类型 表单置为默认值
reset(e) {
this.form = JSON.parse(JSON.stringify(initForm));
......@@ -1144,8 +1185,12 @@ export default {
this.$tips({ type: 'warning', message: err.message });
return false;
});
}
},
// ------微盟适用商品结束-------
// ---------链接小工具---------
linkSelect(val) {
console.log(val);
}
},
mounted() {
// this.cardGetShelfs();
......
src/views/card/form.vue
......@@ -223,11 +223,11 @@
<span class="tooltip-icon cursor">用户使用有效期</span>
</el-tooltip>
<div>
<el-radio v-model="form.cardEffectiveMode" :disabled="isEdit || isInfo || cardValidity" :label="0">固定日期</el-radio>
<el-date-picker v-model="form.dateTime" @focus="form.cardEffectiveMode = 0" :disabled="isEdit || isInfo || cardValidity" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<el-radio @change="changeCardEffectiveMode" v-model="form.cardEffectiveMode" :disabled="isEdit || isInfo || cardValidity" :label="0">固定日期</el-radio>
<el-date-picker @change="setSendDateTime" v-model="form.dateTime" @focus="form.cardEffectiveMode = 0" :disabled="isEdit || isInfo || cardValidity" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
<div class="pt20">
<el-radio v-model="form.cardEffectiveMode" :label="1" :disabled="isEdit || isInfo || cardValidity">领取后，</el-radio>
<el-radio @change="changeCardEffectiveMode" v-model="form.cardEffectiveMode" :label="1" :disabled="isEdit || isInfo || cardValidity">领取后，</el-radio>
<el-select v-model="form.startDay" @focus="form.cardEffectiveMode = 1" class="w200" placeholder="请选择" :disabled="isEdit || isInfo || cardValidity">
<el-option v-for="item in startDayOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
......@@ -236,17 +236,25 @@
</el-form-item>
<!-- 当输入完整用户使用有效期后，出现卡券模板投放期限 -->
<el-form-item v-if="showSendDateTime" class="is-required" prop="SendDateTime">
<el-form-item v-if="showSendDateTime" prop="sendDateTime">
<el-tooltip slot="label" open-delay="100" content="卡券模板投放期限为该张卡券可在GIC后台或通过API接口可投放给用户的期限" placement="top">
<span class="tooltip-icon cursor">卡券模板投放期限</span>
</el-tooltip>
<el-date-picker v-model="form.sendDateTime" :disabled="isEdit || isInfo" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<div class="gray fz13">* 卡券模板投放期限结束日期不能迟于卡券使用有效期固定日期结束日期</div>
<div v-if="form.cardEffectiveMode == 0">
<el-date-picker v-model="form.sendDateTime" :disabled="isEdit || isInfo" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<span class="gray fz13">* 卡券模板投放期限结束日期不能迟于卡券使用有效期固定日期结束日期</span>
</div>
<div v-if="form.cardEffectiveMode == 1" style="height:35px;">
<el-radio v-model="form.sendDateType" :disabled="isEdit || isInfo" :label="0">长期有效</el-radio>
<el-radio v-model="form.sendDateType" :disabled="isEdit || isInfo" :label="1">固定日期</el-radio>
<el-date-picker v-if="form.sendDateType == 1" v-model="form.sendDateTime" @focus="form.sendDateType = 1" :disabled="isEdit || isInfo" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
</el-form-item>
<el-form-item prop="cardExplain" label="跳转配置">
<el-switch v-model="form.jumpSwitch"></el-switch>
<div class="gray fz13">* 开启后小程序卡券详情将对应路径的跳转按钮</div>
<el-button @click="linkToolsVisible = true" type="text">设置链接</el-button>
</el-form-item>
<el-form-item prop="cardExplain" label="适用门店说明">
......@@ -314,6 +322,8 @@
<el-button v-if="isAdd || isCopy" type="primary" @click="xxSyspConfirm">确定</el-button>
</div>
</el-dialog>
<!-- 链接小工具 -->
<linktools :linkVisible="linkToolsVisible" @linkSelect="linkSelect" />
</div>
</template>
......
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