适用服务类型-下拉选择框改造

src/views/agent/addCustomCoupon.vue

@@ -53,25 +53,61 @@
                         <label for="" style="width: 90px;text-align: right;">卡券名称</label>
                         <GuipInput v-model="link" width="488px"></GuipInput>
                     </div>
-                  <div class="flex gap8">
+                  <div class="flex gap12 mb24">
-                    <GuipSelect 
+                    <span>适用服务类型</span>
-                    width="238px"
+                    <!-- :options="allData" 
-                    :options="allData" 
                     labelKey="name"
-                    valueKey="id"
+                    valueKey="id" -->
+                    <el-select 
+                    style="width:238px"
+                    width="238px"
                     v-model="firstSelected" 
                     label="适用服务类型"
                     @change="handleFirstChange"
-                    ></GuipSelect>
+                    >
+                        <div class="fastSearch column">
+                            <GuipInput class="mb12" v-model="searchWord" width="206px" height="30px"></GuipInput>
+                            <div class="flex gap8">
+                                <span class="tag-item" v-for="item in fastWords" :key="item.id" @click="checkFastWord(item.name)"
+                                :class="searchWord == item.name ? 'tag-item-active':''">{{ item.name }}</span>
+                            </div>
+                        </div>
+
+                        <el-option
+                            class="flex-between"
+                            v-for="item in allData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id">
+                            <span style="float: left">{{ item.name }}</span>
+                            <img v-if="firstSelected == item.id" src="@/assets/site/dropdown_chose_ic.svg" alt="">
+                        </el-option>
+                    </el-select>
                     <!-- 二级选择框，只有当有二级数据时才显示 -->
-                    <GuipSelect 
+                    <el-select 
+                     style="width:238px"
+                    v-if="showSecondSelect"
+                    v-model="secondSelected"
+                    >
+                        <el-option
+                            class="flex-between"
+                            v-for="item in allData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id">
+                            <span style="float: left">{{ item.name }}</span>
+                            <img v-if="secondSelected == item.id" src="@/assets/site/dropdown_chose_ic.svg" alt="">
+                        </el-option>
+                    </el-select>
+                    <!-- <el-select 
+                     style="width:238px"
                     width="238px"
                     v-if="showSecondSelect"
                     labelKey="name"
                     valueKey="id"
                     :options="secondOptions" 
                     v-model="secondSelected"
-                    ></GuipSelect>
+                    ></el-select> -->
                   </div>
                     <div class="flex coupon_name mb24 gap12">
                         <label for="" style="width: 90px;text-align: right;">满减规则</label>
@@ -120,8 +156,24 @@ export default {
     },
     data() {
         return {
+            fastWords:[
+
+                {
+                    name:'不限',
+                    id:0,
+                },
+                {
+                    name:'查重服务',
+                    id:1,
+                },
+                {
+                    name:'写作辅助',
+                    id:2,
+                }
+            ],
             searchDate:[],
             curAddTab: this.$route.query.type || '1',
+            searchWord:'',
             // curTabInfo:null,
             numsList:[
                 {
@@ -288,6 +340,9 @@ export default {
         }
     },
     methods: {
+        checkFastWord(name){
+            this.searchWord = name
+        },
         handleFirstChange(value) {
         // 根据一级选择的值，找到对应的数据项
             const selectedItem = this.allData.find(item => item.id === value);
@@ -353,6 +408,30 @@ export default {
 
 </script>
 <style scoped lang="scss">
+.fastSearch{
+    padding: 12px;
+    .tag-item{
+        border-radius: 32px;
+        background: #FFFFFF;
+        box-sizing: border-box;
+        border: 1px solid #DFE2E6;
+        height: 21px;
+        display: flex;
+        align-items: center;
+        padding: 4px 10px;
+        box-sizing: border-box;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 13px;
+        letter-spacing: 0.08em;
+        color: #626573;
+        cursor: pointer;
+    }
+    .tag-item-active{
+        color: #006AFF;
+        background: #F6F7FA;
+    }
+}
   .wallet-item{
         display: flex;
         flex-direction: column;

src/views/agent/checkCardList.vue

@@ -301,12 +301,18 @@ export default {
         },
         // 
         addTimeNums(item) {
+            if(item){
                 this.$router.push({
                     path: '/agent/addCustomCoupon',
                     query: {
                         type: item.type,
                     }
                 })
+            }else{
+                this.$router.push({
+                    path: '/agent/addCustomCoupon',
+                })
+            }
         },
         handleClick(tab, event) {
             console.log(tab, event);