【uniapp公众号分销商城从0到1】商城首页（05）

最新推荐文章于 2024-09-16 16:10:49 发布

niersen丶尼尔森

最新推荐文章于 2024-09-16 16:10:49 发布

阅读量794

点赞数

分类专栏： uniapp 文章标签： uniapp 商城分销公众号登陆

本文链接：https://blog.csdn.net/neil_1993/article/details/103770853

版权

首页

<template>
	<view class="container">
		<!--header-->
		<view class="tui-header">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="classify">
				<tui-icon name="manage-fill" color="#fff" :size="22"></tui-icon>
				<view class="tui-category-scale">分类</view>
			</view>
			<view class="tui-rolling-search">
				<image lazy-load class="logo-size" src="https://sdzkshop.oss-cn-shenzhen.aliyuncs.com/sdzkShop/fontResources/sdlogo.png"></image>
				<view class="right-line-box">
					<view class="right-line"></view>
				</view>
				<!-- #ifdef APP-PLUS || MP -->
				<icon type="search" :size='13' color='#999'></icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view>
					<tui-icon name="search" :size='16' color='#999'></tui-icon>
				</view>
				<!-- #endif -->
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item" @tap="searchk()">
						<view class="tui-hot-item">{
  {item.key_word}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--header-->
		<view class="tui-header-banner">
			<view class="tui-hot-search">
				<view>热搜</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="flex">
						<view v-for="(item,index) in hotSearch" :key="index" class="tui-hot-tag" @tap="search(item)">{
  {item.key_word}}</view>

					</view>
				</scroll-view>
			</view>
			<view class="tui-banner-bg">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>
				<!--banner-->
				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper"
					 :circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
						<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="detail">
							<image lazy-load :src="item.img" class="tui-slide-image" mode="scaleToFill" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- <view class="tui-product-category">
			<view class="tui-category-item" v-for="(item,index) in category" :key="index" :data-key="item.name" @tap="more">
				<image :src="'../../../static/images/mall/category/'+item.img" class="tui-category-img" mode="scaleToFill"></image>
				<view class="tui-category-name">{
  {item.name}}</view>
			</view>
		</view> -->

		<!-- <view class="tui-product-box tui-pb-20 tui-bg-white">
			<view class="tui-group-name" @tap="more">
				<text>新人专享</text>
				<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
			</view>
			<view class="tui-activity-box" @tap="detail">
				<image src="/static/images/mall/activity/activity_1.jpg" class="tui-activity-img" mode="widthFix"></image>
				<image src="/static/images/mall/activity/activity_2.jpg" class="tui-activity-img" mode="widthFix"></image>
			</view>
		</view> -->

		<view class="tui-product-box tui-pb-20 tui-bg-white margin-top-45">
			<view class="tui-group-name" @tap="more">
				<text class="tui-group-name-line"></text>
				<view class="width30">租赁商品</view>
				<text class="tui-group-name-line"></text>
			</view>
			<view class="zl-pro-box" v-for="(items,indexs) in newProduct" :key="indexs">
				<view class="zl-pro-box-title">{
  {items.title}}</view>
				<view class="tui-new-box">
					<view class="tui-new-item" :class="[index!=0 && index!=1 ?'tui-new-mtop':'']" v-for="(item,index) in items.list"
					 :key="index" @tap="productDetail(item)">
						<image lazy-load :src="'https://sdzkshop.oss-cn-shenzhen.aliyuncs.com/sdzkShop/fontResources/'+(item.type==222?'new':'')+'.png'"
						 class="tui-new-label"