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>
|