pay.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="">
  3. <u-navbar
  4. title="收银台"
  5. @leftClick="leftClick"
  6. :autoBack="true"
  7. :safeAreaInsetTop="true"
  8. >
  9. </u-navbar>
  10. <view class="page-wrap">
  11. <view class="pay-way page-wrap">
  12. <u-radio-group v-model="params.paymentMode" placement="column" @change="groupChange">
  13. <view class="pay-way-item u-flex u-row-between">
  14. <view class="left">微信支付</view>
  15. <u-radio :name="1" activeColor="#00A447" size="36rpx"></u-radio>
  16. </view>
  17. <view :class="{disabled:customBalance<params.payAmount}" class="pay-way-item u-flex u-row-between">
  18. <view class="left">旭烁余额支付(¥ {{customBalance}})</view>
  19. <u-radio :name="2" :disabled="customBalance<params.payAmount" activeColor="#00A447" size="36rpx"></u-radio>
  20. </view>
  21. </u-radio-group>
  22. </view>
  23. <view class="full-btn" @click="gotoPay">去支付<text>¥ {{params.payAmount}}</text></view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. customBalance:'',
  32. params:{
  33. paymentMode:'',
  34. orderId:'',
  35. openid:'',
  36. payAmount:'',
  37. }
  38. }
  39. },
  40. onShow() {
  41. this.getMemberInfo();
  42. },
  43. onLoad(page) {
  44. this.params.orderId = page.orderId;
  45. this.params.openid = this.vuex_wechatOpenid;
  46. this.params.payAmount = page.payAmount;
  47. this.params.paymentMode = page.paymentMode || 1;
  48. },
  49. methods: {
  50. leftClick(){
  51. },
  52. getMemberInfo(){
  53. this.$u.api.memberInfo({id:this.vuex_user_info.userid}).then(res=>{
  54. this.customBalance= res.data.balance;
  55. }).catch(err=>{
  56. console.log('memberInfo',err.data);
  57. })
  58. },
  59. gotoPay(){
  60. console.log('gotoPay',this.params);
  61. this.$u.api.gotoPay(this.params).then(res=>{
  62. if(this.params.paymentMode==1){
  63. this.wxPay()
  64. }
  65. console.log('res',res.data);
  66. }).catch(err=>{
  67. console.log('gotoPay',err);
  68. })
  69. },
  70. wxPay(){
  71. uni.requestPayment({
  72. "provider": "wxpay",
  73. "orderInfo": {
  74. "appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId,注意和微信小程序、公众号 AppId 可能不一致
  75. "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
  76. "package": "Sign=WXPay", // 固定值
  77. "partnerid": "148*****52", // 微信支付商户号
  78. "prepayid": "wx202254********************fbe90000", // 统一下单订单号
  79. "timestamp": 1597935292, // 时间戳(单位:秒)
  80. "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名,这里用的 MD5/RSA 签名
  81. },
  82. success(res) {},
  83. fail(e) {}
  84. })
  85. },
  86. groupChange(e){
  87. console.log('groupChange',e);
  88. }
  89. }
  90. }
  91. </script>
  92. <style>
  93. page{
  94. background-color: #F5F5F5;
  95. }
  96. </style>
  97. <style lang="scss" scoped>
  98. .pay-way{
  99. background-color: #fff;
  100. border-radius: 8rpx;
  101. .pay-way-item {
  102. padding: 30rpx;
  103. &:not(:last-child){
  104. border-bottom: 0.5px solid #eee;
  105. }
  106. &.disabled{
  107. .left{
  108. color: #D8D8D8;
  109. }
  110. }
  111. }
  112. .left{
  113. font-size: 30rpx;
  114. font-weight: 500;
  115. color: #333333;
  116. line-height: 42rpx;
  117. }
  118. }
  119. .full-btn{
  120. margin-top: 100rpx;
  121. }
  122. </style>