商家端优惠券管理前端新增优惠券指定店铺功能业务

src/api/marketing.js

@@ -437,6 +437,14 @@ export function getComposeSelectProduct(data) {
   })
 }
 
+// 获取可选中店铺
+export function getShops(data) {
+  return request({
+    url: '/coupon/getShops',
+    method: 'post',
+    data
+  })
+}
 
 // //* ******************** 售后订单  *********************
 // // 售后管理查询

src/views/marketing/coupon/add.vue

@@ -49,6 +49,23 @@
               {{ idList.length }}
             </i>
           </span>
+          <el-radio
+            v-model="addForm.applyType"
+            :label="4"
+            @change="chooseShop(type = 4)"
+          >指定店铺可用</el-radio>
+          <span v-if="!visitDetail" class="selectBtn" @click="chooseShop(type = 4)">
+            {{$t('common.choose')}}
+            <i v-if="addForm.applyType === 4 && idList.length !== 0" class="selectNum">
+              {{ idList.length }}
+            </i>
+          </span>
+          <span v-if="visitDetail && addForm.applyType === 4" class="selectBtn" @click="chooseShop(type = 4)">
+            查看店铺
+            <i v-if="addForm.applyType === 4 && idList.length !== 0" class="selectNum">
+              {{ idList.length }}
+            </i>
+          </span>
         </el-form-item>
         <el-form-item class="inputW" label="使用门槛" prop="threshold">
           <!-- 订单满<el-input v-model="addForm.threshold" :disabled="isThreshold" type="number" oninput="value=value.replace(/-/, '')" />元 -->
@@ -166,15 +183,79 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog
+      :title="visitDetail ? '查看店铺' : '选择店铺'"
+      :visible.sync="isShopVisible"
+      width="70%"
+      top="50px"
+      class="group-dialog"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      :modal="false"
+    >
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table
+          ref="shopMultipleTable"
+          :data="shopTableData"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          tooltip-effect="dark"
+          style="width: 100%"
+          :row-key="getShopRowKeys"
+          max-height="600"
+          @selection-change="handleShopSelectionChange"
+        >
+          <el-table-column
+            v-if="!visitDetail"
+            type="selection"
+            :reserve-selection="true"
+            width="55"
+          />
+          <el-table-column label="店铺Logo" width="220" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.shopLogo" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="shopName" label="店铺名称" width="220" />
+          <el-table-column prop="chargePersonName" label="店铺负责人" show-overflow-tooltip />
+          <el-table-column label="店铺类型" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.shopType === 1">国内贸易</span>
+              <span v-else-if="scope.row.shopType === 2">跨境保税</span>
+              <span v-else>海外直邮</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="shopOption.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="shopOption.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="shopTotal"
+            @size-change="handleShopSizeChange"
+            @current-change="handleShopCurrentChange"
+          />
+        </div>
+        <div class="footBtnBox">
+          <span slot="footer">
+            <el-button v-if="!visitDetail" type="primary" @click="saveShopIdList">{{ $t('common.sure') }}</el-button>
+            <el-button @click="closeShopSelect">{{ $t('common.cancel') }}</el-button>
+          </span>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { addCoupon, getProducts, couponDetail, updateCoupon } from '@/api/marketing'
+import {addCoupon, getProducts, couponDetail, updateCoupon, getShops} from '@/api/marketing'
 
 function InitCouponForm() {
   this.type = 1
-  this.applyType = 1 //  适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用
+  this.applyType = 1 //  适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用 4-指定店铺可用
   this.couponContent = null // 优惠内容减多少元
   this.couponName = '' //  优惠券名称
   this.couponType = 1 //  优惠券类型 1-满减券 2-折扣券
@@ -210,6 +291,10 @@ export default {
       getRowKeys(row) {
         return row.productId
       },
+
+      getShopRowKeys(row) {
+        return row.shopId
+      },
       addForm: new InitCouponForm(),
       proOption: {
         page: 1,
@@ -232,7 +317,15 @@ export default {
       },
       multipleSelection: [],
       roleList: [],
-      isVisible: false // 选择商品弹窗
+      isVisible: false, // 选择商品弹窗，
+      isShopVisible: false, // 选择店铺弹窗，
+      shopTableData: [],
+      shopTotal: 0,
+      shopOption: {
+        page: 1,
+        pageSize: 10
+      },
+      shopMultipleSelection: [],
     }
   },
   watch: {
@@ -264,6 +357,11 @@ export default {
         this.$refs.multipleTable.clearSelection()
         this.idList = []
       }
+
+      if (this.$refs.shopMultipleTable) {
+        this.$refs.shopMultipleTable.clearSelection()
+        this.idList = []
+      }
     },
     proving1(e) {
       var keynum = window.event ? e.keyCode : e.which // 获取键盘码
@@ -360,6 +458,16 @@ export default {
       this.proOption.page = val
       this.getProList()
     },
+
+    handleShopSizeChange(val) {
+      this.shopOption.pageSize = val
+      this.getShopList()
+    },
+    handleShopCurrentChange(val) {
+      this.shopOption.page = val
+      this.getShopList()
+    },
+
     // 选择商品
     chooseProduct(type) {
       this.isVisible = true
@@ -379,6 +487,27 @@ export default {
       }
       this.getProList()
     },
+
+    // 选择店铺
+    chooseShop(type) {
+      this.isShopVisible = true
+      if (this.currentType !== type) {
+        this.idList = []
+        if (this.shopMultipleSelection.length !== 0) {
+          this.$refs.shopMultipleSelection.clearSelection()
+        }
+      }
+      this.currentType = type
+      if (this.visitDetail) {
+        this.shopOption.activityId = this.shopCouponId
+        this.shopOption.queryType = this.addForm.applyType
+      } else {
+        this.shopOption.activityId = null
+        this.shopOption.queryType = null
+      }
+      this.getShopList()
+    },
+
     getProList() {
       getProducts(this.proOption).then(res => {
         if (res.code === '') {
@@ -395,10 +524,34 @@ export default {
         }
       })
     },
+
+    getShopList() {
+      getShops(this.shopOption).then(res => {
+        if (res.code === '') {
+          this.shopTableData = res.data.list
+          this.shopTotal = res.data.total
+          // 点击编辑时回显表格勾选
+          if (this.shopCouponId) {
+            for (let i = 0; i < this.shopTableData.length; i++) {
+              if (this.idList.includes(this.shopTableData[i].shopId)) {
+                this.$refs.shopMultipleTable.toggleRowSelection(this.shopTableData[i])
+              }
+            }
+          }
+        }
+      })
+    },
+
     // 选中商品
     handleSelectionChange(val) {
       this.multipleSelection = val
     },
+
+    // 选中店铺
+    handleShopSelectionChange(val) {
+      this.shopMultipleSelection = val
+    },
+
     // 保存选择商品ID
     saveIdList() {
       const idList = []
@@ -415,6 +568,24 @@ export default {
     closeSelect() {
       this.isVisible = false
     },
+
+    // 保存选择店铺ID
+    saveShopIdList() {
+      const idList = []
+      this.shopMultipleSelection.forEach(i => {
+        idList.push(i.shopId)
+      })
+      this.idList = idList
+      // console.log('idList.length', idList.length)
+      this.addForm.ids = idList
+      this.addForm.applyType = this.currentType
+      this.isShopVisible = false
+    },
+    // 取消选择
+    closeShopSelect() {
+      this.isShopVisible = false
+    },
+
     // 跳转优惠券列表
     goToCoupon() {
       this.$emit('reset')
@@ -451,6 +622,12 @@ export default {
         this.addForm.excludeIds.forEach(item => {
           this.idList.push(item)
         })
+      } else if (this.addForm.applyType === 4) {
+        this.idList = res.data.ids
+        console.log('idList-->', this.idList)
+        /*this.addForm.products.forEach(item => {
+          this.idList.push(item.productId)
+        })*/
       } else {
         this.idList = []
       }