yudao-uniapp-diancan/pages/index/category - 副本.vue

<!-- 商品分类列表 -->
<template>
	<s-layout title="分类"  :bgStyle="{ color: '#fff' }">
		<view class="s-category">
			<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
				<!-- 商品分类（左） -->
				<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
					<view class="menu-item ss-flex" v-for="(item, index) in state.categoryList" :key="item.id"
						:class="[{ 'menu-item-active': index === state.activeMenu }]" @tap="onMenu(index)">
						<view class="menu-title ss-line-1">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<!-- 商品分类（右） -->
				<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right" @scroll="asideScroll"
					:scroll-top="tabScrollTop">
					<view class="goodsListBox">
						<view class="category" v-for="item in state.categoryList" :key="item.id" :id="'goodsBox'+item.id">
							<view class="s-item">{{item.name}}</view>
							<view class="list">
								<view class="box" v-for="(rowData,i) in item.children" :key="rowData.id" >
									<!--  -->
									<!-- 商品列表 -->
									<!-- <m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>
                            -->
									<!-- 商品列表 -->
									<view class="m-store-item" v-if="item.id == rowData.parentId">
										<view class="m-img" @click="hrefGoodsInfo(rowData.id)">
											<image style="width: 100%;height: 100%;" :src="rowData.image"
												alt="Product Image"></image>
										</view>
										<view class="m-text">
											<view class="m-title" @click="hrefGoodsInfo(rowData.id)">
												{{rowData.name}}
											</view>

											<view class="m-descripe">

												{{rowData.descripe}}

											</view>

											<template v-if="rowData.form">
												<view class="m-price-box">
													<view class="symbol">￥</view>
													<view class="m-price">{{rowData.form_child[0].price}}</view>
													<view class="m-old-price" v-if="rowData.form_child[0].oldprice">
														<span>￥{{rowData.form_child[0].oldprice}}</span>
													</view>
												</view>
											</template>
											<template v-else>
												<view class="m-price-box">
													<view class="symbol">￥</view>
													<view class="m-price">{{rowData.price}}</view>
													<view class="m-old-price" v-if="rowData.oldprice">
														<span>￥{{rowData.oldprice}}</span>
													</view>
												</view>
											</template>
											<view class="m-distance">

												<template v-if="rowData.form">
													<view class="miniBtn" @click="showForm(rowData)">
														<span>选规格</span>
														<!-- #ifdef APP-PLUS || H5 -->
														<view class="num" v-if="getCartGoodsNum(rowData)">
															{{getCartGoodsNum(rowData)}}
														</view>
														<!-- #endif -->

													</view>
												</template>
												<template v-else>
													<view :class="'addEle_' + i" class="jumpPosition"></view>
													<hx-number-box @change="addGoodsChange" :value="rowData.number"
														:rowData="rowData" :clickTime="animaTime"
														@addChange="touchOnAddGoods('.addEle_' + i,rowData)"></hx-number-box>
												</template>
												<!-- <image @click="touchOnAddGoods('.addEle_' + i,rowData)" style="width:20px;height: 20px;" src="../../static/img/icon/shop_icon_buy.png" mode="aspectFit"></image>
                                        -->
											</view>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				<!-- </scroll-view> -->
				<!-- <image v-if="state.categoryList[state.activeMenu].picUrl" class="banner-img"
					:src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)" mode="widthFix" />
				<first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
				<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
				<second-one v-if="state.style === 'second_one'" :data="state.categoryList"
					:activeMenu="state.activeMenu" /> -->
				<uni-load-more v-if="
              (state.style === 'first_one' || state.style === 'first_two') &&
              state.pagination.total > 0
            " :status="state.loadStatus" :content-text="{
              contentdown: '点击查看更多',
            }" @tap="loadMore" />
				</scroll-view>
			</view>
		</view>
		
		
		
		<!-- 下方购物车 -->
		<view class="foot"  @touchmove.stop.prevent="mpClear" :style="{height: 50}" v-if="state.showFoot">
			<view class="zz" @click="hideShoppingCar"></view>
			<view class="btn-box">
				<view class="btn-box-left" @click="contact">
					<view class="imgBox">
						<image src="../../static/store/contact.png" mode=""></image>
					</view>
					<text>联系商家</text>
				</view>
				<view class="btn-box-line"></view>
				<view class="btn-box-center" @click="showShoppingCar">
					<view class="cart" :animation="cartAnimationData">
						<view class="tag cartNum" v-if="goodsTotalNumber>0">{{goodsTotalNumber}}</view>
						<image :src="goodsTotalNumber ? '/static/store/cart.png' : '/static/store/cart2.png'" mode=""></image>
					</view>
					<view class="priceBox">
						<view class="hx-txt-18 hx-color-white" v-if="goodsTotalPrice>0">
							￥{{goodsTotalPrice}}
						</view>
						<view class="hx-txt-10 hx-color-gray">
							另需配送费￥{{shippingDees}}
						</view>
					</view>
				</view>
				<view class="btn-box-right">
					<view class="jiesuan"  v-if="goodsTotalPrice>0 && goodsTotalPrice >= startingPrice" @click="jiesuan">
						去结算
					</view>
					<view class="pscj hx-txt-10 hx-color-gray" v-else>
						<text v-if="startingPrice>0">差￥{{-(goodsTotalPrice-startingPrice)}}起送</text>
					</view>
					
				</view>
			</view>
			<view class="cart-box" :style="{display: showCar ? 'flex' : 'none'}">
				<view class="box-container rebate-box" v-if="showDiscount">
					<text>已享100减25</text>
				</view>
				<view class="box-container operating-box">
					<view class="operating-box_right">
						
					</view>
					<view class="operating-box_left clear" @click="clearShoppingCart">
						<i class="hxicon-delete"></i>
						<text>清空购物车</text>
					</view>
				</view>
				<view class=" goods-box">
					<view class="" style="flex: 1;">
						<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
							<view class="goods-list">
								<view class="box" v-for="(rowData,i) in shoppCart" :key="rowData.id" >
									<!-- v-if="rowData.number>0" -->
									
									<view class="m-store-item">
										<view class="m-img">
											<image style="width: 100%;height: 100%;" :src="rowData.img" mode="aspectFit"></image>
										</view>
										<view class="m-text">
											<view class="m-title">
												{{rowData.name}}
											</view>
											<view class="m-descripe">
												
												{{rowData.current_form ? rowData.form.name + "：" + rowData.current_form.name : rowData.descripe}}
											</view>
											<view class="m-price-box" >
												<view class="symbol">￥</view>
												<view class="m-price">{{rowData.price}}</view>
												<view class="m-old-price" v-if="rowData.oldprice">
													<text>￥{{rowData.oldprice}}</text>
												</view>
											</view>
											<view class="m-distance" > 
											<view :class="'addEle2_' + rowData.id" class="jumpPosition">
											</view>
												<hx-number-box @change="addGoodsChange" :value="rowData.number" :rowData="rowData" :clickTime="animaTime" @addChange="touchOnAddGoods('.addEle2_' + rowData.id,rowData)"></hx-number-box>
												
											</view>
										</view>
										
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
				</view>
			</view>
			
		</view>
		
	</s-layout>
</template>

<script setup>
	import secondOne from './components/second-one.vue';
	import firstOne from './components/first-one.vue';
	import firstTwo from './components/first-two.vue';
	import hxNumberBox from './components/uni-number-box.vue';
	import sheep from '@/sheep';
	import CategoryApi from '@/sheep/api/product/category';
	import SpuApi from '@/sheep/api/product/spu';
	import {
		onLoad,
		onLaunch,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		onMounted
	} from 'vue';
	import _ from 'lodash';
	import {
		handleTree
	} from '@/sheep/util';
	

	const state = reactive({
		style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
		categoryList: [], // 商品分类树
		goodsList:[],//分类下的商品
		activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标

		pagination: {
			// 商品分页
			list: [], // 商品列表
			total: [], // 商品总数
			pageNo: 1,
			pageSize: 6,
		},
		loadStatus: '',
		//显示购物车
		showFoot:true,
	});
	// const showTabbar = ref(true);

	const {
		safeArea
	} = sheep.$platform.device;
	const pageHeight = computed(() => safeArea.height - 44 - 50);
	onMounted(() => {
	  // 当组件挂载完成后隐藏底部TabBar
	  uni.hideTabBar({
	    animation: false, // 是否需要动画效果，默认为 false
	    success: function () {
	      console.log('TabBar已隐藏');
	    },
	    fail: function (err) {
	      console.error('隐藏TabBar失败：', err);
	    }
	  });
	});

	// 加载商品分类
	async function getList() {
		const {
			code,
			data
		} = await CategoryApi.getCategoryList();
		if (code !== 0) {
			return;
		}
		state.categoryList = handleTree(data);
		console.log(state.categoryList,'state.categoryListstate.categoryList')
	// 	state.categoryList = [
	// 	{id: 1,name: '烧烤'},
	// 	{id: 2,name: '生鲜'},
	// 	{id: 3,name: '绿蔬'},
	// 	{id: 4,name: '肉类'},
	// 	{id: 5,name: '川味'},
	// 	{id: 6,name: '粤菜'},
	// 	{id: 7,name: '湘菜'},
	// 	{id: 8,name: '西餐'},
	// 	{id: 9,name: '饮料'},
	// 	{id: 10,name: '糕点'},
	// 	{id: 11,name: '凉菜'},
	// 	{id: 12,name: '火锅'},
	// 	{id: 13,name: '干锅'}
	// ];
	
	// state.goodsList = [{   
	// 	id: 1,
	// 	type_id:1,
	// 	name:'白果王水果沙拉',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img:'//imgs.1op.cn/i/hxshop/goods/14.jpg',
	// 	price:"",
	// 	oldprice:"",
	// 	//规格
	// 	form: {id:1,name:"尺寸"},
	// 	form_child:[
	// 		{id:81,pid:1,name:"8寸500g", price:"46", oldprice:"100", select:true},
	// 		{id:82,pid:1,name:"10寸600g", price:"97", oldprice:"100",select:false},
	// 		{id:83,pid:1,name:"12寸800g", price:"135", oldprice:"100",select:false},
	// 		{id:84,pid:1,name:"四川麻辣", price:"12", oldprice:"100",select:false},
	// 		{id:85,pid:1,name:"香辣", price:"20", oldprice:"100",select:false},
	// 		{id:86,pid:1,name:"卤香", price:"90", oldprice:"100",select:false},
	// 		{id:87,pid:1,name:"鲜甜广味", price:"80", oldprice:"100",select:false},
	// 		{id:88,pid:1,name:"镇店茴香味", price:"100", oldprice:"100",select:false}
	// 	]
	// },
	// {   
	// 	id: 2,
	// 	type_id:2,
	// 	name:'精品烤山药',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/12.jpg',
	// 	price:"",
	// 	oldprice:"",
	// 	//规格
	// 	form: {id:1,name:"尺寸"},
	// 	form_child:[
	// 		{id:81,pid:1,name:"8寸500g", price:"78", oldprice:"100", select:true},
	// 		{id:82,pid:1,name:"10寸600g", price:"97", oldprice:"100",select:false},
	// 		{id:83,pid:1,name:"12寸800g", price:"135", oldprice:"100",select:false},
	// 		{id:84,pid:1,name:"四川麻辣", price:"12", oldprice:"100",select:false},
	// 		{id:85,pid:1,name:"香辣", price:"20", oldprice:"100",select:false},
	// 		{id:86,pid:1,name:"卤香", price:"90", oldprice:"100",select:false},
	// 		{id:87,pid:1,name:"鲜甜广味", price:"80", oldprice:"100",select:false},
	// 		{id:88,pid:1,name:"镇店茴香味", price:"100", oldprice:"100",select:false}
	// 	]
	// },
	// {   
	// 	id: 3,
	// 	type_id:2,
	// 	name:'川味毛血旺',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/11.jpg',
	// 	price:"4",
	// 	oldprice:"",
		
	// },
	// {   
	// 	id: 4,
	// 	type_id:3,
	// 	name:'吐鲁番烤全羊',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/10.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 5,
	// 	type_id:3,
	// 	name:'红烧肉',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/9.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 6,
	// 	type_id:4,
	// 	name:'新疆特色辣子鸡',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/8.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {
	// 	id: 106,
	// 	type_id:4,
	// 	name:'新疆特色羊排',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/9.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 7,
	// 	type_id:5,
	// 	name:'绝味海鲜拼盘',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/7.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 8,
	// 	type_id:5,
	// 	name:'金色香糯大粽子',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 9,
	// 	type_id:5,
	// 	name:'马梓林香香鸡',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/5.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 10,
	// 	type_id:6,
	// 	name:'草莓味莫普氏蛋糕',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/4.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 23,
	// 	type_id:6,
	// 	name:'川味毛血旺',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/11.jpg',
	// 	price:"4",
	// 	oldprice:"",
		
	// },
	// {   
	// 	id: 24,
	// 	type_id:6,
	// 	name:'吐鲁番烤全羊',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/10.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 25,
	// 	type_id:7,
	// 	name:'红烧肉',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/9.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 26,
	// 	type_id:7,
	// 	name:'新疆特色辣子鸡',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/8.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {   
	// 	id: 27,
	// 	type_id:7,
	// 	name:'绝味海鲜拼盘',
	// 	descripe:"脆糯营养，口感好，健康绿色",
	// 	img: '//imgs.1op.cn/i/hxshop/goods/7.jpg',
	// 	price:"4",
	// 	oldprice:""
	// },
	// {id: 28,type_id:8,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',price:"4",oldprice:""},
	// {id: 29,type_id:8,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/5.jpg',price:"4",oldprice:""},
	// {id: 30,type_id:8,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/4.jpg',price:"4",oldprice:""},
	// {id: 31,type_id:9,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/16.jpg',price:"4",oldprice:""},
	// {id: 32,type_id:9,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/17.jpg',price:"4",oldprice:""},
	// {id: 33,type_id:9,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/15.jpg',price:"4",oldprice:""},
	// {id: 46,type_id:8,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',price:"4",oldprice:""},
	// {id: 34,type_id:10,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/14.jpg',price:"4",oldprice:""},
	// {id: 35,type_id:10,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/13.jpg',price:"4",oldprice:""},
	// {id: 45,type_id:8,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',price:"4",oldprice:""},
	// {id: 36,type_id:10,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/12.jpg',price:"4",oldprice:""},
	// {id: 37,type_id:10,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/11.jpg',price:"4",oldprice:""},
	// {id: 38,type_id:11,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/10.jpg',price:"4",oldprice:""},
	// {id: 44,type_id:8,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',price:"4",oldprice:""},
	// {id: 39,type_id:12,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/9.jpg',price:"4",oldprice:""},
	// {id: 40,type_id:12,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/8.jpg',price:"4",oldprice:""},
	// {id: 13,type_id:13,name:'金色香糯大粽子',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/6.jpg',price:"4",oldprice:""},
	// {id: 41,type_id:12,name:'马梓林香香鸡',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/7.jpg',price:"4",oldprice:""},
	// {id: 42,type_id:13,name:'草莓味莫普氏蛋糕',descripe:"脆糯营养，口感好，健康绿色",img: '//imgs.1op.cn/i/hxshop/goods/1.jpg',price:"4",oldprice:""}
	// ];
		
		
	}

	// 选中菜单
	const onMenu = (val) => {
		state.activeMenu = val;
		if (state.style === 'first_one' || state.style === 'first_two') {
			state.pagination.pageNo = 1;
			state.pagination.list = [];
			state.pagination.total = 0;
			getGoodsList();
		}
	};

	// 加载商品列表
	async function getGoodsList() {
		// 加载列表
		state.loadStatus = 'loading';
		const res = await SpuApi.getSpuPage({
			categoryId: state.categoryList[state.activeMenu].id,
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		});
		if (res.code !== 0) {
			return;
		}
		// 合并列表
		state.pagination.list = _.concat(state.pagination.list, res.data.list);
		state.pagination.total = res.data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	// 加载更多商品
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getGoodsList();
	}

	onLoad(async () => {
		await getList();
		// 如果是 first 风格，需要加载商品分页
		if (state.style === 'first_one' || state.style === 'first_two') {
			onMenu(0);
		}
	});
	onLaunch(() => {
	  console.log('Component is shown');
	  // 隐藏原生tabBar
	  uni.hideTabBar();
	});

	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	//主题颜色
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;
	.s-category {
		:deep() {
			.side-menu-wrap {
				width: 200rpx;
				height: 100%;
				padding-left: 12rpx;
				background-color: #f6f6f6;

				.menu-item {
					width: 100%;
					height: 88rpx;
					position: relative;
					transition: all linear 0.2s;

					.menu-title {
						line-height: 32rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333;
						margin-left: 28rpx;
						position: relative;
						z-index: 0;

						&::before {
							content: '';
							width: 64rpx;
							height: 12rpx;
							background: linear-gradient(90deg,
									var(--ui-BG-Main-gradient),
									var(--ui-BG-Main-light)) !important;
							position: absolute;
							left: -64rpx;
							bottom: 0;
							z-index: -1;
							transition: all linear 0.2s;
						}
					}

					&.menu-item-active {
						background-color: #fff;
						border-radius: 20rpx 0 0 20rpx;

						&::before {
							content: '';
							position: absolute;
							right: 0;
							bottom: -20rpx;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
						}

						&::after {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 0;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
						}

						.menu-title {
							font-weight: 600;

							&::before {
								left: 0;
							}
						}
					}
				}
			}

			.right {
				width: 76%;
				left: 24%;

				.goodsListBox {
					padding-bottom: 100px;

					.category {
						// 				width: 94%;
						padding: 0 15px 10px 15px;

						.s-item {
							height: 45px;
							line-height: 45px;
							font-size: 16px;
							background: #ffffff;
							color: #555555;
							position: sticky;
							top: 0;
							z-index: 18;
						}

						.list:last-child {
							margin-bottom: 0;
						}

						.list {
							margin-bottom: 20px;
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.box:first-child {
								.m-store-item {
									margin-top: 0;
								}
							}

							.box {
								width: 100%;

								.m-store-item {
									display: flex;
									flex-direction: row;
									width: 100%;
									justify-content: space-between;
									align-items: flex-end;
									margin-top: 15px;
									margin-bottom: 15px;

									.m-img {
										flex: 0 0 85px;
										height: 85px;
										background: #eee;
										border-radius: 4px;
									}

									.m-text {
										flex: 1;
										position: relative;
										height: 85px;
										padding: 0 6px;
										display: flex;
										align-content: space-between;
										flex-direction: column;

										.m-title {
											font-size: 16px;
											color: #555555;
											height: 21px;
											font-weight: bold;
										}

										.m-descripe {
											font-size: 12px;
											color: #999999;
											margin-top: 5px;
											height: 35px;
										}

										.m-price-box {
											height: 24px;
											font-weight: bold;
											display: flex;
											flex-direction: row;
											align-items: flex-end;

											.symbol {
												color: #ff582b;
												font-size: 12px;
											}

											.m-price {
												position: relative;
												top: 2px;
												font-size: 18px;
												color: #ff582b;
											}

											.m-old-price {
												margin-left: 3px;
												display: flex;
												flex-direction: row;
												font-size: 10px;
												color: #999999;
												margin-top: 5upx;
												text-decoration: line-through;
												font-weight: normal;
											}
										}

										.m-distance {
											position: absolute;
											right: 0;
											bottom: -4px;
											z-index: 16;
											color: #b2b2b2;
											font-size: 20upx;
											text-align: right;

											.jumpPosition {
												position: absolute;
												bottom: 23px;
												right: 0;
												z-index: 2;
												width: 28px;
												height: 28px;
											}
										}

									}

								}
							}
						}
					}
				}
			}

			.goods-list-box {
				background-color: #fff;
				width: calc(100vw - 100px);
				padding: 10px;
			}

			.banner-img {
				width: calc(100vw - 130px);
				border-radius: 5px;
				margin-bottom: 20rpx;
			}
		}
	}
	.foot{
		position: fixed;
		display: flex;
		z-index: 999;
		
		justify-content:center;
		align-items : center; 
		bottom: 0;
		height: 100%;
		width: 100%;
		
		/*width: calc(100% - 32px);*/
		.btn-box{
			position:absolute;
			display: flex;
			bottom: 15px;
			justify-content:center;
			align-items : center; 
			margin:0;
			height: 50px;
			width: calc(100% - 32px);
			z-index: 9;
			&-left{
				background: #222222;
				border-top-left-radius:50px;
				border-top-right-radius:9px;
				border-bottom-left-radius:50px;
				border-bottom-right-radius:9px;
				padding-left: 6upx;
				display: flex;
				flex-direction:column;
				justify-content:center;
				align-self: center;
				width: 70px;
				height: 100%;
				color: #f6d200;
				text-align: center;
				.imgBox{
					display: flex;
					text-align: center;
					justify-content:center;
					image{
						width: 20px;
						height: 20px;
					}
				}
				text{
					font-size: 20upx;
				}
			}
			&-line{
				background: #ffffff;
				width: 2px;
				height: 100%;
			}
			&-center{
				height: 100%;
				flex: auto;
				display: flex;
				justify-content:flex-start;
				align-self: center;
				align-items: center;
				background: #222222;
				border-top-left-radius:8upx;
				border-bottom-left-radius:8upx;
				padding-left: 10upx;
				.cart{
					position: relative;
					width: 36px;
					height: 36px;
					image{
						width: 100%;
						height: 100%;
					}
					.tag{
						position: absolute;
						right: 12upx;
						top: 16upx;
						height: 18px;
						width: 18px;
						background-color: #ff4000;
						color: #ffffff;
						border-radius: 50%;
						z-index: 1;
						font-size: 10px;
						text-align: center;
						line-height: 18px;
					}
				}
				.priceBox{
					flex: auto;
				}
				
			}
			&-right{
				width: 70px;
				height: 100%;
				position: relative;
				display: flex;
				justify-content:flex-start;
				align-self: center;
				align-items: center;
				
				
				.pscj{
					width: 100%;
					height: 100%;
					border-top-right-radius:100upx;
					border-bottom-right-radius:100upx;
					background: #222222;
					text-align: center;
					display: flex;
					justify-content:center;
					align-self: center;
					align-items: center;  
				}
				.jiesuan{
					width: 100%;
					height: 100%;
					font-size: 28upx;
					border-top-right-radius:100upx;
					border-bottom-right-radius:100upx;
					text-align: center;
					display: flex;
					justify-content:center;
					align-self: center;
					align-items: center;    
					background: linear-gradient(45deg, $hx-theme-color-light, $hx-theme-color); 
					font-weight: bold;
					color: #222222;
				}
			}
		}
		.zz{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			// background-color: rgba(0,0,0,.7);
			z-index: 1;
		}
		.cart-box{
			display: flex;
			justify-content: flex-start;
			flex-flow: column;
			background: #ffffff;
			position: absolute;
			bottom: 0; 
			z-index: 2;
			max-height: 66%;
			
			padding-bottom: 62px;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			overflow: hidden;
			width: 100%;
			.rebate-box{
				height: 30px;
				background: #FFC107;
				color: #FF9900;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
			}
			.box-container{
				box-sizing: border-box;
				padding:0 16px;
			}
			.operating-box{
				font-size: 12px;
				line-height: 40px;
				height: 40px;
				border-bottom: 1px solid #f6f6f6;
				color: #666666;
				display: flex;
				flex-direction: row;
				&_right{
					flex: 1;
				}
				&_left{
					display: flex;
					flex-direction: row;
				}
				
			}
			.goods-box{
				height: 100%;
			    overflow: hidden;
				flex: 1;
				display: flex;
				.goods-list-scroll{
					height: 100%;
					
					.goods-list{
						
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						
						.box{
							width: 100%;
							border-bottom: 1px solid #f6f6f6;
							box-sizing: border-box;
							padding: 0 16px;
							.m-store-item{
								display: flex;
								flex-direction: row;
								width: 100%;
								justify-content: space-between;
								align-items: flex-end;
								padding-top: 15px;
								padding-bottom: 15px;
								.m-img{
									flex: 0 0 85px;
									height: 85px;
									background: #eee;
									border-radius: 4px;
								}
								.m-text{
									flex: 1;
									position: relative;
									height: 85px;
									padding: 0 6px;
									display: flex;
									align-content: space-between;
									flex-direction: column;
									.m-title{
										font-size: 16px;
										color:#555555;
										height: 21px;
										font-weight: bold;
									}
									.m-descripe{
										font-size: 12px;
										color:#999999;
										margin-top: 5px;
										height: 35px;
									}
									.m-price-box{
										height: 24px;
										font-weight: bold;
										display: flex;
										flex-direction: row;
										align-items: flex-end;
										.symbol{
											color:#ff582b;
											font-size: 12px;
										}
										.m-price{
											position: relative;
											top: 2px;
											font-size: 18px;
											color:#ff582b;
										}
										.m-old-price{
											margin-left: 3px;
											display: flex;
											flex-direction: row;
											font-size: 10px;
											color:#999999;
											margin-top: 5upx;
											text-decoration: line-through;
											font-weight: normal;
										}
									}
									.m-distance{
										position: absolute;
										right: 0;
										bottom: -4px;
										z-index: 16;
										color:#b2b2b2;
										font-size: 20upx;
										text-align: right;
										.jumpPosition{
											position: absolute; 
											bottom: 23px;
											right: 0;
											z-index: 2;
											width: 28px;
											height: 28px;
										}
									}
									
								}
								
							}
						}
					}
				}
			}
		}
	}
	
	
</style>