diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts index 5f3aba8..4997cd0 100644 --- a/src/store/globalConfig.ts +++ b/src/store/globalConfig.ts @@ -8,6 +8,7 @@ export const useGlobalConfig = defineStore('global', { globalConfig: { rowCount: 17, isSHowPrizeList: true, + isShowAvatar: true, topTitle: '大明内阁六部御前奏对', theme: { name: 'dracula', @@ -93,8 +94,11 @@ export const useGlobalConfig = defineStore('global', { // 获取是否显示奖品列表 getIsShowPrizeList(state) { return state.globalConfig.isSHowPrizeList; + }, + // 获取是否显示头像 + getIsShowAvatar(state) { + return state.globalConfig.isShowAvatar; } - }, actions: { // 设置rowCount @@ -207,12 +211,17 @@ export const useGlobalConfig = defineStore('global', { // 设置是否显示奖品列表 setIsShowPrizeList(isShowPrizeList: boolean) { this.globalConfig.isSHowPrizeList = isShowPrizeList; + }, + // 设置是否显示头像 + setIsShowAvatar(isShowAvatar: boolean) { + this.globalConfig.isShowAvatar = isShowAvatar; }, // 重置所有配置 reset() { this.globalConfig = { rowCount: 17, isSHowPrizeList: true, + isShowAvatar: false, topTitle: '大明内阁六部御前奏对', theme: { name: 'dracula', diff --git a/src/style/style.scss b/src/style/style.scss index e63c306..ec96d54 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -21,6 +21,14 @@ z-index: 2; } + .card-avatar-name{ + top: auto; + bottom: 0; + left: 0px; + right: 0; + line-height: 2 !important; + } + .card-detail { position: absolute; left: 0; diff --git a/src/views/Config/Global/FaceConfig.vue b/src/views/Config/Global/FaceConfig.vue index 8bb5f16..f377160 100644 --- a/src/views/Config/Global/FaceConfig.vue +++ b/src/views/Config/Global/FaceConfig.vue @@ -13,7 +13,7 @@ import PatternSetting from './components/PatternSetting.vue' const globalConfig = useStore().globalConfig const personConfig = useStore().personConfig const prizeConfig= useStore().prizeConfig -const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList } = storeToRefs(globalConfig) +const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig) const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig) const colorPickerRef = ref() const resetDataDialogRef=ref() @@ -30,6 +30,7 @@ const cardSizeValue = ref(structuredClone(cardSize.value)) const textSizeValue = ref(structuredClone(textSize.value)) const rowCountValue = ref(structuredClone(rowCount.value)) const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value)) +const isShowAvatarValue = ref(structuredClone(isShowAvatar.value)) const patternColorValue = ref(structuredClone(patternColor.value)) const themeList = ref(Object.keys(daisyuiThemes)) const daisyuiThemeList = ref(daisyuiThemes) @@ -142,9 +143,12 @@ watch(textColorValue, (val: string) => { watch(cardSizeValue, (val: { width: number; height: number; }) => { globalConfig.setCardSize(val) }, { deep: true }), - watch(isShowPrizeListValue, () => { - globalConfig.setIsShowPrizeList(isShowPrizeListValue.value) - }) +watch(isShowPrizeListValue, () => { + globalConfig.setIsShowPrizeList(isShowPrizeListValue.value) +}) +watch(isShowAvatarValue, () => { + globalConfig.setIsShowAvatar(isShowAvatarValue.value) +}) onMounted(() => { }) @@ -288,6 +292,14 @@ onMounted(() => { class="mt-2 border-solid checkbox checkbox-secondary border-1" /> + + diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue index 1e223b2..ce5b9fb 100644 --- a/src/views/Home/index.vue +++ b/src/views/Home/index.vue @@ -31,7 +31,7 @@ const prizeConfig = useStore().prizeConfig const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig) const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig) -const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig) +const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig) const tableData = ref([]) // const tableData = ref(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value)))) const currentStatus = ref(0) // 0为初始状态, 1为抽奖准备状态,2为抽奖中状态,3为抽奖结束状态 @@ -119,24 +119,28 @@ const init = () => { const number = document.createElement('div'); number.className = 'card-id'; number.textContent = tableData.value[i].uid; + if(isShowAvatar.value) number.style.display = 'none' element.appendChild(number); const symbol = document.createElement('div'); symbol.className = 'card-name'; symbol.textContent = tableData.value[i].name; + if(isShowAvatar.value) symbol.className = 'card-name card-avatar-name' element.appendChild(symbol); const detail = document.createElement('div'); detail.className = 'card-detail'; detail.innerHTML = `${tableData.value[i].department}
${tableData.value[i].identity}`; + if(isShowAvatar.value) detail.style.display = 'none' element.appendChild(detail); - + const avatar = document.createElement('img'); avatar.className = 'card-avatar'; avatar.src = tableData.value[i].avatar; avatar.alt = 'avatar'; avatar.style.width = '140px'; avatar.style.height = '140px'; + if(!isShowAvatar.value) avatar.style.display = 'none' element.appendChild(avatar); element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)