mirror of
				https://github.com/YunaiV/ruoyi-vue-pro.git
				synced 2025-11-04 08:06:12 +08:00 
			
		
		
		
	mall + pay:
1. 后台的收银台,接入微信扫码支付
This commit is contained in:
		
							
								
								
									
										1
									
								
								yudao-ui-admin/src/assets/images/pay/icon/wx_bar.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								yudao-ui-admin/src/assets/images/pay/icon/wx_bar.svg
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#04C361"/><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#04C361"/></svg>
 | 
				
			||||||
| 
		 After Width: | Height: | Size: 4.0 KiB  | 
@ -132,6 +132,10 @@ export const PayChannelEnum = {
 | 
				
			|||||||
    "code": "wx_app",
 | 
					    "code": "wx_app",
 | 
				
			||||||
    "name": "微信 APP 支付"
 | 
					    "name": "微信 APP 支付"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					  WX_BAR: {
 | 
				
			||||||
 | 
					    "code": "wx_bar",
 | 
				
			||||||
 | 
					    "name": "微信条码支付"
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
  ALIPAY_PC: {
 | 
					  ALIPAY_PC: {
 | 
				
			||||||
    "code": "alipay_pc",
 | 
					    "code": "alipay_pc",
 | 
				
			||||||
    "name": "支付宝 PC 网站支付"
 | 
					    "name": "支付宝 PC 网站支付"
 | 
				
			||||||
 | 
				
			|||||||
@ -26,7 +26,7 @@
 | 
				
			|||||||
      <!-- 微信支付 -->
 | 
					      <!-- 微信支付 -->
 | 
				
			||||||
      <el-descriptions title="选择微信支付" style="margin-top: 20px;" />
 | 
					      <el-descriptions title="选择微信支付" style="margin-top: 20px;" />
 | 
				
			||||||
      <div class="pay-channel-container">
 | 
					      <div class="pay-channel-container">
 | 
				
			||||||
        <div class="box" v-for="channel in channels" v-if="channel.code.indexOf('wx_') === 0" :key="channel.code">
 | 
					        <div class="box" v-for="channel in channels" v-if="channel.code.indexOf('wx_') === 0" :key="channel.code" @click="submit(channel.code)">
 | 
				
			||||||
          <img :src="channel.icon">
 | 
					          <img :src="channel.icon">
 | 
				
			||||||
          <div class="title">{{ channel.name }}</div>
 | 
					          <div class="title">{{ channel.name }}</div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
@ -125,6 +125,10 @@ export default {
 | 
				
			|||||||
        name: '微信 App 支付',
 | 
					        name: '微信 App 支付',
 | 
				
			||||||
        icon: require("@/assets/images/pay/icon/wx_app.svg"),
 | 
					        icon: require("@/assets/images/pay/icon/wx_app.svg"),
 | 
				
			||||||
        code: "wx_app"
 | 
					        code: "wx_app"
 | 
				
			||||||
 | 
					      }, {
 | 
				
			||||||
 | 
					        name: '微信条码支付',
 | 
				
			||||||
 | 
					        icon: require("@/assets/images/pay/icon/wx_bar.svg"),
 | 
				
			||||||
 | 
					        code: "wx_bar"
 | 
				
			||||||
      }, {
 | 
					      }, {
 | 
				
			||||||
        name: '模拟支付',
 | 
					        name: '模拟支付',
 | 
				
			||||||
        icon: require("@/assets/images/pay/icon/mock.svg"),
 | 
					        icon: require("@/assets/images/pay/icon/mock.svg"),
 | 
				
			||||||
@ -195,6 +199,15 @@ export default {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
        return;
 | 
					        return;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					      if (channelCode === PayChannelEnum.WX_BAR.code) {
 | 
				
			||||||
 | 
					        this.barCode = {
 | 
				
			||||||
 | 
					          channelCode: channelCode,
 | 
				
			||||||
 | 
					          value: '',
 | 
				
			||||||
 | 
					          title: '“微信”条码支付',
 | 
				
			||||||
 | 
					          visible: true
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        return;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      // 默认的提交处理
 | 
					      // 默认的提交处理
 | 
				
			||||||
      this.submit0(channelCode)
 | 
					      this.submit0(channelCode)
 | 
				
			||||||
@ -207,7 +220,16 @@ export default {
 | 
				
			|||||||
        returnUrl: location.href, // 支付成功后,支付渠道跳转回当前页;再由当前页,跳转回 {@link returnUrl} 对应的地址
 | 
					        returnUrl: location.href, // 支付成功后,支付渠道跳转回当前页;再由当前页,跳转回 {@link returnUrl} 对应的地址
 | 
				
			||||||
        ...this.buildSubmitParam(channelCode)
 | 
					        ...this.buildSubmitParam(channelCode)
 | 
				
			||||||
      }).then(response => {
 | 
					      }).then(response => {
 | 
				
			||||||
 | 
					        // 直接返回已支付的情况,例如说扫码支付
 | 
				
			||||||
        const data = response.data
 | 
					        const data = response.data
 | 
				
			||||||
 | 
					        if (data.status === PayOrderStatusEnum.SUCCESS.status) {
 | 
				
			||||||
 | 
					          this.clearQueryInterval();
 | 
				
			||||||
 | 
					          this.$message.success('支付成功!');
 | 
				
			||||||
 | 
					          this.goReturnUrl();
 | 
				
			||||||
 | 
					          return
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // 展示对应的界面
 | 
				
			||||||
        if (data.displayMode === PayDisplayModeEnum.URL.mode) {
 | 
					        if (data.displayMode === PayDisplayModeEnum.URL.mode) {
 | 
				
			||||||
          this.displayUrl(channelCode, data)
 | 
					          this.displayUrl(channelCode, data)
 | 
				
			||||||
        } else if (data.displayMode === PayDisplayModeEnum.QR_CODE.mode) {
 | 
					        } else if (data.displayMode === PayDisplayModeEnum.QR_CODE.mode) {
 | 
				
			||||||
@ -230,11 +252,18 @@ export default {
 | 
				
			|||||||
          }
 | 
					          }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					      // ② 微信 BarCode 支付时,需要传递 authCode 条形码
 | 
				
			||||||
 | 
					      if (channelCode === PayChannelEnum.WX_BAR.code) {
 | 
				
			||||||
 | 
					        return {
 | 
				
			||||||
 | 
					          "channelExtras": {
 | 
				
			||||||
 | 
					            "authCode": this.barCode.value
 | 
				
			||||||
 | 
					          }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
      return {}
 | 
					      return {}
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    /** 提交支付后,URL 的展示形式 */
 | 
					    /** 提交支付后,URL 的展示形式 */
 | 
				
			||||||
    displayUrl(channelCode, data) {
 | 
					    displayUrl(channelCode, data) {
 | 
				
			||||||
      // window.open(data.displayContent)
 | 
					 | 
				
			||||||
      location.href = data.displayContent
 | 
					      location.href = data.displayContent
 | 
				
			||||||
      this.submitLoading = false
 | 
					      this.submitLoading = false
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user