111

mer_uniapp/pages/goods/order_details/index.vue

@@ -654,7 +654,7 @@
 					})
 				})
 				cartBatchAddApi(cartListRequest).then(function(res) {
-					uni.switchTab({
+					uni.navigateTo({
 						url: '/pages/order_addcart/order_addcart'
 					})
 				}).catch(res => {

mer_uniapp/pages/takeout/index.vue

@@ -0,0 +1,1485 @@
+<template>
+	<view class="container" :style="{ height: winHeight+ 'px' }">
+		<!-- #ifdef MP -->
+		<view class="cart_nav">
+			<nav-bar iconColor='#fff' ref="navBarRef" navTitle="" backgroundColor="#FF6702" :isBackgroundColor="false">
+			</nav-bar>
+		</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,
+						iconText: this.productObj[goodText].image,
+						...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>