index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. <template>
  2. <view>
  3. <form @submit="submitSub" :style="colorStyle">
  4. <view class="payment-top acea-row row-column row-center-wrapper">
  5. <span class="name">我的余额</span>
  6. <view class="pic">
  7. <span class="pic-font">{{ userinfo.now_money || 0 }}</span>
  8. </view>
  9. </view>
  10. <view class="payment">
  11. <view class="nav acea-row row-around row-middle">
  12. <view class="item" :class="active==index?'on':''" v-for="(item,index) in navRecharge" :key="index" @click="navRecharges(index)">{{item}}</view>
  13. </view>
  14. <view class='tip picList' v-if='!active' >
  15. <view class="pic-box pic-box-color acea-row row-center-wrapper row-column" :class="activePic == index ? 'pic-box-color-active' : ''"
  16. v-for="(item, index) in picList" :key="index" @click="picCharge(index, item)" v-if="item.price">
  17. <view class="pic-number-pic">
  18. {{ item.price }}<span class="pic-number"></span>
  19. </view>
  20. <view class="pic-number">赠送:{{ item.give_money }}</view>
  21. </view>
  22. <view class="pic-box pic-box-color acea-row row-center-wrapper" :class="activePic == picList.length ? 'pic-box-color-active' : ''"
  23. @click="picCharge(picList.length)">
  24. <input type="digit" placeholder="其他" v-model="money" class="pic-box-money pic-number-pic" :class="activePic == picList.length ? 'pic-box-color-active' : ''" />
  25. </view>
  26. <view class="tips-box">
  27. <view class="tips mt-30">注意事项:</view>
  28. <view class="tips-samll" v-for="item in rechargeAttention" :key="item">
  29. {{ item }}
  30. </view>
  31. </view>
  32. </view>
  33. <view class="tip" v-else>
  34. <view class='input'><text></text><input @input='inputNum' :maxlength="moneyMaxLeng" placeholder="0.00" type='digit' placeholder-class='placeholder' :value="number" name="number"></input></view>
  35. <view class="tips-title">
  36. <view style="font-weight: bold; font-size: 26rpx;">提示:</view>
  37. <view style="margin-top: 10rpx;">当前可转入佣金为 <text class='font-color'>{{userinfo.commissionCount || 0}}</text>,冻结佣金为<text class='font-color'>{{userinfo.broken_commission}}</text></view>
  38. </view>
  39. <view class="tips-box">
  40. <view class="tips mt-30">注意事项:</view>
  41. <view class="tips-samll" v-for="item in rechargeAttention" :key="item">
  42. {{ item }}
  43. </view>
  44. </view>
  45. </view>
  46. <button class='but bg-color' formType="submit" > {{active ? '立即转入': '立即充值' }}</button>
  47. </view>
  48. </form>
  49. <payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @changePayType="changePayType" @onChangeFun="onChangeFun"
  50. :order_id="pay_order_id" :totalPrice="totalPrice"></payment>
  51. <home v-if="navigation"></home>
  52. <view v-show="false" v-html="formContent"></view>
  53. <!-- #ifdef MP -->
  54. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  55. <!-- #endif -->
  56. </view>
  57. </template>
  58. <script>
  59. import {
  60. getUserInfo,
  61. rechargeRoutine,
  62. rechargeRecharge,
  63. rechargeWechat,
  64. getRechargeApi,
  65. memberCardCreate
  66. } from '@/api/user.js';
  67. import payment from '@/components/payment';
  68. import {
  69. toLogin
  70. } from '@/libs/login.js';
  71. import {
  72. orderOfflinePayType
  73. } from '@/api/order.js';
  74. import {
  75. mapGetters
  76. } from "vuex";
  77. import home from '@/components/home';
  78. import colors from "@/mixins/color";
  79. import {
  80. openPaySubscribe
  81. } from '@/utils/SubscribeMessage.js';
  82. export default {
  83. components: {
  84. home,
  85. payment
  86. },
  87. mixins:[colors],
  88. data() {
  89. let that = this;
  90. return {
  91. now_money: 0,
  92. navRecharge: ['账户充值', '佣金转入'],
  93. active: 0,
  94. number: '',
  95. userinfo: {},
  96. placeholder: "0.00",
  97. from: '',
  98. isAuto: false, //没有授权的不会自动授权
  99. isShowAuth: false, //是否隐藏授权
  100. picList: [],
  101. activePic: 0,
  102. money: "",
  103. numberPic:'',
  104. rechar_id:0,
  105. password: '',
  106. goodsList: [],
  107. pay_order_id: '',
  108. payMode: [{
  109. name: '微信支付',
  110. icon: 'icon-weixinzhifu',
  111. value: 'weixin',
  112. title: '微信快捷支付',
  113. payStatus: true
  114. }
  115. // #ifdef H5 ||APP-PLUS
  116. ,
  117. {
  118. name: '支付宝支付',
  119. icon: 'icon-zhifubao',
  120. value: 'alipay',
  121. title: '支付宝支付',
  122. payStatus: true
  123. }
  124. // #endif
  125. ],
  126. pay_close: false,
  127. payType: 'alipay',
  128. totalPrice: '0',
  129. formContent: '',
  130. // #ifdef H5
  131. isWeixin: this.$wechat.isWeixin(),
  132. // #endif
  133. type: '',
  134. rechargeAttention:[],
  135. moneyMaxLeng:8
  136. };
  137. },
  138. computed: mapGetters(['isLogin']),
  139. watch:{
  140. isLogin:{
  141. handler:function(newV,oldV){
  142. if(newV){
  143. this.getOrderPayType();
  144. this.getUserInfo();
  145. this.getRecharge();
  146. }
  147. },
  148. deep:true
  149. }
  150. },
  151. onLoad(options) {
  152. // #ifdef H5
  153. this.from = this.$wechat.isWeixin() ? "weixinh5" : "alipay"
  154. // #endif
  155. if (this.isLogin) {
  156. this.getOrderPayType();
  157. this.getUserInfo();
  158. this.getRecharge();
  159. } else {
  160. toLogin();
  161. }
  162. },
  163. onShow() {
  164. uni.removeStorageSync('form_type_cart');
  165. },
  166. methods: {
  167. onLunch() {
  168. this.getOrderPayType();
  169. this.getUserInfo();
  170. this.getRecharge();
  171. },
  172. inputNum: function(e) {
  173. let val = e.detail.value;
  174. let dot = val.indexOf('.');
  175. if(dot>-1){
  176. this.moneyMaxLeng = dot+3;
  177. }else{
  178. this.moneyMaxLeng = 8
  179. }
  180. },
  181. /**
  182. * 选择金额
  183. */
  184. picCharge(idx, item) {
  185. this.activePic = idx;
  186. if (item === undefined) {
  187. this.rechar_id = 0;
  188. this.numberPic = "";
  189. } else {
  190. this.money = "";
  191. this.rechar_id = item.id;
  192. this.numberPic = item.price;
  193. }
  194. },
  195. /**
  196. * 充值额度选择
  197. */
  198. getRecharge() {
  199. getRechargeApi()
  200. .then(res => {
  201. this.picList = res.data.recharge_quota;
  202. if (this.picList[0]) {
  203. this.rechar_id = this.picList[0].id;
  204. this.numberPic = this.picList[0].price;
  205. }
  206. this.rechargeAttention = res.data.recharge_attention || [];
  207. })
  208. .catch(res => {
  209. this.$util.Tips({
  210. title: res
  211. })
  212. });
  213. },
  214. getOrderPayType() {
  215. orderOfflinePayType().then(res => {
  216. const {
  217. ali_pay_status,
  218. pay_weixin_open
  219. } = res.data;
  220. this.payMode[0].payStatus = !!pay_weixin_open;
  221. // #ifdef APP-PLUS || H5
  222. this.payMode[1].payStatus = !!ali_pay_status;
  223. // #endif
  224. }).catch(err => {
  225. uni.showToast({
  226. title: err,
  227. icon: 'none'
  228. });
  229. });
  230. },
  231. onLoadFun: function() {
  232. this.getOrderPayType();
  233. this.getUserInfo();
  234. this.getRecharge();
  235. this.isShowAuth = false;
  236. },
  237. // 授权关闭
  238. authColse: function(e) {
  239. this.isShowAuth = e
  240. },
  241. navRecharges: function(index) {
  242. this.active = index;
  243. },
  244. /**
  245. * 获取用户信息
  246. */
  247. getUserInfo: function() {
  248. let that = this;
  249. getUserInfo().then(res => {
  250. that.$set(that, 'userinfo', res.data);
  251. })
  252. },
  253. changePayType: function(e) {
  254. // #ifdef H5
  255. this.payType = e == 'alipay' ? 'alipay' : this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
  256. // #endif
  257. // #ifndef H5
  258. this.payType = e == 'alipay' ? 'alipay' : 'routine'
  259. // #endif
  260. console.log('双方各大华股份不报错',this.payType);
  261. },
  262. onChangeFun: function(e) {
  263. let opt = e;
  264. let action = opt.action || null;
  265. let value = opt.value != undefined ? opt.value : null;
  266. action && this[action] && this[action](value);
  267. },
  268. payClose: function() {
  269. this.pay_close = false;
  270. },
  271. payCheck: function(type) {
  272. this.createMemberCard(type);
  273. },
  274. createMemberCard(type) {
  275. uni.showLoading({
  276. title: '正在加载…'
  277. });
  278. // #ifdef MP || APP-PLUS
  279. uni.showLoading({
  280. title: '正在支付',
  281. })
  282. let that = this
  283. let money = parseFloat(this.money);
  284. if( this.rechar_id == 0){
  285. if(Number.isNaN(money)){
  286. return that.$util.Tips({title: '充值金额必须为数字'});
  287. }
  288. if(money <= 0){
  289. return that.$util.Tips({title: '充值金额不能为0'});
  290. }
  291. }else{
  292. // money = this.numberPic
  293. }
  294. rechargeRecharge({
  295. price: parseFloat(this.totalPrice),
  296. type: 0,
  297. rechar_id: this.rechar_id,
  298. from: this.payType === 'alipay' ? 'alipay' : 'routine'
  299. }).then(res => {
  300. uni.hideLoading();
  301. let data = res.data.data;
  302. let mp_pay_name=''
  303. if(uni.requestOrderPayment){
  304. mp_pay_name='requestOrderPayment'
  305. }else{
  306. mp_pay_name='requestPayment'
  307. }
  308. uni[mp_pay_name]({
  309. // #ifdef MP
  310. timeStamp: data.timestamp,
  311. nonceStr: data.nonceStr,
  312. package: data.package,
  313. signType: data.signType,
  314. paySign: data.paySign,
  315. // #endif
  316. // #ifdef APP-PLUS
  317. provider: this.payType==='alipay'?'alipay':'wxpay',
  318. orderInfo: data,
  319. // #endif
  320. success: function(res) {
  321. return that.$util.Tips({
  322. title: '支付成功',
  323. icon: 'success'
  324. }, {
  325. tab: 5,
  326. url: '/pages/users/user_money/index'
  327. });
  328. },
  329. fail: function() {
  330. return that.$util.Tips({
  331. title: '支付失败'
  332. });
  333. },
  334. complete: function(res) {
  335. if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
  336. title: '取消支付'
  337. });
  338. }
  339. })
  340. }).catch(err => {
  341. uni.hideLoading();
  342. return that.$util.Tips({
  343. title: err
  344. })
  345. });
  346. // #endif
  347. // #ifdef H5
  348. let that = this
  349. this.pay_close = true;
  350. this.totalPrice = this.rechar_id == 0 ? this.money : this.numberPic;
  351. if (!this.payType) {
  352. this.changePayType(type);
  353. }
  354. rechargeWechat({
  355. price: parseFloat(this.totalPrice),
  356. // from: this.payType == '' ? this.$wechat.isWeixin() ? 'weixin' :'weixinh5' : this.payType,
  357. from: this.payType,
  358. rechar_id: that.rechar_id
  359. }).then(res => {
  360. let data = res.data;
  361. if (data.type == "weixinh5") {
  362. uni.showToast({
  363. title: data.msg,
  364. success() {
  365. location.href = data.data.mweb_url;
  366. }
  367. });
  368. }else if(data.type == "alipay") {
  369. uni.hideLoading();
  370. uni.hideLoading();
  371. this.formContent = data.data;
  372. this.$nextTick(() => {
  373. document.getElementById('alipaysubmit').submit();
  374. });
  375. }else if(data.type == "weixin") {
  376. this.$wechat.pay(data.data).then(res => {
  377. this.$util.Tips({
  378. title: '支付成功',
  379. icon: 'success'
  380. }, {
  381. tab: 5,
  382. url: '/pages/users/user_money/index'
  383. });
  384. }).catch(err => {
  385. if (err.errMsg == 'chooseWXPay:cancel') {
  386. uni.showToast({
  387. title: '取消支付',
  388. icon: 'none'
  389. });
  390. }
  391. });
  392. }
  393. }).catch(err=>{
  394. uni.hideLoading();
  395. return that.$util.Tips({
  396. title: err
  397. })
  398. })
  399. // #endif
  400. },
  401. /*
  402. * 用户充值
  403. */
  404. submitSub: function(e) {
  405. let that = this
  406. let value = e.detail.value.number;
  407. // 转入余额
  408. if (that.active) {
  409. if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
  410. return that.$util.Tips({
  411. title: '请输入金额'
  412. });
  413. }
  414. uni.showModal({
  415. title: '转入余额',
  416. content: '转入余额后无法再次转出,确认是否转入余额',
  417. success(res) {
  418. if (res.confirm) {
  419. // #ifdef MP || APP-PLUS
  420. rechargeRoutine({
  421. price: parseFloat(value),
  422. type: 1
  423. })
  424. // #endif
  425. // #ifdef H5
  426. rechargeWechat({
  427. price: parseFloat(value),
  428. from: that.from,
  429. type: 1
  430. })
  431. // #endif
  432. .then(res => {
  433. // that.$set(that, 'userinfo.now_money', that.$util.$h.Add(value, that.userinfo.now_money))
  434. return that.$util.Tips({
  435. title: '转入成功',
  436. icon: 'success'
  437. }, {
  438. tab: 5,
  439. url: '/pages/users/user_money/index'
  440. });
  441. }).catch(err => {
  442. return that.$util.Tips({
  443. title: err
  444. })
  445. });
  446. } else if (res.cancel) {
  447. return that.$util.Tips({
  448. title: '已取消'
  449. });
  450. }
  451. },
  452. })
  453. } else {
  454. // #ifdef MP
  455. this.pay_close = true;
  456. // #endif
  457. // #ifndef MP
  458. this.pay_close = true;
  459. // #endif
  460. this.totalPrice = this.rechar_id == 0 ? parseFloat(this.money) : parseFloat(this.numberPic);
  461. }
  462. }
  463. }
  464. }
  465. </script>
  466. <style lang="scss">
  467. page {
  468. width: 100%;
  469. height: 100%;
  470. background-color: #fff;
  471. }
  472. .bgcolor{
  473. background-color: var(--view-theme)
  474. }
  475. .payment {
  476. position: relative;
  477. width: 100%;
  478. background-color: #fff;
  479. border-radius: 10rpx;
  480. padding-top: 25rpx;
  481. border-top-right-radius: 39rpx;
  482. border-top-left-radius: 39rpx;
  483. }
  484. .payment .nav {
  485. height: 75rpx;
  486. line-height: 75rpx;
  487. padding: 0 100rpx;
  488. }
  489. .payment .nav .item {
  490. font-size: 30rpx;
  491. color: #333;
  492. }
  493. .payment .nav .item.on {
  494. font-weight: bold;
  495. border-bottom: 4rpx solid var(--view-theme);
  496. }
  497. .payment .input {
  498. display: flex;
  499. align-items: center;
  500. justify-content: center;
  501. border-bottom: 1px dashed #dddddd;
  502. margin: 60rpx auto 0 auto;
  503. padding-bottom: 20rpx;
  504. font-size: 56rpx;
  505. color: #333333;
  506. flex-wrap: nowrap;
  507. }
  508. .payment .input text {
  509. padding-left: 106rpx;
  510. }
  511. .payment .input input {
  512. padding-right: 106rpx;
  513. width: 300rpx;
  514. height: 94rpx;
  515. text-align: center;
  516. font-size: 70rpx;
  517. }
  518. .payment .placeholder {
  519. color: #d0d0d0;
  520. height: 100%;
  521. line-height: 94rpx;
  522. }
  523. .payment .tip {
  524. font-size: 26rpx;
  525. color: #888888;
  526. padding: 0 30rpx;
  527. margin-top: 25rpx;
  528. }
  529. .payment .but {
  530. color: #fff;
  531. font-size: 30rpx;
  532. width: 700rpx;
  533. height: 86rpx;
  534. border-radius: 50rpx;
  535. margin: 46rpx auto 0 auto;
  536. line-height: 86rpx;
  537. }
  538. .payment-top {
  539. width: 100%;
  540. height: 350rpx;
  541. background-color: var(--view-theme);
  542. .name {
  543. font-size: 26rpx;
  544. color: rgba(255, 255, 255, 0.8);
  545. margin-top: -38rpx;
  546. margin-bottom: 30rpx;
  547. }
  548. .pic {
  549. font-size: 32rpx;
  550. color: #fff;
  551. }
  552. .pic-font {
  553. font-size: 78rpx;
  554. color: #fff;
  555. }
  556. }
  557. .picList {
  558. display: flex;
  559. flex-wrap: wrap;
  560. margin: 30rpx 0;
  561. .pic-box {
  562. width: 32%;
  563. height: auto;
  564. border-radius: 20rpx;
  565. margin-top: 21rpx;
  566. padding: 20rpx 0;
  567. margin-right: 12rpx;
  568. &:nth-child(3n) {
  569. margin-right: 0;
  570. }
  571. }
  572. .pic-box-color {
  573. background-color: #f4f4f4;
  574. color: #656565;
  575. }
  576. .pic-number {
  577. font-size: 22rpx;
  578. }
  579. .pic-number-pic {
  580. font-size: 38rpx;
  581. margin-right: 10rpx;
  582. text-align: center;
  583. }
  584. .pic-box-color-active {
  585. background-color: var(--view-theme) !important;
  586. color: #fff !important;
  587. }
  588. }
  589. .tips-box{
  590. .tips {
  591. font-size: 28rpx;
  592. color: #333333;
  593. font-weight: 800;
  594. margin-bottom: 14rpx;
  595. margin-top: 20rpx;
  596. }
  597. .tips-samll {
  598. font-size: 24rpx;
  599. color: #333333;
  600. margin-bottom: 14rpx;
  601. }
  602. .tip-box {
  603. margin-top: 30rpx;
  604. }
  605. }
  606. .tips-title{
  607. margin-top: 20rpx;
  608. font-size: 24rpx;
  609. color: #333;
  610. }
  611. </style>