<template>
	<view>
		<view class="card_box">
			<view class="card_head_box">
				<view class="card_head_item" v-for="(item,index) in 8" :key="index"></view>
			</view>

			<!-- 先付款 -->
			<view class="tabBox" v-if="listinfo.status == 'unpaid'">
				<view class="tab">
					<view v-for="(item,index) in tebtypeList" :key="index"
						:class="is_type==index?'tab_item'+(is_type+1)+' tab_item  active ':'tab_item'"
						@click="tabClick(item,index)">
						<view></view>
						<image class="icon" :src="is_type==index?item.url_active:item.url" mode="aspectFill" />
						<text class="title" :class="{active:is_type==index}">{{item.title}}</text>
					</view>
				</view>
				<view class="table" v-if=" is_type == 0 ">
					<view class="table_left">
						<image class="icon"
							src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png"
							mode="aspectFill" />
						<text class="title">桌台</text>
					</view>
					<view class="value" v-if="listinfo.tableName"> {{ listinfo.tableName || '' }} </view>
				</view>
				<!-- 	<view class="pack" v-else>
					<view class="top">
						<text class="title">{{ shopInfo.shopName }}</text>
						<text class="address">{{ shopInfo.address }}</text>
					</view>
					<view class="list">
						<view class="item">
							<view class="lable">取餐时间</view>
							<view class="text">立即取餐</view>
						</view>
						<view class="item">
							<view class="lable">预留电话</view>
							<view class="getPhone text"><u-input class="inputVal" v-model="order.phone"
									input-align="right" placeholder="请输入预留电话以便联系您"></u-input><text
									class="getBtn">获取手机号</text></view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="card">
				<!-- 订单头部 -->
				<view class="card_item" v-for="(value, key) in listinfo.detailMap" :key="key">
					<view class="head">
						<view class="head_left">
							<text class="placeNum">第{{key}}次下单</text>
							<!-- <text class="placeTime">{{item.placeTime}}</text> -->
						</view>
					</view>
					<!-- 订单详情 -->
					<view class="shop-info">
						<view class="item" v-for="item in value" :key="item.id">
							<view class="cover">
								<up-image width="76" height="76" radius="16" :src="item.productImg"
									v-if="item.productId!=-999"></up-image>
								<up-image width="76" height="76" radius="16"
									:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
									mode="heightFix" v-else></up-image>
							</view>
							<view class="info">
								<text class="productName">{{item.productName}}</text>
								<text class="productSkuName" v-if="item.productSkuName">{{item.productSkuName}}</text>
							</view>

							<view class="price">
								<view class="priceAmount">
									￥{{orderVIP.isVip ==1 && ordershopUserInfo.isMemberPrice==1?item.memberPrice:item.price}}
								</view>
								<view class="num">x{{item.num}}</view>
							</view>
						</view>
					</view>

					<!--<view class="status" v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'">未付款</view>
					 <view class="totalAmount">
						<view class="label">小计￥</view>
						<view class="price"> {{item.totalAmount}} </view>
					</view> -->

					<view class="semicircle_icon" v-if="index > 0">
						<view class="semicircle_left_icon"></view>
						<view class="semicircle_right_icon"></view>
					</view>
				</view>

				<view class="cell-item" v-if="is_type != 0">
					<view class="label">打包费</view>
					<view class="val">
						<view></view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{listinfo.packFee}}</view>
					</view>
				</view>


				<!-- isTableFee == 0是不免除 -->
				<view class="cell-item"
					v-if="ordershopUserInfo.isTableFee == 0 && is_type == 0 && listinfo.Seatcharge != 0">
					<view class="label">餐位费</view>
					<view class="val">
						<view>X{{listinfo.Seatcharge}}</view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{listinfo.Seatcharge}}</view>
					</view>
				</view>

				<!-- <view class="cell-item" v-else>
					<view class="label">免餐位费</view>
					<view class="val">
						<view></view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{listinfo.Seatcharge}}</view>
					</view>
				</view> -->

				<!-- 支付之前 -->
				<block v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'">
					<view v-for="(item,indexe) in favorablelist" :key="indexe">
						<view class="favorable" :class="{column:item.value.length>0&&item.type=='product'}"
							@click="goUrl(item)">
							<view class="favorable_left">
								<text class="name"> {{ item.name }} </text>
							</view>

							<!-- 商品卷 -->
							<view class="favorable_right" :class="{column:item.value}" v-if="item.type=='product'">
								<view :class="{column:item.value}">
									<view class="favorable_right_text" v-if="item.value.uniqueIds">
										<text>{{item.value.uniqueIds}}张</text>
										<text>￥-{{item.value.Productroll}}</text>
									</view>
								</view>
								<up-icon name="arrow-right" color="#575B66" size="16"
									style="margin-top: 5rpx;"></up-icon>
							</view>

							<!-- 优惠卷 -->
							<view class="favorable_right" v-if="item.type=='coupon'">
								<text class="favorable_right_text">{{item.value.name}}</text>
								<up-icon name="arrow-right" color="#575B66" size="16"
									v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'"></up-icon>
							</view>

							<!-- 积分 -->
							<view class="favorable_right" v-if="item.type=='points'"
								@click.stop="calcUsablePointsData.showModal = true">
								<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;"
									v-if="calcUsablePointsData.integral">
									使用 {{ calcUsablePointsData.integral}}
									积分抵扣￥{{props.listinfo.pointsDiscountAmount}}
								</text>
								<up-icon v-else name="arrow-right" color="#575B66" size="16"></up-icon>
							</view>

						</view>
					</view>
				</block>
				<block v-else>
					<block v-for="(item,index) in listinfo.couponInfoList" :key="index">
						<view class="cell-item" v-if="item.type == 1">
							<view class="label">优惠券</view>
							<view class="val">
								<view></view>
								<view style="font-size: 28rpx;">-￥</view>
								<view>{{item.discountAmount}}</view>
							</view>
						</view>
					</block>
					<view class="cell-item column" v-if="listinfo.couponInfoList.length > 0">
						<view class="label">商品券</view>
						<view class="val column">
							<view class="productCoupon" v-for="(item,index) in listinfo.couponInfoList" :key="index">
								<view class="name">{{item.name}}</view>
								<view class="num">X{{item.finalUseNum}}</view>
								<view class="amount">-￥{{item.finalDiscountAmount}}</view>
							</view>
						</view>
					</view>
					<view class="cell-item"
						v-if="listinfo && listinfo.pointsDiscountAmount && listinfo.pointsDiscountAmount > 0">
						<view class="label">积分抵扣</view>
						<view class="val">
							<view></view>
							<view style="font-size: 28rpx;">￥</view>
							<view>{{listinfo.pointsDiscountAmount.toFixed(2)}}</view>
						</view>
					</view>
				</block>

				<view class="total-wrap">
					<view>总计￥</view>
					<view class="price"> {{listinfo.totalCost}} </view>
				</view>

			</view>
		</view>
		<view class="orderInfo">
			<view class="row" @click="copyHandle(listinfo.orderNo)">
				<text class="t">订单编号：</text>
				<text class="info"
					style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{listinfo.orderNo}}（点击复制）</text>
			</view>
			<view class="row">
				<text class="t">下单时间：</text>
				<text class="info">{{$u.timeFormat(listinfo.updateTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>
			<!-- <view class="row">
				<text class="t">下单门店：</text>
				<text class="info">{{listinfo.name}}</text>
			</view> -->
			<view class="row" v-if="listinfo.dineMod">
				<text class="t">用餐模式：</text>
				<text class="info" v-if="listinfo.dineMod == 'dine-in'">堂食</text>
				<text class="info" v-if="listinfo.dineMod == 'take-out'">外带</text>
				<text class="info" v-if="listinfo.dineMod == 'take-away'">外卖</text>
			</view>
			<view class="row" v-if="listinfo.remark">
				<text class="t">备注：</text>
				<text class="info">{{ listinfo.remark || ""}}</text>
			</view>
			<view class="row" v-if="listinfo.seatNum">
				<text class="t">就餐人数：</text>
				<text class="info">{{ listinfo.seatNum || ""}}</text>
			</view>
		</view>
		<IntegralInput :visible="calcUsablePointsData.showModal" :minValue="calcUsablePointsData.minIntegral"
			:maxValue="calcUsablePointsData.maxIntegral" :instructions="calcUsablePointsData.instructionText"
			@confirm="handleConfirm" @close="calcUsablePointsData.showModal = false"
			@IntegralInputclose="IntegralInputclose" />
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		computed,
		defineEmits,
		watch,
		watchEffect,
		defineExpose
	} from 'vue'

	import IntegralInput from './IntegralInput.vue';

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

	// 定义自定义事件
	const emits = defineEmits(['customevent', 'istype']);

	// teb  切换送餐和打包
	const tebtypeList = reactive([{
			title: "送餐到桌",
			show: false,
			type: "table",
			val: "dine-in",
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png",
			url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"
		},
		{
			title: "打包外带",
			show: false,
			type: "takeself",
			val: "take-out",
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png",
			url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"
		},
	])

	const favorablelist = reactive([{
			name: "商品券",
			type: "product",
			value: [],
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"
		}, {
			name: "优惠券",
			type: "coupon",
			value: "",
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"
		},
		// { name: "团购优惠", type: "group",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
		{
			name: "积分抵扣",
			type: "points",
			value: "",
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/points.png"
		}
	])


	const props = defineProps({
		freeCheck: {
			type: Boolean
		},

		listinfo: {
			type: Object

		},
		orderVIP: {
			type: Object
		},
		ordershopUserInfo: {
			type: Object,
			default: {
				isTableFee: 0
			}
		}
	})

	const is_type = ref(0)
	// 监听送餐/打包切换
	const tabClick = (item, index) => {
		is_type.value = index
		emits("istype", is_type.value)
		// this.getchoseEatModel('tabClick', index, item);
	}

	// 操作优惠卷
	const dataprocessing = (data) => {
		if (data.typeOrder == 1) {
			favorablelist[1].value = data.item
		} else {
			favorablelist[0].value = data
		}

	}

	// 跳转
	const goUrl = (item) => {
		switch (item.type) {
			case 'coupon':
				// 清空积分
				IntegralInputclose()
				uni.pro.navigateTo('/pages/order/coupon', {
					type: "confirm_order_coupon",
					shopId: uni.cache.get('orderVIP').shopId,
					shopUserId: props.orderVIP.id,
					payAmount: props.listinfo.totalCost,
					shoppingCart: JSON.stringify(props.listinfo.combinedArray)
				})
				break;
			case 'product':
				// 清空积分
				IntegralInputclose()
				// 清空优惠卷
				props.listinfo.coupondiscountAmount = 0
				favorablelist[1].value = ''
				uni.pro.navigateTo('/pages/order/coupon', {
					type: "confirm_order_product",
					shopId: uni.cache.get('orderVIP').shopId,
					shopUserId: props.orderVIP.id,
					payAmount: props.listinfo.totalCost,
					shoppingCart: JSON.stringify(props.listinfo.combinedArray)
				})
				break;
			case 'points':
				if (calcUsablePointsData.usable == 0) {
					uni.showToast({
						title: '此次订单不可用积分!'
					})
					return false;
				}
				calcUsablePointsData.showModal = true
				break;
		}
	}

	// 积分
	const calcUsablePointsData = reactive({
		minIntegral: 1, //最小
		maxIntegral: '', //最多积分
		instructionText: '',
		unusableReason: '',
		showModal: false,
		integral: ''
	})
	const handleConfirm = async (integral) => {
		calcUsablePointsData.integral = integral
		props.listinfo.pointsDiscountAmount = await APImemberPointscalcDeductionAmount({
			points: integral,
			userId: props.orderVIP.id,
			orderAmount: props.listinfo.totalCost
		})
		emits('clickPointsamount', props.listinfo.pointsDiscountAmount);
	};

	// * 获取积分相关信息
	const getCalcUsablePoints = async (data) => {
		Object.assign(calcUsablePointsData, data);
		calcUsablePointsData.minIntegral = data.minDeductionPoints
		calcUsablePointsData.maxIntegral = data.maxUsablePoints
		calcUsablePointsData.instructionText = `请输入 ${ data.minDeductionPoints} - ${data.maxUsablePoints} 之间的积分`

	}

	// 积分取消清空
	const IntegralInputclose = async () => {
		calcUsablePointsData.integral = null
		props.listinfo.pointsDiscountAmount = 0
		calcUsablePointsData.showModal = false
	}

	// * 复制订单号
	const copyHandle = (e) => {
		uni.setClipboardData({
			data: e,
			success() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});
	}

	// 将方法暴露给父组件
	defineExpose({
		dataprocessing,
		getCalcUsablePoints
	});
</script>

<style lang="scss" scoped>
	.card_box {
		background-color: #fff;
		// box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(87,86,86,0.35);
		position: relative;
		width: 100%;
		height: 100%;
		// box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87,86,86,0.35);
		border-radius: 18rpx;
		padding-bottom: 32rpx;

		.tabBox {
			width: 100%;
			margin-top: 52rpx;
			position: relative;
			z-index: 1;

			.tab {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 22rpx 22rpx 0 0;
				// background-color: $uni-bg-color;

				.tab_item {
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					background-color: #FEFBF8;
					border-radius: 22rpx 22rpx 0 0;
					position: relative;

					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						position: relative;
						z-index: 1;
					}

					.title.active {
						color: #E8AD7B;
					}

					.icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
						position: relative;
						z-index: 1;
					}
				}

				.tab_item.active {
					background-color: #fff;
				}

				// .tab_item.active:after {
				//  content: "";
				//          position: absolute;
				//          top: 0;
				//          left: -4px;
				//          width: 40px;
				//          height: 26px;
				//          background: orange;
				// }
				.tab_item.active:before {
					content: "";
					position: absolute;
					top: -20rpx;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 2px;
					background: #fff;
					transform: skewX(0deg);
				}

				.tab_item1.active:before {
					border-radius: 22rpx 40rpx 0 0;
				}

				.tab_item2.active:before {
					border-radius: 40rpx 22rpx 0 0;
				}
			}

			.table {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 90rpx;
				background-color: $uni-bg-color;
				border-radius: 0 0 22rpx 22rpx;

				.table_left {
					display: flex;
					align-items: center;

					.icon {
						width: 32.86rpx;
						height: 39.07rpx;
						margin-right: 24rpx;
					}

					.title {
						display: flex;
						align-items: center;
						color: #E8AD7B;
					}
				}

				.value {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.pack {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: $uni-bg-color;
				border-radius: 0 0 22rpx 22rpx;

				.top {
					display: flex;
					flex-direction: column;
					margin-top: 8rpx;

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

					.address {
						font-size: 24rpx;
						font-weight: 400;
						color: #999;
					}
				}

				.list {
					display: flex;
					flex-direction: column;

					.item {
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.lable {
							color: #666;
							font-weight: 500;
						}

						.getPhone {
							display: flex;
							align-items: center;

							.u-input {
								width: 340rpx;
								border: none;

								input {
									font-size: 24rpx;
									color: #333;

								}

								.input-placeholder {
									font-size: 24rpx;
								}
							}
						}

						.text,
						.getBtn {
							color: #E8AD7B;
						}

						.getBtn {
							border-radius: 12rpx;
							border: 2rpx solid #E8AD7B;
							padding: 8rpx 20rpx;
							box-sizing: border-box;
						}
					}
				}

			}
		}


		.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;

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

				.head {
					display: flex;
					justify-content: space-between;
					padding: 32rpx 0;

					.head_left {
						display: flex;
						align-items: center;

						.placeNum {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							margin-right: 32rpx;
							flex-shrink: 0;
						}

						.placeTime {
							font-weight: 400;
							font-size: 32rpx;
							color: #666666;
							flex-shrink: 0;
						}
					}

				}

				.shop-info {
					border-bottom: 2rpx dashed #e5e5e5;

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

					.item {
						margin-bottom: 32rpx;
						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;
							}
						}
					}
				}

				.status {
					align-self: flex-end;
					width: 92rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #999999;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					margin-top: 32rpx;
				}

				.totalAmount {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					padding: 32rpx 0;
					border-bottom: 2rpx dashed #e5e5e5;

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

					.price {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}
				}

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

					.semicircle_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);

					}

					.semicircle_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);

					}
				}
			}

			.cell-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 34rpx 0 34rpx;

				.label {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					padding-bottom: 32rpx;
				}

				.val {
					display: flex;
					align-items: flex-end;
					padding-bottom: 32rpx;
					border-bottom: 2rpx dashed #e5e5e5;

					view:nth-child(1) {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-right: 42rpx;
					}

					view:nth-child(2) {
						display: flex;
						align-items: flex-end;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}
				}

				.val.column {
					display: flex;
					flex-direction: column;

					.productCoupon {
						display: flex;
						align-items: flex-end;
						margin: 0 0 10rpx 0;

						.name {
							font-weight: 400;
							font-size: 26rpx;
							color: #999;
							margin: 0;
						}

						.num {
							font-weight: 400;
							font-size: 26rpx;
							color: #999;
							margin: 0 30rpx;
							line-height: 20rpx;
						}

						.amount {
							font-weight: bold;
							font-size: 26rpx;
							color: #333;
						}
					}
				}
			}

			.favorable {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				padding-bottom: 26rpx;
				padding-top: 26rpx;
				border-bottom: 2rpx solid #E5E5E5;

				.favorable_left {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					.name {
						font-size: 28rpx;
						font-weight: 400rpx;
						color: #333;
					}
				}

				.favorable_right {
					display: flex;
					align-items: center;

					.favorable_right_text {
						font-size: 24rpx;
						color: #999;
						font-weight: 400rpx;
					}

				}

				.favorable_right {
					.column {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.favorable_right_text {
							margin-bottom: 10rpx;

							text:nth-child(1) {
								font-size: 26rpx;
								color: #999;
							}

							text:nth-child(2) {
								font-size: 26rpx;
								color: #999;
								margin: 0 30rpx;
							}

							text:nth-child(3) {
								font-size: 26rpx;
								color: #333;

							}
						}
					}
				}

				.favorable_right.column {
					align-items: flex-start;
				}
			}

			.favorable.column {
				align-items: flex-start;
			}

			.cell-item.column {
				align-items: flex-start;
			}

			.total-wrap {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				padding: 0 34rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 64rpx;

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



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



			}


		}
	}

	.orderInfo {
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-top: 32rpx;
		padding: 32rpx 34rpx;

		// box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87,86,86,0.35);
		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.t {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				flex-shrink: 0;
			}

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

		.row:last-child {
			margin-bottom: none;
		}

	}


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

		.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;
					}
				}
			}

			.fixedview_tow {
				width: 140rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: #E3AD7F;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>