<template>
	<view class="container">
		<view class="header">
			<picker
				@change="curStoreChange"
				mode="selector" 
				range-key="name" 
				:range="curStoreList"
				value="0"
				:disabled="storeListDisabled"
			>
				<view class="header-store-selecter">
					<view class="header-store-selecter-name">{{ curStore.name ? curStore.name : '' }}</view>
					<image class="header-store-selecter-right-img" mode="aspectFit" src="/static/images/icon/retail/dropDown.png"></image>
				</view>
			</picker>
			<view class="header-search-row">
				<view @click="searchTrigger">
					<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
					<input type="text" placeholder="请输入商品名称" disabled />
				</view>
				<button hover-class="hover-active" @click="searchTrigger">搜索</button>
			</view>
		</view>
		
		<view class="main" :style="{ height:mainHeight }">
			<scroll-view class="main-left" :scroll-top="categoryScrollTop" scroll-y="true" @scroll="categoryOnScroll">
				<view class="main-left-list" v-if="item.isCateShow" v-for="item in goodsInfo" :key="item.cate.id">
					<button plain=true @click="mainCategoryClick(item.cate.id, item.isShow)" :style="{ fontWeight: item.style.fontWeight, color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.cate.name }}</button>
				</view>
			</scroll-view>
			<scroll-view class="main-right" scroll-top="0" scroll-y="true" v-if="scrollItem.isShow" v-for="scrollItem in goodsInfo" :key="scrollItem.cate.id" @scrolltolower="refreshList()">
				<view class="main-right-list" v-for="item in scrollItem.goods_list" :key="item.id">
					<view class="item-left">
						<image mode="aspectFit" :src="item.goods_img"></image>
						<view v-if="item.erp_goods.stock_num?false:true" class="item-left-empty">
							<view>盘罄</view>
						</view>
					</view>
					<view class="item-right">
						<view class="item-right-top">
							<view class="item-right-name">{{ item.goods_name }}</view>
							<view class="item-right-spec">{{ `${item.erp_goods.erp_goods_specs}/${item.erp_goods.erp_goods_type}/${item.erp_goods.erp_goods_sku}` }}</view>
							<!-- <view class="item-right-special">特价</view> -->
						</view>
						
						<view class="item-right-price-count">
							<view class="item-right-price-row" :style="{color:item.erp_goods.stock_num?'#FF873D':'#9A9A9D'}">
								<view><text>￥</text>{{ item.assistant_price }}</view>
							</view>
							
							<view class="item-right-count-row">
								<image v-if="item.count?true:false" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
								<view v-if="item.count?true:false">{{ item.count }}</view>
								<image v-if="item.erp_goods.stock_num?true:false" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
								<image v-else mode="aspectFit" src="/static/images/icon/retail/addEmpty.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<hoverCartList 
			:isShowCartList="isShowCartList" 
			:cartList="cartList" 
			@update:clearCart="clearCart" 
			@update:cartCountClick="cartCountClick" 
			@update:maskClick="cartClick"
		>
		</hoverCartList>

		<view class="footer">
			<view>
				<view class="footer-price">
					<view @click="cartClick">
						<image mode="aspectFit" src="/static/images/icon/retail/cart.png"></image>
						<view v-if="totalCount">{{ totalCount }}</view>
					</view>
					<view>合计：</view>
					<view><text>￥</text>{{ totalPrice }}</view>
				</view>
				<view class="footer-confirm">
					<button hover-class="hover-active" @click="cartConfirm" :style="{opacity:cartConfirmOpacity}">去结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '../../../../utils/util.js';
import tools from '../../js/tools';	
import retailServer from '../../js/retail_server';
import retailApi from '../../js/retail_api';
import hoverCartList from '../../components/hover_cart_list/hover_cart_list';
import { mapState } from 'vuex'

export default {
    components: { 
			'hoverCartList': hoverCartList ,
		},
    data(){
			return {
				categoryBtnStyle: {		// 分类按钮样式
					default: { fontWeight:"normal", color:"#9A9A9D", backgroundColor:"rgba(0,0,0,0)" },
					click: { fontWeight:"600", color:"#009874", backgroundColor:"rgba(0,152,116,0.2)" },
				},
				categoryScrollTop: 0,			// 分类滚动值
				categoryOldScrollTop: 0,	// 分类滚动旧值
				// 分类索引值，默认第一项是搜索，第二项可能是热销，会在获取接口数据时判断，然后过滤掉
				categoryIndex: 1,		
				params: {
					brand_id: '',
					stadium_id: '',
					type_key: '',
					key: '',
					page: 1,
					page_size: 10,
					is_sale: 1,
					is_show_on_assistant: 1
				},
				total: 0,
				searchData: null,
				searchText: '',
				
				// curStoreList: [{ id: '', name: '请选择门店'}],		// 当前门店列表
				curStoreList: [],			// 当前门店列表
				storeListDisabled: false,	// 当前门店列表禁用状态
				curStore: {},			 		// 当前门店
				goodsInfo: [],				// 商品信息
				mainHeight: "0rpx",		// 主内容高度
				totalPrice: 0,				// 总价
				totalCount: 0,				// 总量
				
				cartList: [],						// 购物车列表
				cartListFinal: [],			// 购物车最终列表数据
				isShowCartList: false,	// 是否显示购物车列表
				cartConfirmOpacity: 0.3	// 结算按钮
			}
    },
    onLoad() {
			this.params.brand_id = this.brandInfo.brand.id;
			this.deleteSearchLocal();	// 删除本地的搜索记录
			this.getStoreList();			// 获取店铺列表
			this.fixMainHeight();			// 适配主内容高度
    },
		onShow() {
			this.getSearchLocal();	// 获取本地的搜索记录
			this.getRetailStatus();	// 获取收款出库状态
		},
		computed:{
			...mapState([ 'brandInfo',])
		},
		watch: {
			cartList() { 
				this.setCartConfirmStyle(); 
			},
		},
    methods: {
			// 获取收款出库状态
			getRetailStatus() {
				let _this = this;
				
				uni.getStorage({
					key: 'retailStatus',
					success: (res) => {
						_this.searchText = '';
						_this.params.page = 1;
						_this.params.type_key = '';
						_this.params.key = '';
						_this.getCategoryInfo();		// 重新获取 刷新商品数据，把出库的数据清了
						_this.deleteRetailLocal();	// 删除收款出库状态
					},
					fail: (err) => { _this.deleteRetailLocal();},
				});	
			},
			// 删除收款出库状态
			deleteRetailLocal() {
				this.searchData = null;
				uni.removeStorage({ key: 'retailStatus', success: (res) => {} });
			},
			// 分类列表滚动监听
			categoryOnScroll(e) {
				this.categoryOldScrollTop = e.detail.scrollTop;
			},
			// 分类列表回到顶部
			categoryGoTop(e) {
				let _this = this;
				_this.categoryScrollTop = _this.categoryOldScrollTop;
				_this.$nextTick(() => { _this.categoryScrollTop = 0; });
			},
			// 设置搜索数据 默认列表第一项是存放搜索数据
			setSearchData(data) {
				util.showLoad();
				setTimeout(util.hideLoad, 500);
				this.searchData = data;
				this.goodsInfo[0].goods_list = data.list;
				this.searchText = data.searchText;
				this.setCount(0);
				this.categoryGoTop();	// 每次搜索后，分类列表都要滚动到顶部
				this.goodsInfo[0].isCateShow = true;
				this.mainCategoryClick(this.goodsInfo[0].cate.id, this.goodsInfo[0].isShow);
			},
			// 获取本地的历史搜索
			getSearchLocal() {
				let _this = this;
				
				uni.getStorage({
					key: 'searchData',
					success: (res) => {
						_this.setSearchData(res.data);	// 设置搜索数据
						_this.deleteSearchLocal();	// 删除本地的历史搜索
					},
					fail: (err) => { _this.deleteSearchLocal(); },
				});	
			},
			// 删除本地的历史搜索
			deleteSearchLocal() {
				this.searchData = null;
				uni.removeStorage({ key: 'searchData', success: (res) => {} });
			},
			// 触发搜索
			searchTrigger() {
				let data = { curStore: this.curStore, brandInfo: this.brandInfo };
				uni.navigateTo({
					url: `/subpackage/retail/pages/search/search?data=${encodeURIComponent(JSON.stringify(data))}`
				});
			},
			// 清空购物车
			clearCart() {
				this.cartList = [];
				for (let i = 0; i < this.goodsInfo.length; ++i) {
					for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
						this.goodsInfo[i].goods_list[j].count = 0;
				}
				this.isShowCartList = false;
				this.calcTotalPriceAndCount();			// 计算总价跟总量
			},
			// 购物车列表数量选项触发
			cartCountClick(type, i) {
				switch (type) {
					case "add": {
						if (this.cartList[i].count + 1 > this.cartList[i].erp_goods.stock_num) {
							util.showNone("库存就这么多了！");
							return;
						}
						
						this.cartList[i].count += 1;
					} break;
					case "sub": {
						if (this.cartList[i].count > 0) this.cartList[i].count -= 1;
					} break;
				}
				// 找主页当前列表有无该数据
				for (let k = 0; k < this.goodsInfo.length; ++k) {
					if (this.goodsInfo[k].isShow) {
						for (let j = 0; j < this.goodsInfo[k].goods_list.length; ++j) {
							if (this.goodsInfo[k].goods_list[j].id === this.cartList[i].id) {
								this.goodsInfo[k].goods_list[j].count = this.cartList[i].count;
							}
						}
						break;
					}
				}
				
				if (this.cartList[i].count <= 0) this.cartList.splice(i, 1);	// 没数量了就删掉
				if (!this.cartList.length) this.isShowCartList = false;	// 列表没了，隐藏
				this.calcTotalPriceAndCount();			// 计算总价跟总量
			},
			// 购物车确认
			cartConfirm() {
				if (this.cartList.length <= 0) return;
				this.cartListFinal = JSON.parse(JSON.stringify(this.cartList));
				this.isShowCartList = false;
				let data = { cartListFinal: this.cartListFinal, curStore: this.curStore, totalPrice: this.totalPrice };
				uni.navigateTo({
					url: `/subpackage/retail/pages/confirm_goods/confirm_goods?data=${encodeURIComponent(JSON.stringify(data))}`
				});
			},
			// 加入购物车列表
			addToCartList(goodsItem) {
				let mark = -1;
				for (let i = 0; i < this.cartList.length; ++i) {
					if (this.cartList[i].id === goodsItem.id) {
						mark = i;
						this.cartList[i].count = goodsItem.count;
						break;
					}
				}
				if (mark === -1) {
					this.cartList.push(JSON.parse(JSON.stringify(goodsItem)));
				} else if (goodsItem.count <= 0) {
					this.cartList.splice(mark, 1);
				}
			},
			setCartConfirmStyle() {
				this.cartConfirmOpacity = this.cartList.length > 0 ? 1 : 0.3;
			},
			// 购物车点击
			cartClick() {
				if (!this.cartList.length) return;
				this.isShowCartList = !this.isShowCartList;
			},
			// 适配主内容高度
			fixMainHeight() {
				let _this = this;
				uni.getSystemInfo({
					success: res => {
						console.log(res);
						let sumHeight = res.windowHeight;	// 获取可用的总高度
						let query = uni.createSelectorQuery().select(".header");
						
						query.boundingClientRect(data => {
							sumHeight -= data.height;
							query = uni.createSelectorQuery().select(".footer");
							
							query.boundingClientRect(data => {
								sumHeight -= data.height;
								_this.mainHeight = `${tools.px2rpx(sumHeight)}rpx`;
							}).exec();
						}).exec();
					}
				});
			},
			// 找搜索跟热销 不同于其他分类的数据
			findDifferentData() {
				let searchAndHotData = [];
				for (let i = 0; i < this.categoryIndex; ++i) {
					for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
						searchAndHotData.push(this.goodsInfo[i].goods_list[j]);
				}
				
				let otherData = [];
				for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) {
					for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
						otherData.push(this.goodsInfo[i].goods_list[j]);
				}
				
				let mark = false;
				let tempData = [];
				for (let i = 0; i < searchAndHotData.length; ++i) {
					mark = false;	// 表示不在其他分类里面
					for (let j = 0; j < otherData .length; ++j) {
						if (searchAndHotData[i].id == otherData [j].id) mark = true;
					}
				
					// 如果不在 并且有数量，那么加进列表
					if (!mark && searchAndHotData[i].count) tempData.push(searchAndHotData[i]);
				}
				return tempData;
			},
			// 计算总价跟总量
			calcTotalPriceAndCount() {
				let price = 0.0;
				let count = 0;
				
				for (let i = 0; i < this.cartList.length; ++i) {
					price = parseFloat(price) + parseFloat(this.cartList[i].count * this.cartList[i].assistant_price);
					count += this.cartList[i].count;
				}
				this.totalPrice = price.toFixed(2);
				this.totalCount = count;
			},
			// 主页数量选项触发
			mainCountClick(type, id, cateName, goodsId, stockNum) {
				if (stockNum <= 0) return;
				
				// 找点击的对应分类
				let item = null;
				for (let i = 0; i < this.goodsInfo.length; ++i) {
					if (this.goodsInfo[i].cate.id == id) {
						item = this.goodsInfo[i];
						break;
					}
				}
				
				// 分类有了，继续找该分类下的商品id
				let goodsItem = null;
				if (item) {
					for (let i = 0; i < item.goods_list.length; ++i) {
						if (item.goods_list[i].id == goodsId) {
							goodsItem = item.goods_list[i];
							break;
						}
					}
				}
				
				if (goodsItem) {
					switch (type) {
						case "add": {
							if (goodsItem.count + 1 > goodsItem.erp_goods.stock_num) {
								util.showNone("库存就这么多了！");
								return;
							}
							goodsItem.count += 1;
						} break;
						case "sub": {
							if (goodsItem.count <= 0) return;
							goodsItem.count -= 1;	
						} break;
					}
				}
				
				this.addToCartList(goodsItem);	// 将主页数据加入到购物车列表
				this.calcTotalPriceAndCount();	// 计算总价跟总量
			},
			// 主页分类选项触发
			mainCategoryClick(id, isShow) {
				if (isShow) return;
				// 将所有按钮恢复默认状态，点击的按钮则是另外的状态
				let item = null;
				for (let i = 0; i < this.goodsInfo.length; ++i) {
					this.goodsInfo[i].style = this.categoryBtnStyle.default;
					this.goodsInfo[i].isShow = false;
					
					if (this.goodsInfo[i].cate.id == id) item = this.goodsInfo[i];
				}
				if (item) {
					item.style = this.categoryBtnStyle.click;
					item.isShow = true;
					this.params.type_key = item.cate.classifyer_id;
					this.params.key = item.cate.name === '搜索' ? this.searchText : '';
					this.params.page = 1;
					
					util.showLoad();
					if (!this.searchData) {
						item.goods_list = [];
						this.getGoodsInfo();	// 获取商品信息
					} else {
						util.hideLoad();
					}
				}
			},
			// 获取商品分类
			async getCategoryInfo() {
				let _this = this;
				_this.goodsInfo = [];
				_this.params.page = 1;
				
				// 获取分类
				let res = await retailServer.get({
					url: retailApi.getCategoryList,
					data: {
						parent_classifyer_id: `${_this.brandInfo.brand.id}-${_this.curStore.id}-零售商品分类` 
					},
					isDefaultGet: false,
					failMsg: '加载商品分类数据失败！'
				}).catch(() => {});
				// 默认第一个搜索，第二个全部
				_this.categoryIndex = 2;	// 分类索引值从2开始，前面两项过滤掉（搜索、全部）
				_this.goodsInfo = [{
						isCateShow: false, isShow: false, style: _this.categoryBtnStyle.default, goods_list: [],
						cate: { id: -2, classifyer_id: '', name: "搜索" }
					}, {
						isCateShow: true, isShow: true, style: _this.categoryBtnStyle.click, goods_list: [],
						cate: { id: -1, classifyer_id: '', name: "全部" }
					}
				];
				if (res && res.data && res.data.data) {
					for (let i = 0; i < res.data.data.length; ++i) {
						_this.goodsInfo.push({
							isCateShow: true, isShow: false, style: _this.categoryBtnStyle.default, goods_list: [],
							cate: { 
								id: res.data.data[i].id, 
								classifyer_id: res.data.data[i].classifyer_id, 
								name: res.data.data[i].name
							}
						});
					}
					_this.cartList = [];	// 购物车的数据清空，每次切换门店都执行
					_this.totalCount = 0;
					_this.totalPrice = 0;
					_this.categoryGoTop();	// 分类列表需要滚动至顶部
				}
				
				this.getGoodsInfo();
			},
			// 获取商品信息
			async getGoodsInfo() {
				let _this = this;
				let goodsRes = await retailServer.get({
					url: retailApi.getGoodsList,
					data: _this.params,
					isDefaultGet: false,
					failMsg: '加载商品数据失败！'
				}).catch(() => {});
				if (goodsRes && goodsRes.data && goodsRes.data.data && goodsRes.data.data.list) {
					for (let j = 0; j < goodsRes.data.data.list.length; ++j) {
						goodsRes.data.data.list[j].count = 0;	// 用来计数
						goodsRes.data.data.list[j].erp_goods = goodsRes.data.data.list[j].erp_goods || {};
					}
					for (let i = 0; i < _this.goodsInfo.length; ++i) {
						if (_this.goodsInfo[i].isShow) {
							// _this.goodsInfo[i].goods_list = goodsRes.data.data.list;
							_this.goodsInfo[i].goods_list = _this.goodsInfo[i].goods_list.concat(goodsRes.data.data.list);
							this.setCount(i);	// 购物车列表的数量覆盖上当前列表的数量
							break;
						}
					}
					_this.total = goodsRes.data.data.total;
				}
				util.hideLoad();
			},
			setCount(index) {
				for (let i = 0; i < this.cartList.length; ++i) {
					for (let j = 0; j < this.goodsInfo[index].goods_list.length; ++j) {
						if (this.cartList[i].id === this.goodsInfo[index].goods_list[j].id) {
							this.goodsInfo[index].goods_list[j].count = this.cartList[i].count;
							break;
						}
					}
				}
			},
			refreshList() {
				// 还没到最后一页
				if (this.params.page * this.params.page_size <= this.total) {
					util.showLoad();
					this.params.page += 1;
					this.getGoodsInfo();
				}
			},
			// 店铺列表
			getStoreList() {
				util.showLoad();
				
				let _this = this;
				return retailServer.get({
					url: retailApi.assistantGetAssistantStadiums,
					data: {
						// brand_id: _this.indexData.brand.id
					},
					isDefaultGet: false,
					failMsg: '加载店铺失败！'
				}).then(res => {
					if (res.data.code == 0) {
						let _list = res.data.data.list || [];
						_this.curStoreList = [..._this.curStoreList, ..._list];
						_this.curStore = _this.curStoreList[0] || {};
						_this.storeListDisabled = _this.curStoreList.length > 1 ? false : true;
						_this.params.stadium_id = _this.curStore.id;
						_this.getCategoryInfo();	// 获取商品分类
					}
					else {
						util.hideLoad();
						util.showNone(res.data.message || '操作失败！');
					}
				});
			},
			// 当前店铺变化
			curStoreChange(e) {
				let _this = this;
				let curStoreList = _this.curStoreList;
				_this.curStore = curStoreList[e.detail.value] || {};
				_this.$nextTick(function() {
					util.showLoad();
					_this.getCategoryInfo();	// 获取商品分类
				});
			},
    }
}
</script>

<style lang="scss">
	@import '~style/public.scss';
	$orange: #FF873D;
	page {
		background-color: white;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		padding-bottom: 0rpx;
		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		
		.header {
			display: flex;
			flex-direction: column;
			background-color: #F2F2F7;
			z-index: 0;
			
			.header-store-selecter {
				@include centerFlex(flex-start);
				padding-left: 38rpx;
				fotn-size: 32rpx;
				
				& {
					position: relative;
					height: 78rpx;
					line-height: 78rpx;
				}
				.header-store-selecter-name {
					height: 100%;
					line-height: 78rpx;
					margin-right: 14rpx;
				}
				.header-store-selecter-right-img {
					width: 18rpx;
					height: 18rpx;
				}
			}
			.header-search-row {
				@include centerFlex(center);
				height: 92rpx;
				margin-top: 17rpx;
				
				>view {
					@include centerFlex(space-between);
					flex-grow: 1;
					height: 100%;
					border-radius: 10rpx;
					background-color: white;
					margin-left: 24rpx;
					padding: 0 20rpx;
					
					>input {
						flex-grow: 1;
						height: 100%;
					}
					>image{
						flex-shrink: 0;
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
				>button {
					flex-shrink: 0;
					margin: 0 20rpx;
					padding: 0 0;
					width: 142rpx;
					height: 88rpx;
					line-height: 88rpx;
					color: white;
					background-color: $themeColor;
					border-radius: 10rpx;
					white-space: nowrap;
					font-size: 32rpx;
				}
			}
		}
		.main {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #F2F2F7;
			padding-top: 24rpx;
			padding-bottom: calc( 18rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
			padding-bottom: calc( 18rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
			
			.main-left {
				width: 180rpx;
				margin-right: 12rpx;
				background-color: white;
				border-top-right-radius: 30rpx;
				
				.main-left-list {
					display: flex;
					flex-direction: column;
					
					> button {
						width: 100%;
						height: 92rpx;
						line-height: 92rpx;
						border-radius: 0rpx;
						border-top-right-radius: 30rpx;
						border: 0rpx;
						font-size: 28rpx;
					}
				}
			}
			.main-right {
				display: flex;
				flex-direction: column;
				width: 558rpx;
				background-color: white;
				border-radius: 10rpx;
				padding-left: 20rpx;
				
				.main-right-list {
					display: flex;
					flex-direction: row;
					padding: 20rpx 0;
					overflow: hidden;
					
					.item-left {
						position: relative;
						width: 172rpx;
						height: 172rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
						@include centerFlex(center);
						
						>image {
							max-width: 100%;
							max-height: 100%;
						}
						.item-left-empty {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							background-color: rgba(0,0,0,0.5);
							border-radius: 10rpx;
							
							>view {
								font-size: 28rpx;
								background: white;
								width: 88rpx;
								height: 88rpx;
								border-radius: 50%;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%,-50%);
								@include centerFlex(center);
							}
						}
					}
					.item-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex-grow: 1;
						padding-right: 20rpx;
						
						.item-right-top {
							display: flex;
							flex-direction: column;
							
							.item-right-name {
								font-size: 28rpx;
								word-break: break-all;
							}
							.item-right-spec {
								margin: 8rpx 0 14rpx 0;
								font-size: 24rpx;
								color: #9A9A9D;
								word-break: break-all;
							}
							.item-right-special {
								width: 58rpx;
								height: 28rpx;
								margin-bottom: 10rpx;
								font-size: 20rpx;
								color: #E60012;
								background: rgba(230,0,18,0.13);
								border-radius: 6px;
								text-align: center;
							}
						}
						
						.item-right-price-count {
							@include centerFlex(space-between);
							
							.item-right-price-row {
								color: $orange;
								word-break: break-all;
								
								>view {
									font-size: 36rpx;
									line-height: 32rpx;
									font-weight: 500;
									
									>text {
										font-size: 28rpx;	
										line-height: 28rpx;
										font-weight: 400;
									}
								}
							}
							.item-right-count-row {
								@include centerFlex(flex-start);
								
								>image {
									&:first-child {
										width: 36rpx;
										height: 36rpx;
									}
									&:nth-child(3) {
										width: 36rpx;
										height: 36rpx;
									}
								}
								>view {
									margin: 0 12rpx;
									font-size: 28rpx;
								}
							}
						}
					}
				}
			}
		}
		.footer {
			@include centerFlex(center);
			position: fixed;
			bottom: calc( 0rpx + constant(safe-area-inset-bottom));
			bottom: calc( 0rpx + env(safe-area-inset-bottom));
			width: 100%;
			height: 108rpx;
			background-color: white;
			
			>view {
				@include centerFlex(space-between);
				flex-grow: 1;
				
				.footer-price {
					@include centerFlex(flex-start);
					margin-left: 36rpx;
					
					>view {
						&:first-child {
							position: relative;
							@include centerFlex(flex-start);
							
							>image {
								width: 84rpx;
								height: 84rpx;
							}
							>view {
								position: absolute;
								top: 0;
								right: 0;
								color: white;
								background-color: #E60012;
								font-size: 20rpx;
								line-height: 40rpx;
								border-radius: 100%;
								width: 40rpx;
								height: 40rpx;
								text-align: center;
							}
						}
						&:nth-child(2) {
							flex-shrink: 0;
							margin-left: 10rpx;
							font-size: 28rpx;
							line-height: 28rpx;
						}
						&:nth-child(3) {
							font-size: 40rpx;
							line-height: 40rpx;
							color: $orange;
							
							>text {
								font-size: 28rpx;
								line-height: 28rpx;
							}
						}
						&:nth-child(4) {
							font-size: 40rpx;
							line-height: 40rpx;
							color: $orange;
							
							>text {
								font-size: 28rpx;
								line-height: 28rpx;
							}
						}
					}
				}
				
				.footer-confirm {
					@include centerFlex(flex-start);
					margin-right: 24rpx;
					
					>button {
						flex-shrink: 0;
						width: 240rpx;
						height: 88rpx;
						font-weight: 500;
						font-size: 32rpx;
						line-height: 88rpx;
						border: 0rpx;
						border-radius: 10rpx;
						color: white;
						background-color: $themeColor;
						white-space: nowrap;
						padding: 0 0;
						opacity: 0.3;
					}
				}
			}
		}
	}
</style>