116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
||
<view data-component-name="diy-kefu" class="diy-kefu" :style="style">
|
||
<view class="fui-list-group merchgroup" v-for="(item, index) in value.list" :key="index">
|
||
<view class="fui-list jump" v-if="index == 0">
|
||
<view class="fui-list-media">
|
||
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx" show-menu-by-longpress></image>
|
||
</view>
|
||
<view class="fui-list-inner">
|
||
<view class="title">
|
||
<text class="title-text" :style="{ color: item.textColor }">{{ item.title }}</text>
|
||
<view class="subtitle" :style="{ color: item.textColor }">{{ item.desc }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
|
||
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
|
||
:style="{ background: item.BtBgColor, color: item.BtColor }" @tap.stop="previewSqs()">{{ $lang('components-diy.diy-kefu.addNow') }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 客服展示
|
||
import DiyMinx from './minx.js'
|
||
export default {
|
||
name: 'diy-kefu',
|
||
props: {
|
||
value: {
|
||
type: Object
|
||
}
|
||
},
|
||
mixins: [DiyMinx],
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
};
|
||
},
|
||
created() {
|
||
// this.getDataList();
|
||
},
|
||
watch: {
|
||
// 组件刷新监听
|
||
componentRefresh: function (nval) {
|
||
// this.getDataList();
|
||
}
|
||
},
|
||
computed: {
|
||
style() {
|
||
var css = '';
|
||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||
if (this.value.elementAngle == 'round') {
|
||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||
}
|
||
return css;
|
||
}
|
||
},
|
||
methods: {
|
||
previewSqs() {
|
||
var img = this.$util.img(this.value.list[1].imageUrl)
|
||
uni.previewImage({
|
||
current: img,
|
||
urls: [img]
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 客服展示：标题/描述需要完整展示（中英文均不截断）
|
||
// 全局 .fui-list-inner .title 有 nowrap + ellipsis + overflow:hidden，这里用更高优先级的选择器覆盖
|
||
.diy-kefu {
|
||
.fui-list-group {
|
||
.fui-list {
|
||
align-items: center;
|
||
|
||
.fui-list-inner {
|
||
overflow: visible;
|
||
|
||
.title {
|
||
// 覆盖全局 nowrap + 单行省略
|
||
white-space: normal;
|
||
overflow: visible;
|
||
text-overflow: clip;
|
||
height: auto;
|
||
line-height: 1.4;
|
||
|
||
.title-text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
white-space: normal;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
white-space: normal;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |