Commit b5a6a2b7 by zhangyongfeng

增加照片导入功能

parent fea180bf
......@@ -19,3 +19,4 @@ yarn-error.log*
*.njsproj
*.sln
*.sw?
config.js
\ No newline at end of file
......@@ -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>
<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>
......@@ -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',
......
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 };
......@@ -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) {
......
......@@ -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: {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment