pay.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. import sheep from '@/sheep';
  2. // #ifdef H5
  3. import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
  4. // #endif
  5. import { getRootUrl } from '@/sheep/helper';
  6. import PayOrderApi from '@/sheep/api/pay/order';
  7. /**
  8. * 支付
  9. *
  10. * @param {String} payment = ['wechat','alipay','wallet','mock'] - 支付方式
  11. * @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
  12. * @param {String} id - 订单号
  13. */
  14. export default class SheepPay {
  15. constructor(payment, orderType, id) {
  16. this.payment = payment;
  17. this.id = id;
  18. this.orderType = orderType;
  19. this.payAction();
  20. }
  21. payAction() {
  22. const payAction = {
  23. WechatOfficialAccount: {
  24. wechat: () => {
  25. this.wechatOfficialAccountPay();
  26. },
  27. alipay: () => {
  28. this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
  29. },
  30. wallet: () => {
  31. this.walletPay();
  32. },
  33. mock: () => {
  34. this.mockPay();
  35. }
  36. },
  37. WechatMiniProgram: {
  38. wechat: () => {
  39. this.wechatMiniProgramPay();
  40. },
  41. alipay: () => {
  42. this.copyPayLink();
  43. },
  44. wallet: () => {
  45. this.walletPay();
  46. },
  47. mock: () => {
  48. this.mockPay();
  49. }
  50. },
  51. App: {
  52. wechat: () => {
  53. this.wechatAppPay();
  54. },
  55. alipay: () => {
  56. this.alipay();
  57. },
  58. wallet: () => {
  59. this.walletPay();
  60. },
  61. mock: () => {
  62. this.mockPay();
  63. }
  64. },
  65. H5: {
  66. wechat: () => {
  67. this.wechatWapPay();
  68. },
  69. alipay: () => {
  70. this.redirectPay();
  71. },
  72. wallet: () => {
  73. this.walletPay();
  74. },
  75. mock: () => {
  76. this.mockPay();
  77. }
  78. },
  79. };
  80. return payAction[sheep.$platform.name][this.payment]();
  81. }
  82. // 预支付
  83. prepay(channel) {
  84. return new Promise(async (resolve, reject) => {
  85. let data = {
  86. id: this.id,
  87. channelCode: channel,
  88. channelExtras: {}
  89. };
  90. // 特殊逻辑:微信公众号、小程序支付时,必须传入 openid
  91. if (['wx_pub'].includes(channel)) {
  92. const openid = await sheep.$platform.useProvider('wechat').getOpenid();
  93. // 如果获取不到 openid,微信无法发起支付,此时需要引导
  94. if (!openid) {
  95. this.bindWeixin();
  96. return;
  97. }
  98. data.channelExtras.openid = openid;
  99. }
  100. PayOrderApi.submitOrder(data).then((res) => {
  101. // 成功时
  102. res.code === 0 && resolve(res);
  103. // 失败时
  104. if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
  105. // 特殊逻辑:微信公众号、小程序支付时,必须传入 openid 不正确的情况
  106. if (res.msg.indexOf('无效的openid') >= 0 // 获取的 openid 不正确时,或者随便输入了个 openid
  107. || res.msg.indexOf('下单账号与支付账号不一致') >= 0) { // https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
  108. this.bindWeixin();
  109. }
  110. }
  111. });
  112. });
  113. }
  114. // #ifdef H5
  115. // 微信公众号 JSSDK 支付
  116. async wechatOfficialAccountPay() {
  117. let { code, data } = await this.prepay('wx_pub');
  118. if (code !== 0) {
  119. return;
  120. }
  121. const payConfig = JSON.parse(data.displayContent);
  122. $wxsdk.wxpay(payConfig, {
  123. success: () => {
  124. this.payResult('success');
  125. },
  126. cancel: () => {
  127. sheep.$helper.toast('支付已手动取消');
  128. },
  129. fail: (error) => {
  130. if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
  131. sheep.$helper.toast('发起微信支付失败,原因:可能是微信开发者工具不支持,建议使用微信打开网页后支付');
  132. return
  133. }
  134. this.payResult('fail');
  135. },
  136. });
  137. }
  138. // 浏览器微信H5支付 TODO 芋艿:待接入
  139. async wechatWapPay() {
  140. const { error, data } = await this.prepay();
  141. if (error === 0) {
  142. const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
  143. }&orderType=${this.orderType}`;
  144. location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
  145. }
  146. }
  147. // 支付链接 TODO 芋艿:待接入
  148. async redirectPay() {
  149. let { error, data } = await this.prepay();
  150. if (error === 0) {
  151. const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
  152. }&orderType=${this.orderType}`;
  153. location.href = data.pay_data + encodeURIComponent(redirect_url);
  154. }
  155. }
  156. // #endif
  157. // 微信小程序支付 TODO 芋艿:待接入
  158. async wechatMiniProgramPay() {
  159. let that = this;
  160. let result = await this.prepay();
  161. uni.requestPayment({
  162. provider: 'wxpay',
  163. ...result.data.pay_data,
  164. success: (res) => {
  165. that.payResult('success');
  166. },
  167. fail: (err) => {
  168. if (err.errMsg === 'requestPayment:fail cancel') {
  169. sheep.$helper.toast('支付已手动取消');
  170. } else {
  171. that.payResult('fail');
  172. }
  173. },
  174. });
  175. }
  176. // 余额支付
  177. async walletPay() {
  178. const { code } = await this.prepay('wallet');
  179. code === 0 && this.payResult('success');
  180. }
  181. // 模拟支付
  182. async mockPay() {
  183. const { code } = await this.prepay('mock');
  184. code === 0 && this.payResult('success');
  185. }
  186. // 支付宝复制链接支付 TODO 芋艿:待接入
  187. async copyPayLink() {
  188. let that = this;
  189. let { error, data } = await this.prepay();
  190. if (error === 0) {
  191. // 引入showModal 点击确认 复制链接;
  192. uni.showModal({
  193. title: '支付宝支付',
  194. content: '复制链接到外部浏览器',
  195. confirmText: '复制链接',
  196. success: (res) => {
  197. if (res.confirm) {
  198. sheep.$helper.copyText(data.pay_data);
  199. }
  200. },
  201. });
  202. }
  203. }
  204. // 支付宝支付 TODO 芋艿:待接入
  205. async alipay() {
  206. let that = this;
  207. const { error, data } = await this.prepay();
  208. if (error === 0) {
  209. uni.requestPayment({
  210. provider: 'alipay',
  211. orderInfo: data.pay_data, //支付宝订单数据
  212. success: (res) => {
  213. that.payResult('success');
  214. },
  215. fail: (err) => {
  216. if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
  217. sheep.$helper.toast('支付已手动取消');
  218. } else {
  219. that.payResult('fail');
  220. }
  221. },
  222. });
  223. }
  224. }
  225. // 微信支付 TODO 芋艿:待接入
  226. async wechatAppPay() {
  227. let that = this;
  228. let { error, data } = await this.prepay();
  229. if (error === 0) {
  230. uni.requestPayment({
  231. provider: 'wxpay',
  232. orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
  233. success: (res) => {
  234. that.payResult('success');
  235. },
  236. fail: (err) => {
  237. err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
  238. },
  239. });
  240. }
  241. }
  242. // 支付结果跳转,success:成功,fail:失败
  243. payResult(resultType) {
  244. sheep.$router.redirect('/pages/pay/result', {
  245. id: this.id,
  246. orderType: this.orderType,
  247. payState: resultType
  248. });
  249. }
  250. // 引导绑定微信
  251. bindWeixin() {
  252. uni.showModal({
  253. title: '微信支付',
  254. content: '请先绑定微信再使用微信支付',
  255. success: function (res) {
  256. if (res.confirm) {
  257. sheep.$platform.useProvider('wechat').bind();
  258. }
  259. },
  260. });
  261. }
  262. }
  263. export function getPayMethods(channels) {
  264. const payMethods = [
  265. {
  266. icon: '/static/img/shop/pay/wechat.png',
  267. title: '微信支付',
  268. value: 'wechat',
  269. disabled: true,
  270. },
  271. {
  272. icon: '/static/img/shop/pay/alipay.png',
  273. title: '支付宝支付',
  274. value: 'alipay',
  275. disabled: true,
  276. },
  277. {
  278. icon: '/static/img/shop/pay/wallet.png',
  279. title: '余额支付',
  280. value: 'wallet',
  281. disabled: true,
  282. },
  283. {
  284. icon: '/static/img/shop/pay/apple.png',
  285. title: 'Apple Pay',
  286. value: 'apple',
  287. disabled: true,
  288. },
  289. {
  290. icon: '/static/img/shop/pay/wallet.png',
  291. title: '模拟支付',
  292. value: 'mock',
  293. disabled: true,
  294. }
  295. ];
  296. const platform = sheep.$platform.name
  297. // 1. 处理【微信支付】
  298. const wechatMethod = payMethods[0];
  299. if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
  300. || (platform === 'WechatMiniProgram' && channels.includes('wx_lite'))
  301. || (platform === 'App' && channels.includes('wx_app'))) {
  302. wechatMethod.disabled = false;
  303. }
  304. wechatMethod.disabled = false; // TODO 芋艿:临时测试
  305. // 2. 处理【支付宝支付】
  306. const alipayMethod = payMethods[1];
  307. if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
  308. || platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
  309. || platform === 'App' && channels.includes('alipay_app')) {
  310. alipayMethod.disabled = false;
  311. }
  312. // 3. 处理【余额支付】
  313. const walletMethod = payMethods[2];
  314. if (channels.includes('wallet')) {
  315. walletMethod.disabled = false;
  316. }
  317. // 4. 处理【苹果支付】TODO 芋艿:未来接入
  318. // 5. 处理【模拟支付】
  319. const mockMethod = payMethods[4];
  320. if (channels.includes('mock')) {
  321. mockMethod.disabled = false;
  322. }
  323. return payMethods;
  324. }