<template>
	<view>
		<view class="middle" v-show="bodyShow">
		  <view class="main">
		    <!-- --------------------------------------复票----------------------------------------------- -->
		    <view v-if="orderList!=''" v-for="item of orderList" :key="item.id" class="product">
		      <view>
		        <text>
		          {{item.merchantName}}（{{item.productName}}）
		        </text>
		
		        <text>
		          <text style="font-size:24rpx;">¥</text>{{item.unitPrice}}
		          <text>x</text>
		          {{item.orderNum}}
		          <text style="margin-top:10rpx;font-size:22rpx;display:block;color:#f45803;" v-if="item.depositReceived">押金：{{item.depositReceived}}</text>
		        </text>
		      </view>
		      <view class="coupon" v-if="item.pdDiscountMoney">
		        <text>
		          券
		        </text>
		        <text>
		          <text style="font-size:24rpx;">-¥</text>{{item.pdDiscountMoney}}
		        </text>
		      </view>
		    </view>
		    <!-- --------------------------------------单票----------------------------------------------- -->
		    <view v-if="orderList==''" class="product">
		      <view>
		        <text>
		          {{merchantName}}（{{productName}}）
		        </text>
		
		        <text style="text-align: right;">
		          <small style="font-size:24rpx;">¥</small>{{unitPrice}}
		          <text>x</text>
		          {{orderNum}}
		          <text style="margin-top:10rpx;font-size:22rpx;display:block;color:#f45803;" v-if="depositReceived">押金：{{depositReceived}}</text>
		
		        </text>
		      </view>
		      <view class="coupon" v-if="pdDiscountMoney">
		        <text>
		          券
		        </text>
		        <text>
		          <text style="font-size:24rpx;">-¥</text>{{pdDiscountMoney}}
		        </text>
		      </view>
		    </view>
		    <view class="mainP3">
		      <text>
		        实际支付
		      </text>
		
		      <text>
		        <!--<i>
						¥{{totalMoney}}
					</i>-->
		
		        <text>
		          <text style="font-size:28rpx;">¥</text>{{pdOrderMoney}}
		        </text>
		      </text>
		    </view>
		    <view class="mainview">
				<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" />
		      <view>
		        微信支付
		      </view>
			  <image src="@/static/img/orderPayment/input.png" style="width:32rpx;height: 32rpx;" />
		    </view>
		  </view>
		</view>
		
		<view class="bottom" v-show="bodyShow">
		  <view class="bottomFirst">
		    <text>
		      实付款
		    </text>
		
		    <text>
		      <text>¥</text>{{pdOrderMoney}}
		    </text>
		  </view>
		
		  <view class="bottomLast">
		    <text href="tel:400-072-0368">
		      <!-- <img src="@/assets/img/combination/kefu11.png" style="width: 0.31rpx;" /> -->
		    </text>
		    <text @click="goPay()" :style="{background:background}">去支付</text>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantName: "", //商户名称
				productName: "", //产品名称
				orderList: "", //订单列表
				unitPrice: "", //单价
				depositReceived: 0, //押金
				pdDiscountMoney: "", //优惠价格
				orderNum: "", //数量
				pdOrderMoney: "", //实际总价
				totalMoney: "", //原价总价
				errorMessage: "", //错误信息
				bodyShow: false, //控制初始化数据成功显示
				timeStamp:"",//支付参数
				nonceStr:"",
				package:"",
				signType:"",
				paySign:"",
				background:"",//去支付的背景颜色
				orderId:"",//订单Id
			}
		},
		onLoad(option){
			  this.orderId=option.orderId
			  let data = {
				orderId:this.orderId, //订单Id
				userId:uni.getStorageSync("openid"), //用户Id
				payType:42, //支付类型
			  }
			  this.$request("orderc/order/findOrderInfo", data).then((res) => {
				if (res.code == "00") {
					this.bodyShow = true
					//支付参数开始
					this.timeStamp=res.data.timestamp
					this.nonceStr=res.data.noncestr
					this.package=res.data.package
					this.signType=res.data.signType
					this.paySign=res.data.sign
					//支付参数结束
					this.pdOrderMoney = res.data.pdOrderMoney
					if(this.pdOrderMoney==0&&res.data.subOrderType == -1){//0元购直接跳电子门票页面
					  uni.navigateTo({
					      url:"../my/order/electronicTicket/electronicTicket?orderId="+this.orderId
					  })
					}
					this.errorMessage = res.data.errorMessage
					this.totalMoney = res.data.totalMoney
					this.orderList = res.data.orderList
					if (typeof(this.orderList) == "undefined") { //单票
					  this.orderList = ""
					  this.merchantName = res.data.merchantName
					  this.productName = res.data.productName
					  this.unitPrice = res.data.unitPrice
					  this.orderNum = res.data.orderNum
					  this.depositReceived = res.data.depositReceived
					  this.pdDiscountMoney = res.data.pdDiscountMoney
					}
					
				}else{
					uni.showToast({
						title:res.message,
						icon:"none"
					})
				}
			})
			
		},
		methods:{
			goPay(){//-------------------------------------------------------去支付
				let _this=this
				if (this.errorMessage) {
					uni.showToast({
						title:this.errorMessage,
						icon:"none"
					})
				    return
				}
				this.background="#E6E6E6"
				setTimeout(() => {
					this.background="f9690e"
				}, 1000)
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp:this.timeStamp,
				    nonceStr:this.nonceStr,
				    package:this.package,
				    signType:this.signType,
				    paySign:this.paySign,
				    success: function (res) {
				        uni.navigateTo({
				            url:"../my/order/electronicTicket/electronicTicket?orderId="+_this.orderId
				        })
				    },
				    fail: function (err) {
				        uni.showToast({
							title:err.errMsg,
							icon:"none"
						})
				    }
				})
			}
		}
	}
</script>

<style>
    .bigBox{height: 100%;background: #fafafc;}
	.middle{padding: 30rpx 24rpx 0 24rpx;}
	.main{padding: 10rpx 24rpx 20rpx 24rpx;background: #FFFFFF;border-radius: 20rpx;box-shadow: 0 0 15rpx #e6e6e8;}
	.product{border-bottom: 1px solid #e5e5e5;padding: 25rpx 0;}
	.product view{color: #000000;padding-left:10rpx;display: flex;align-items: center;box-sizing: border-box;}
	.product view text:first-child{flex: 1;}
	.product view text:nth-child(2){color:#666666;font-size:28rpx;text-align: right;}
	.product view.coupon{color: #F9690E;margin-top:10rpx;}
	.product view.coupon text{font-size:30rpx;}
	.mainP3{height:120rpx;color: #000000;border-bottom: 1px solid #e5e5e5;padding:25rpx 0 25rpx 10rpx;display: flex;align-items: center;box-sizing: border-box;justify-content: space-between;}
	.mainP3 text:nth-child(2){font-size: 24rpx;color: #666666;}
	.mainP3 text:nth-child(2) text:nth-child(1){font-size:36rpx;color:#F9690E;margin-left: 20rpx;font-weight: bold;}
	.mainview{margin-top:50rpx;display: flex;align-items: center;}
	.mainview>image:first-child{margin:0 20rpx 0 10rpx;}
	.mainview>view{flex: 1;}
	.bottom{position: fixed;bottom: 0;height: 100rpx;background: #FFFFFF;border-top:1px solid #e5e5e5;width: 100%;display: flex;align-items: center;}
	.bottomFirst{border-right: 1px solid #cccccc;padding-left:40rpx;width: 40%;box-sizing: border-box;}
	.bottomFirst text:nth-child(2){font-size:40rpx;color: #f9690e;margin-left:10rpx;font-weight: bold;}
	.bottomFirst text:nth-child(2) text{font-size:28rpx;}
	.bottomLast{padding-left:20rpx;display: flex;width: 60%;padding-right:20rpx;box-sizing: border-box;align-items: center;}
	.bottomLast text:first-child{display: block;text-align: center;width:60rpx;}
	.bottomLast text:first-child text{margin-top:10rpx;display: inline-block;font-size:24rpx;color: #666666;}
	.bottomLast text:nth-child(2){flex: 1;height:70rpx;display: inline-block;text-align: center;line-height:70rpx;background: #f9690e;color: #FFFFFF;margin-left:30rpx;border-radius: 20rpx;font-size:32rpx;}
</style>
