增加照片导入功能

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+config.js
\ No newline at end of file

src/App.vue

@@ -21,6 +21,7 @@
             }"
           >
             {{ item.name ? item.name : item.key }}
+            <img v-if="item.photo" :src="item.photo" :width="50" :height="50" />
           </a>
         </li>
       </ul>
@@ -34,26 +35,17 @@
             :key="item"
             class="itemres"
             :style="resCardStyle"
+            :data-id="item"
             @click="showRes = false"
           >
             <span
-              class="key"
-              :style="{
-                fontSize: list[item - 1] && list[item - 1].name ? '36px' : null,
-                lineHeight:
-                  list[item - 1] && list[item - 1].name ? '80px' : null
-              }"
-              v-if="list[item - 1] && list[item - 1].name"
-            >
-              {{ item }}
-            </span>
-            <span
               class="cont"
               :style="{
                 fontSize: list[item - 1] && list[item - 1].name ? '36px' : null,
                 lineHeight:
                   list[item - 1] && list[item - 1].name ? '80px' : null
               }"
+              v-if="!photos.find(d => d.id === item)"
             >
               <span v-if="list[item - 1] && list[item - 1].name">
                 {{ list[item - 1].name }}
@@ -62,6 +54,13 @@
                 {{ item }}
               </span>
             </span>
+            <img
+              v-if="photos.find(d => d.id === item)"
+              :src="photos.find(d => d.id === item).value"
+              alt="photo"
+              :width="160"
+              :height="160"
+            />
           </span>
         </div>
       </div>
@@ -71,6 +70,7 @@
     <Tool
       @toggle="toggle"
       @resetConfig="reloadTagCanvas"
+      @getPhoto="getPhoto"
       :running="running"
       :closeRes="closeRes"
     />
@@ -95,6 +95,7 @@ import {
 } from '@/helper/index';
 import { luckydrawHandler } from '@/helper/algorithm';
 import Result from '@/components/Result';
+import { database, DB_STORE_NAME } from '@/helper/db';
 export default {
   name: 'App',
 
@@ -143,15 +144,20 @@ export default {
       const datas = [];
       for (let index = 1; index <= this.config.number; index++) {
         const listData = this.list.find(d => d.key === index);
+        const photo = this.photos.find(d => d.id === index);
         datas.push({
           key: index,
-          name: listData ? listData.name : ''
+          name: listData ? listData.name : '',
+          photo: photo ? photo.value : ''
         });
       }
       return datas;
     },
     categoryName() {
       return conversionCategoryName(this.category);
+    },
+    photos() {
+      return this.$store.state.photos;
     }
   },
   created() {
@@ -192,10 +198,30 @@ export default {
       category: ''
     };
   },
+  watch: {
+    photos: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.reloadTagCanvas();
+        });
+      }
+    }
+  },
   mounted() {
     this.startTagCanvas();
+    setTimeout(() => {
+      this.getPhoto();
+    }, 1000);
   },
   methods: {
+    getPhoto() {
+      database.getAll(DB_STORE_NAME).then(res => {
+        if (res && res.length > 0) {
+          this.$store.commit('setPhotos', res);
+        }
+      });
+    },
     speed() {
       return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
     },
@@ -323,7 +349,7 @@ export default {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 1000px;
+  width: 1280px;
   transform: translateX(-50%) translateY(-50%);
   text-align: center;
   p {
@@ -345,15 +371,29 @@ export default {
     line-height: 160px;
     font-weight: bold;
     margin-right: 20px;
-    margin-top: 20px;
+    margin-top: 70px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    position: relative;
     .key {
       color: red;
     }
+    &::before {
+      content: attr(data-id);
+      width: 70px;
+      height: 50px;
+      background-color: #fff;
+      position: absolute;
+      top: -50px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 30px;
+      line-height: 50px;
+      border-radius: 50%;
+    }
   }
 }
 </style>

src/components/Importphoto.vue

+<template>
+  <el-dialog
+    :visible="visible"
+    :append-to-body="true"
+    width="300px"
+    @close="$emit('update:visible', false)"
+    class="c-Importphoto"
+  >
+    <el-row>
+      <label for="idinput">抽奖号码</label>
+      <el-input
+        id="idinput"
+        size="mini"
+        type="number"
+        v-model="id"
+        :min="0"
+        :max="config.number"
+      ></el-input>
+    </el-row>
+    <el-row>
+      <label for="idinput">照片选择</label>
+      <span class="selectbg" :data-tip="filename">
+        <input
+          ref="uploadinput"
+          class="upload"
+          type="file"
+          accept=".jpg,.png"
+          @change="inputChange"
+        />
+      </span>
+    </el-row>
+    <el-row class="photo">
+      <label>已选照片</label>
+      <img v-if="value" :src="value" alt="img" :width="140" :height="140" />
+      <span v-else>暂未选择</span>
+    </el-row>
+    <el-row class="center">
+      <el-button size="mini" type="primary" @click="saveHandler"
+        >保存</el-button
+      >
+      <el-button size="mini" @click="$emit('update:visible', false)"
+        >取消</el-button
+      >
+    </el-row>
+  </el-dialog>
+</template>
+<script>
+import { database, DB_STORE_NAME } from '@/helper/db';
+
+export default {
+  name: 'Importphoto',
+  props: {
+    visible: Boolean
+  },
+  computed: {
+    config: {
+      get() {
+        return this.$store.state.config;
+      }
+    }
+  },
+  data() {
+    return {
+      id: 0,
+      value: '',
+      filename: '点击选择照片'
+    };
+  },
+  methods: {
+    inputChange(e) {
+      const fileList = e.target.files;
+      const formData = new FormData();
+      formData.append('uploadImg', fileList[0]);
+      const reader = new FileReader();
+      const AllowImgFileSize = 1024 * 1024;
+      const file = fileList[0];
+      if (file) {
+        this.filename = file.name;
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          if (
+            AllowImgFileSize != 0 &&
+            AllowImgFileSize < reader.result.length
+          ) {
+            return this.$message.error('不允许上传大于1M的图片');
+          } else {
+            this.value = reader.result;
+          }
+        };
+      }
+    },
+    async saveHandler() {
+      const { id, value } = this;
+      const ID = Number(id);
+      if (!ID || ID <= 0) {
+        return this.$message.error('号码必须大于0的整数');
+      }
+      if (!value) {
+        return this.$message.error('请选择照片');
+      }
+      const Data = await database.get(DB_STORE_NAME, ID);
+      const param = {
+        id: ID,
+        value
+      };
+      database[Data ? 'edit' : 'add'](
+        DB_STORE_NAME,
+        Data ? ID : param,
+        Data ? param : null
+      )
+        .then(res => {
+          if (res) {
+            this.$refs.uploadinput.value = '';
+            this.value = '';
+            this.filename = '点击选择照片';
+            this.$emit('update:visible', false);
+            this.$emit('getPhoto');
+            this.$message({
+              message: '保存成功',
+              type: 'success'
+            });
+          } else {
+            this.$message.error('保存失败');
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message);
+        });
+    }
+  }
+};
+</script>
+<style lang="scss">
+.c-Importphoto {
+  .el-dialog {
+    height: 330px;
+  }
+  label {
+    margin-right: 20px;
+    vertical-align: top;
+  }
+  .el-input {
+    width: 140px;
+  }
+  .el-row {
+    padding: 5px 0;
+  }
+  .center {
+    text-align: center;
+  }
+  .selectbg {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    width: 140px;
+    height: 28px;
+    position: relative;
+    box-sizing: border-box;
+    &::before {
+      content: attr(data-tip);
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      line-height: 28px;
+      cursor: pointer;
+      overflow: hidden;
+      font-size: 12px;
+    }
+    .upload {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      z-index: 10;
+      cursor: pointer;
+    }
+  }
+  .photo {
+    img {
+      border: 1px solid #ccc;
+    }
+    span {
+      display: inline-block;
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      width: 140px;
+      height: 140px;
+      line-height: 140px;
+      text-align: center;
+      position: relative;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/components/Tool.vue

@@ -9,6 +9,9 @@
     <el-button size="mini" @click="showImport = true">
       导入名单
     </el-button>
+    <el-button size="mini" @click="showImportphoto = true">
+      导入照片
+    </el-button>
     <el-dialog
       :append-to-body="true"
       :visible.sync="showSetwat"
@@ -97,11 +100,17 @@
         <el-button size="mini" @click="showImport = false">取消</el-button>
       </div>
     </el-dialog>
+    <Importphoto
+      :visible.sync="showImportphoto"
+      @getPhoto="$emit('getPhoto')"
+    ></Importphoto>
   </div>
 </template>
 
 <script>
 import { clearData, conversionCategoryName } from '@/helper/index';
+import Importphoto from './Importphoto';
+import { database, DB_STORE_NAME } from '@/helper/db';
 
 export default {
   props: {
@@ -143,10 +152,12 @@ export default {
       return options;
     }
   },
+  components: { Importphoto },
   data() {
     return {
       showSetwat: false,
       showImport: false,
+      showImportphoto: false,
       form: {
         category: '',
         mode: 1,
@@ -166,6 +177,7 @@ export default {
         .then(() => {
           clearData();
           this.$store.commit('setClearStore');
+          database.clear(DB_STORE_NAME);
           this.closeRes && this.closeRes();
           this.$message({
             type: 'success',

src/helper/db.js

+const DB_STORE_NAME = 'luckydraw.GuaranteeTransaction';
+let objectStore;
+const createObjectStore = db => {
+  objectStore = db.createObjectStore(DB_STORE_NAME, {
+    keyPath: 'id',
+    autoIncrement: true
+  });
+  objectStore.createIndex('id', 'id', {
+    unique: true
+  });
+  objectStore.createIndex('name', 'name');
+};
+
+const createObjectStoreOrder = db => {
+  if (!db.objectStoreNames.contains(DB_STORE_NAME)) {
+    createObjectStore(db);
+  } else {
+    db.deleteObjectStore(DB_STORE_NAME);
+    createObjectStore(db);
+  }
+};
+
+const DBVERSION = 1;
+const DBNAME = 'luckydraw';
+// 数据库：IDBDatabase 对象
+// 对象仓库：IDBObjectStore 对象
+// 索引： IDBIndex 对象
+// 事务： IDBTransaction 对象
+// 操作请求：IDBRequest 对象
+// 指针： IDBCursor 对象
+// 主键集合：IDBKeyRange 对象
+let db;
+class LuckydrawIndecDB {
+  constructor() {
+    this.InitIndexedDB();
+  }
+  add = (TableName, newItem) => {
+    const addInfo = {
+      createdTime: Date.now(),
+      updateTime: Date.now()
+    };
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([TableName], 'readwrite');
+      const objectStore = transaction.objectStore(TableName);
+      const objectStoreRequest = objectStore.add(
+        Object.assign({}, addInfo, newItem)
+      );
+      objectStoreRequest.onsuccess = () => {
+        resolve(true);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error.target.error);
+      };
+    });
+  };
+  edit = (TableName, id, data) => {
+    const editInfo = {
+      updateTime: Date.now()
+    };
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([TableName], 'readwrite');
+      const objectStore = transaction.objectStore(TableName);
+      const objectStoreRequest = objectStore.get(id);
+      objectStoreRequest.onsuccess = () => {
+        const myRecord = objectStoreRequest.result;
+        for (const key in data) {
+          if (typeof myRecord[key] !== 'undefined') {
+            myRecord[key] = data[key];
+          }
+        }
+        const objectStoreRequestGetRes = objectStore.put(
+          Object.assign({}, myRecord, editInfo)
+        );
+        objectStoreRequestGetRes.onsuccess = () => {
+          resolve(true);
+        };
+        objectStoreRequestGetRes.onerror = error => {
+          reject(error);
+        };
+      };
+    });
+  };
+  del = (TableName, id) => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db
+        .transaction([TableName], 'readwrite')
+        .objectStore(TableName);
+      const objectStoreRequest = objectStore.delete(id);
+      objectStoreRequest.onsuccess = () => {
+        resolve(true);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  clear = TableName => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db
+        .transaction([TableName], 'readwrite')
+        .objectStore(TableName);
+      const objectStoreRequest = objectStore.clear();
+      objectStoreRequest.onsuccess = () => {
+        resolve(true);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  count = TableName => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db
+        .transaction([TableName], 'readwrite')
+        .objectStore(TableName);
+      const objectStoreRequest = objectStore.count();
+      objectStoreRequest.onsuccess = () => {
+        resolve(objectStoreRequest.result);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  get = (TableName, id) => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db.transaction(TableName).objectStore(TableName);
+      const objectStoreRequest = objectStore.get(id);
+      objectStoreRequest.onsuccess = () => {
+        resolve(objectStoreRequest.result);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  getKey = (TableName, key) => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db.transaction(TableName).objectStore(TableName);
+      const objectStoreRequest = objectStore.getKey(key);
+      objectStoreRequest.onsuccess = () => {
+        resolve(objectStoreRequest.result);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  getAll = TableName => {
+    return new Promise((resolve, reject) => {
+      const objectStore = db.transaction(TableName).objectStore(TableName);
+      const objectStoreRequest = objectStore.getAll();
+      objectStoreRequest.onsuccess = () => {
+        resolve(objectStoreRequest.result);
+      };
+      objectStoreRequest.onerror = error => {
+        reject(error);
+      };
+    });
+  };
+
+  onerror = event => {
+    console.log('db-connection-fail', event);
+  };
+  InitIndexedDB = () => {
+    const DBOpenRequest = window.indexedDB.open(DBNAME, DBVERSION);
+    // 数据库打开失败
+    DBOpenRequest.onerror = event => {
+      this.onerror(event);
+    };
+
+    DBOpenRequest.onsuccess = () => {
+      // 存储数据结果
+      db = DBOpenRequest.result;
+      console.log('db-connection-success');
+    };
+
+    DBOpenRequest.onupgradeneeded = () => {
+      db = event.target.result;
+      createObjectStoreOrder(db);
+    };
+  };
+}
+
+const database = new LuckydrawIndecDB();
+
+export { LuckydrawIndecDB, database, DB_STORE_NAME };

src/helper/index.js

@@ -37,7 +37,6 @@ export const configField = 'config'; // 配置数据
 export const resultField = 'result'; // 抽奖结果
 export const newLotteryField = 'newLottery'; // 新增奖项
 export const listField = 'list'; // 名单
-
 export function conversionCategoryName(key) {
   let name = '';
   switch (key) {

src/store/index.js

@@ -30,7 +30,8 @@ export default new Vuex.Store({
       fifthPrize: []
     },
     newLottery: [],
-    list: []
+    list: [],
+    photos: []
   },
   mutations: {
     setClearStore(state) {
@@ -54,6 +55,7 @@ export default new Vuex.Store({
       };
       state.newLottery = [];
       state.list = [];
+      state.photos = [];
     },
     setConfig(state, config) {
       state.config = config;
@@ -83,6 +85,9 @@ export default new Vuex.Store({
       state.list = arr;
 
       setData(listField, arr);
+    },
+    setPhotos(state, photos) {
+      state.photos = photos;
     }
   },
   actions: {},