mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-19 01:50:15 +09:00
fix: 修复loading图片地址异常问题
This commit is contained in:
小莫唐尼
parent
da141ae10a
commit
62992b2688
@ -2,14 +2,14 @@
|
|||||||
* markdown配置
|
* markdown配置
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {
|
import {getAppConfigs} from '@/config/index.js'
|
||||||
getAppConfigs
|
|
||||||
} from '@/config/index.js'
|
|
||||||
import HaloTokenConfig from '@/config/token.config.js'
|
import HaloTokenConfig from '@/config/token.config.js'
|
||||||
|
import utils from '@/utils/index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
domain: HaloTokenConfig.BASE_API,
|
domain: HaloTokenConfig.BASE_API,
|
||||||
tagStyle: {
|
tagStyle: {
|
||||||
table: `
|
table: `
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
border-collapse:collapse;
|
border-collapse:collapse;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
@ -20,17 +20,17 @@ export default {
|
|||||||
border: 1px solid #dcdcdc;
|
border: 1px solid #dcdcdc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
`,
|
`,
|
||||||
th: `
|
th: `
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-right: 1px solid var(--classE);
|
border-right: 1px solid var(--classE);
|
||||||
border-bottom: 1px solid var(--classE);
|
border-bottom: 1px solid var(--classE);
|
||||||
`,
|
`,
|
||||||
td: `
|
td: `
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-right: 1px solid var(--classE);
|
border-right: 1px solid var(--classE);
|
||||||
border-bottom: 1px solid var(--classE);
|
border-bottom: 1px solid var(--classE);
|
||||||
`,
|
`,
|
||||||
blockquote: `
|
blockquote: `
|
||||||
padding: 8px 15px;
|
padding: 8px 15px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
background: #f2f6fc;
|
background: #f2f6fc;
|
||||||
@ -39,62 +39,62 @@ export default {
|
|||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
`,
|
`,
|
||||||
ul: 'padding-left: 15px;line-height: 1.85;',
|
ul: 'padding-left: 15px;line-height: 1.85;',
|
||||||
ol: 'padding-left: 15px;line-height: 1.85;',
|
ol: 'padding-left: 15px;line-height: 1.85;',
|
||||||
li: 'margin-bottom: 12px;line-height: 1.85;',
|
li: 'margin-bottom: 12px;line-height: 1.85;',
|
||||||
h1: `
|
h1: `
|
||||||
margin: 30px 0 20px;
|
margin: 30px 0 20px;
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size:1.2em;
|
font-size:1.2em;
|
||||||
`,
|
`,
|
||||||
h2: `
|
h2: `
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 22px 0 16px;
|
margin: 22px 0 16px;
|
||||||
font-size: 1.16em;
|
font-size: 1.16em;
|
||||||
`,
|
`,
|
||||||
h3: `
|
h3: `
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 26px 0 18px;
|
margin: 26px 0 18px;
|
||||||
font-size: 1.14em;
|
font-size: 1.14em;
|
||||||
`,
|
`,
|
||||||
h4: `
|
h4: `
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.12em;
|
font-size: 1.12em;
|
||||||
`,
|
`,
|
||||||
h5: `
|
h5: `
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
`,
|
`,
|
||||||
h6: `
|
h6: `
|
||||||
color: #303133;
|
color: #303133;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
`,
|
`,
|
||||||
p: `
|
p: `
|
||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
`,
|
`,
|
||||||
'code': ` `,
|
'code': ` `,
|
||||||
strong: 'font-weight: 700;color: rgb(248, 57, 41);',
|
strong: 'font-weight: 700;color: rgb(248, 57, 41);',
|
||||||
video: 'width: 100%',
|
video: 'width: 100%',
|
||||||
},
|
},
|
||||||
containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
|
containStyle: 'font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;padding:12px;font-size: 14px;color: #606266;word-spacing: 0.8px;letter-spacing: 0.8px;border-radius: 6px;background-color:#FFFFFF;',
|
||||||
|
|
||||||
loadingGif: getAppConfigs().imagesConfig.loadingGifUrl,
|
loadingGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingGifUrl),
|
||||||
emptyGif: getAppConfigs().imagesConfig.loadingEmptyUrl,
|
emptyGif: utils.checkImageUrl(getAppConfigs().imagesConfig.loadingEmptyUrl),
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,197 +1,198 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="cache-image-wrap">
|
<view class="cache-image-wrap">
|
||||||
<view v-if="loadStatus == 'loading'" class="img-loading" :style="[imgStyle, loadStyle]">
|
<view v-if="loadStatus == 'loading'" class="img-loading" :style="[imgStyle, loadStyle]">
|
||||||
<!-- <text class="img-load-icon iconfont icon-loading"></text>
|
<!-- <text class="img-load-icon iconfont icon-loading"></text>
|
||||||
<text class="img-load-text">{{ loadText }}</text> -->
|
<text class="img-load-text">{{ loadText }}</text> -->
|
||||||
<image :src="loadingImgSrc" :style="[loadingImgStyle]" mode="aspectFit"></image>
|
<image :src="loadingImgSrc" :style="[loadingImgStyle]" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loadStatus == 'error'" class="img-error" :style="[imgStyle, loadErrStyle]">
|
<view v-if="loadStatus == 'error'" class="img-error" :style="[imgStyle, loadErrStyle]">
|
||||||
<!-- <text class="img-err-icon iconfont icon-exclamation-circle"></text>
|
<!-- <text class="img-err-icon iconfont icon-exclamation-circle"></text>
|
||||||
<text class="img-load-text">{{ loadErrText }}</text> -->
|
<text class="img-load-text">{{ loadErrText }}</text> -->
|
||||||
<image class="img-error-img" :src="loadingErrorImageSrc" mode="scaleToFill"></image>
|
<image class="img-error-img" :src="loadingErrorImageSrc" mode="scaleToFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<image v-show="loadStatus == 'success'" :src="src" @load="fnOnLoad" @error="fnOnError" :lazy-load="lazyLoad"
|
<image v-show="loadStatus == 'success'" :src="src" @load="fnOnLoad" @error="fnOnError" :lazy-load="lazyLoad"
|
||||||
:style="[imgStyle]" :mode="mode" @click="$emit('on-click', url)"></image>
|
:style="[imgStyle]" :mode="mode" @click="$emit('on-click', url)"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import imageCache from '@/utils/imageCache.js';
|
import imageCache from '@/utils/imageCache.js';
|
||||||
export default {
|
|
||||||
name: 'cache-image',
|
|
||||||
props: {
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
lazyLoad: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
loadStyle: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {
|
|
||||||
backgroundColor: '#ffffff',
|
|
||||||
color: '#333'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
loadErrStyle: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {
|
|
||||||
color: 'rgba(244, 67, 54,1)'
|
|
||||||
// backgroundColor: 'rgba(244, 67, 54,0.2)'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'aspectFill'
|
|
||||||
},
|
|
||||||
loadText: {
|
|
||||||
type: String,
|
|
||||||
default: '加载中...'
|
|
||||||
},
|
|
||||||
loadErrText: {
|
|
||||||
type: String,
|
|
||||||
default: '加载失败'
|
|
||||||
},
|
|
||||||
fileMd5: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
styles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
radius: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
imgStyle: {},
|
|
||||||
loadingImgStyle: {
|
|
||||||
width: '120rpx',
|
|
||||||
},
|
|
||||||
src: '', // 图片地址
|
|
||||||
loadStatus: 'loading'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
imagesConfig() {
|
|
||||||
return this.$tm.vx.getters().getConfigs.imagesConfig
|
|
||||||
},
|
|
||||||
loadingImgSrc() {
|
|
||||||
return this.imagesConfig.loadingGifUrl;
|
|
||||||
},
|
|
||||||
loadingErrorImageSrc() {
|
|
||||||
return this.imagesConfig.loadingErrUrl
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
// 监听图片md5值的变化
|
|
||||||
fileMd5(val) {
|
|
||||||
// 查找获取图片缓存
|
|
||||||
this.fnGetImageCache();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.imgStyle = {
|
|
||||||
width: this.width,
|
|
||||||
height: this.height,
|
|
||||||
borderRadius: this.radius,
|
|
||||||
...this.styles
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查找获取图片缓存
|
export default {
|
||||||
this.fnGetImageCache();
|
name: 'cache-image',
|
||||||
},
|
props: {
|
||||||
methods: {
|
url: {
|
||||||
// 查找获取图片缓存
|
type: String,
|
||||||
async fnGetImageCache() {
|
default: ''
|
||||||
// #ifdef APP-PLUS
|
},
|
||||||
var result = await imageCache.getImageCache(this.url, this.fileMd5);
|
lazyLoad: {
|
||||||
if (result) {
|
type: Boolean,
|
||||||
this.src = result;
|
default: true
|
||||||
} else {
|
},
|
||||||
this.src = this.url;
|
loadStyle: {
|
||||||
}
|
type: Object,
|
||||||
// #endif
|
default() {
|
||||||
// #ifndef APP-PLUS
|
return {
|
||||||
this.src = this.url;
|
backgroundColor: '#ffffff',
|
||||||
// #endif
|
color: '#333'
|
||||||
},
|
};
|
||||||
fnOnLoad() {
|
}
|
||||||
this.loadStatus = 'success';
|
},
|
||||||
},
|
loadErrStyle: {
|
||||||
fnOnError(e) {
|
type: Object,
|
||||||
this.loadStatus = 'error';
|
default() {
|
||||||
}
|
return {
|
||||||
}
|
color: 'rgba(244, 67, 54,1)'
|
||||||
};
|
// backgroundColor: 'rgba(244, 67, 54,0.2)'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'aspectFill'
|
||||||
|
},
|
||||||
|
loadText: {
|
||||||
|
type: String,
|
||||||
|
default: '加载中...'
|
||||||
|
},
|
||||||
|
loadErrText: {
|
||||||
|
type: String,
|
||||||
|
default: '加载失败'
|
||||||
|
},
|
||||||
|
fileMd5: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
radius: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgStyle: {},
|
||||||
|
loadingImgStyle: {
|
||||||
|
width: '120rpx',
|
||||||
|
},
|
||||||
|
src: '', // 图片地址
|
||||||
|
loadStatus: 'loading'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
imagesConfig() {
|
||||||
|
return this.$tm.vx.getters().getConfigs.imagesConfig
|
||||||
|
},
|
||||||
|
loadingImgSrc() {
|
||||||
|
return this.$utils.checkImageUrl(this.imagesConfig.loadingGifUrl);
|
||||||
|
},
|
||||||
|
loadingErrorImageSrc() {
|
||||||
|
return this.$utils.checkImageUrl(this.imagesConfig.loadingErrUrl)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听图片md5值的变化
|
||||||
|
fileMd5(val) {
|
||||||
|
// 查找获取图片缓存
|
||||||
|
this.fnGetImageCache();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.imgStyle = {
|
||||||
|
width: this.width,
|
||||||
|
height: this.height,
|
||||||
|
borderRadius: this.radius,
|
||||||
|
...this.styles
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查找获取图片缓存
|
||||||
|
this.fnGetImageCache();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查找获取图片缓存
|
||||||
|
async fnGetImageCache() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
var result = await imageCache.getImageCache(this.url, this.fileMd5);
|
||||||
|
if (result) {
|
||||||
|
this.src = result;
|
||||||
|
} else {
|
||||||
|
this.src = this.url;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
this.src = this.url;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
fnOnLoad() {
|
||||||
|
this.loadStatus = 'success';
|
||||||
|
},
|
||||||
|
fnOnError(e) {
|
||||||
|
this.loadStatus = 'error';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.cache-image-wrap {
|
.cache-image-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-loading,
|
.img-loading,
|
||||||
.img-error {
|
.img-error {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-load-icon {
|
.img-load-icon {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
animation: xhRote 0.8s infinite linear;
|
animation: xhRote 0.8s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-load-text {
|
.img-load-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-error {
|
.img-error {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|
||||||
&-img {
|
&-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-err-icon {
|
.img-err-icon {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes xhRote {
|
@keyframes xhRote {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user