11 changed files with 1044 additions and 552 deletions
-
43src/api/digitalScreen/index.js
-
BINsrc/assets/images/screen/screen5.png
-
34src/assets/styles/digitalScreen.scss
-
10src/views/components/upload.vue
-
1018src/views/digitalScreen/index.vue
-
59src/views/digitalScreen/module/addBookDialog.vue
-
84src/views/digitalScreen/module/advSetting.vue
-
101src/views/digitalScreen/module/areaSetting.vue
-
41src/views/digitalScreen/module/bookRecommend.vue
-
1src/views/digitalScreen/module/mediaSetting.vue
-
205src/views/digitalScreen/module/wecharQrCode.vue
|
Before Width: 1920 | Height: 1080 | Size: 985 KiB After Width: 3556 | Height: 2000 | Size: 292 KiB |
1018
src/views/digitalScreen/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<div class="config-item"> |
|||
<div class="config-item-main"> |
|||
<span class="data-title">二维码</span> |
|||
<div class="upload-item" style="margin-bottom: 20px;"> |
|||
<p>公众号二维码</p> |
|||
<div style="display: flex; justify-content: flex-start;"> |
|||
<div class="image-container"> |
|||
<div v-if="isLoading" class="image-loading"> |
|||
<div class="spinner" /> |
|||
<span class="loading-text">加载中...</span> |
|||
</div> |
|||
<img |
|||
v-show="!isLoading || imageError" |
|||
:key="imageKey" |
|||
style="display: block; height: 120px; margin-right: 15px; transition: opacity 0.3s ease-in-out;" |
|||
:src="currentQrCodeUrl" |
|||
:class="{ 'image-loaded': !isLoading && currentQrCodeUrl }" |
|||
alt="公众号二维码" |
|||
@load="handleImageLoad" |
|||
@error="handleImageError" |
|||
> |
|||
<!-- 错误提示 --> |
|||
<div v-if="imageError" class="image-error"> |
|||
<i class="iconfont icon-error" /> |
|||
<span>加载失败</span> |
|||
</div> |
|||
</div> |
|||
<UploadCover upload-type="other-digital" @childCover="handleCover" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="config-remarks">双击可上传图片。二维码用于“总览屏”、“媒体屏”，在任意分屏编辑均可生效！</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchEditScreenSetting } from '@/api/digitalScreen/index' |
|||
import UploadCover from '@/views/components/upload.vue' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
export default { |
|||
name: 'WecharQrCode', |
|||
components: { UploadCover }, |
|||
props: { |
|||
qrCodeUrl: { |
|||
type: String, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: '@/assets/images/cover-bg.png', |
|||
imageKey: 0, |
|||
localQrCodeUrl: null, |
|||
isLoading: false, // 加载状态 |
|||
imageError: false // 错误状态 |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['baseApi']), |
|||
currentQrCodeUrl() { |
|||
if (this.localQrCodeUrl) { |
|||
return this.localQrCodeUrl |
|||
} |
|||
if (this.qrCodeUrl) { |
|||
return this.qrCodeUrl.startsWith('http') ? this.qrCodeUrl : this.baseApi + this.qrCodeUrl |
|||
} |
|||
return this.defaultImg |
|||
} |
|||
}, |
|||
watch: { |
|||
qrCodeUrl(newVal) { |
|||
this.localQrCodeUrl = newVal |
|||
this.reloadImage() |
|||
}, |
|||
currentQrCodeUrl(newVal) { |
|||
if (newVal && newVal !== this.defaultImg) { |
|||
this.reloadImage() |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.localQrCodeUrl = this.qrCodeUrl |
|||
}, |
|||
mounted() { |
|||
this.$emit('ready') |
|||
}, |
|||
methods: { |
|||
handleCover(value) { |
|||
if (value) { |
|||
const imgUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + value |
|||
this.submitCover(imgUrl) |
|||
} else { |
|||
this.localQrCodeUrl = null |
|||
this.imageKey++ |
|||
this.isLoading = false |
|||
this.imageError = false |
|||
} |
|||
}, |
|||
submitCover(imgUrl) { |
|||
const param = { |
|||
'code': 'wechar_qr_code', |
|||
'context': imgUrl, |
|||
'remarks': null |
|||
} |
|||
FetchEditScreenSetting(param) |
|||
.then(() => { |
|||
this.$message.success('公众号二维码更新成功') |
|||
this.localQrCodeUrl = imgUrl |
|||
this.reloadImage() |
|||
this.$emit('update:qrCodeUrl', imgUrl) |
|||
this.$emit('triggerInit') |
|||
}) |
|||
.catch(() => { |
|||
this.$message.error('公众号二维码更新失败') |
|||
}) |
|||
}, |
|||
reloadImage() { |
|||
this.isLoading = true |
|||
this.imageError = false |
|||
this.imageKey++ |
|||
}, |
|||
// 图片加载完成 |
|||
handleImageLoad() { |
|||
this.isLoading = false |
|||
this.imageError = false |
|||
}, |
|||
// 图片加载失败 |
|||
handleImageError() { |
|||
this.isLoading = false |
|||
this.imageError = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/digitalScreen.scss"; |
|||
.image-container { |
|||
position: relative; |
|||
min-width: 120px; |
|||
height: 120px; |
|||
// margin-right: 15px; |
|||
} |
|||
|
|||
.image-loading { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 120px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background-color: #f5f5f5; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.spinner { |
|||
width: 20px; |
|||
height: 20px; |
|||
border: 2px solid #eee; |
|||
border-top: 2px solid #0348f3; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 12px; |
|||
color: #666; |
|||
} |
|||
|
|||
.image-loaded { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.image-error { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 120px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background-color: #f5f5f5; |
|||
border-radius: 4px; |
|||
color: #ED4A41; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.image-error .icon-error { |
|||
font-size: 20px; |
|||
margin-bottom: 8px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue