yanzong_qianduan/pages/cart/index.vue

<template>
	<view class="container" :style="appThemeStyle">
		<!-- 页面顶部 -->
		<view v-if="list.length" class="head-info">
			<view class="cart-total">
				<text>共</text>
				<text class="active">{{ total }}</text>
				<text>件商品</text>
			</view>
			<view class="cart-edit" @click="handleToggleMode()">
				<view v-if="mode == 'normal'" class="normal">
					<text class="icon iconfont icon-bianji"></text>
					<text>编辑</text>
				</view>
				<view v-if="mode == 'edit'" class="edit">
					<text>完成</text>
				</view>
			</view>
		</view>
		<!-- 购物车商品列表 -->
		<view v-if="list.length" class="cart-list">
			<view class="cart-item" v-for="(item, index) in list" :key="index">
				<view v-if="storeVersion == 1 && item.goods.merchant_id > 0 && item.goods.merchant"
					class="merchant-name" @click="toShop(item)">
					<image :src="item.goods.merchant.logoImage && item.goods.merchant.logoImage[0].external_url"
						mode="aspectFill"></image>
					<text>{{ item.goods.merchant.shop_name }}</text>
					<image src="@/static/arrow-right.png" mode="aspectFill"></image>
				</view>
				<view>
					<view class="item-radio" @click="handleCheckItem(item.id)">
						<u-checkbox :modelValue="inArray(item.id, checkedIds)" shape="circle"
							:activeColor="appTheme.mainBg" />
					</view>
					<view class="goods-image" @click="onTargetGoods(item.goods_id)">
						<image class="image" :src="item.goods.goods_image" mode="scaleToFill"></image>
					</view>
					<view class="item-content">
						<view class="goods-title" @click="onTargetGoods(item.goods_id)">
							<text class="twoline-hide">{{ item.goods.goods_name }}</text>
						</view>
						<view class="goods-props clearfix">
							<view class="goods-props-item" v-for="(props, idx) in item.goods.skuInfo.goods_props"
								:key="idx">
								<text>{{ props.value.name }}</text>
							</view>
						</view>
						<view class="item-foot">
							<view class="goods-price">
								<text class="unit">￥</text>
								<text
									class="value">{{ item.goods.skuInfo.goods_price?Number(item.goods.skuInfo.goods_price):item.goods.skuInfo.goods_price }}</text>
							</view>
							<view class="stepper">
								<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1"
									@change="onChangeStepper($event, item)" />

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车数据为空 -->
		<empty v-if="!list.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }"
			tips="您的购物车是空的, 快去逛逛吧">
			<template v-slot:slot>
				<view class="empty-ipt" @click="onTargetIndex()">
					<text>去逛逛</text>
				</view>
			</template>
		</empty>

		<!-- 商品推荐 -->
		<view class="goodsRecommend-title">
			<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'">
			</image>
		</view>
		<view class="goodsRecommend">
			<!-- <u-waterfall v-model="goodsRecommend" ref="uWaterfall1"> -->
			<!-- <template v-slot:left="{leftList}"> -->
			<view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="onTargetGoods(item.goods_id)"
				:key="index">
				<view class="pic">
					<image :src="item.goods_image" mode="aspectFill"></image>
				</view>
				<view class="goodsInfo">
					<view class="title">
						<!-- <text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text> -->
						<text class="name">{{item.goods_name}}</text>
					</view>
				</view>
				<!-- 商品价格 -->
				<view class="shenBox">
					<view class="detail-price oneline-hide">
						<text class="goods-price f-30 col-m"><text
								style="font-size: 26rpx;">￥</text>{{ item.goods_price_min>0?Number(item.goods_price_min):0.00}}
							<text class="delPrice"></text></text>
						<text v-if="item.line_price_min > 0"
							class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):0.00  }}</text>
					</view>
					<image :src="$picUrl+'/static/detail/redShen.png'" v-if="item.is_check==1" mode=""></image>
				</view>
				<!-- 		<view class="goodsInfo1" v-if="item.cmmdty_model">
							<view class="oneTip">
								{{item.cmmdty_model}}
							</view>
						</view> -->
				<view class="goodsSend">
					<view class="sendLeft">
						<view class="left_1">
							{{item.goods_source}}
						</view>
						<view class="left_2">
							{{Number(item.discount)}}折
						</view>
					</view>
					<view class="sendRight">
						<text v-if="item.delivery_time==0">24小时内发货</text>
						<text v-if="item.delivery_time==1">48小时内发货</text>
						<text v-if="item.delivery_time==2">72小时内发货</text>
						<text v-if="item.delivery_time==3">7天内发货</text>
						<text v-if="item.delivery_time==4">15天内发货</text>
						<text v-if="item.delivery_time==5">30天内发货</text>
						<text v-if="item.delivery_time==6">45天内发货</text>
					</view>
				</view>
			</view>
			<!-- </template> -->
			<!-- <template v-slot:right="{rightList}">
					<view class="goodsItem" style="margin-right: 0;" v-for="(item,index) in rightList"
						@click="onTargetGoods(item.goods_id)" :key="index">
						<view class="pic">
							<image :src="item.goods_image" mode="aspectFill"></image>
						</view>
						<view class="goodsInfo">
							<view class="title">
								<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
								<text class="name">{{item.goods_name}}</text>
							</view>
						</view>
						<view class="shenBox">
							<view class="detail-price oneline-hide">
								<text class="goods-price f-30 col-m"><text
										style="font-size: 26rpx;">￥</text>{{ item.goods_price_min>0?Number(item.goods_price_min):0.00}}
									<text class="delPrice"></text></text>
								<text v-if="item.line_price_min > 0"
									class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):0.00  }}</text>
							</view>
							<image :src="$picUrl+'/static/detail/redShen.png'" v-if="item.is_check==1" mode=""></image>
						</view>
						<view class="goodsInfo1" v-if="item.cmmdty_model">
							<view class="oneTip">
								{{item.cmmdty_model}}
							</view>
						</view>
						<view class="goodsSend">
							<view class="sendLeft">
								<view class="left_1">
									{{item.goods_source}}
								</view>
								<view class="left_2">
									{{Number(item.discount)}}折
								</view>
							</view>
							<view class="sendRight">
								<text v-if="item.delivery_time==0">24小时内发货</text>
								<text v-if="item.delivery_time==1">48小时内发货</text>
								<text v-if="item.delivery_time==2">72小时内发货</text>
								<text v-if="item.delivery_time==3">7天内发货</text>
								<text v-if="item.delivery_time==4">15天内发货</text>
								<text v-if="item.delivery_time==5">30天内发货</text>
								<text v-if="item.delivery_time==6">45天内发货</text>
							</view>
						</view>
					</view>
				</template> -->
			<!-- </u-waterfall> -->
			<view v-if="goodsRecommend.length" class="finished">{{ recommendLoadTitle }}</view>
			<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list" style="width: 100%"></u-empty>
		</view>

		<!-- 底部操作栏 -->
		<view v-if="list.length" class="footer-fixed">
			<view class="all-radio">
				<u-checkbox :modelValue="checkedIds.length > 0 && checkedIds.length === list.length" shape="circle"
					:activeColor="appTheme.mainBg" @change="handleCheckAll()">全选</u-checkbox>
			</view>
			<view class="total-info">
				<text>合计：</text>
				<view class="goods-price">
					<text class="unit">￥</text>
					<text class="value">{{ totalPrice }}</text>
				</view>
			</view>
			<view class="cart-action">
				<view class="btn-wrapper">
					<!-- dev:下面的disabled条件使用checkedIds.join方式判断 -->
					<!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 -->
					<view v-if="mode == 'normal'" class="btn-item btn-main"
						:class="{ disabled: checkedIds.join() == '' }" @click="handleOrder()">
						<text>去结算 {{ checkedIds.length > 0 ? `(${total})` : '' }}</text>
					</view>
					<view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }"
						@click="handleDelete()">
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Empty from '@/components/empty'
	// import Recommended from '@/components/recommended'
	import {
		inArray,
		arrayIntersect,
		debounce
	} from '@/utils/util'
	import {
		checkLogin,
		setCartTotalNum,
		setCartTabBadge
	} from '@/core/app'
	import * as CartApi from '@/api/cart'
	import * as Api from '@/api/goods'
	const CartIdsIndex = 'CartIds'

	export default {
		components: {
			Empty
		},
		data() {
			return {
				goodsRecommend: [],
				inArray,
				// 正在加载
				isLoading: true,
				// 当前模式: normal正常 edit编辑
				mode: 'normal',
				// 购物车商品列表
				list: [],
				// 购物车商品总数量
				total: null,
				// 选中的商品ID记录
				checkedIds: [],
				// 选中的商品总金额
				totalPrice: '0.00',
				recommendPage: 1,
				recommendFinish: false,
				recommendLoadTitle: ''
			}
		},
		computed: {
			storeVersion() {
				const version = uni.getStorageSync('storeVersion') == 1 ? 1 : 0;
				console.log(version);
				return version;
			}
		},
		watch: {
			// 监听选中的商品
			checkedIds: {
				handler(val) {
					// 计算合计金额
					this.onCalcTotalPrice()
					// 记录到缓存中
					uni.setStorageSync(CartIdsIndex, val)
				},
				deep: true,
				immediate: false
			},
			// 监听购物车商品总数量
			total(val) {
				// 缓存并设置角标
				setCartTotalNum(val)
				setCartTabBadge()
			}
		},
		onLoad() {
			this.recommendPage = 1;
			this.recommendFinish = false;
			this.recommendLoadTitle = '';
			this.goodsRecommend = [];
			this.getSuggest()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			// 获取缓存中的选中记录
			this.checkedIds = uni.getStorageSync(CartIdsIndex)
			// 获取购物车商品列表
			checkLogin() ? this.getCartList() : this.isLoading = false
		},
		onReachBottom() {
			if (!this.recommendFinish) {
				this.getSuggest()
			}
		},

		methods: {
			getSuggest() {
				// 获取推荐商品
				Api.recommendedNew({
					page: this.recommendPage++
				}).then(res => {
					console.log(res);
					let arr = res.data.goodsList.data
					if (arr && arr.length > 0) {
						for (let i = 0; i < arr.length; i++) {
							arr[i].goods_price_min = Number(arr[i].goods_price_min);
							arr[i].goods_price_max = Number(arr[i].goods_price_max)
							arr[i].line_price_min = Number(arr[i].line_price_min);
							arr[i].line_price_max = Number(arr[i].line_price_max)
						}
					}
					if (arr.length < res.data.goodsList.per_page) {
						this.recommendFinish = true;
					}
					this.recommendLoadTitle = this.recommendFinish ? "已全部加载完" : "上拉加载更多";
					this.goodsRecommend = [...this.goodsRecommend, ...arr]
				})

			},
			// 计算合计金额 (根据选中的商品)
			onCalcTotalPrice() {
				const app = this
				// 选中的商品记录
				const checkedList = app.list.filter(item => inArray(item.id, app.checkedIds))
				// 计算总金额
				let tempPrice = 0;
				checkedList.forEach(item => {
					// 商品单价, 为了方便计算先转换单位为分 (整数)
					const unitPrice = item.goods.skuInfo.goods_price * 100
					tempPrice += unitPrice * item.goods_num
				})
				app.totalPrice = (tempPrice / 100).toFixed(2)
			},

			// 获取购物车商品列表
			getCartList() {
				const app = this
				app.isLoading = true
				CartApi.list()
					.then(result => {
						app.list = result.data.list
						app.total = result.data.cartTotal
						// 清除checkedIds中无效的ID
						app.onClearInvalidId()
					})
					.finally(() => app.isLoading = false)
			},

			// 清除checkedIds中无效的ID
			onClearInvalidId() {
				const app = this
				const listIds = app.list.map(item => item.id)
				app.checkedIds = arrayIntersect(listIds, app.checkedIds)
			},

			// 切换当前模式
			handleToggleMode() {
				this.mode = this.mode == 'normal' ? 'edit' : 'normal'
			},

			// 监听步进器更改事件
			onChangeStepper({
				value
			}, item) {
				// 这里是组织首次启动时的执行
				if (item.goods_num == value) return
				// 记录一个节流函数句柄
				if (!item.debounceHandle) {
					item.oldValue = item.goods_num
					item.debounceHandle = debounce(this.onUpdateCartNum, 500)
				}
				// 更新商品数量
				item.goods_num = value
				// 提交更新购物车数量 (节流)
				item.debounceHandle(item, item.oldValue, value)
			},

			// 提交更新购物车数量
			onUpdateCartNum(item, oldValue, newValue) {
				const app = this
				CartApi.update(item.goods_id, item.goods_sku_id, newValue)
					.then(result => {
						// 更新商品数量
						app.total = result.data.cartTotal
						// 重新计算合计金额
						app.onCalcTotalPrice()
						// 清除节流函数句柄
						item.debounceHandle = null
					})
					.catch(err => {
						// 还原商品数量
						item.goods_num = oldValue
						setTimeout(() => app.$toast(err.errMsg), 10)
					})
			},

			// 跳转到商品详情页
			onTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 点击去逛逛按钮, 跳转到首页
			onTargetIndex() {
				this.$navTo('pages/index/index')
			},

			// 选中商品
			handleCheckItem(cartId) {
				const {
					checkedIds
				} = this
				const index = checkedIds.findIndex(id => id === cartId)
				index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1)
			},

			// 全选事件
			handleCheckAll() {
				const {
					checkedIds,
					list
				} = this
				this.checkedIds = checkedIds.length === list.length ? [] : list.map(item => item.id)
			},

			// 结算选中的商品
			handleOrder() {
				const app = this
				if (app.checkedIds.length) {
					const cartIds = app.checkedIds.join()
					const merchant_ids = [];
					app.list.forEach(item => {
						if (app.checkedIds.includes(item.id) && !merchant_ids.includes(item.goods.merchant_id)) {
							merchant_ids.push(item.goods.merchant_id);
						}
					});
					if (merchant_ids.length > 1) {
						app.$toast('结算商品来源于多家商户，无法结算！');
						return false;
					}
					// app.$navTo('pages/checkout/index', {
					// 	mode: 'cart',
					// 	cartIds
					// })
					app.$navTo('pages/sureOrder/index', {
						mode: 'cart',
						cartIds
					})
				}
			},

			// 删除选中的商品弹窗事件
			handleDelete() {
				const app = this
				if (!app.checkedIds.length) {
					return false
				}
				uni.showModal({
					title: '友情提示',
					content: '您确定要删除该商品吗？',
					showCancel: true,
					success({
						confirm
					}) {
						// 确认删除
						confirm && app.onClearCart()
					}
				})
			},

			// 确认删除商品
			onClearCart() {
				const app = this
				CartApi.clear(app.checkedIds)
					.then(result => {
						app.getCartList()
						app.handleToggleMode()
					})
			},

			toShop(item) {
				uni.navigateTo({
					url: `/pages/shopList/shopPage?id=${item.goods.merchant_id}`,
				})
			},

		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-empty {
		padding: 100rpx 0;
	}

	.container {
		padding-bottom: 120rpx;
	}

	.goodsRecommend-title {
		padding: 20rpx 25rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #3B3B3B;
		justify-content: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 10rpx;
		}
	}

	.goodsRecommend {
		overflow: hidden;
		margin: 10rpx 22rpx 20rpx 22rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goodsItem {
			width: 348rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 0rpx 0 20rpx 0;

			.pic {
				position: relative;
				width: 100%;
				align-items: center;
				display: flex;
				overflow: hidden;
				width: 100%;
				height: 0;
				padding-bottom: 100%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					position: absolute;
					left: 0;
					top: 0
				}
			}

			.goodsInfo {
				margin-bottom: 12rpx;
				height: 60rpx;

				.title {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 2;
					line-height: 33rpx;
					white-space: normal;

					.ziying {
						padding: 4rpx 10rpx;
						background: #FF4438;
						border-radius: 2px 2px 2px 2px;
						opacity: 1;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;

					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #2B2B2B;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.isExpress {
					height: 30rpx;
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					text {
						display: inline-block;
						width: 44rpx;
						height: 30rpx;
						line-height: 28rpx;
						border: 1px solid #F21A1C;
						border-radius: 2px 2px 2px 2px;
						background: #FFFFFF;
						text-align: center;
						font-size: 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #F21A1C;
					}

				}

				.price {
					color: #F21A1C;
					display: flex;
					align-items: baseline;
				}

				.comment {
					margin-top: 6rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #949494;

				}
			}
		}

		.finished {
			font-size: 28rpx;
			line-height: 100rpx;
			text-align: center;
			color: #bbb;
			width: 100%;
		}
	}

	// 页面顶部
	.head-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4rpx 30rpx;
		// background-color: #fff;
		height: 80rpx;

		.cart-total {
			font-size: 28rpx;
			color: #333;

			.active {
				color: $main-bg;
				margin: 0 2rpx;
			}
		}

		.cart-edit {
			padding-left: 20rpx;

			.icon {
				margin-right: 12rpx;
			}

			.edit {
				color: $main-bg;
			}
		}

	}

	// 购物车列表
	.cart-list {
		padding: 0 16rpx 0 16rpx;
	}

	.cart-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 16rpx;
		margin-bottom: 24rpx;

		.merchant-name {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;

			>text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: calc(100% - 73rpx);
			}

			>image {
				margin-left: 10rpx;
				width: 13rpx;
				height: 24rpx;
				flex-shrink: 0;

				&:first-child {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}

		>view {
			display: flex;
			align-items: center;
		}

		.item-radio {
			width: 56rpx;
			height: 80rpx;
			margin-right: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.goods-image {
			width: 200rpx;
			height: 200rpx;

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

		.item-content {
			flex: 1;
			padding-left: 24rpx;

			.goods-title {
				font-size: 28rpx;
				max-height: 76rpx;
			}

			.goods-props {
				margin-top: 14rpx;
				height: 40rpx;
				color: #ababab;
				font-size: 24rpx;
				overflow: hidden;

				.goods-props-item {
					display: inline-block;
					margin-right: 14rpx;
					padding: 4rpx 16rpx;
					border-radius: 12rpx;
					background-color: #F5F5F5;
					width: auto;
				}
			}

			.item-foot {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.goods-price {
					vertical-align: bottom;
					color: $main-bg;
					flex: 1;

					.unit {
						font-size: 24rpx;
					}

					.value {
						font-size: 32rpx;
					}
				}
			}

		}
	}

	.stepper {
		flex: 1;
		display: flex;
		// width: 154rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 76rpx 76rpx 76rpx 76rpx;
		opacity: 1;
		margin-right: 20rpx;
		// border: 2rpx solid #E6E6E6;

		.del {
			width: 50rpx;
			height: 56rpx;
			color: #C2C2C2;
			opacity: 1;
			text-align: center;
			line-height: 56rpx;
			border-right: 2rpx solid #E6E6E6;
		}

		.allNum {
			width: 54rpx;
			height: 56rpx;
			opacity: 1;
			text-align: center;
			line-height: 56rpx;
		}

		.add {
			width: 50rpx;
			height: 56rpx;
			color: #C2C2C2;
			opacity: 1;
			text-align: center;
			line-height: 56rpx;
			border-left: 2rpx solid #E6E6E6;
		}

		.countNumber {
			width: 170rpx;
			background: none;
		}
	}

	// 空数据按钮
	.empty-ipt {
		margin: 0 auto;
		width: 250rpx;
		height: 70rpx;
		font-size: 32rpx;
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		background: linear-gradient(to right, $main-bg, $main-bg2);
		color: $main-text;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 底部操作栏
	.footer-fixed {
		display: flex;
		align-items: center;
		height: 96rpx;
		background: #fff;
		padding: 0 30rpx;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;

		.all-radio {
			width: 140rpx;
			display: flex;
			align-items: center;

			.radio {
				margin-bottom: -4rpx;
				transform: scale(0.76)
			}
		}

		.total-info {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;

			.goods-price {
				flex: 1;
				vertical-align: bottom;
				color: $main-bg;

				.unit {
					font-size: 24rpx;
				}

				.value {
					font-size: 32rpx;
				}
			}
		}

		.cart-action {
			width: 200rpx;

			.btn-wrapper {
				height: 100%;
				display: flex;
				align-items: center;
			}

			.btn-item {
				flex: 1;
				font-size: 28rpx;
				height: 72rpx;
				color: #fff;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			// 去结算按钮
			.btn-main {
				background: linear-gradient(to right, $main-bg, $main-bg2);
				color: $main-text;

				// 禁用按钮
				&.disabled {
					opacity: 0.6;
				}
			}

		}

	}

	.shenBox {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;

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

	.goods-price {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #F21A1C !important;
	}

	.line-price {
		text-decoration: line-through;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #949494;

	}

	.goodsInfo1 {
		display: flex;
		align-items: center;
		margin: 18rpx 0 0 0rpx;

		.oneTip {
			padding: 0 16rpx;
			height: 34rpx;
			background: #F6F6F6;
			border-radius: 4rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			max-width: 300rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 1;
			white-space: nowrap;
		}
	}

	.goodsSend {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 18rpx;

		.sendLeft {
			width: 120rpx;
			border: 1rpx solid #F21A1C;
			border-radius: 4rpx;
			height: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_1 {
				height: 100%;
				width: 48rpx;
				line-height: 25rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 22rpx;
				color: #F21A1C;
				text-align: center;
			}

			.left_2 {
				height: 100%;
				width: 72rpx;
				background-color: #F21A1C;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 26rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.sendRight {
			height: 32rpx;
			background: #FDEDED;
			padding: 0 10rpx;
			border-radius: 4rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #F21A1C;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.delPrice {
		font-size: 20rpx;
		font-weight: 500;
		color: #F21A1C;
	}
</style>