<template>
	<view class="container">
		<view class="headStatus">
			<view class="status">
				<up-icon v-if="listinfo.status =='done'||listinfo.status =='unpaid'" name="checkmark-circle-fill"
					color="#03C061" size="23"></up-icon>
				<view class="statusName" v-if="listinfo.status == 'unpaid'">待支付</view>
				<view class="statusName" v-if="listinfo.status=='done'">已完成</view>
				<view class="statusName" v-if="listinfo.status=='refund'">退单</view>
				<view class="statusName" v-if="listinfo.status=='part-refund'">部分退单</view>
				<view class="statusName" v-if="listinfo.status=='cancelled'">取消订单</view>
			</view>
			<view class="time" v-if="listinfo.createTime">下单时间：{{ listinfo.createTime }}</view>
			<view class="time" v-if="listinfo.paidTime && (listinfo.status!='cancelled' ||listinfo.status!='unpaid')">
				付款时间：{{listinfo.paidTime}}
			</view>
		</view>

		<view class="order-msg-list" v-if="listinfo.status=='done'">
			<view class="item" v-for="item in orderMsgList" :key="item.id">
				<msg-list-item :content="item.content" :title="item.title"
					:create-time="item.createTime"></msg-list-item>
			</view>
		</view>

		<view class="wxQrcode" v-if="shopQrcode">
			<view class="left">
				<text class="title">扫码加好友，优惠多多</text>
				<text>优惠活动多</text>
				<text>充值有好礼</text>
				<text>会员享低价</text>
				<text>长按保存，微信内扫一扫加好友</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<u-image width="152" height="152" radius="16" :src="shopQrcode"></u-image>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<image style="height: 150rpx;width: 150rpx;" :src="shopQrcode" @longpress="saveImage(shopQrcode)"
				mode="aspectFill"></image>
			<!-- #endif -->
		</view>

		<!-- 详情 -->
		<orderInfoAfter ref="orderInfoAfterRef" :rechargeFreeChecked="rechargeFreeChecked" :freeCheck="freeCheck"
			:listinfo="listinfo" :orderVIP="orderVIP" :ordershopUserInfo='ordershopUserInfo' @istype="istype"
			@clickPointsamount='clickPointsamount' @learcoupons="learcoupons" :changeFreeenable='changeFreeenable'>
		</orderInfoAfter>

		<!-- 霸王餐 -->
		<rechargeFree :freeDineConfig="orderVIP.freeDineConfig" :payAmount="listinfo.totalPrices"
			v-if="listinfo.status == 'unpaid' && orderVIP.freeDineConfig.enable" @changeFree="changeFree">
		</rechargeFree>

		<!-- 支付方式 -->
		<paymentMethodes ref="paymentMethodref" :orderVIP="orderVIP" @groupChange="groupChange"
			:changeFreeenable='changeFreeenable' v-if="listinfo.status == 'unpaid'">
		</paymentMethodes>
		<view class="fixedview">
			<view class="flex-between" v-if="listinfo.status == 'unpaid'">
				<view class="fixedview_one flex-start">
					<view class="fixedview_oneone"> 实付金额： </view>
					<view class="fixedview_onetow">
						<text>¥</text>{{listinfo.totalCost}}
					</view>
				</view>
				<view class="flex-colum-end">
					<view class="fixedview_tow" @tap="$u.debounce(istoricalorders,1000)">
						{{paymentmethod.paymentBtnText}}
					</view>
					<!-- <view class="fixedview_tows" @tap="$u.debounce(APIputuserorderclick,1000)">
						取消订单
					</view> -->
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"> </view>
		<payPassword ref="payPasswordref" :isShow="ispws" @inputComplete="accountPayevent" @close="ispws = false" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		watchEffect,
		nextTick
	} from 'vue';

	import {
		APIgetOrderById,
		APIputuserorder,
		APIhistoryOrder
	} from '@/common/api/order/index.js'

	import {
		APIshopUserInfo
	} from '@/common/api/member.js'

	import {
		APImemberPointsmyPoints,
		APImemberPointscalcUsablePoints
	} from '@/common/api/shop/index.js'

	import {
		useCartStore
	} from '@/stores/order.js';

	const cartStore = useCartStore()

	// 结账管理
	import {
		Memberpay
	} from '@/stores/pay.js';

	const storeMemberpay = Memberpay();

	import {
		productStore
	} from '@/stores/user.js';
	const storeuser = productStore();

	import payPassword from '@/components/payPassword.vue'
	import orderInfoAfter from './components/orderInfoAfter.vue'
	// import orderInfoBefore from '../components/orderInfoBefore.vue'
	import rechargeFree from './components/rechargeFree.vue'
	import paymentMethodes from '@/components/paymentMethod.vue'; //支付方式
	import {
		onShow,
		onBackPress
	} from '@dcloudio/uni-app';
	import {
		getMsgByOrderIdReq
	} from "@/common/api/account/message";

	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'

	// 输入支付密码
	const ispws = ref(false)

	// 商品订单会员
	const ordershopUserInfo = ref(uni.cache.get('ordershopUserInfo'))

	// 是否显示商家二维码信息
	try {
		const shopQrcode = ref(uni.cache.get('shopUserInfo').shopInfo)
	} catch (error) {
		//TODO handle the exception
	}

	// 订单id
	const orderId = ref('')

	// 订单详情
	const listinfo = reactive({
		combinedArray: {},
		Productroll: 0,
		coupondiscountAmount: 0,
		pointsDiscountAmount: 0,
		packFeess: 0,
		totalPrices: 0,
		Seatcharge: 0,
		pointsNum: 0
	})

	// 会员信息
	const orderVIP = ref(uni.cache.get('orderVIP'))

	//判断是否是打包商品
	const is_type = ref(0)

	//打包商品切换
	const istype = (newValue) => {
		is_type.value = newValue;
	};

	//积分
	const freeCheck = ref(false)


	// * 获取订单详情接口
	const orderorderInfo = async () => {
		let res = await APIgetOrderById({
			orderId: orderId.value
		})
			console.log("orderorderInfo1: res == ", res);
		if (res) {
			Object.assign(listinfo, res);
			console.log("orderorderInfo: res == ", res);
			// 历史订单
			if (listinfo.detailMap) {
				let combinedArray = [];
				for (const key in listinfo.detailMap) {
					if (listinfo.detailMap.hasOwnProperty(key)) {
						let subArray = listinfo.detailMap[key];
						combinedArray = [...combinedArray, ...subArray]
					}
				}
				listinfo.combinedArray = combinedArray
				listinfo.packFeess = cartStore.getTotalPackFee(listinfo.combinedArray)
				// 计算购物车商品费用
				listinfo.totalPrices = cartStore.getTotalTotalPrices(listinfo
					.combinedArray, changeFreeenable)
				// 餐位费listinfo.seatNum
				listinfo.Seatcharge = cartStore.getTotalSeatcharge(listinfo.seatNum)
			}
			if (listinfo.discountInfo) {
				const discountObj = JSON.parse(listinfo.discountInfo);
				const tempArray = [];
				for (const [key, value] of Object.entries(discountObj)) {
					tempArray.push({
						name: key,
						amount: value
					});
				}
				listinfo.discountInfo = tempArray;
			}
			// 回填先质控
			// console.log(listinfo)

			console.log("orderorderInfo list info: ", listinfo);
			if (listinfo.status == 'done') {
				getOrderMsgInfo()
			}
		}
	}

	const orderMsgList = ref([])

	// 获取订单消息
	const getOrderMsgInfo = async () => {
		orderMsgList.value = []
		let res = await getMsgByOrderIdReq(orderId.value)

		if (res) {
			orderMsgList.value = res
		}
	}

	// 监听价格算法
	watchEffect(async () => {
		if (listinfo.combinedArray.length > 0) {
			// 打包费packFeess  计算购物车商品费用totalPrices  餐位费Seatcharge
			// try {
			let sum = (is_type.value != 0 ? listinfo.packFeess : 0) + listinfo.totalPrices + (is_type
				.value == 0 ? listinfo.Seatcharge : 0);
			listinfo.originAmount = Math.round(sum * 100) / 100;

			// 打包费packFeess  计算购物车商品费用totalPrices  餐位费Seatcharge  商品卷Productroll 优惠卷coupondiscountAmount 积分listinfo.pointsDiscountAmount
			let sums = (is_type.value != 0 ? listinfo.packFeess : 0) + listinfo.totalPrices + (is_type
				.value ==
				0 ? listinfo.Seatcharge : 0) - (listinfo.Productroll || 0) - (listinfo
				.coupondiscountAmount || 0) - (listinfo.pointsDiscountAmount || 0);
			listinfo.totalCost = Math.round(sums * 100) / 100;
			// 总价格
			// console.log(listinfo.combinedArray, listinfo.packFeess, listinfo.totalPrices, listinfo
			// 	.Seatcharge, listinfo.Productroll, listinfo.coupondiscountAmount, sums) // 霸王餐
			// console.log(orderVIP.value.freeDineConfig.enable, changeFreeenable.value)
			if (orderVIP.value.freeDineConfig.enable && changeFreeenable.value) {
				listinfo.totalCost = (parseFloat(listinfo.totalCost) * parseFloat(orderVIP.value
					.freeDineConfig.rechargeTimes)).toFixed(2)
			}
			// 积分
			if (listinfo.totalCost && listinfo.status == 'unpaid' && orderVIP.value.id) {
				uni.$u.debounce(memberPointscalcUsablePoints, 500)
			}
			// } catch (error) {
			// 	//TODO handle the exception
			// }
		}
	});

	// 霸王餐
	const changeFreeenable = ref(false)

	const changeFree = (e) => {
		if (e) {
			orderInfoAfterRef.value.bwcclear()
			uniqueIds.value = [] // 筛选出商品卷的id
			listinfo.coupondiscountAmount = 0 // 优惠卷减去的金额
			listinfo.pointsNum = 0 // 商品卷总价价格
			// 商品价格
			listinfo.totalPrices = cartStore.getTotalTotalPrices(listinfo.combinedArray, false)
			// 支付方式切换
			// #ifdef MP-WEIXIN
			paymentMethodref.value.groupChanges(2)
			// #endif
			// #ifdef MP-ALIPAY
			paymentMethodref.value.groupChanges(3)
			// #endif
		} else {
			// 商品价格
			listinfo.totalPrices = cartStore.getTotalTotalPrices(listinfo.combinedArray)
		}
		changeFreeenable.value = e

	}

	const saveImage = (url) => {
		uni.saveImage({
			url: url,
			success: () => {
				uni.showToast({
					title: "保存成功",
					icon: 'none'
				})
			},
		});
	}

	//
	const paymentMethodref = ref(null)

	// 支付方式切换
	const paymentmethod = reactive({
		radiovalue: 2,
		paymentBtnText: "微信支付",
		payType: 'WECHAT'
	})

	const groupChange = async (e) => {
		paymentmethod.radiovalue = e.type;
		paymentmethod.paymentBtnText = e.name;
		paymentmethod.payType = e.payType;
	}

	// * 去充值
	const goRecharge = () => {
		uni.pro.navigateTo('/pages/member/index', {
			shopId: listinfo.shopId
		})
	}

	// 操作下单时候
	const orderInfoAfterRef = ref(null)

	// 商品卷的id储存
	const uniqueIds = ref([])

	// 这是优惠卷传的值
	const handleReturnData = async (data) => {
		// 这是优惠卷
		if (data.typeOrder == 1) {
			if (data.item) {
				// 优惠卷减去的金额
				listinfo.coupondiscountAmount = data.item.discountAmount
				uniqueIds.value.push(data.item.id)
				orderInfoAfterRef.value.dataprocessing(data)
			}
		} else {
			// 筛选出商品卷的id
			// 商品卷总价价格
			// uniqueIds.value = [...uniqueIds.value, ...new Set(data.map(item => item.id))]
			uniqueIds.value = [...uniqueIds.value, ...data.map(item => item.id)]
			listinfo.Productroll = cartStore.getTotalProductroll(data).value
			// TODO handle the exception
			let res = {
				Productroll: listinfo.Productroll,
				uniqueIds: uniqueIds.value.length
			}
			orderInfoAfterRef.value.dataprocessing(res)

		}

	};

	const learcoupons = (data) => {
		if (data == 'product') {
			uniqueIds.value = [] // 筛选出商品卷的id
			listinfo.coupondiscountAmount = 0 // 优惠卷减去的金额
			listinfo.Productroll = 0 // 商品卷总价价格
			listinfo.pointsNum = 0 // 积分总价格
		} else {
			// 每次点击优惠卷删除优惠卷里的id 
			if (listinfo.coupondiscountAmount != 0) {
				uniqueIds.value.pop()
			}
			listinfo.coupondiscountAmount = 0 // 优惠卷减去的金额
		}
	}

	// 删除订单
	const APIputuserorderclick = async () => {
		await APIputuserorder(listinfo.id)
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		})
		uni.pro.switchTab('order/index')
	}

	const istoricalorders = async () => {
		// 先调用历史订单
		let APIhistoryOrderres = await APIhistoryOrder({
			tableCode: listinfo.tableCode
		})
		// 判断是否有历史订单
		if (APIhistoryOrderres.detailMap) {
			let combinedArray = [];
			for (const key in APIhistoryOrderres.detailMap) {
				if (APIhistoryOrderres.detailMap.hasOwnProperty(key)) {
					let subArray = APIhistoryOrderres.detailMap[key];
					combinedArray = [...combinedArray, ...subArray]
				}
			}
			// 判断支付之前是是否还有新加订单
			if (listinfo.combinedArray.length === combinedArray.length) {
				goToPay()
			} else {
				uni.showToast({
					title: '你的订单已更新！',
					icon: 'none'
				})
				orderorderInfo()
			}
		} else {
			uni.showToast({
				title: '你的小伙伴已提交订单~',
				icon: 'none'
			})
			setTimeout(() => {
				orderorderInfo()
			}, 1000)
		}
	}

	// * 去支付
	const goToPay = async () => {
		// 余额支付
		if (paymentmethod.payType == 'accountPay') {
			// if (orderVIP.value.isVip == 0) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '您还不是会员,是否去注册会员？',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				uni.pro.navigateTo('user/member/index', {
			// 					shopId: orderVIP.value.shopId,
			// 					type: 'detail'
			// 				})
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}
			// 		}
			// 	})
			//return
			// } 
			if (orderVIP.value.payPwd == '') {
				uni.showModal({
					title: '提示',
					content: '您还未设置支付密码，是否去设置？',
					success: (res) => {
						if (res.confirm) {
							uni.pro.navigateTo('user/member/setPassword', {
								shopId: orderVIP.value.shopId,
								type: 'detail'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				// } else if (orderVIP.value.amount == 0) {
				// 	uni.showToast({
				// 		title: '您的余额不足',
				// 		icon: 'none'
				// 	})
				// } else {
			} else {
				ispws.value = true
			}
			return false
		}
		if (orderVIP.value.freeDineConfig.enable && changeFreeenable.value) {
			await storeMemberpay.actionspayltPayVip({
				shopId: orderVIP.value.shopId,
				shopUserId: orderVIP.value.id,
				orderId: orderId.value,
				userAllPack: is_type.value == 0 ? 0 : 1, //是否整单打包
				amount: listinfo.totalCost, // 最终订单金额
				returnUrl: '', //跳转地址
				buyerRemark: '',
				seatNum: is_type.value == 0 ? listinfo.seatNum : 0, //用餐人数
			})
			orderorderInfo()
			return false;
		} else {
			let checkOrderPay = {
				orderId: orderId.value,
				vipPrice: orderVIP.value.isVip == 1 && ordershopUserInfo.value.isMemberPrice == 1 ? 1 :
				0, //是否使用会员价0否1是
				userAllPack: is_type.value == 0 ? 0 : 1, //是否整单打包
				seatNum: is_type.value == 0 ? listinfo.seatNum : 0, //用餐人数
				originAmount: listinfo.originAmount, //订单原金额（包含打包费+餐位费） 不含折扣价格
				discountRatio: 1, //折扣比例(计算时 向上取整保留 两位小数)   写死1
				discountAmount: 0, //手动优惠金额  写死0
				productCouponDiscountAmount: listinfo.Productroll, //商品优惠券抵扣金额
				fullCouponDiscountAmount: listinfo.coupondiscountAmount, //满减优惠券抵扣金额
				couponList: uniqueIds.value, //用户使用的卡券
				orderAmount: listinfo.totalCost, // 最终订单金额
				roundAmount: 0, //抹零金额 减免多少钱
				pointsDiscountAmount: listinfo.pointsDiscountAmount, //积分抵扣金额(tb_points_basic_setting表)
				pointsNum: listinfo.pointsNum, //(扣除各类折扣 enable_deduction后使用)
				remark: '', //用户备注
			}
			try {
				await storeMemberpay.actionsltPayOrder({
					checkOrderPay,
					payType: paymentmethod.payType,
					buyerRemark: '',
					returnUrl: ''
				})
			} catch (error) {
				//TODO handle the exception
			}
		}
		orderorderInfo()
	}

	//002-获取订单可用积分及抵扣金额（支付页面使用）
	const memberPointscalcUsablePoints = async () => {
		let res = await APImemberPointscalcUsablePoints({
			shopUserId: orderVIP.value.id,
			orderAmount: listinfo.totalCost,
		})
		orderInfoAfterRef.value.getCalcUsablePoints(res)
	}

	// 
	const clickPointsamount = (Pointsamount) => {
		listinfo.pointsDiscountAmount = Pointsamount.pointsDiscountAmount
		listinfo.pointsNum = Pointsamount.pointsNum
	}

	const payPasswordref = ref(null)
	// 余额支付
	const accountPayevent = async (pwd) => {
		ispws.value = false;
		let checkOrderPay = {
			userId: uni.cache.get('userInfo').id,
			orderId: orderId.value,
			vipPrice: orderVIP.value.isVip == 1 && ordershopUserInfo.value.isMemberPrice == 1 ? 1 :
			0, //是否使用会员价0否1是
			userAllPack: is_type.value == 0 ? 0 : 1, //是否整单打包
			seatNum: is_type.value == 0 ? listinfo.seatNum : 0, //用餐人数
			originAmount: listinfo.originAmount, //订单原金额（包含打包费+餐位费） 不含折扣价格
			discountRatio: 1, //折扣比例(计算时 向上取整保留 两位小数)   写死1
			discountAmount: 0, //手动优惠金额  写死0
			productCouponDiscountAmount: listinfo.Productroll, //商品优惠券抵扣金额
			fullCouponDiscountAmount: listinfo.coupondiscountAmount, //满减优惠券抵扣金额
			couponList: uniqueIds.value, //用户使用的卡券
			orderAmount: listinfo.totalCost, // 最中订单金额
			roundAmount: 0, //抹零金额 减免多少钱
			pointsDiscountAmount: listinfo.pointsDiscountAmount, //积分抵扣金额(tb_points_basic_setting表)
			pointsNum: listinfo.pointsNum, //(扣除各类折扣 enable_deduction后使用)
			remark: '', //用户备注
		}
		try {
			await storeMemberpay.balancePayOrder({
				checkOrderPay,
				payType: paymentmethod.payType,
				pwd: pwd,
				shopUserId: orderVIP.value.id,
				buyerRemark: '',
				returnUrl: ''
			})
		} catch (error) {
			//TODO handle the exception
		}
		orderorderInfo()
	}

	onUnmounted(() => {
		uni.$off('returnData', handleReturnData);
	});


	onShow(() => {
		try {
			// 更新数据
			if (orderVIP.value) {
				console.log(uni.cache.get('orderVIP'))
				orderVIP.value = uni.cache.get('orderVIP')
				ordershopUserInfo.value = orderVIP.value.shopInfo
				if (orderId.value) {
					orderorderInfo()
				}
			}
		} catch (error) {
			//TODO handle the exception
		}
	});

	// 监听页面返回事件
	onMounted(async () => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取页面参数
		const options = currentPage.options;
		orderId.value = options.orderId
		if (options.shopId) {
			// 每次进来全局更新shopId
			uni.cache.set('shopId', options.shopId)
			uni.$on('returnData', handleReturnData);
		}
		// * 获取会员信息
		await storeuser.actionsproductqueryProduct()
		await nextTick()
		orderVIP.value = uni.cache.get('orderVIP')
		// 积分信息

		console.log("orderInfo onMounted");
		orderorderInfo()
	})
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.container {
		padding: 32rpx 28rpx 32rpx 28rpx;
	}

	.headStatus {
		display: flex;
		flex-direction: column;
		margin-bottom: 32rpx;
		align-items: center;

		.status {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;

			.statusName {
				margin-left: 16rpx;
			}
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 18rpx;
		}
	}

	.wxQrcode {
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 32rpx 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;

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

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}
	}

	.card_box {
		background-color: #fff;
		// box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(87,86,86,0.35);
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 18rpx;

		.card_head_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: absolute;
			top: -22.5rpx;
			padding: 0 44rpx;

			.card_head_item {
				width: 45rpx;
				height: 45rpx;
				background-color: #f9f9f9;
				border-radius: 50%;
				box-shadow: inset 0rpx -13rpx 18rpx -16rpx rgba(87, 86, 86, 0.35);
			}

		}
	}

	.card {
		// background-color: #fff;
		border-radius: 20upx;
		margin-bottom: 28upx;
		position: relative;

		.head {
			display: flex;
			justify-content: space-between;
			padding: 50rpx 0 32rpx 0;
			border-bottom: 2rpx dashed #E3E3E3;

			.head_left {
				.shopName {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.tableName {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.status {
				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.number-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 32rpx;

			.t {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.number {
				font-weight: bold;
				font-size: 56rpx;
				color: #333333;
			}
		}


		.price {
			.i {
				font-size: 20upx;
			}

			.num {
				font-size: 38upx;
			}
		}

		.shop-box {
			padding: 36rpx 34rpx 30rpx 34rpx;
			border-bottom: 2rpx dashed #E3E3E3;

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

				.shop-head-left {
					display: flex;
					align-items: center;

					.tag-wrap {
						width: 80rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 2rpx solid #E3AD7F;
						margin-right: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.tag {
							font-weight: 400;
							font-size: 24rpx;
							color: #E3AD7F;
						}
					}

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

				}
			}

			.shop-info {
				margin-top: 32rpx;

				.item:nth-child(1) {
					margin-top: 0;
				}

				.item {
					padding: 32rpx 0 !important;
					display: flex;

					.cover {}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						padding-left: 16upx;

						.productName {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-top: 20rpx;
						}

						.productSkuName {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.n {
							font-size: 24upx;
							color: #999;
						}
					}

					.price {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						padding-left: 68rpx;

						.priceAmount {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							margin-top: 26rpx;
						}

						.num {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 22rpx;
						}
					}
				}
			}

			.total-wrap {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 28rpx;

				.price {
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}



		.order_footer {
			display: flex;
			flex-direction: column;
			padding: 34rpx;
			position: relative;

			.order_footer_icon {
				width: 100%;
				position: absolute;
				top: -22.5rpx;
				left: 0;
				display: flex;
				justify-content: space-between;

				.order_footer_left_icon {
					width: 45rpx;
					height: 45rpx;
					margin-left: -22.5rpx;
					background-color: #f9f9f9;
					border-radius: 50%;
					box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);

				}

				.order_footer_right_icon {
					width: 45rpx;
					height: 45rpx;
					margin-right: -22.5rpx;
					background-color: #f9f9f9;
					border-radius: 50%;
					box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);

				}
			}

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.order-info {
				.row {
					display: flex;
					justify-content: space-between;
					padding-top: 32upx;

					.t {
						font-weight: normal;
						font-size: 28rpx;
						color: #333333;
					}

					.info {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}


	}

	.pay-info-wrap {
		padding: 0;
		box-sizing: border-box;

		.info-wrap {
			padding: 64rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;

			.title {
				align-self: center;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.info-content {
			.pay-title {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-weight: bold;
				width: 100%;
				font-size: 48rpx;
				color: #333;
				margin-top: 48rpx;

				text {
					font-size: 60rpx;
					color: #333;
				}
			}

			.pay-password {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 64rpx;

				.list {
					width: 88rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #999;
					border-radius: 8rpx;

					text {
						font-size: 32rpx;
					}
				}

			}

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

				text {
					font-size: 28rpx;
					color: #ccc;
				}
			}
		}

	}

	.fixedview {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		// height: 80rpx;
		.flex-between {
			width: 100%;
			padding: 36rpx 54rpx 102rpx 54rpx;
			background: #FFFFFF;

			.fixedview_one {
				display: flex;
				align-items: flex-end;

				.fixedview_oneone {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.fixedview_onetow {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;

					text {
						font-size: 24rpx;
					}
				}
			}

			.flex-colum-end {
				.fixedview_tow {
					background: #E3AD7F;
					border-radius: 36rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					padding: 14rpx 44rpx;
				}

				.fixedview_tows {
					margin-top: 10rpx;
					background: #c3c3c3;
					border-radius: 36rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					padding: 14rpx 44rpx;
				}
			}

		}
	}
	
	.order-msg-list {
		margin-bottom: 30rpx;
	}
</style>