feat: 增加支付宝支付

yudao-ui-admin/.env.dev

@@ -5,8 +5,8 @@ ENV = 'development'
 VUE_APP_TITLE = 创盈商户管理系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'https://cmx.bskies.cc:8000/admin-api'
+#VUE_APP_BASE_API = 'https://cmx.bskies.cc:8000/admin-api'
-#VUE_APP_BASE_API = 'http://192.168.1.147:48080'
+VUE_APP_BASE_API = 'http://192.168.1.147:48080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

yudao-ui-app/components/paymentMember/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <view>
+    <view class="payment" :class="pay_close ? 'on' : ''">
+      <view class="title acea-row row-center-wrapper">
+        选择付款方式<text class="iconfont icon-guanbi" @click='close'></text>
+      </view>
+      <view class="item acea-row row-between-wrapper" @click='goPay(item.value)' v-for="(item,index) in payMode"
+        :key="index">
+        <view class="left acea-row row-between-wrapper">
+          <view class="iconfont" :class="item.icon"></view>
+          <view class="text">
+            <view class="name">{{item.name}}</view>
+            <view class="info" v-if="item.number">
+              {{item.title}} <span class="money">￥{{ item.number }}</span>
+            </view>
+            <view class="info" v-else>{{item.title}}</view>
+          </view>
+        </view>
+        <view class="iconfont icon-xiangyou"></view>
+      </view>
+    </view>
+    <view class="mask" @click='close' v-if="pay_close"></view>
+    <!-- 支付宝支付界面 -->
+    <u-modal :show="alipayShow" title="支付宝支付">
+      <view class="slot-content">
+        <rich-text :nodes="alipayForm"></rich-text>
+      </view>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+  import {
+    orderPay,
+    wechatOrderPay,
+    wechatQueryPayResult
+  } from '@/api/order.js';
+  import {
+    memberTopUp
+  } from '@/api/member.js';
+  import {
+    mapGetters
+  } from "vuex";
+  export default {
+    props: {
+      payMode: {
+        type: Array,
+        default: function() {
+          return [];
+        }
+      },
+      pay_close: {
+        type: Boolean,
+        default: false,
+      },
+      payInfo: {
+        type: Object,
+        deafult: () => {
+          return {
+            orderInfos: []
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        alipayShow: false,
+        alipayForm: ''
+      };
+    },
+    computed: mapGetters(['systemPlatform']),
+    methods: {
+      close: function() {
+        this.$emit('onChangeFun', {
+          action: 'payClose'
+        });
+      },
+      goPay: function(paytype) {
+        let that = this;
+        if (that.payInfo.orderInfos.length === 0) return that.$util.Tips({
+          title: '请选择要支付的订单'
+        });
+        uni.showLoading({
+          title: '支付中'
+        });
+        memberTopUp({
+          ...that.payInfo,
+          payType: paytype
+        }).then(res => {
+          let jsConfig = res.data
+          switch (paytype) {
+            case 'WXPAY':
+              uni.hideLoading();
+              location.replace(jsConfig.h5Url + '&redirect_url=' + window.location.protocol +
+                '//' + window.location.host + goPages + '&status=1');
+              return that.$util.Tips({
+                title: "支付中",
+                icon: 'success'
+              }, () => {
+                that.$emit('onChangeFun', {
+                  action: 'pay_complete'
+                });
+              });
+              break;
+            case 'ALIPAY':
+              uni.hideLoading();
+              const div = document.createElement('div')
+              /* 下面的data.content就是后台返回接收到的数据 */
+              div.innerHTML = jsConfig.body
+              document.body.appendChild(div)
+              document.forms[0].submit()
+              break;
+            case 'weixinh5':
+              uni.hideLoading();
+              location.replace(jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol +
+                '//' + window.location.host + goPages + '&status=1');
+              return that.$util.Tips({
+                title: "支付中",
+                icon: 'success'
+              }, () => {
+                that.$emit('onChangeFun', {
+                  action: 'pay_complete'
+                });
+              });
+              break;
+          }
+        }).catch(err => {
+          uni.hideLoading();
+          return that.$util.Tips({
+            title: err
+          }, () => {
+            that.$emit('onChangeFun', {
+              action: 'pay_fail'
+            });
+          });
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .payment {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-radius: 16rpx 16rpx 0 0;
+    background-color: #fff;
+    padding-bottom: 100rpx;
+    z-index: 99;
+    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  .payment.on {
+    transform: translate3d(0, 0, 0);
+  }
+
+  .payment .title {
+    text-align: center;
+    height: 123rpx;
+    font-size: 32rpx;
+    color: #282828;
+    font-weight: bold;
+    padding-right: 30rpx;
+    margin-left: 30rpx;
+    position: relative;
+    border-bottom: 1rpx solid #eee;
+  }
+
+  .payment .title .iconfont {
+    position: absolute;
+    right: 30rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 43rpx;
+    color: #8a8a8a;
+    font-weight: normal;
+  }
+
+  .payment .item {
+    border-bottom: 1rpx solid #eee;
+    height: 130rpx;
+    margin-left: 30rpx;
+    padding-right: 30rpx;
+  }
+
+  .payment .item .left {
+    width: 610rpx;
+  }
+
+  .payment .item .left .text {
+    width: 540rpx;
+  }
+
+  .payment .item .left .text .name {
+    font-size: 32rpx;
+    color: #282828;
+  }
+
+  .payment .item .left .text .info {
+    font-size: 24rpx;
+    color: #999;
+  }
+
+  .payment .item .left .text .info .money {
+    color: #ff9900;
+  }
+
+  .payment .item .left .iconfont {
+    font-size: 45rpx;
+    color: #09bb07;
+  }
+
+  .payment .item .left .iconfont.icon-zhifubao {
+    color: #00aaea;
+  }
+
+  .payment .item .left .iconfont.icon-yuezhifu {
+    color: #ff9900;
+  }
+
+  .payment .item .left .iconfont.icon-yuezhifu1 {
+    color: #eb6623;
+  }
+
+  .payment .item .iconfont {
+    font-size: 0.3rpx;
+    color: #999;
+  }
+</style>

yudao-ui-app/pages/member_application/index.vue

@@ -29,7 +29,7 @@
         </text>
       </view>
     </view>
-    <payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
+    <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
     <button class="box-submit" @click="goPay">立即充值</button>
   </view>
 </template>
@@ -38,11 +38,11 @@
   import {
   	memberGradeInfo
   } from '@/api/member.js';
-  import payment from '@/components/payment';
+  import paymentMember from '@/components/paymentMember';
   export default {
     name: "member_application",
     components: {
-    	payment
+    	paymentMember
     },
     data() {
       return {
@@ -58,20 +58,22 @@
         form: {
           phone:''
         },
-        pay_order_id: '123123',
+        payInfo:{
-        totalPrice: '123',
+          userPhone: '',
+          confirmPhone: '',
+          orderInfos: []
+        },
         payMode: [{
         		name: "微信支付",
         		icon: "icon-weixinzhifu",
-        		value: 'weixin',
+        		value: 'WXPAY',
         		title: '微信快捷支付'
         	},
         	{
-        		name: "余额支付",
+        		name: "支付宝",
-        		icon: "icon-yuezhifu",
+        		icon: "icon-zhifubao",
-        		value: 'yue',
+        		value: 'ALIPAY',
-        		title: '可用余额:',
+        		title: '支付宝快捷支付'
-        		number: 0
         	}
         ],
         pay_close: false,
@@ -107,12 +109,20 @@
       * 打开支付组件
       *
       */
-     goPay(pay_price, order_id) {
+     goPay() {
      	this.$set(this, 'pay_close', true);
-     	this.$set(this, 'pay_order_id', '4646');
+      this.payInfo = {
-     	this.$set(this, 'totalPrice', '4646');
+        userPhone: '15760696662',
+        confirmPhone: '15760696662',
+        orderInfos: [{
+          gearId: '1',
+          name: '套餐1',
+          gearRemarks: '备注1',
+          gearAmount: 0.01
+        }]
+      }
      },
-     /** 
+     /**
       * 事件回调
       *
       */