<template>
	<view class="pay-success mg-lr-24">
		<!-- 退款中 -->
		<view v-show="false">
			<view class="white-bg-wrap 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: 114rpx;width:114rpx;" src="../.././static/common/check_progress.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">正在退款中...</text>
					<view class="fs24 light-black fw400">我们会已最快的速度完成退款，请等待</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
				<!-- 	<image src="../.././static/demo/test.png" style="width: 128rpx;height: 128rpx;flex: 1"
						:mode="'widthFix'" class="mg-right-10"></image> -->
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
							<text class="light-gray fs24 mg-right-8">四只装</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
								<text class="fs32 main-color fw700">699</text>
							</view>
							<view class="fs24 light-gray">x1</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-aic u-f-jcsb border-bot" style="padding: 30rpx 6rpx;">
					<text class="light-black">微信支付</text>
					<text class="light-gray">￥4999</text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb" style="padding: 30rpx 6rpx">
					<text class="light-black">退款总额</text>
					<view class="main-color">
						<text class="fs24">￥</text>
						<text class="fs32">￥4999</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售后服务单申请成功 -->
		<view v-show="false">
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 228rpx;width:205rpx;" src="../.././static/common/check_success.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">售后服务单申请成功！</text>
					<view class="fs24 fw400 one-line-ellipsis mg-bot-46">
						<text class="light-black">预计</text>预计
						<text class="mian-color">48小时59分钟</text>
						<text class="light-black">内为您审核，请保持手机畅通，耐心等待</text>
					</view>
					<view class="line-btn">取消申请</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="fs24 light-black mg-bot-20">订单号：123456789</view>
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<!-- <image src="../.././static/demo/test.png" style="width: 128rpx;height: 128rpx;flex: 1"
						:mode="'widthFix'" class="mg-right-10"></image> -->
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
							<text class="light-gray fs24 mg-right-8">四只装</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
								<text class="fs32 main-color fw700">699</text>
							</view>
							<view class="fs24 light-gray">x1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 申请拒绝 -->
		<view v-show="false">
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 114rpx;width:114rpx;" src="../.././static/common/check_refuse.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">商家已拒绝！</text>
					<view class="fs24 fw400 one-line-ellipsis mg-bot-46">
						您提交的审核材料不足，无法通过！
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap mg-bot-26">
				<view class="fs24 light-black mg-bot-20">订单号：123456789</view>
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
				<!-- 	<image src="../.././static/demo/test.png" style="width: 128rpx;height: 128rpx;flex: 1"
						:mode="'widthFix'" class="mg-right-10"></image> -->
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
							<text class="light-gray fs24 mg-right-8">四只装</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
								<text class="fs32 main-color fw700">699</text>
							</view>
							<view class="fs24 light-gray">x1</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-f u-f-jcc">
				<view class="line-btn">联系客服</view>
			</view>
		</view>
		
		<!-- 退款已完成 -->
		<view>
			<view class="u-f-aic u-f-jcc mg-bot-26" style="padding: 60rpx;">
				<view class="u-f u-f-fdc u-f-jcc u-f-aic">
					<!-- <image style="height: 114rpx;width:114rpx;" src="../.././static/common/check_comppeted.png" class="mg-bot-38"></image> -->
					<text class="fs28 light-black fw400 mg-bot-26">退款已完成</text>
				</view>
			</view>
			
			<view class="white-bg-wrap mg-bot-26">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
			<!-- 		<image src="../.././static/demo/test.png" style="width: 128rpx;height: 128rpx;flex: 1"
						:mode="'widthFix'" class="mg-right-10"></image> -->
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
							<text class="light-gray fs24 mg-right-8">四只装</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
								<text class="fs32 main-color fw700">699</text>
							</view>
							<view class="fs24 light-gray">x1</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap">
				<view class="u-f u-f-aic u-f-jcsb border-bot" style="padding: 30rpx 6rpx;">
					<text class="light-black">微信支付</text>
					<text class="light-gray">￥4999</text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb" style="padding: 30rpx 6rpx">
					<text class="light-black">退款总额</text>
					<view class="main-color">
						<text class="fs24">￥</text>
						<text class="fs32">￥4999</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			backToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goToOrderCenter() {
				console.log("goToOrderCenter")
				uni.navigateTo({
					url: '/pages/order-center/order-center'
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.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/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;
					}
				}
			}
		}
	}
	
	.line-btn {
		padding: 18rpx 84rpx;
		background: #FFFFFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
	}
</style>
