<template>
	<view>
		<view class="u-p-40" style="background-color: #ffffff;">
			<view class="header u-border-bottom"
				style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
				<view>
					<u-image width="100rpx" height="100rpx" src="./imgs/shihua.jpg"
						shape="circle"></u-image>
				</view>
				<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
				<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
			</view>
			<view class="center u-p-t-20">
				<view>
					<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
				</view>
				<view>
					<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
				</view>
				<view class="u-p-r-18">
					<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
						:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
						placeholder=" "></u-field>
				</view>
				<view>
					<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
				</view>
				<view>
					<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
					<view style="padding-left: 165rpx;color: #909399;">
						<text>由中国银联股份有限公司提供收款清算服务</text>
					</view>	
				</view>
				
				<view>
					<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
				</view>
				<view>
					<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
						:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
				</view>
				<view class="u-p-r-30">
					<u-field class="field-class" v-model="shanghuCode" label="商户单号" :label-width="160"
						:field-style="fieldStyle"   :border-bottom="false" :clearable="false"
						placeholder=" "></u-field>
				</view>
			</view>
		</view>
		<view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
			style="background-color: #ffffff;font-size: 30rpx;">
			<view class="u-flex u-row-left u-col-center">
				<view>商家订单中心</view>
				<view style="margin-left: 30rpx;background-color: #f04131;color: #ffffff;border-radius: 30rpx;padding: 5rpx 18rpx;">
					<text>NEW</text>
				</view>
			</view>
			<view>
				<view class="u-m-l-30">
					<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
				</view>
			</view>
		</view>

		<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
			<view style="padding-bottom: 30rpx;">
				<text>账单服务</text>
			</view>
			<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
				<view>
					<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
						margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
				</view>
				<view class="">
					<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
						margin-left="12" label-size="30" label-pos="right"></u-icon>
				</view>
				<view style="width: 30rpx;"> </view>
			</view>
		</view>
		
		<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
			<text>本服务由财付通提供</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fieldStyle: {
					//width:'460rpx',
					color: '#000000',
					padding: '0rpx',
					margin: '0rpx',
					height: '70rpx',
				},
				tradeStatus: '支付成功',
				goodName: '智慧U站215元',
				company: '鞍山市中金石油经销有限公司',
				settleCompany: '汇元银通(北京)在线支付技术有限公司',
				paytime: '2022年9月30日18:36:09',
				payway: '交通银行储蓄卡(7961)',
				tradeCode: '4200001559202209307401263465',
				shanghuCode: '40822093001788196557',
				tradeValue: '-215.00',
				target: '亚孚石化中金站'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.field-class {
		color: #909399 !important;
		font-size: 28rpx !important;
		margin: 0rpx !important;
		padding: 0rpx !important;
	}
</style>