|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class='app-container'>
|
|
|
+ <el-form class="form" label-width="auto" :disabled="disabled">
|
|
|
+ <el-form-item label="文章标题:">
|
|
|
+ <el-input v-model="form.title" placeholder="请输入文章标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享标题:">
|
|
|
+ <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享描述:">
|
|
|
+ <el-input v-model="form.shareDescription" type="textarea" :rows="5" placeholder="请输入分享描述" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享图片:">
|
|
|
+ <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')" :disabled="disabled" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模板类型:">
|
|
|
+ <el-select v-model="form.templateType" placeholder="请选择模板类型">
|
|
|
+ <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="背景图片:">
|
|
|
+ <Upload listType="picture-card" :url="form.backgroundImage" @upload="upload($event, 'backgroundImage')" :disabled="disabled" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.templateType == 1" label="音频组件背景:">
|
|
|
+ <Upload listType="picture-card" :url="form.audioBackgroundImage"
|
|
|
+ @upload="upload($event, 'audioBackgroundImage')" :disabled="disabled" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.templateType == 1" label="页面排版:" style="width: 80%">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="getAdd">添加</el-button>
|
|
|
+ <el-table :data="form.contentShareLayoutList">
|
|
|
+ <el-table-column label="布局类型" align="center" width="200px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.layoutType" placeholder="请选择布局类型">
|
|
|
+ <el-option v-for="item in layoutOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="内容" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <Upload v-if="scope.row.layoutType === 0" listType="picture-card" :url="scope.row.contentPic"
|
|
|
+ @upload="upload($event, `contentPic`, scope.$index)" :disabled="disabled" />
|
|
|
+ <el-input v-else v-model="scope.row.contentName" placeholder="请选择内容" readonly
|
|
|
+ @focus="getDialog(scope.row.layoutType, scope.$index)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="链接" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-if="scope.row.layoutType === 2" v-model="scope.row.forwardUrl" placeholder="请输入链接" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number v-model="scope.row.sort" :min="1" step-strictly />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="100px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="delete" @click="getDelete(scope.$index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否开启按钮:">
|
|
|
+ <el-switch v-model="form.isButton" :active-value="1" :inactive-value="0" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.isButton == 1" label="按钮交互:">
|
|
|
+ <el-select v-model="form.buttonFixType" placeholder="请选择按钮交互">
|
|
|
+ <el-option v-for="item in buttonOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row v-if="form.isButton == 1" style="width: 100%">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="左按钮文案:">
|
|
|
+ <el-input v-model="form.leftButtonText" placeholder="请输入按钮文案" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="左按钮图片:">
|
|
|
+ <Upload listType="picture-card" :url="form.leftButtonImg" @upload="upload($event, 'leftButtonImg')" :disabled="disabled" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跳转方式:">
|
|
|
+ <el-select v-model="form.leftButtonContentType" placeholder="请选择跳转方式">
|
|
|
+ <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.leftButtonContentType === 1" label="内容添加:">
|
|
|
+ <el-input v-model="form.leftButtonContentName" readonly placeholder="请选择内容" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.leftButtonContentType === 0" label="跳转链接:">
|
|
|
+ <el-input v-model="form.leftButtonForwardUrl" placeholder="请输入跳转链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="右按钮文案:">
|
|
|
+ <el-input v-model="form.rightButtonText" placeholder="请输入按钮文案" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="右按钮图片:">
|
|
|
+ <Upload listType="picture-card" :url="form.rightButtonImg" @upload="upload($event, 'rightButtonImg')" :disabled="disabled" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跳转方式:">
|
|
|
+ <el-select v-model="form.rightButtonForwardType" placeholder="请选择跳转方式">
|
|
|
+ <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.rightButtonForwardType === 1" label="内容添加:">
|
|
|
+ <el-input v-model="form.rightButtonContentName" readonly placeholder="请选择内容" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.rightButtonForwardType === 0" label="跳转链接:">
|
|
|
+ <el-input v-model="form.rightButtonForwardUrl" placeholder="请输入跳转链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin-left: 110px;">
|
|
|
+ <el-button @click="close">取消</el-button>
|
|
|
+ <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 弹出 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="选择音频" width="1000px">
|
|
|
+ <el-form inline size="mini">
|
|
|
+ <el-form-item label="音频ID:">
|
|
|
+ <el-input v-model="dialogForm.id" placeholder="请输入音频ID" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容名称:">
|
|
|
+ <el-input v-model="dialogForm.name" placeholder="请输入内容名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="音频类型:">
|
|
|
+ <el-select v-model="dialogForm.audioType" placeholder="请选择音频类型">
|
|
|
+ <el-option v-for="item in audioOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="资源平台:">
|
|
|
+ <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台" clearable>
|
|
|
+ <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="dialogForm.payType" placeholder="请选择付费类型" clearable>
|
|
|
+ <el-option v-for="item in freeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="tableData">
|
|
|
+ <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="音频封面" align="center" width="100px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.audioPic" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="音频作者" prop="singerName" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioTypeFormatter" />
|
|
|
+ <el-table-column label="音频数量" prop="programCount" align="center" />
|
|
|
+ <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
|
|
|
+ <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="getChecked(scope.row)">选择</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div slot="footer">
|
|
|
+ <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
|
|
|
+ @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { platformMixin, isFreeMixin } from '@/mixin/index'
|
|
|
+import { detail, submit } from '@/api/content/article'
|
|
|
+import { list } from '@/api/operation/channel'
|
|
|
+export default {
|
|
|
+ mixins: [platformMixin, isFreeMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 表单
|
|
|
+ form: {
|
|
|
+ id: this.$route.query.id,
|
|
|
+ contentShareLayoutList: []
|
|
|
+ },
|
|
|
+ // 模板类型
|
|
|
+ typeOptions: [{
|
|
|
+ value: 0,
|
|
|
+ label: '图片模板'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: '图片音频模板'
|
|
|
+ }],
|
|
|
+ // 布局类型
|
|
|
+ layoutOptions: [{
|
|
|
+ value: 0,
|
|
|
+ label: '图片'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: '单音频'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '音频合集'
|
|
|
+ }],
|
|
|
+ // 按钮交互
|
|
|
+ buttonOptions: [{
|
|
|
+ value: 0,
|
|
|
+ label: '底部固定'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: '文章固定'
|
|
|
+ }],
|
|
|
+ // 跳转方式
|
|
|
+ changeOptions: [{
|
|
|
+ value: 0,
|
|
|
+ label: 'H5内链'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: 'App跳转音频合集'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '分享'
|
|
|
+ }],
|
|
|
+ // 音频类型
|
|
|
+ audioOptions: [],
|
|
|
+ // 弹窗
|
|
|
+ dialogVisible: false,
|
|
|
+ // 弹窗表单
|
|
|
+ dialogForm: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ // 总数据
|
|
|
+ total: 0,
|
|
|
+ // 弹窗列表
|
|
|
+ tableData: [],
|
|
|
+ // 页面排版索引
|
|
|
+ index: 0,
|
|
|
+ // 只读
|
|
|
+ disabled: Boolean(this.$route.query.boolean)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.form.id) {
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 详情
|
|
|
+ getDetail() {
|
|
|
+ detail(this.form.id).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.form = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加
|
|
|
+ getAdd() {
|
|
|
+ this.form.contentShareLayoutList.push({})
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传图片
|
|
|
+ upload(e, key, index) {
|
|
|
+ if (index !== undefined) {
|
|
|
+ this.form.contentShareLayoutList[index][key] = e.file
|
|
|
+ } else {
|
|
|
+ this.form[key] = e.file
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 弹窗
|
|
|
+ getDialog(e, index) {
|
|
|
+ this.audioOptions = e == 1 ? [{
|
|
|
+ value: 2,
|
|
|
+ label: '广播电台'
|
|
|
+ }, {
|
|
|
+ value: 6,
|
|
|
+ label: '节目'
|
|
|
+ }, {
|
|
|
+ value: 11,
|
|
|
+ label: '歌曲'
|
|
|
+ }] : [{
|
|
|
+ value: 8,
|
|
|
+ label: '播客专辑'
|
|
|
+ }, {
|
|
|
+ value: 10,
|
|
|
+ label: '歌单'
|
|
|
+ }, {
|
|
|
+ value: 15,
|
|
|
+ label: '音乐专辑'
|
|
|
+ }]
|
|
|
+ this.dialogForm.audioType = this.audioOptions[0].value
|
|
|
+ this.getPlatform({
|
|
|
+ audioType: this.dialogForm.audioType
|
|
|
+ })
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.getList()
|
|
|
+ this.index = index
|
|
|
+ },
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ list(this.dialogForm).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.tableData = res.data.records
|
|
|
+ this.total = res.data.total
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ getSearch() {
|
|
|
+ this.dialogForm.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ getRefresh(){
|
|
|
+ this.dialogForm = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ audioType: this.audioOptions[0].value
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择
|
|
|
+ getChecked(row) {
|
|
|
+ let e = this.form.contentShareLayoutList[this.index]
|
|
|
+ e.contentId = row.audioId
|
|
|
+ e.contentName = row.audioName
|
|
|
+ e.contentPic = row.audioPic
|
|
|
+ e.contentType = row.audioType
|
|
|
+ e.platformId = row.platformId
|
|
|
+ this.$message.success('选择成功!')
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除排版
|
|
|
+ getDelete(index) {
|
|
|
+ this.form.contentShareLayoutList.splice(index, 1)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭
|
|
|
+ close() {
|
|
|
+ this.$tab.closeOpenPage('/content/articleList')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交
|
|
|
+ getSubmit() {
|
|
|
+ submit(this.form).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success('提交成功!')
|
|
|
+ this.close()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 字典翻译
|
|
|
+ audioTypeFormatter(row) {
|
|
|
+ return this.selectDictLabel(this.audioOptions, row.audioType)
|
|
|
+ },
|
|
|
+
|
|
|
+ freeFormatter(row) {
|
|
|
+ return this.selectDictLabel(this.freeOptions, row.isFree)
|
|
|
+ },
|
|
|
+
|
|
|
+ platformFormatter(row) {
|
|
|
+ return this.selectDictLabel(this.platformOptions, row.platformId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form {
|
|
|
+ .el-form-item {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|