pay.vue 10 KB

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