390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
<template>
|
|
<view class="diy-merch-list">
|
|
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
|
|
<view class="merch-wrap" :style="warpCss">
|
|
<view :class="['list-wrap', value.style]" :style="warpCss">
|
|
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index"
|
|
:style="itemCss" @tap.stop="handlerClick(item)">
|
|
<view class="merch-img" @tap.stop="handlerClick(item)">
|
|
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix"
|
|
@error="imgError(index)" show-menu-by-longpress />
|
|
</view>
|
|
<view class="info-wrap">
|
|
<text class="title" :style="titleStyle(item)" @tap.stop="handlerClick(item)">{{ item.merch_name }}</text>
|
|
<text class="desc" :style="descStyle(item)">{{ item.desc }}</text>
|
|
<view class="read-wrap"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</x-skeleton>
|
|
<view v-else :style="warpCss">
|
|
<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide']">
|
|
<!-- #ifdef MP -->
|
|
<view class="uni-scroll-view-content">
|
|
<!-- #endif -->
|
|
|
|
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index"
|
|
:style="{ width: 100 / 4 + '%' }" @tap.stop="handlerClick(item)">
|
|
<view class="graphic-img" v-if="value.mode != 'text'"
|
|
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }"
|
|
@tap.stop="handlerClick(item)">
|
|
<image
|
|
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
|
|
mode="aspectFill" show-menu-by-longpress
|
|
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;" />
|
|
</view>
|
|
<text class="graphic-text"
|
|
style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);"
|
|
@tap.stop="handlerClick(item)">
|
|
{{ item.merch_name }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- #ifdef MP -->
|
|
</view>
|
|
<!-- #endif -->
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 文章
|
|
import DiyMinx from './minx.js'
|
|
export default {
|
|
name: 'diy-article',
|
|
props: {
|
|
value: {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: [
|
|
/*{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
},
|
|
{
|
|
merch_name:'品牌',
|
|
merch_image:'https://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
|
}*/
|
|
],
|
|
loading: true,
|
|
skeletonConfig: {
|
|
gridRows: 1,
|
|
gridRowsGap: '40rpx',
|
|
headWidth: '160rpx',
|
|
headHeight: '160rpx',
|
|
textRows: 2
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
mixins: [DiyMinx],
|
|
watch: {
|
|
// 组件刷新监听
|
|
componentRefresh: function (nval) {
|
|
this.getList();
|
|
}
|
|
},
|
|
computed: {
|
|
warpCss() {
|
|
var obj = '';
|
|
obj += 'background-color:' + this.value.componentBgColor + ';';
|
|
if (this.value.componentAngle == 'round') {
|
|
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
}
|
|
return obj;
|
|
},
|
|
// 子项样式
|
|
itemCss() {
|
|
var obj = '';
|
|
obj += 'background-color:' + this.value.elementBgColor + ';';
|
|
if (this.value.elementAngle == 'round') {
|
|
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
}
|
|
if (this.value.ornament.type == 'shadow') {
|
|
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
|
}
|
|
if (this.value.ornament.type == 'stroke') {
|
|
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
|
}
|
|
return obj;
|
|
}
|
|
},
|
|
methods: {
|
|
getList() {
|
|
var data = {
|
|
num: this.value.count
|
|
};
|
|
if (this.value.sources == 'diy') {
|
|
data.num = 0;
|
|
data.merch_id_arr = this.value.merchIds.toString();
|
|
}
|
|
|
|
this.$api.sendRequest({
|
|
url: '/merch/api/merch/lists',
|
|
data: data,
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
let data = res.data;
|
|
this.list = data;
|
|
}
|
|
this.loading = false;
|
|
}
|
|
});
|
|
},
|
|
toDetail(item) {
|
|
this.$util.redirectTo('/pages_promotion/merch/detail', {
|
|
merch_id: item.merch_id
|
|
});
|
|
},
|
|
imgError(index) {
|
|
if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
|
|
},
|
|
async handlerClick(item) {
|
|
await this.__$emitEvent({
|
|
eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
if (!awaitedResult) return;
|
|
this.toDetail(item);
|
|
}
|
|
})
|
|
},
|
|
// PR-DIY-MERCH-LIST-ONE-LINE (2026-09-17): 英文公司名等长标题/描述自动缩小字号, 保证单行显示(像后台预览一样一排)
|
|
// 估算宽度: CJK/全角字符按 1em, 其余(英文/数字/空格)按 0.55em; 文字区可用宽度约 500rpx
|
|
// 短文本走 CSS 默认字号, 极端超长时仍有省略号兜底
|
|
oneLineFontStyle(text, defaultSize, minSize) {
|
|
if (!text) return '';
|
|
let units = 0;
|
|
for (let i = 0; i < text.length; i++) {
|
|
units += /[\u2e80-\u9fff\uac00-\ud7af\u3000-\u303f\uff01-\uff60]/.test(text[i]) ? 1 : 0.55;
|
|
}
|
|
if (units <= 12) return '';
|
|
const size = Math.max(minSize, Math.min(defaultSize, Math.floor(500 / units)));
|
|
return 'font-size:' + size + 'rpx;';
|
|
},
|
|
titleStyle(item) {
|
|
return this.oneLineFontStyle(item.merch_name, 30, 20);
|
|
},
|
|
descStyle(item) {
|
|
return this.oneLineFontStyle(item.desc, 24, 20);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
/* 单行滑动 */
|
|
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.merch-nav {
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
&.singleSlide {
|
|
.merch-nav-item {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&.pageSlide {
|
|
position: relative;
|
|
|
|
.merch-nav-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.merch-nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 14rpx 0;
|
|
box-sizing: border-box;
|
|
|
|
.graphic-text {
|
|
padding-top: 12rpx;
|
|
line-height: 1.5;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
&.alone {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
&.text {
|
|
|
|
.graphic-text {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.graphic-img {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
font-size: 24rpx;
|
|
|
|
.tag {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -24rpx;
|
|
color: #fff;
|
|
border-radius: 24rpx;
|
|
border-bottom-left-radius: 0;
|
|
transform: scale(0.8);
|
|
padding: 8rpx 16rpx;
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 50rpx;
|
|
color: $color-sub;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.merch-wrap {
|
|
.list-wrap {
|
|
&.style-1 {
|
|
.item {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
margin-top: 24rpx;
|
|
|
|
&:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.merch-img {
|
|
margin-right: 20rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
flex: 1;
|
|
min-width: 0; /* PR-DIY-MERCH-LIST-ONE-LINE: 约束宽度让单行省略号生效 */
|
|
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// justify-content: space-between;
|
|
.desc {
|
|
color: #888;
|
|
/* PR-DIY-MERCH-LIST-ONE-LINE: 描述单行, 超出省略 */
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
// margin-bottom: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1; /* PR-DIY-MERCH-LIST-ONE-LINE: 标题一行(原为2行), 配合自适应字号保证放得下 */
|
|
-webkit-box-orient: vertical;
|
|
white-space: nowrap;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.abstract {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
.read-wrap {
|
|
display: flex;
|
|
color: #999ca7;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
line-height: 1;
|
|
|
|
text {
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 36rpx;
|
|
vertical-align: bottom;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.category-icon {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: $base-color;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.date {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |