链接小工具

carc-list.vue

+<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

+<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,9 +23,9 @@ linkSelect(val) {
   this.linkToolsVisible = false;
 }
 
-components: {
+components: {linkId
   Linktools
-}
+} coupCardId 
  
  -->
 
@@ -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;*/