<template>
	<view class="pay-success mg-lr-24">
		<view class="pay-status u-f u-f-aic u-f-jcc mg-bot-26">
			<view class="u-f u-f-fdc u-f-jcc u-f-aic">
				<!-- <image style="height: 120rpx;width:120rpx;" src="../.././static/common/pay_success.png" class="mg-bot-26"></image> -->
				<text class="fs28 light-black fw400">你已兑换成功</text>
			</view>
		</view>
		
		<view class="white-bg-wrap">
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-gray">联系人</text>
				<text class="light-black">张某某</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-gray">手机号</text>
				<text class="light-black">177****9865</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28">
				<text class="light-gray">门店信息</text>
				<text class="light-black">宏达汽修（民族路店）</text>
			</view>
		</view>
		
		<view class="operte-btn u-f u-f-aic u-f-jcsa">
			<text class="default-line-btn">查看订单</text>
			<text class="main-linegrident-btn"  @click="backToIndex">返回首页</text>
		</view>
		
		<!-- 精品推荐开始 -->
		<view class="good-recomend">
			<view class="gr-title u-f u-f-aic u-f-jcc">
				<view class="left-line mg-right-16"></view>
				<view class="fw400 fs32 mg-right-16">商品推荐</view>
				<view class="right-line"></view>
			</view>
			<view class="product-list u-f u-f-fww">
				<view class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww">
					<view class="product-card u-f u-f-fdc">
						<view class="pc-image u-f u-f-jcc u-f-aic">
							<!-- <image  style="width: 100%;height: 100%" :mode="'aspectFit' "src="../.././static/demo/product_01.png"></image> -->
						</view>
						<view class="pc-desc fw400 fs28 ellipsis">汽车玻璃水四季通用冬季汽车玻璃水季</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28">97</text>
							<text class="fs24">.80</text>
						</view>
					</view>
				</view>
				<view class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww">
					<view class="product-card u-f u-f-fdc">
						<view class="pc-image u-f u-f-jcc u-f-aic">
							<!-- <image style="width: 100%;height: 100%" :mode="'aspectFit'" src="../.././static/demo/product_01.png"></image> -->
						</view>
						<view class="pc-desc fw400 fs28 ellipsis">先进全合成发动机油</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28">97</text>
							<text class="fs24">.80</text>
						</view>
					</view>
				</view>
				<view class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww">
					<view class="product-card u-f u-f-fdc">
						<view class="pc-image u-f u-f-jcc u-f-aic">
							<!-- <image style="width: 100%;height: 100%" :mode="'aspectFit'" src="../.././static/demo/product_01.png"></image> -->
						</view>
						<view class="pc-desc fw400 fs28 ellipsis">汽车玻璃水四季通用冬季</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28">97</text>
							<text class="fs24">.80</text>
						</view>
					</view>
				</view>
				<view class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww">
					<view class="product-card u-f u-f-fdc">
						<view class="pc-image u-f u-f-jcc u-f-aic">
							<!-- <image style="width: 100%;height: 100%" :mode="'aspectFit'" src="../.././static/demo/product_01.png"></image> -->
						</view>
						<view class="pc-desc fw400 fs28 ellipsis">先进全合成发动机油</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28">97</text>
							<text class="fs24">.80</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 精品推荐结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			backToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.pay-success {
		.pay-status {
			&>view {
				padding: 80rpx 0 20rpx 0;
			}
		}
	}

	.default-line-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		text-align: center;
		padding: 22rpx 0;
		background: #FFFFFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
	}
	
	.main-linegrident-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		padding: 22rpx 0;
		background: linear-gradient( 90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}
	
	.operte-btn {
		margin-top: 72rpx;
	}
	
	.good-recomend {
		margin-top: 70rpx;
		.gr-title {
			margin-bottom: 26rpx;
			.left-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/common/left-line.png) no-repeat center center;
			}
			.center-title {
				color: #FF4502;
				margin-right: 16rpx;
			}
			.right-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/common/right-line.png) no-repeat center center;
				margin-left: 16rpx;
			}
			
		}
		.product-list {
			margin: 0 24rpx;
			.product-wrap {
				width: calc(50% - 22rpx);
				margin-bottom: 20rpx;
				margin-right: 22rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.product-card {
					flex: 1;
					border-radius: 18rpx;
					background-color: #ffffff;
					.pc-image {
						width: 100%;
						height: 340rpx;
					}
					.pc-desc {
						color: #333333;
						height: 74rpx;
					}
					.pc-price {
						margin-top: 10rpx;
						color: #FF4502;
					}
				}
			}
		}
	}
</style>
