index.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <div>
  2. <div :class="{ mask: !payment }" @touchmove.prevent></div>
  3. <div :class="{ on: !payment }" class="dialog-payment">
  4. <div class="dialog-hd">
  5. <button @click="onClose"></button>
  6. <div class="title">支付方式</div>
  7. </div>
  8. <div class="dialog-bd">
  9. <label v-if="isWechat || wxpayH5" class="item">
  10. <div class="item-hd icon1"></div>
  11. <div class="item-bd">
  12. <div>微信支付</div>
  13. <div></div>
  14. </div>
  15. <div class="item-ft">
  16. <input v-model="payType" type="radio" name="pay" value="weixin">
  17. <span class="tick"></span>
  18. </div>
  19. </label>
  20. <label v-if="isAlipay" class="item">
  21. <div class="item-hd icon2"></div>
  22. <div class="item-bd">
  23. <div>支付宝支付</div>
  24. </div>
  25. <div class="item-ft">
  26. <input v-model="payType" type="radio" name="pay" value="zhifubao">
  27. <span class="tick"></span>
  28. </div>
  29. </label>
  30. <label v-if="isBalance" class="item">
  31. <div class="item-hd icon3"></div>
  32. <div class="item-bd">
  33. <div>余额支付</div>
  34. <div class="prompt"><span>可用余额:</span><span>¥{{ now_money }}</span></div>
  35. </div>
  36. <div class="item-ft">
  37. <input v-model="payType" type="radio" name="pay" value="yue">
  38. <span class="tick"></span>
  39. </div>
  40. </label>
  41. </div>
  42. <div class="dialog-ft">
  43. <div class="total"><span>支付:</span><span class="money">¥{{ money }}</span></div>
  44. <wx-open-subscribe
  45. v-if="isWechat && templateId"
  46. :template="templateId"
  47. @success="onSuccess"
  48. @error="onError"
  49. >
  50. <script type="text/wxtag-template" slot="style">
  51. <style>
  52. button {
  53. display: block;
  54. width: 100%;
  55. height: 40px;
  56. border-radius: 20px;
  57. border: none;
  58. background-color: #191C6E;
  59. font-family: inherit;
  60. font-weight: normal;
  61. font-size: 14px;
  62. color: #fff;
  63. }
  64. </style>
  65. </script>
  66. <script type="text/wxtag-template">
  67. <button>立即支付</button>
  68. </script>
  69. </wx-open-subscribe>
  70. <button v-else :disabled="!isWechat && !isAlipay && !isBalance && !wxpayH5" @click="onPay">立即支付</button>
  71. </div>
  72. </div>
  73. </div>