new_shop_app/components/recommend/index.vue

<template>
	<view class='recommend'>
		<view class="common-hd">
			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/137f4202403091116454932.webp" mode=""></image>
		</view>

		<!-- nav导航 -->
		<view class="nav" v-if="showTab">
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/home/home')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1c050202403121539159687.png" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">里海云仓</view>
					<view class="nav-item-down-desc">供销物资市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/market/market')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/9d4d720240312153933187.png" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">供销云市场</view>
					<view class="nav-item-down-desc">综合线上大市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/specialty/specialty')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cef80202403121539479409.png" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">名优特产</view>
					<view class="nav-item-down-desc">地方特色特产</view>
				</view>
			</view>
		</view>

		<!-- tab导航 -->
		<view class="tabs" v-if="showTab">
			<block v-for="(item,indx) in tabsArr" :key="indx">
        <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view>
				<view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
					<view class="tabs-item-main">{{item.name}}</view>
					<view class="tabs-item-sub">{{item.desc}}</view>
				</view>
			</block>
		</view>

		<view class='recommendList' :class="indexP?'on':''">
			<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
  import { Toast } from "../../libs/uniApi";
	export default {
		components: {
			WaterfallsFlow
		},
		computed: mapGetters(['uid']),
		props: {
			hostProduct: {
				type: Array,
				default: function() {
					return [];
				}
			},
      showTab: {
        type: Boolean,
        default: false
      },
			indexP: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				tabsArr: [{
					name: '全部',
					desc: '猜你喜欢',
					val: 1
				}, {
					name: '里海云仓',
					desc: '大家都在买',
					val: 2
				}, {
					name: '云市场',
					desc: '商户汇聚',
					val: 3
				}, {
					name: '名优特产',
					desc: '特色农副',
					val: 4
				}],
				currTabs: 1
			};
		},
		mounted() {

		},
		methods: {
			changeTab(e) {
				this.currTabs = e;
        this.$emit('changeRecommedTab', e)
			},
      navTo(url){
        uni.navigateTo({
          url: url,
          fail: () => {
            Toast('暂未开放')
          }
        })
      },
			goDetail(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.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						toLogin();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 118rpx;

		image {
			width: 340rpx;
			height: 42rpx;
		}

		.title {
			height: 42rpx;
			padding: 0 80rpx;
			font-size: 34rpx;
			color: $theme-color;
			font-weight: bold;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left center;
		}
	}

	// 里海云仓 供销云市场 名优特产
	.nav {
		display: flex;
		margin-bottom: 40rpx;

		.nav-item {
			width: 33.3%;
			overflow: hidden;
			border-radius: 20rpx;

			&:not(:nth-last-child(1)) {
				margin-right: 12rpx;
			}

			.nav-item-up {
				width: 100%;
				height: 198rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nav-item-down {
				height: 102rpx;
				padding: 12rpx 0 0 20rpx;
				box-sizing: border-box;
				background: linear-gradient(to right, #72BE53 0%, #46B03A 100%);

				.nav-item-down-title {
					margin-bottom: 4rpx;
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.nav-item-down-desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.tabs {
		display: flex;
		justify-content: space-between;
    align-items: center;
		margin: 0 -20rpx 30rpx;

		.tabs-item {
			width: 23%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tabs-item-main {
				font-weight: bold;
				font-size: 30rpx;
				color: #333;
				font-family: PingFangSC-Medium, PingFangSC-Medium;
			}

			.tabs-item-sub {
				font-size: 22rpx;
				color: #999;
			}
		}

		.tabs-item-active {
			.tabs-item-main {
				color: #40AE36;
			}

			.tabs-item-sub {
				padding: 0 12rpx;
				background-color: #40AE36;
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}

	.recommend .recommendList {
		padding: 0 20rpx;
		min-height: 100rpx;
	}

	.recommend .recommendList.on {
		padding: 0;
	}

	/deep/.looming-gray {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>