【微信支付】

支付页面弹窗

子组件内容
<template>
  <view class="selectpays-container" v-if="isShow">
    
    <!-- 弹窗 -->
    <view class="tanchuceng-box"  @touchmove.stop.prevent="moveHandle">
      <scroll-view scroll-y="true" class="scroll_view_style">
        <view class="bigger-box">
          <view class="toptitle-box">
            <view class="toptitle1"></view>
            <view class="toptitle2">
              <text class="titlename">请选择支付方式</text>
            </view>
            <view class="toptitle3" @click="closebuttonhandle">
              <image class="closelogo" src="/static/home-icons/[email protected]" mode=""></image>
            </view>
          </view>
          
          <view class="paylistbox">
            <view class="name-item" v-for="(item,i) in payList" :key="i" @click="selectItem(i)">
              <image class="image1" :src="item.url" mode="widthFix"></image>
              <view class="zfname">{
    {
    item.name}}</view>
              <image class="image2" src="/static/home-icons/[email protected]" mode="widthFix" v-show="item.status"></image>
            </view>
          </view>
          
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    
    name:"selectpays",
    props: {
    
    	isShow: {
    
      	type: Boolean,
      	default: false
      }
    },
    data() {
    
      return {
    
        payList:[
          {
    
            url:'/static/home-icons/[email protected]',
            name:'微信支付',
			type:2,
            status:false
          },
          {
    
            url:'/static/home-icons/[email protected]',
            name:'支付宝支付',
			type:3,
            status:false
          }
        ],
      };
    },
    methods:{
    
      //选择支付方式
      selectItem(i){
    
      	this.payList.forEach(el=>{
    
      		el.status=false
      	})
      	this.payList[i].status=true
      	this.payList.forEach(el1=>{
    
      		if(el1.status){
    
            this.$emit('payhandel',{
    
              name:el1.name,
			  type:el1.type
            })
      		}
      	})
      },
      // 禁止弹窗滚动
      moveHandle: function() {
    
      	return false
      },
      //关闭按钮点击事件
      closebuttonhandle(){
    
        this.$emit('payhandel',{
    
          name:'close'
        })
      },
      
    }
  }
</script>

<style lang="scss">
.selectpays-container{
    
  
  // 支付方式弹层
  .scroll_view_style{
    
      width: 100vw;
      height: 240px;
      border-radius:10px 10px 0 0;
      background-color: #FFFFFF;
  }
  .bigger-box{
    
    
    .toptitle-box{
    
      position: sticky;
      left: 0;
      right: 0;
      top: 0;
      height: 60px;
      z-index: 99;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      
      .toptitle1{
    
        width: 40px;
        height: 40px;
      }
      .toptitle2{
    
        height: 40px;
        text-align: center;
        line-height: 40px;
        flex: 1;
        .titlename{
    
          font-size: 16px;
          font-weight: 700;
        }
      }
      .toptitle3{
    
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        .closelogo{
    
          width: 14px;
          height: 14px;
        }
      }
    
    }
    
    .paylistbox{
    
      height: 100px;
      background-color: #FFFFFF;
      .name-item{
    
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .image1{
    
          width: 21px;
          height: 20px;
          margin-right: 10px;
        }
        .zfname{
    
          flex: 1;
          font-size: 14px;
          margin-right: 10px;
        }
        .image2{
    
          width: 16px;
          height: 12px;
        }
      }  
    }   
  }
  
}
</style>

父组件调用内容

  <!-- 支付方式弹层 -->
    <view class="payPounpBox" @touchmove.stop.prevent="moveHandle">
      <uni-popup ref="paypopup" type="bottom" :maskClick="false">
        <selectpays :isShow="isShowPay" @payhandel="payviewhandel"></selectpays>
      </uni-popup>
    </view>

 //支付弹层
      selectPayButton(){
    
        this.show = true
        this.isShowPay = true
        this.$refs.paypopup.open('bottom')
      },
      //选择的支付方式
      payviewhandel(e){
    
        //console.log(e,'payviewhandelpayviewhandelpayviewhandel')
        if(e.name === 'close'){
    
          this.show = false
          this.isShowPay = false
          this.$refs.paypopup.close('bottom')
        }else{
    
            this.gotoPayment(e.type)
        }
      },
	  
	  //去支付
	  gotoPayment(type){
    
	  		  payment({
    
	   	        pay_method:type, //支付方式 2 微信 3 支付宝
	  			pay_type:'buyservice', 
	  			id:this.orderID
	   	}).then( res =>{
    
	   		console.log( res ,'订单支付')
	  			if(type==2){
    
	  				this.towxpay(res.data.data.wechataydata)
	  			}else{
    
	  				//this.tozfbpay()
	  			}
	  			
	  		  })
	  },
	  towxpay(data){
    
	  		 uni.requestPayment({
    
	  		       "provider": "wxpay", 
	  		       "orderInfo": {
    
	  		        "appid":"wxa42e3ad1e5e0e618",  // 微信开放平台
	  		        "noncestr":data.nonceStr, // 随机字符串
	  		        "package":"Sign=WXPay",        // 固定值
	  		        "partnerid": data.partnerid,      // 微信支付商户号 
	  		        "prepayid": data.prepay_id, // 统一下单订单号
	  		        "timestamp": data.timestamp,        // 时间戳（单位：秒）
	  		        "sign":data.paySign, // 签名，这里用的 MD5/RSA 签名
	  		       },
	  		       success(res) {
    
	  				   uni.$showMsg("恭喜您，下单成功!") ;
	  			   },
	  		       fail(e) {
     
	  				   uni.$showMsg("未支付成功") ;
	  			   }
	  		});  
	  },