liaotian/pages/mine/recharge.vue

<!-- 充值 -->
<template>
	<view class="page">
      
      <block v-if="is_iospay">
                <ul class="profile" >
          <li>充值方式：</li>
                           
                           <li>    
                            iOS内购       
                               <span v-if="fee>0" style="font-size: 12px;margin-left: 5px;color: #FF0000;">手续费{{fee}}%</span>
                               
                           </li>
                      </ul>
          <ul class="profile" style="text-align: center;">
                    
                              <block v-for="(m,index) in money_arr" :key="index">
                           
                                  <span :class="{'money':true,'active':index==money_select}" @tap="select_money(index)">{{m}}元</span>
                              </block>   
                              
                                  
                        </ul>
          <view style="margin:15px auto;display:block;width: 80%;">
          
          

              <button class="button1" @tap="submit_iospay=true">下一步</button>
          
         
          </view>
              <iospay v-if="submit_iospay" type="recharge" :money_select="money_select" :money="money" @cancel_pay="submit_iospay=false;"></iospay>
      </block> 
      <block v-else>
          <block v-if="step==0">
               
               <ul class="profile" >
                 <li>充值方式：</li>
                                  
                                  <li>    
                                   <block v-for="(m,index) in paytype" :key="index"> 
                                       <span :class="{'money':true,'active':index==selected}" @tap="clicktype(index)">{{m.name}}</span>
                                   </block>        
                                  </li>
                             </ul>
                             
                             
                       <ul class="profile" v-if="banklist.length>1" >
                         <li>渠道：</li>
                                          
                                          <li>
                                              
                                           <block v-for="(m,index) in banklist" :key="index">
                                               
                                               <span :class="{'money':true,'active':index==bankselected}" @tap="clickbank(index)">{{m.title}}</span>
                                           </block>   
                                           
                                               
                                          </li>
                                     </ul>
                            
                           
                          <ul class="profile" >
                                             <li>充值金额：</li>
                                             
                                             <li>
                                                 
                                              <input type="text"  v-model="money" style="width: 50px;display: inline-block;vertical-align: middle;margin-right: 5px;" class="input1" />元
                                              
                                              <span v-if="fee>0" style="font-size: 12px;margin-left: 5px;color: #FF0000;">手续费{{fee}}%</span>
                                               
                                                  
                                             </li>
                                        </ul>
                          
                         <ul class="profile" style="text-align: center;">
                                           
                                                
                                             <block v-for="(m,index) in money_arr" :key="index">
                                                 
                                                 <span :class="{'money':true,'active':index==money_select}" @tap="select_money(index)">{{m}}元</span>
                                             </block>   
                                             
                                                 
                                       </ul>
                          <view style="margin:15px auto;display:block;width: 80%;">
                          
                          
                              <button class="button1" @tap="submit()">下一步</button>
                          
                          
                          </view>
                      
           </block>
          <block v-else>
              
              <view v-if="postdata.bank.method=='bank'"  class="banklist">
                  <view >
                      <view >
                          汇款银行：
                      </view>
                      <view >
                          <span class='blur'>
                              {{postdata.bank.bankname}}
                          </span>
                          <button class="btn1" @tap="copy(postdata.bank.bankname)">复制</button>
                      </view>
                      
                  </view>
                  
                  
                  <view >
                      <view >
                          开户姓名：
                      </view>
                      <view >
                          <span class='blur'>
                              {{postdata.bank.realname}}
                          </span>
                          <button class="btn1" @tap="copy(postdata.bank.realname)">复制</button>
                      </view>
                      
                  </view>
                  <view >
                      <view >
                          银行卡号：
                      </view>
                      <view >
                          <span class='blur'>
                              {{postdata.bank.number}}
                          </span>
                          <button class="btn1" @tap="copy(postdata.bank.number)">复制</button>
                      </view>
                      
                  </view>
                  <view >
                      <view >
                          汇款金额：
                      </view>
                      <view >
                          <span style='color:#FF0000'>
                              {{postdata.money}}
                          </span>
                          元
                          <button class="btn1" @tap="copy(postdata.bank.money)">复制</button>
                      </view>    
                  </view>

              </view>
              
              <view v-else class="qrcode">
                  <view class="money"><span>￥</span>{{postdata.money}}</view>
                  <view class="image">
                      
                      <image :src="photo(postdata.bank.qrcode)" mode="widthFix"></image>
                  </view>

                  <view class="tips">
                      扫描上面的二维码完成转账操作
                  </view>
 
              </view>
              <view style="margin:15px auto;display:block;width: 80%;">
                  <button class="button1" @tap="sub_ok()">我已完成付款</button>
              </view>
              
          </block>
                
          
          
      </block>
        
	</view>
</template>

<script>
	  import http from "../../library/http.js"
        import config from "../../config.js"
        import iospay from "../../components/iospay.vue"
	export default {
        components: {
        iospay,
               
              
        },
		data () {
			return {
				money:'',
				user: uni.getStorageSync('userInfo'),
                system: uni.getStorageSync('system'),
				setting: uni.getStorageSync('rechargeset'),
                paytype:[],
                selected:0,
                money_arr:[50,100,200,500],
                money_select:1,
                fee:0,
                set:[],
                online:false,
                banklist:[],
                bankselected:0,
                postdata:[],
                step:0,
                order:[],
                is_iospay:false,
                submit_iospay:false,
                
			}
		},
        methods:{
          
            copy(data){
                uni.setClipboardData({
                    data:data,
                    success() {
                        uni.showToast({
                            title:'复制成功',
                             icon:'none'
                        })
                    },
                    fail: () => {
                        uni.showToast({
                            title:'复制失败',
                            icon:'none'
                        })
                    }
                })
            },
            clicktype(num){
               this.selected=num; 
               if(this.online==true){
              var set =this.setting.setting[this.paytype[num]['id']]; 
                   this.banklist=[];
               }else{
                    var set =this.paytype[num]['bank'][0];
                    this.banklist=this.paytype[num]['bank'];
               }
              this.bankselected=0;
                this.set=set;
                this.fee=set.fee;
            },
            clickbank(num){
              this.bankselected=num;
                this.set=this.banklist[num];
                this.fee=this.set.fee;
            },
            select_money(num){
                  this.money_select=num;
             this.money=this.money_arr[num];
            },
            setmethod(){
                try{
                   var paytype=[];
                   this.online=this.setting.online;
             
                   if(this.online==true){
                    
                       for(var ii in this.setting.way){
                        for(var jj in this.setting.method){
                            if(this.setting.method[jj]==ii){
                              paytype.push({id:ii,name:this.setting.way[ii]}) ;
                               break;
                            }
                        }   
                       } 
                       
                   }else{
                       for(var ii in this.setting.way){
                        for(var jj in this.setting.method){
                            if(this.setting.method[jj]==ii){
                                var bank=this.setting.bank[ii];
                                var name={min:bank[0]['min'],max:bank[0]['max'],fee:bank[0]['fee']};
                            
                              paytype.push({id:ii,name:this.setting.way[ii],bank:bank}) ;
                               break;
                            }
                        }   
                       }
                   }
     
                   this.paytype=paytype;
                   this.clicktype(this.selected) 
                }catch(e){
                    //TODO handle the exception
                }
                
               
            },
			getseting(){
              this.setmethod();
                http.setWait(false).post('user.php?act=rechargeset',{}).then(res=>{
                         this.setting=res.data;
                       
                         uni.setStorageSync('rechargeset',this.setting)
                                 this.setmethod();
                         })
            },
            photo(image_url){
                  if(image_url.indexOf('http')<=-1) image_url=config.imgUri+image_url; 
                  
                  return this.image_cache(image_url);
            },
            submit(){
             
            //    return this.pay(13182832);
                  var rechargeMin =this.set['min'] //最小充值金额
                             var rechargeMax =this.set['max'];
                             var rechargeMoney =this.money; //用户充值金额
               
                
                             if (rechargeMoney == "") {
                                 uni.showToast({
                                     title:'请填写充值金额',
                                     icon:'none'
                                 })
                                 return false;
                             }
                
                             if (rechargeMoney == 0) {
                                 uni.showToast({
                                     title:'充值金额不能为0！',
                                     icon:'none'
                                 })

                                 return false;
                             }
                
                             if (isNaN(rechargeMoney)) {
                                 uni.showToast({
                                     title:'提现金额必须为数字',
                                     icon:'none'
                                 })
                                 parent.layer.msg('充值金额必须为数字！',{ type: 1, anim: 2 ,time:1000});
                
                                 return false;
                             }
                             if (parseFloat(rechargeMoney) - parseFloat(rechargeMin) < 0) {
                                 uni.showToast({
                                     title:'每次最少充值'+ rechargeMin + '元！',
                                     icon:'none'
                                 })
                         
                                 return false;
                             }
                
                             if (parseFloat(rechargeMoney) - parseFloat(rechargeMax) >0) {
                                 uni.showToast({
                                     title:'每次最多充值'+ rechargeMax+ '元！',
                                     icon:'none'
                                 })
                        
                                 return false;
                             }
                               if(this.$action.check_userlock()==false) return false;
                   
                           if(this.online==true){
                                       var posdata={money:rechargeMoney,type:this.paytype[this.selected]['id'],userid:this.user.id,online:this.online};
                               http.setWait(true).post('pay.php?act=recharge',posdata).then(res=>{
                                  
                                       var  params = {url: res.data};
                                       return this.$jump('web.index',params);
                                         
                               })
                           }else{
                               
                                      this.postdata={money:rechargeMoney,type:this.paytype[this.selected]['id'],userid:this.user.id,bank:this.banklist[this.bankselected],online:this.online};
                                         this.step=1;
                                         uni.setNavigationBarTitle({
                                             title:'请完成转账操作'
                                         })
                           }
                           
                          // console.log(posdata)
                   
                            
            },
		    sub_ok(){
                var postdata=this.postdata;
               postdata.bank=JSON.stringify(postdata.bank);
            
                http.setWait(true).post('pay.php?act=recharge1',postdata).then(res=>{
                        uni.showModal({
                        	title: '提示',
                        	content: "充值已提交，大概1-5分钟内到账",
                        	showCancel: true,
                        	cancelText: '关闭',
                        	confirmText: '查看账单',
                        	success: res => { 
                        		if(res.confirm) {
                                  uni.redirectTo({
                                    url:"/pages/mine/order" 
                                  })
                        		}else{
                                    this.step=0;
                                }
                        	}
                        });  
                     
                })
                
            }
        },
		onLoad(opts) {
            if(opts.money!=null && opts.money!=undefined) this.money=opts.money;
            else this.money=this.money_arr[this.money_select];
         // #ifdef APP-PLUS
         if( plus.os.name=='iOS' && this.system.iospay==1) {
             this.is_iospay=true;
             this.money_arr=this.system.iospay_money.split('|');
             this.money_select=0;
             this.money=this.money_arr[this.money_select];
             this.fee=this.system.iospay_fee;
         }else{
              this.getseting();
         }
         // #endif
         // #ifndef APP-PLUS
         this.getseting();
         // #endif
		}
		
	}
</script>

<style scoped>
 @import "@/static/css/user.css";
 .page{
     background-color: #fafafa;
 }
 .profile,.login-lines1{
     background-color: #fff;
     margin: 10px auto;
     width: 100%;
    vertical-align: middle; 
 }
 .profile li{
     vertical-align: middle;
 }
 .profile li:first-child{
     width:100px
 }
 .profile li:last-child{
     width:calc(100% - 110px)
 }
 .input1{
     max-width: 150px;
 }
    .profile .money{
         height: 25px;
         line-height: 25px;
         margin: 5px 5px;
         text-align: center;
         border-radius: 5px;
         background-color: #fff;
         border:1px solid #666;
         color: #555;
         width: 70px;
         display: inline-block;
         cursor: pointer;
     }
     .profile .money.active{
         background-color: #2319dc;
         border-color: #2319dc;
         color: #fff;
     }
     .qrcode{
         display: flex;
         flex-direction: column;
         text-align: center;
         align-items: center;
      
      }
      .qrcode .money{
          font-size: 40px;
          line-height:50px;
          height: 50px;
          color: #000;
          font-weight: 600;
          margin-top: 20px;
      }
      .qrcode .money > span{
          font-size: 16px;
      }
      .qrcode .image {
          margin-top: 10px;
          
      }
      .qrcode .image > image{
          width: 250px;
 
      }
      .qrcode .tips{
          font-size: 14px;
          color: #666;
          margin-top: 10px;
      }
      
      .banklist{
          display: flex;
          flex-direction: column;
          text-align: center;
          align-items: center;
       width: 100%;
       }
       .banklist > view{
           background-color: #fff;
           margin-top: 10px;
           height: 50px;
           line-height: 50px;
           display: flex;
           flex-direction: row;
           width: 100%;
           font-size: 14px;
       }
        .banklist > view > view:first-child{
            width: 100px;
            text-align: right;
            color:#666;
        }
        .banklist > view > view:nth-child(2){
           
            text-align: left;
            padding-left: 5px;
        }
        .blur{
            color: #2319DC;
        }
        .btn1{
            display: inline-block;
            height: 25px;line-height: 25px;
            margin: 0 10px;
            padding: 0 10px;
           border-radius: 5px;
           color: #000;
           background-color: #eee;
           vertical-align: middle;
           font-size: 14px;
        }
</style>