uniapp-ZHSQ/packages/shop/index/index.vue

<template>
	<div class="container">
		<!-- 顶部展开后的阴影 -->
		<div class="boxshadow" v-if="topShow"></div>

		<div class="header" :class="topShow ? 'op0' : ''">
			<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
				<div class="searchBox_left">
					<!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
				</div>
				<div class="searchBox_ipt" @click="searchPage">
					<image
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
						mode="aspectFill"></image>
					<input disabled type="text" placeholder="输入商品名称">
				</div>
			</div>

			<div class="slide">

				<div class="slide_con">
					<div v-for="(item, index) in iconList" :key="index" class="slide_conBox">
						<view class="slide_item">
							<image :src="item.icon" mode="aspectFill"></image>
							<text>{{ item.name }}</text>
						</view>
					</div>
				</div>

				<div class="open" @click="topOpen" v-if="!topShow">
					展 开
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
						mode="aspectFill"></image>
				</div>
			</div>

		</div>

		<!-- 整体展开的顶部 -->
		<div class="header header2" v-if="topShow">
			<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
				<div class="searchBox_left">
					<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
				</div>
				<div class="searchBox_ipt">
					<image
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
						mode="aspectFill"></image>
					<input type="text" placeholder="输入商品名称">
				</div>
			</div>

			<div class="slide">
				<div class="slide_con">
					<div v-for="(item, index) in iconList" :key="index" class="slide_conBox">
						<view class="slide_item">
							<image :src="item.icon" mode="aspectFill"></image>
							<text>{{ item.name }}</text>
						</view>
					</div>
				</div>
			</div>

			<div class="hides" @click="topOpen">
				收起 <u-icon name="arrow-up"></u-icon>
			</div>
		</div>


		<div class="Con">
			<div class="Con_left">
				<div class="CateItem" v-for="item in 10" :key="index">
					<image v-if="false" class="hot"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
						mode="aspectFill">
					</image>
					<image class="bao"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
						mode="aspectFill"></image>
					猪肉
				</div>
			</div>
			<div class="Con_right">

				<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
					<div class="CateList" ref="cateListRef">
						<div class="CateList_Item" v-for="(item, index) in 9" :key="index"
							:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">梨
						</div>

					</div>
					<div class="more" @click="changeCateListShow">
						<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
						<u-icon v-if="cateListShow" name="arrow-up"></u-icon>
					</div>
				</div>
				<!-- 右下展开的内容 -->
				<div class="activeCateList" v-if="cateListShow">
					<div class="CateList_Item" v-for="(item, index) in 9" :key="index"
						:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">梨
					</div>
				</div>
				<!-- 右下阴影 -->
				<div class="boxshadow2" v-if="cateListShow"></div>


				<div class="CateInfo" v-for="items in 2">
					<div class="CateInfo_tit">
						梨
					</div>
					<div class="CateInfo_Item" v-for="item in 3" :key="index">
						<div class="CateInfo_Item_Box">
							<div class="CateInfo_Item_left">
								<image
									src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
									mode="aspectFill"></image>
							</div>
							<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
								<div class="CateInfo_Item_right_Tit" @click="goods">库尔勒香梨</div>
								<div class="CateInfo_Item_right_subtit" @click="goods">商品介绍商品介绍</div>
								<div class="CateInfo_Item_Money">
									<div class="CateInfo_Item_Money_left">
										<span>￥</span>10.1
									</div>
									<div class="CateInfo_Item_Money_right">
										<u-number-box v-model="value">
											<view slot="minus" class="minus">
												<u-icon name="minus" size="20"></u-icon>
											</view>
											<text slot="input" style="width: 50px;text-align: center;" class="input">{{
												value }}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
											</view>
										</u-number-box>
									</div>
								</div>

								<div class="gg" @click="chooseGG" v-if="!GGshow">
									选择规格 <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
								</div>

								<div class="gg" @click="chooseGG" v-if="GGshow">
									收起 <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
								</div>



							</div>
						</div>

						<div class="GGList" v-if="GGshow">
							<div class="GGItem">
								<div class="GGItem_Image">
									<image
										src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
										mode="aspectFill"></image>
								</div>
								<div class="GGItem_Con">
									<div class="GGItem_Con_Tit">金枕榴莲</div>
									<div class="GGItem_Con_Msg">
										<div class="GGItem_Con_Msg_left">
											<span>￥</span>25.9
										</div>
										<div class="GGItem_Con_Msg_right">
											<u-number-box v-model="value">
												<view slot="minus" class="minus">
													<u-icon name="minus" size="20"></u-icon>
												</view>
												<text slot="input" style="width: 50px;text-align: center;"
													class="input">{{
														value }}</text>
												<view slot="plus" class="plus">
													<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
												</view>
											</u-number-box>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


					<!-- 按钮 -->
					<div class="btn">
						查看全部商品
						<div class="cir">
							<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
						</div>
					</div>
				</div>


			</div>
		</div>

		<nav-footer :current="2" />


		<div class="shop_car">
			<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
			<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
			<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
		</div>

	</div>
</template>

<script>
import {
	apiArr
} from '../../../api/doorToDoor';
import {
	picUrl,
	menuButtonInfo,
	request,
	NavgateTo
} from '../../../utils';
export default {

	data() {

		return {
			flag: false,
			top: "",
			localHeight: "",
			search: "",
			value: "1",
			cateListShow: false,
			iconList: [

				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
					name: "休闲零食"
				},

				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
					name: "肉蛋果蔬"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
					name: "酒水饮料"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
					name: "家具电器"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
					name: "电脑手机"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
					name: "休闲零食"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
					name: "肉蛋果蔬"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
					name: "酒水饮料"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
					name: "家具电器"
				},
				{
					icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
					name: "电脑手机"
				},
			],

			rightTopActive: 0,
			topShow: false,

			GGshow: false
		}
	},
	methods: {
		//顶部分类点击
		changeCateListShow() {
			this.cateListShow = !this.cateListShow
		},
		//选择右下角分类
		checkItem(index) {
			this.rightTopActive = index
		},
		//右下角点击更多
		topOpen() {
			this.topShow = !this.topShow
		},
		// 选择商品规格
		chooseGG() {
			this.GGshow = !this.GGshow
		},
		//搜索页
		searchPage() {
			NavgateTo('../search/index')
		},
		//商品详情页
		goods() {
			NavgateTo('../goods/index')
		},

	},
	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		this.localHeight = meun.height;
	},
	onReachBottom() {
		if (this.flag) {

		}
	},
}
</script>

<style>
@import url("./index.css");
</style>