|
|
@@ -0,0 +1,536 @@
|
|
|
+<template>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <div class="myTabs" style="background: #fff;min-height: 500px;">
|
|
|
+ <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="点赞列表" name="first">
|
|
|
+ <el-table size="small" :data="dataListZan" border style="margin-top: 20px;width: 960px">
|
|
|
+ <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="平台" prop="platformName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="账号" prop="accountName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="视频系列" prop="videoSeries">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="第几集" prop="episodeNumber">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="视频名称" prop="videoName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="抖音账号" prop="tiktokAccount">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="状态" prop="uploadStatus">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="100" align="center" label="驳回原因">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-link type="primary" :underline="false" v-if="scope.row.content"
|
|
|
+ @click="handleClickViewContent(scope.row.content)">查看</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="200" align="center" label="附件">
|
|
|
+ <template slot-scope="props">
|
|
|
+ <div v-for="(item, index) in props.row.files" :key="index">
|
|
|
+ <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" align="center" label="操作" width="80px"
|
|
|
+ class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button :disabled="scope.row.uploadStatus == '未上传' ? false : true" type="primary" size="small"
|
|
|
+ @click="handleClickViewZan(scope.row.id)">上传</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="myPage">
|
|
|
+ <el-pagination @size-change="handleSizeChangeZan" @current-change="handleCurrentChangeZan"
|
|
|
+ :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="totalZan">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="上传点赞" :visible.sync="dialogVisibleZan" width="40%">
|
|
|
+ <el-form :rules="rulesZan" ref="dataFormZan" :model="dataFormZan" label-width="100px">
|
|
|
+ <el-form-item label="抖音账号:" prop="tiktokAccount">
|
|
|
+ <el-input clearable style="width: 95%;" size="small" v-model="dataFormZan.tiktokAccount"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="事项" prop="matters">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange">全选</el-checkbox>
|
|
|
+ <el-checkbox-group v-model="dataFormZan.matters" @change="changeChecked">
|
|
|
+ <el-checkbox v-for="item in typeListZan" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel
|
|
|
+ }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证明附件:" prop="fileIds">
|
|
|
+ <el-upload :action="fileUrl" :file-list="dataFormZan.files" :on-success="handleAvatarSuccessZan"
|
|
|
+ :before-upload="beforeUploadFileZan" :on-remove="handleRemoveZan">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传说明:">
|
|
|
+ <el-card shadow="never" style="width: 95%;padding: 0;min-height: 100px;line-height: normal;">
|
|
|
+ <div v-html="remarkHtml"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" type="primary" @click="submitFormZan">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script scoped>
|
|
|
+import { dictList, remarkHtml } from "@/api/allApi";
|
|
|
+import { zanList, uploadZan } from "@/api/zanApi";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentPage: 1,
|
|
|
+ remarkHtml: '',
|
|
|
+ activeName: 'first',
|
|
|
+ fileUrl: this.baseUrl,
|
|
|
+ // checkbox全选
|
|
|
+ isIndeterminate: false,
|
|
|
+ checkAll: false,
|
|
|
+ mattersArr: [],
|
|
|
+ typeListZan: [],
|
|
|
+ dataListZan: [],
|
|
|
+ dialogVisibleZan: false,
|
|
|
+ rulesZan: {
|
|
|
+ tiktokAccount: [{ required: true, message: "请填写抖音账号", trigger: "blur" }],
|
|
|
+ matters: [{ required: true, message: "请选择事项", trigger: "blur" }],
|
|
|
+ fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ totalZan: 0,
|
|
|
+ listQueryZan: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+ dataFormZan: {
|
|
|
+ tiktokAccount: '',
|
|
|
+ matters: [],
|
|
|
+ fileIds: '',
|
|
|
+ files: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRemarkHtml('interactiveRule');
|
|
|
+ this.getTypeListZan();
|
|
|
+ this.getDataListZan()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeChecked(val) {
|
|
|
+ console.log(val, '勾选val')
|
|
|
+ let checkedCount = val.length
|
|
|
+ this.checkAll = checkedCount === this.mattersArr.length
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.mattersArr.length
|
|
|
+ },
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ console.log(val, '全选val')
|
|
|
+ this.dataFormZan.matters = val ? this.mattersArr : []
|
|
|
+ this.isIndeterminate = false
|
|
|
+ },
|
|
|
+ getRemarkHtml(val) {
|
|
|
+ remarkHtml({ noticeType: val }).then(response => {
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.remarkHtml = response.data.data.content
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClickViewContent(val) {
|
|
|
+ this.$alert(val, '驳回原因', {
|
|
|
+ // showConfirmButton:false,
|
|
|
+ // showClose: false,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClickViewZan(id) {
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ this.checkAll = false;
|
|
|
+ this.dialogVisibleZan = true;
|
|
|
+ this.dataFormZan = {
|
|
|
+ videoId: id,
|
|
|
+ tiktokAccount: '',
|
|
|
+ matters: [],
|
|
|
+ fileIds: '',
|
|
|
+ files: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab.name, event);
|
|
|
+ },
|
|
|
+ getTypeListZan() {
|
|
|
+ dictList({ dictType: 'matter' }).then(response => {
|
|
|
+ let dataList = response.data.data;
|
|
|
+ this.typeListZan = dataList;
|
|
|
+ // 勾选的数组绑定的是数组中的item.dictValue
|
|
|
+ let dictValueArr = []
|
|
|
+ dataList.forEach(item => {
|
|
|
+ dictValueArr.push(item.dictValue)
|
|
|
+ })
|
|
|
+ this.mattersArr = dictValueArr
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleRemoveZan(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ let fileIds = [];
|
|
|
+ for (let i in fileList) {
|
|
|
+ let id = fileList[i].response.data.id;
|
|
|
+ fileIds.push(id);
|
|
|
+ }
|
|
|
+ this.dataFormZan.fileIds = fileIds.join(",");
|
|
|
+ },
|
|
|
+ beforeUploadFileZan(file) {
|
|
|
+ console.log(file);
|
|
|
+ const size = file.size / 1024 / 1024;
|
|
|
+ console.log(size);
|
|
|
+ if (size > 10) {
|
|
|
+ this.$message.error("文件大小不能超过10MB！");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAvatarSuccessZan(res, file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ console.log("------", "==========");
|
|
|
+ console.log("res = ", res);
|
|
|
+
|
|
|
+ let fileIds = [];
|
|
|
+ for (let i in fileList) {
|
|
|
+ let response = fileList[i].response;
|
|
|
+ if (response.errno && response.errno != "0") {
|
|
|
+ this.$message.error("该文件上传失败,已被移除,请重新上传!");
|
|
|
+ // 上传失败移除该 file 对象
|
|
|
+ fileList.splice(i, 1);
|
|
|
+ } else {
|
|
|
+ let id = fileList[i].response.data.id;
|
|
|
+ fileIds.push(id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dataFormZan.fileIds = fileIds.join(",");
|
|
|
+ },
|
|
|
+ submitFormZan() {
|
|
|
+ this.$refs['dataFormZan'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.dataFormZan.matters = this.dataFormZan.matters.join(",");
|
|
|
+ uploadZan(this.dataFormZan)
|
|
|
+ .then((response) => {
|
|
|
+ this.dialogVisibleZan = false;
|
|
|
+ this.$notify({
|
|
|
+ title: "成功",
|
|
|
+ message: "上传成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.dataFormZan.tiktokAccount = '';
|
|
|
+ this.dataFormZan.matters = [];
|
|
|
+ this.dataFormZan.fileIds = '';
|
|
|
+ this.dataFormZan.files = [];
|
|
|
+ this.listQueryZan.page = 1;
|
|
|
+ this.getDataListZan();
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDataListZan() {
|
|
|
+ zanList(this.listQueryZan).then(response => {
|
|
|
+ this.dataListZan = response.data.data.items;
|
|
|
+ this.totalZan = response.data.data.total;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChangeZan(val) {
|
|
|
+ this.listQueryZan.limit = val
|
|
|
+ this.getDataListZan()
|
|
|
+ },
|
|
|
+ handleCurrentChangeZan(val) {
|
|
|
+ this.listQueryZan.page = val
|
|
|
+ this.getDataListZan()
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.text-overflow {
|
|
|
+ max-width: 400px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.right-wrap {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.myPage {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container {
|
|
|
+ min-height: 560px;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container .gains_wrapper {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container .gains_wrapper .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: -20px 0 0 -20px;
|
|
|
+}
|
|
|
+
|
|
|
+.item.isVirtual {
|
|
|
+ background: #f7f8fa;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 0 1 auto;
|
|
|
+ width: calc(50% - 30px);
|
|
|
+ min-width: 410px;
|
|
|
+ height: 116px;
|
|
|
+ padding-right: 6px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.item .img-wapper {
|
|
|
+ width: 114px;
|
|
|
+ height: 114px;
|
|
|
+ margin-right: 16px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.item .img-wapper .item-icon {
|
|
|
+ max-width: 72px;
|
|
|
+ max-height: 72px;
|
|
|
+}
|
|
|
+
|
|
|
+.item .main {
|
|
|
+ flex: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.item .date,
|
|
|
+.item .goods_name {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.item .goods_name {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #252933;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.item p {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.item .date {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #8a919f;
|
|
|
+}
|
|
|
+
|
|
|
+.item .buttons {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item.actived {
|
|
|
+ background: #f2f3f5;
|
|
|
+ color: #8a919f;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 26px;
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 50px;
|
|
|
+ color: #8a919f;
|
|
|
+ white-space: nowrap;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.item .arrow {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-left: 2px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+}
|
|
|
+
|
|
|
+svg:not(:root) {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item svg path {
|
|
|
+ fill: currentColor;
|
|
|
+}
|
|
|
+
|
|
|
+.status {
|
|
|
+ margin-right: 30px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.status.bottom {
|
|
|
+ margin-top: 55px;
|
|
|
+}
|
|
|
+
|
|
|
+.status .use-btn {
|
|
|
+ color: #1e80ff;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-container {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-entry-list {
|
|
|
+ margin-right: 17.5rem;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 720px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.entry-list-container {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.entry-list-container .tab-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 16px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header .tab-title {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.content-body {
|
|
|
+ padding: 10px 20px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie {
|
|
|
+ margin: 0 0 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title {
|
|
|
+ height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title .title {
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1d2129;
|
|
|
+ margin: 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title .series-left,
|
|
|
+.serie .serie-title .series-right {
|
|
|
+ width: 16px;
|
|
|
+ height: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ border-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list {
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-template-columns: repeat(auto-fill, 150px);
|
|
|
+ grid-gap: 10px 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item {
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 150px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon {
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain {
|
|
|
+ filter: grayscale(100%);
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-desc {
|
|
|
+ /* margin-top: -10px; */
|
|
|
+ text-align: center;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .obtain-date {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #86909c;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+</style>
|
