pay.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <view class="app">
  3. <view class="price-box">
  4. <text>支付金额</text>
  5. <text class="price">{{ money }}</text>
  6. </view>
  7. <view class="pay-type-list">
  8. <view class="type-item b-b" @click="changePayType(1)">
  9. <text class="icon iconfont iconweixin"></text>
  10. <view class="con">
  11. <text class="tit">微信支付</text>
  12. <text>推荐使用微信支付</text>
  13. </view>
  14. <label class="radio"><radio value="" color="#FF4C4C" :checked="payType == 1"></radio></label>
  15. </view>
  16. <!-- #ifdef APP-PLUS -->
  17. <view class="type-item b-b" @click="changePayType(2)">
  18. <text class="icon iconfont iconzhifubao"></text>
  19. <view class="con"><text class="tit">支付宝支付</text></view>
  20. <label class="radio"><radio value="" color="#FF4C4C" :checked="payType == 2"></radio></label>
  21. </view>
  22. <!-- #endif -->
  23. <view class="type-item" @click="changePayType(3)">
  24. <text class="icon iconfont iconyue"></text>
  25. <view class="con">
  26. <text class="tit">余额支付</text>
  27. <text>可用余额 ¥{{ now_money }}</text>
  28. </view>
  29. <label class="radio"><radio value="" color="#FF4C4C" :checked="payType == 3"></radio></label>
  30. </view>
  31. <!-- <view class="type-item" @click="changePayType(5)">
  32. <image class="cash-icon" src="../../static/icon/mygx.png" mode=""></image>
  33. <view class="con">
  34. <text class="tit">现金支付</text>
  35. <text>可用现金 {{ userInfo.cash }}</text>
  36. </view>
  37. <label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 5"></radio></label>
  38. </view> -->
  39. <!-- <view class="type-item" @click="changePayType(4)" v-if="isP == 1">
  40. <text class="icon iconfont iconyue"></text>
  41. <view class="con">
  42. <text class="tit">拼团积分</text>
  43. <text>可用余额 {{ userInfo.pink_integral }}</text>
  44. </view>
  45. <label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 4"></radio></label>
  46. </view> -->
  47. </view>
  48. <text class="mix-btn" :class="{ clickbg: payLoding }" @click="!payLoding ? confirm() : ''">确认支付</text>
  49. </view>
  50. </template>
  51. <script>
  52. import { balance } from '@/api/wallet.js';
  53. import { createOrderkey, computedOrderkey, orderPay } from '@/api/order.js';
  54. import { mapState, mapMutations } from 'vuex';
  55. import { orderData, userinfo } from '@/api/user.js';
  56. // #ifdef H5
  57. import weixinObj from '@/plugin/jweixin-module/index.js';
  58. // #endif
  59. export default {
  60. data() {
  61. return {
  62. payType: 1, //支付类型
  63. // #ifdef H5
  64. payName: 'weixin',
  65. // #endif
  66. // #ifdef MP-WEIXIN
  67. payName: 'weixin',
  68. // #endif
  69. orderInfo: {},
  70. money: 0.0, //订单金额
  71. now_money: 0.0, //余额
  72. orderKey: '',
  73. orderId: '', //保存订单id
  74. payLoding: false, //判断是否支付中
  75. type: '', //判断是否从订单中进入
  76. // #ifdef H5
  77. froms: '', //保存h5中数据来源对象
  78. // #endif
  79. pinkid: '', //保存拼团商品id
  80. isP: 0
  81. };
  82. },
  83. computed: {
  84. // #ifdef H5
  85. ...mapState(['weichatObj']),
  86. ...mapState('user', ['userInfo'])
  87. // #endif
  88. },
  89. onLoad(options) {
  90. if (options.isP) {
  91. this.isP = options.isP;
  92. }
  93. if (options.type == 1) {
  94. this.type = 1;
  95. this.orderId = options.ordid;
  96. this.money = options.money;
  97. } else {
  98. this.orderKey = options.key;
  99. console.log(this.orderKey,'computedOrderkey');
  100. let prepage = this.$api.prePage();
  101. console.log(prepage,'coupons');
  102. computedOrderkey({
  103. orderkey: this.orderKey,
  104. couponId: prepage.couponChecked.id, //优惠券编号
  105. addressId: prepage.addressData.id, //地址编号
  106. useIntegral: prepage.checkedPoints ? 1 : 0
  107. }).then(({ data }) => {
  108. // 获取支付金额
  109. this.money = data.result.pay_price;
  110. });
  111. }
  112. this.getUserInfo();
  113. // 保存pinkid
  114. if (options.pinkid) {
  115. this.pinkid = options.pinkid;
  116. }
  117. // 载入余额
  118. balance({}).then(({ data }) => {
  119. // 获取余额
  120. this.now_money = data.now_money;
  121. });
  122. },
  123. methods: {
  124. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  125. getUserInfo() {
  126. userinfo({})
  127. .then(({ data }) => {
  128. this.setUserInfo(data);
  129. })
  130. .catch(e => {
  131. console.log(e);
  132. });
  133. },
  134. //选择支付方式
  135. changePayType(type) {
  136. this.payType = type;
  137. if (this.payType == 1) {
  138. this.payName = 'weixin';
  139. }
  140. if (this.payType == 2) {
  141. this.payName = 'ali';
  142. }
  143. if (this.payType == 3) {
  144. this.payName = 'yue';
  145. }
  146. if (this.payType == 4) {
  147. this.payName = 'pink_integral';
  148. }
  149. if (this.payType == 5) {
  150. this.payName = 'cash';
  151. }
  152. },
  153. // 支付金额
  154. orderMoneyPay() {
  155. let obj = this;
  156. orderPay({
  157. uni: obj.orderId,
  158. // #ifdef H5
  159. from: obj.froms ? 'weixin' : 'H5', //来源
  160. // #endif
  161. // #ifdef MP-WEIXIN
  162. from: 'routine', //来源
  163. // #endif
  164. // #ifdef APP-PLUS
  165. from: 'app', //来源
  166. // #endif
  167. paytype: obj.payName //支付类型 weixin-微信 yue-余额
  168. })
  169. .then(e => {
  170. // 判断是否为余额支付
  171. if (obj.payName == 'yue' && e.data.status == 'SUCCESS') {
  172. if (e.status == 200) {
  173. obj.paySuccessTo();
  174. } else {
  175. obj.$api.msg(msg);
  176. }
  177. }
  178. if (obj.payName == 'pink_integral' && e.data.status == 'SUCCESS') {
  179. if (e.status == 200) {
  180. obj.paySuccessTo();
  181. } else {
  182. obj.$api.msg(msg);
  183. }
  184. }
  185. if (obj.payName == 'cash' && e.data.status == 'SUCCESS') {
  186. if (e.status == 200) {
  187. obj.paySuccessTo();
  188. } else {
  189. obj.$api.msg(msg);
  190. }
  191. }
  192. if (obj.payName == 'weixin' || obj.payName == 'routine') {
  193. let da = e.data.result.jsConfig;
  194. let data = {
  195. // #ifdef H5
  196. timestamp: da.timestamp,
  197. // #endif
  198. // #ifdef MP
  199. timeStamp: da.timestamp,
  200. // #endif
  201. nonceStr: da.nonceStr,
  202. package: da.package,
  203. signType: da.signType,
  204. paySign: da.paySign,
  205. success: function(res) {
  206. obj.paySuccessTo();
  207. },
  208. fail: () => {
  209. uni.navigateTo({
  210. url: '/pages/order/order?state=0'
  211. });
  212. }
  213. };
  214. // #ifdef H5
  215. if (obj.payName == 'weixin') {
  216. weixinObj.chooseWXPay(data);
  217. }
  218. // #endif
  219. // #ifdef MP-WEIXIN
  220. if (obj.payName == 'routine') {
  221. wx.requestPayment(data);
  222. }
  223. // #endif
  224. }
  225. uni.hideLoading();
  226. obj.payLoding = false;
  227. })
  228. .catch(e => {
  229. // 支付完成
  230. uni.hideLoading();
  231. obj.payLoding = false;
  232. console.log(e);
  233. });
  234. },
  235. // 支付成功跳转
  236. paySuccessTo() {
  237. uni.hideLoading();
  238. uni.redirectTo({
  239. url: '/pages/money/paySuccess?orderid=' + this.orderId
  240. });
  241. },
  242. //确认支付
  243. confirm: async function() {
  244. let obj = this;
  245. uni.showLoading({
  246. title: '支付中',
  247. mask: true
  248. });
  249. // 判断是否拼团积分不足
  250. if (obj.payName == 'pink_integral' && +obj.userInfo.pink_integral < obj.money) {
  251. uni.showModal({
  252. title: '提示',
  253. content: '拼团积分不足!',
  254. showCancel: false,
  255. success: res => {},
  256. fail: () => {},
  257. complete: () => {}
  258. });
  259. uni.hideLoading();
  260. return;
  261. }
  262. // 判断是否拼团积分不足
  263. if (obj.payName == 'cash' && +obj.userInfo.cash < obj.money) {
  264. uni.showModal({
  265. title: '提示',
  266. content: '现金不足!',
  267. showCancel: false,
  268. success: res => {},
  269. fail: () => {},
  270. complete: () => {}
  271. });
  272. uni.hideLoading();
  273. return;
  274. }
  275. // 判断是否余额不足
  276. if (obj.payName == 'yue' && +obj.now_money < obj.money) {
  277. uni.showModal({
  278. title: '提示',
  279. content: '账户余额不足!',
  280. showCancel: false,
  281. success: res => {},
  282. fail: () => {},
  283. complete: () => {}
  284. });
  285. uni.hideLoading();
  286. return;
  287. }
  288. // 支付中
  289. obj.payLoding = true;
  290. // #ifdef H5
  291. // 获取当前是否为微信浏览器
  292. obj.froms = uni.getStorageSync('weichatBrowser') || '';
  293. // #endif
  294. // 判断是否为未支付订单中跳转进入
  295. if (obj.type != 1) {
  296. // 初次生成订单
  297. obj.firstCreateOrder();
  298. } else {
  299. // 已经生成订单未支付
  300. obj.orderMoneyPay();
  301. }
  302. },
  303. // 初次订单创建
  304. firstCreateOrder() {
  305. let obj = this;
  306. // 获取下单页面数据
  307. let prepage = obj.$api.prePage();
  308. let data = {
  309. real_name: prepage.addressData.real_name, //联系人名称
  310. phone: prepage.addressData.phone, //联系人号码
  311. couponId: prepage.couponChecked.id, //优惠券编号
  312. addressId: prepage.addressData.id, //支付地址id
  313. useIntegral: prepage.checkedPoints ? 1 : 0, //是否积分抵扣1为是0为否
  314. payType: obj.payName, //支付类型 weixin-微信 yue-余额
  315. mark: prepage.desc, //备注
  316. // #ifdef H5
  317. from: obj.froms ? 'weixin' : 'H5', //来源
  318. // #endif
  319. // #ifdef MP-WEIXIN
  320. from: 'routine', //来源
  321. // #endif
  322. // #ifdef APP-PLUS
  323. from: 'app', //来源
  324. // #endif
  325. shipping_type: prepage.tabCurrentIndex + 1, //提货方式 1 快递 2自提
  326. store_id: prepage.tabCurrentIndex == 1 ? prepage.shopAddress.id : '',
  327. };
  328. // 判断是否拼团商品
  329. if (obj.pinkid) {
  330. data.pinkId = obj.pinkid;
  331. }
  332. // 生成订单
  333. createOrderkey(data, obj.orderKey)
  334. .then(({ data, status, msg }) => {
  335. // 判断是否支付失败
  336. if (data.status == 'ORDER_EXIST') {
  337. uni.showModal({
  338. title: '提示',
  339. content: msg,
  340. showCancel: false
  341. });
  342. uni.hideLoading();
  343. obj.payLoding = false;
  344. return;
  345. }
  346. // 保存订单号
  347. obj.orderId = data.result.orderId;
  348. // 判断是否为余额支付
  349. if (obj.payName == 'yue') {
  350. if (status == 200 && data.status == 'SUCCESS') {
  351. obj.paySuccessTo();
  352. } else {
  353. obj.$api.msg(msg);
  354. }
  355. } else if (obj.payName == 'cash') {
  356. if (status == 200 && data.status == 'SUCCESS') {
  357. obj.paySuccessTo();
  358. } else {
  359. obj.$api.msg(msg);
  360. }
  361. } else {
  362. // 立即支付
  363. obj.orderMoneyPay();
  364. }
  365. })
  366. .catch(e => {
  367. uni.hideLoading();
  368. obj.payLoding = false;
  369. console.log(e);
  370. });
  371. }
  372. }
  373. };
  374. </script>
  375. <style lang="scss">
  376. .app {
  377. width: 100%;
  378. }
  379. .price-box {
  380. background-color: #fff;
  381. height: 265upx;
  382. display: flex;
  383. flex-direction: column;
  384. justify-content: center;
  385. align-items: center;
  386. font-size: 28upx;
  387. color: #909399;
  388. .price {
  389. font-size: 50upx;
  390. color: #303133;
  391. margin-top: 12upx;
  392. &:before {
  393. content: '¥';
  394. font-size: 40upx;
  395. }
  396. }
  397. }
  398. .pay-type-list {
  399. margin-top: 20upx;
  400. background-color: #fff;
  401. padding-left: 60upx;
  402. .type-item {
  403. height: 120upx;
  404. padding: 20upx 0;
  405. display: flex;
  406. justify-content: space-between;
  407. align-items: center;
  408. padding-right: 60upx;
  409. font-size: 30upx;
  410. position: relative;
  411. }
  412. .cash-icon {
  413. width: 100rpx;
  414. height: 52rpx;
  415. padding-right: 50rpx;
  416. }
  417. .icon {
  418. width: 100upx;
  419. font-size: 52upx;
  420. }
  421. .iconyue {
  422. color: #fe8e2e;
  423. }
  424. .iconweixin {
  425. color: #36cb59;
  426. }
  427. .iconzhifubao {
  428. color: #01aaef;
  429. }
  430. .tit {
  431. font-size: $font-lg;
  432. color: $font-color-dark;
  433. margin-bottom: 4upx;
  434. }
  435. .con {
  436. flex: 1;
  437. display: flex;
  438. flex-direction: column;
  439. font-size: $font-sm;
  440. color: $font-color-light;
  441. }
  442. }
  443. .mix-btn {
  444. display: flex;
  445. align-items: center;
  446. justify-content: center;
  447. width: 630upx;
  448. height: 80upx;
  449. margin: 80upx auto 30upx;
  450. font-size: $font-lg;
  451. color: #F8DABA;
  452. background-color: #303030;
  453. border-radius: 10upx;
  454. /* box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); */
  455. }
  456. .clickbg {
  457. background-color: $color-gray !important;
  458. }
  459. </style>