feat: 修复音乐套餐和流量套餐名称没对应上问题

src/views/service/flow/detail.vue

@@ -73,9 +73,9 @@
 </template>
 
 <script>
-import { devMixin, serviceTimeMixin, serviceTypeMixin } from '@/mixin/index'
 import { list } from '@/api/operation/scene'
-import { detail, edit, create, goodsList, deviceGoodsList } from '@/api/service/package'
+import { create, detail, deviceGoodsList, edit, goodsList } from '@/api/service/package'
+import { devMixin, serviceTimeMixin, serviceTypeMixin } from '@/mixin/index'
 export default {
   name:"serviceFlowDetail",
   mixins: [devMixin, serviceTimeMixin, serviceTypeMixin],
@@ -298,7 +298,7 @@ export default {
 
     // 取消
     cancel() {
-      let url = this.typeList[0] === '13' ? 'musicPackage' : 'flowPackage'
+      let url = this.typeList[0] === '13' ? 'serviceMusic' : 'serviceFlow'
       this.$tab.closeOpenPage(`/service/${url}?typeList=${this.typeList}`);
     },
 

src/views/service/music/detail.vue

@@ -2,66 +2,151 @@
   <div class="app-container">
     <el-form :model="form" :rules="rules" ref="form" label-width="110px">
       <el-form-item label="流量平台：">
-        <el-select v-model="form.platform" placeholder="请选择流量平台" :disabled="disabled()">
-          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.platform"
+          placeholder="请选择流量平台"
+          :disabled="disabled()"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="关联设备：">
-        <el-select v-model="deviceIds" filterable multiple placeholder="请选择关联设备">
-          <el-option v-for="(item, index) in devOptions" :key="`${item.value}-${index}`" :value="item.value"
-            :label="item.label" /> </el-select>
+        <el-select
+          v-model="deviceIds"
+          filterable
+          multiple
+          placeholder="请选择关联设备"
+        >
+          <el-option
+            v-for="(item, index) in devOptions"
+            :key="`${item.value}-${index}`"
+            :value="item.value"
+            :label="item.label"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="套餐名称：">
         <el-input v-model="form.name" placeholder="请输入套餐名称" />
       </el-form-item>
       <el-form-item label="服务类型：">
-        <el-select v-model="form.businessType" placeholder="请选择服务类型" :disabled="disabled()">
-          <el-option v-for="item in serviceTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.businessType"
+          placeholder="请选择服务类型"
+          :disabled="disabled()"
+        >
+          <el-option
+            v-for="item in serviceTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-if="typeList[0] === '13'" label="资源平台：">
-        <el-select v-model="form.platformId" placeholder="请选择资源平台" :disabled="disabled()">
-          <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select
+          v-model="form.platformId"
+          placeholder="请选择资源平台"
+          :disabled="disabled()"
+        >
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-else label="流量套餐：">
-        <el-select v-model="form.goodsId" placeholder="请选择流量套餐" :disabled="disabled()">
-          <el-option v-for="(item, index) in goodsOptions" :key="index" :label="item" :value="index" />
+        <el-select
+          v-model="form.goodsId"
+          placeholder="请选择流量套餐"
+          :disabled="disabled()"
+        >
+          <el-option
+            v-for="(item, index) in goodsOptions"
+            :key="index"
+            :label="item"
+            :value="index"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.platformId === 10" label="栏目：">
         <el-select v-model="form.groupId" placeholder="请选择爱听栏目">
-          <el-option v-for="item in sceneOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in sceneOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="原价：" prop="price">
-        <el-input-number v-model="form.price" :min="0" :max="500" :controls="false" :precision="2"
-          placeholder="请输入原价" />
+        <el-input-number
+          v-model="form.price"
+          :min="0"
+          :max="500"
+          :controls="false"
+          :precision="2"
+          placeholder="请输入原价"
+        />
       </el-form-item>
       <el-form-item label="活动价：" prop="discount">
-        <el-input-number v-model="form.discount" :min="0" :max="500" :controls="false" :precision="2"
-          placeholder="请输入活动价" />
+        <el-input-number
+          v-model="form.discount"
+          :min="0"
+          :max="500"
+          :controls="false"
+          :precision="2"
+          placeholder="请输入活动价"
+        />
       </el-form-item>
       <el-form-item label="服务时长：">
         <el-select v-model="form.indate" placeholder="请选择服务时长">
-          <el-option v-for="item in serviceTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option
+            v-for="item in serviceTimeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否推荐：">
         <el-select v-model="form.isRecommend" placeholder="请选择是否推荐">
-          <el-option v-for="item in recommendOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option
+            v-for="item in recommendOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="排序：" v-if="form.businessType === 5">
         <el-input-number v-model="form.sort" :min="1" />
       </el-form-item>
-      <el-form-item label='赠送会员：'>
+      <el-form-item label="赠送会员：">
         <el-switch v-model="isFreeContentVip" :disabled="disableVip" />
       </el-form-item>
-      <el-form-item v-if="isFreeContentVip" label="关联会员套餐：" prop="freeActivityId">
-        <el-select v-model="form.freeActivityId" placeholder="请选择会员套餐：" :disabled="disableVip">
-          <el-option v-for="(item, index) in freeOptions" :key="`free-option-${item.id}-${index}`" :label="item.name"
-            :value="item.id" />
+      <el-form-item
+        v-if="isFreeContentVip"
+        label="关联会员套餐："
+        prop="freeActivityId"
+      >
+        <el-select
+          v-model="form.freeActivityId"
+          placeholder="请选择会员套餐："
+          :disabled="disableVip"
+        >
+          <el-option
+            v-for="(item, index) in freeOptions"
+            :key="`free-option-${item.id}-${index}`"
+            :label="item.name"
+            :value="item.id"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -73,37 +158,43 @@
 </template>
 
 <script>
-import { devMixin, serviceTimeMixin, serviceTypeMixin } from '@/mixin/index'
-import { list } from '@/api/operation/scene'
-import { detail, edit, create, goodsList, deviceGoodsList } from '@/api/service/package'
+import { list } from "@/api/operation/scene";
+import {
+create,
+detail,
+deviceGoodsList,
+edit,
+goodsList,
+} from "@/api/service/package";
+import { devMixin, serviceTimeMixin, serviceTypeMixin } from "@/mixin/index";
 export default {
-  name:"serviceMusicDetail",
+  name: "serviceMusicDetail",
   mixins: [devMixin, serviceTimeMixin, serviceTypeMixin],
   data() {
     let checkedPrice = (rule, value, callback) => {
       if (Number(value) > 500) {
-        callback(new Error('原价不得超过500'))
+        callback(new Error("原价不得超过500"));
       } else {
         if (this.form.discount !== undefined) {
-          this.$refs.form.validateField('discount')
+          this.$refs.form.validateField("discount");
         }
-        callback()
+        callback();
       }
-    }
+    };
     let checkedDiscount = (rule, value, callback) => {
       if (Number(value) > Number(this.form.price)) {
-        callback(new Error('活动价不得大于原价！'))
+        callback(new Error("活动价不得大于原价！"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     let checkFreeFlow = (rule, value, callback) => {
       if (this.isFreeContentVip && !value) {
-        callback(new Error('请选择赠送会员套餐！'))
+        callback(new Error("请选择赠送会员套餐！"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       // 表单
       form: {},
@@ -120,122 +211,161 @@ export default {
       isFreeContentVip: false,
       disableVip: false,
       // 资源平台
-      platformOptions: [{
-        value: 6,
-        label: 'QQ音乐'
-      }, {
-        value: 9,
-        label: '酷狗音乐'
-      }, {
-        value: 10,
-        label: '爱听音乐'
-      }],
+      platformOptions: [
+        {
+          value: 6,
+          label: "QQ音乐",
+        },
+        {
+          value: 9,
+          label: "酷狗音乐",
+        },
+        {
+          value: 10,
+          label: "爱听音乐",
+        },
+      ],
       // 是否推荐
-      recommendOptions: [{
-        value: 0,
-        label: '是'
-      }, {
-        value: 1,
-        label: '否'
-      }],
+      recommendOptions: [
+        {
+          value: 0,
+          label: "是",
+        },
+        {
+          value: 1,
+          label: "否",
+        },
+      ],
       // 流量平台
-      typeOptions: [{
-        value: 0,
-        label: '树米'
-      }, {
-        value: 1,
-        label: '联通'
-      }],
+      typeOptions: [
+        {
+          value: 0,
+          label: "树米",
+        },
+        {
+          value: 1,
+          label: "联通",
+        },
+      ],
       // 校验
       rules: {
-        price: [{
-          validator: checkedPrice,
-          trigger: 'blur'
-        }],
-        discount: [{
-          validator: checkedDiscount,
-          trigger: 'blur'
-        }],
-        freeActivityId: [{
-          validator: checkFreeFlow,
-          trigger: 'blur'
-        }],
-      }
-    }
+        price: [
+          {
+            validator: checkedPrice,
+            trigger: "blur",
+          },
+        ],
+        discount: [
+          {
+            validator: checkedDiscount,
+            trigger: "blur",
+          },
+        ],
+        freeActivityId: [
+          {
+            validator: checkFreeFlow,
+            trigger: "blur",
+          },
+        ],
+      },
+    };
   },
   watch: {
     typeList(val) {
-      if (val[0] !== '12') {
-        this.getSceneList()
+      if (val[0] !== "12") {
+        this.getSceneList();
       }
     },
-    'form.businessType'(val) {
+    "form.businessType"(val) {
       if (val !== 5) {
-        delete this.form.sort
+        delete this.form.sort;
       }
-      this.getDeviceGoodsList(this.deviceIds ?? [], val, this.isFreeContentVip ?? false)
-
+      this.getDeviceGoodsList(
+        this.deviceIds ?? [],
+        val,
+        this.isFreeContentVip ?? false
+      );
     },
-    'form.platform'(val) {
-      this.getDevList({ type: val })
-      this.getGoodSList(val)
+    "form.platform"(val) {
+      this.getDevList({ type: val });
+      this.getGoodSList(val);
+    },
+    isFreeContentVip(val) {
+      this.getDeviceGoodsList(
+        this.deviceIds ?? [],
+        this.form.businessType ?? -1,
+        val
+      );
     },
-    'isFreeContentVip'(val) {
-      this.getDeviceGoodsList(this.deviceIds ?? [], this.form.businessType ?? -1, val)
-    }
   },
   mounted() {
-    this.typeList = this.$route.query.typeList.split(',')
-    console.log("typeList:", this.typeList, this.$route.query.typeList)
+    this.typeList = this.$route.query.typeList.split(",");
+    console.log("typeList:", this.typeList, this.$route.query.typeList);
 
     if (this.$route.query.id) {
-      this.form.id = this.$route.query.id
-      this.getList()
+      this.form.id = this.$route.query.id;
+      this.getList();
     }
   },
   methods: {
     // 详情
     getList() {
-      detail(this.form.id).then(res => {
+      detail(this.form.id).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
-          this.isFreeContentVip = res.data.isFreeContentVip === 1 ? true : false
-          this.disableVip = this.isFreeContentVip
+          this.form = res.data;
+          this.isFreeContentVip =
+            res.data.isFreeContentVip === 1 ? true : false;
+          this.disableVip = this.isFreeContentVip;
 
-          this.deviceIds = res.data.deviceIds.split(',')
+          this.deviceIds = res.data.deviceIds.split(",");
         }
-      })
+      });
     },
 
     // 流量套餐
     getGoodSList(e) {
-      goodsList(e).then(res => {
+      goodsList(e).then((res) => {
         if (res.code === 0) {
-          this.goodsOptions = res.data
+          this.goodsOptions = res.data;
         }
-      })
+      });
     },
 
     // 爱听专区
     getSceneList() {
-      list().then(res => {
+      list().then((res) => {
         if (res.code === 0) {
-          res.data.map(i => {
+          res.data.map((i) => {
             this.sceneOptions.push({
               value: i.id,
-              label: i.name
-            })
-          })
+              label: i.name,
+            });
+          });
         }
-      })
+      });
     },
     // 会员套餐
     getDeviceGoodsList(deviceIds, businessType, isFreeContentVip) {
-      if ((deviceIds ?? []).length === 0 || (businessType ?? -1) < 0 || (isFreeContentVip ?? false) != true) {
-        console.log('设备id或业务类型为空', deviceIds, businessType, isFreeContentVip)
-        return
+      if (
+        (deviceIds ?? []).length === 0 ||
+        (businessType ?? -1) < 0 ||
+        (isFreeContentVip ?? false) != true
+      ) {
+        console.log(
+          "设备id或业务类型为空",
+          deviceIds,
+          businessType,
+          isFreeContentVip
+        );
+        return;
       }
-      console.log('开始请求', this.typeList[0], deviceIds.join(","), businessType, isFreeContentVip)
+      console.log(
+        "开始请求",
+        this.typeList[0],
+        deviceIds.join(","),
+        businessType,
+        isFreeContentVip
+      );
 
       deviceGoodsList(1, businessType, deviceIds.join(",")).then((res) => {
         if (res.code === 0) {
@@ -250,8 +380,13 @@ export default {
             this.form.freeActivityId = null;
           }
           // 如果freeOptions有值且freeActivityId有值，检查是否存在对应的选项
-          else if (!(this.form.freeActivityId === null || this.form.freeActivityId === undefined)) {
-            const exists = this.freeOptions.some(item => {
+          else if (
+            !(
+              this.form.freeActivityId === null ||
+              this.form.freeActivityId === undefined
+            )
+          ) {
+            const exists = this.freeOptions.some((item) => {
               // console.log("item.id:", item.id, "freeActivityId:", this.form.freeActivityId);
               return String(item.id) === String(this.form.freeActivityId);
             });
@@ -270,44 +405,44 @@ export default {
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.form.deviceIds = this.deviceIds.join(',')
-          this.form.platformIds = JSON.stringify(this.platformIds)
-          this.form.isFreeContentVip = this.isFreeContentVip ? 1 : 0
+          this.form.deviceIds = this.deviceIds.join(",");
+          this.form.platformIds = JSON.stringify(this.platformIds);
+          this.form.isFreeContentVip = this.isFreeContentVip ? 1 : 0;
           if (this.form.id) {
-            edit(this.form).then(res => {
+            edit(this.form).then((res) => {
               if (res.code === 0) {
-                this.$message.success('修改成功！')
-                this.cancel()
+                this.$message.success("修改成功！");
+                this.cancel();
               } else {
               }
-            })
+            });
           } else {
-            create(this.form).then(res => {
+            create(this.form).then((res) => {
               if (res.code === 0) {
-                this.$message.success('新增成功！')
-                this.cancel()
+                this.$message.success("新增成功！");
+                this.cancel();
               } else {
               }
-            })
+            });
           }
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 取消
     cancel() {
-      let url = this.typeList[0] === '13' ? 'musicPackage' : 'flowPackage'
+      let url = this.typeList[0] === "13" ? "serviceMusic" : "serviceFlow";
       this.$tab.closeOpenPage(`/service/${url}?typeList=${this.typeList}`);
     },
 
     // 禁止修改
     disabled() {
-      return this.form.id ? true : false
-    }
-  }
-}
+      return this.form.id ? true : false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>