modified

src/views/createDelivery/childComponents/LanguageSelector.vue

+<template>
+  <el-card class="language-selector" shadow="hover">
+    <div slot="header" class="clearfix">
+      <span>选择语言</span>
+    </div>
+    <div class="language-list">
+      <el-checkbox
+        v-for="lang in languages"
+        :key="lang.code"
+        v-model="lang.selected"
+        @change="handleLanguageChange(lang.code)"
+      >
+        {{ lang.name }}
+      </el-checkbox>
+    </div>
+    <el-divider content-position="center">已选择的语言</el-divider>
+    <transition-group name="el-fade-in-linear" tag="div" class="selected-languages">
+      <el-tag
+        v-for="lang in selectedLanguages"
+        :key="lang.code"
+        closable
+        @close="removeLanguage(lang.code)"
+        class="selected-language"
+      >
+        {{ lang.name }}
+      </el-tag>
+    </transition-group>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'LanguageSelector',
+  props: {
+    selectedCountries: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: '选择国家'
+    }
+  },
+  data() {
+    return {
+      languages: [
+        { code: 'en', name: '英语', selected: false },
+        { code: 'es', name: '西班牙语', selected: false },
+        { code: 'fr', name: '法语', selected: false },
+        { code: 'de', name: '德语', selected: false },
+        { code: 'it', name: '意大利语', selected: false },
+        { code: 'zh', name: '中文', selected: false },
+        { code: 'ja', name: '日语', selected: false },
+        { code: 'ko', name: '韩语', selected: false },
+        { code: 'ru', name: '俄语', selected: false },
+        { code: 'ar', name: '阿拉伯语', selected: false },
+      ],
+    };
+  },
+  computed: {
+    selectedLanguages() {
+      return this.languages.filter(lang => lang.selected);
+    },
+  },
+  methods: {
+    handleLanguageChange(code) {
+      this.$emit('input', this.selectedLanguages.map(lang => lang.code));
+    },
+    removeLanguage(code) {
+      const lang = this.languages.find(l => l.code === code);
+      if (lang) {
+        lang.selected = false;
+      }
+      this.$emit('input', this.selectedLanguages.map(lang => lang.code));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.language-selector {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.language-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.selected-languages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.selected-language {
+  margin-right: 0;
+}
+
+.el-checkbox {
+  margin-right: 0;
+  margin-bottom: 0;
+}
+</style>

src/views/createDelivery/index.vue

@@ -510,6 +510,11 @@
             <div class="drawer-item-con">
               <CountrySelector v-model="countries" />
             </div>
+
+            <div class="drawer-item-title">语言</div>
+            <div class="drawer-item-con">
+              <LanguageSelector v-model="languages" />
+            </div>
           </div>
 
           <!-- 用户定向 -->
@@ -1313,6 +1318,7 @@ import SelectText from "./childComponents/SelectText";
 import AddAdvGroup from "./childComponents/AddAdvGroup";
 import TextTextarea from "./childComponents/TextTextarea";
 import CountrySelector from "./childComponents/CountrySelector";
+import LanguageSelector from "./childComponents/LanguageSelector";
 
 import { stepList } from "./childComponents/util";
 
@@ -1320,6 +1326,7 @@ import { trim } from "@/utils/utils";
 
 export default {
   components: {
+    LanguageSelector,
     treeTransfer,
     SelectText,
     ksDrawer,
@@ -1365,6 +1372,7 @@ export default {
         { label: "自定义人群", type: 1 },
       ],
       countries: [],
+      languages: [],
       crowdValue: "不限", // 自定义人群的值
       crowdAdvertiserId: "",
       /* 测试假数据 使用 */