页面修改

src/components/activity/CouponList.vue

@@ -242,10 +242,10 @@
                 @click="outerVisible=true,EditItem(item)"></el-button>
             </el-tooltip>
 
-            <!-- <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top">
+            <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top">
               <el-button v-if="EditBtn" type="danger" icon="iconfont icon-caidan-fill" circle style="padding:4px;"
                 @click="autoCouponDialog=true,AutoGrantCounItem(item)"></el-button>
-            </el-tooltip> -->
+            </el-tooltip>
           </td>
         </tr>
       </tbody>
@@ -468,7 +468,7 @@
     </el-dialog>
 
 
-    <el-dialog custom-class='w500' title="发放优惠券" :visible.sync="autoCouponDialog" center >
+    <el-dialog custom-class='w500' title="发放优惠券" :visible.sync="autoCouponDialog" center>
       <el-form :model="grantCouponMsg" :rules="rules" ref="grantCouponMsg" label-width="100px" class="addBox">
         <el-form-item label="优惠券名称">
           <p>{{grantCouponMsg.couponsName}}</p>
@@ -487,21 +487,31 @@
           </el-input>
        </el-form-item> -->
         <el-form-item label="选择人员" prop="customerIds">
+          <template v-if="customerList&&customerList.length>0">
+            <template v-for="(item,index) in customerList">
+              <template v-if="item.ischecked">
+                <el-tag :key="index+10000" closable @close="deleteTag(item)">{{item.customerName}}({{item.contact}})
+                </el-tag>
+              </template>
 
-          <div>
-          
+            </template>
+          </template>
+          <!--v-if="xuanzeCustomer"-->
           <el-popover trigger="click" placement="bottom-start">
-            <div class="_TravelPricePopover" style="height: 300px;overflow: auto;width: 350px;" v-="xuanzeCustomer">
-              <div class="ScenicDiv"  >
-                <table width="100%" border="0" cellspacing="0" cellpadding="0"  >
+            <div class="_TravelPricePopover" style="height: 300px;overflow: auto;width: 350px;">
+              <div class="ScenicDiv">
+                <el-input class="w180" v-model="grantCouponMsg.customerInfo"
+                  @keypress.native.enter="getCustomerBrandByKeyWord" placeholder="请输入关键字，'回车'查询">
+                </el-input>
+                <table width="100%" border="0" cellspacing="0" cellpadding="0" v-loading="xuanzeCustomerLoading">
                   <tr>
                     <td class="_color_666">选择</td>
                     <td class="_color_666">客户名称</td>
                     <td class="_color_666">联系电话</td>
                   </tr>
-                            <tr v-for="fitem in customerList">
+                  <tr v-for="(fitem,fIndex) in customerList" :key="fIndex">
                     <td>
-                                <el-checkbox  @change="getSelect(fitem)"></el-checkbox>
+                      <el-checkbox @change="getSelect(fitem)" v-model="fitem.ischecked"></el-checkbox>
                     </td>
                     <td>
                       {{fitem.customerName}}
@@ -511,18 +521,13 @@
                     </td>
                   </tr>
                 </table>
-              </div>
-            </div>
-            <div slot="reference" style="padding: 0 4px;">
-              <el-input class="w180" v-model="grantCouponMsg.customerInfo" >
-               </el-input>
-               <el-button size="small" type="danger" @click="getCustomerBrandByKeyWord()">查询</el-button>
-            </div>
-          </el-popover>
               </div>
+            </div>
+            <div slot="reference" style="padding: 0 4px;">
+              <el-button size="small" type="danger">查询</el-button>
+            </div>
+          </el-popover>
         </el-form-item>
-       
-     
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="autoCouponDialog = false">取 消</el-button>
@@ -575,8 +580,8 @@
         outerVisible: false,
         innerVisible: false,
         updateKucundialog: false,
-        autoCouponDialog:false,
-        xuanzeCustomer:false,
+        autoCouponDialog: false,
+        xuanzeCustomerLoading: false,
         isRight: true,
         dialogTitle: "",
         insideDialogTxt: "",
@@ -696,7 +701,7 @@
         CouponPlatformEnumList: [],
         companyList: [],
         customerList: [],
-        layerCustomerList:[],
+        layerCustomerList: [],
         layerDepartMentList: [],
         departMentList: [],
         PostList: [],
@@ -718,12 +723,12 @@
           couponsUseScope: 1,
           couponStatus: 1,
           redemptionPrice: '',
-          denomination:0,
+          denomination: 0,
           isExpansion: 0,
-          customerIds:'',
-          customerIdList:[],
-          customerType:0,
-          customerInfo:""
+          customerIds: '',
+          customerIdList: [],
+          customerType: 0,
+          customerInfo: ""
         },
         EditBtn: false,
       };
@@ -743,6 +748,13 @@
 
     },
     methods: {
+      //删除客户标签
+      deleteTag(item) {
+        item.ischecked=false;
+      },
+      getSelect(item) {
+
+      },
       getcouponPriceList() {
         this.addMsg.couponPriceList = []
         this.addMsg.couponPriceLists.forEach(item => {
@@ -802,9 +814,8 @@
       },
       //发放优惠券
       AutoGrantCounItem(item) {
-        
         this.grantCouponMsg = Object.assign({}, item);
-console.log("grantCouponMsg", this.grantCouponMsg);
+        console.log("grantCouponMsg", this.grantCouponMsg);
       },
       //点击确定修改库存
       sureUpdatekucun() {
@@ -831,17 +842,23 @@ console.log("grantCouponMsg", this.grantCouponMsg);
           }
         );
       },
+      //查询客户
       getCustomerBrandByKeyWord() {
-        
+        this.xuanzeCustomerLoading = true;
+        this.customerList = [];
         this.apipost(
           "app_post_GetCustomerBrandByKeyWord",
           this.grantCouponMsg,
           res => {
+            this.xuanzeCustomerLoading = false;
             if (res.data.resultCode == 1) {
-              this.layerCustomerList = res.data.data;
-              this.customerList = res.data.data;
-              this.xuanzeCustomer=true;
-              console.log("customerList",this.xuanzeCustomer);
+              var tempData = res.data.data;
+              if (tempData && tempData.length > 0) {
+                tempData.forEach(item => {
+                  item.ischecked = false;
+                })
+              }
+              this.customerList = tempData;
             }
           }
         );