vue海报生成

<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 15px"></i>
      <span style="margin-top: 5px">活动管理</span>
      <el-button class="btn-add" @click="addlist" type="primary">添加活动</el-button>
    </el-card>
    <!-- 显示 -->
    <div class="table-container">
      <el-table
        ref="productAttrCateTable"
        style="width: 100%"
        :data="list"
        v-loading="listLoading"
        border
      >
        <el-table-column label="店铺ID" align="center">
          <template slot-scope="scope">{
   {
   scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="活动名称" align="center">
          <template slot-scope="scope">{
   {
   scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="活动宣传" align="center">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.activity_img"
                :preview-src-list="srcList"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动海报" align="center">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.share_img"
                :preview-src-list="posterss"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动背景图" align="center">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.back_img"
                :preview-src-list="srcback"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动价格" align="center">
          <template slot-scope="scope">{
   {
   scope.row.price}}</template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">{
   {
   scope.row.seller_mobile}}</template>
        </el-table-column>
        <el-table-column label="活动购买时间（区间）" align="center" width="160">
          <template
            slot-scope="scope"
          >{
   {
   scope.row.start_time| formatTime}} {
   {
   scope.row.end_time| formatTime}}</template>
        </el-table-column>
        <el-table-column label="活动核销时间（区间）" align="center" width="160">
          <template
            slot-scope="scope"
          >{
   {
   scope.row.use_start_time| formatTime}} {
   {
   scope.row.use_end_time| formatTime}}</template>
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template
            slot-scope="scope"
          >{
   {
   scope.row.province_name}}{
   {
   scope.row.city_name}}{
   {
   scope.row.county_name}}{
   {
   scope.row.seller_address}}</template>
        </el-table-column>
        <el-table-column label="平台备注" align="center">
          <template slot-scope="scope">{
   {
   scope.row.desc}}</template>
        </el-table-column>
        <el-table-column label="是否开启" width="140" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleStatusChange(scope.$index, scope.row)"
              :active-value="2"
              :inactive-value="3"
              v-model="scope.row.status"
              inactive-text="否"
              active-text="是"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="生成海报" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="success" @click="Postershb(scope.row.id)">生成</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button size="medium" @click="handleUpdate(scope.row.id)">编辑</el-button>
            <el-button size="medium" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加 -->
    <el-dialog :visible.sync="dialogVisiblead" width="40%">
      <h1 class="tianjia">添加活动</h1>
      <el-form ref="managementlist" :model="managementlist" label-width="150px" size="small">
        <el-form-item label="活动主图：" prop="activity_img">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :http-request="modeUpload"
            @click="apiclick()"
          >
            <img
              v-if="managementlist.activity_img"
              :src="managementlist.activity_img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动海报：" prop="share_img">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :before-upload="posters"
            :on-success="postersSuccess"
            :http-request="postersUpload"
            @click="postersclick()"
          >
            <img v-if="managementlist.share_img" :src="managementlist.share_img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动背景图：" prop="back_img">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :before-upload="beforebackUpload"
            :on-success="handlebackSuccess"
            :http-request="bgcUpload"
            @click="apibgcclick()"
          >
            <img v-if="managementlist.back_img" :src="managementlist.back_img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="活动名称：" prop="name">
          <el-input v-model="managementlist.name"></el-input>
        </el-form-item>
        <el-form-item label="活动价格：" prop="price">
          <el-input v-model="managementlist.price"></el-input>
        </el-form-item>
        <el-form-item label="商家活动让利比%：" prop="profits">
          <el-input v-model="managementlist.profits"></el-input>
        </el-form-item>
        <el-form-item label="活动开始（区间）：" prop="start_time">
          <div class="block">
            <el-date-picker
              v-model="managementlist.start_time"
              type="datetime"
              placeholder="开始日期时间"
              @change="start"
            ></el-date-picker>
          </div>
          <div class="block">
            <el-date-picker
              v-model="managementlist.end_time"
              type="datetime"
              placeholder="结束日期时间"
              @change="end"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="核销时间（区间）:" prop="use_start_time">
          <div class="block">
            <el-date-picker
              v-model="managementlist.use_start_time"
              type="datetime"
              placeholder="开始日期时间"
              :picker-options="{
   
      selectableRange:hexiaosstart
    }"
            ></el-date-picker>
          </div>
          <div class="block">
            <el-date-picker
              v-model="managementlist.use_end_time"
              type="datetime"
              placeholder="结束日期时间"
              :picker-options="{
   
      selectableRange:selectable
    }"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="平台备注：" prop="desc">
          <el-input type="textarea" :rows="5" placeholder="请输入权限简介" v-model="managementlist.desc"></el-input>
        </el-form-item>
        <el-form-item label="活动地址" prop="is_address">
          <el-switch
            style="display: block"
            :active-value="1"
            :inactive-value="0"
            v-model="managementlist.is_address"
            @change="changstatus($event)"
          ></el-switch>
        </el-form-item>
        <el-form-item label="地区选择：" v-if="show">
          省:
          <el-select
            style="width:100px;"
            v-model="provinceid"
            @change="valueid($event)"
            placeholder="请选择分类"
          >
            <el-option v-for="item in ruleForm" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>市:
          <el-select
            style="width:100px;"
            v-model="valueshi"
            @change="shiid($event)"
            placeholder="请选择市"
          >
            <el-option v-for="item in shiForm" :key="item.name" :label="item.name" :value="item.id"></el-option>
          </el-select>地区:
          <el-select
            style="width:100px;"
            v-model="valuexian"
            @change="xianid($event)"
            placeholder="请选择县"
          >
            <el-option
              v-for="item in xianForm"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address" v-if="show">
          <el-input
            v-model