老师天天让发健康码拼图，于是自己决定搞个小工具，简单又省心

项目场景：
最近疫情比较频繁，时不时的就来那么一两下，隔三差五的老师就在群里要共同居住人的健康码和行程码拼图，这时候大家各显神通，有的用PS搞一搞，有的直接用手机自带的相机进行编辑，还有人用美图秀秀，但是作为一个合格的程序员天天干这样的重复性工作，我是不能忍的。
于是决定撸一个小工具，我们只要把二维码放进去，自己生成拼接好的图片

---

问题描述

开始的时候想起自己一起撸的过的一个项目可以使用Java来对照片进行各种裁剪处理，但是后来想了一下我们这么一个简单的小项目，好像根本不需要用到Java，直接JS应该就可以搞定

---

捋一下需求：

1. 用户上传自己家人的二维码
2. 工具自己生成成品（拼接多张二维码并且附加备注姓名）
3. 可以自定义成员信息(添加，删除，修改名字)
4. 因为行程码和健康码的样式差太多，所以添加备注姓名位置和样式的功能

---

开搞：

直接上源码

<template>
  <div class="main-wrapper">
    <div>
      <el-button type="primary" size="mini" @click="handleAddNew">Add New</el-button>
      <el-button type="warning" size="mini" @click="handleClear">Clear</el-button>
      <span>姓名位置: </span>
      <el-radio v-model="name_position" label="top">上</el-radio>
      <el-radio v-model="name_position" label="bottom">下</el-radio>
    </div>
    <div>
      <div v-for="(item, index) in imgs" :key="index" class="main-box">
        <span class="name" :class="name_position =='top'?'name-top':'name-bottom'">{{item.name}}</span>
        <img :src="item.img_url" class="image" v-if="item.img_url != ''">
        <div v-else style="height: 200px;">
          <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false">
            <el-button slot="trigger" size="mini" type="primary" @click="handleSelectFile(item)">select file</el-button>
            <el-button slot="tip" size="mini" type="primary" @click="handleUpdateName(item)">改名</el-button>
            <el-button slot="tip" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(item)"></el-button>
          </el-upload>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="updateBox" width="80%" title="修改姓名">
      <el-input v-model="currentCard.name" />
      <span slot="footer" class="dialog-footer">
        <el-button type="warnning" @click="updateBox=false" size="mini">close</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="addNewBox" width="80%" title="添加新对象">
      <el-input v-model="newCard.name" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" size="mini">submit</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        { name: "幼儿XX", img_url: "" },
        { name: "XX爸爸", img_url: "" },
        { name: "XX妈妈", img_url: "" },
      ],
      currentCard: {},
      newCard: {},
      updateBox: false,
      addNewBox: false,
      name_position: "top",
    };
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.currentCard.img_url = file.url;
    },
    handleSelectFile(item) {
      this.currentCard = item;
    },
    handleDelete(item) {
      let index = 0;
      for (let i = 0; i < this.imgs.length; i++) {
        if (this.imgs[i].name == item.name) {
          index = i;
        }
      }
      this.imgs.splice(index, 1);
    },
    handleUpdateName(item) {
      this.currentCard = item;
      this.updateBox = true;
    },
    handleAddNew() {
      this.newCard = { name: "", img_url: "" };
      this.addNewBox = true;
    },
    handleSubmit() {
      if (this.newCard.name != undefined && this.newCard.name != "") {
        this.imgs.push(this.newCard);
        this.newCard = {};
        this.addNewBox = false;
      } else {
        this.$message.error("姓名不能为空");
      }
    },
    handleClear() {
      this.imgs = [
        { name: "幼儿XX", img_url: "" },
        { name: "XX爸爸", img_url: "" },
        { name: "XX妈妈", img_url: "" },
      ];
    },
  },
};
</script>

<style>
.main-wrapper {
  width: 100%;
  height: 1052px;
  margin: 10px auto;
  /* border: 1px solid gray; */
}

.main-box {
  display: inline-block;
  width: 33%;
  min-height: 100px;
}

.main-box .image {
  width: 100%;
}

.main-box .name {
  position: relative;
  color: red;
  font-size: 1em;
  font-weight: 500;
}
.main-box .name-top {
  left: 35%;
  top: 6vh;
  color: red;
}

.main-box .name-bottom {
  left: 22%;
  top: 28vh;
  color: black;
}
</style>

成品预览：

1. 初始化状态

2. 健康码拼图预览

结语：

搞完以后截图发给老师，美滋滋