ourPayment.vue

<template>
	<view class="bigBox">
		<view class="top">
			<view class="topName">
				<text class="topIcon">
					<text class="iconfont icon-tubiaolunkuo-"></text>
				</text>
				<text>{{name}}</text>
			</view>
			<view class="topMoney">
				<text class="moneyText">金额</text>
				<view class="moneyNumber">
					<text class="iconfont icon-fl-renminbi" style="font-size: 56rpx;"></text>
					<text>{{buyMoney}}</text>
					<text></text>
				</view>
			</view>
			<!-- -----------------------------有可用优惠券,并且未选中----------------------------------------------------- -->
			<view class="topCoupon" v-if="couponData.masterSlaveCouponList&&couponData.masterSlaveCouponList.length>0&&chooseCouponObj==''" @click="showCoupon()">
			    <view class="couponLeft">
					<text>券</text>
					<text>{{couponData.masterSlaveCouponList[0].couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>未选优惠券</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
			<!-- -----------------------------有可用优惠券----------------------------------------------------- -->
			<view class="topCoupon" v-if="chooseCouponObj!=''&&savedMoney>0" @click="showCoupon()">
				<view class="couponLeft">
					<text>券</text>
					<text>{{chooseCouponObj.couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>-</text>
					<text>{{parseFloat(savedMoney.toFixed(2))}}</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
			<!-- -----------------------------------------------可用优惠券条件--------------------------------------- -->
			<view class="topCoupon" v-if="ableConpon!=''" @click="showCoupon()">
				<view class="couponLeft">
					<text>券</text>
					<text>{{ableConpon.couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>{{ableConpon.couponRule}}</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
		</view>
		
		<view class="middle">
			友情提示：请核对以上付款金额、付款商户等信息与交易一致。经您确认支付的金额，商家不会退回亦无赔偿义务。
		</view>
		
		<view class="bottom">
			<view class="botLeft">
				<view v-for="(item,index) of leftList" :key="index">
					<text @click="clickNum(items.text,index,a)" v-for="(items,a) of item.child" :key="a" :style="{'background':items.background}">{{items.text}}</text>
				</view>
			</view>
			
			<view class="botRight">
				<view class="rightOne" @click="clickEnter()" :style="{'background':spaceBackground}">
					<text class="iconfont icon-im_huige" style="font-size:70rpx;"></text>
				</view>
				<view class="rightTwo" ref="pay" @click="clickPay()" :style="{'background':payBackground}">
					<view>立即</view>
					<view>支付</view>
				</view>
			</view>
		</view>
		<!-------------------------------------------券弹窗------------------------------>
		 <orderCoupon :couponData="couponData" ref="orderCoupon" @couponChoose="couponChoose" :chooseCouponObj="chooseCouponObj"></orderCoupon>
		 
	</view>
	
</template>

<script>
import orderCoupon from '@/components/orderCoupon.vue'
export default {
  components:{
    orderCoupon
  },
  data() {
    return {
      enterUrl:'',//进入页面路由
      buyMoney:'', //输入金额
      companyId: '', //公司Id
      merchantId: '', //商户Id
      name: '', //商家名称
      payType:'',//支付类型，微信小程序42，支付宝小程序33
      paySign: '', //签名
      signType: '', //签名方式
      timeStamp: '', //时间戳
      nonceStr: '', //随机字符串
      package: '', //订单详情扩展字符串
      orderInfo:'',//支付宝订单号
      flag: '', //setTimeout函数
      couponData: '', //所有劵数据
      chooseCouponObj: '', //默认选中最优价格优惠券
      savedMoney:0,//优惠金额
      ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
      orderSource:8,//1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口、7平台快捷买单、8扫码支付
      background:'',//普通按钮背景颜色
      spaceBackground:'',//回格按钮背景颜色
      payBackground:'#1dce2e',//支付背景颜色
      leftList:[//左侧按钮数据
        {
          child:[
            {text:1,background:''},
            {text:2,background:''},
            {text:3,background:''}
          ]
        },
        {
          child:[
            {text:4,background:''},
            {text:5,background:''},
            {text:6,background:''},
          ]
        },
        {
          child:[
            {text:7,background:''},
            {text:8,background:''},
            {text:9,background:''},
          ]
        },
        {
          child:[
            {text:0,background:''},
            {text:'.',background:''},
          ]
        }
      ],
      orderId:'',//订单Id
      paydJumpUrl:'',//页面跳转路径
      companyAttribute:'',//等于5时为出租车
      timer:null,//定时器
      extendInfo:''//额外信息
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.enterUrl=option.q
    this.payType = 42
    //#endif
			
    //#ifdef MP-ALIPAY
    this.enterUrl=uni.getStorageSync('alipayQrCode')
    uni.removeStorageSync('alipayQrCode')//临时解决出租车扫码之后跳转到组合票时，参数会有问题，有时间再根本解决
    this.payType = 33
    //#endif
    if(this.enterUrl){//扫普通二维码进入
      this.merchantId=this.getUrlKey('merchantId')
      this.companyId=this.getUrlKey('companyId')
      this.extendInfo=this.getUrlKey('extendInfo')
    }else{//扫小程序二维码进入
      this.merchantId=option.merchantId
      this.companyId=option.companyId
      this.extendInfo=option.extendInfo
    }
    if(uni.getStorageSync('openid')){
      this.openid=uni.getStorageSync('openid')
      this.getUserBrowse()
      if (this.merchantId) { //大商家的有merchantId
				  this.init()
      } else { //小商家没有merchantId
				  this.initTwo()
      }
      this.initCoupon()
    }else{
      this.login()
    }
  },
  // 一般页面用onUnload
  // tabbar页面用onHide
  onUnload() {
    if(this.timer) {  
      clearTimeout(this.timer)
      this.timer = null
    }  
  },
  methods: {
    getUserBrowse(){//---获取浏览记录
			  let queryUrl=this.$commonjs.getCurrentPageUrl()
			  let data={
			    openid:uni.getStorageSync('openid') ,//用户Id
			    userName:'',//用户昵称
			    pageType:4,//页面类型(0首页，1商户页，2产品页，3售票页，4付款页，5付款完成页，6行记页，7评论页，8咨询页，9劵中心页，11订单页，12订单详情页，13IC卡出行页，14电子门票页，15常用信息页，16其他页)
			    queryUrl,//页面全地址
			    merchantType:''//商户类型1景区，2酒店，3餐饮，4特产
			  }
			  this.$request('wechatUser/wxUser/saveUserBrowse',data).then((res)=>{
			
			  })
    },
    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
                  appid:uni.getStorageSync('appid')||''
                }
                if(uni.getStorageSync('enterOptions').query){
									  data.companyId=uni.getStorageSync('enterOptions').query.companyId||''
                }
                _this.$request('wechat/wx/getUserInfoByCode',data).then(res => {
                  if(res.code=='00'){
                    _this.openid=res.data.openid
                    uni.setStorageSync('openid',_this.openid)
                    _this.getUserBrowse()
                    if (_this.merchantId) { //大商家的有merchantId
											  _this.init()
                    } else { //小商家没有merchantId
											  _this.initTwo()
                    }
                    _this.initCoupon()
                    //用于获取token等信息
                    let userId=res.data.userId||''
                    let openid=res.data.openid||''
                    let datas={openid,source,userId}
                    _this.$request('wechatUser/login/findWxUserAndLogin',datas).then((res)=>{
											  if(res.code=='00'){
											    let token=res.data.token||''
                        uni.setStorageSync('token',token)
											    let createUserId=res.data.personId||''
                        uni.setStorageSync('createUserId',createUserId)
											    let userId=res.data.userId||''
                        uni.setStorageSync('userId',userId)
											  }else{
											    uni.showToast({
											    	title:res.message,
											    	icon:'none'
											    })
											  }
                    }).catch((err)=>{
											  uni.showToast({
											  	title:'登录失败',
											  	icon:'none'
											  })
                      _this.timer = setTimeout(() => {
												  _this.login()
                      }, 2000)
                    })
                  }else{
                    uni.showToast({
                      title:res.message,
                      icon:'none'
                    })
                  }
                }).catch((err)=>{
										  uni.showToast({
										  	title:'登录失败',
										  	icon:'none'
										  })
                  _this.timer = setTimeout(() => {
											  _this.login()
                  }, 2000)
                })
              }
						   }
          })
        }
      })
    },
    getUrlKey(name){//---获取url
			  return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
    },
    clickNum(i,index,a) {//---输入数字
      //不超过14位数
      if(this.buyMoney.length>13){
        return
      }
			  this.buyMoney += i
			  this.leftList[index].child[a].background='#dddddd'
			  setTimeout(()=>{
        this.leftList[index].child[a].background=''
			  },200)
			  clearTimeout(this.flag)
			  this.flag = setTimeout(()=>{
			    this.initCoupon()
			  }, 1500)
    },
    clickEnter(){//---退格
      this.buyMoney = this.buyMoney.substr(0, this.buyMoney.length - 1)
      this.spaceBackground='#dddddd'
      setTimeout(()=>{
        this.spaceBackground=''
      },200)
      clearTimeout(this.flag)
      this.flag = setTimeout(()=>{
				  this.initCoupon()
      }, 1500)
    },
    couponChoose(data) { //---子组件券选择之后触发的事件
      if(data){
        this.chooseCouponObj = data
        this.savedMoney=this.chooseCouponObj.savedMoney||0
      }else{
        this.chooseCouponObj = ''
        this.savedMoney=0
      }
			  
    },
    showCoupon() { //---展示券列表
			  this.$refs.orderCoupon.showCoupon()
    },
    init() { //---初始化获取商家名称，大商家
			  let data = {
			    'merchantId': this.merchantId,
			    'companyId': this.companyId,
			  }
			  uni.showLoading({title: '加载中',mask:true})
			  this.$request('scenic/order/findCodePayInfo',data).then((res) => {
				  uni.hideLoading()
			    if (res.code =='00') {
			      this.name = res.data.name
			    } else {
			        uni.showToast({
					  title:res.message,
					  icon:'none'
				    })
			    }
			  }).catch((err)=>{
				  uni.hideLoading()
			  })
    },
    initTwo() { //---初始化获取商家名称,没有merchantId的小商家
			  let data = {
			    'id': this.companyId,
			  }
			  uni.showLoading({title: '加载中',mask:true})
			  this.$request('user/company/detail', data).then((res) => {
				  uni.hideLoading()
			    if (res.code=='00'){
				  this.companyAttribute=res.data.companyVo.companyAttribute
				  this.paydJumpUrl=res.data.paydJumpUrl
				  if(this.companyAttribute==5){//出租车显示联系人姓名，其他显示公司名称
				  	this.name = res.data.companyVo.contactName 			  
				  }else{
				  	this.name = res.data.companyVo.companyName 
				  }
			    } else {
			        uni.showToast({
					  title:res.message,
					  icon:'none'
          })
			    }
			  }).catch((err)=>{
				  uni.hideLoading()
			  })
    },
    initCoupon() { //---加载优惠券
			  let savedMoneyList = []
			  this.chooseCouponObj = ''
			  this.ableConpon = ''
			  let data = {
			    money:parseFloat(this.buyMoney)||0, //订单总价，不算券，和现金红包
			    merchantId:this.merchantId, //商户Id
			    companyId:this.companyId,//公司Id
			    orderSource:this.orderSource,//订单来源 8扫码支付
			    openid:this.openid
			  }
			  this.$request('wechatUser/myPage/usableCouponList',data).then((res) =>{
			    if (res.code == '00') {
			      this.couponData = res.data
			      let masterSlaveCouponList=res.data.masterSlaveCouponList
			      if (masterSlaveCouponList&&masterSlaveCouponList.length>0) {
			        masterSlaveCouponList.forEach((item) => { //获取最优券
			          savedMoneyList.push(item.savedMoney)
			        })
			        let maxMoney = Math.max.apply(null, savedMoneyList)
			        let arr=masterSlaveCouponList.filter((item)=>{//找到最大值的数组
			          return item.savedMoney==maxMoney
			        })
			        if(arr.length==1){
			          this.chooseCouponObj=arr[0]
			        }else{
              //如果数组有多个时
			          let index=arr.findIndex((item)=>{//如果有多个，找到是否有平台券，平台劵优先
			            return item.createSource==1
			          })
			          if(index>-1){
			            this.chooseCouponObj=arr[index]
			          }else{
			            this.chooseCouponObj=arr[0]
			          }
			        }
			        this.savedMoney=this.chooseCouponObj.savedMoney
			      } else {
			        if (res.data.unusableCouponList.length > 0) {
			          res.data.unusableCouponList.forEach((item, i) => { //没有可用优惠券，有达到条件可以用的优惠券，先显示条件，达到条件时显示可用优惠券
			            if (item.isProduct == 1) {
			              this.ableConpon = item
			            }
			          })
			        }
			      }
			    }
			  })
    },
    clickPay(){//---点击立即支付，获取支付需要的参数
      if (!parseFloat(this.buyMoney)) {
        uni.showToast({
          title:'请输入正确金额',
          icon:'none'
        })
        return
      }
      let couponList = []
      if (this.chooseCouponObj != '') {
				  if(this.chooseCouponObj.slaveList.length>0){//有从卷取值从卷，没有从卷取值主劵
				    couponList=[//券列表
				    	{
				    		couponId:this.chooseCouponObj.slaveCouponId,//券id
				    		isMerchant:this.chooseCouponObj.slaveCreateSource,//是否是商户的券
				    		myCouponId:this.chooseCouponObj.slaveId,//领取人编号
              couponType:this.chooseCouponObj.couponType,//券类型
              couponPrice:this.chooseCouponObj.savedMoney,//券价格
              couponCompanyId:this.chooseCouponObj.companyId,//公司Id
				    	}
				    ]
				  }else{
				  	couponList=[
				  		{
              couponId:this.chooseCouponObj.couponId,//券id
              isMerchant:this.chooseCouponObj.createSource,//是否是商户的券
              myCouponId:this.chooseCouponObj.id,//领取人编号
				  	    couponType:this.chooseCouponObj.couponType,//券类型
				        couponPrice:this.chooseCouponObj.savedMoney,//券价格
              couponCompanyId:this.chooseCouponObj.companyId,//公司Id
				  		}
				  	]
				  }
      }
      let data = {
				   companyId: this.companyId,
				   merchantId: this.merchantId,
				   userId:this.openid,
				   orderMoney: parseFloat(this.buyMoney),
				   payType: this.payType, //支付类型,
				   orderSource:this.orderSource,//订单来源 8扫码支付
				   couponList,//券列表
					 extendInfo:this.extendInfo,//额外信息
      }
      this.payBackground='#cccccc'
      //重新加载优惠券
      this.initCoupon()
      this.$request('orderc/order/codePay', data).then((res) => {
        setTimeout(() => {
          this.payBackground='#1dce2e'
        },1000)
        if(res.code=='00') {
          if (res.data.errorMessage) {
            uni.showToast({
              title:res.data.errorMessage,
              icon:'none'
            })
            return
          }
          this.orderId=res.data.id
          //微信入参
          this.signType = res.data.signType
          this.paySign = res.data.sign
          this.timeStamp = res.data.timestamp
          this.nonceStr = res.data.noncestr
          this.package = res.data.package
          //支付宝入参
          this.orderInfo = res.data.payInfo || ''
          this.goPay()
        } else {
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      }).catch((err) => {
				  this.payBackground='#1dce2e'
      })
    },
    goPay(){//---去支付
      let _this=this
      // #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) {
          if(_this.companyAttribute==5){//出租车跳转分销组合票页面
            uni.navigateTo({
							    url:_this.paydJumpUrl
            })
          }else{
            uni.navigateTo({
							    url:'/pages/payment/paySuccess/paySuccess?orderId='+_this.orderId
            })
          }
				    },
				    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) {
          if(_this.companyAttribute==5){//出租车跳转分销组合票页面
            uni.navigateTo({
							    url:_this.paydJumpUrl
            })
          }else{
            uni.navigateTo({
							    url:'/pages/payment/paySuccess/paySuccess?orderId='+_this.orderId
            })
          }
        },
        fail: function (err) {
          uni.showToast({
            title:err.errMsg,
            icon:'none'
          })
        }
      })
      // #endif
    }
  },
  watch: {
		  buyMoney(val, oldVal) {
		    if (val == '.' && oldVal == '') { //首位数是小数点自动加上0
		      this.buyMoney = 0 + '.'
		    }
		    if (val == '0' && oldVal == '') { //首位数是0自动加上小数点
		      this.buyMoney = 0 + '.'
		    }
      if (val.length == 2) { //防止回退之后出现01,02等状况
			  if (val.substr(0, 1) == 0 && val.substr(1, 2) != '.') {
			    this.buyMoney = val.substr(1, 2)
			  }
      }
		    if (isNaN(val) && val != '.') { //出现非数字，输入无效
		      this.buyMoney = oldVal
		    }
		    var x = String(this.buyMoney).indexOf('.') + 1 //小数点的位置
		    var y = String(this.buyMoney).length - x //小数的位数
		    if (y > 2 && x > 0) {
		      this.buyMoney = oldVal
		    }
      if (parseFloat(this.buyMoney)) {
        this.payBackground='#1dce2e'
      } else {
        this.payBackground='#cccccc'
      }
		  }
  }
}
</script>

<style lang="scss">
	.bigBox{background:#f5f5f5;height: 100%;}
	/*上部分*/
	.top{background: #FFFFFF;}
	.topName{font-size:30rpx;font-weight: bold;padding: 50rpx 24rpx 0 24rpx;display: flex;align-items: center;justify-content: center;}
	.topIcon{display:inline-flex;margin-right:10rpx;width:50rpx;height:50rpx;border-radius:50%;background:#FF8B57;align-items:center;justify-content:center;}
	.icon-tubiaolunkuo-{font-size:36rpx;color: #FFFFFF;font-weight: 400;}
	.topMoney{padding:80rpx 24rpx 24rpx 24rpx;display: flex;justify-content:space-between;align-items: center;}
	.moneyText{color: #FF3C00;font-size:32rpx;font-weight: bold;}
	.moneyNumber text:nth-child(2){font-size:62rpx;font-weight: bold;position: relative;left: -6rpx;}
	.moneyNumber text:last-child{animation: dis 1.5s infinite;transition: 1s;width: 1px;height:56rpx;display: inline-block;background: #333333;position: relative;top:8rpx;}
	.topCoupon{display: flex;height: 90rpx;border-top:1px solid $divider;align-items:center;padding:0 24rpx;justify-content: space-between;}
	.couponLeft{font-size:24rpx;}
	.couponLeft text:first-child{margin-right:10rpx;display: inline-block;width:30rpx;height:30rpx;background: #f9690e;color: #FFFFFF;text-align: center;line-height:28rpx;border-radius:4rpx;}
	.couponRight{position:relative;left:8rpx;}
	.couponRight text:first-child{font-size:32rpx;color:#f9690e;}
	.couponRight text:nth-child(2){font-size: 32rpx;color: #F9690E;font-weight:bold;}
	/*中间部分*/
	.middle{padding:50rpx 24rpx 0 24rpx;font-size: 24rpx;color: #999999;line-height: 40rpx;}	
	/*下部分*/
	.bottom{position:absolute;bottom:0;height:40%;background: #FFFFFF;width:100%;display: flex;border-top:1px solid #dddddd;font-size:50rpx;}
	.botLeft{width:75%;}
	.botLeft view{height:25%;display: flex;border-bottom:1px solid #dddddd;}
	.botLeft view:last-child{border:none;}
	.botLeft view:last-child text:first-child{width:66.7%;}
	.botLeft view:last-child text:last-child{width: 33.3%;}
	.botLeft view text{flex:1;height:100%;display:inline-flex;align-items: center;justify-content: center;border-right:1px solid #dddddd;}
	.botLeft view:last-child text{flex:initial;}
	.botRight{width:25%;}
	.rightOne{height: 25%;display: flex;align-items:center;justify-content: center;border-bottom:1px solid #dddddd;}
	.rightTwo{height: 75%;border:none;color: #FFFFFF;display: flex;flex-direction:column;align-items:center;justify-content: center;}	
	@keyframes dis{
	  from{
	    opacity: 0;
	  }
	  to{
	    opacity: 1;
	  }
	}
</style>