音乐套餐添加爱听模块

src/views/service/package/detail.vue

@@ -3,24 +3,21 @@
     <el-form :model="form" :rules="rules" ref="form" label-width="100px">
       <el-form-item label="关联设备：">
         <el-select v-model="deviceIds" multiple placeholder="请选择关联设备">
-          <el-option v-for="item in devOptions" :key="item.value" :label="item.label"
-            :value="item.value.toString()" />
+          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value.toString()" />
         </el-select>
       </el-form-item>
-      <el-form-item :label="form.type == 13 ? '套餐名称：': '流量名称：'">
+      <el-form-item :label="form.typeList[0] === '12' ? '流量名称：' : '套餐名称：'">
         <el-input v-model="form.name" placeholder="请输入套餐名称" />
       </el-form-item>
       <el-form-item label="服务类型：">
         <el-select v-model="form.businessType" placeholder="请选择服务类型"
-          :disabled="form.id && form.type == 12 ? true : false">
-          <el-option v-for="item in serviceTypeOptions" :key="item.value" :value="item.value"
-            :label="item.label" />
+          :disabled="form.id && form.typeList[0] === '12' ? true : false">
+          <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="form.type == 13" label="资源平台：">
+      <el-form-item v-if="form.typeList[0] === '13'" label="资源平台：">
         <el-select v-model="form.platformId" placeholder="请选择资源平台">
-          <el-option v-for="item in platformOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <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="流量套餐：">
@@ -28,6 +25,11 @@
           <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-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="请输入原价" />
@@ -38,14 +40,12 @@
       </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">
@@ -61,6 +61,7 @@
 
 <script>
 import { devMixin, serviceTimeMixin, serviceTypeMixin } from '@/mixin/index'
+import { list } from '@/api/operation/scene'
 import { detail, edit, create, goodsList } from '@/api/service/package'
 export default {
   mixins: [devMixin, serviceTimeMixin, serviceTypeMixin],
@@ -85,16 +86,24 @@ export default {
     return {
       // 表单
       form: {
-        type: this.$route.query.type
+        typeList: this.$route.query.typeList.split(',')
       },
       // 流量套餐
       goodsOptions: [],
+      // 爱听专区
+      sceneOptions: [],
       // 关联设备
       deviceIds: [],
       // 资源平台
       platformOptions: [{
-        value: 1,
+        value: 6,
         label: 'QQ音乐'
+      }, {
+        value: 9,
+        label: '酷狗音乐'
+      }, {
+        value: 10,
+        label: '爱听音乐'
       }],
       // 是否推荐
       recommendOptions: [{
@@ -123,14 +132,7 @@ export default {
     }
   },
   mounted() {
-    if (this.form.type == 12) {
-      // 流量套餐
-      goodsList().then(res => {
-        if (res.code === 0) {
-          this.goodsOptions = res.data
-        }
-      })
-    }
+    this.form.typeList[0] === '12' ? this.getGoodSList() : this.getSceneList()
     if (this.$route.query.id) {
       this.form.id = this.$route.query.id
       this.getList()
@@ -146,6 +148,31 @@ export default {
         }
       })
     },
+
+    // 流量套餐
+    getGoodSList() {
+      goodsList().then(res => {
+        if (res.code === 0) {
+          this.goodsOptions = res.data
+        }
+      })
+    },
+
+    // 爱听专区
+    getSceneList() {
+      list().then(res => {
+        if (res.code === 0) {
+          res.data.map(i => {
+            this.sceneOptions.push({
+              value: i.id,
+              label: i.name
+            })
+          })
+        }
+      })
+    },
+
+
     // 提交
     getSubmit() {
       this.$refs.form.validate((valid) => {
@@ -170,10 +197,11 @@ export default {
         }
       })
     },
+
     // 取消
     cancel() {
-      let url = this.form.type == 13 ? 'musicPackage' : 'flowPackage'
-      this.$tab.closeOpenPage(`/service/${url}?type=${this.form.type}`);
+      let url = this.form.typeList[0] === '13' ? 'musicPackage' : 'flowPackage'
+      this.$tab.closeOpenPage(`/service/${url}?typeList=${this.form.typeList}`);
     }
   }
 }

src/views/service/package/index.vue

@@ -2,13 +2,12 @@
   <div class="app-container">
     <!-- 搜索 -->
     <el-form inline size="mini">
-      <el-form-item :label="form.type == 13 ? '套餐名称：' : '流量名称：'">
+      <el-form-item :label="form.typeList[0] === '13' ? '套餐名称：' : '流量名称：'">
         <el-input v-model="form.name" placeholder="请输入套餐名称" clearable />
       </el-form-item>
-      <el-form-item v-if="form.type == 13" label="资源平台：">
+      <el-form-item v-if="form.typeList[0] !== '12'" label="资源平台：">
         <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
-          <el-option v-for="item in platformOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <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="流量套餐：">
@@ -23,8 +22,7 @@
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
-          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -35,20 +33,22 @@
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading" :default-sort="{prop: 'sort'}">
+    <el-table :data="tableData" v-loading="loading" :default-sort="{ prop: 'sort' }">
       <el-table-column label="排序" align="center" prop="sort" key="sort" :formatter="sortFormatter" />
-      <el-table-column :label="form.type == 13 ? '套餐名称' : '流量套餐'" align="center" prop="name" key="name"
+      <el-table-column :label="form.typeList[0] === '13' ? '套餐名称' : '流量名称'" align="center" prop="name" key="name"
         show-overflow-tooltip />
       <el-table-column label="关联设备" align="center" prop="deviceIds" key="deviceIds" :formatter="devFormatter"
         show-overflow-tooltip />
       <el-table-column label="原价/元" align="center" prop="price" key="price" />
       <el-table-column label="活动价/元" align="center" prop="discount" key="discount" />
-      <el-table-column v-if="form.type == 12" label="流量套餐" align="center" prop="intro" key="intro"
+      <el-table-column v-if="form.typeList[0] === '12'" label="流量套餐" align="center" prop="intro" key="intro"
         show-overflow-tooltip />
-      <el-table-column v-if="form.type == 13" label="有效期" align="center" prop="indate" key="indate"
+      <el-table-column v-if="form.typeList[0] !== '12'" label="有效期" align="center" prop="indate" key="indate"
         :formatter="timeFormatter" />
-      <el-table-column v-if="form.type == 13" label="资源平台" align="center" prop="platformId" key="platformId"
+      <el-table-column v-if="form.typeList[0] !== '12'" label="资源平台" align="center" prop="platformId" key="platformId"
         :formatter="platformFormatter" />
+      <el-table-column v-if="form.typeList[0] !== '12'" label="栏目" align="center" prop="groupId" key="groupId"
+        :formatter="sceneFormatter" />
       <el-table-column label="当前状态" align="center" prop="status" key="status" :formatter="statusFormatter" />
       <el-table-column label="是否推荐" align="center" prop="isRecommend" key="isRecommend"
         :formatter="recommendFormatter" />
@@ -65,13 +65,14 @@
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
       @pagination="getList" />
   </div>
 </template>
 
 <script>
 import { list, remove, shelve, goodsList } from '@/api/service/package'
+import { list as sceneList } from '@/api/operation/scene'
 import { devMixin, serviceTimeMixin } from '@/mixin/index'
 export default {
   mixins: [devMixin, serviceTimeMixin],
@@ -83,7 +84,7 @@ export default {
       form: {
         pageNum: 1,
         pageSize: 10,
-        type: this.$route.query.type
+        typeList: this.$route.query.typeList.split(',')
       },
       // 列表
       tableData: [],
@@ -107,22 +108,27 @@ export default {
       }],
       // 资源平台
       platformOptions: [{
-        value: 1,
+        value: 6,
         label: 'QQ音乐'
+      }, {
+        value: 9,
+        label: '酷狗音乐'
+      }, {
+        value: 10,
+        label: '爱听音乐'
       }],
       // 流量套餐
-      goodsOptions: []
+      goodsOptions: [],
+      // 爱听专区
+      sceneOptions: []
     }
   },
   mounted() {
     this.getList()
-    if (this.form.type == 12) {
-      // 流量套餐
-      goodsList().then(res => {
-        if (res.code === 0) {
-          this.goodsOptions = res.data
-        }
-      })
+    if (this.form.typeList[0] === '12') {
+      this.getGoodSList()
+    } else {
+      this.getSceneList()
     }
   },
   methods: {
@@ -138,6 +144,29 @@ export default {
       })
     },
 
+    // 流量套餐
+    getGoodSList() {
+      goodsList().then(res => {
+        if (res.code === 0) {
+          this.goodsOptions = res.data
+        }
+      })
+    },
+
+    // 爱听专区
+    getSceneList() {
+      sceneList().then(res => {
+        if (res.code === 0) {
+          res.data.map(i => {
+            this.sceneOptions.push({
+              value: i.id,
+              label: i.name
+            })
+          })
+        }
+      })
+    },
+
     // 搜索
     getSearch() {
       this.form.pageNum = 1
@@ -149,7 +178,7 @@ export default {
       this.form = {
         pageNum: 1,
         pageSize: 10,
-        type: this.$route.query.type
+        typeList: this.$route.query.typeList.split(',')
       }
       this.getList()
     },
@@ -160,10 +189,10 @@ export default {
         path: `/service/package/detail`,
         query: {
           id: id,
-          type: this.form.type
+          typeList: this.form.typeList.join(',')
         }
       })
-      this.$route.meta.activeMenu = this.form.type == 13 ? '/service/musicPackage' : '/service/flowPackage'
+      this.$route.meta.activeMenu = this.form.typeList[0] === '13' ? '/service/musicPackage' : '/service/flowPackage'
     },
 
     // 删除
@@ -218,7 +247,10 @@ export default {
     devFormatter(row) {
       return row.deviceIds ? row.deviceIds.split(',').map(i => this.selectDictLabel(this.devOptions, i)).join(',') : ''
     },
-
+    // 栏目
+    sceneFormatter(row) {
+      return this.selectDictLabel(this.sceneOptions, row.groupId)
+    }
   }
 }
 </script>