<template>
	<view v-show="bodyShow">
		<view class="middle">
			<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;">
							<text style="font-size:24rpx;">¥</text>{{ 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">
					<!-- #ifdef MP-WEIXIN -->
					<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<image src="@/static/img/orderPayment/alipayLogo.png" style="width:70rpx;height:62rpx;" /> <view> 支付宝支付 </view>
					<!-- #endif -->
					<image src="@/static/img/orderPayment/input.png" style="width:32rpx;height: 32rpx;" />
				</view>
			</view>
		</view>

		<view class="bottom">
			<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 {
      enterUrl: '', //进入页面路由
      merchantName: '', //商户名称
      productName: '', //产品名称
      orderList: '', //订单列表
      unitPrice: '', //单价
      depositReceived: 0, //押金
      pdDiscountMoney: '', //优惠价格
      orderNum: '', //数量
      pdOrderMoney: '', //实际总价
      totalMoney: '', //原价总价
      errorMessage: '', //错误信息
      bodyShow: false, //控制初始化数据成功显示
      payType: '', //支付类型
      timeStamp: '', //支付参数
      nonceStr: '',
      package: '',
      signType: '',
      paySign: '',
      orderInfo: '', //支付宝订单号
      background: '', //去支付的背景颜色
      orderId: '', //订单Id
      openid: '', //用户Id
      afterBuyUrl: '', //支付成功后地址跳转
      ifyukuaiCode: '' //是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.enterUrl = option.q
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    this.enterUrl = uni.getStorageSync('alipayQrCode')
    this.payType = 33
    //#endif
    if (this.enterUrl) {
      this.orderId = this.getUrlKey('orderId')
    } else {
      this.orderId = option.orderId
    }
    this.ifyukuaiCode = option.ifyukuaiCode||''
    this.afterBuyUrl = option.afterBuyUrl || '/pages/my/order/orderList/orderList'
    this.openid = uni.getStorageSync('openid') || ''
    if (this.openid) {
      this.initDetail()
    } else {
      this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
    }
  },
  methods: {
    login() {
      //---登录
      let _this = this
      uni.getProvider({
        service: 'oauth',
        success(proRes) {
          uni.login({
            provider: proRes.provider[0],
            success: function(res) {
              if (res.code) {
                let source = ''
                if (proRes.provider[0] == 'weixin') {
                  source = 3
                } else if (proRes.provider[0] == 'alipay') {
                  source = 4
                }
                let data = {
                  code: res.code,
                  source //微信小程序3，支付宝小程序4
                }
                _this.$request('wechat/wx/getUserInfoByCode', data)
                  .then(res => {
                    if (res.code == '00') {
                      _this.openid = res.data.openid
                      uni.setStorageSync('openid', _this.openid)
                      _this.initDetail()
                    } else {
                      uni.showToast({
                        title: res.message,
                        icon: 'none'
                      })
                    }
                  })
                  .catch(err => {
                    uni.showToast({
                      title: '登录失败',
                      icon: 'none'
                    })
                  })
              }
            }
          })
        }
      })
    },
    initDetail() {
      //---初始化产品信息，以及获取支付需要的参数
      let data = {
        orderId: this.orderId, //订单Id
        userId: this.openid, //用户Id
        payType: this.payType //支付类型
      }
      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.orderInfo = res.data.payInfo || ''
          //支付参数结束
          this.pdOrderMoney = res.data.pdOrderMoney
          if (this.pdOrderMoney == 0 && res.data.subOrderType == -1) {
            //0元购直接跳电子门票页面
            uni.navigateTo({
              url: '/pages/my/order/electronicTicket/electronicTicket?orderId=' + this.orderId + '&ifyukuaiCode=' + this.ifyukuaiCode
            })
          }
          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'
          })
        }
      })
    },
    goPay() {
      //-------------------------------------------------------去支付
      let _this = this
      if (this.errorMessage) {
        uni.showToast({
          title: this.errorMessage,
          icon: 'none'
        })
        return
      }
      this.background = '#E6E6E6'
      setTimeout(() => {
        this.background = 'f9690e'
      }, 1000)

      // #ifdef MP-WEIXIN
      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: _this.afterBuyUrl + '?orderId=' + _this.orderId + '&ifyukuaiCode=' + _this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      //#endif

      // #ifdef MP-ALIPAY
      uni.requestPayment({
        provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
        orderInfo: this.orderInfo, // 支付宝订单号
        success: function(res) {
          uni.navigateTo({
            url: _this.afterBuyUrl + '?orderId=' + _this.orderId + '&ifyukuaiCode=' + _this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      // #endif
    },
    getUrlKey(name) {
      //---------------------------------------------------------------获取url
      return (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
    }
  }
}
</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>
