<template>
	<view class="content">
		<view class="paymentTop">
			<view class="paymentTop-name">
				需支付金额（元）
			</view>
			<view class="paymentTop-price">
				<text>￥</text>{{total}}
			</view>
		</view>
		<view class="paymentList">
			<view class="paymentList-label">
				<view class="paymentList-left">
					<image class="paymentList-icon" src="@/static/imgs/payWechat.png" mode="widthFix"></image>微信支付
				</view>
				<view class="paymentList-right">
					<image class="paymentList-img" src="@/static/imgs/payCheck.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="paymentBtn">
			<view class="paymentBtn-go" @click="$Router.replace({name: 'sortPoint'})">
				去支付  ￥{{total}}
			</view>
		</view>
	</view>
</template>

<script>
	import { lawyerOrder, businessOrder } from '@/apis/interfaces/index'
	export default {
		data() {
			return {
				total: '', //支付金额
			}
		},
		onLoad() {
		},
		
		onShow() {
			// 获取订单
			this.payInfo()
		},
		methods: {
			payInfo () {
				// 律师订单
				if(this.$Route.query.type == 'lawyer') {
					lawyerOrder(this.$Route.query.id).then(res => {
						this.total = res.total
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: "none"
						})
					})
					return
				}
				
				//律师业务订单
				businessOrder(this.$Route.query.id).then(res => {
					this.total = res.total
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	    background: #f4f4f4;
		height: 100vh;
		overflow-y: scroll;
	}
	
	.paymentTop {
		padding: $padding * 4 $padding $padding * 3;
		box-sizing: border-box;
		text-align: center;
		color: #666666;
		.paymentTop-name {
			padding-left: $padding;
			box-sizing: border-box;
		}
		.paymentTop-price {
			color: $mian-color;
			font-size: $title-size + 40;
			font-weight: 600;
			margin: $margin - 10 0;
			text {
				font-size: $title-size + 10;
			}
		}
	}
	
	.paymentList {
		padding: 0 $padding;
		box-sizing: border-box;
		.paymentList-label {
			background-color: #ffffff;
			border-radius: $radius;
			padding: $padding + 10 $padding;
			box-sizing: border-box;
			margin-bottom: $margin + 10;
			display: flex;
			.paymentList-left {
				flex: 1;
				display: flex;
				line-height: 40rpx;
				.paymentList-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: $margin - 10;
				}
			}
			.paymentList-right {
				display: flex;
				.paymentList-tips {
					background-image: linear-gradient(to left, #FF4646, #FF7676);
					height: 44rpx;
					line-height: 44rpx;
					font-size: $title-size-sm;
					color: #ffffff;
					opacity: .9;
					border-radius: $radius * 2;
					padding: 0 10rpx;
				}
				.paymentList-arrow {
					width: 14rpx;
					margin: 10rpx 0 0 20rpx;
				}
				.paymentList-img {
					width: 32rpx;
					height: 32rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
	
	.paymentBtn {
		position: fixed;
		bottom: $margin * 2;
		left: 0;
		text-align: center;
		padding: 0 $padding;
		box-sizing: border-box;
		width: 100%;
		.paymentBtn-go {
			background-color: $mian-color;
			color: #ffffff;
			border-radius: $radius-m;
			line-height: 100rpx;
			font-size: $title-size + 2;
		}
	}
	
</style>