增加照片导入功能

zhangyongfeng
Showing 7 changed files with 466 additions and 17 deletions
.gitignore
src/App.vue
src/components/Importphoto.vue
src/components/Tool.vue
src/helper/db.js
src/helper/index.js
src/store/index.js
--- a/.gitignore
View file @b5a6a2b
+++ b/.gitignore
View file @b5a6a2b
@@ -18,4 +18,5 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
\ No newline at end of file
+*.sw?
+config.js
\ No newline at end of file
--- a/src/App.vue
View file @b5a6a2b
+++ b/src/App.vue
View file @b5a6a2b
@@ -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>
--- a/src/components/Importphoto.vue 0 → 100644
View file @b5a6a2b
+++ b/src/components/Importphoto.vue 0 → 100644
View file @b5a6a2b
+<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>
--- a/src/components/Tool.vue
View file @b5a6a2b
+++ b/src/components/Tool.vue
View file @b5a6a2b
@@ -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',
--- a/src/helper/db.js 0 → 100644
View file @b5a6a2b
+++ b/src/helper/db.js 0 → 100644
View file @b5a6a2b
+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 };
--- a/src/helper/index.js
View file @b5a6a2b
+++ b/src/helper/index.js
View file @b5a6a2b
@@ -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) {
--- a/src/store/index.js
View file @b5a6a2b
+++ b/src/store/index.js
View file @b5a6a2b
@@ -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: {},