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="address"
            placeholder=" 如：道路、门牌号、小区、楼栋号、单元等 "
            @blur="position($event)"
            @change="messchange"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="show" label="经度:">
          <el-input
            id="longitude"
            type="text"
            v-model="lng"
            style="width:100px; margin-right:10px;"
          />纬度:
          <el-input
            id="latitude"
            v-model="lat"
            type="text"
            style="width:100px; margin-right:10px;"
          />
          <el-button @click="searchByHand">拾取</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addromer" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog :visible.sync="mapShow" width="60%" center append-to-body v-if="mapShow">
      <div id="container" class="h300 w300" style="position: relative;width: 100%;height:500px;"></div>
    
      <span slot="footer" class="dialog-footer">
        <el-button @click="addromer" size="small">取 消</el-button>
        <el-button type="primary" @click="maplnglat" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog :visible.sync="dialogVisibl" width="50%">
      <el-form :model="modify" ref="modify" label-width="150px" size="small">
        <div class="bjxiugai">
          <el-form-item
            label="活动宣传图："
            prop="activity_img"
            class="bjxiugai"
            style="display:line-block width:1px"
          >
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :before-upload="XgUpload"
              :on-success="XcSuccess"
              :http-request="modeaudit"
              @click="Xclick()"
            >
              <img v-if="modify.activity_img" :src="modify.activity_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="活动海报：" class="bjxiugai" prop="share_img">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :before-upload="xposters"
              :on-success="xpostersSuccess"
              :http-request="xpostersUpload"
              @click="xpostersclick()"
            >
              <img v-if="modify.share_img" :src="modify.share_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="活动背景图：" class="bjxiugai" prop="back_img">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :before-upload="Upload"
              :on-success="XSuccess"
              :http-request="XbgcUpload"
              @click="apibgcclick()"
            >
              <img v-if="modify.back_img" :src="modify.back_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item label="活动名称：" prop="name">
          <el-input v-model="modify.name"></el-input>
        </el-form-item>
        <el-form-item label="活动价格：" prop="price">
          <el-input v-model="modify.price"></el-input>
        </el-form-item>
        <el-form-item label="商家活动让利比%：" prop="profits">
          <el-input v-model="modify.profits"></el-input>
        </el-form-item>
        <el-form-item label="活动开始（区间）：" prop="start_time">
          <div class="block">
            <el-date-picker
              v-model="modify.start_time"
              type="datetime"
              placeholder="开始日期时间"
              @change="Xstart"
            ></el-date-picker>
          </div>
          <div class="block">
            <el-date-picker
              v-model="modify.end_time"
              type="datetime"
              placeholder="结束日期时间"
              @change="Xend"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="核销时间（区间）:" prop="use_start_time">
          <div class="block">
            <el-date-picker
              v-model="modify.use_start_time"
              :picker-options="{
      selectableRange:hexiaosstart
    }"
              type="datetime"
              placeholder="开始日期时间"
            ></el-date-picker>
          </div>
          <div class="block">
            <el-date-picker
              v-model="modify.use_end_time"
              :picker-options="{
      selectableRange:selectable
    }"
              type="datetime"
              placeholder="结束日期时间"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="平台备注：" prop="desc">
          <el-input type="textarea" :rows="5" placeholder="请输入权限简介" v-model="modify.desc"></el-input>
        </el-form-item>
        <el-form-item label="地区选择：">
          省:
          <el-select
            style="width:100px;"
            v-model="province_name"
            @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="city_name"
            @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="county_name"
            @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">
          <el-input
            v-model="address"
            placeholder=" 如：道路、门牌号、小区、楼栋号、单元等 "
            @blur="position($event)"
            @change="messchange"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度:">
          <el-input
            id="longitude"
            type="text"
            v-model="lng"
            style="width:100px; margin-right:10px;"
          />纬度:
          <el-input
            id="latitude"
            v-model="lat"
            type="text"
            style="width:100px; margin-right:10px;"
          />
          <el-button @click="searchByHand">拾取</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyromer" size="small">取 消</el-button>
        <el-button type="primary" @click="modifyadd(modify)" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 海报 -->
    <el-dialog title="海报" :visible.sync="Postersdialog" width="340px"  margin-top= "8vh" >
      <pro v-bind:path="path" v-bind:bgsrc="bgsrc" v-if="flag"></pro>
     
    </el-dialog>
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="pagesize"
        :current-page="pagenum"
      ></el-pagination>
    </div>
      </div>
    </template>
    <script>
    import axios from "axios";
    import {
      getListdata, //获取活动列表
      activityadd, // 后台活动添加
      apiupload, //api图片上传
      auditlist, //获取活动详情
      Modifieslist,
      romverid,
      statusid,
    } from "@/api/resourceCategory";
    import { Posters } from "@/api/resourceCategory"; //海报接口
    import pro from "../hdgl/components/postershb"
    import { regionTreeList } from "@/api/menu";
    import { formatDateTime } from "@/utils/date";
    import MapLoader from "@/api/amp.js";
    
    export default {
      components:{pro},
      name: "productAttrCateList",
      name: "NewMap",
     
      data() {
    
    return {
      imgid:"",
      path:'',
      bgsrc:'',
      flag:false,
      show: false,
      hexiaosstart: "",
      selectable: "",
      srcList: [], //宣传图预览
      srcback: [], //背景图预览
      posterss: [],
      mode: {},
      numberht: {},
      postershttp: {},
      action: "https://jsonplaceholder.typicode.com/posts/",
      dialogVisiblead: false, //添加
      dialogVisibl: false, //编辑
      list: null, //显示
      listLoading: true,
      // 当前的页数
      pagenum: 1,
      // 当前每页显示多少条数据
      pagesize: 20,
      total: null, //总条数
      // 添加管理员分组数据
      managementlist: {
        name: null, //活动名称
        activity_img: "", //活动宣传图
        back_img: "", //活动背景图
        price: "", //活动价格
        share_img: "", //海报
        start_time: "", //活动开始时间
        end_time: "", //活动结束时间
        use_start_time: "", //订单使用开始时间
        use_end_time: "", //订单使用结束时间
        profits: "", //商家活动让利比%
        desc: "",
        is_address: 1
      },
      provinceid: "", //省默认选中的值 id
      ruleForm: [], //省 数据
      shiForm: [], //市区
      valueshi: "", //市区选中的值
      xianForm: [], //县城
      valuexian: "", //县城选中的值
      // 添加选中的值id
      address: "",
      // 选中的名称字
      province_name: "",
      city_name: "",
      county_name: "",
      id: "1",
      // 地图
      location: "", //经度和纬度
      addressamp: "",
      name: "",
      tel: "",
      map: "",
      mapShow: false,
      lng: "",
      lat: "",
      //修改
      modify: {
        name: null, //活动名称
        activity_img: "", //活动宣传图
        back_img: "", //活动背景图
        price: "", //活动价格
        share_img: "",
        start_time: "", //活动开始时间
        end_time: "", //活动结束时间
        use_start_time: "", //订单使用开始时间
        use_end_time: "", //订单使用结束时间
        profits: "", //商家活动让利比%
        desc: "",
        status: "",
        is_address: 0
      },
      rules: {
        name: [{ required: true, message: "请输入类型名称", trigger: "blur" }]
      },
      Postersdialog: false, //海报框
    };
      },
    
      created() {
    this.getList();
       
      },
    
      filters: {
    formatTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      return formatDateTime(time, "yyyy-MM-dd hh:mm:ss");
    }
      },
     
      methods: {
    getList() {
      var page = this.pagenum;
      this.listLoading = false;
      getListdata(page).then(response => {
        console.log(response);
        this.list = response.data.data;
        this.total = response.data.count;
        console.log("this.list", this.list);
        for (var item in this.list) {
          this.srcList.push(this.list[item].activity_img);
          this.srcback.push(this.list[item].back_img);
          this.posterss.push(this.list[item].share_img);
        }
      });
    },
    // 监听当前页 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.pagenum = newPage;
      this.getList(this.pagenum);
    },
    
    handleStatusChange(index, row) {
      this.$confirm("是否要修改该状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("状态修改", index, row);
          statusid({ id: row.id, status: row.status }).then(response => {
            this.$message({
              type: "success",
              message: response.errmsg
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改"
          });
          this.getList();
        });
    },
    // 点击添加
    addlist() {
      this.dialogVisiblead = true;
      this.provinceid = "";
      this.valueshi = "";
      this.valuexian = "";
      this.lat = "";
      this.lng = "";
      this.address = "";
    },
    //添加活动开始
    start() {
      var item = this.managementlist.start_time;
      console.log(item);
      this.hexiaosstart = item + "- 23:59:59";
      console.log("wgh", this.hexiaosstart);
    },
    // 添加活动结束
    end() {
      var over = this.managementlist.end_time;
      console.log(over);
      this.selectable = over + "- 23:59:59";
      console.log("wgh", this.selectable);
    },
    // 确认添加
    handleDialogConfirm() {
      console.log("var data =  ", this.managementlist);
    
      let hider = this.managementlist.start_time;
      this.managementlist.start_time =
        hider.getFullYear() +
        "-" +
        (hider.getMonth() + 1) +
        "-" +
        hider.getDate() +
        " " +
        hider.getHours() +
        ":" +
        hider.getMinutes() +
        ":" +
        hider.getSeconds();
      let hider1 = this.managementlist.end_time;
      this.managementlist.end_time =
        hider1.getFullYear() +
        "-" +
        (hider1.getMonth() + 1) +
        "-" +
        hider1.getDate() +
        " " +
        hider1.getHours() +
        ":" +
        hider1.getMinutes() +
        ":" +
        hider1.getSeconds();
      let hider2 = this.managementlist.use_start_time;
      this.managementlist.use_start_time =
        hider2.getFullYear() +
        "-" +
        (hider2.getMonth() + 1) +
        "-" +
        hider2.getDate() +
        " " +
        hider2.getHours() +
        ":" +
        hider2.getMinutes() +
        ":" +
        hider2.getSeconds();
      let hider3 = this.managementlist.use_end_time;
      this.managementlist.use_end_time =
        hider3.getFullYear() +
        "-" +
        (hider3.getMonth() + 1) +
        "-" +
        hider3.getDate() +
        " " +
        hider3.getHours() +
        ":" +
        hider3.getMinutes() +
        ":" +
        hider3.getSeconds();
      console.log(this.managementlist.activity_img);
      var data = this.managementlist;
    
      console.log(data);
      var status = this.managementlist.is_address;
      if (status == 0) {
        data.province = this.provinceid;
        data.city = this.valueshi;
        data.county = this.valuexian;
        data.province_name = this.province_name;
        data.city_name = this.city_name;
        data.county_name = this.county_name;
        data.lat = this.lat;
        data.lng = this.lng;
        data.address = this.address;
      }
      activityadd(data).then(response => {
        console.log(response);
        this.$message({
          message: response.errmsg,
          type: "success",
          duration: 1000
        });
        this.dialogVisiblead = false;
        this.$refs.managementlist.resetFields();
        this.managementlist.end_time = "";
        this.managementlist.use_end_time = "";
        this.getList();
      });
    },
    //上传文件之前的钩子
    beforeAvatarUpload(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200kb!");
      }
      this.apiclick(file);
      return isLt2M;
    },
    // 覆盖默认的上传方法
    modeUpload(item) {
      this.mode = item.file;
    },
    // 活动宣传图 上传成功http
    handleAvatarSuccess(response, file) {
      this.managementlist.activity_img = URL.createObjectURL(file.raw);
    },
    apiclick(file) {
      console.log("666666");
      this.mode = file;
      let fd = new FormData();
      fd.append("imgfile", this.mode);
      apiupload(fd).then(response => {
        console.log(response);
        this.managementlist.activity_img = response.data.path;
      });
    },
    
    //上传文件之前的钩子
    posters(file) {
      console.log("file************", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200kb!");
      }
      this.postersclick(file);
      return isLt2M;
    },
    // 覆盖默认的上传方法
    postersUpload(item) {
      this.postershttp = item.file;
    },
    // 活动宣传图 上传成功http
    postersSuccess(response, file) {
      this.managementlist.share_img = URL.createObjectURL(file.raw);
    },
    postersclick(file) {
      console.log("666666");
      this.postershttp = file;
      let hb = new FormData();
      hb.append("imgfile", this.postershttp);
      apiupload(hb).then(response => {
        console.log(response);
        this.managementlist.share_img = response.data.path;
      });
    },
    
    //活动背景图上传文件之前
    beforebackUpload(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200k!");
      }
      this.apibgcclick(file);
      return isLt2M;
    },
    
    bgcUpload(item) {
      this.numberht = item.file;
    },
    //活动背景图 上传成功http
    handlebackSuccess(response, file) {
      this.managementlist.back_img = URL.createObjectURL(file.raw);
      console.log(this.managementlist.back_img);
    },
    //背景图地址
    apibgcclick(file) {
      console.log("666666");
      this.numberht = file;
      let bgc = new FormData();
      bgc.append("imgfile", this.numberht);
      console.log(bgc);
      apiupload(bgc).then(response => {
        console.log(response);
        this.managementlist.back_img = response.data.path;
      });
    },
    
    // 添加取消
    addromer() {
      this.dialogVisiblead = false;
      this.$refs.managementlist.resetFields();
      this.managementlist.end_time = "";
      this.managementlist.use_end_time = "";
    },
    beforeUpload(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 上传成功http
    handleSuccess(res, file) {
      console.log("file", file);
      this.modify.img = URL.createObjectURL(file.raw);
      console.log(this.modify.img);
    },
    // 编辑修改
    handleUpdate(id) {
      this.dialogVisibl = true;
      if (this.$refs.modify) {
        this.$refs.modify.resetFields();
      }
      auditlist(id).then(response => {
        this.modify = response.data[0];
        this.province_name = response.data[0].province_name;
        console.log(this.province_name);
        this.city_name = response.data[0].city_name;
        console.log(this.city_name);
    
        this.county_name = response.data[0].county_name;
        this.lat = response.data[0].lat;
        this.lng = response.data[0].lng;
        this.address = response.data[0].address;
        this.provinceid = response.data[0].province;
        this.valueshi = response.data[0].city;
        console.log(response.data[0].city);
    
        this.valuexian = response.data[0].county;
        let parent_id = 0;
        regionTreeList(parent_id).then(response => {
          this.ruleForm = response.data;
          console.log("***地区数据列表***", this.ruleForm);
        });
        this.modify.start_time = formatDateTime(
          response.data[0].start_time,
          "yyyy-MM-dd hh:mm:ss"
        );
        this.modify.end_time = formatDateTime(
          response.data[0].end_time,
          "yyyy-MM-dd hh:mm:ss"
        );
        this.modify.use_end_time = formatDateTime(
          response.data[0].use_end_time,
          "yyyy-MM-dd hh:mm:ss"
        );
        this.modify.use_start_time = formatDateTime(
          response.data[0].use_start_time,
          "yyyy-MM-dd hh:mm:ss"
        );
      });
    },
    // 修改确定
    modifyadd(modify) {
      // console.log("modifyadd", modify);
      let data = {
        name: this.modify.name,
        activity_img: this.modify.activity_img,
        back_img: this.modify.back_img,
        share_img: this.modify.share_img,
        price: this.modify.price,
        start_time: this.modify.start_time,
        end_time: this.modify.end_time,
        use_start_time: this.modify.use_start_time,
        use_end_time: this.modify.use_end_time,
        profits: this.modify.profits,
        status: this.modify.status,
        is_address: this.modify.is_address
      };
      data.province = this.provinceid;
      console.log(this.valueshi);
    
      data.city = this.valueshi;
      data.county = this.valuexian;
      data.province_name = this.province_name;
      data.city_name = this.city_name;
      console.log(this.city_name);
      data.county_name = this.county_name;
      data.lat = this.lat;
      data.lng = this.lng;
      data.address = this.address;
    
      let id = this.modify.id;
      console.log(data);
      Modifieslist(data, id).then(response => {
        console.log("response", response);
        this.$message({
          type: "success",
          message: response.errmsg
        });
      });
      this.dialogVisibl = false;
      this.getList();
    },
    // 修改取消
    modifyromer() {
      this.dialogVisibl = false;
      this.$refs.modify.resetFields();
      this.modify.end_time = "";
      this.modify.use_end_time = "";
    },
    // 修改宣传图
    //上传文件之前的钩子
    XgUpload(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200kb!");
      }
      this.Xclick(file);
      return isLt2M;
    },
    // 覆盖默认的上传方法
    modeaudit(item) {
      this.mode = item.file;
    },
    // 活动宣传图 上传成功http
    XcSuccess(response, file) {
      this.modify.activity_img = URL.createObjectURL(file.raw);
    },
    Xclick(file) {
      console.log("666666");
      this.mode = file;
      let fd = new FormData();
      fd.append("imgfile", this.mode);
      apiupload(fd).then(response => {
        console.log(response);
        this.modify.activity_img = response.data.path;
      });
    },
    //活动背景图上传文件之前
    Upload(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200k!");
      }
      this.bgcclick(file);
      return isLt2M;
    },
    
    XbgcUpload(item) {
      this.numberht = item.file;
    },
    //活动背景图 上传成功http
    XSuccess(response, file) {
      this.modify.back_img = URL.createObjectURL(file.raw);
      console.log(this.modify.back_img);
    },
    //背景图地址
    bgcclick(file) {
      console.log("666666");
      this.numberht = file;
      let bgc = new FormData();
      bgc.append("imgfile", this.numberht);
      console.log(bgc);
      apiupload(bgc).then(response => {
        console.log(response);
        this.modify.back_img = response.data.path;
      });
    },
    //修改活动开始
    Xstart() {
      var item = this.modify.start_time;
      console.log(item);
      this.hexiaosstart = item + "- 23:59:59";
      console.log("wgh", this.hexiaosstart);
    }, // 修改活动结束
    Xend() {
      var over = this.modify.end_time;
      console.log(over);
      this.selectable = over + "- 23:59:59";
      console.log("wgh", this.selectable);
    },
    //上传文件之前的钩子
    xposters(file) {
      console.log("file", file);
      const isLt2M = file.size / 1024 / 1024 < 0.195;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200kb!");
      }
      this.xpostersclick(file);
      return isLt2M;
    },
    // 覆盖默认的上传方法
    xpostersUpload(item) {
      this.postershttp = item.file;
    },
    // 活动宣传图 上传成功http
    xpostersSuccess(response, file) {
      this.modify.share_img = URL.createObjectURL(file.raw);
    },
    xpostersclick(file) {
      console.log("666666");
      this.postershttp = file;
      let hb = new FormData();
      hb.append("imgfile", this.postershttp);
      apiupload(hb).then(response => {
        console.log(response);
        var over = this.modify.end_time;
        console.log(over);
        this.selectable = over + "- 23:59:59";
        console.log("wgh", this.selectable);
      });
    },
    // 删除 romverid
    handleDelete(id) {
      console.log(id);
      romverid(id).then(response => {
        this.$message({
          type: "success",
          message: response.errmsg
        });
      });
      this.getList();
    },
    changstatus(event) {
      var value = event;
      if (event == 0) {
        console.log("测试");
        this.show = true;
        let parent_id = 0;
        regionTreeList(parent_id).then(response => {
          this.ruleForm = response.data;
          console.log("***地区数据列表***", this.ruleForm);
        });
      } else {
        this.show = false;
      }
    },
    // 省 选中的值
    valueid(event) {
      this.provinceid = event; //获取option对应的value值
      console.log("你选中了省", this.provinceid);
      var obj = {};
      obj = this.ruleForm.find(function(item) {
        return item.id === event;
      });
    
      console.log(obj);
      this.province_name = obj.name;
      console.log(this.province_name);
      // 地区 市区数据列表
      regionTreeList(this.provinceid).then(response => {
        // console.log("市区",response);
        this.shiForm = response.data;
        this.valueshi = "";
        this.valuexian = "";
        console.log(this.shiForm);
      });
    },
    // 市区选中的id
    shiid(event) {
      this.valueshi = event;
      console.log("你选中了市区", this.valueshi);
      var obj = {};
      obj = this.shiForm.find(function(item) {
        return item.id === event;
      });
      this.city_name = obj.name;
      console.log(this.city_name);
      // 地区 县城数据列表
      regionTreeList(this.valueshi).then(response => {
        // console.log("县城",response);
        this.xianForm = response.data;
        this.valuexian = "";
      });
    },
    // 县城id
    xianid(event) {
      this.valuexian = event;
      console.log("你选中了县城", this.valuexian);
      var obj = {};
      obj = this.xianForm.find(function(item) {
        return item.id === event;
      });
      this.county_name = obj.name;
      console.log(this.county_name);
    },
    position(event) {
      this.address = event.target.value;
      console.log(this.address);
    },
    // 地址改变时
    messchange(event) {
      console.log("444", event);
      this.lng = "";
      this.lat = "";
    },
    //地图
    searchByHand(data) {
      console.log("22");
    
      if (this.value == "" || this.address == "") {
        this.$message({
          type: "success",
          message: "请输入地区和详细住址"
        });
      } else {
        this.mapShow = true;
        const that = this;
        axios
          .get("https://restapi.amap.com/v3/geocode/geo", {
            params: {
              address:
                that.province_name +
                that.city_name +
                that.county_name +
                that.address,
              key: "8451e6c7c28a37f1ab520e72299e3511"
            }
          })
          .then(res => {
            // 得到我们想要的内容
            console.log(res);
    
            that.location = res.data.geocodes[0].location.split(",");
            console.log(typeof that.location);
          })
          .catch(err => {
            console.log(err);
          });
        axios
          .get("https://restapi.amap.com/v3/place/text", {
            params: {
              keywords:
                that.province_name +
                that.city_name +
                that.county_name +
                that.address,
              key: "8451e6c7c28a37f1ab520e72299e3511"
            }
          })
          .then(res => {
            // 得到我们想要的内容
            console.log(res);
            //实例化信息窗体
    
            that.addressamp = res.data.pois[0].address;
            that.name = res.data.pois[0].name;
            console.log(res.data.pois[0].addressamp);
    
            if (res.data.pois[0].tel !== "" && res.data.pois[0].tel !== null) {
              that.tel = res.data.pois[0].tel;
              console.log(that.tel);
            }
            console.log("9999999", this.name);
    
            that.init();
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    
    //地图函数
    init: function() {
      let that = this;
      console.log(typeof that.location);
      MapLoader().then(AMap => {
        that.map = new AMap.Map("container", {
          center: that.location, //需求的城市的经度和 纬度
          resizeEnable: true,
          zoom: 18
        });
        //
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.OverView"],
          function() {
            that.map.addControl(
              new AMap.ToolBar({
                // 简易缩放模式，默认为 false
                liteStyle: true
              })
            );
            that.map.addControl(new AMap.ToolBar());
            that.map.addControl(new AMap.Scale());
            that.map.addControl(new AMap.OverView());
            enableHighAccuracy: true;
            zoomToAccuracy: true;
          }
        );
        console.log(this.location);
    
        var m1 = new AMap.Marker({
          position: this.location,
          icon: "",
          zoom: 20
        });
        that.map.add(m1);
        //测试
        console.log("测试");
        var info = [];
        console.log("9999999", that.name);
        info.push(that.name);
        info.push(that.tel);
        info.push(that.addressamp);
        console.log(info);
    
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(8, -28),
          content: info.join("<br>")
        });
        infoWindow.open(that.map, that.location);
        // 设置点标记的动画效果，此处为弹跳效果
        m1.setAnimation("AMAP_ANIMATION_BOUNCE");
      });
    },
    // 地图确定
    maplnglat() {
      var left = this.location.splice(0, 1);
      console.log(this.location);
    
      var right = this.location;
      console.log(typeof left);
      console.log(right);
      this.lng = String(left);
      this.lat = String(right);
      this.mapShow = false;
    },
    // 点击生成
    Postershb(id) {
      console.log("22", id);
      this.imgid = id
      
         Posters(this.imgid)
        .then(res => {
          this.path = res.data.path; //地址链接路径
          this.bgsrc = res.data.bg_img; // 图片链接
           this.flag = false;
                    this.bgsrc = this.bgsrc
                    this.$nextTick(() => {
                              this.flag = true;
                               })
        })
        .catch(err => {
          console.log(err);
        });
      this. Postersdialog = true
    },
      }
    };
    </script>
    <style lang='scss'>
    .el-dialog{
    .el-dialog__body{
      .container{
    img{
      height: 30rem;
      width:24rem;
    }
      }
    }
    
    }
    
    
    </style>
    <style rel="stylesheet/scss" lang="scss" scoped>
    .container{
      height: 100%;
      width: 100%;
    }
    
    .el-form-item__content {
      margin: 0;
    }
    
    .bjxiugai {
      float: left;
    }
    .tianjia {
      margin-bottom: 20px;
      text-align: center;
    }
    .sousuo {
      display: flex;
      justify-content: space-between;
      width: 400px;
    }
    .avatar-uploader {
      height: 100px;
      width: 100px;
      border: 1px solid #f2f2f2;
    }
    .avatar {
      width: 100%;
      height: 100px;
      overflow: hidden;
    }
    
    .el-icon-plus {
      width: 100px;
      text-align: center;
      line-height: 100px;
    }
    /deep/ .el-dialog__body{
      padding: 10px 20px 42px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    }
    .el-dialog__body{
      padding: 10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    }
    </style>

    <template>
      <div class="container">
    <img v-if="posterDataUrl" :src="posterDataUrl" style="width:300px;height:720px" />
    
    <div id="poster" v-show="!posterDataUrl" style="position: relative;width:300px;height:720px">
      <img class="poster-bg" crossorigin="Anonymous" :src="`${bgsrc}?v=${Math.random()}`" />
       
      <!-- 阿里云图片跨域需要img需要增加crossorigin="Anonymous"   图片路径需要加上随机数，表示不从缓存取资源，不加上和Anonymous有冲突 -->
      <canvas class="poster-qr" id="qrCode-canvas" style="z-index: 1"></canvas>
    </div>
       
    <el-button type="primary" @click="handleConfirm">下载</el-button>
      </div>
    </template>
    
    <script>
    // npm i qrcode --save
    import QRCode from "qrcode";
    // npm i html2canvas --save
    import html2canvas from "html2canvas";
    export default {
      name: "pro",
      props: {
    bgsrc: {
      type: String,
      required: true
    },
    path:{
      type: String,
      required: true
    }
      },
      data() {
    return {
      posterDataUrl: "",
      list: "",
    };
      },
     
      mounted() {
    setTimeout(() => {
      this.set();
    }, 100);
      },
      methods: {
       
    //延迟 让二维码图片加载完
    set() {
      this.posterDataUrl = "";
      setTimeout(() => {
        this.createQRCode();
      }, 1000);
    },
    createQRCode() {
      let canvas = document.getElementById("qrCode-canvas");
      // 绘画出二维码
      QRCode.toCanvas(
        canvas,
        this.path,
        {
          margin: 2,
          width: 120,
          height: 120
        },
        error => {
          if (error) {
            console.log(error);
          } else {
            window.pageYOffset = 0; //解决截图不全问题
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            html2canvas(document.getElementById("poster"), {
              useCORS: true, //（图片跨域相关）
              allowTaint: false //允许跨域（图片跨域相关）
            }).then(canvas => {
              this.posterDataUrl = canvas.toDataURL();
            });
          }
        }
      );
    },
    downloadCodeImg() {
      console.log("下载图片");
      var a = document.createElement("a");
      a.download = name || "pic"; // 设置图片地址
      a.href = this.posterDataUrl;
      a.click();
    },
    
    handleConfirm() {
      console.log("333");
      this.downloadCodeImg();
    }
      }
    };
    </script>
    <style >
    * {
      margin: 0;
      padding: 0;
    }
    </style>
    <style scoped>
    .container {
      padding-bottom: 50px;
      font-size: 0;
      width: 320px;
      height: 740px;
    }
    
    .poster-bg {
      position: relative;
      max-width: 100vw;
      width: 300px;
      height: 720px;
    }
    .poster-qr {
      position: absolute;
      bottom: 300px;
      left: 50%;
      transform: translateX(-50%);
    }
    .poster-head {
      width: 100%;
      position: absolute;
      top: 50px;
      text-align: center;
      z-index: 1;
      font-size: 14px;
      color: #fff;
    }
    .poster-head img {
      width: 100px;
      border-radius: 50%;
    }
    .el-button--primary {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      margin-top: 13px;
    }
    </style>