index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <view class="footer-mall-pay-box">
  3. <view v-if="false" class="mall-left-box" @click="detailBtn">
  4. <!-- 需要换成从接口中取得 wgy -->
  5. <view class="price-icon-box">
  6. <text class="red-price fh-text">¥</text>
  7. <text class="red-price">{{totalPrice}}</text>明细
  8. <icon :class="mxjtClass"></icon>
  9. </view>
  10. <view>购买即同意虚拟产品不支持退订</view>
  11. </view>
  12. <!-- 微信 -->
  13. <view class="pay-status-box" v-if="payType =='weixin'&&currentPlatform =='android'" @click="switchPayWay">
  14. <icon class="wx-icon"></icon>微信
  15. </view>
  16. <view class="pay-status-box" v-if="payType =='zhifubao'&&currentPlatform =='android'" @click="switchPayWay">
  17. <icon class="zfb-icon"></icon>支付宝
  18. </view>
  19. <view class="pay-status-box apple-status-box" v-if="currentPlatform =='ios'">
  20. <icon class="apple-icon"></icon>apple
  21. </view>
  22. <slot></slot>
  23. </view>
  24. </template>
  25. <script setup>
  26. import {
  27. reactive,
  28. computed,
  29. onMounted,
  30. nextTick,
  31. ref
  32. } from "vue";
  33. import {
  34. getMallist
  35. } from "@/api/productMall.js";
  36. import {
  37. orderAdd,
  38. orderPayAli,
  39. orderPayWx,
  40. orderPayApple,
  41. orderCheck
  42. } from "@/api/order.js"
  43. import {
  44. onLoad
  45. } from "@dcloudio/uni-app";
  46. import {
  47. toast,
  48. debounce,
  49. getUserIdentity
  50. } from "@/utils/common";
  51. import cacheManager from '@/utils/cacheManager.js';
  52. const showPayWay = ref(true)
  53. let currentPlatform = ref('android')
  54. const payType = ref('weixin');
  55. let orderId = ref('');
  56. let productId = ref(null)
  57. let iapChannel = ref(null)
  58. let quantity = ref(1)
  59. let channel = ref('')
  60. let appleFlag = ref('')
  61. // const props = defineProps({
  62. // list: { // 父组件传入的初始选中商品列表
  63. // type: Array,
  64. // default: () => []
  65. // }
  66. // });
  67. onMounted(() => {
  68. //console.log('props',props.list);
  69. //isIOSorAndroid()
  70. })
  71. // $emit('return-btn');
  72. const $emit = defineEmits(['return-btn'])
  73. function switchPayWay() {
  74. payType.value = payType.value == 'weixin' ? 'zhifubao' : 'weixin'
  75. }
  76. const isIOSorAndroid = () => {
  77. const systemInfo = uni.getSystemInfoSync();
  78. console.log('systemInfo', systemInfo);
  79. if (systemInfo.platform == 'ios') {
  80. return currentPlatform.value = 'ios'
  81. } else {
  82. return currentPlatform.value = 'android'
  83. }
  84. }
  85. function genggaiVip(data) {
  86. uni.hideLoading();
  87. const localList = cacheManager.get('auth').levelIdList || []
  88. const mergeList = [...new Set([...localList, ...data.levelIdList])]
  89. cacheManager.updateObject('auth', {
  90. levelIdList: mergeList
  91. })
  92. toast("chenggong!!!! 之后跳转我的订单页面")
  93. // if (formPage.value == 'my') {
  94. // uni.redirectTo({
  95. // url: '/pages/my/index'
  96. // })
  97. // } else {
  98. // uni.redirectTo({
  99. // url: '/pages/study/index'
  100. // })
  101. // }
  102. }
  103. const creatOrderIos = debounce((cardIds => {
  104. uni.showLoading({
  105. title: '',
  106. mask: true
  107. });
  108. // if (appleFlag.value.toString() == 'true') {
  109. // productId.value = 'llisoftEzhuangyuanceshi'
  110. // } else {
  111. // if (cardId.value == 1) {
  112. // productId.value = 'llisoftEzhuangyuan'
  113. // } else {
  114. // productId.value = 'llisoftEzhuangyuanYingyu'
  115. // }
  116. // }
  117. let req = {
  118. cardIds: cardIds
  119. }
  120. orderAdd(req).then(res => {
  121. console.log('res', res);
  122. if (res.code == 0) {
  123. uni.hideLoading();
  124. orderId.value = res.data.id
  125. // 测试ios 1元
  126. applePay()
  127. } else {
  128. uni.hideLoading();
  129. return false
  130. console.log('请求失败');
  131. }
  132. }).catch((e) => {
  133. uni.hideLoading();
  134. toast("订单创建失败")
  135. return false
  136. })
  137. }), 500)
  138. function applePaySuccess(data) {
  139. uni.showLoading({
  140. title: '会员开通中',
  141. mask: true
  142. });
  143. let req = {
  144. "id": orderId.value,
  145. "paynum": data.transactionIdentifier,
  146. "receipt": data.transactionReceipt
  147. }
  148. console.log('reqreq', req);
  149. orderPayApple(req).then(res => {
  150. if (res.code == 0 && res.data) {
  151. iapChannel.finishTransaction(data.transactionIdentifier)
  152. console.log('resiapChanneliapChanneliapChannel', res);
  153. genggaiVip()
  154. } else {
  155. iapChannel.finishTransaction(data.transactionIdentifier)
  156. uni.hideLoading();
  157. toast("苹果内购失败")
  158. console.log('orderPayApple失败');
  159. return false
  160. }
  161. })
  162. }
  163. function applePay() {
  164. console.log('123123');
  165. if (!productId.value) {
  166. uni.showToast({
  167. title: '苹果内购ID缺失,请选择其它支付方式或联系客服',
  168. icon: "none"
  169. });
  170. return false;
  171. }
  172. uni.showLoading({
  173. title: '正在支付中...'
  174. });
  175. try {
  176. plus.payment.getChannels(function(channels) { //判读项目支付通道开通情况
  177. for (var i in channels) {
  178. iapChannel = channels[i];
  179. // 获取 id 为 'appleiap' 的 channel
  180. console.info("支付通道", iapChannel)
  181. if (iapChannel.id === 'appleiap') { //开通了app应用内支付,在manifest.josn中设置,开通后需打自定议基座
  182. console.info("苹果支付通道", iapChannel)
  183. // ids 数组中的项为 App Store Connect 配置的内购买项目产品ID(productId)
  184. var ids = [productId.value];
  185. // iap 为应用内支付对象
  186. iapChannel.requestOrder(ids, function(e) {
  187. // 获取订单信息成功回调方法
  188. console.log('requestOrder success: ' + JSON.stringify(e));
  189. uni.requestPayment({
  190. provider: 'appleiap',
  191. orderInfo: {
  192. productid: productId.value, //产品id,来自于苹果
  193. quantity: quantity.value, //产品数量
  194. manualFinishTransaction: true
  195. },
  196. success: (e) => {
  197. uni.hideLoading();
  198. // toast("苹果内购成功")
  199. console.info("苹果内购成功", e)
  200. applePaySuccess(e)
  201. //e.payment.orderNo = that.orderNo
  202. //支付成功回调,前端调用后台接口
  203. },
  204. fail: (e) => {
  205. uni.hideLoading();
  206. toast("苹果内购失败")
  207. console.info("苹果内购失败", e)
  208. },
  209. })
  210. },
  211. function(e) {
  212. // 获取订单信息失败回调方法
  213. console.log('requestOrder failed: ' + JSON.stringify(e));
  214. });
  215. } else {
  216. console.log('不支持苹果支付')
  217. }
  218. }
  219. },
  220. function(e) {
  221. console.log("获取iap支付通道失败:" + e.message);
  222. });
  223. } catch (e) {
  224. uni.showModal({
  225. title: "init",
  226. content: e.message,
  227. showCancel: false
  228. });
  229. } finally {
  230. uni.hideLoading();
  231. }
  232. }
  233. function wxPay() {
  234. orderPayWx({
  235. id: orderId.value
  236. }).then(res2 => {
  237. uni.hideLoading();
  238. console.log('res2', res2);
  239. uni.requestPayment({
  240. "provider": "wxpay",
  241. "orderInfo": {
  242. "appid": res2.data.appid, // 应用ID(AppID)
  243. "partnerid": res2.data.partnerId, // 商户号(PartnerID)
  244. "prepayid": res2.data.prepayId, // 预支付交易会话ID
  245. "package": res2.data.packageVal, // 固定值
  246. "noncestr": res2.data.nonceStr, // 随机字符串
  247. "timestamp": res2.data.timestamp, // 时间戳(单位:秒)
  248. "sign": res2.data.sign // 签名,这里用的 MD5 签名
  249. }, //此处为服务器返回的订单信息字符串
  250. success: function(res) {
  251. //var rawdata = JSON.parse(res.rawdata);
  252. // console.log('res',res);
  253. // console.log('支付成功');
  254. // console.log('rawdata', rawdata);
  255. uni.showLoading({
  256. title: '会员开通中,请稍后...'
  257. });
  258. orderCheck({
  259. id: orderId.value
  260. }).then(res3 => {
  261. console.log('res3', res3);
  262. if (res3.code == 0) {
  263. genggaiVip(res3.data)
  264. } else {
  265. setTimeout(() => {
  266. orderCheck({
  267. id: orderId.value
  268. }).then(res4 => {
  269. if (res4.code == 0) {
  270. genggaiVip(res4.data)
  271. } else {
  272. toast(
  273. "开通失败,请联系管理员!"
  274. )
  275. uni
  276. .hideLoading();
  277. return false
  278. }
  279. }).catch(() => {
  280. uni.hideLoading();
  281. toast("check接口报错")
  282. return false
  283. })
  284. }, 5000)
  285. }
  286. }).catch(() => {
  287. uni.hideLoading();
  288. toast("check接口报错")
  289. return false
  290. })
  291. },
  292. fail: function(err) {
  293. uni.hideLoading();
  294. // toast('支付失败:' + JSON.stringify(err));
  295. console.log('支付失败:' + JSON.stringify(err));
  296. }
  297. });
  298. }).catch((error) => {
  299. uni.hideLoading();
  300. console.log(error);
  301. })
  302. }
  303. function aliApy() {
  304. orderPayAli({
  305. id: orderId.value
  306. }).then(res2 => {
  307. console.log('res2', res2);
  308. uni.hideLoading();
  309. uni.requestPayment({
  310. "provider": "alipay",
  311. "orderInfo": res2.data.text, //此处为服务器返回的订单信息字符串
  312. success: function(res) {
  313. // var rawdata = JSON.parse(res.rawdata);
  314. // console.log('支付成功');
  315. // console.log('rawdata', rawdata);
  316. uni.showLoading({
  317. title: '会员开通中,请稍后...'
  318. });
  319. orderCheck({
  320. id: orderId.value
  321. }).then(res3 => {
  322. if (res3.code == 0) {
  323. genggaiVip(res3.data)
  324. } else {
  325. setTimeout(() => {
  326. orderCheck({
  327. id: orderId.value
  328. }).then(res4 => {
  329. if (res4.code ==
  330. 0) {
  331. genggaiVip(res4.data)
  332. } else {
  333. toast(
  334. "开通失败,请联系管理员!"
  335. )
  336. uni
  337. .hideLoading();
  338. return false
  339. }
  340. }).catch(() => {
  341. uni.hideLoading();
  342. toast("check接口报错")
  343. return false
  344. })
  345. }, 5000)
  346. }
  347. }).catch(() => {
  348. uni.hideLoading();
  349. toast("check接口报错")
  350. return false
  351. })
  352. },
  353. fail: function(err) {
  354. console.log('支付失败:' + JSON.stringify(err));
  355. uni.hideLoading();
  356. }
  357. });
  358. })
  359. }
  360. const creatOrder = debounce((cardIds) => {
  361. console.log('cardIds', cardIds);
  362. return
  363. uni.showLoading({
  364. title: '',
  365. mask: true
  366. });
  367. if (payType.value == 'weixin') {
  368. console.log('创建订单11');
  369. let req = {
  370. cardIds: cardIds
  371. }
  372. orderAdd(req).then(res => {
  373. console.log('res', res);
  374. console.log(' res.data.id', res.data.id);
  375. orderId.value = res.data.id
  376. wxPay()
  377. }).catch((err) => {
  378. uni.hideLoading();
  379. toast("订单创建失败")
  380. return false
  381. })
  382. } else {
  383. let req = {
  384. cardIds: cardIds
  385. }
  386. orderAdd(req).then(res => {
  387. console.log('res', res);
  388. orderId.value = res.data.id
  389. aliApy()
  390. }).catch((err) => {
  391. uni.hideLoading();
  392. toast("订单创建失败")
  393. return false
  394. })
  395. }
  396. }, 500)
  397. onLoad((options) => {
  398. // isIOSorAndroid()
  399. })
  400. function getData(data) {
  401. creatOrder()
  402. console.log('data', data);
  403. }
  404. defineExpose({
  405. getData // 必须明确暴露方法
  406. });
  407. </script>
  408. <style>
  409. </style>