Skip to content

L
link-tools
Commit 9173fe90 by member
Options

链接小工具

parent 4dd8343b
Showing with 474 additions and 21 deletions
carc-list.vue 0 → 100644
<template>
<div>
<div class="filter-list">
<el-select v-model="cardType" style="width: 200px;" placeholder="卡券类型" @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.coupCardId" v-model="radio">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="卡券名称">
<template slot-scope="scope">{{ scope.row.cardName }}</template>
</el-table-column>
<el-table-column prop="subName" label="备注名"></el-table-column>
<el-table-column prop label="有效期">
<template slot-scope="scope">
<div
v-if="scope.row.cardEffectiveMode == 0"
>{{scope.row.beginDate+'-'+ scope.row.endDate}}</div>
<div
v-if="scope.row.cardEffectiveMode == 1"
>领取{{scope.row.startDay +'-'+ scope.row.limitDay}}天后,可以使用</div>
</template>
</el-table-column>
<el-table-column prop label="领取限制">
<template slot-scope="scope">每人限制{{scope.row.cardLimit}}张</template>
</el-table-column>
<el-table-column prop label="适用门店">
<template slot-scope="scope">
<div v-if="scope.row.storeMode == 0">所有门店</div>
<div v-if="scope.row.storeMode == 1">部分分组</div>
<div v-if="scope.row.storeMode == 2">部分门店</div>
</template>
</el-table-column>
<el-table-column prop="couponStock" label="库存"></el-table-column>
</el-table>
<div class="pagination" v-if="total>0">
<el-pagination
@current-change="cardCurrentChange"
:current-page="cardCurrentPage"
small
:page-size="cardPageSize"
layout="prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import qs from "qs";
export default {
name: "card-list",
props: {
pname: String
},
data() {
return {
cardType: null, // 卡券类型
cardOptions: [
{ value: 1, label: '折扣券' },
{ value: 0, label: '抵金券' }
],
cardName: '',
radio: null,
cardCurrentPage: 1,
cardPageSize: 5,
cardLimitType: 1,
cardData: [],
total: 0
};
},
methods: {
// 当某行点击的时候
handleCurrentChangeRow(row) {
this.$nextTick(_ => {
if (row.coupCardId == this.radio) {
this.$emit('pass-id', row.coupCardId);
}
});
},
getCardList() {
var param = {
currentPage: this.cardCurrentPage,
pageSize: this.cardPageSize,
requestProject: this.pname,
cardLimitType: this.cardLimitType,
cardTypes: this.cardType,
searchParam: this.cardName
};
this.axios
.post(this.baseUrl + "/api-plug/get-coupon-list", qs.stringify(param))
.then(res => {
const resData = res.data;
if (resData.errorCode == 0) {
if (!!resData.result) {
if (!!resData.result.result) {
resData.result.result.forEach((ele, index) => {
if (!!ele.beginDate) {
ele.beginDate = this.formatDate(ele.beginDate, ".");
}
if (!!ele.endDate) {
ele.endDate = this.formatDate(ele.endDate, ".");
}
});
this.cardData = resData.result.result;
}
this.total = resData.result.totalCount;
}
} 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.getCardList();
},
handleSearch() {
this.getCardList();
}
},
created() {
const host = window.location.origin;
if (host.indexOf("localhost") != "-1") {
this.baseUrl = "http://gicdev.demogic.com";
} else {
this.baseUrl = host;
}
},
mounted() {
this.getCardList();
}
};
</script>
<style scoped>
.filter-list {
margin-bottom: 10px;
}
.pagination {
text-align: right;
margin-top: 10px;
}
</style>
gift-list.vue 0 → 100644
<template>
<div class="gift-list">
<div class="links-tools-row">
<el-select v-model="giftVal" style="width: 200px;" placeholder="礼品类型" @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">所需积分：{{item.integralCost}}</p>
<span class="pro-price">所需现金：{{item.cashCost}}</span>
</div>
</li>
</ul>
</div>
<div class="links-tools-page" v-if="total > 0">
<el-pagination
@current-change="handleChangePage"
:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import qs from "qs";
export default {
name: "gift-list",
props: {
pname: String
},
data() {
return {
currentPage: 1,
activeIndex: -1,
pageSize: 5,
total: 0,
giftVal: null,
giftOptions: [],
goodsList: [],
giftName: ""
};
},
created() {
const host = window.location.origin;
if (host.indexOf("localhost") != "-1") {
this.baseUrl = "http://gicdev.demogic.com";
} else {
this.baseUrl = host;
}
},
methods: {
// 分类
getGiftList() {
this.axios
.get(`${this.baseUrl}/api-integral-mall/load-category?requestProject=${this.pname}`)
.then(res => {
const resData = res.data;
if (resData.errorCode === 0) {
if (!!resData.result && resData.result.length) {
this.giftOptions = resData.result;
}
}
});
},
// 分页换页
handleChangePage(val) {
this.cardCurrentPage = val;
this.getData();
},
handleChange() {
this.getData();
},
// 分页数据 integralCost积分费用 cashCost现金费用 proName
getData() {
const params = {
requestProject: this.pname,
currentPage: this.currentPage,
pageSize: this.pageSize,
category: this.giftVal,
giftName: this.giftName
};
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 && data.result.rows.length) {
this.goodsList = data.result.rows;
}
this.total = data.result.total || 0;
}
});
},
selectGoodLinkItem(item, i) {
this.activeIndex = i;
this.$emit('pass-gift', item);
},
handleSearch() {
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;
}
</style>
linktools.vue
......@@ -23,10 +23,10 @@ linkSelect(val) {
this.linkToolsVisible = false;
}
components: {
components: {linkId
Linktools
}
} coupCardId
-->
<template>
......@@ -123,7 +123,7 @@ components: {
<el-input v-model="h5linkObj.url" placeholder="请输入网址"></el-input><a class="h5link-help" href="http://doc.demogic.com/doc/index.php?s=/41&page_id=441" target="_blank">【帮助文档】请联系公司技术人员查看文档配置标准链接</a>
</div>
<div class="h5link-row">
<label class="h5link-title h5link-dynamic-title">动态参数</label>
<label class="h5link-title h5link-dynamic-title">动态参数（选填）</label>
<div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
......@@ -225,7 +225,7 @@ components: {
<el-input v-model="thirdObj.appid" placeholder="请输入 appid"></el-input>
</div> -->
<div class="h5link-row">
<label class="h5link-title h5link-dynamic-title">动态参数</label>
<label class="h5link-title h5link-dynamic-title">动态参数（选填）</label>
<div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
......@@ -373,6 +373,16 @@ components: {
</div>
</div>
<!-- 积分商城下的礼品和卡券 -->
<div class="goods-links-contian" v-if="cardLinksVisible">
<div class="links-tools-row" v-if="cardType">
<card-list :pname="pname" @pass-id="handlePassId"></card-list>
</div>
<div class="links-tools-row" v-else>
<gift-list :pname="pname" @pass-gift="handlePaddGift"></gift-list>
</div>
</div>
<!-- 底部按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="cancelLinkSelect">取 消</el-button>
......@@ -386,6 +396,8 @@ components: {
// 使用树形插件
// import the component
import Treeselect from '@riophae/vue-treeselect';
import CardList from './card-list';
import GiftList from './gift-list';
// import axios from 'axios'
import qs from 'qs';
......@@ -396,12 +408,26 @@ export default {
data () {
return {
// 项目名
repProjectName: 'gic-web', // 项目名
cardLimit: 1,
disabledList:[],
pname: 'member',
repProjectName: 'member', // 项目名
linkShowType: 0, //传参数判断显示类型
activeName: 'first',
// ---------------------------
twoLevelVisible: false, // 二级下拉
threeLevelVisible: false, // 三级整个
cardLinksVisible: false, // 积分商城礼品或卡券
cardType: '', // 积分商城礼品或卡券 true 表示卡券 否则就是礼品
giftName: '', // 礼品名称
cardName: '', // 卡券名称
cardOptions: [], // 卡券分类
giftOptions: [], // 礼品分类
cardVal: '',
giftVal: '',
cardList: [], // 优惠券
// 链接类型
linksType: '',
linksTypeOptions: [
......@@ -622,6 +648,8 @@ export default {
}
},
beforeMount() {
this.chooseFlag = false;
this.giftFlag = false;
var that = this
var host = window.location.origin;
if (host.indexOf('localhost') != '-1') {
......@@ -631,9 +659,21 @@ export default {
}
},
methods: {
handlePaddGift(list) {
// 拼接id
this.giftFlag = true;
this.giftUrl = list.integralMallProId;
},
handlePassId(id) {
this.chooseFlag = true;
// 先保存下来
this.cardUrl = id;
},
// --------------------------------------------------
// 选择类型改变 (一级选择,保存选择类型)
linksTypeChange: function(e) {
this.linkId = e;
var that = this
var selectOneItem = '';
that.linksTypeOptions.forEach(function(ele,inde){
......@@ -674,6 +714,7 @@ export default {
// set onelevel visible
setOneLevelVisible(type,selectOneItem) {
var that = this;
this.cardLinksVisible = false;
// 设置选择的 id
that.selectLinkObj.id = selectOneItem.linkId;
if (type) {
......@@ -726,17 +767,11 @@ export default {
// twoLevelValueChange (二级选择,保存选择类型)
twoLevelValueChange(e) {
console.log(e)
var that = this
// 清空已经选择
that.selectLinkObj.name = '';
that.selectLinkObj.url = '';
this.cardLinksVisible = false;
// 判断自定义
if (that.oneLevelTypeValue == 6) {
var selectDefineItem = ''
......@@ -998,19 +1033,35 @@ export default {
// threeSingleValueChange
threeSingleValueChange(e) {
// 是那个类型的
this.giftType = e;
var that = this
var selThreeItem = '';
that.threeLevelOptions.forEach(function(ele,index){
if (e==ele.linkId) {
if (e == ele.linkId) {
selThreeItem = ele;
}
})
// 非门店签到
that.selectLinkObj.id = e;
that.selectLinkObj.url = selThreeItem.content;
that.selectLinkObj.name = selThreeItem.name
that.selectLinkObj.name = selThreeItem.name;
// #sy 三级下拉
// 卡券
if (e === 'coup') {
this.cardLinksVisible = true;
this.cardType = true;
} else if (e === 'gift') {
// 礼品
this.cardLinksVisible = true;
this.cardType = false;
}
},
// 卡券列表
// 礼品列表
// 获取自定义列表
getDefinePage() {
var that = this;
......@@ -1455,6 +1506,41 @@ export default {
return;
}
// 确定是会员功能 然后看是那个类型的
if (this.linkId == 27) {
if (this.giftType == 'coup') {
// 优惠券
if (this.chooseFlag) {
this.selectLinkObj.name = 'coup';
this.selectLinkObj.id = this.cardUrl;
this.selectLinkObj.url += `/${this.cardUrl}`;
this.transData();
return;
} else {
this.$message.warning({
duration: 1000,
message: "请选择卡券！"
})
return false;
}
} else if (this.giftType == 'gift') {
// 礼品
if (this.giftFlag) {
this.selectLinkObj.name = 'gift';
this.selectLinkObj.id = this.giftUrl;
this.selectLinkObj.url += `/${this.giftUrl}`;
this.transData();
return;
} else {
this.$message.warning({
duration: 1000,
message: "请选择礼品！"
})
return false;
}
}
}
// 如果门店签到
console.log("门店签到:",that.twoLevelSelectValue)
......@@ -1473,12 +1559,11 @@ export default {
}
return false;
}
console.log(that.selectLinkObj)
if (!!that.selectLinkObj.name&&!!that.selectLinkObj.id) {
alert(JSON.stringify(this.selectLinkObj));
if (!!that.selectLinkObj.name && !!that.selectLinkObj.id) {
// 触发父组件方法,传递参数
that.transData();
}else {
} else {
that.$message.error({
duration: 1000,
message: "请选择链接"
......@@ -1557,7 +1642,7 @@ export default {
// 触发父组件方法,传递参数
transData() {
var that = this;
that.$emit('linkSelect',that.selectLinkObj)
that.$emit('linkSelect', that.selectLinkObj)
that.resetAll();
},
......@@ -1837,7 +1922,9 @@ export default {
},
components: {
Treeselect
Treeselect,
CardList,
GiftList
}
}
</script>
......@@ -1888,6 +1975,7 @@ export default {
}
.goods-link-item {
display: inline-block;
vertical-align: middle;
width: 310px;
padding: 10px 10px;
/*height: 110px;*/
......
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