<template>
	<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
		<view class="flex-row items-center section_2">
			<text class="font text">购物车</text>
			<view class="flex-row items-center flex-1 section_3 ml-17">
				<image class="shrink-0 image" mode="aspectFit"
					:src="shoppingCartUrl + '/productmain/search.png'" />
				<input :focus="isShowInput" @blur="blur" v-show="isShowInput" confirm-type="search" @confirm="gotoSearch" v-model="searchText" class="section_1 ml-4" placeholder="搜索购物车商品" />
				<view v-show="!isShowInput" @click="changeInput" class="section_1 ml-4"><text style="color: #B1B1B1;">搜索购物车商品</text></view>
			</view>
			<text class="font text_2 ml-17" @click="changeState">{{ stateText.topBtn }}</text>
		</view>
		<view class="flex-col section_5">
			<view class="flex-row justify-between self-stretch group">
				<view  @click="changeType(1)">	
					<text class="font_2 text_3">商品类</text>
					<view class="flex-col justify-start items-center" v-if="isShowLine" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 10rpx;"></view>
				</view>
				<view @click="changeType(2)">
					<text class="font_2 text_4">服务类</text>
					<view class="flex-col justify-start items-center" v-if="!isShowLine" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 10rpx;"></view>
				</view> 
			</view>
		</view>
		<view class="flex-col list">
			<checkbox-group @change="checkBoxChange">
				<view class="flex-col list-item mt-14" v-for="(item, index) in products" :key="index">
					<!-- 实体类商品 -->
					<view class="flex-row section_10" v-if="current == 1">
						<!-- 多选框 -->
						<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked" />
						<view class="flex-row items-end flex-1 self-center ml-22">
							<image class="shrink-0 image_2" :src="publicPath + item.cartGoodVO.goodImg.split(';')[0]" mode="aspectFill"
								@click="jump_product(item.goodId)" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }"/>
							<view class="flex-col flex-1 group_2">
								<view class="flex-row justify-center group_3" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
									<text class="font_3 text_5" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
									<text class="font_3" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
								</view>
								<view class="flex-row justify-between items-center mt-46">
									<view class="flex-row items-end" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
										<text class="font_4 text_6" @click="jump_product(item.goodId)">￥{{ item.cartGoodVO.price }}</text>
									</view>
									<!-- 减少数量 -->
									<image class="image_4"
										:src="shoppingCartUrl + '/productmain/sub.png'" 
										@click="decrease(index , item.checked)" />
								</view>
							</view>
							<view class="flex-row shrink-0 group_4">
								<view class="flex-col justify-start items-center text-wrapper">
									<text class="font_6">{{ item.quantity }}</text></view>
								<!-- 添加数量 -->
								<image class="image_5 ml-2"
									:src="shoppingCartUrl + '/productmain/add.png'" 
									@click="increase(index , item.checked)" />
							</view>
						</view>
					</view>
					<!-- 服务类商品 -->
					<view class="flex-col list-item_2 mt-14" v-if="current == 2">
						<view class="flex-row">
							<!-- 按钮 -->
							<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked" />
							<image class="shrink-0 image_7" :src="publicPath + item.cartExperienceGoodVO.goodImg.split(';')[0]" mode="aspectFill" />
							<view class="flex_1">
								<view class="flex-col flex-1 group_5">
									<text class="font_7">{{ item.cartExperienceGoodVO.name }}</text>
									<view class="flex-row justify-between items-center section_7 mt-14">
										<view class="flex-col items-start">
											<text class="font_8">{{ item.timeSlot }}</text>
											<text class="font_8 text_8 mt-6">预约日期：{{ item.reservationDate }}</text>
										</view>
										<!-- 下拉菜单 -->
										<!-- <image class="image_9"
												src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FYAAYkKzi-pulldown.png" /> -->
									</view>
								</view>
								<view class="flex-row justify-end items-center group_6">
									<view class="flex-row items-center">
										<text class="font_9 text_9">￥{{ item.cartExperienceGoodVO.price }}</text>
									</view>
									<view class="flex-row ml-83">
										<image class="image_10"
											:src="shoppingCartUrl + '/productmain/sub.png'" 
											@click="decrease(index , item.checked)" 
											/>
										<view class="flex-col justify-start items-center text-wrapper_2 ml-2"><text
												class="font_6">{{ item.quantity }}</text>
										</view>
										<image class="image_11 ml-2"
											:src="shoppingCartUrl + '/productmain/add.png'" 
											@click="increase(index , item.checked)" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="flex-row justify-between items-center section_8">
			<view class="flex-row items-center">
				<checkbox style="margin-top: -8rpx;" class="shrink-0 image_8 round red" :checked="allCheck" @tap="allChecked" />
				<text class="font_2 text_11 ml-9">全选</text>
			</view>
			<view class="flex-row items-center">
				<text class="font_2 text_12">合计：{{ totalPrice }}元</text>
				<view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-7" @click="editOrSettle" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }" >
					<text class="font_4 text_13">{{ stateText.bottomBtn }}</text>
				</view>
			</view>
		</view>
	</view>
	
	
	<!-- 遮罩层 -->
	    <view v-if="isShow" class="overlay"></view>
</template>

<script setup>
	import { ref, onMounted, toRaw } from 'vue'
	import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	import { baseUrl, testUrl, suiUrl } from '../../../api/request';
	import * as math from 'mathjs'
	import { shoppingCartUrl,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import { publicPath } from '../../../common/globalImagesUrl';
	import { JudgeIsNullity } from '../../../common/globalFunction';
	const products = ref([])
	const tempProducts = ref([])
	const isShowInput = ref(false)
	const current = ref(1) //用于判断是实体类商品还是服务类商品
	const allCheck = ref(false) //全选
	const checkedData = ref([]) //选择的暂存保存数组
	const totalPrice = ref(0) //总金额
	const searchText = ref('')
	const stateText = ref({
		topBtn: '编辑',
		bottomBtn: '去结算'
	})
	const updateArr = ref([]) //商品更新数组(防抖)
	//服务类商品
	const serviceProduct = ref([])
	const errorArr = ref([])  //检验错误的实体类商品id数组
	onShow(() => {
		getProductCart() //获取购物车所有商品信息
		totalPrice.value = 0 //重置
	})
	onLoad(() => {
		getFonts()
		getProductCart() //再获取一次
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage","shareTimeline"]
		})
	})
	
	
	onPullDownRefresh( async ()=>{  //下拉刷新
		getProductCart() //再获取一次
		setTimeout(()=>{
			uni.stopPullDownRefresh()   //停止下拉刷新
		},1000)
	}) 
	
	// const focus = () => {
	// 	isShowInput.value = true
	// }
	
	const blur = () => {
		if (JudgeIsNullity(searchText.value)) {
			isShowInput.value = !isShowInput.value
		}
	}
	
	const changeInput = () => {
		isShowInput.value = !isShowInput.value
	}
	
	
	//获取实体类商品信息
	const getEntityPro = async () => {
		const res = await uni.request({
			url: baseUrl + '/cart/list',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			}
		})
		console.log('res--->', res.data);
		if (res.data.code === 1) {
			products.value = res.data.data
			tempProducts.value = res.data.data
			products.value.forEach((item) => {
				item.checked = false     //所有都先未选中
			})
		}
		// console.log('products-->', products.value);
	}
	//小程序刷新根据用户id获取购物车信息
	const getProductCart = async () => {
		allCheck.value = false //若全选，取消
		if (current.value === 1) {
			getEntityPro() //获取实体类商品
		} else {
			getServiceCart() //获取服务类商品
		}
	}
	const deleteProduct = async (idArr) => { //删除实体类商品
		if(current.value === 1) {
			const res = await uni.request({
				url: baseUrl + '/cart/delete',
				method: 'POST',
				data: {
					idList : idArr
				},
				header: {
					'cookie': wx.getStorageSync('cookie')
				}
			})
			console.log(res.data);
			if (res.data.code === 1) {
				uni.reLaunch({
					url: '/pages/Shopping-cart/productmain/testproductmain'
				})
				totalPrice.value = 0
			}
		} else {
			const res = await uni.request({
				url: baseUrl + '/cartExperience/delete',
				method: 'POST',
				data: {
					idList : idArr
				},
				header: {
					'cookie': wx.getStorageSync('cookie')
				}
			})
			console.log(res.data);
			if (res.data.code === 1) {
				uni.reLaunch({
					url: '/pages/Shopping-cart/productmain/testproductmain'
				})
				totalPrice.value = 0
			}
		}
	}
	const getServiceCart = async () => {
		const res = await uni.request({
			url: baseUrl + '/cartExperience/list',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			}
		})
		console.log('服务类商品--->', res);
		if (res.data.code === 1) {
			products.value = res.data.data
			tempProducts.value = res.data.data
			products.value.forEach((item)=>{   //添加多选框状态
				item.checked = false
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: "服务错误"
			})
		}
	}
	const isShowLine = ref(true)
	//更改实体商品和服务类方法
	const changeType = async (num) => {
		if (num == 1) {
			if (!isShowLine.value) {
				isShowLine.value = true
			}
		} else {
			if (isShowLine.value) {
				isShowLine.value = false
			}
		}
		current.value = num;
		console.log('current状态--->',current.value);
		getProductCart()
		totalPrice.value = 0
	}
	// //更改下划线
	// const getTextStyle = (num) => ({
	// 	'border-bottom': current.value === num ? '2px solid orange' : '2px solid  #ffffff'
	// });
	//复选框绑定方法
	const checkBoxChange = (event) => {
		// console.log('服务类打印出来是---->', event); //选中后是数组下标
		// console.log('length---->', event.detail.value.length);
		// console.log('product--->',products.value);
		let flagArr = new Array(products.value.length).fill(0)   //标记数组
		if (event.detail.value.length == products.value.length) {   //单选得长度等于购物车所有数量就全选
			allCheck.value = true
		} else {
			allCheck.value = false
		}
		checkedData.value = [] //每次都要重置一下
		totalPrice.value = 0;
		let count = 0; //用于记录checkedData不为null的个数
		// console.log('event--->', event);
		console.log('现在的商品---->',products.value);
		if (!event.detail.value.length) {
			// products.value[parseInt(event.detail.value)].checked = true;  //勾选
			products.value.forEach((item) => {
				item.checked = false
			})
		} 
		// else {
		// }
		//计算一下总金额
		for (let key in event.detail.value) {
			let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
			if (current.value === 1) { //当current = 1 时，计算实体类的
				computed(products.value[temp].cartGoodVO.price, products.value[temp].quantity)
			} else {
				computed(products.value[temp].cartExperienceGoodVO.price, products.value[temp].quantity)
			}
		}
		event.detail.value.forEach((item) => {
			products.value[parseInt(item)].checked = true
			flagArr[parseInt(item)] = 1
			products.value.forEach((proItem,index,arr) => {   //将未选中的置为false
				if(flagArr[index] !== 1) {
					products.value[index].checked = false
				}
			})
		})	
		//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
		// products.value.forEach((x) => {
		// 	event.detail.value.forEach((y) => {
		// 		if (x.value == y) {
		// 			x.checked = true
		// 		} else {
		// 			x.checked = false
		// 		}
		// 	})
		// })
		event.detail.value.forEach((item) => { //将选中的商品信息赋值给checkedData
			console.log('products.value[parseInt(item)].goodId', products.value[parseInt(item)].goodId);
			if (products.value[parseInt(item)] !== null) {
				checkedData.value.push(products.value[parseInt(item)].id)
				// console.log(products.value[parseInt(item)].goodId);
				count += 1
			}
		})
		console.log('checkedData--->', checkedData.value);
		//将选中的数组保存在某一个ref中
		// checkedData.value = event.detail.value
		// console.log('checkedData--->',checkedData.value);
	}
	//全选方法
	const allChecked = () => {
		allCheck.value = !allCheck.value
		totalPrice.value = 0
		if (allCheck.value == true) {
			if (current.value === 1) {
				products.value.forEach((item) => {
					item.checked = true //将全部选项选上
					computed(item.cartGoodVO.price, item.quantity)
				})
			} else {
				products.value.forEach((item) => {
					item.checked = true //将全部选项选上
					computed(item.cartExperienceGoodVO.price, item.quantity)
				})
			}
			checkedData.value = products.value.map((item) => (item.id))
			console.log('checkedData--->', checkedData.value);
		} else {
			products.value.forEach((item) => {
				item.checked = false //将全部都取消选择
			})
			checkedData.value = []
		} 
	}
	//减少商品(适用于服务类和商品类)
	const decrease = (index, item) => { //item用于监测是否选中
		// console.log('decrease,index-->', index);
		// console.log('decrease,item-->', item);
		if (products.value[index].quantity > 1) {
			products.value[index].quantity -= 1
			if (item && products.value[index].quantity >= 1 && current.value === 1) {
				computed(-products.value[index].cartGoodVO.price, 1)
			} else if(item && products.value[index].quantity >= 1 && current.value === 2) {
				computed(-products.value[index].cartExperienceGoodVO.price, 1)
			}
			cartFd() //购物车防抖
		}
	}
	//增加商品的方法(适用于服务类和商品类)
	const increase = (index, item) => { //item用于监测是否选中,obj是商品对象,index是商品数组下标
		// console.log('increase,index-->', index);
		// console.log('increase,item-->', item);
		console.log('增加商品的--->',item);
		if ( current.value === 1) {  //和减少商品数量情况不一样
			if (products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
				if(item) {
					computed(products.value[index].cartGoodVO.price, 1)
				}
				products.value[index].quantity += 1
				cartFd()  //增加商品的时候启动购物车防抖
			}
		} else if (current.value === 2) { 
			if(products.value[index].quantity < products.value[index].restNumber) {
				products.value[index].quantity += 1
				if(item) {
					computed(products.value[index].cartExperienceGoodVO.price, 1)
				}
				cartFd()
			}
		}
	}
	//计算方法
	const computed = (price, quantity) => {
		totalPrice.value = math.round(totalPrice.value + price * quantity, 2)
		return totalPrice.value
	}
	const jump_product = (gid) => {
		uni.navigateTo({
			url: '../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(gid)
		})
	}
	const editOrSettle = async () => { //去结算或者删除状态方法
		// console.log('要传到订单详情页面的checked--->',checkedData.value);
		if (stateText.value.bottomBtn === '去结算') {
			if (checkedData.value.length === 0) { //在没有勾选的时候禁止发请求
				return;
			}
			// 实体类商品的购买前检查请求
			if (current.value === 1) {
				const res = await uni.request({
					url: baseUrl + '/cart/submit/error',
					method: 'POST',
					header: {
						'cookie': wx.getStorageSync('cookie')
					}
				})
				res.data.data.length > 0 ? errorArr.value = res.data.data : errorArr.value = null
				console.log('错误商品id',res.data);
				console.log('错误商品数组---->',errorArr.value);
				if (res.data.data.length != 0) {
					uni.showModal({
						title: '提示',
						content: '购物车商品发生改变，点击移除变化商品',
						showCancel: false,
						success: (e) => {
							if (e.confirm) {
								deleteProduct(errorArr.value)
								uni.reLaunch({
									url: '/pages/Shopping-cart/productmain/testproductmain'
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/product-waitpay/product-waitpay?cartInfo=' + JSON.stringify(checkedData.value)
					})
					checkedData.value.splice(0, checkedData.value.length)
				}
			} else if (current.value === 2) { //服务类商品购买前检查请求
				const res = await uni.request({
					url: baseUrl + '/cartExperience/submit/error',
					method: 'POST',
					header: {
						'cookie': wx.getStorageSync('cookie')
					}
				})
				if(res.data.code === 5000) {
					uni.showToast({
						icon: 'error',
						title: res.data.message
					})
				}
				res.data.data.length > 0 ? errorArr.value = res.data.data : errorArr.value = null
				console.log('服务类校验res---->',res.data);
				if (res.data.data.length != 0) {
					uni.showModal({
						title: '提示',
						content: '购物车商品发生改变，点击移除变化商品',
						showCancel: false,
						success: (e) => {
							if (e.confirm) {
								// getProductCart() //重新获取购物车信息
								deleteServicePro(errorArr.value)
								uni.reLaunch({
									url: '/pages/Shopping-cart/productmain/testproductmain'
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/serviceWaitPay/serviceWaitPay?cartInfo=' + JSON.stringify(checkedData.value)
					})
					checkedData.value.splice(0, checkedData.value.length)
				}
			}

		} else {
			uni.showModal({
				title: '提示',
				content: '是否删除商品?',
				success: (e) => {
					if (e.confirm) {
						deleteProduct(checkedData.value)
					} else if (e.cancel)
						return;
				}
			})
		}
	}
	
	let editOrCompleteTimer = null
	
	const changeState = () => { //修改购物车订单方法
		if (stateText.value.topBtn === '编辑') {
			stateText.value.topBtn = '完成',
				stateText.value.bottomBtn = '删除'
		} else {
			stateText.value.topBtn = '编辑',
				stateText.value.bottomBtn = '去结算'
		}
		clearTimeout(editOrCompleteTimer)
		showLoading()
		editOrCompleteTimer = setTimeout(async () => {
			hideLoading()
		}, 1000)
	}
	const productSearch = () => { //搜索框方法
		var arr = []
		products.value.forEach((item) => arr.push(item))
		console.log(123);
	}
	const deleteServicePro = async ( idArr )=>{
		const res = await uni.request({
			url: baseUrl + '/cartExperience/delete',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: {
				idList: idArr
			}
		})
		if (res.data.code === 1) {
			uni.reLaunch({
				url: '/pages/Shopping-cart/productmain/testproductmain'
			})
			totalPrice.value = 0
		}
	}
	//防抖相关变量
	let debounceTimer = null;
	let wxPayTimer = null;
	let loading = false;
	let isLoading = ref(false)
	let isShow = ref(false)
	const cartFd = () => {  //购物车防抖
		clearTimeout(debounceTimer)
		showLoading()
		debounceTimer = setTimeout(async () => {
			await updateCart()
			hideLoading()
		}, 1000)
	}
	function showLoading() {  //加载弹窗
	  if (!loading) {
	    wx.showLoading({
	      title: '加载中...',
	    });
	    loading = true;
		isLoading.value = true
	  }
	}
	function hideLoading() {  //关闭弹窗
	  if (loading) {
	    wx.hideLoading();
	    loading = false;
		isLoading.value = false
	  }
	}
	const updateCart = async () => {  //更新购物车商品信息
		if(current.value === 1) {
			// console.log('product--->',products.value);
			updateArr.value.splice(0,updateArr.value.length)
			products.value.forEach((item)=> {
				updateArr.value.push({
					id: item.id,
					quantity: item.quantity
				})
			})
			const res = await uni.request({
				url: baseUrl + '/cart/update',
				method: 'POST',
				header: {
					'cookie': wx.getStorageSync('cookie')
				},
				data: toRaw(updateArr.value)
			})
			if(res.data.code === 1) {
				console.log('更新成功');
			}
		} else if(current.value === 2) {
			updateArr.value.splice(0,updateArr.value.length)
			products.value.forEach((item)=> {
				updateArr.value.push({
					id: item.id,
					quantity: item.quantity,
					reservationDate: item.reservationDate,
					timeSlot: item.timeSlot
				})
			})
			console.log('防抖数组--->',updateArr.value);
			const res = await uni.request({
				url: baseUrl + '/cartExperience/update',
				method: 'POST',
				header: {
					'cookie': wx.getStorageSync('cookie')
				},
				data: toRaw(updateArr.value)
			})
			if(res.data.code === 1) {
				console.log('更新成功');
			}
		}
	}
	
	
	
	
	
	
	
	
	
	const gotoSearch = async () => {
		if (searchText.value === '') {
			products.value = tempProducts.value
			return ;
		}
		if (current.value === 1) {
			products.value = tempProducts.value.filter(item => item.cartGoodVO.name.includes(searchText.value))
		} else {
			products.value = tempProducts.value.filter(item => item.cartExperienceGoodVO.name.includes(searchText.value))
		}
	}

	
	
	
</script>

<style lang="scss" scoped>

	.overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.4);  /* 半透明黑色背景 */
	  z-index: 999;
	}
	.ml-17 {
		margin-left: 31.88rpx;
	}

	.ml-83 {
		margin-left: 155.63rpx;
	}

	.ml-9 {
		margin-left: 16.88rpx;
	}

	.ml-7 {
		margin-left: 13.13rpx;
	}

	.page {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		// height: 100%;
		height: 100vh;
	}

	.section_2 {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		padding: 28.13rpx 30.69rpx 18.75rpx;
		background-color: #fbdedf;
		z-index: 99;
	}

	.font {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 27.77rpx;
		color: #c35c5d;
	}

	.text {
		line-height: 28.24rpx;
	}

	.section_3 {
		padding: 0 15rpx;
		background-color: #ffffff;
		border-radius: 20.38rpx;
		height: 56.25rpx;
	}

	.image {
		width: 45.63rpx;
		height: 45rpx;
	}

	.section_1 {
		flex: 1 1 0;
		margin-right: 7.5rpx;
	}

	.text_2 {
		margin-right: 4.46rpx;
	}

	.section_5 {
		position: fixed;
		left: 0;
		right: 0;
		top: 102rpx;
		padding: 0 121.88rpx;
		background-color: #ffffff;
		z-index: 99;
	}

	.group {
		padding: 20.06rpx 4.33rpx 0 4.33rpx;
		z-index: 1;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 27.77rpx;
		color: #323232;
	}

	.text_3 {
		line-height: 27.9rpx;
	}

	.text_4 {
		line-height: 28.71rpx;
	}

	.section_6 {
		background-color: #fb8b05;
		width: 112.5rpx;
		height: 5.63rpx;
	}

	.list {
		margin: 192rpx 24rpx 120rpx 24rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.mt-14 {
		margin-top: 9rpx;
	}

	.section_10 {
		padding: 38.1rpx 31.52rpx 30.07rpx 27.31rpx;
		background-color: #ffffff;
		border-radius: 18.75rpx;
	}

	.image_3 {
		transform: scale(0.7);
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.image_2 {
		// margin-bottom: 8.7rpx;
		border-radius: 9.38rpx;
		width: 127.5rpx;
		height: 170.00rpx;
	}

	.group_2 {
		margin-left: 23.31rpx;
		margin-top: 2.33rpx;
	}

	.group_3 {
		padding: 0 9.49rpx;
	}

	.font_3 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.01rpx;
		color: #323232;
	}

	.text_5 {
		line-height: 25.54rpx;
	}

	.font_4 {
		font-size: 33.75rpx;
		font-family: FangZhengFonts;
		line-height: 22.07rpx;
		color: #e79ea1;
	}

	.text_6 {
		margin-left: 24.19rpx;
		margin-bottom: 7.78rpx;
		line-height: 22.54rpx;
	}

	.image_6 {
		margin-left: -76.69rpx;
		width: 30rpx;
		height: 28.13rpx;
	}

	.font_5 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 18.73rpx;
		color: #e79ea1;
	}

	.text_7 {
		margin-left: 61.44rpx;
		margin-bottom: 6.15rpx;
		line-height: 17.53rpx;
	}

	.image_4 {
		border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
		width: 45.21rpx;
		height: 48.13rpx;
	}

	.group_4 {
		margin-left: 3.77rpx;
	}

	.text-wrapper {
		padding: 14.74rpx 0 14.66rpx;
		background-color: #fbdedf;
		width: 58.41rpx;
		height: 48.13rpx;
	}

	.font_6 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 26.25rpx;
		color: #323232;
	}

	.image_5 {
		border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
		width: 45.21rpx;
		height: 48.13rpx;
	}

	.list-item_2 {
		padding: 22.01rpx 18.84rpx 33.75rpx;
		background-color: #ffffff;
		border-radius: 18.75rpx;
	}

	.image_8 {
		transform: scale(0.7);
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.image_7 {
		border-radius: 9.38rpx;
		margin-left: 39.79rpx;
		margin-top: 2.36rpx;
		width: 127.5rpx;
		height: 170rpx;
	}

	.group_5 {
		margin: 0 13.99rpx 7.5rpx 23.25rpx;
	}

	.font_7 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 31.88rpx;
		color: #323233;
	}

	.section_7 {
		margin-right: 8.63rpx;
		padding: 11.1rpx 10.14rpx 14.25rpx;
		background-color: #fff;
		border-radius: 9.38rpx;
	}

	.font_8 {
		font-size: 26.5rpx;
		font-family: FangZhengFonts;
		line-height: 22.07rpx;
		color: #6b6e72;
	}

	.text_8 {
		line-height: 20.83rpx;
	}

	.image_9 {
		margin-right: 5.06rpx;
		width: 22.5rpx;
		height: 22.5rpx;
	}

	.group_6 {
		padding: 0 22.61rpx;
	}

	.font_9 {
		font-size: 33.75rpx;
		font-family: FangZhengFonts;
		line-height: 25.01rpx;
		font-weight: 600;
		color: #e79ea1;
	}

	.text_9 {
		// margin-left: 25.14rpx;
		line-height: 24.88rpx;
		margin-right: 36rpx;
	}

	.image_12 {
		margin-left: -90.77rpx;
		width: 30rpx;
		height: 26.25rpx;
	}

	.font_10 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 18.73rpx;
		font-weight: 600;
		color: #e79ea1;
	}

	.text_10 {
		margin-left: 61.61rpx;
		line-height: 19.29rpx;
	}

	.image_10 {
		border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
		width: 45.24rpx;
		height: 45rpx;
	}

	.text-wrapper_2 {
		padding: 12.39rpx 0 13.88rpx;
		background-color: #fbdedf;
		width: 58.42rpx;
		height: 45rpx;
	}

	.image_11 {
		border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
		width: 45.24rpx;
		height: 45rpx;
	}

	.section_8 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20.63rpx 20.63rpx 15rpx;
		background-color: #ffffff;
	}

	.image_13 {
		margin-top: 0;
	}

	.text_11 {
		line-height: 27.3rpx;
	}

	.text_12 {
		color: #323232;
	}

	.text-wrapper_3 {
		padding: 20.93rpx 0 25.24rpx;
		background-color: #e79ea1;
		border-radius: 75rpx;
		width: 219.38rpx;
		height: 76.88rpx;
	}

	.text_13 {
		color: #ffffff;
		line-height: 30.71rpx;
	}

	.flex_1 {
		// display: flex
		width: 480rpx;
	}

	@import url(../../../common/css/global.css);
</style>