|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <view class="whole">
|
|
|
+ <view class="pay">
|
|
|
+ <view class="header">
|
|
|
+ <div>
|
|
|
+ <view class="pay">支付金额</view>
|
|
|
+ <view class="payNum">
|
|
|
+ <span style="font-size: 34rpx;">￥</span>{{price}}
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <view class="listPay">
|
|
|
+ <uni-icons type="weixin" size="60rpx" color="#00aa00"></uni-icons>
|
|
|
+ <view class="text">
|
|
|
+ <view class="wx">微信支付</view>
|
|
|
+ <view class="subWx">推荐使用微信支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="1" :checked="boolWx"
|
|
|
+ color="#FFCC33" style="transform:scale(0.7)"
|
|
|
+ @click="changePayType(1)" />
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+<!-- <view class="listPay">
|
|
|
+ <uni-icons type="weibo" size="60rpx" color="#ff5500"></uni-icons>
|
|
|
+ <view class="text">
|
|
|
+ <view class="wx">线下支付(到付)</view>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="2" :checked="boolWb"
|
|
|
+ color="#FFCC33" style="transform:scale(0.7)"
|
|
|
+ @click="changePayType(3)" />
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>-->
|
|
|
+ <view class="bootom">
|
|
|
+ <button type="warn" style="color: #fff;" @click="confirm">确认支付</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ boolWx: true,
|
|
|
+ boolWb: false,
|
|
|
+ payType: 1, //支付类型
|
|
|
+ price: 0, //支付金额
|
|
|
+ orderNo: "", //订单号
|
|
|
+ parentOrderNo: "", //父订单号
|
|
|
+ submiting: false//控制再次确认支付的弹出框
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ //接受参数
|
|
|
+ let orderInfo = options.params;
|
|
|
+ if( orderInfo ){
|
|
|
+ //解密参数
|
|
|
+ orderInfo = decodeURIComponent(orderInfo);
|
|
|
+ //转成js数组对象
|
|
|
+ orderInfo = JSON.parse(orderInfo);
|
|
|
+ }
|
|
|
+ this.price = orderInfo.pay_total
|
|
|
+ if (orderInfo.order_id) {
|
|
|
+ this.orderNo = orderInfo.order_id
|
|
|
+ } else {
|
|
|
+ this.parentOrderNo = orderInfo.snowflake_id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择支付方式
|
|
|
+ changePayType(type) {
|
|
|
+ if(1==type){
|
|
|
+ this.boolWx=true;
|
|
|
+ this.boolWb=false;
|
|
|
+ }else{
|
|
|
+ this.boolWx=false;
|
|
|
+ this.boolWb=true;
|
|
|
+ }
|
|
|
+ this.payType = type
|
|
|
+ console.log(this.payType,"this.payType");
|
|
|
+ },
|
|
|
+ // 确认支付
|
|
|
+ confirm() {
|
|
|
+ const that = this;
|
|
|
+ //微信支付
|
|
|
+ if(1===that.payType){
|
|
|
+ that.submiting = true;
|
|
|
+ this.pay();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //调起微信支付
|
|
|
+ pay(){
|
|
|
+ uni.login({
|
|
|
+ provider: 'weixin',
|
|
|
+ success: (loginRes) => {
|
|
|
+ // 登录成功，获取用户code
|
|
|
+ const { code } = loginRes;
|
|
|
+ // 微信支付下单
|
|
|
+ this.$http.request('api/wechat_pay/pay',{code:code,order_id:this.orderNo},'post').then((e)=>{
|
|
|
+ const price = this.price
|
|
|
+ // 成功的话
|
|
|
+ if( e.code == 'success'){
|
|
|
+ //获取openid
|
|
|
+ // 授权成功以后，调用登录
|
|
|
+ //调用微信官方支付接口弹出付款界面,输入密码扣款
|
|
|
+ wx.requestPayment({
|
|
|
+ timeStamp: e.data.timeStamp, //时间戳
|
|
|
+ nonceStr: e.data.nonceStr, //随机字符串
|
|
|
+ package: e.data.package, //prepay_id
|
|
|
+ signType: e.data.signType, //签名算法MD5
|
|
|
+ paySign: e.data.paySign, //签名
|
|
|
+ success:function (res) {
|
|
|
+ if (res.errMsg == "requestPayment:ok"){
|
|
|
+ console.log('支付成功3', price)
|
|
|
+ uni.navigateTo({url:`/pages/orders/completion?price=${price}`});
|
|
|
+ }else{
|
|
|
+ console.log('支付失败')
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail:function (res) {
|
|
|
+ console.log('支付失败', res)
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log('支付失败2', e)
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log('uni.login 接口调用失败，无法获取openid', err);
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.whole {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 300rpx;
|
|
|
+
|
|
|
+ .pay {
|
|
|
+ width: 100%;
|
|
|
+ color: #717171;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payNum {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 44rpx;
|
|
|
+ margin: 10rpx 0px 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .listPay {
|
|
|
+ height: 130rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .uni-icons {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 40%;
|
|
|
+ margin: 0px 20rpx 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 40%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bootom {
|
|
|
+ width: 90%;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
