|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div class="container add-edit-release-audio">
|
|
|
+ <el-dialog
|
|
|
+ v-dialogDrag
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ center
|
|
|
+ width="568px"
|
|
|
+ title="发布问答"
|
|
|
+ :visible.sync="addEditdialogReleaseAudio"
|
|
|
+ customClass="add-edit-video-dlg"
|
|
|
+ :before-close="cancelHandle"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form :model="addEditAudio" :rules="rules" ref="ruleFormAudio" class="demo-ruleForm">
|
|
|
+ <el-form-item prop="audioName">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <el-input style="width: 75%" clearable placeholder="请上传音频" v-model="addEditAudio.audioName"></el-input>
|
|
|
+ <el-upload class="upload-demo" action="" :show-file-list="false" :http-request="handleUploadAudio" accept="audio/*" :file-list="fileListAudio">
|
|
|
+ <el-button type="primary" :loading="startUpload">上传视频</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-progress type="circle" :percentage="percentage" width="40" style="margin-left: 10px" v-if="startUpload"></el-progress>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="industryId">
|
|
|
+ <el-select style="width: 100%" placeholder="请选择行业" v-model="addEditAudio.industryId" clearable @change="selectChangeHandle">
|
|
|
+ <el-option
|
|
|
+ v-for="item in chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '买方研选')"
|
|
|
+ :label="item.PermissionName"
|
|
|
+ :key="item.ChartPermissionId"
|
|
|
+ :value="item.ChartPermissionId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="addEditAudio.property" multiple placeholder="请选择产业" clearable filterable style="width: 100%" @focus="industrySelectFocus">
|
|
|
+ <el-option :label="item.PermissionName" :value="item.ChartPermissionId" v-for="item in selectedIndustryArr" :key="item.ChartPermissionId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="cover-content" style="margin: 10px 0" v-if="fileListAudio.length && defaultImage">
|
|
|
+ <span class="text" style="width: 46px; text-align: right">封面：</span>
|
|
|
+ <div class="img-content">
|
|
|
+ <img :src="defaultImage" alt="" />
|
|
|
+ <div class="modify" @click="modifyImgHandler">修改</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirmSubmit(1)">确定</el-button>
|
|
|
+ <el-button @click="cancelHandle">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { raiInterface, raiAudioApi, resourceVoiceupload } from "@/api/api.js";
|
|
|
+import ModifyImgDlg from "../../components/addComopnents/modifyImgDlg.vue";
|
|
|
+export default {
|
|
|
+ name: "",
|
|
|
+ components: { ModifyImgDlg },
|
|
|
+ props: {
|
|
|
+ addEditdialogReleaseAudio: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ chartPermissionList: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ playDetailsList: {
|
|
|
+ default: {},
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ addEditAudio: {
|
|
|
+ audioName: "", //音频名称
|
|
|
+ industryId: "", //行业id
|
|
|
+ property: "", //产业名称
|
|
|
+ audioUrl: "", //视频链接
|
|
|
+ AudioSeconds: "", //时长
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ audioName: [{ required: true, message: "请上传音频", trigger: "blur" }],
|
|
|
+ industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
|
|
|
+ },
|
|
|
+ industryArr: [],
|
|
|
+ selectedIndustryArr: [],
|
|
|
+ percentage: 0,
|
|
|
+ startUpload: false, //开始上传
|
|
|
+ fileListAudio: [],
|
|
|
+ videoAndVoiceList: [],
|
|
|
+ defaultImage: [],
|
|
|
+ modifyImgVisible: false,
|
|
|
+ defaultImage: "",
|
|
|
+ shareImg: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ /* 获取全部的行业 前的判断 */
|
|
|
+ industrySelectFocus() {
|
|
|
+ if (!this.addEditAudio.industryId) {
|
|
|
+ this.$message.error("请先选择行业");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 行业更改
|
|
|
+ selectChangeHandle(value) {
|
|
|
+ this.addEditAudio.property = "";
|
|
|
+ value ? this.getIndustry(value) : (this.selectedIndustryArr = []);
|
|
|
+ },
|
|
|
+ /* 获取选择的行业 */
|
|
|
+ getIndustry(industryId) {
|
|
|
+ if (this.industryArr.length) {
|
|
|
+ this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ raiInterface.getListIndustrial().then((res) => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.industryArr = res.Data.List || [];
|
|
|
+ this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //保存或发布
|
|
|
+ confirmSubmit(type) {
|
|
|
+ this.$refs.ruleFormAudio.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const res = await raiAudioApi.addAudio({
|
|
|
+ AudioName: this.addEditAudio.audioName,
|
|
|
+ ChartPermissionId: this.addEditAudio.industryId,
|
|
|
+ IndustryId: this.addEditAudio.property || 0,
|
|
|
+ AudioUrl: this.addEditAudio.audioUrl,
|
|
|
+ AudioDuration: this.addEditAudio.AudioSeconds,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.$message.success("添加成功");
|
|
|
+ this.cancelHandle();
|
|
|
+ this.$parent.getAudioList();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传音频
|
|
|
+ async handleUploadAudio(e) {
|
|
|
+ return;
|
|
|
+ this.startUpload = true;
|
|
|
+ let form = new FormData();
|
|
|
+ form.append("file", e.file);
|
|
|
+ const res = await resourceVoiceupload(form);
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let obj = {
|
|
|
+ name: res.Data.ResourceName,
|
|
|
+ url: res.Data.ResourceUrl,
|
|
|
+ PlaySeconds: res.Data.PlaySeconds,
|
|
|
+ };
|
|
|
+ this.getVideoAndImg();
|
|
|
+
|
|
|
+ this.addEditAudio.audioName = res.Data.ResourceName; //音频名称
|
|
|
+ this.addEditAudio.audioUrl = res.Data.ResourceUrl; //视频链接
|
|
|
+ this.addEditAudio.AudioSeconds = res.Data.PlaySeconds; //时长
|
|
|
+ this.fileListAudio = [obj];
|
|
|
+ }
|
|
|
+ this.startUpload = false;
|
|
|
+ },
|
|
|
+ // 封面图
|
|
|
+ async getVideoAndImg(isOne = "") {
|
|
|
+ this.fileListAudio = [{}];
|
|
|
+ const res = await raiInterface.video_and_voiceImgActivityVideo({
|
|
|
+ FileType: 1,
|
|
|
+ ActivityId: 2682,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ isOne == "修改" ? "" : (this.defaultImage = res.Data.List[0].ImgUrl);
|
|
|
+ this.videoAndVoiceList = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击修改图片的弹框
|
|
|
+ modifyImgHandler() {
|
|
|
+ this.getVideoAndImg("修改");
|
|
|
+ this.modifyImgVisible = true;
|
|
|
+ },
|
|
|
+ cancelHandle() {
|
|
|
+ this.$refs.ruleFormAudio.resetFields();
|
|
|
+ this.addEditAudio = {
|
|
|
+ audioName: "", //音频名称
|
|
|
+ industryId: "", //行业id
|
|
|
+ property: "", //产业名称
|
|
|
+ audioUrl: "", //视频链接
|
|
|
+ AudioSeconds: "", //时长
|
|
|
+ };
|
|
|
+ this.$emit("update:addEditdialogReleaseAudio", false);
|
|
|
+ this.$emit("update:playDetailsList", {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.add-edit-release-audio {
|
|
|
+ .add-edit-video-dlg {
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.add-edit-release-audio {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .cover-content {
|
|
|
+ display: flex;
|
|
|
+ // align-items: stretch;
|
|
|
+ // vertical-align: bottom;
|
|
|
+ .img-content {
|
|
|
+ position: relative;
|
|
|
+ height: 200px;
|
|
|
+ width: 200px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .modify {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -50px;
|
|
|
+ height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
bding