recharge.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <view class="content">
  3. <view class="row-box">
  4. <view class="title">充值金额</view>
  5. <view class="row">
  6. <text class="tit"></text>
  7. <input class="input" type="number" v-model="money" placeholder="请输入充值金额" placeholder-class="placeholder" />
  8. </view>
  9. </view>
  10. <view class="list">
  11. <radio-group @change="tabRadio">
  12. <!-- #ifdef APP-PLUS -->
  13. <label>
  14. <view class="box">
  15. <view class="icon iconfont iconzhifubao"></view>
  16. <view class="title-box">
  17. <view class="title"><text>支付宝充值</text></view>
  18. </view>
  19. <view class="right"><radio value="alipay" color="#5dbc7c" :checked="type == 'alipay'" /></view>
  20. </view>
  21. </label>
  22. <label>
  23. <view class="box">
  24. <view class="icon iconfont iconweixin1"></view>
  25. <view class="title-box">
  26. <view class="title"><text>微信充值</text></view>
  27. <view class="node"><text>真实姓名(代勇明)</text></view>
  28. </view>
  29. <view class="right"><radio value="weixin" color=" #5dbc7c" :checked="type == 'weixin'" /></view>
  30. </view>
  31. </label>
  32. <!-- #endif -->
  33. </radio-group>
  34. </view>
  35. <button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">确认充值</button>
  36. </view>
  37. </template>
  38. <script>
  39. import { getMoneyStyle } from '@/utils/rocessor.js';
  40. // #ifdef H5
  41. import { rechargeWechat } from '@/api/wallet.js';
  42. // #endif
  43. // #ifdef MP
  44. import { rechargeRoutine } from '@/api/wallet.js';
  45. // #endif
  46. import { mapState } from 'vuex';
  47. export default {
  48. filters: {
  49. getMoneyStyle
  50. },
  51. data() {
  52. return {
  53. type: 'weixin',
  54. money: '', //充值金额
  55. payLoding: false //是否加载中
  56. };
  57. },
  58. onLoad(options) {},
  59. computed: {
  60. // #ifdef H5
  61. ...mapState(['weichatObj'])
  62. // #endif
  63. },
  64. methods: {
  65. // 跳转
  66. navTo(url) {
  67. uni.navigateTo({
  68. url: url
  69. });
  70. },
  71. // 切换选中对象
  72. tabRadio(e) {
  73. this.type = e;
  74. },
  75. // 提交
  76. confirm() {
  77. let obj = this;
  78. obj.payLoding = true;
  79. // #ifdef H5
  80. rechargeWechat({ price: this.money, from: this.type })
  81. .then(e => {
  82. let da = e.data.data;
  83. obj.weichatObj.chooseWXPay({
  84. timestamp: da.timestamp,
  85. nonceStr: da.nonceStr,
  86. package: da.package,
  87. signType: da.signType,
  88. paySign: da.paySign,
  89. success: function(res) {
  90. uni.showToast({
  91. title: '充值成功',
  92. duration: 2000,
  93. position: 'top'
  94. });
  95. }
  96. });
  97. obj.payLoding = false;
  98. })
  99. .catch(e => {
  100. obj.payLoding = false;
  101. console.log(e);
  102. });
  103. // #endif
  104. // #ifdef MP
  105. rechargeRoutine({ price: this.money})
  106. .then(e => {
  107. let da = e.data;
  108. wx.requestPayment({
  109. timeStamp: da.timestamp,
  110. nonceStr: da.nonceStr,
  111. package: da.package,
  112. signType: da.signType,
  113. paySign: da.paySign,
  114. success: function(res) {
  115. uni.redirectTo({
  116. url: '/pages/money/paySuccess'
  117. });
  118. },
  119. })
  120. obj.payLoding = false;
  121. })
  122. .catch(e => {
  123. obj.payLoding = false;
  124. console.log(e);
  125. });
  126. // #endif
  127. },
  128. //获取订单列表
  129. loadData(source) {
  130. console.log(source);
  131. //这里是将订单挂载到tab列表下
  132. let index = this.tabCurrentIndex;
  133. let navItem = this.navList[index];
  134. let state = navItem.state;
  135. if (source === 'tabChange' && navItem.loaded === true) {
  136. //tab切换只有第一次需要加载数据
  137. return;
  138. }
  139. if (navItem.loadingType === 'loading') {
  140. //防止重复加载
  141. return;
  142. }
  143. navItem.loadingType = 'loading';
  144. setTimeout(() => {
  145. let orderList = [];
  146. orderList.forEach(item => {
  147. navItem.orderList.push(item);
  148. });
  149. //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
  150. this.$set(navItem, 'loaded', true);
  151. //判断是否还有数据, 有改为 more, 没有改为noMore
  152. navItem.loadingType = 'more';
  153. }, 600);
  154. }
  155. }
  156. };
  157. </script>
  158. <style lang="scss">
  159. page {
  160. height: 100%;
  161. }
  162. .add-btn {
  163. &.modified {
  164. color: $base-color;
  165. }
  166. &.up {
  167. background-color: $base-color;
  168. color: #fff;
  169. }
  170. display: flex;
  171. align-items: center;
  172. justify-content: center;
  173. width: 690rpx;
  174. height: 80rpx;
  175. margin: 0 auto;
  176. margin-top: 30rpx;
  177. font-size: $font-lg;
  178. border-radius: 10rpx;
  179. // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  180. }
  181. .row-box {
  182. margin-top: 30rpx;
  183. padding: 20rpx 30rpx;
  184. background: #fff;
  185. .title {
  186. font-size: $font-base + 2rpx;
  187. color: $font-color-dark;
  188. }
  189. .row {
  190. display: flex;
  191. align-items: center;
  192. position: relative;
  193. height: 80rpx;
  194. .tit {
  195. flex-shrink: 0;
  196. width: 40rpx;
  197. font-size: 30rpx;
  198. color: $font-color-dark;
  199. }
  200. .input {
  201. flex: 1;
  202. font-size: 30rpx;
  203. color: $font-color-dark;
  204. }
  205. .iconlocation {
  206. font-size: 36rpx;
  207. color: $font-color-light;
  208. }
  209. .buttom {
  210. color: $font-color;
  211. font-size: $font-base;
  212. }
  213. }
  214. }
  215. .list {
  216. padding-left: 30rpx;
  217. margin-top: 30rpx;
  218. background-color: #ffffff;
  219. .box {
  220. display: flex;
  221. align-items: center;
  222. width: 100%;
  223. height: 120rpx;
  224. border-bottom: 1px solid $border-color-light;
  225. .icon {
  226. font-size: 48rpx;
  227. padding-right: 20rpx;
  228. }
  229. .iconweixin1 {
  230. color: #18bf16;
  231. }
  232. .iconzhifubao {
  233. color: #08aaec;
  234. }
  235. .title-box {
  236. flex-grow: 1;
  237. text-align: left;
  238. .title {
  239. font-size: $font-base + 2rpx;
  240. color: $font-color-base;
  241. }
  242. .node {
  243. font-size: $font-sm;
  244. color: $font-color-light;
  245. }
  246. }
  247. }
  248. }
  249. /deep/ .uni-radio-input {
  250. width: 45rpx;
  251. height: 45rpx;
  252. }
  253. .active-bg {
  254. background-color: $color-gray !important;
  255. }
  256. </style>