363 lines
8.3 KiB
Vue
363 lines
8.3 KiB
Vue
<template>
|
||
<view class="waterfall">
|
||
<uv-waterfall ref="waterfall"
|
||
class="mt10"
|
||
v-model="list"
|
||
:add-time="10"
|
||
:left-gap="leftGap"
|
||
:right-gap="rightGap"
|
||
:column-gap="columnGap"
|
||
@changeList="changeList">
|
||
<!-- 第一列数据 -->
|
||
<template v-slot:list1>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view>
|
||
<!-- <view >
|
||
<uv-swiper
|
||
imgMode="widthFix"
|
||
:list="listSwiper"
|
||
:autoplay="false"
|
||
height="240"
|
||
width="120"
|
||
style="border-radius: 0;"
|
||
>
|
||
|
||
</uv-swiper>
|
||
</view> -->
|
||
<view v-for="(item, index) in list1"
|
||
@click.stop="godetail(item)"
|
||
:key="item.id"
|
||
class="waterfall-item ">
|
||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||
</view>
|
||
<view class="p4">
|
||
<view class="w500 m2">
|
||
{{
|
||
item.name
|
||
}}
|
||
<!-- 华为P60 香芋紫 1TB -->
|
||
</view>
|
||
<view class="flex">
|
||
<view class="baoyou">包邮</view>
|
||
<!-- <view class="youhuiquan">优惠券</view> -->
|
||
</view>
|
||
<view class="flex justify-between items-baseline">
|
||
<rkPrice new-color="#000" newPriceSlotText="" :price="{
|
||
newPrice:item.price,
|
||
oldPrice:item.price
|
||
}" ></rkPrice>
|
||
<view class="w500 t5 f10">{{item.ficti}}人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 第二列数据 -->
|
||
<template v-slot:list2>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view>
|
||
<view v-for="(item, index) in list2"
|
||
:key="item.id"
|
||
@click.stop="godetail(item)"
|
||
class="waterfall-item">
|
||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||
</view>
|
||
<view class="p4">
|
||
<view class="w500 m2">
|
||
{{
|
||
item.name
|
||
}}
|
||
<!-- 华为P60 香芋紫 1TB -->
|
||
</view>
|
||
<view class="flex">
|
||
<view class="baoyou">包邮</view>
|
||
<!-- <view class="youhuiquan">优惠券</view> -->
|
||
</view>
|
||
<view class="flex justify-between items-baseline">
|
||
<rkPrice new-color="#000" newPriceSlotText="" :price="{
|
||
newPrice:item.price,
|
||
oldPrice:item.price
|
||
}" ></rkPrice>
|
||
<view class="w500 t5 f10">{{item.ficti}}人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class='loadingicon acea-row row-center-wrapper' :hidden='loading==false'>
|
||
<text class='loading iconfont icon-jiazai'></text>
|
||
</view>
|
||
<view class="mores-txt flex" v-if="goodScroll">
|
||
<text>我是有底线的</text>
|
||
</view>
|
||
</uv-waterfall>
|
||
<uv-load-more :status="loadStatus"></uv-load-more>
|
||
</view>
|
||
|
||
</template>
|
||
<script>
|
||
|
||
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
|
||
import rkPrice from '@/components/rk-price.vue'
|
||
export default {
|
||
components:{
|
||
rkPrice
|
||
},
|
||
data() {
|
||
return {
|
||
tabClick: 0, //导航栏被点击
|
||
tabTitle:[
|
||
{
|
||
name:'热门推荐',
|
||
dec:'超值低价',
|
||
titleColor:'#F80B0B',
|
||
decbg:['#FF6E46','#FF3B38']
|
||
},
|
||
{
|
||
name:'电子数码',
|
||
dec:'新品发售',
|
||
titleColor:'#F80B0B',
|
||
decbg:['#FF6E46','#FF3B38']
|
||
},
|
||
{
|
||
name:'酒水冲饮',
|
||
dec:'质优价廉',
|
||
titleColor:'#F80B0B',
|
||
decbg:['#FF6E46','#FF3B38']
|
||
},
|
||
{
|
||
name:'日用百货',
|
||
dec:'清仓特价',
|
||
titleColor:'#F80B0B',
|
||
decbg:['#FF6E46','#FF3B38']
|
||
},
|
||
{
|
||
name:'美妆特价',
|
||
dec:'超值低价',
|
||
titleColor:'#F80B0B',
|
||
decbg:['#FF6E46','#FF3B38']
|
||
},
|
||
],
|
||
loadStatus:'loadmore',
|
||
params: { //精品推荐分页
|
||
page: 1,
|
||
limit: 10,
|
||
cid: 0
|
||
},
|
||
listSwiper:[
|
||
],
|
||
list: [],// 瀑布流全部数据
|
||
list1: [],// 瀑布流第一列数据
|
||
list2: [],// 瀑布流第二列数据
|
||
leftGap: 20,
|
||
rightGap: 20,
|
||
columnGap: 10
|
||
}
|
||
},
|
||
computed: {
|
||
imageStyle(item) {
|
||
return item=>{
|
||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||
const w = v/2;
|
||
const rate = w / item.w;
|
||
const h = rate* item.h;
|
||
return {
|
||
width: w + 'px',
|
||
height: h + 'px'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async onLoad() {
|
||
await this.get_host_product();
|
||
},
|
||
async mounted() {
|
||
await this.get_host_product();
|
||
},
|
||
methods: {
|
||
longClick(index, id, fid) {
|
||
this.tabClick = index //设置导航点击了哪一个
|
||
},
|
||
godetail(item){
|
||
goShopDetail(item.id);
|
||
},
|
||
get_host_product: function() {
|
||
if (this.goodScroll) return;
|
||
this.loading = true
|
||
this.loadStatus = 'loading';
|
||
this.params.cid = 0;
|
||
getProductHot(
|
||
this.params
|
||
).then((res) => {
|
||
this.$set(this.params, 'page', this.params.page + 1);
|
||
this.goodScroll = this.params.page > res.data.totalPage;
|
||
this.list = this.list.concat(res.data.list || []);
|
||
this.$emit('noCommodity', this.list.length);
|
||
this.loading = false
|
||
this.loadStatus = 'loadmore';
|
||
}).catch(err => {
|
||
this.loading = false
|
||
this.loadStatus = 'loadmore';
|
||
});
|
||
},
|
||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||
changeList(e){
|
||
console.log(e,'111')
|
||
this[e.name].push(e.value);
|
||
},
|
||
// 模拟的后端数据
|
||
getData() {
|
||
return new Promise((resolve)=>{
|
||
const imgs = [
|
||
|
||
];
|
||
let list = [];
|
||
const doFn = (i)=>{
|
||
const randomIndex = Math.floor(Math.random() * 2);
|
||
return {
|
||
id: guid(),
|
||
allowEdit: i==0,
|
||
image: imgs[randomIndex].url,
|
||
w: imgs[randomIndex].width,
|
||
h: imgs[randomIndex].height,
|
||
title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架`: `(${this.list.length + i +1})uv-ui支持多平台`,
|
||
desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` :
|
||
`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
|
||
}
|
||
};
|
||
// 模拟异步
|
||
setTimeout(() => {
|
||
for (let i = 0; i < 3; i++) {
|
||
list.push(doFn(i));
|
||
}
|
||
resolve({data:list});
|
||
}, 200)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background: #f1f1f1;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.navTabBox {
|
||
width: 100%;
|
||
padding-bottom: 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
position: relative;
|
||
padding: 0 24rpx 0 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
z-index: 9;
|
||
|
||
&.isFixed {
|
||
z-index: 10;
|
||
position: fixed;
|
||
left: 0;
|
||
width: 100%;
|
||
/* #ifdef H5 */
|
||
top: 0;
|
||
/* #endif */
|
||
}
|
||
|
||
.click {
|
||
// color: white;
|
||
}
|
||
|
||
.longTab {
|
||
width: 94%;
|
||
|
||
.longItem {
|
||
//height: 72rpx;
|
||
display: inline-block;
|
||
// line-height: 52rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
margin-right: 42rpx;
|
||
|
||
&.click {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.name {
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.underlineBox {
|
||
height: 3px;
|
||
transition: .5s;
|
||
|
||
.underline {
|
||
width: 33rpx;
|
||
height: 4rpx;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category {
|
||
height: 66rpx;
|
||
line-height: 46rpx;
|
||
z-index: 3;
|
||
|
||
// padding: 0 15rpx 0 25rpx;
|
||
.iconfont {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
$show-lines: 1;
|
||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||
.baoyou{
|
||
background: linear-gradient( 164deg, #FF784C 0%, #FF4C56 100%); border-radius: 1px;
|
||
color:#fff;
|
||
font-size: 18rpx;
|
||
margin: 10rpx;
|
||
padding: 4rpx 6rpx;
|
||
font-weight: 500;
|
||
}
|
||
.waterfall-item {
|
||
background: #fff;
|
||
overflow: hidden;
|
||
margin-top: 10px;
|
||
border-radius: 6px;
|
||
}
|
||
.waterfall-item__image{
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.waterfall-item__ft {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
&__title {
|
||
margin-bottom: 10rpx;
|
||
line-height: 48rpx;
|
||
font-weight: 700;
|
||
.value {
|
||
font-size: 32rpx;
|
||
color: #303133;
|
||
}
|
||
}
|
||
&__desc .value {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
}
|
||
&__btn {
|
||
padding: 10px 0;
|
||
}
|
||
}
|
||
</style> |