<template>
    <view>
        <view class="cashierTips">
            <image src="/static/img/cashierTips_icon.png" mode="aspectFill"></image>注：推荐使用沃支付，可在享优惠！
        </view>
        <view class="cashierCont">
            <view class="cashierCont-title">
                <text>支付类型</text>线上支付
            </view>
            <view class="cashierCont-price">
                <block v-if="this.defaultType == 'unicom'">
                    <view class="cashierCont-price-title">
                        中奖用户0元支付
                    </view>
                    <view class="cashierCont-price-title">
                        具体支付金额以页面显示为准
                    </view>
                </block>
                <block v-else>
                    <view class="cashierCont-price-title">
                        付款金额
                    </view>
                    <view class="cashierCont-price-number">
                        ￥{{ defaultPrice }}
                    </view>
                </block>
            </view>
            
            <view class="cashierCont-pay">
                <view class="cashierCont-pay-title">
                    付款方式<text>*</text>
                </view>
                <view class="cashierCont-pay-way">
                    <radio-group @change="radioChange" v-if="this.defaultType == 'unicom'">
                        <view class="cashierCont-way-label cashierCont-way-unicom" :class="{active : current == 1}">
                            <view class="payContList-label-name">
                                <image class="payContList-label-img" src="/static/img/wqb.jpg"></image>
                                <text>沃支付支付</text>
                            </view>
                            <radio class="radio" value="1" checked></radio>
                        </view>
                    </radio-group>
                    <radio-group @change="radioChange" v-else>
                        <view class="cashierCont-way-label" :class="{active : current == 1}">
                            <view class="payContList-label-name">
                                <image class="payContList-label-img" src="/static/img/wqb.jpg"></image>
                                <text>沃支付支付</text>
                            </view>
                            <radio class="radio" value="1" checked></radio>
                        </view>
                        <view class="cashierCont-way-label" :class="{active : current == 2}" v-if="this.defaultType != 'unicom'">
                            <view class="payContList-label-name">
                                <image class="payContList-label-img" src="/static/img/wx.jpg"></image>
                                <text>微信支付</text>
                            </view>
                            <radio class="radio" value="2"></radio>
                        </view>
                    </radio-group>
                </view>
                <button class="payBtn" @tap="submitPay" :disabled="disabledOk">立即支付</button>
            </view>
        </view>
    </view>
</template>

<script>
    import { getAuthUrl, wpayH5Info, h5Pay } from '@/apis/interfaces/rights'
    const jweixin = require('jweixin-module');  //获取微信支付
    export default {
        data() {
            return {
                defaultPrice    : '',       //支付金额
                disabledOk      : false,    //支付按钮状态
                current         : 1,        //支付下标
                defaultNo       : '',       //权益订单编号
                defaultType     : '',       //购买类型  school为校园活动  oil为中石油活动 default为洗车券+权益+周五福利 giftPEnv为月兑活动
                activityType    : '',       //活动类型  welfare为周五福利日  right为权益
                defaultDeliver  : ''        //提交方式  0为快递  1为自提
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            // 判断是否微信授权登录过  只有外部游览器才用到（支付需要授权微信环境）
            let status = navigator.userAgent.toLowerCase();
            if (status.match(/MicroMessenger/i) == "micromessenger" && !options.code) {
                let locationUrl = window.location.pathname.substr(1) + window.location.search
                getAuthUrl(locationUrl).then(res=> {
                    window.location.href = res
                })
            }
            this.openid  = options.openid || ''
            this.code    = options.code || ''  //用code换取oppid
            
            // 页面跳转参数接收
            this.defaultPrice   = options.price
            this.defaultNo      = options.tradeNo
            this.defaultType    = options.type
            this.activityType   = options.activity_type
            this.defaultDeliver = options.deliver
        },
		
		// 生命周期函数--监听页面显示
		onShow() {
		    // 存储环境-月兑活动
		    getApp().globalData.envType = 'giftPEnv'
		},
		
        methods: {
            // 支付方式选择
            radioChange(e) {
                this.current = e.detail.value
            },
            
            // 支付提交
            submitPay() {
                // this.current为1的时候为沃支付-直接跳转h5
                if (this.current == 1) {
                    const newUrl = "https://card.ysd-bs.com/unicom/payment?trade_no=" + this.defaultNo  // 正式地址
                    window.location.href = newUrl
                }
                // this.current为1的时候为微信支付
                if (this.current == 2) {
                    // 调取微信支付
                    this.wechatPayment();
                }
            },
            
            // 微信支付数据
            wechatPayment() {
                let status = navigator.userAgent.toLowerCase();
                if (status.match(/MicroMessenger/i) == "micromessenger") {
                    // 微信浏览器-获取
                    this.wxBrowser();
                }else {
                    // 普通浏览器(网址游览器)
                    this.outBrowser();
                }
            },
            
            // 当支付环境为微信游览器情况下
            wxBrowser() {
                wpayH5Info({
                    url: location.href.split('#')[0],
                    list:'chooseWXPay'
                }).then(wechatConfig => {
                    let wxConfig = JSON.parse(wechatConfig)
                    jweixin.config({
                        appId: wxConfig.appId,
                        debug: false,
                        jsApiList: wxConfig.jsApiList,
                        signature: wxConfig.signature,
                        nonceStr: wxConfig.nonceStr,
                        timestamp: wxConfig.timestamp
                    })
                    jweixin.ready(() => {
                        // activityType=right为权益 支付;  activityType=welfare为周五福利日 支付
                        let wechaUrl = ''  // 定义接口来源名称
                        if (this.activityType == 'welfare') wechaUrl = 'payments/welfare/wechat'// 周五福利日支付接口
                        if (this.activityType == 'right') wechaUrl = 'payments/wechat' //权益支付接口
                        h5Pay(wechaUrl, {
                            channel: 'h5',
                            trade_no: this.defaultNo,
                            code: this.code
                        }).then(wechatRes => {
                            let wechatPay = JSON.parse(wechatRes)
                            jweixin.chooseWXPay({
                                timestamp: wechatPay.timeStamp,
                                nonceStr: wechatPay.nonceStr, 
                                package: wechatPay.package,
                                signType: wechatPay.signType,
                                paySign: wechatPay.paySign,
                                success: payRes => {
                                    this.disabledOk = true
                                    uni.showToast({
                                        title: '支付成功',
                                        icon : 'success'
                                    })
                                    
                                    // 校园活动成功跳转
                                    if(this.defaultType == 'school') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/campus/myCoupon'
                                            })
                                        },3000)
                                    }
                                    
                                    // 中石油活动活动成功跳转
                                    if(this.defaultType == 'oil') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/oil/myCoupon'
                                            })
                                        },3000)
                                    }
                                    
                                    // 中国联通回馈活动成功跳转
                                    if(this.defaultType == 'unicom') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/unicom/index'
                                            })
                                        },3000)
                                    }
									
									// 月兑活动成功跳转
									if(this.defaultType == 'giftPEnv') {
									    setTimeout(()=>{
									        uni.reLaunch({
									            url: '/pages/giftPack/index'
									        })
									    },3000)
									}
                                    
                                    // 洗车券+权益+福利成功跳转  获取
                                    if(this.defaultType == 'default') {
                                        this.successUrl();
                                    }
                                },
                                cancel: () =>{
                                    this.disabledOk = true
                                    
                                    uni.showToast({
                                        title: '取消支付',
                                        icon : 'success'
                                    })
                                    
                                    // 校园活动失败跳转
                                    if(this.defaultType == 'school') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/campus/index'
                                            })
                                        },3000)
                                    }
                                    
                                    // 中石油活动活动成功跳转
                                    if(this.defaultType == 'oil') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/oil/index'
                                            })
                                        },3000)
                                    }
									
									// 月兑活动成功跳转
									if(this.defaultType == 'giftPEnv') {
									    setTimeout(()=>{
									        uni.reLaunch({
									            url: '/pages/giftPack/index'
									        })
									    },3000)
									}
                                    
                                    // 中国联通回馈活动成功跳转
                                    if(this.defaultType == 'unicom') {
                                        setTimeout(()=>{
                                            uni.reLaunch({
                                                url: '/pages/unicom/index'
                                            })
                                        },3000)
                                    }
                                    
                                    // 洗车券+权益+福利失败跳转 获取
                                    if(this.defaultType == 'default') {
                                        this.failUrl();
                                    }
                                }
                            })
                        })
                    })
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                    if (!err.login) {
                        // 跳转校园活动登录页面
                        if (this.defaultType == 'school') {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.reLaunch({
                                            url: '/pages/campus/signin'
                                        });
                                    }
                                }
                            })
                        }
                        
                        // 跳转中石油活动登录页面
                        if (this.defaultType == 'oil') {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.reLaunch({
                                            url: '/pages/oil/signin'
                                        });
                                    }
                                }
                            })
                        }
						
						// 月兑活动成功跳转
						if(this.defaultType == 'giftPEnv') {
							uni.showModal({
							    title: '用户登录已过期',
							    content: '请重新登录',
							    showCancel: false,
							    success: res => {
							        if (res.confirm) {
							            uni.reLaunch({
							                url: '/pages/giftPack/signin'
							            });
							        }
							    }
							})
						}
                        
                        // 中国联通回馈活动成功跳转
                        if (this.defaultType == 'unicom') {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.reLaunch({
                                            url: '/pages/unicom/signin'
                                        });
                                    }
                                }
                            })
                        }
                        
                        // 跳转本时生活平台登录页面
                        if (this.defaultType == 'default') {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.reLaunch({
                                            url: '/pages/auth/login'
                                        });
                                    }
                                }
                            })
                        }
                    }
                })
            },
            
            // 车券+权益+福利成功跳转  数据
            successUrl() {
                if(this.activityType == 'welfare'){
                    setTimeout(()=>{
                        if(this.defaultDeliver == 1) {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=welfareGoods'
                            })
                        } else {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=welfare'
                            })
                        }
                    },3000)
                }
                if(this.activityType == 'right'){
                    setTimeout(()=>{
                        if(this.defaultDeliver == 1) {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=rightsCoupons'
                            })
                        } else {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=rights'
                            })
                        }
                    },3000)
                }
            },
            
            // 车券+权益+福利失败跳转  数据
            failUrl() {
                if(this.activityType == 'welfare'){
                    setTimeout(()=>{
                        if(this.defaultDeliver == 1) {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=welfareGoods&stateType=unpay'
                            })
                        } else {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=welfare&stateType=unpay'
                            })
                        }
                    },3000)
                }
                if(this.activityType == 'right'){
                    setTimeout(()=>{
                        if(this.defaultDeliver == 1) {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=rightsCoupons&stateType=unpay'
                            })
                        } else {
                            uni.reLaunch({
                                url: '/pages/order/order?orderType=rights&stateType=unpay'
                            })
                        }
                    },3000)
                }
            },
            
            // 当为外部游览器环境
            outBrowser(){
                wechatH5({
                    channel: 'mweb',
                    trade_no: this.defaultNo
                }).then(mwebRes => {
                    let url = mwebRes
                    let newUrl = ''
                    
                    // 校园活动购买
                    if(this.defaultType == 'school') {
                        newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/campus/myCoupon'
                        // #ifdef H5
                        window.location.href = newUrl
                        // #endif
                    }
                    
                    // 中石油活动购买
                    if(this.defaultType == 'oil') {
                        newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/oil/myCoupon'
                        // #ifdef H5
                        window.location.href = newUrl
                        // #endif
                    }
					
					// 月兑活动成功跳转
					if(this.defaultType == 'giftPEnv') {
					    newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/giftPack/myCoupon'
					    // #ifdef H5
					    window.location.href = newUrl
					    // #endif
					}
                    
                    // 中国联通回馈活动购买
                    if(this.defaultType == 'unicom') {
                        newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/unicom/index'
                        // #ifdef H5
                        window.location.href = newUrl
                        // #endif
                    }
                    
                    // 洗车券+权益+福利购买
                    if(this.defaultType == 'default') {
                        if (this.activityType == 'welfare') {
                            if (this.defaultDeliver == 1) {
                                newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=welfareGoods'
                                // #ifdef H5
                                window.location.href = newUrl
                                // #endif
                            } else {
                                newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=welfare'
                                // #ifdef H5
                                window.location.href = newUrl
                                // #endif
                            }
                        }
                        if (this.activityType == 'right') {
                            if (this.defaultDeliver == 1) {
                                newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=rightsCoupons'
                                // #ifdef H5
                                window.location.href = newUrl
                                // #endif
                            } else {
                                newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=rights'
                                // #ifdef H5
                                window.location.href = newUrl
                                // #endif
                            }
                        }
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                    
                    // 跳转校园活动登录页面
                    if (this.defaultType == 'school') {
                        if (!err.login) {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/campus/signin'
                                        });
                                    }
                                }
                            })
                        }
                    }
                    
                    // 跳转中石油活动登录页面
                    if (this.defaultType == 'oil') {
                        if (!err.login) {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/oil/signin'
                                        });
                                    }
                                }
                            })
                        }
                    }
					
					// 月兑活动成功跳转
					if(this.defaultType == 'giftPEnv') {
						uni.showModal({
						    title: '用户登录已过期',
						    content: '请重新登录',
						    showCancel: false,
						    success: res => {
						        if (res.confirm) {
						            uni.reLaunch({
						                url: '/pages/giftPack/signin'
						            });
						        }
						    }
						})
					}
                    
                    // 中国联通回馈活动登录页面
                    if (this.defaultType == 'unicom') {
                        if (!err.login) {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/unicom/signin'
                                        });
                                    }
                                }
                            })
                        }
                    }
                    
                    // 跳转本时生活平台登录页面
                    if (this.defaultType == 'default') {
                        if (!err.login) {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/auth/login'
                                        });
                                    }
                                }
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #bc1d30;
        padding: 40rpx;
        box-sizing: border-box;
    }
    
    .cashierTips {
        background-color: #FFFFFF;
        font-weight: 600;
        font-size: 30rpx;
        border-radius: 10rpx;
        margin-bottom: 40rpx;
        line-height: 80rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        color: #e69500;
        display: flex;
        image {
            width: 32rpx;
            height: 32rpx;
            margin: 24rpx 10rpx 0 0;
        }
    }
    
    .cashierCont {
        width: 100%;
        background-color: #ffffff;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        overflow: hidden;
    }
    .cashierCont-title text {
        color: #7e7d81;
        padding-right: 30rpx;
    }
    
    .cashierCont-price {
        text-align: center;
        margin: 90rpx 0;
        color: #bc1d30;
    }
    
    .cashierCont-price-title {
        font-size: 34rpx;
        margin-bottom: 10rpx;
    }
    
    .cashierCont-price-number {
        font-size: 60rpx;
    }
    
    .cashierCont-pay-title {
        color: #7e7d81;
        margin-bottom: 40rpx;
        text{
            color: #bc1d30;
            padding-left: 10rpx;
        }
    }
    
    .cashierCont-pay-way {
        height: 240rpx;
    }
    
    .cashierCont-way-label {
        float: left;
        border: 2rpx solid #e8e8e8;
        box-sizing: border-box;
        padding: 30rpx 0;
        border-radius: 10rpx;
        width: calc(50% - 84rpx);
        text-align: center;
        margin: 0 40rpx;
        font-size: 30rpx;
        position: relative;
        &.active {
            border-color: #bc1d30;
            color: #bc1d30;
            box-shadow: 0 10rpx 20rpx rgba(188, 29, 48 ,.3);
        }
        radio {
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        image {
            width: 90rpx;
            height: 90rpx;
            display: block;
            margin: 0 auto 20rpx;
        }
    }
    .cashierCont-way-unicom {
        width: calc(100% - 84rpx);
    }
    .payBtn {
        background-color: #bc1d30;
        color: #ffffff;
        height: 90rpx;
        line-height: 90rpx;
        width: 100%;
        font-size: 32rpx;
        padding: 0;
        border-radius: 80rpx;
        margin: 80rpx 0 40rpx;
    }
    
    .payBtn[disabled] {
        background: #eaeaea !important;
    }

</style>
