new_shop_app/components/recommend/index.vue

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

		<!-- nav导航 -->
		<view class="nav" v-if="showTab&&list.length>0">
			<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/c72bf202403191713119980.webp" 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/de539202403191713558109.webp" 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/81f8a202403191714238972.webp" 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>

		<!-- 资讯 -->
		<view v-if="showTab&&list.length>0" @click="navTo('/pages/news_list/index?type=20')"
			style="display: flex;justify-content: space-between;padding-bottom: 20rpx;font-size: 26rpx;color: #999999;height: 70rpx;align-items: center;">
			<view
				style="font-size: 28rpx;background-color: #40ae36;color: #fff;padding: 4rpx 16rpx 6rpx 16rpx;border-radius: 90rpx;">
				里海新闻</view>
			<view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
		</view>
		<view class="information" v-if="showTab&&list.length>0">
			<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
				<view class="nav-item" style="display: inline-block;margin-right: 16rpx;"
					@click="navTo(`/pages/news_details/index?id=${item.article_id}`)" v-for="(item, index) in list"
					:key="item.article_id">
					<view class="nav-item-up" style="overflow: hidden;">
						<image :src="item.image_input" mode="aspectFill"></image>
					</view>
					<view class="nav-item-down">
						<view class="nav-item-down-title">{{item.title}}</view>
						<view class="nav-item-down-desc">{{item.synopsis}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- tab导航 -->
		<view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}">
			<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':''">
			<view class="loadingicon acea-row row-center-wrapper"
				v-if="!hostProduct || hostProduct.length == 0 || loading">
				<text class="loading iconfont icon-jiazai loading-flex"></text>
				{{ hotTitle }}
			</view>
			<WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0"
				:sale_type="sale_type" />
			<view class='pictrue' v-if="!loading && hostProduct.length==0">
				<image :src="`${domain}/static/images/noCart.png`"></image>
				<view>暂无商品，看点别的吧</view>
			</view>
		</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 {
		getArticleList
	} from "@/api/api.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
			},
			sale_type: {
				type: [Number, String],
				default: 1
			},
			loading: {
				type: Boolean,
				default: false
			},
			hotTitle: {
				type: String,
				default: '加载更多'
			}
		},
		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,
				list: [],
				tabsTop: ''
			};
		},
		mounted() {
			this.getArticleList();
		},

		methods: {
			changeTab(e) {
				this.currTabs = e;
				this.$emit('changeRecommedTab', e)
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
					fail: () => {
						Toast('暂未开放')
					}
				})
			},
			getArticleList() {
				getArticleList(20, {
					page: 1,
					limit: 10
				}).then(res => {
					this.list = res.data.list;

					setTimeout(() => {
						this.$util.getDom(this, '.tabs', res => {
							// #ifdef APP
							this.tabsTop = res.top + 10;
							// #endif

							// #ifdef H5
							this.tabsTop = res.top;
							// #endif
						})
					}, 300)
				})
			},
			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: 90rpx;

		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;
		justify-content: space-between;
		margin-bottom: 20rpx;

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

			.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 {
		position: sticky;
		top: 0;
		z-index: 900;
		background: #fff;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 -20rpx 10rpx;
		padding-top: 20rpx;

		.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;
		min-height: calc(100vh - 82rpx - var(--status-bar-height));
	}

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

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

	.information {
		.nav-item {
			width: 227rpx;
			overflow: hidden;
			border-radius: 20rpx;
			position: relative;


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

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

			.nav-item-down {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 227rpx;
				padding: 8rpx 2rpx 8rpx 14rpx;
				background: rgba(0, 0, 0, 0.4);

				.nav-item-down-title {
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.nav-item-down-desc {
					font-size: 20rpx;
					color: #FFFFFF;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}

	.loading-flex {
		width: auto !important;
		margin-right: 10rpx;
	}

	.pictrue {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;

		image {
			width: 414rpx;
			height: 305rpx;
		}
	}
</style>