feat(banner管理页面): 搜索栏新增单选“国家”选项

src/views/sys/banner/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
+    <!-- 搜索栏 -->
     <div class="filter-container">
+      <!-- 系统 -->
       <el-select
         v-model="listQuery.sysOrigin"
         placeholder="系统"
@@ -21,6 +23,7 @@
         </el-option>
       </el-select>
 
+      <!-- 平台 -->
       <el-select
         v-model="listQuery.platform"
         style="width: 120px"
@@ -35,6 +38,7 @@
         />
       </el-select>
 
+      <!-- 状态 -->
       <el-select
         v-model="listQuery.showcase"
         placeholder="状态"
@@ -46,6 +50,8 @@
         <el-option label="下架" :value="2" />
         <el-option label="过期" :value="3" />
       </el-select>
+
+      <!-- 区域 -->
       <el-select
         v-model="listQuery.region"
         v-loading="loading"
@@ -62,6 +68,33 @@
           :value="item.id"
         />
       </el-select>
+
+      <!-- 国家 -->
+      <el-select
+        v-model="listQuery.countryCode"
+        v-loading="loadingCountry"
+        placeholder="国家"
+        style="width: 200px"
+        class="filter-item"
+        collapse-tags
+        @change="changeCountry"
+      >
+        <el-option
+          v-for="item in countryList"
+          :key="item.id"
+          :label="item.country.aliasName || item.country.enName"
+          :value="item.country.alphaTwo"
+        >
+          <span style="float: left;">
+            <img :src="item.country.nationalFlag" width="30"
+          /></span>
+          <span style="float: left;margin-left:10px">{{
+            item.country.aliasName || item.country.enName
+          }}</span>
+        </el-option>
+      </el-select>
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -70,6 +103,8 @@
       >
         搜索
       </el-button>
+
+      <!-- 新增按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -79,6 +114,8 @@
         新增
       </el-button>
     </div>
+
+    <!-- 表单 -->
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -87,6 +124,7 @@
       highlight-current-row
       @cell-mouse-enter="handleMouseEnter"
     >
+      <!-- 封面 -->
       <el-table-column label="封面" align="center" width="400">
         <template slot-scope="scope">
           <el-image
@@ -97,6 +135,8 @@
           />
         </template>
       </el-table-column>
+
+      <!-- 小图 -->
       <el-table-column label="小图" align="center" width="150">
         <template slot-scope="scope">
           <el-image
@@ -111,6 +151,8 @@
           </el-image>
         </template>
       </el-table-column>
+
+      <!-- alert图 -->
       <el-table-column label="alert图" align="center" width="150">
         <template slot-scope="scope">
           <el-image
@@ -125,12 +167,18 @@
           </el-image>
         </template>
       </el-table-column>
+
+      <!-- 类型 -->
       <el-table-column prop="type" label="类型" align="center" />
+
+      <!-- 展示位 -->
       <el-table-column
         prop="displayPositionNames"
         label="展示位"
         align="center"
       />
+
+      <!-- 系统 -->
       <el-table-column label="归属系统" align="center">
         <template slot-scope="scope">
           <sys-origin-icon
@@ -139,8 +187,14 @@
           />
         </template>
       </el-table-column>
+
+      <!-- 区域 -->
       <el-table-column prop="regionNameStr" label="区域" align="center" />
+
+      <!-- 排序 -->
       <el-table-column prop="sort" label="排序" align="center" />
+
+      <!-- 内容 -->
       <el-table-column prop="content" label="内容" align="center">
         <template slot-scope="scope">
           <el-popover placement="top-start" trigger="hover">
@@ -155,6 +209,8 @@
           </el-popover>
         </template>
       </el-table-column>
+
+      <!-- 状态 -->
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <div>
@@ -180,6 +236,8 @@
           </div>
         </template>
       </el-table-column>
+
+      <!-- 操作按钮列表 -->
       <el-table-column fixed="right" label="操作" align="center" width="200">
         <template slot-scope="scope">
           <el-button type="text" @click.native="handleUpdate()">修改</el-button>
@@ -190,6 +248,7 @@
       </el-table-column>
     </el-table>
 
+    <!-- 分页组件 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -198,6 +257,7 @@
       @pagination="renderData"
     />
 
+    <!-- 编辑组件 -->
     <form-edit
       v-if="formEditVisible"
       :row="thatRow"
@@ -209,12 +269,15 @@
 </template>
 
 <script>
-import { bannerTable, deleteBanner } from "@/api/banner";
-import Pagination from "@/components/Pagination";
-import { appPlatforms, sysOriginPlatforms } from "@/constant/origin";
-import FormEdit from "./form-edit.vue";
 import { mapGetters } from "vuex";
+import { appPlatforms, sysOriginPlatforms } from "@/constant/origin";
+
+import { bannerTable, deleteBanner } from "@/api/banner";
 import { regionConfigTable } from "@/api/sys";
+import { listPayOpenCountry } from "@/api/sys-pay";
+
+import Pagination from "@/components/Pagination";
+import FormEdit from "./form-edit.vue";
 
 export default {
   components: { Pagination, FormEdit },
@@ -239,11 +302,16 @@ export default {
         showcase: 1,
         sysOrigin: "HALAR",
         platform: "Android",
-        region: ""
+        region: "",
+        countryCode: ""
       },
       formEditVisible: false,
       textOptTitle: "",
-      listLoading: true
+      listLoading: true,
+
+      selectedCountry: {},
+      countryList: [],
+      loadingCountry: false
     };
   },
   computed: {
@@ -258,6 +326,8 @@ export default {
     that.listQuery.sysOrigin = querySystem.value;
     this.listRegion();
     that.renderData();
+
+    this.loadOpenCountry();
   },
   methods: {
     renderData(isClean) {
@@ -304,6 +374,38 @@ export default {
       this.userDeatilsDrawer = true;
       this.thatSelectedUserId = row.id;
     },
+
+    // 选择国家
+    changeCountry(val) {
+      const that = this;
+      console.log("val", val);
+
+      that.selectedCountry = this.countryList.filter(
+        item => item.country.alphaTwo === val
+      )[0];
+      that.listQuery.countryCode = this.selectedCountry.country.alphaTwo;
+      this.renderData();
+    },
+
+    // 获取国家列表
+    loadOpenCountry() {
+      const that = this;
+
+      that.loadingCountry = true;
+      listPayOpenCountry()
+        .then(res => {
+          that.loadingCountry = false;
+          that.countryList = res.body || [];
+          that.selectedCountry = that.countryList[0] || {};
+          that.listQuery.countryCode = that.selectedCountry.country.alphaTwo;
+          that.renderData();
+        })
+        .catch(er => {
+          that.loadingCountry = false;
+          console.error(er);
+        });
+    },
+
     // 删除
     handlDel(row) {
       this.$confirm("确认删除吗？", "提示", {