170 lines
5.4 KiB
Vue
170 lines
5.4 KiB
Vue
|
|
|
|
<template>
|
|
<view class="hot-list">
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="main">
|
|
<view class="top" v-if="top != ''">
|
|
<view v-for="(item, index) in top" :key="index">
|
|
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" class="flex">
|
|
<view class="goods-name bold lg">{{item.title}}</view>
|
|
<view class="goods-name m-t-10">{{item.desc}}</view>
|
|
</router-link>
|
|
<view v-if="item.mall_type == 1">
|
|
<view v-if="item.shop != ''">
|
|
<scroll-view :scroll-x="true">
|
|
<view class="flex" >
|
|
<view v-for="(v, i) in item.shop" :key="i" style="width: 240rpx;height: 240rpx;margin-right: 20rpx;margin-top: 20rpx;">
|
|
<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="240rpx" height="240rpx" :border-radius="10" :src="v[0].image"></u-image>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.files != '' && item.mall_type == 0">
|
|
<view v-if="item.type == 0">
|
|
<scroll-view style="white-space: nowrap;" :scroll-x="true">
|
|
<view class="flex">
|
|
<u-image @click="preview(v.src, item.files)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="item.type == 1">
|
|
<video :src="item.files[0].src" class="thumb-video"></video>
|
|
</view>
|
|
</view>
|
|
<view class="shop m-t-20" v-if="item.shop && item.mall_type == 0">
|
|
<view class="bold">推荐商品</view>
|
|
<router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.shop_id}}" class="flex">
|
|
<view class="flex">
|
|
<u-image class="thumb" width="200rpx" height="200rpx" :border-radius="10" :src="item.shop.image"></u-image>
|
|
<view>
|
|
<view>{{item.shop.name}}</view>
|
|
<price-format :price="item.shop.min_price" :color="colorConfig.primary" :subscript-size="26" :first-size="38" :second-size="26"/>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-t-40 m-b-40">
|
|
<u-divider :color="colorConfig.normal" bg-color="transparent" :font-size="38">快讯列表</u-divider>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view v-for="(item, index) in list" :key="index">
|
|
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" class="flex">
|
|
<view class="goods-name bold lg">{{item.title}}</view>
|
|
<view class="goods-name m-t-10">{{item.desc}}</view>
|
|
</router-link>
|
|
<view v-if="item.files != ''">
|
|
<view v-if="item.type == 0">
|
|
<scroll-view style="white-space: nowrap;" :scroll-x="true">
|
|
<view class="flex">
|
|
<u-image @click="preview(v.src, item.files)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="item.type == 1">
|
|
<video :src="item.files[0].src" class="thumb-video"></video>
|
|
</view>
|
|
</view>
|
|
<view class="shop m-t-20" v-if="item.shop && item.mall_type == 0">
|
|
<view class="bold">推荐商品</view>
|
|
<router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.shop_id}}" class="flex">
|
|
<view class="flex">
|
|
<u-image class="thumb" width="200rpx" height="200rpx" :border-radius="10" :src="item.shop.image"></u-image>
|
|
<view>
|
|
<view>{{item.shop.name}}</view>
|
|
<price-format :price="item.shop.min_price" :color="colorConfig.primary" :subscript-size="26" :first-size="38" :second-size="26"/>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getMallNews
|
|
} from '@/api/store';
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data() {
|
|
return {
|
|
list: [],
|
|
top: [],
|
|
type: '',
|
|
price_type: 0
|
|
};
|
|
},
|
|
methods: {
|
|
preview(current, files) {
|
|
let f = files.map((item) => {
|
|
return item.src
|
|
})
|
|
this.$nextTick(() => {
|
|
uni.previewImage({
|
|
current,
|
|
urls: f
|
|
});
|
|
})
|
|
},
|
|
|
|
upCallback(page) {
|
|
let pageNum = page.num;
|
|
let pageSize = page.size;
|
|
const params = {
|
|
page_no: pageNum,
|
|
page_size: pageSize,
|
|
}
|
|
getMallNews(params).then(res => {
|
|
if (res.code == 1) {
|
|
this.top = res.data.top;
|
|
this.price_type = res.data.set_price_type;
|
|
let curPageData = res.data.list;
|
|
let curPageLen = curPageData.length;
|
|
let hasNext = !!res.data.more;
|
|
if (page.num == 1) {
|
|
this.list = [];
|
|
}
|
|
this.list = this.list.concat(curPageData);
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|
}
|
|
}).catch(err => {
|
|
this.mescroll.endErr()
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
.top > view,
|
|
.list > view {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.thumb {
|
|
margin-right: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.thumb-video {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
</style>
|