Skip to content

L
link-tools
Commit 9173fe90 by member
Options

链接小工具

parent 4dd8343b
Showing with 768 additions and 216 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;*/
......
linktoolspage.vue
......@@ -2,76 +2,76 @@
<template>
<!-- 链接小工具 -->
<div class="link-tools-contain">
<div :class="activeName == 'first'? 'min-1028':'min-720'">
<div class="el-dialog" >
<div class="el-dialog__body">
<!-- 链接类型 -->
<div class="links-types">
<label class="types-title">链接类型</label>
<el-select v-model="linksType" class="w200" placeholder="请选择" @change="linksTypeChange">
<el-option
v-for="item in linksTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 二级下拉 -->
<el-select v-model="twoLevelValue" class="w200" placeholder="请选择" v-if="twoLevelVisible" @change="twoLevelValueChange">
<el-option
v-for="item in twoLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 三级下拉 -->
<div class="three-level-wrap" v-if="threeLevelVisible">
<!-- 三级单选 -->
<el-select class="w200" v-model="threeLevelValue" placeholder="请选择" v-if="threeLeveloneVisible" @change="threeSingleValueChange">
<el-option
v-for="item in threeLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 商品分类链接 -->
<treeselect
v-if="threeLevelTreeVisible"
v-model="threeLevelValue"
:options="goodsCategoryOptions"
:normalizer="normalizer"
:default-expand-level="1"
placeholder="所有分类"
noOptionsText="暂无数据"
noResultsText="无数据"
@select="goodsCategorySelect"
/>
<!-- 搜索后出现下列 -->
<el-select
v-if="threeLevelSearchVisible"
v-model="threeLevelValue"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
@change="threeLevelValueChange"
class="w200"
>
<el-option
v-for="item in threeLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<el-dialog :class="activeName == 'first'? 'min-1026':'min-720'"
title="链接小工具"
:visible.sync="mylinkToolsVisible"
:before-close="handleClose">
<!-- 链接类型 -->
<div class="links-types">
<label class="types-title">链接类型</label>
<el-select v-model="linksType" class="w200" placeholder="请选择" @change="linksTypeChange">
<el-option
v-for="item in linksTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 二级下拉 -->
<el-select v-model="twoLevelValue" class="w200" placeholder="请选择" v-if="twoLevelVisible" @change="twoLevelValueChange">
<el-option
v-for="item in twoLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 三级下拉 -->
<div class="three-level-wrap w200" v-if="threeLevelVisible">
<!-- 三级单选 -->
<el-select v-model="threeLevelValue" placeholder="请选择" v-if="threeLeveloneVisible" @change="threeSingleValueChange">
<el-option
v-for="item in threeLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 商品分类链接 -->
<treeselect
v-if="threeLevelTreeVisible"
v-model="threeLevelValue"
:options="goodsCategoryOptions"
:normalizer="normalizer"
:default-expand-level="1"
placeholder="所有分类"
noOptionsText="暂无数据"
noResultsText="无数据"
@select="goodsCategorySelect"
/>
<!-- 搜索后出现下列 -->
<el-select
v-if="threeLevelSearchVisible"
v-model="threeLevelValue"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
@change="threeLevelValueChange"
>
<el-option
v-for="item in threeLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<!-- h5 v-if="h5linkVisible"-->
<!-- h5 -->
<div class="h5link-contain" v-if="h5linkVisible">
<div class="h5link-row">
<label class="h5link-title">进入条件</label>
......@@ -93,7 +93,7 @@
<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>
......@@ -119,7 +119,7 @@
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select w200" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
......@@ -138,7 +138,7 @@
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select w200" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
......@@ -195,7 +195,7 @@
<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>
......@@ -221,7 +221,7 @@
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select w200" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
......@@ -240,7 +240,7 @@
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select w200" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
......@@ -275,79 +275,90 @@
</div>
<!-- 商品链接 -->
<div class="goods-links-contian" v-if="goodsLinksVisible">
<div class="links-tools-row">
<!-- 品类 -->
<treeselect
v-model="category"
:options="categoryOptions"
:normalizer="normalizer"
:default-expand-level="1"
:flat="true"
placeholder="所有品类"
noOptionsText="暂无数据"
noResultsText="无数据"
no-children-text="无数据"
:load-options="loadOptions"
:beforeClearAll = "beforeClearCategory"
@select="categorySelect"
/>
<!-- 分类树形结构 -->
<treeselect
v-model="classify"
:options="classifyOptions"
:normalizer="normalizer"
:default-expand-level="1"
placeholder="所有分类"
noOptionsText="暂无数据"
noResultsText="无数据"
noChildrenText="无数据"
:beforeClearAll = "beforeClearClassify"
@select="classifySelect"
/>
<el-input class="links-tools-input"
placeholder="请输入商品名称/货号"
v-model="searchGoods" @keyup.native="(value) => toSearchInput(value)" clearable @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<!-- 商品列表 -->
<div class="goods-link-content">
<ul class="goods-link-list">
<li :class="item.mallProId == selectGoodId? 'goods-link-item goodSelect': 'goods-link-item'" v-for="(item, index) in goodsList" @click="selectGoodLinkItem(item)">
<img :src="item.mallProImageUrl" alt="商品图片" />
<div class="inline-block goods-message">
<p class="limit-2 pro-name">{{item.proName}}</p>
<p class="gray-color pro-code">货号：{{item.proCode}}</p>
<span class="pro-price">￥{{item.mallProSpuPrice}}</span>
</div>
</li>
</ul>
</div>
<!-- 分页 -->
<div class="links-tools-page">
<el-pagination
@size-change="linkSizeChange"
@current-change="linkCurrentChange"
:current-page="currentPage"
:page-sizes="[9]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<!-- 商品链接 -->
<div class="goods-links-contian" v-if="goodsLinksVisible">
<div class="links-tools-row">
<!-- 品类 :always-open="true"-->
<treeselect
v-model="category"
:options="categoryOptions"
:normalizer="normalizer"
:default-expand-level="1"
:flat="true"
placeholder="所有品类"
noOptionsText="暂无数据"
noResultsText="无数据"
no-children-text="无数据"
:load-options="loadOptions"
:beforeClearAll = "beforeClearCategory"
@select="categorySelect"
/>
<!-- 分类树形结构 -->
<treeselect
v-model="classify"
:options="classifyOptions"
:normalizer="normalizer"
:default-expand-level="1"
placeholder="所有分类"
noOptionsText="暂无数据"
noResultsText="无数据"
noChildrenText="无数据"
:beforeClearAll = "beforeClearClassify"
@select="classifySelect"
/>
<el-input class="links-tools-input"
placeholder="请输入商品名称/货号"
v-model="searchGoods" @keyup.native="(value) => toSearchInput(value)" clearable @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<!-- 商品列表 -->
<div class="goods-link-content">
<ul class="goods-link-list">
<li :class="item.mallProId == selectGoodId? 'goods-link-item goodSelect': 'goods-link-item'"
v-for="(item, index) in goodsList"
:key="index"
@click="selectGoodLinkItem(item)">
<img :src="item.mallProImageUrl" alt="商品图片" />
<div class="inline-block goods-message">
<p class="limit-2 pro-name">{{item.proName}}</p>
<p class="gray-color pro-code">货号：{{item.proCode}}</p>
<span class="pro-price">￥{{item.mallProSpuPrice}}</span>
</div>
</li>
</ul>
</div>
<!-- 分页 -->
<div class="links-tools-page">
<el-pagination
@size-change="linkSizeChange"
@current-change="linkCurrentChange"
:current-page="currentPage"
:page-sizes="[9]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<!-- 底部按钮 -->
<span slot="footer" class="dialog-footer" >
<!-- <el-button @click="cancelLinkSelect">取 消</el-button>
<el-button type="primary" @click="confirmLinkSelect">确 定</el-button> -->
</span>
<!-- 积分商城下的礼品和卡券 -->
<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>
</div>
<!-- 底部按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="cancelLinkSelect">取 消</el-button>
<el-button type="primary" @click="confirmLinkSelect">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -355,6 +366,8 @@
// 使用树形插件
// 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';
......@@ -364,12 +377,27 @@ export default {
props: ['linkToolsVisible','showType','projectName'],
data () {
return {
repProjectName: 'gic-web', // 项目名
activeName: 'first',
// 项目名
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: [
......@@ -590,9 +618,10 @@ export default {
}
},
beforeMount() {
this.chooseFlag = false;
this.giftFlag = false;
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
......@@ -600,9 +629,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){
......@@ -612,8 +653,7 @@ export default {
})
// 保存选择的类型
that.oneLevelTypeValue = selectOneItem.type;
console.log("that.oneLevelTypeValue:",that.oneLevelTypeValue)
console.log("一级选择的类型:",selectOneItem)
// 判断出现下拉内容/h5部分
// 每次修改选择类型,清空已选择的值
......@@ -644,13 +684,19 @@ export default {
// set onelevel visible
setOneLevelVisible(type,selectOneItem) {
var that = this;
this.cardLinksVisible = false;
// 设置选择的 id
that.selectLinkObj.id = selectOneItem.linkId;
if (type) {
if (selectOneItem.type ==5 ) {
if (selectOneItem.type ==5 ) {
that.h5linkVisible = true; // h5 链接参数输入部分显示
that.thirdlinkVisible = false; // 第三方小程序
}
if (selectOneItem.type ==7 ) {
that.h5linkVisible = false; // h5 链接参数输入部分显示
that.thirdlinkVisible = true; // 第三方小程序
}
that.twoLevelVisible = false; // 二级部分隐藏
that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = false; // 商品链接列表部分
......@@ -678,7 +724,6 @@ export default {
that.threeLevelVisible = false; // 三级部分隐藏
this.getAppList();
}
// 清空设置选择的 id
if(that.oneLevelTypeValue !== 7) {
that.selectLinkObj.id = '';
......@@ -696,7 +741,7 @@ export default {
// 清空已经选择
that.selectLinkObj.name = '';
that.selectLinkObj.url = '';
this.cardLinksVisible = false;
// 判断自定义
if (that.oneLevelTypeValue == 6) {
var selectDefineItem = ''
......@@ -709,17 +754,14 @@ export default {
that.selectLinkObj.params = {
pageId: e
}
return;
}
var selectTwoItem = '';
that.twoLevelOptions.forEach(function(ele,index){
if (e == ele.linkId) {
selectTwoItem = ele;
}
})
// 每次选择清空原有选择参数
that.selectLinkObj.params = '';
// 设置选择的 id
......@@ -728,7 +770,7 @@ export default {
}
// 判断是否结束, 1:结束;
if (selectTwoItem.type == 1 || selectTwoItem.type == 4 || selectTwoItem.type == 6 || that.oneLevelTypeValue == 7 ) {
if (selectTwoItem.type == 1 || selectTwoItem.type == 4 || selectTwoItem.type == 6 || that.oneLevelTypeValue == 7) {
that.threeLevelVisible = false; // 三级部分隐藏
that.threeLevelValue = ''; // 清空三级数据
that.twoLevelSelectValue = ''; // 清空门店签到
......@@ -736,12 +778,12 @@ export default {
// 清空已经选择
that.selectLinkObj.name = '';
that.selectLinkObj.url = '';
// 如果选择商品链接
if(selectTwoItem.type == 4){
that.getGoodsList(); // 获取商品列表
that.getGoodsCategory();// 获取商品品类
that.getGoodsClassify(); // 获取商品分类
that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = true; // 商品链接列表部分显示
return false;
......@@ -841,7 +883,6 @@ export default {
lists.forEach(function(el,ind) {
el.key = el.mallCategoryId;
if(el.parentId == ele.mallCategoryId ){
console.log(index,ind)
ele.subOptions = []
ele.subOptions.push(el)
list.splice(ind,1)
......@@ -856,6 +897,7 @@ export default {
that.categoryOptions = [];
that.categoryOptions.push(onelevelCategory);
console.log("list:",that.categoryOptions)
return false;
}
......@@ -885,6 +927,8 @@ export default {
var resData = res.data
if (resData.errorCode == 0) {
var list = [resData.result],lists = resData.result;
// list.forEach(function(ele,index) {
// ele.subOptions = [];
// ele.name = ele.tagName;
......@@ -917,6 +961,7 @@ export default {
that.goodsCategoryOptions = list;
that.classifyOptions = list;
// that.classifyOptions = list;
console.log("list:",list,that.goodsCategoryOptions)
return;
}
......@@ -958,19 +1003,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;
......@@ -1041,7 +1102,10 @@ export default {
})
});
},
// --------------------------------------------------
// -------------------------------------------
// 选择树形节点方法
......@@ -1050,6 +1114,7 @@ export default {
var that = this
that.category = node.key
// 重新获取商品列表
// that.getGoodsList();
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1061,6 +1126,7 @@ export default {
var that = this
that.category = null;
// 重新获取商品列表
// that.getGoodsList();
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1071,6 +1137,10 @@ export default {
loadOptions({ action, parentNode, callback }) {
// Typically, do the AJAX stuff here.
// Once the server has responded,
// assign children options to the parent node & call the callback.
// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
var that = this
console.log(action,parentNode,callback)
if (action === "LOAD_CHILDREN_OPTIONS") {
......@@ -1091,7 +1161,6 @@ export default {
}
that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category',qs.stringify(para))
.then((res) => {
var resData = res.data
if (resData.errorCode == 0) {
resData.result.forEach(function(ele,index){
......@@ -1126,6 +1195,7 @@ export default {
var that = this
that.classify = node.key
// 重新获取商品列表
// that.getGoodsList();
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1135,8 +1205,10 @@ export default {
},
beforeClearClassify(node, id) {
var that = this
console.log(node, id,that.classify)
that.classify = null;
// 重新获取商品列表
// that.getGoodsList();
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1162,7 +1234,6 @@ export default {
.then(_ => {
done();
that.mylinkToolsVisible = false;
console.log(this.mylinkToolsVisible)
that.$emit('linkSelect')
})
.catch(_ => {
......@@ -1207,6 +1278,7 @@ export default {
toSearchInput: function(value) {
var that = this;
// 搜索重置当前页 为 1
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1218,6 +1290,7 @@ export default {
clearInput: function(e) {
var that = this;
// 搜索重置当前页 为 1
if (that.currentPage == 1) {
that.getGoodsList();
}else {
......@@ -1238,12 +1311,17 @@ export default {
tagId: that.classify,// 分类
requestProject: that.repProjectName
};
// that.currentPage = 1;
// that.pageSize = 10;
// that.total = 50;
that.axios.post(that.baseUrl+'/api-mall/page-mall-goods',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
that.goodsList = resData.result.result
that.total = resData.result.totalCount
return;
}
......@@ -1277,7 +1355,7 @@ export default {
},
// h5 时间开关
// h5 分享开关
shareSwitch(e,obj) {
var that = this
console.log(e,obj)
......@@ -1292,6 +1370,7 @@ export default {
cancelButtonText: '取消',
type: ''
}).then(() => {
console.log("点击确认")
that.$emit('linkSelect')
}).catch(() => {
console.log("取消 取消关闭")
......@@ -1301,7 +1380,7 @@ export default {
// 确认操作
confirmLinkSelect() {
var that = this
console.log(that.linksType,that.twoLevelValue,that.threeLevelValue)
// console.log(that.linksType,that.twoLevelValue,that.threeLevelValue,that.h5linkObj.conditionType)
// 如果选择 h5 判断选择的链接
if (that.oneLevelTypeValue == 5) {
if (!that.h5linkObj.name.trim() || !that.h5linkObj.url.trim()) {
......@@ -1360,6 +1439,7 @@ export default {
if (v.value === this.twoLevelValue) {
that.selectLinkObj.name = v.label;
that.selectLinkObj.appid = v.value;//
// that.selectLinkObj.id = selectOneItem.linkId;
// that.selectLinkObj.id = v.id;
}
})
......@@ -1396,6 +1476,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)
......@@ -1414,12 +1529,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: "请选择链接"
......@@ -1430,7 +1544,7 @@ export default {
checkTwoLevel(v) {
var that = this
console.log(that.threeLevelValue)
// console.log(that.threeLevelValue)
if (!that.threeLevelValue|| !that.threeLevelValue.length) {
that.$message.error({
duration: 1000,
......@@ -1498,11 +1612,11 @@ export default {
// 触发父组件方法,传递参数
transData() {
var that = this;
that.$emit('linkSelect',that.selectLinkObj)
that.$emit('linkSelect', that.selectLinkObj)
that.resetAll();
},
// 获取一级列表/二级列表
// 获取一级列表
getLinksList(parentId,num,twoType) {
var that = this;
// 如果不传传的显示类型,设置
......@@ -1546,11 +1660,9 @@ export default {
ele.id = ele.linkId;
ele.label = ele.name;
ele.value = ele.linkId;
})
that.linksTypeOptions = result
console.log("获取一级类型: ",that.linksTypeOptions)
return;
}
// 设置二级
......@@ -1561,7 +1673,6 @@ export default {
ele.value = ele.linkId
})
that.twoLevelOptions = result
console.log("获取二级类型: ",that.twoLevelOptions)
return;
}
......@@ -1581,7 +1692,6 @@ export default {
that.threeLevelOptions = result
}
console.log("获取三级类型: ",that.threeLevelOptions)
return;
}
},
......@@ -1660,7 +1770,6 @@ export default {
// dynamicChange
dynamicChange(e) {
var that = this
console.log(e);
that.dynamicRow.selectKey = e
},
dynamicBlur(e) {
......@@ -1682,7 +1791,6 @@ export default {
that.dynamicList.push(JSON.parse(JSON.stringify(that.dynamicRow)))
var arrKeys = that.dynamicList.map(ite=>ite.key) // 返回对象中键值集合的数组
var arrValues = that.dynamicList.map(ite=>ite.value)
// console.log("所有name:",arrValues)
if (that.isRepeat(arrKeys) || that.isRepeat(arrValues)) {
that.dynamicList.splice(that.dynamicList.length-1,1)
// arrKeys.splice(that.dynamicList.length-1,1)
......@@ -1690,8 +1798,6 @@ export default {
duration: 1000,
message: "选项不能重复"
})
// console.log(that.dynamicList,arrKeys,arrValues)
return;
}
......@@ -1708,14 +1814,12 @@ export default {
// 删除参数
delDynamic(index) {
var that = this
console.log(index)
that.dynamicList.splice(index,1)
},
// 确认编辑
confirmDynamic(index,obj) {
var that = this
console.log(index,obj)
if (!obj.selectKey||!String(obj.inputValue).trim()) {
that.$message.error({
duration: 1000,
......@@ -1730,7 +1834,6 @@ export default {
copyList[index].value = obj.inputValue
var copyKeys = copyList.map(ite=>ite.key) // 返回对象中键值集合的数组
var copyValues = copyList.map(ite=>ite.value)
// console.log("所有name:",copyValues)
if (that.isRepeat(copyKeys) || that.isRepeat(copyValues)) {
copyList.splice(copyList.length-1,1)
// copyKeys.splice(copyList.length-1,1)
......@@ -1738,13 +1841,11 @@ export default {
duration: 1000,
message: "选项不能重复"
})
// console.log(copyList,copyKeys,copyValues)
return;
}
obj.key = obj.selectKey;
obj.value = obj.inputValue;
// console.log(that.dynamicList)
// return;
// 隐藏编辑部分
obj.editAble = false;
......@@ -1753,7 +1854,6 @@ export default {
// 取消编辑
cancleDynamic(index,obj) {
var that = this
console.log(index,obj)
// 恢复原值
obj.selectKey = obj.key
obj.inputValue = obj.value
......@@ -1765,7 +1865,6 @@ export default {
watch: {
linkToolsVisible(val) {
console.log(val)
this.mylinkToolsVisible = val; // 新增linkToolsVisible的watch，监听变更并同步到linkToolsVisible上
},
// isWx(val) {
......@@ -1778,24 +1877,24 @@ export default {
},
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
},
mounted(){
// console.log('00000');
var that = this;
// 项目名
that.repProjectName = that.projectName || 'gic-web';
// that.toLogin()
// 获取 ShowType
// 获取 showType
that.linkShowType = that.showType || 0;
that.getLinksList(0)
that.getLinksList(0,1)
},
components: {
Treeselect
Treeselect,
CardList,
GiftList
}
}
</script>
......
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