歌单模块

src/views/music/menu/detail.vue

@@ -17,6 +17,18 @@
             :disabled="disabledJoinType(item.joinType)" />
         </el-select>
       </el-form-item>
+      <el-form-item label="付费类型：" prop="payType">
+        <el-select v-model="form.payType" placeholder="请选择付费类型">
+          <el-option v-for="item in payTypeOptions.slice(0, 2)" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="form.payType === 2" label="原价：" prop="price">
+        <el-input-number v-model="form.price" placeholder="请输入原价" :min="1" :precision="2" :controls="false" />
+      </el-form-item>
+      <el-form-item v-if="form.payType === 2" label="折扣价" prop="discount">
+        <el-input-number v-model="form.discount" placeholder="请输入折扣价" :min="0" :precision="2" :controls="false" />
+      </el-form-item>
       <el-form-item label="歌单封面：" prop="coverUrl">
         <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')" :disabled="disabled" />
       </el-form-item>
@@ -26,7 +38,7 @@
       </el-form-item>
       <el-form-item label="歌曲列表：" style="width: 100%;">
         <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加歌曲</el-button>
-        <el-table class="table" :data="form.programList" height="329px" v-loading="form_loading">
+        <el-table class="table" :data="form.programList">
           <el-table-column label="ID" prop="id" align="center" />
           <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
           <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
@@ -67,7 +79,7 @@
         </el-form-item>
       </el-form>
       <el-table :data="tableData" v-loading="loading">
-        <el-table-column label="ID" prop="id" align="center" />
+        <el-table-column label="歌曲Id" prop="id" align="center" show-overflow-tooltip />
         <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
         <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
         <el-table-column label="播放时长" prop="playTime" align="center" />
@@ -88,17 +100,35 @@
 <script>
 import { submit, detail } from '@/api/music/menu'
 import { list } from '@/api/music/list'
-import { platformMixin, onOrOffMixin } from '@/mixin/index'
+import { platformMixin, onOrOffMixin, payTypeMixin } from '@/mixin/index'
 import Audio from '@/components/Audio/index.vue'
 export default {
-  mixins: [platformMixin, onOrOffMixin],
+  mixins: [platformMixin, onOrOffMixin, payTypeMixin],
   components: {
     Audio
   },
   data() {
+    // 判断原价是否大于折扣价
+    var checkPrice = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入原价'))
+      } else {
+        if (this.form.discount && value <= this.form.discount) {
+          callback(new Error('原价必须大于折扣价'))
+        }
+        callback()
+      }
+    }
+    // 判断折扣价是否小于原价
+    var checkDiscount = (rule, value, callback) => {
+      if (this.form.price && value >= this.form.price) {
+        callback(new Error('折扣价必须小于原价'))
+      } else {
+        callback()
+      }
+    }
     return {
       // 遮罩层
-      form_loading: false,
       loading: false,
       // 表单
       form: {
@@ -120,6 +150,15 @@ export default {
         platformId: [{
           required: true, message: '请选择资源平台', trigger: 'change'
         }],
+        payType: [{
+          required: true, message: '请选择付费类型', trigger: 'change'
+        }],
+        price: [{
+          required: true, validator: checkPrice, trigger: 'blur'
+        }],
+        discount: [{
+          validator: checkDiscount, trigger: 'blur'
+        }],
         coverUrl: [{
           required: true, message: '请上传歌单封面', trigger: 'change'
         }],
@@ -160,12 +199,10 @@ export default {
   methods: {
     // 详情
     getDetail() {
-      this.form_loading = true
       detail(this.form.id).then(res => {
         if (res.code === 0) {
           this.form = res.data
           this.form.programList = res.data.programList === null ? [] : res.data.programList
-          this.form_loading = false
         }
       })
     },
@@ -237,16 +274,10 @@ export default {
             arr.push(i.id)
           })
           this.form.programList = arr
-          this.form_loading = true
-          let title = this.form.id ? '编辑成功！' : '新增成功！'
           submit(this.form).then(res => {
             if (res.code === 0) {
-              this.$message.success(`${title}`)
-              if (this.form.id) {
-                this.getDetail()
-              } else {
-                this.cancel()
-              }
+              this.$message.success(`提交成功！`)
+              this.cancel()
             }
           })
         } else {

src/views/music/menu/index.vue

@@ -2,18 +2,25 @@
   <div class="app-container">
     <!-- 搜索 -->
     <el-form inline size="mini">
+      <el-form-item label="歌单Id：">
+        <el-input v-model="form.id" placeholder="请输入歌单Id" clearable />
+      </el-form-item>
       <el-form-item label="歌单名称：">
         <el-input v-model="form.name" placeholder="请输入歌单名称" clearable />
       </el-form-item>
       <el-form-item label="资源平台：">
         <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
-            :label="item.label" />
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
-          <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value"
+          <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="付费类型：">
+        <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
+          <el-option v-for="item in payTypeOptions.slice(0, 2)" :key="item.value" :value="item.value"
             :label="item.label" />
         </el-select>
       </el-form-item>
@@ -31,7 +38,7 @@
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading" @selection-change="handleSelect">
       <el-table-column type="selection" align="center" />
-      <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
+      <el-table-column label="歌单Id" prop="id" align="center" show-overflow-tooltip />
       <el-table-column label="歌单名称" prop="name" align="center" show-overflow-tooltip />
       <el-table-column label="歌单封面" align="center" width="100px">
         <template slot-scope="scope">
@@ -44,6 +51,7 @@
           <el-image v-if="scope.row.avatarNickHead" :src="scope.row.avatarNickHead" />
         </template>
       </el-table-column>
+      <el-table-column label="付费类型" prop="payType" align="center" :formatter="freeFormatter" />
       <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
       <el-table-column label="歌曲数量" prop="programCount" align="center" />
       <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
@@ -63,16 +71,16 @@
         </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, change, remove } from '@/api/music/menu'
-import { platformMixin, onOrOffMixin } from '@/mixin/index'
+import { platformMixin, onOrOffMixin, payTypeMixin } from '@/mixin/index'
 export default {
-  mixins: [platformMixin, onOrOffMixin],
+  mixins: [platformMixin, onOrOffMixin, payTypeMixin],
   data() {
     return {
       // 遮罩层
@@ -183,6 +191,10 @@ export default {
 
     statusFormatter(row) {
       return this.selectDictLabel(this.onOrOffOptions, row.status)
+    },
+
+    freeFormatter(row) {
+      return this.selectDictLabel(this.payTypeOptions, row.payType)
     }
   },
 };