feat: 处理增加频道时候不能添加，弹toast提示

src/pages/channel/index.vue

@@ -1,28 +1,42 @@
 <template>
-  <div class='app-container'>
+  <div class="app-container">
     <h1>猫王音响-添加电台</h1>
     <h1>请输入要添加的网络电台信息</h1>
     <div class="form" v-for="(item, index) in form" :key="index">
       <div>电台{{ index + 1 }}</div>
-      <uni-icons v-show="index !== 0" class="close" type="closeempty" color="#FFF" size="18" @click="getClose(index)" />
-      <input type="text" v-model="item.name" placeholder="请输入电台名称">
-      <input type="text" v-model="item.url" placeholder="请输入链接地址">
+      <uni-icons
+        v-show="index !== 0"
+        class="close"
+        type="closeempty"
+        color="#FFF"
+        size="18"
+        @click="getClose(index)"
+      />
+      <input type="text" v-model="item.name" placeholder="请输入电台名称" />
+      <input type="text" v-model="item.url" placeholder="请输入链接地址" />
     </div>
-    <button v-show="form.length < 3" class="plus" @click="getAdd">+ 新增</button>
+    <button v-show="form.length < 3" class="plus" @click="getAdd">
+      + 新增
+    </button>
     <button class="submit" type="submit" circle @click="getSubmit">提交</button>
     <div class="list">
       <h2>已添加的电台</h2>
       <div class="item" v-for="item in list" :key="item.id">
         <div>{{ item.name }}</div>
         <div class="url">{{ item.url }}</div>
-        <uni-icons class="delete" type="more-filled" size="24" @click="getDelete(item)" />
+        <uni-icons
+          class="delete"
+          type="more-filled"
+          size="24"
+          @click="getDelete(item)"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { list, submit, remove } from "@/api/channel"
+import { list, submit, remove } from "@/api/channel";
 export default {
   data() {
     return {
@@ -31,108 +45,117 @@ export default {
       // 列表表单
       listForm: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 列表
       list: [],
       // 更多
       hasMore: false,
       // 表单
-      form: [{
-        name: "",
-        url: ""
-      }]
-    }
+      form: [
+        {
+          name: "",
+          url: "",
+        },
+      ],
+    };
   },
   onLoad(e) {
-    this.dev = e
-    this.getList()
+    this.dev = e;
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      list({ ...this.dev, ...this.listForm }).then(res => {
+      list({ ...this.dev, ...this.listForm }).then((res) => {
         if (res.code === 0) {
-          res.data.records.map(i => this.list.push(i))
-          this.hasMore = res.data.hasMore
+          res.data.records.map((i) => this.list.push(i));
+          this.hasMore = res.data.hasMore;
         }
-      })
+      });
     },
 
     // 添加
     getAdd() {
       this.form.push({
         name: "",
-        url: ""
-      })
+        url: "",
+      });
     },
 
     // 关闭
     getClose(index) {
-      this.form.splice(index, 1)
+      this.form.splice(index, 1);
     },
 
     // 提交
     getSubmit() {
-      var rules = false
-      this.form.map(i => {
+      var rules = false;
+      this.form.map((i) => {
         if (i.name !== "" && i.url !== "") {
-          i.deviceMac = this.dev.deviceMac
-          i.deviceType = this.dev.deviceType
-          i.sign = this.dev.sign
-          rules = true
+          i.deviceMac = this.dev.deviceMac;
+          i.deviceType = this.dev.deviceType;
+          i.sign = this.dev.sign;
+          rules = true;
         }
-      })
+      });
       if (rules) {
-        submit(this.form).then(res => {
+        submit(this.form).then((res) => {
           if (res.code === 0) {
-            this.list = []
-            this.listForm.pageNum = 1
-            this.getList()
-            this.form = [{
-              name: "",
-              url: ""
-            }]
+            this.list = [];
+            this.listForm.pageNum = 1;
+            this.getList();
+            this.form = [
+              {
+                name: "",
+                url: "",
+              },
+            ];
+          } else {
+            uni.showToast({
+              title: res.message,
+              icon: "none",
+            });
           }
-        })
+        });
       } else {
         uni.showToast({
-          title: '电台信息不能为空！',
-          icon: 'none'
-        })
+          title: "电台信息不能为空！",
+          icon: "none",
+        });
       }
     },
 
     // 删除
     getDelete(item) {
       uni.showModal({
-        title: '提示',
+        title: "提示",
         content: `是否删除名称为${item.name}的电台?`,
-        confirmColor: '#78B06A',
+        confirmColor: "#78B06A",
         success: (e) => {
           if (e.confirm) {
             remove({
               id: item.id,
-              ...this.dev
-            }).then(res => {
+              ...this.dev,
+            }).then((res) => {
               if (res.code === 0) {
-                this.list = []
-                this.listForm.pageNum = 1
-                this.getList(this.dev)
+                this.list = [];
+                this.listForm.pageNum = 1;
+                this.getList(this.dev);
               }
-            })
+            });
           }
-        }
-      })
-    }
+        },
+      });
+    },
   },
   onReachBottom() {
-    if(this.hasMore) {
-      this.listForm.pageNum++
-      this.getList()
+    if (this.hasMore) {
+      this.listForm.pageNum++;
+      this.getList();
     }
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -144,8 +167,8 @@ export default {
   margin: 0;
   font-weight: bold;
   background: none;
-  color: #FFF;
-  border: 1px solid #FFF;
+  color: #fff;
+  border: 1px solid #fff;
 }
 
 h1 {
@@ -161,7 +184,7 @@ h2 {
 
 .list {
   .item {
-    border: 1px solid #FFF;
+    border: 1px solid #fff;
     border-radius: 8px;
     padding: 20px 30px 20px 20px;
     display: flex;
@@ -169,7 +192,7 @@ h2 {
     justify-content: space-around;
     position: relative;
     margin-bottom: 15px;
-    background-color: #FFF;
+    background-color: #fff;
     color: #000;
 
     .delete {
@@ -178,7 +201,7 @@ h2 {
       transform: rotate(90deg);
     }
 
-    .url{
+    .url {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -191,13 +214,13 @@ h2 {
   flex-direction: column;
   justify-content: center;
   margin: 8px 0;
-  border: 1px solid #FFF;
+  border: 1px solid #fff;
   padding: 20px;
   border-radius: 8px;
   position: relative;
 
   uni-input {
-    background-color: #FFF;
+    background-color: #fff;
     color: #000;
   }