小程序客服图片报警处理,瀑布流重构

pull/8/head
kele 2023-07-14 11:14:26 +08:00
parent 5c3f0ab2f3
commit d4ef49b913
4 changed files with 41 additions and 20 deletions

View File

@ -495,9 +495,9 @@
});
chat.showTools = false;
// scrollBottom();
setTimeout(()=>{
setTimeout(() => {
chat.msg = '';
},100)
}, 100);
}
//
@ -546,7 +546,7 @@
let emojiFile = selEmojiFile(item);
newData = newData.replace(
item,
`<img class="chat-img" style="width:25px;height:25px;margin:0 3px" src="${sheep.$url.cdn(
`<img class="chat-img" src="${sheep.$url.cdn(
'/static/img/chat/emoji/' + emojiFile,
)}"/>`,
);
@ -587,6 +587,7 @@
background-size: 750rpx 100%;
z-index: 1;
}
.chat-wrap {
// :deep() {
// .ui-navbar-box {
@ -701,10 +702,12 @@
background: #fff;
color: #333;
}
:deep() {
.imgred {
width: 100%;
}
.imgred,
img {
width: 100%;
@ -852,3 +855,16 @@
}
}
</style>
<style>
.chat-img {
width: 25px;
height: 25px;
margin: 0 3px;
}
.full-img {
object-fit: cover;
width: 100px;
height: 100px;
border-radius: 6px;
}
</style>

View File

@ -494,7 +494,7 @@ export function useChatWebSocket(socketConfig) {
const img = await readImg(file);
const blob = await compressImg(img, file.type);
const { data } = await upload(file.name, blob);
let image = `<img src='${data.fullurl}' style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
let image = `<img class="full-url" src='${data.fullurl}'>`;
document.execCommand('insertHTML', false, image);
} else {
document.execCommand('insertHTML', false, paste.getData('text'));
@ -516,7 +516,7 @@ export function useChatWebSocket(socketConfig) {
const img = await readImg(file);
const blob = await compressImg(img, file.type);
const { data } = await upload(file.name, blob);
let image = `<img src='${data.fullurl}' style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
let image = `<img class="full-url" src='${data.fullurl}' >`;
document.execCommand('insertHTML', false, image);
} else {
ElMessage({
@ -818,4 +818,4 @@ export function useChatWebSocket(socketConfig) {
showTime,
formatTime,
};
}
}

View File

@ -65,12 +65,7 @@
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
</view>
<image
class="md-img-box"
:src="sheep.$url.cdn(data.image)"
mode="widthFix"
@load="calculatePanelHeight"
></image>
<image class="md-img-box" :src="sheep.$url.cdn(data.image)" mode="widthFix"></image>
<view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId"
@ -296,7 +291,7 @@
* @event {Function()} click - 点击卡片
*
*/
import { computed, reactive, getCurrentInstance } from 'vue';
import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
import sheep from '@/sheep';
import { formatSales } from '@/sheep/hooks/useGoods';
import { formatStock } from '@/sheep/hooks/useGoods';
@ -417,23 +412,32 @@
emits('click');
};
//
//
const { proxy } = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function calculatePanelHeight(e) {
function getGoodsPriceCardWH() {
if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy);
view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
view.exec((data) => {
let totalHeight = 0;
const goodsPriceCard = data[0];
const card = {
width: goodsPriceCard.width,
height: (goodsPriceCard.width / e.detail.width) * e.detail.height + goodsPriceCard.height,
};
emits('getHeight', card.height);
if (props.data.image_wh) {
totalHeight =
(goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
goodsPriceCard.height;
} else {
totalHeight = goodsPriceCard.width;
}
emits('getHeight', totalHeight);
});
}
}
onMounted(() => {
nextTick(() => {
getGoodsPriceCardWH();
});
});
</script>
<style lang="scss" scoped>

View File

@ -20,6 +20,7 @@
height: poster.height + 'px',
width: poster.width + 'px',
}"
:show-menu-by-longpress="true"
></image>
<canvas
class="hideCanvas"