boss/pages/main/index/jishuquan.vue

<template>
  <div>
    <el-radio-group v-model="tab" size="small" @change="getList">
      <el-radio-button label="ad">活动直播管理</el-radio-button>
      <el-radio-button label="topic">文章管理</el-radio-button>
      <el-radio-button label="video">视频管理</el-radio-button>
      <el-radio-button label="kol">KOL管理</el-radio-button>
    </el-radio-group>
    <br/>
    <template v-if="tab==='ad'">
      <div>
        <el-button type="success" style="margin-top: 20px;" @click="showAdEdit(null)">添加活动</el-button>
      </div>
      <div class="content" v-if="ads">
        <el-table :data="ads" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="活动标题"></el-table-column>
          <el-table-column prop="position_name" label="位置"></el-table-column>
          <el-table-column label="基本数据">
            <template slot-scope="ad" v-if="tab==='ad'">
              <el-tag type="success">浏览{{ad.row.view_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="300px;">
            <template slot-scope="ad" v-if="tab==='ad'">
              <el-button type="primary" @click="showAdEdit(ad.row)">
                编辑
                <i class="el-icon-edit el-icon--right"></i>
              </el-button>
              <el-button type="danger" @click="deleteAd(ad.row.id)">
                删除
                <i class="el-icon-delete el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="order-footer"
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </template>
    <template v-if="tab==='topic'">
      <el-radio-group v-model="labelTab" size="small" @change="getList" style="margin-top: 20px;">
        <el-radio-button label>全部</el-radio-button>
        <el-radio-button label="is_top">置顶</el-radio-button>
        <el-radio-button label="is_must_see">进站必看</el-radio-button>
        <el-radio-button label="is_hot">热门</el-radio-button>
        <el-radio-button label="is_good">优质</el-radio-button>
        <el-radio-button label="is_new">最新</el-radio-button>
        <el-radio-button label="is_ad">广告</el-radio-button>
      </el-radio-group>
      <div class="content" v-if="topics">
        <el-table :data="topics" height="100%" border style="width: 100%">
          <el-table-column :className="`clickable`" prop="title" label="文章标题">
            <template slot-scope="scope">
              <span @click="goTopic(scope.row)">{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column :className="`clickable`" prop="nickname" label="作者">
            <template slot-scope="scope">
              <span @click="goRooterUser(scope.row)">{{scope.row.nickname}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="发布时间"></el-table-column>
          <el-table-column label="基本数据" width="280px">
            <template slot-scope="topic" v-if="tab==='topic'">
              <el-tag type="success">浏览{{topic.row.view_count}}</el-tag>
              <el-tag type="info">点赞{{topic.row.like_count}}</el-tag>
              <el-tag type="warning">收藏{{topic.row.favorite_count}}</el-tag>
              <el-tag type="danger">评论{{topic.row.reply_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前标签" width="280px">
            <template slot-scope="label" v-if="tab==='topic'">
              <el-tag type="info" v-if="label.row.is_top==1" class="custom-label">置顶</el-tag>
              <el-tag type="info" v-if="label.row.is_must_see==1" class="custom-label">进站必看</el-tag>
              <el-tag type="info" v-if="label.row.is_hot==1" class="custom-label">热门</el-tag>
              <el-tag type="info" v-if="label.row.is_good==1" class="custom-label">优质</el-tag>
              <el-tag type="info" v-if="label.row.is_new==1" class="custom-label">最新</el-tag>
              <el-tag type="info" v-if="label.row.is_ad==1" class="custom-label">广告</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="260px" v-if="tab==='topic'">
            <template slot-scope="topic" v-if="tab==='topic'">
              <template>
                <el-button type="primary" @click="editLabel(topic.row)">
                  标签管理
                  <i class="el-icon-setting el-icon--right"></i>
                </el-button>
              </template>
              <el-button type="danger" @click="delTopic(topic.row.id)">
                删除
                <i class="el-icon-delete el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="order-footer"
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </template>
    <template v-if="tab==='video'">
      <div class="content" v-if="videos">
        <el-table :data="videos" height="100%" border style="width: 100%">
          <el-table-column prop="title" :className="`clickable`" label="视频简介">
            <template slot-scope="scope">
              <span @click="goVideo(scope.row)">{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" :className="`clickable`" label="作者">
            <template slot-scope="scope">
              <span @click="goRooterUser(scope.row)">{{scope.row.nickname}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="发布时间"></el-table-column>
          <el-table-column label="基本数据" width="340px">
            <template slot-scope="video" v-if="tab==='video'">
              <el-tag type="success">浏览：{{video.row.view_count}}</el-tag>
              <el-tag type="info">点赞：{{video.row.like_count}}</el-tag>
              <el-tag type="warning">收藏：{{video.row.favorite_count}}</el-tag>
              <el-tag type="danger">评论：{{video.row.reply_count}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column label="操作" width="340px">
            <template slot-scope="video" v-if="tab==='video'">
              <el-button
                type="primary"
                v-if="video.row.status==1"
                @click="approveVideo(video.row.id)"
              >
                下架
                <i class="el-icon-bottom el-icon--right"></i>
              </el-button>
              <el-button
                type="primary"
                v-if="video.row.status==0"
                @click="approveVideo(video.row.id)"
              >
                上架
                <i class="el-icon-top el-icon--right"></i>
              </el-button>
              <el-button type="danger" @click="deleteVideo(video.row.id)">
                删除
                <i class="el-icon-delete el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="order-footer"
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </template>
    <template v-if="tab==='kol'">
      <div>
        <el-button type="success" style="margin-top: 20px;" @click="onAddAu(null)">添加KOL</el-button>
      </div>
      <div class="content" v-if="kols">
        <el-table :data="kols" height="100%" border style="width: 100%">
          <el-table-column prop="name" :className="`clickable`" label="作者名">
            <template slot-scope="scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="introduction" :className="`clickable`" label="简介">
            <template slot-scope="scope">
              <span>{{scope.row.introduction}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="is_signing" label="是否签约">
            <template slot-scope="scope">
              <div v-if="scope.row.is_signing ==1">
                签约
              </div>
              <div v-else>未签约</div>

            </template>
          </el-table-column>
          <el-table-column prop="uid" label="客栈UID"></el-table-column>
          <el-table-column label="关联渠道">
            <template slot-scope="scope">
              <div v-for="item in scope.row.channle">
                {{item.code}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="re_article_num" label="文章数"></el-table-column>
          <el-table-column prop="to_read_num" label="阅读数"></el-table-column>
          <el-table-column prop="to_praise_num" label="获赞数"></el-table-column>
          <el-table-column prop="to_follow_num" label="粉丝数"></el-table-column>
          <!--          <el-table-column label="关联领域">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-tag type="success">浏览：{{scope.row.name}}</el-tag>-->
          <!--              <el-tag type="danger">评论：</el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link icon="el-icon-edit" @click="onEditAu(scope.row.id)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="order-footer"
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </template>

    <el-dialog title="活动管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户UID" :label-width="formLabelWidth">
          <el-input v-model="form.uid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="话题标签" :label-width="formLabelWidth">
          <el-input v-model="form.tags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择上架/下架">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="文章" value="1"></el-option>
            <el-option label="视频" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" :label-width="formLabelWidth">
          <el-select v-model="form.position" placeholder="请选择位置">
            <el-option label="广告位1" value="1"></el-option>
            <el-option label="广告位2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAd">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="KOL管理" :visible.sync="kolFormVisible" :closeOnClickModal="false" :closeOnPressEscape="false">
      <el-form :model="kolform">
        <el-form-item label="作者名" :label-width="formLabelWidth">
          <el-input v-model="kolform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="kolform.introduction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号创建" :label-width="formLabelWidth" v-if="!isEdit">
          <el-radio v-model="radio" label="1" checked>自动创建新账号</el-radio>
          <el-radio v-model="radio" label="2">指定UID</el-radio>
        </el-form-item>
        <el-form-item label="客栈UID" :label-width="formLabelWidth" v-show="radio == 2 || isEdit">
          <el-input v-model="kolform.uid" autocomplete="off" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="是否签约" :label-width="formLabelWidth">
          <el-switch v-model="kolform.is_signing"></el-switch>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <template>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">渠道</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">通道ID</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">渠道URL</div>
              </el-col>
              <!--           <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
            </el-row>
            <template v-for="(item,index) in channelData">
              <el-row :gutter="20" style="margin-top: 5px">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-select v-model="channelData[index].code" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-input v-model="item.channel_id" placeholder="请输入内容"></el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-input v-model="item.url" placeholder="请输入内容"></el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-button
                      @click="deleteChannleRow(index)"
                      type="text"
                      size="small" v-if="index != 0">
                      移除
                    </el-button>
                    <el-button
                      @click="addChannleRow()"
                      type="text"
                      size="small">
                      添加
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </template>

          </template>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="kolFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAu">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="标签管理" :visible.sync="labelEditFormVisible">
      <el-form :model="form">
        <el-form-item label="当前标签" :label-width="formLabelWidth">
          <el-tag
            type="info"
            v-if="this.currentLabel.is_top===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_top')"
          >置顶
          </el-tag>
          <el-tag
            type="info"
            v-if="this.currentLabel.is_must_see===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_must_see')"
          >进站必看
          </el-tag>
          <el-tag
            type="info"
            v-if="this.currentLabel.is_hot===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_hot')"
          >热门
          </el-tag>
          <el-tag
            type="info"
            v-if="this.currentLabel.is_good===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_good')"
          >优质
          </el-tag>
          <el-tag
            type="info"
            v-if="this.currentLabel.is_new===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_new')"
          >最新
          </el-tag>
          <el-tag
            type="info"
            v-if="this.currentLabel.is_ad===1"
            class="custom-label"
            closable
            :disable-transitions="false"
            @close="handleClose('is_ad')"
          >广告
          </el-tag>
        </el-form-item>
        <el-form-item label="添加标签" :label-width="formLabelWidth">
          <el-select v-model="addCurrentLabel" placeholder="请选择位置">
            <el-option label="暂不添加" value></el-option>
            <el-option label="置顶" value="is_top"></el-option>
            <el-option label="进站必看" value="is_must_see"></el-option>
            <el-option label="热门" value="is_hot"></el-option>
            <el-option label="优质" value="is_good"></el-option>
            <el-option label="最新" value="is_new"></el-option>
            <el-option label="广告" value="is_ad"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addLabel">添 加</el-button>
        <el-button @click="labelEditFormVisible = false;getList()">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        labelTab: "",
        page: 1,
        size: 20,
        tab: "ad",
        total: 1,
        ads: [],
        topics: [],
        videos: [],
        kols: [],  //作者
        addCurrentLabel: "",
        form: {
          title: "",
          url: "",
          type: "1",
          tags: "",
          status: "1",
          position: "1"
        },
        kolform: {
          portrait: './',
          name: "",
          introduction: "",
          uid: "",
          is_signing: true,
        },
        options: [{
          value: 'wechat',
          label: 'wechat'
        }, {
          value: 'juejin',
          label: 'juejin'
        }, {
          value: 'zhihu',
          label: 'zhihu'
        }, {
          value: 'csdn',
          label: 'csdn'
        }],
        currentLabel: {
          is_ad: 0,
          is_new: 0,
          is_good: 0,
          is_hot: 0,
          is_must_see: 0,
          is_top: 0
        },
        radio: '1',
        currentId: 0,
        dialogFormVisible: false,
        formLabelWidth: "120px",
        labelEditFormVisible: false,
        kolFormVisible: false,     //kol
        isEdit: false,
        channelData: [
          {
            channel_id: '',
            url: '',
            code: 'wechat'
          }
        ]      //
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      goTopic(topic) {
        console.log(topic);
        window.open(
          this.$store.state.domainConfig.jishuinUrl + "/p/" + topic.id + ".html"
        );
      },
      goVideo(topic) {
        console.log(topic);
        window.open(
          this.$store.state.domainConfig.jishuinUrl + "/video/" + topic.video_id
        );
      },
      goRooterUser(topic) {
        window.open(
          this.$store.state.domainConfig.siteUrl + "/rooter/user/" + topic.user_id
        );
      },
      addLabel() {
        if (this.addCurrentLabel) {
          let res = this.$post("/api/admin/jishuquan/add_label", {
            id: this.currentId,
            type: this.addCurrentLabel
          }).then(res => {
            if (res.status === 1) {
              this.currentLabel[this.addCurrentLabel] = 1;
              this.$message({
                type: "success",
                message: "添加成功!"
              });
            }
          });
        }
      },
      handleClose(type) {
        this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let res = this.$post("/api/admin/jishuquan/remove_label", {
              id: this.currentId,
              type: type
            }).then(res => {
              if (res.status === 1) {
                this.currentLabel[type] = 0;
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      editLabel(topic) {
        this.currentLabel = {
          is_ad: 0,
          is_new: 0,
          is_good: 0,
          is_hot: 0,
          is_must_see: 0,
          is_top: 0
        }; //复位
        this.currentId = topic.id;
        if (Number(topic.is_ad) === 1) this.currentLabel.is_ad = 1;
        if (Number(topic.is_new) === 1) this.currentLabel.is_new = 1;
        if (Number(topic.is_hot) === 1) this.currentLabel.is_hot = 1;
        if (Number(topic.is_top) === 1) this.currentLabel.is_top = 1;
        if (Number(topic.is_good) === 1) this.currentLabel.is_good = 1;
        if (Number(topic.is_must_see) === 1) this.currentLabel.is_must_see = 1;
        this.labelEditFormVisible = true;
      },
      delTopic(id) {
        this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let res = this.$post("/api/admin/jishuquan/delete_topic", {
              id: id
            }).then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      approveVideo(id) {
        this.$confirm("更改视频状态", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let res = this.$post("/api/admin/jishuquan/audit_video", {
              id: id
            }).then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      deleteVideo(id) {
        this.$confirm("此操作将永久删除该视频, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let res = this.$post("/api/admin/jishuquan/delete_video", {
              id: id
            }).then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      showAdEdit(item) {
        console.log(item);
        if (item != null) {
          this.form.id = item.id;
          this.form.title = item.title;
          this.form.url = item.url;
          this.form.type = item.type;
          this.form.tags = item.tags;
          this.form.status = item.status;
          this.form.position = item.position;
          this.form.uid = item.uid;
        }
        this.dialogFormVisible = true;
      },
      deleteAd(id) {
        this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let res = this.$post("/api/admin/jishuquan/delete_ad", {
              id: id
            }).then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      async editAd() {
        let form = this.form;
        if (form.id) {
          let res = await this.$post("/api/admin/jishuquan/update_ad", form);
          console.log(res);
          if (res.status == 1) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
          }
        } else {
          let res = this.$post("/api/admin/jishuquan/create_ad", form);
          if (res.status == 1) {
            this.$message.success("创建成功");
            this.form = {
              title: "",
              url: "",
              type: "1",
              tags: "",
              status: "1",
              position: "1"
            };
          }
        }

        this.getList();
        this.dialogFormVisible = false;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },
      async getList() {
        const page = this.page;
        const size = this.size;
        const data = {
          page,
          size
        };
        let res;
        switch (this.tab) {
          case "ad":
            res = await this.$post("/api/admin/jishuquan/get_ads", data);
            this.ads = res.data.ads;
            this.total = res.data.total;
            break;
          case "video":
            res = await this.$post("/api/admin/jishuquan/get_videos", data);
            this.videos = res.data.videos;
            this.total = res.data.total;
            break;
          case "topic":
            if (this.labelTab) data.type = this.labelTab;
            res = await this.$post("/api/admin/jishuquan/get_topics", data);
            this.topics = res.data.topics;
            this.total = res.data.total;
            break;
          case "kol":
            res = await this.$post("/api/admin/author/get_aus", data);
            this.kols = res.data.aus;
            this.total = res.data.total;
            break;
        }
      },
      async contact(id) {
        const data = {
          id
        };
        let res = await this.$post("/api/admin/jishuquan/get_ads", data);
        this.$message({
          message: res.info,
          type: "success"
        });
      },
      deleteChannleRow(index) {
        this.channelData.splice(index, 1);
      },
      addChannleRow() {
        this.channelData.push({channel_id: '', url: '', code: 'wechat'})
      },
      onEditAu(id) {
        this.isEdit = true;
        let res = this.$post("/api/admin/author/get_row", {id: id})
          .then(res => {
            if (res.status == 1) {
              this.kolform = res.data;
              this.kolform.is_signing = res.data.is_signing == 1 ? true : false;
              this.channelData = res.data.channel.length >= 1 ? res.data.channel : [
                {
                  channel_id: '',
                  url: '',
                  code: 'wechat'
                }
              ];
              this.kolFormVisible = true;
            }
          }).catch((re) => {
            this.$message({
              type: "error",
              message: "网络连接错误"
            });
          });

      },
      onAddAu(item) {
        this.clearA();
        this.kolFormVisible = true;
      },
      async editAu() {
        let form = this.kolform;
        form.is_signing = form.is_signing ? 1 : 0;
        form.channelData = JSON.stringify(this.channelData);
        if (form.id) {
          let res = this.$post("/api/admin/author/update_au", form)
            .then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
                this.clearA();
                this.kolFormVisible = false;
              }
            }).catch((re) => {
              this.$message({
                type: "error",
                message: "修改失败"
              });
            });
        } else {
          if (this.radio == '1') {
            form.uid = '';
          }
          let res = await this.$post("/api/admin/author/create_au", form)
            .then(res => {
              if (res.status == 1) {
                this.$message({
                  type: "success",
                  message: "添加成功!"
                });
                this.clearA();
                this.kolFormVisible = false;
              }
            }).catch((re) => {
              this.$message({
                type: "error",
                message: "添加失败"
              });
            });
        }

      },
      clearA() {
        this.isEdit = false;
        this.kolform = {
          portrait: './',
          name: "",
          introduction: "",
          uid: '',
          is_signing: true,
        };
        this.channelData = [{channel_id: '', url: '', code: 'wechat'}];
        this.getList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .count-list {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .count-item {
    margin-right: 20px;
    font-size: 16px;
  }

  .content {
    margin-top: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    height: calc(100vh - 150px);
  }

  .btn {
    width: 80px;
  }

  .order-footer {
    margin-top: 10px;
  }

  .custom-label {
    margin-bottom: 5px;
  }
</style>