<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap mg-bot-26">
			<view class="light-black fs24 mg-bot-20">商品信息</view>
			<view class="u-f u-f-jcfs u-f-aic mg-bot-24">
			<!-- 	<image src="../.././static/demo/test.png" style="width: 128rpx;height: 128rpx;"
					:mode="'widthFix'" class="mg-right-10"></image> -->
				<view class="u-f u-f-fdc">
					<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
						<text class="light-gray fs24 mg-right-8">四只装</text>
						<text class="gray-down-arrow"></text>
					</view>
					<view class="u-f u-f-aic u-f-jcsb">
						<view class="u-f u-f-jcfs u-f-aic" style="margin-right: 96rpx;">
							<view class="mg-right-10">
								<text class="fs24 main-color">￥</text>
								<text class="fs32 main-color">4999</text>
							</view>
							<view class="fs24 light-gray delete-line">
								<text>￥</text>
								<text>4999</text>
							</view>
						</view>
						<view>
							<uni-number :min="1" :value="number"></uni-number>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<common-title :msg="'退款信息'"></common-title>
		
		<view class="white-bg-wrap mg-top-20">
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-gray">商品件数</text>
				<text class="light-black">1件</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-8">
				<text class="light-gray">退款金额</text>
				<text class="light-black">￥4999</text>
			</view>
			<view class="light-gray fs24 mg-bot-24" style="text-align: right;">最终退款金额以审核后为准</view>
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-50">
				<text class="light-gray">退款原因</text>
				<view class="u-f u-f-aic u-f-jcfe">
					<text class="light-gray mg-right-10">请选择</text>
					<image class="sg-gray-arrow" src="../.././static/common/sg_right_arrow.png"></image>
				</view>
			</view>
			<view class="mg-bot-18">
				<view class="mg-bot-20">问题描述</view>
				<textarea style="width: 100%;min-height: 230rpx;background-color: #F6F6F6;padding: 20rpx 24rpx;" auto-height placeholder-style="color:#999999;font-size: 24rpx;" placeholder="请描述申请退款的具体原因..."/>
			</view>
			<view class="u-f u-f-aic u-f-jcc upload-pic mg-bot-250">
				<view class="u-f u-f-aic u-f-jcc u-f-fdc">
					<text class="camera mg-bot-10"></text>
					<text class="fs24 light-gray">上传凭证</text>
				</view>
			</view>
			<view class="u-f u-f-aic u-f-jcc" @click="goToRefundPage">
				<view class="line-gradient-btn" style="width: 90%">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"
	import commonTitle from '../../components/common-title/common-title.vue'
	export default {
		components: {
			commonTitle,
			uniNumber
		},
		data() {
			return {
				number: 1
			}
		},
		methods: {
			goToRefundPage() {
				this.User.navigate(
					{ url: '/pages/refund/refund' }
				)
			}
		}
	}
</script>


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

<style>
	.upload-pic {
		width: 224rpx;
		height: 224rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
	}
	
	.sg-gray-arrow {
		width: 18rpx;
		height: 18rpx;
	}
	
	.camera {
		width: 66rpx;
		height: 66rpx;
		background: url(../.././static/common/camera.png) no-repeat center center;
		background-size: 100%;
	}
</style>
