143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<template>
|
|
<view class="mall bg-white">
|
|
<view v-if="list" class="mall-block">
|
|
<swiper class="swiper" :autoplay="true" style="height: 200rpx;">
|
|
<swiper-item class="item bg-white flex" v-for="(item, index) in list" :key="index">
|
|
<view class="flex-1">
|
|
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" v-if="item.mall_type == 0">
|
|
<view v-if="item.files != ''">
|
|
<view v-if="item.type == 0">
|
|
<u-image class="thumb" width="100%" height="100" :border-radius="10" :src="item.files[0].src"></u-image>
|
|
</view>
|
|
<view v-if="item.type == 1">
|
|
<video :src="item.files[0].src" class="thumb-video"></video>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="goods-name line-2 bold sm">{{item.title}}</view>
|
|
</router-link>
|
|
|
|
<view v-if="item.mall_type == 1">
|
|
<view v-if="item.shop != ''">
|
|
<scroll-view :scroll-x="true">
|
|
<view class="flex w-80">
|
|
<view v-for="(v, i) in item.shop" :key="i" class="shop-block">
|
|
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: v[0].mall_news_shop_id, mall_type: 1}}">
|
|
<u-image class="thumb" :width="width" :height="width" :border-radius="10" :src="v[0].image"></u-image>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="goods-name line-2 bold sm">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- <router-link :to="'/bundle_b/pages/mall_news/index'">
|
|
<view class="xs flex row-center more">查看更多 <u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</router-link> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "mall-news",
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => ([])
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
width: '240rpx'
|
|
};
|
|
},
|
|
methods: {
|
|
preview(current, files) {
|
|
let f = files.map((item) => {
|
|
return item.src
|
|
})
|
|
this.$nextTick(() => {
|
|
uni.previewImage({
|
|
current,
|
|
urls: f
|
|
});
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mall {
|
|
border-radius: 14rpx;
|
|
overflow: hidden;
|
|
|
|
.time-item {
|
|
display: inline-flex;
|
|
width: 160rpx;
|
|
height: 100%;
|
|
|
|
&.active {
|
|
.time {
|
|
color: $-color-primary;
|
|
}
|
|
|
|
.state {
|
|
color: $-color-white;
|
|
background-color: $-color-primary;
|
|
}
|
|
}
|
|
|
|
.state {
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.mall-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mall-block .item {
|
|
// padding: 20rpx;
|
|
.border-btn {
|
|
border: 1px solid $-color-primary;
|
|
color: $-color-primary;
|
|
}
|
|
}
|
|
|
|
.more {
|
|
height: 80rpx;
|
|
border-top: $-solid-border;
|
|
}
|
|
|
|
.thumb {
|
|
margin-right: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.thumb-video {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.shop-block {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
margin-right: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.w-80 {
|
|
width: 80vw;
|
|
}
|
|
}
|
|
</style>
|