This commit is contained in:
yangtao 2024-03-26 17:17:16 +08:00
parent 9b52e931e8
commit 77d36022a0
4 changed files with 553 additions and 29 deletions

View File

@ -0,0 +1,198 @@
<template>
<view :class="'wf-page wf-page'+type">
<!-- left -->
<view>
<view id="left" v-if="leftList.length">
<view v-for="(item,index) in leftList" :key="index"
class="wf-item" @tap="itemTap(item)">
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
</view>
</view>
</view>
<!-- right -->
<view>
<view id="right" v-if="rightList.length">
<view v-for="(item,index) in rightList" :key="index"
class="wf-item" @tap="itemTap(item)">
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
</view>
</view>
</view>
</view>
</template>
<script>
import WaterfallsFlowItem from '@/pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue'
export default {
components: {
WaterfallsFlowItem
},
props: {
//
wfList: {
type: Array,
require: true
},
updateNum: {
type: Number,
default: 10
},
type: {
type: Number,
default: 0
},
isStore: {
type: [String, Number],
default: '1'
},
},
data() {
return {
allList: [], //
leftList: [], //
rightList: [], //
mark: 0, //
boxHeight: [], // 01
};
},
watch: {
//
wfList: {
handler(nVal,oVal){
// 使
if (!this.wfList.length ||
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
this.allList = [];
this.leftList = [];
this.rightList = [];
this.boxHeight = [];
this.mark = 0;
}
// waterfall
if (this.wfList.length) {
this.allList = this.wfList;
this.leftList = [];
this.rightList = [];
this.boxHeight = [];
this.allList.forEach((v, i) => {
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
if(i % 2){
this.rightList.push(v);
}else{
this.leftList.push(v);
}
}
});
if(this.allList.length < 3){
this.mark = this.allList.length+1;
}else if(this.allList.length <= 7){
this.mark = this.allList.length - 1;
}else{
this.mark = this.allList.length - 2;
}
if(this.mark < this.allList.length){
this.waterFall()
}
}
},
immediate: true,
deep:true
},
mounted(){
},
// item
mark() {
const len = this.allList.length;
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
this.waterFall();
}
}
},
methods: {
//
waterFall() {
const i = this.mark;
if (i == 0) {
//
this.leftList.push(this.allList[i]);
//
this.getViewHeight(0);
} else if (i == 1) {
// item
this.rightList.push(this.allList[i]);
//
this.getViewHeight(1);
} else {
// item
if(!this.boxHeight.length){
this.rightList.length < this.leftList.length
? this.rightList.push(this.allList[i])
: this.leftList.push(this.allList[i]);
} else {
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
if (leftOrRight) {
this.rightList.push(this.allList[i])
} else {
this.leftList.push(this.allList[i])
}
}
//
this.getViewHeight();
}
console.log('this.leftList: ',this.leftList);
console.log('this.rightList: ',this.rightList);
},
//
getViewHeight() {
// 使nextTick
this.$nextTick(() => {
setTimeout(()=>{
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
res ? this.boxHeight[1] = res.height : '';
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
res ? this.boxHeight[0] = res.height : '';
this.mark = this.mark + 1;
}).exec();
}).exec();
},100)
})
},
// item
itemTap(item) {
this.$emit('itemTap', item)
},
// item
goShop(item) {
this.$emit('goShop', item)
}
}
}
</script>
<style lang="scss" scoped>
$page-padding: 10px;
$grid-gap: 10px;
.wf-page {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $grid-gap;
}
.wf-item {
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
padding-bottom: $grid-gap;
}
.wf-page1 .wf-item{
margin-top: 20rpx;
background-color: #fff;
border-radius: 20rpx;
padding-bottom: 0;
}
.wf-item-page{
padding-bottom: 20rpx;
}
</style>

View File

@ -0,0 +1,317 @@
<template>
<view class="wf-page1" :style="viewColor">
<view class='pictrue'>
<easy-loadimage mode="widthFix" ></easy-loadimage>
<!-- <view v-if="item.stock == 0" class="sell_out">已售罄</view> -->
<view v-if="item.mer_avatar" :style="{ backgroundImage: `url(${item.mer_avatar})` }" class="border-picture"></view>
</view>
<view class='text'>
<view class='name line2'>{{item.m}}</view>
<!-- <view class='money'>
<text class='num'>{{item.price}}</text>
</view> -->
<view class="item_tags acea-row">
<text class="font-bg-red b-color">{{item.type_name}}</text>
<!-- <text v-if="item.product_type != 0" :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text> -->
</view>
<view class="score"><text style="font-size: 12px;" class="iconfont icon-shitixing"></text>{{item.service_score}}评分 </view>
<view class="company" @click.stop="goShop(item.type_id)">
<text class="line1">{{item.mer_name}}</text>
<view class="flex" v-if="isStore != '1'">
进店
<text class="iconfont icon-xiangyou"></text>
</view>
</view>
</view>
</view>
</template>
<script>
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
import {mapGetters} from "vuex";
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
components:{easyLoadimage},
computed: mapGetters(['viewColor']),
props: {
item: {
type: Object,
require: true
},
type: {
type: Number,
default: 0
},
isStore: {
type: [String, Number],
default: '1'
},
isLogin: {
type: Boolean,
require: false
}
},
data(){
return {
domain: HTTP_REQUEST_URL,
}
},
methods: {
goShop(id) {
this.$emit('goShop', id);
},
authOpen(){
this.$emit('authOpen');
},
followToggle(item){
this.$emit('followToggle', item);
}
}
}
</script>
<style lang="scss" scoped>
.wf-item-page {
background: #fff;
overflow: hidden;
border-radius: 16rpx;
padding-bottom: 20rpx;
}
.wf-page0 .coupon{
background:rgba(255,248,247,1);
border:1px solid rgba(233,51,35,1);
border-radius:4rpx;
font-size:20rpx;
margin-left: 18rpx;
padding: 1rpx 4rpx;
}
.wf-page0 .pictrue{
width: 100%!important;
height: 345rpx;
position: relative;
/deep/image,/deep/.easy-loadimage,uni-image{
height: 345rpx;
border-radius: 16rpx 16rpx 0 0;
}
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16rpx 16rpx 0 0;
background: center/cover no-repeat;
}
}
.loadfail-img{
width: 100%;
height: 360rpx;
}
.svip{
margin: 5rpx 0 15rpx;
}
.vip-money {
color: #282828;
font-size: 22rpx;
margin-left: 6rpx;
font-weight: bold;
}
.vipImg {
width: 65rpx;
height: 28rpx;
margin-left: 4rpx;
image {
width: 100%;
height: 100%;
display: block;
}
}
.wf-page0 .name {
color: #282828;
margin: 20rpx 0 10rpx 0;
font-size: 13px;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
.wf-page0 .text{
padding: 0 20rpx;
}
.wf-page0 .money {
font-size: 20rpx;
font-weight: bold;
color: var(--view-priceColor);
}
.b-color {
background-color: var(--view-theme);
border: 1px solid var(--view-theme);
}
.wf-page0 .money .num {
font-size: 34rpx;
}
.wf-page1 .wf-item{
.name{
font-size: 13px;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
}
.wf-page1 .pictrue {
position: relative;
height: 345rpx;
width: 100%!important;
/deep/image,/deep/.easy-loadimage,uni-image{
height: 345rpx;
border-radius: 20rpx 20rpx 0 0;
}
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20rpx 20rpx 0 0;
background: center/cover no-repeat;
}
}
.sell_out {
display: flex;
width: 150rpx;
height: 150rpx;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(0,0,0,.6);
color: #fff;
font-size: 30rpx;
position: absolute;
top: 50%;
left: 50%;
margin: -75rpx 0 0 -75rpx;
&::before{
content: "";
display: block;
width: 140rpx;
height: 140rpx;
border-radius: 100%;
border: 1px dashed #fff;
position: absolute;
top: 5rpx;
left: 5rpx;
}
}
.loading-img{
height: 345rpx;
max-height: 360rpx;
}
.wf-page1 .text {
padding: 20rpx 17rpx 26rpx 17rpx;
font-size: 30rpx;
color: #222;
}
.wf-page1 .text .money {
display: flex;
align-items: center;
font-size: 26rpx;
font-weight: bold;
margin-top: 8rpx;
color: var(--view-priceColor);
}
.wf-page1 .text .money .num {
font-size: 34rpx;
}
.item_tags{
margin-top: 8rpx;
display: flex;
}
.item_tags .tags_item {
display: flex;
font-size: 20rpx;
text-align: center;
border-radius: 5rpx;
padding: 0 4rpx;
height: 28rpx;
align-items: center;
justify-content: center;
margin-right: 8rpx;
}
.item_tags .tags_item.ticket{
color: var(--view-theme);
border: 1px solid var(--view-theme);
}
.item_tags .tags_item.delivery{
color: #FF9000;
border: 1px solid #FF9000;
}
.wf-page1 .text .money .ticket-big {
display: flex;
align-items: center;
justify-content: center;
max-width: 163rpx;
padding: 0 6rpx;
height: 28rpx;
margin-left: 10rpx;
background-image: url(~static/images/yh.png);
background-size: 100% 100%;
font-size: 20rpx;
font-weight: normal;
}
.wf-page1 .text .score {
margin-top: 10rpx;
color: #737373;
font-size: 20rpx;
}
.wf-page1 .text .company {
display: flex;
align-items: center;
color: #737373;
font-size: 20rpx;
margin-top: 10rpx;
.line1{
max-width: 200rpx;
}
.flex {
display: flex;
align-items: center;
margin-left: 10rpx;
color: #282828;
.iconfont {
font-size: 16rpx;
margin-top: 4rpx;
}
}
}
.foot-bar {
width: 100%;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
border-radius: 0px 0px 16rpx 16rpx;
color: #fff;
font-size: 24rpx;
.icon-fenxiang {
font-size: 24rpx;
margin-right: 10rpx;
}
}
</style>

View File

@ -38,7 +38,7 @@
<view class="item-content"> <view class="item-content">
<view class="right-center-left"> <view class="right-center-left">
<view class="center-left-score"> <view class="center-left-score">
<text class="iconfont icon-kongxinxing"></text> <text class="iconfont icon-shitixing"></text>
<!-- <text class="iconfont icon-kongxinxing"></text> --> <!-- <text class="iconfont icon-kongxinxing"></text> -->
<text>{{item.service_score}}</text> <text>{{item.service_score}}</text>
</view> </view>
@ -184,7 +184,7 @@
}, },
goShopSearch(item){ goShopSearch(item){
uni.navigateTo({ uni.navigateTo({
url:'./search/index' url:'./search/index?id='+item.merchant_category_id
}) })
}, },
getNav(){ getNav(){

View File

@ -102,6 +102,8 @@
</template> </template>
<script> <script>
import {shopNearby} from '@/api/shop.js'
import { import {
getProductslist, getProductslist,
@ -112,7 +114,7 @@
} from '@/api/store.js'; } from '@/api/store.js';
import recommend from '@/components/recommend'; import recommend from '@/components/recommend';
import rightSlider from '@/components/rightSlider.vue' import rightSlider from '@/components/rightSlider.vue'
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue' import WaterfallsFlow from '@/pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue'
import {initiateAssistApi} from '@/api/activity.js'; import {initiateAssistApi} from '@/api/activity.js';
import { configMap } from "@/utils"; import { configMap } from "@/utils";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
@ -138,6 +140,9 @@
}, },
data() { data() {
return { return {
id:'',
keyword:'',
domain: HTTP_REQUEST_URL, domain: HTTP_REQUEST_URL,
productList: [], productList: [],
list: [], list: [],
@ -208,11 +213,8 @@
uni.$emit('scroll'); uni.$emit('scroll');
}, },
onLoad: function(options) { onLoad: function(options) {
this.$set(this.where, 'cate_pid', options.id || ''); this.id=options.id;
this.title = options.title || ''; this.search();
this.$set(this.where, 'keyword', options.searchValue || '');
this.get_product_list(true);
this.get_host_product();
}, },
onReady(){ onReady(){
@ -221,11 +223,30 @@
}, },
methods: { methods: {
search(){
let data1={
mini:1,
type_id:4,//
category_id:this.id, // lst id
keyword:this.where.keyword,
}
shopNearby(data1).then((res)=>{
console.log('res: ',res);
if(res.data){
this.productList=res.data.list
console.log('this.productList: ',this.productList);
}
})
},
// //
goShop(id){ goShop(id){
if(this.hide_mer_status != 1){ if(this.hide_mer_status != 1){
uni.navigateTo({ uni.navigateTo({
url:`/pages/store/home/index?id=${id}` url:`/pages/shop_detail/index?id=${id}`
}) })
} }
}, },
@ -310,24 +331,11 @@
}, },
// //
godDetail(item) { godDetail(item) {
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
initiateAssistApi(item.activity_id).then(res => {
let id = res.data.product_assist_set_id;
uni.hideLoading(); uni.hideLoading();
console.log(item);
uni.navigateTo({ uni.navigateTo({
url: '/pages/activity/assist_detail/index?id=' + id url: '/pages/shop_details/index?id=' + item.mer_id
}); });
}).catch((err) => {
uni.showToast({
title: err,
icon: 'none'
})
});
} else {
toLogin()
}
})
}, },
// //
confirm(data,index) { confirm(data,index) {
@ -387,7 +395,8 @@
that.$set(that.where, 'keyword', e.detail.value); that.$set(that.where, 'keyword', e.detail.value);
that.loadend = false; that.loadend = false;
that.$set(that.where, 'page', 1) that.$set(that.where, 'page', 1)
this.get_product_list(true); this.search();
// this.get_product_list(true);
}, },
/** /**
* 获取我的推荐 * 获取我的推荐