ec.uniapp-master/pages/store/payment/payment.vue

<template>

<view id="store-payment">
    <form @submit="formSubmit" :report-submit="report">
        <view class="order-item" v-if="order.status === 1 && init">
            <view class="title mx-1px-bottom">
                商品清单
            </view>
            <view class="goods info" v-for="(item, index) in order.items" :key="index">
                <view class="goods-item">
                    <view class="item-left">
                        <image :src="item.item_meta.image"></image>
                    </view>
                    <view class="item-right">
                        <view class="goods-name item">
                            <view class="name">
                                {{item.item_name}}
                            </view>
                            <view>
                                {{item.quantity}}件
                            </view>
                        </view>
                        <view class="goods-money item">
                            <view>
                                {{item.item_meta.specs_text}}
                            </view>
                            <view>
                                ￥{{item.total / 100}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>



            <view class="order-item" v-if="order.balance_paid == 0">
                <view class="title mx-1px-bottom">
                    余额
                </view>
                <view class="balance info" v-if="balance">
                    <view class="num">
                        <span>￥</span>
                        <input type="digit" @input="modifyBalance" :value="inputBalance" :placeholder="'可使用' + paybalance.balance / 100 + '元'"></input>

                        <i class="iconfont icon-delete" v-if="inputBalance" @tap="cancel"></i>
                    </view>
                    <view class="text" @tap="useAll">
                        全部使用
                    </view>
                </view>
                <view class="no-balance" v-else>
                    您暂无可用余额
                </view>
            </view>

            <view class="pay-balance" v-else>
                您已使用余额支付{{order.balance_paid / 100}}元
            </view>

            <view class="order-item" v-if="paybalance.balance != (inputBalance * 100) || paybalance.balance == 0">
                <view class="title mx-1px-bottom">
                    支付方式
                </view>
                <view class="type info">
                    <radio-group class="radio-group">
                        <label class="radio">
                            <radio checked="true" color="red"></radio>
                           <!-- #ifdef H5 -->
                           <text v-if="env.isWechat">微信支付</text>
                           <text v-else>支付宝支付</text>
                           <!-- #endif -->
						   <!-- #ifdef APP-PLUS || MP-WEIXIN -->
						   <text>微信支付</text>
						   <!-- #endif -->
                        </label>
                    </radio-group>

                </view>
            </view>

            <view class="order-info">
                <view v-if="order.balance_paid == 0">
                    <view class="item">
                        <view class="left">
                            余额支付
                        </view>
                        <view class="num">
                            ￥{{inputBalance || 0}}
                        </view>
                    </view>
                    <view class="item">
                        <!-- #ifdef H5 -->
                        <view class="left" v-if="env.isWechat">
                            微信支付
                        </view>
                        <view class="left" v-else>
                            支付宝支付
                        </view>  
                        <!-- #endif -->
						<!-- #ifdef APP-PLUS || MP-WEIXIN -->
						<view class="left">
						    微信支付
						</view>
						<!-- #endif -->
                        <view class="num">
                            ￥{{countMoney || order.total / 100}}
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="item">
                        <view class="left" >
                            余额支付
                        </view>
                        <view class="num">
                            ￥{{order.balance_paid / 100}}
                        </view>
                    </view>
                   <!-- #ifdef H5 -->
                   <view class="item">
                       <view class="left" v-if="env.isWechat">
                           微信支付
                       </view>
                   	<view class="left" v-else>
                   	    支付宝支付
                   	</view>
                       <view class="num">
                           ￥{{((order.total - order.balance_paid) / 100)}}
                       </view>
                   </view>
                   <!-- #endif -->
				  <!-- #ifdef APP-PLUS || MP-WEIXIN -->
				  <view class="item">
				      <view class="left">
				          微信支付
				      </view>
				      <view class="num">
				          ￥{{((order.total - order.balance_paid) / 100)}}
				      </view>
				  </view>
				  <!-- #endif -->
                </view>
            </view>
			
		
           <button :style="'background: ' + config.mainColor" form-type="submit" :loading="loading">立即支付</button>
        
		  
        </view>
        <view class="order-over" v-if="order.status != 1 && init">
            <view>
                订单已支付
            </view>
            <view class="over-btn" @tap="jumpOrderDetail">
                查看订单详情
            </view>
        </view>
    </form>
</view>
</template>
<script>
var app = getApp();
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';

export default {
  data() {
    return {
      order: {},
      order_no: '',
      channel: 'wx_lite',
      amount: 0,
      loading: false,
      inputBalance: '',
      balance: '',
      paybalance: {
        balance: 0,
        inputBalance: 0
      },
      countMoney: '',
      config: '',
      report: true,
      formId: '',
      init: false,
	  // #ifdef H5
	  env:{
	  			 isIPad: /ipad/i.test(window.navigator.userAgent),
	  			 isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
	  			 isWechat: /MicroMessenger/i.test(window.navigator.userAgent)
	  }
	  // #endif
    };
  },

  onShow() {
    this.queryUserSum();
  },

  onLoad(e) {
    // 第三方平台配置颜色
    var gbConfig = this.$cookieStorage.get('globalConfig') || '';
    this.setData({
      config: gbConfig
    });
    this.setData({
      order_no: e.order_no,
      loading: false
    });
	
  },
  methods: {
    jumpOrderDetail() {
      wx.redirectTo({
        url: `/pages/order/detail/detail?no=${this.order_no}`
      });
    },

    modifyBalance(e) {
      var val = e.detail.value;
      var min = 0;
      var balance = this.paybalanceF(val);
      var max = (balance.balance / 100).toFixed(2);

      if (!val) {
        val = '';
      } else if (/\S*$/.test(val)) {
        val = val.replace(/[^\d\.]|^\./g, '').replace(/\.{2}/g, '.').replace(/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, '$1$2').replace(/^0\d{1}/g, '0');
      }

      if (Number(val) < min) {
        val = min;
      } else if (Number(val) > max) {
        val = max;
      }

      this.setData({
        inputBalance: val
      });
      this.paybalanceF(val);
      this.countMoneyF();
      return val;
    },

    useAll() {
      var balance = this.paybalanceF(this.order.total / 100);
      this.setData({
        inputBalance: (balance.balance / 100).toFixed(2)
      });
      this.countMoneyF();
    },

    cancel() {
      this.setData({
        inputBalance: '',
        channel: 'wx_lite'
      });
      this.countMoneyF();
    },

    paybalanceF(val) {
      var total = this.order.total;
      var balance = Math.min(this.balance, total);
      var inputBalance = val;
      /*if ((inputBalance * 100) == balance && balance != 0) {
      	this.setData({
      		channel: 'balance'
      	})
      } else {
      	this.setData({
      		channel: 'wx_lite'
      	})
      }*/

      var data = {
        balance,
        inputBalance
      };
      this.setData({
        paybalance: data
      });
      return data;
    },

    queryOrderDetail(order_no) {
      var oauth = this.$cookieStorage.get('user_token');
      this.$http.get({
        api: `api/order/${order_no}`,
        header: {
          Authorization: oauth
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.$cookieStorage.set('service_retreat', res.data);
            this.setData({
              order: res.data,
              init: true
            });
            this.paybalanceF(0);
          } else {
            wx.showModal({
              content: res.message || '获取订单数据失败',
              showCancel: false
            });
          }

          wx.hideLoading();
        } else {
          wx.showModal({
            content: '获取订单数据失败',
            showCancel: false
          });
          wx.hideLoading();
        }
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: '获取订单数据失败',
          showCancel: false
        });
      });
    },

    // 新版支付
    newcharge(success, charge) {
      if (success) {
        var that = this;

        if (charge.pay_scene == 'test') {
          wx.showModal({
            content: '不支持模拟支付',
            showCancel: false
          });
          this.setData({
            loading: false
          });
        } else {
          wx.requestPayment({
            "timeStamp": charge.credential.wechat.timeStamp,
            "nonceStr": charge.credential.wechat.nonceStr,
            "package": charge.credential.wechat.package,
            "signType": charge.credential.wechat.signType,
            "paySign": charge.credential.wechat.paySign,
            success: res => {
              if (res.errMsg == 'requestPayment:ok') {
                this.setData({
                  loading: false
                });
                wx.redirectTo({
                  url: `/pages/store/success/success?order_no=${that.order_no}&amount=${that.amount}&channel=${that.channel}&formId=${this.formId}`
                });
              } else {
                wx.showModal({
                  content: '调用支付失败！',
                  showCancel: false
                });
              }
            },
            fail: err => {
              this.setData({
                loading: false
              });

              if (err.errMsg == 'requestPayment:fail cancel') {
                wx.redirectTo({
                  url: `/pages/order/detail/detail?no=${that.order_no}`
                });
              } else {
                wx.showModal({
                  content: '调用支付失败！',
                  showCancel: false
                });
              }
            }
          });
        }
      } else {
        this.setData({
          loading: false
        });
        wx.showModal({
          content: charge || '请求支付失败，请重试！',
          showCancel: false
        });
      }
    },
	//app支付
	appPayment(success,orderInfo) {
		var that = this;
	  if (success) {
		  // 获取服务供应商
		  uni.getProvider({
		  	service:'payment',
		  	success:ret=>{
				uni.requestPayment({
				   provider:'wxpay',
				   orderInfo:orderInfo,
				   success: res => {
				     if (res.errMsg == 'requestPayment:ok') {
				       this.setData({
				         loading: false
				       });
				       wx.redirectTo({
				         url: `/pages/store/success/success?order_no=${that.order_no}&amount=${that.amount}&channel=${that.channel}&formId=${this.formId}`
				       });
				     } else {
				       wx.showModal({
				         content: '调用支付失败！',
				         showCancel: false
				       });
				     }
				   },
				   fail: err => {
				     this.setData({
				       loading: false
				     });
					
				     if (err.errMsg == 'requestPayment:fail:[payment微信:-2]User canceled') {
				       wx.redirectTo({
				         url: `/pages/order/detail/detail?no=${that.order_no}`
				       });
				     } else {
				       wx.showModal({
				         content: '调用支付失败！',
				         showCancel: false
				       });
				     }
				   }
				 });
		  		
		  	}
		  	
		  })
	   
	  } else {
	    this.setData({
	      loading: false
	    });
	    wx.showModal({
	      content: charge || '请求支付失败，请重试！',
	      showCancel: false
	    });
	  }
	},
    // 纯余额支付
    balanceCharge() {
      this.setData({
        loading: false
      });
      wx.redirectTo({
        url: `/pages/store/success/success?order_no=${this.order_no}&amount=${this.amount}&channel=${this.channel}&formId=${this.formId}`
      });
    },

    // 查询用户余额信息
    queryUserSum() {
      var oauth = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      this.$http.get({
        api: 'api/users/balance/sum',
        header: {
          Authorization: oauth
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              balance: res.data.sum
            });
            this.queryOrderDetail(this.order_no);
          } else {
            wx.hideLoading();
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.hideLoading();
          wx.showModal({
            content: '请求失败',
            showCancel: false
          });
        }
      });
    },

    getOpenid() {
      return new Promise((resolve, reject) => {
        wx.login({
          success: res => {
            this.$http.get({
              api: `api/oauth/miniprogram/openid`,
              data: {
                code: res.code
              }
            }).then(res => {
              res = res.data;
              resolve(res.data.openid);
            }).catch(() => {
              reject('获取openid失败');
            });
          },
          fail: () => {
            wx.showModal({
              content: "接口请求失败",
              showCancel: false
            });
          }
        });
      });
    },


 // #ifdef MP-WEIXIN
	formSubmit(e) {
	  if (this.loading) return;
	  this.setData({
	    loading: true
	  });
	  var oauth = this.$cookieStorage.get('user_token');
	  this.getOpenid().then(res => {
	    var data = {
	      channel: this.channel,
	      openid: res,
	      order_no: this.order_no,
	      balance: Number(this.inputBalance)
	    };
	
	    if (this.$cookieStorage.get('agent_code')) {
	      data.agent_code = this.$cookieStorage.get('agent_code');
	    }
	
	    this.$http.post({
	      api: `api/shopping/order/charge`,
	      data: data,
	      header: {
	        Authorization: oauth
	      }
	    }).then(res => {
	      res = res.data;
	      if (res.status) {
	        this.formId =  e.detail.formId || '';
	       if (res.data.name == 'balance') {
	          this.balanceCharge();
	        } else {
	          this.newcharge(true, res.data.charge);
			 
	        }
	      } else {
	        this.newcharge(false, res.message);
			
	      }
	    })
	  }).catch(() => {
	    this.setData({
	      loading: false
	    });
	    wx.showModal({
	      content: '支付失败',
	      showCancel: false
	    });
	  });
	},
	// #endif
    

	//h5支付
	// #ifdef H5
	formSubmit(e) {
		  if (this.loading) return;
		  this.setData({
		    loading: true
		  });
		  let env = {
		  			 isIPad: /ipad/i.test(window.navigator.userAgent),
		  			 isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
		  			 isWechat: /MicroMessenger/i.test(window.navigator.userAgent)
		  }
		  
		  if(this.channel=='wx_lite'){
			 if(env.isWechat){
				  this.channel='wx_pub';
			 } else{
				 this.channel='alipay_wap';
			 }
		  }
		 
		   var oauth = this.$cookieStorage.get('user_token');
		  if(env.isWechat){
			   var openid = this.$cookieStorage.get('openid');
		  } else{
			   var openid = '';
		  }
		   let origin = window.location.origin;
		   let pathname = window.location.pathname;
		   var url = origin+'/pages/store/success/success?order_no='+this.order_no;
		   var fail_url = origin+'/pages/order/detail/detail?no='+this.order_no;
		    var data = {
		      channel: this.channel,
		      order_no: this.order_no,
		      balance: Number(this.inputBalance),
			  extra:{
				  openid:openid,
				  successUrl:url,
				  failUrl:fail_url
			  }
		    };
			this.$http.post({
				api:'api/shopping/order/charge',
				data:data,
				header:{
					Authorization: oauth
				}
			}).then(res=>{
				res = res.data;
				if(res.status){
					if(res.data.redirect_url){
					var redirect_url = res.data.redirect_url
					window.location.href=redirect_url;	
					}
				}else{
					wx.showModal({
					  content: res.message||'支付失败',
					  showCancel: false
					});
					
				}
			}).catch(rej=>{
				this.setData({
				  loading: false
				});
				wx.showModal({
				  content: rej.message||'支付失败',
				  showCancel: false
				});
			})
			
		},
	// #endif
	
	// app支付
	// #ifdef APP-PLUS
	formSubmit(e) {
	  if (this.loading) return;
	  this.setData({
	    loading: true
	  });
		
	  if(this.channel=='wx_lite'){
	  	this.channel='wx_app';
	  }
	  var oauth = this.$cookieStorage.get('user_token');
	    var data = {
	      channel: this.channel,
	      order_no: this.order_no,
	      balance: Number(this.inputBalance)
	    };
	
	    if (this.$cookieStorage.get('agent_code')) {
	      data.agent_code = this.$cookieStorage.get('agent_code');
	    }
	
	    this.$http.post({
	      api: `api/shopping/order/charge`,
	      data: data,
	      header: {
	        Authorization: oauth
	      }
	    }).then(res => {
	      res = res.data;
	      if (res.status) {
			 
	       this.formId =  e.detail.formId || '';
	       if (res.data.name == 'balance') {  
	          this.balanceCharge();
	        } else{
				this.appPayment(true,JSON.stringify(res.data))
			}
			
	      } else{
			 this.appPayment(false,res.message)
		  }
	    }).catch(rej=>{
			this.setData({
			  loading: false
			});
			wx.showModal({
			  content: rej.message||'支付失败',
			  showCancel: false
			});
		})
	},
	// #endif

    countMoneyF() {
      this.setData({
        countMoney: (this.order.total / 100 - this.inputBalance).toFixed(2)
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "payment";
</style>