ydd_front/mer_uniapp/pages/merchant/home/index.vue

<template>
	<view class="container" :style="{ height: winHeight+ 'px' }">
		<!-- #ifdef MP -->
		<view class="cart_nav">
			<nav-bar iconColor='#fff' ref="navBarRef" :navTitle="merchanInfo.name" backgroundColor="#FF6702" :isBackgroundColor="false">
			</nav-bar>
		</view>
		<!-- #endif -->
		<view class="main">
			<view class="nav">
				<view class="header">
					<view class="left">
						<view class="store-name">
							<text style="font-weight: 600;font-size: 35rpx;color: #141414;">{{ merchanInfo.name }}</text>
							<view class="iconfont iconarrow-right"></view>
						</view>
						<view class="store-score" style="margin: 7rpx 0;">
							<text style="font-weight: 600;font-size: 27rpx;color: #FD6716;">{{ merchanInfo.starLevel }}分</text>
							<text style="font-size: 21rpx;color: #999999;margin-left: 6rpx;">月销 {{ merchanInfo.sales || 0 }}</text>
						</view>
						<view class="store-addr">
							<text style="font-size: 23rpx;color: #141414;">商家地址：{{ merchanInfo.addressDetail }}</text>
						</view>
						<view class="store-tip" style="padding: 10rpx 30rpx 10rpx 15px ;height: 48rpx;">
							<swiper :indicator-dots="false" :autoplay="true" interval="2500" :duration="500" vertical="true" circular="true">
								<block v-for="(item,index) in merchanInfo.headline" :key='index'>
									<swiper-item catchtouchmove='catchTouchMove'>
										<view class='text acea-row row-between-wrapper'>
											<view class='newsTitle'>
												<text class='iconfont icon-laba ' style="font-size: 24rpx;margin-right: 10rpx;"></text>
												<text>{{item.title}}</text>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 10rpx; background-color: #F8F9FD;"></view>
		</view>
		<view class="content">
			<scroll-view style="height: 950rpx" class="menus" scroll-with-animation scroll-y>
				<view class="wrapper">
					<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in goods"
					 :key="index" @tap="handleMenuTap(item.id)">
						<text>{{ item.name }}</text>
						<view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>
					</view>
				</view>
			</scroll-view>
			<!-- goods list begin -->
			<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll"
			 :scroll-into-view="menuScrollIntoView">
				<view class="wrapper">
					<view class="list">
						<!-- category begin -->
						<view style="font-weight: 400;font-size: 21rpx;color: #999999;text-align: center;margin-bottom: 19rpx;">————温馨提示:湿度选择,避免浪费
							————</view>
						<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`">
							<view class="title">
								<text>{{ item.name }}</text>
								<image :src="item.icon" class="icon"></image>
							</view>
							<view class="items">
								<!-- 商品 begin -->
								<!-- <view v-if="!item.goodsList">无商品</view> -->
								<view class="good" v-for="(good, key) in item.childList" :key="key">
									<image :src="good.icon" class="image" @tap="console.log('点击图片')"></image>
									<view class="right">
										<text class="name">{{ good.name }}</text>
										<view class="tips">
											<text>销量 {{good.sales}}</text>
											<text style="margin-left: 39rpx;">好评率 {{ good.replyChance*100}}%</text>
										</view>
										<view class="price_and_action">
											<text class="price">￥{{ good.price }}</text>
											<view class="btn-group">
												<button type="primary" class="btn property_btn bg-color" hover-class="none" size="mini" @tap="Selectpox(item, good)">
													选规格
												</button>
												<!-- <view class="dot" v-show="goodCartNum(good.id)">{{ goodCartNum(good.id) }}</view> -->
											</view>
											<!-- <view class="btn-group" v-else>
												<button type="default" v-show="goodCartNum(good.id)" plain class="btn reduce_btn" size="mini" hover-class="none"
												 @tap="handleReduceFromCart(item, good)">
													<view class="iconfont iconsami-select">-</view>
												</button>
												<view class="number" v-show="goodCartNum(good.id)">{{ goodCartNum(good.id) }}</view>
												<button type="primary" class="btn add_btn bg-color" size="min" hover-class="none" @tap="handleAddToCart(item, good, 1)">
													<view class="iconfont iconadd-select">+</view>
												</button>
											</view> -->
										</view>
									</view>
								</view>
								<!-- 商品 end -->
							</view>
						</view>
						<!-- category end -->
					</view>
				</view>
			</scroll-view>
			<!-- goods list end -->
		</view>
		<!-- content end -->
		<!-- 购物车栏 begin -->
		<view class="cart-box">
			<view class="mark">
				<image src="/static/img/ic-shopping-cart.png" class="cart-img" @tap="cart.length !== 0 ? lockcatble = !lockcatble : ''"></image>
				<view class="tag" v-if="cart.length > 0">{{ getCartGoodsNumber }}</view>
			</view>
			<view style="font-weight: 500;font-size: 27rpx;color: #999999;" class="price" v-if="cart.length === 0">配送费2元</view>
			<view style="font-weight: 600;font-size: 27rpx;color: #FFFFFF;" class="price" v-else>￥{{ getCartGoodsPrice || 0 }}</view>
			<button :style="{backgroundColor: disabledPay ? '#000' : ''}" type="primary" class="pay-btn bg-color" @tap="toPay"
			 :disabled="disabledPay">
				{{ disabledPay ? `差${spread}元起送` : '去结算' }}
			</button>
		</view>
		<!-- 购物车栏 end -->
		<!-- 打开的购物车 -->
		<view class="mode" v-if="cart.length !== 0 && lockcatble" style="z-index: 9;">
			<view class="mode-1">
				<!-- 判断数量大于0显示 -->
				<view class="mode-clear" v-if="getCartGoodsNumber>0">
					<text class="mode-txt">数量：<text style="color: #FD6716 ;">({{getCartGoodsNumber}})</text></text>
					<text @tap="cart = [], lockcatble = false" class="mode-txt1">清空</text>
				</view>
				<view class="mode-box">
					<view class="items">
						<!-- 商品 begin -->
						<view class="good" v-for="(good, key) in cart" :key="key">
							<image :src="good.icon" class="image" @tap="console.log('点击图片')"></image>
							<view class="right" style="margin-left: 50rpx;">
								<text class="name">{{ good.name }}</text>
								<view class="tips">
									<text>销量 {{good.sales}}</text>
									<text style="margin-left: 39rpx;">好评率 {{ good.replyChance*100}}%</text>
								</view>
								<view class="price_and_action">
									<text class="price">￥{{ good.price * good.number }}</text>
									<view class="btn-group">
										<button type="default" v-show="goodCartNum(good.props_text)" plain class="btn reduce_btn" size="mini"
										 hover-class="none" @tap="handleReduceFromCart(item, good)">
											<view class="iconfont iconsami-select">-</view>
										</button>
										<view class="number" v-show="goodCartNum(good.props_text)">{{ goodCartNum(good.props_text) }}</view>
										<button type="primary" class="btn add_btn bg-color" size="min" hover-class="none" @tap="handleAddToCart(item, good, 1)">
											<view class="iconfont iconadd-select">+</view>
										</button>
									</view>
								</view>
							</view>
						</view>
						<!-- 商品 end -->
					</view>
					<view style="height: 200rpx;">
					</view>
				</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="mode" v-if="selectble">
			<view class="sel-mode-1">
				<view class="good-detail-modal">
					<view class="close" @click="Close">
						<text style="padding: 10rpx; 20rpx">x</text>
					</view>
					<view class="sel-2">
						<image class="neximg" :src="specifications.icon" />
						<view class="nexbox1 flex-around-center">
							<text>销量 {{specifications.sales}}</text>
							<text>好评率 {{ specifications.replyChance*100}}%</text>
							<text class="nexbox-txt3">￥ {{specifications.price}}</text>
						</view>
					</view>
					<!--规格数组  -->
					<scroll-view class="detail" scroll-y>
						<view class="wrapper">
							<view class="properties">
								<view class="property" v-for="(item, index) in good.property" :key="index">
									<view class="title">
										<text class="name">{{ item.attributeName }}</text>
										<!-- <view class="desc" v-if="item.desc">({{ item.desc }})</view> -->
									</view>
									<view class="values">
										<view class="value" v-for="(value, key) in item.optionList" :key="key" :class="{'default': value.is_default}"
										 @tap="changePropertyDefault(index, key)">
											{{ value.optionName }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 数量 -->
					<view class="sel-6">
						<text>数量</text>
						<!-- 加入购物车 -->
						<view class="btn-group">
							<button v-if="!goodCartNum(specifications.props_text)" type="primary" class="btn property_btn bg-color" size="min"
							 hover-class="none" @tap="handleAddToCart(specificationsList, specifications, 1)">
								加入购物车
							</button>
							<template v-else>
								<button type="default" v-show="goodCartNum(specifications.props_text)" plain class="btn reduce_btn" size="mini"
								 hover-class="none" @tap="handleReduceFromCart(specificationsList, specifications)">
									<view class="iconfont iconsami-select">-</view>
								</button>
								<view class="number" v-show="goodCartNum(specifications.props_text)">{{ goodCartNum(specifications.props_text) }}</view>
								<button type="primary" class="btn add_btn bg-color" size="min" hover-class="none" @tap="handleAddToCart(specificationsList, specifications, 1)">
									<view class="iconfont iconadd-select">+</view>
								</button>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getCategoryCacheTree,
		getMerchantInfo,
		getMerchantProList
	} from '@/api/merchant.js';
	import {
		getProductDetail
	} from '@/api/product.js';
	import {
		orderCreate,
		preOrderApi
	} from '@/api/order.js';
	import navBar from '@/components/navBar';
	import {
		getAddressList
	} from '@/api/user.js';
	let app = getApp();
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				merId: 0,
				winHeight: 0,
				merchanInfo: {},
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 112,
				goods: [], //所有商品
				loading: true,
				currentCateId: 1, //默认分类
				cateScrollTop: 0,
				lastScrollTop: 0,
				menuScrollIntoView: '',
				cart: [], //购物车
				goodDetailModalVisible: false, //是否饮品详情模态框
				good: {}, //当前饮品
				category: {}, //当前饮品所在分类
				cartPopupVisible: false,
				sizeCalcState: false,
				orderType: 'takeout',
				store: {
					min_price: 0.01
				},
				specifications: '', //点击的这一项菜品信息
				specificationsList: [], //点击的这一项菜品信息的大类
				selectble: false, //规格弹窗
				productValue: [], //规格数组
				productObj: {}, //规格对象
				productid: '', //选中规格的id
				lockcatble: false, // 购物车弹窗
				addressInfo: {}
			}
		},
		onLoad(options) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			this.merId = uni.getStorageSync('merId')
			//首页数据加载
			// 获取商家信息
			getMerchantInfo(this.merId).then(res => {
				this.merchanInfo = res.data
			});
			// 获取商品列表
			getCategoryCacheTree(this.merId).then(res => {
				console.log(res.data)
				this.goods = res.data
				// this.goods.unshift({
				// 	id: 9999,
				// 	name: '推荐'
				// })
				this.currentCateId = this.goods[0].id
				// this.menuScrollIntoView = `cate-${9999}`
			})
			// 获取用户默认地址
			this.getAddressList()
			// this.getIndexConfig();
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			// this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// #endif

		},
		computed: {
			goodCartNum() { //计算单个饮品添加到购物车的数量
			// this.good
				return (text) => this.cart.reduce((acc, cur) => {
					!text ? text = this.getGoodSelectedProps(this.good) : ''
					if (cur.props_text === text) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			menuCartNum() {
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.cate_id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			getCartGoodsNumber() { //计算购物车总数
				return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			},
			getCartGoodsPrice() { //计算购物车总价
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			},
			disabledPay() { //是否达到起送价
				return this.orderType == 'takeout' && (this.getCartGoodsPrice < this.store.min_price) ? true : false
			},
			spread() { //差多少元起送
				if (this.orderType != 'takeout') return
				return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
			}
		},
		methods: {
			// 获取地址数据
			getAddressList() {
				getAddressList().then(res => {
					console.log('地址', res)
					if (res.code = 200) {
						this.addressInfo = res.data.find(item => item.isDefault === true);
						console.log('默认地址', this.addressInfo)
					}
				})
			},
			handBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleMenuTap(id) { //点击菜单项事件
				this.menuScrollIntoView = `cate-${id}`
				if (!this.sizeCalcState) {
					this.calcSize()
				}

				this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
			},
			handleGoodsScroll({
				detail
			}) { //商品列表滚动事件
				if (!this.sizeCalcState) {
					this.calcSize()
				}
				const {
					scrollTop
				} = detail
				let tabs = this.goods.filter(item => item.top <= scrollTop).reverse()
				if (tabs.length > 0) {
					this.currentCateId = tabs[0].id
				}
			},
			calcSize() {
				let h = 10

				this.goods.forEach(item => {
					let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
					view.fields({
						size: true
					}, data => {
						// if (data.goodsList) {
						item.top = h
						h += data.height
						item.bottom = h
						// }
					}).exec()
				})
				this.sizeCalcState = true
			},
			showGoodDetailModal(item, good) {
				this.good = JSON.parse(JSON.stringify({ ...good
				}))
				this.category = JSON.parse(JSON.stringify(item))
				this.goodDetailModalVisible = true
			},
			handlePropertyAdd() {
				this.good.number += 1
			},
			handlePropertyReduce() {
				if (this.good.number === 1) return
				this.good.number -= 1
			},
			changePropertyDefault(index, key) { //改变默认属性值
				this.good.property[index].optionList.forEach(value => this.$set(value, 'is_default', 0))
				this.good.property[index].optionList[key].is_default = 1
				this.good.number = 1
				this.good = JSON.parse(JSON.stringify(this.good))
			},
			handleAddToCartInModal() {
				const product = Object.assign({}, this.good, {
					props_text: this.getGoodSelectedProps(this.good),
					props: this.getGoodSelectedProps(this.good, 'id')
				})
				this.handleAddToCart(this.category, product, this.good.number)
				// this.closeGoodDetailModal()
			},
			getGoodSelectedProps(good, type = 'text') { //计算当前饮品所选属性
				// if (good.use_property) {
				let props = []
				good.property.forEach(({
					optionList
				}) => {
					optionList.forEach(value => {
						if (value.is_default) {
							props.push(type === 'text' ? value.optionName : value.id)
						}
					})
				})
				return type === 'text' ? props.join(',') : props
				// }
				// return ''
			},
			handleReduceFromCart(item, good) {
				const goodText = this.getGoodSelectedProps(this.good) // 购物车当前选中的规格
				const index = this.cart.findIndex(item => item.id === good.id && item.props_text === goodText)
				this.cart[index].number -= 1
				if (this.cart[index].number <= 0) {
					this.cart.splice(index, 1)
				}
			},
			handleAddToCart(cate, good, num) { //添加到购物车
				const goodText = this.getGoodSelectedProps(this.good) // 购物车当前选中的规格
				const index = this.cart.findIndex(item => {
					// if (good.use_property) {
					// !good.props_text ? good.props_text = this.getGoodSelectedProps(good) : ''
					return (item.id === good.id) && (item.props_text === goodText)
					// } else {
					// 	return item.id === good.id
					// }
				})
				if (index > -1) {
					this.cart[index].number += num
				} else {
					this.cart.push({
						id: good.id,
						cate_id: cate.id,
						name: good.name,
						price: good.price,
						number: num,
						icon: good.icon,
						use_property: good.use_property,
						props_text: this.getGoodSelectedProps(this.good),
						props: this.getGoodSelectedProps(this.good, 'id'),
						productid: this.productObj[goodText].id,
						...good
					})
				}

				console.log(this.cart, '购物车')
			},
			toPay() {
				// if(!this.isLogin) {
				// 	uni.navigateTo({url: '/pages/login/login'})
				// 	return
				// }

				uni.showLoading({
					title: '加载中'
				})

				let orderDetails = this.cart.map((item) => {
					return {
						attrValueId: item.productid, //商品规格属性id（立即购买、活动购买必填）
						groupBuyActivityId: null, //拼团活动id（拼团下单时必填）
						groupBuyRecordId: 0, // 拼团记录id，营销类型2=拼团 时必填 0=开团 实际
						productId: item.id, //商品id
						productNum: item.number //商品数量
					};
				});
				preOrderApi({
					"preOrderType": 'buyNow',
					//类型 预下单类型（“shoppingCart”:购物车下单,“buyNow”:
					// 立即购买,“video”: 视频号商品下单,“seckill”:秒杀下单,“group”:拼团下单）
					"orderDetails": orderDetails //购物车信息
				}).then(res => {
					console.log('预下单接口', res)
					if (res.code == 200) {
						let cartList = JSON.stringify(this.cart)
						uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
						uni.navigateTo({
							// url: `/pages/goods/order_confirm/index?cartList=${cartList}`
							url: '/pages/goods/order_confirm/index?is_address=1&orderNo=' + res.data.orderNo +
								'&addressId=' + this.addressInfo.id
						})
					}
				})
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
				uni.hideLoading()
			},
			// 选规格打开
			Selectpox(item, itemInfo) {
				this.specifications = itemInfo //这一项信息
				this.specificationsList = item //这一项信息
				// this.good = Object.assign({}, this.good, itemInfo)
				getProductDetail(
					itemInfo.id,
					0, 0, ''
				).then((res) => {
					console.log('规格', res)
					if (res.code == 200) {
						this.good.property = res.data.productAttr.map(item => {
							item.optionList.forEach((items, index) => {
								index === 0 ? items.is_default = true : '' // 规格默认选中
							})
							return { ...item }
						})
						console.log(this.good)
						// this.productValue = res.data.productAttr //规格数组
						this.productObj = res.data.productValue //默认选择的id
						this.selectble = true
					}
				})
			},
			// 关闭规格
			Close() {
				this.specifications = '' //这一项信息
				this.specificationsList = [] //这一项信息
				this.selectble = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		min-height: 100%;
	}

	/* #endif */

	.bg-color {
		background-color: $bg-color-primary;
	}

	.order-nav {
		// height: 111rpx;
		position: relative;
		background-color: #FF6702;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-button {
			position: absolute;
			left: 20rpx;
		}

		text {
			font-weight: 500;
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}

	.stores {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: -40rpx;

		.store {
			width: 100%;
			background-color: $bg-color-grey;
			padding: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			border-radius: 6rpx;

			.iconfont {
				font-size: 50rpx;
				margin-right: 15rpx;

				&.iconradio-button-off {
					color: $text-color-assist;
				}

				&.iconradio-button-on {
					color: $color-primary;
				}
			}

			.infos {
				flex: 1;
				display: flex;
				flex-direction: column;
				color: $text-color-base;
				overflow: hidden;

				.name_and_distance {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					overflow: hidden;

					.name {
						flex: 1;
						flex-shrink: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: $font-size-lg;
					}

					.distance {
						flex-shrink: 0;
						font-size: $font-size-lg;
						font-weight: bold;
						margin-left: 20rpx;
					}
				}

				.street {
					color: $text-color-assist;
					font-size: $font-size-sm;
				}
			}
		}
	}

	.main {
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.nav {
		width: 100%;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		border-radius: 23rpx;
		padding: 19rpx 57rpx 38rpx 58rpx;
		background-color: #ffffff;

		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.store-name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: $font-size-lg;
					margin-bottom: 10rpx;

					.iconfont {
						margin-left: 10rpx;
						line-height: 100%;
					}
				}

				.store-tip {
					font-weight: 400;
					font-size: 21rpx;
					color: #858687;
					margin-top: 10rpx;
					background: #F8F9FB;
					border-radius: 4rpx;
				}
			}

			.right {
				background-color: $bg-color-grey;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				font-size: $font-size-sm;
				padding: 0 38rpx;
				color: $text-color-assist;

				.dinein,
				.takeout {
					position: relative;
					display: flex;
					align-items: center;

					&.active {
						padding: 14rpx 38rpx;
						color: #ffffff;
						background-color: $color-primary;
						border-radius: 38rpx;
					}
				}

				.takeout {
					margin-left: 20rpx;
					height: 100%;
					flex: 1;
					padding: 14rpx 0;
				}

				.dinein.active {
					margin-left: -38rpx;
				}

				.takeout.active {
					margin-right: -38rpx;
				}
			}
		}

		.coupon {
			flex: 1;
			width: 100%;
			background-color: $bg-color-primary;
			font-size: $font-size-base;
			color: $color-primary;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			overflow: hidden;

			.title {
				flex: 1;
				margin-left: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.iconfont {
				line-height: 100%;
			}
		}
	}

	.content {
		flex: 1;
		overflow: hidden;
		width: 100%;
		display: flex;
		border-radius: 23rpx 23rpx 0rpx 0rpx;

		.menus {
			width: 200rpx;
			height: 100%;
			overflow: hidden;
			background-color: $bg-color-grey;

			.wrapper {
				width: 100%;
				height: 100%;

				.menu {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 30rpx 20rpx;
					font-size: 26rpx;
					color: $text-color-assist;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					&:nth-last-child(1) {
						margin-bottom: 230rpx;
					}

					&.current {
						background-color: #ffffff;
						color: $text-color-base;
					}

					.dot {
						position: absolute;
						width: 34rpx;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 22rpx;
						background-color: $bg-color-primary;
						color: #ffffff;
						top: 16rpx;
						right: 10rpx;
						border-radius: 100%;
						text-align: center;
					}
				}
			}
		}

		.goods {
			flex: 1;
			height: 100%;
			overflow: hidden;
			background-color: #ffffff;

			.wrapper {
				width: 100%;
				height: 100%;
				padding: 20rpx;

				.ads {
					height: calc(300 / 550 * 510rpx);

					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}

				.list {
					width: 100%;
					font-size: $font-size-base;
					padding-bottom: 800rpx;

					.category {
						width: 100%;

						.title {
							padding: 30rpx 0;
							display: flex;
							align-items: center;
							color: $text-color-base;

							.icon {
								width: 38rpx;
								height: 38rpx;
								margin-left: 10rpx;
							}
						}
					}

					.items {
						display: flex;
						flex-direction: column;
						padding-bottom: -30rpx;

						.good {
							display: flex;
							align-items: center;
							margin-bottom: 30rpx;

							.image {
								width: 160rpx;
								height: 160rpx;
								margin-right: 20rpx;
								border-radius: 8rpx;
							}

							.right {
								flex: 1;
								// height: 160rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								padding-right: 14rpx;

								.name {
									font-size: $font-size-base;
									margin-bottom: 10rpx;
								}

								.tips {
									width: 100%;
									height: 40rpx;
									line-height: 40rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: $font-size-sm;
									color: $text-color-assist;
									margin-bottom: 10rpx;
								}

								.price_and_action {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.price {
										font-size: $font-size-base;
										font-weight: 600;
										color: $bg-color-primary;
									}

									.btn-group {
										display: flex;
										justify-content: space-between;
										align-items: center;
										position: relative;

										.btn {
											padding: 0 20rpx;
											box-sizing: border-box;
											font-size: $font-size-sm;
											height: 44rpx;
											line-height: 44rpx;

											&.property_btn {
												border-radius: 24rpx;
											}

											&.add_btn,
											&.reduce_btn {
												padding: 0;
												width: 44rpx;
												border-radius: 44rpx;
											}
										}

										.dot {
											position: absolute;
											background-color: #ffffff;
											border: 1px solid $bg-color-primary;
											color: $bg-color-primary;
											font-size: $font-size-sm;
											width: 36rpx;
											height: 36rpx;
											line-height: 36rpx;
											text-align: center;
											border-radius: 100%;
											right: -12rpx;
											top: -10rpx;
										}

										.number {
											width: 44rpx;
											height: 44rpx;
											line-height: 44rpx;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.modal-box {
		max-height: 90vh;
	}

	.good-detail-modal {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.cover {
			height: 320rpx;
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.image {
				width: 260rpx;
				height: 260rpx;
			}

			.btn-group {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.detail {
			width: 100%;
			min-height: 1vh;
			max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

			.wrapper {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.basic {
					padding: 0 20rpx 30rpx;
					display: flex;
					flex-direction: column;

					.name {
						font-size: $font-size-base;
						color: $text-color-base;
						margin-bottom: 10rpx;
					}

					.tips {
						font-size: $font-size-sm;
						color: $text-color-grey;
					}
				}

				.properties {
					width: 100%;
					border-top: 2rpx solid $bg-color-grey;
					padding: 10rpx 30rpx 0;
					display: flex;
					flex-direction: column;

					.property {
						width: 100%;
						display: flex;
						flex-direction: column;
						margin-bottom: 30rpx;
						padding-bottom: -16rpx;

						.title {
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin-bottom: 20rpx;

							.name {
								font-size: 26rpx;
								color: $text-color-base;
								margin-right: 20rpx;
							}

							.desc {
								flex: 1;
								font-size: $font-size-sm;
								color: $color-primary;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.values {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.value {
								border-radius: 8rpx;
								background-color: $bg-color-grey;
								padding: 16rpx 30rpx;
								font-size: 26rpx;
								color: $text-color-assist;
								margin-right: 16rpx;
								margin-bottom: 16rpx;

								&.default {
									background-color: $bg-color-primary;
									color: $text-color-white;
								}
							}
						}
					}
				}
			}
		}

		.action {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: $bg-color-grey;
			height: 120rpx;
			padding: 0 26rpx;

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20rpx;
				overflow: hidden;

				.price {
					font-size: $font-size-lg;
					color: $text-color-base;
				}

				.props {
					color: $text-color-assist;
					font-size: 24rpx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.number {
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
				}

				.btn {
					padding: 0;
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 100%;
				}
			}
		}

		.add-to-cart-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $color-primary;
			color: $text-color-white;
			font-size: $font-size-base;
			height: 80rpx;
			border-radius: 0 0 12rpx 12rpx;
		}
	}

	.cart-box {
		// position: absolute;
		// bottom: 30rpx;
		// left: 30rpx;
		// right: 30rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		background-color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;

		.cart-img {
			width: 50rpx;
			height: 47rpx;
			position: relative;
			// margin-top: -48rpx;
		}

		.pay-btn {
			height: 100%;
			padding: 0 30rpx;
			color: #FFFFFF;
			border-radius: 0 50rpx 50rpx 0;
			display: flex;
			align-items: center;
			font-size: $font-size-base;
		}

		.mark {
			padding-left: 46rpx;
			margin-right: 30rpx;
			position: relative;

			.tag {
				background-color: $color-warning;
				color: $text-color-white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-size-sm;
				position: absolute;
				right: -13rpx;
				top: -20rpx;
				border-radius: 100%;
				padding: 4rpx;
				width: 27rpx;
				height: 27rpx;
				opacity: .9;
			}
		}

		.price {
			flex: 1;
			color: $text-color-base;
		}
	}

	.cart-popup {
		.top {
			background-color: $bg-color-primary;
			color: $color-primary;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			text-align: right;
		}

		.cart-list {
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			min-height: 1vh;
			max-height: 60vh;

			.wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				margin-bottom: 156rpx;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;
					position: relative;

					&::after {
						content: ' ';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: $border-color;
						height: 2rpx;
						transform: scaleY(.6);
					}

					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						margin-right: 30rpx;

						.name {
							font-size: $font-size-sm;
							color: $text-color-base;
						}

						.props {
							color: $text-color-assist;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.center {
						margin-right: 120rpx;
						font-size: $font-size-base;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: 46rpx;
							height: 46rpx;
							border-radius: 100%;
							padding: 0;
							text-align: center;
							line-height: 46rpx;
						}

						.number {
							font-size: $font-size-base;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;
						}
					}
				}
			}
		}
	}

	.back-button {

		width: 30rpx;

		height: 30rpx;

		border-right: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;

		transform: rotate(135deg);

		margin-left: 10rpx;

		display: inline-block;

		position: relative;
	}

	.newsTitle {
		display: flex;
		align-items: center;
	}

	.mode {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(33, 33, 33, 0.8);
		z-index: 99999;
		display: flex;
		align-items: flex-end;
	}

	.mode-1 {
		width: 100%;
		height: 840rpx;
		background: #FFF;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		// padding: 30rpx;
		box-sizing: border-box;
		overflow: auto;
		/* 添加这个属性使容器可以滚动 */
	}

	// 规格弹窗
	.sel-mode-1 {
		width: 100%;
		// height: 440rpx;
		background: #FFF;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		box-sizing: border-box;
		overflow: auto;
		z-index: 99999;
		padding: 20rpx 20rpx 60rpx 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.close {
		text-align: right;
		font-size: 40rpx;
	}

	.sel-2 {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.nexbox1 {
			flex: 1;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: $text-color-assist;
		}
	}

	.sel-3 {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.sel-4 {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.sel-5 {
		width: 80rpx;
		height: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		background: #999999;
		color: #FFF;
		padding: 8rpx;
		border-radius: 8rpx;
	}

	.sel-6 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sel-btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.sel-btn1 {
		width: 110px;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 103, 2, 1);
		color: #FFF;
		font-size: 30rpx;
		border-radius: 10rpx;
	}

	.neximg {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		/* 保持图片等比例缩放，并且不会裁切 */
	}


	.btn-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.btn {
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: $font-size-sm;
			height: 44rpx;
			line-height: 44rpx;

			&.property_btn {
				border-radius: 24rpx;
			}

			&.add_btn,
			&.reduce_btn {
				padding: 0;
				width: 44rpx;
				border-radius: 44rpx;
			}
		}

		.dot {
			position: absolute;
			background-color: #ffffff;
			border: 1px solid $bg-color-primary;
			color: $bg-color-primary;
			font-size: $font-size-sm;
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			border-radius: 100%;
			right: -12rpx;
			top: -10rpx;
		}

		.number {
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.nexbox-txt3 {
		color: $bg-color-primary;
	}

	.mode-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.items {
		display: flex;
		flex-direction: column;
		padding-bottom: -30rpx;

		.good {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1;
				// height: 160rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				padding-right: 14rpx;

				.name {
					font-size: $font-size-base;
					margin-bottom: 10rpx;
				}

				.tips {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: $font-size-sm;
					color: $text-color-assist;
					margin-bottom: 10rpx;
				}

				.price_and_action {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: $font-size-base;
						font-weight: 600;
						color: $bg-color-primary;
					}

					.btn-group {
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;

						.btn {
							padding: 0 20rpx;
							box-sizing: border-box;
							font-size: $font-size-sm;
							height: 44rpx;
							line-height: 44rpx;

							&.property_btn {
								border-radius: 24rpx;
							}

							&.add_btn,
							&.reduce_btn {
								padding: 0;
								width: 44rpx;
								border-radius: 44rpx;
							}
						}

						.dot {
							position: absolute;
							background-color: #ffffff;
							border: 1px solid $bg-color-primary;
							color: $bg-color-primary;
							font-size: $font-size-sm;
							width: 36rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 100%;
							right: -12rpx;
							top: -10rpx;
						}

						.number {
							width: 44rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.mode-clear {
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		z-index: 99;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
		border-bottom: 1px solid burlywood;
	}

	.mode-txt {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.mode-txt1 {
		font-weight: 500;
		font-size: 32rpx;
	}
</style>