diff --git a/src/enums/payment/payWayEnum.ts b/src/enums/payment/payWayEnum.ts
index 822ba3bcf..2a4fc23eb 100644
--- a/src/enums/payment/payWayEnum.ts
+++ b/src/enums/payment/payWayEnum.ts
@@ -2,11 +2,11 @@
  * 支付通道
  */
 export enum payWayEnum {
-  NORMAL = 'NORMAL',
-  WAP = 'WAP',
-  APP = 'APP',
-  WEB = 'WEB',
-  QRCODE = 'QRCODE',
-  BARCODE = 'BARCODE',
-  JSAPI = 'JSAPI',
+  NORMAL = 'normal',
+  WAP = 'wap',
+  APP = 'app',
+  WEB = 'web',
+  QRCODE = 'qrcode',
+  BARCODE = 'barcode',
+  JSAPI = 'jsapi',
 }
diff --git a/src/router/routes/project.ts b/src/router/routes/project.ts
index 50c097f3e..b9977d5ba 100644
--- a/src/router/routes/project.ts
+++ b/src/router/routes/project.ts
@@ -38,7 +38,7 @@ export const INTERNAL: AppRouteModule = {
  * 位于主框架外的页面
  */
 export const OUTSIDE: AppRouteModule = {
-  path: '/base/outside',
+  path: '/outside',
   name: 'PROJECT_OUTSIDE',
   meta: { title: '' },
   children: [
@@ -51,6 +51,12 @@ export const OUTSIDE: AppRouteModule = {
     //     ignoreAuth: true,
     //   },
     // },
+    {
+      path: '/cashier',
+      name: 'cashier',
+      component: () => import('/@/views/paydemo/cashier/Cashier.vue'),
+      meta: { title: '结算台支付演示', ignoreAuth: true },
+    },
   ],
 }
 
diff --git a/src/views/paydemo/cashier/Cashier.api.ts b/src/views/paydemo/cashier/Cashier.api.ts
new file mode 100644
index 000000000..fc79a29ee
--- /dev/null
+++ b/src/views/paydemo/cashier/Cashier.api.ts
@@ -0,0 +1,38 @@
+import { defHttp } from '/@/utils/http/axios'
+import { Result } from '/#/axios'
+
+/**
+ * 单独支付
+ */
+export function simplePayCashier(obj) {
+  return defHttp.post<Result<PayOrderResult>>({
+    url: '/demo/cashier/simplePayCashier',
+    method: 'POST',
+    data: obj,
+  })
+}
+
+/**
+ * 根据业务ID获取支付状态
+ */
+export function findStatusByBusinessId(businessNo) {
+  return defHttp.get<Result<boolean>>({
+    url: '/demo/cashier/queryPayOrderSuccess',
+    method: 'GET',
+    params: { businessNo },
+  })
+}
+
+/**
+ * 发起支付后响应对象
+ */
+export interface PayOrderResult {
+  // 支付ID
+  paymentId: string
+  // 是否是异步支付
+  asyncPay: boolean
+  // 异步支付通道
+  asyncChannel: string
+  // 支付参数体(通常用于发起异步支付的参数)
+  payBody: string
+}
diff --git a/src/views/paydemo/cashier/Cashier.vue b/src/views/paydemo/cashier/Cashier.vue
new file mode 100644
index 000000000..c83f1dade
--- /dev/null
+++ b/src/views/paydemo/cashier/Cashier.vue
@@ -0,0 +1,299 @@
+<template>
+  <div style="background-color: #f5f5f7">
+    <div class="page paydemo">
+      <div class="blog-container" id="container" style="margin-top: 80px">
+        <a-spin :spinning="loading">
+          <div class="content" style="padding-top: 20px">
+            <div style="width: 100%">
+              <a-alert
+                message="本结算台是基于支付网关搭建的演示模块，支付后可以通过管理端进行退款操作，"
+                type="warning"
+                show-icon
+                style="margin-bottom: 20px; padding: 15px"
+              />
+              <div class="paydemo-type-content">
+                <div class="paydemo-type-name">微信支付</div>
+                <div class="paydemo-type-body">
+                  <div v-for="item in WxPayList" :key="item.payInfo.payWay" @click="handleActive(item.payInfo)">
+                    <div :class="item.payInfo === currentActive ? 'colorChange' : 'paydemoType'">
+                      <img :src="item.img" class="paydemo-type-img" />
+                      <span class="color-change">{{ item.title }}</span>
+                    </div>
+                  </div>
+                  <div style="position: relative">
+                    <div class="paydemo-type-h5" @mouseover="wxHover = true" @mouseleave="wxHover = false">
+                      <img src="./imgs/wechat/wx_h5.svg" class="paydemo-type-img" />
+                      <span>微信H5</span>
+                    </div>
+                    <div class="paydemo-type-h5 codeImg_wx_h5" v-if="wxHover">
+                      <qr-code :options="{ margin: 2 }" :width="150" :value="wxH5Url" />
+                      <span>请使用手机浏览器扫码</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="paydemo-type-name">支付宝支付</div>
+                <div class="paydemo-type-body">
+                  <div v-for="item in AliPayList" :key="item.payInfo.payWay" @click="handleActive(item.payInfo)">
+                    <div :class="item.payInfo === currentActive ? 'colorChange' : 'paydemoType'">
+                      <img :src="item.img" class="paydemo-type-img" />
+                      <span class="color-change">{{ item.title }}</span>
+                    </div>
+                  </div>
+                  <div style="position: relative">
+                    <div class="paydemo-type-h5" code="ALI_WAP" @mouseover="aliHover = true" @mouseleave="aliHover = false">
+                      <img src="./imgs/ali/ali_wap.svg" class="paydemo-type-img" />
+                      <span>支付宝WAP</span>
+                    </div>
+                    <div class="paydemo-type-h5 codeImg_wx_h5" v-if="aliHover">
+                      <qr-code :options="{ margin: 2 }" :width="150" :value="aliH5Url" />
+                      <span>请使用手机浏览器扫码</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="paydemo-type-content">
+                <div class="paydemo-type-name">支付信息</div>
+                <a-form>
+                  <div class="paydemo-form-item">
+                    <label>业务单号：</label>
+                    <span>
+                      <a-input v-model:value="businessNo" />
+                    </span>
+                    <a-button type="primary" @click="genBusinessNo">生成</a-button>
+                  </div>
+                  <div class="paydemo-form-item">
+                    <label>支付标题：</label>
+                    <span>
+                      <a-input style="width: 300px" v-model:value="title" />
+                    </span>
+                  </div>
+                  <div class="paydemo-form-item">
+                    <label>支付金额(元)：</label>
+                    <a-radio-group v-model:value="payMoneyValue" @change="payMoneyValueChange">
+                      <a-radio :value="item.value" v-for="(item, index) in payMoneyList" :key="index">
+                        {{ item.label }}
+                      </a-radio>
+                    </a-radio-group>
+                  </div>
+                  <div style="margin-top: 20px; text-align: right">
+                    <span style="color: #fd482c; font-size: 18px; padding-right: 10px">{{ '¥ ' + totalMoney }}</span>
+                    <a-button type="primary" :disabled="currentActive.payWay == null" @click="pay">立即支付</a-button>
+                  </div>
+                </a-form>
+              </div>
+            </div>
+          </div>
+        </a-spin>
+      </div>
+      <!--  扫码弹出窗口  -->
+      <cashier-qr-code ref="cashierQrCode" @cancel="handleCancel" />
+      <!--  条码支付弹框-->
+      <cashier-bar-code ref="cashierBarCode" @cancel="handleCancel" @ok="barPay" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import CashierQrCode from './CashierQrCode.vue'
+  import CashierBarCode from './CashierBarCode.vue'
+  import { findStatusByBusinessId, simplePayCashier } from './Cashier.api'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { $ref } from 'vue/macros'
+  import { onMounted, onUnmounted } from 'vue'
+  import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
+  import { useIntervalFn } from '@vueuse/core'
+  import { payChannelEnum } from '/@/enums/payment/payChannelEnum'
+  import { payWayEnum } from '/@/enums/payment/payWayEnum'
+
+  const { createMessage } = useMessage()
+
+  const cashierQrCode = $ref<any>()
+  const cashierBarCode = $ref<any>()
+
+  // 业务单号
+  let businessNo = $ref('')
+  let title = $ref('测试支付')
+  let loading = $ref(false)
+  // 微信 h5
+  let wxH5Url = $ref('cs')
+  let wxHover = $ref(false)
+  // 支付宝 h5
+  let aliH5Url = $ref('cs')
+  let aliHover = $ref(false)
+  // 当前选择支付渠道和方式
+  let currentActive = $ref({
+    payChannel: null,
+    payWay: null,
+  })
+  let AliPayList = $ref([
+    {
+      img: new URL('./imgs/ali/ali_qr.svg', import.meta.url).href,
+      title: '二维码支付',
+      payInfo: { payChannel: payChannelEnum.ALI, payWay: payWayEnum.QRCODE },
+    },
+    {
+      img: new URL('./imgs/ali/ali_bar.svg', import.meta.url).href,
+      title: '条码支付',
+      payInfo: { payChannel: payChannelEnum.ALI, payWay: payWayEnum.BARCODE },
+    },
+    {
+      img: new URL('./imgs/ali/ali_pc.svg', import.meta.url).href,
+      title: 'PC支付',
+      payInfo: { payChannel: payChannelEnum.ALI, payWay: payWayEnum.WEB },
+    },
+    {
+      img: new URL('./imgs/ali/ali_wap.svg', import.meta.url).href,
+      title: 'wap支付',
+      payInfo: { payChannel: payChannelEnum.ALI, payWay: payWayEnum.WAP },
+    },
+  ])
+  let WxPayList = $ref([
+    {
+      img: new URL('./imgs/wechat/wx_native.svg', import.meta.url),
+      title: '二维码支付',
+      payInfo: { payChannel: payChannelEnum.WECHAT, payWay: payWayEnum.QRCODE },
+    },
+    {
+      img: new URL('./imgs/wechat/wx_bar.svg', import.meta.url),
+      title: '条码支付',
+      payInfo: { payChannel: payChannelEnum.WECHAT, payWay: payWayEnum.BARCODE },
+    },
+  ])
+  // 结算台下部分内容
+  let payMoneyList = [
+    // 支付金额列表
+    { label: '0.01', value: 0.01 },
+    { label: '0.1', value: 0.1 },
+    { label: '9.99', value: 9.99 },
+  ]
+  let payMoneyValue = $ref(0.01)
+  let totalMoney: null | number = $ref(0.01)
+  let payMoneyShow = false
+
+  // 检查支付状态
+  const { pause, resume } = useIntervalFn(
+    () => {
+      findStatusByBusinessId(businessNo).then((res) => {
+        // 成功
+        if (res.data) {
+          createMessage.success('支付成功')
+          handleCancel()
+        }
+      })
+    },
+    1000 * 3,
+    { immediate: false },
+  )
+
+  /**
+   * 初始化业务数据
+   */
+  async function initData() {
+    // 生成业务编码
+    genBusinessNo()
+  }
+  /**
+   * 支付金额变动
+   */
+  function payMoneyValueChange(e) {
+    totalMoney = null
+    if (e.target.value === '6') {
+      payMoneyShow = true
+    } else {
+      totalMoney = e.target.value
+      payMoneyShow = false
+    }
+  }
+  /**
+   * 发起支付
+   */
+  function pay() {
+    const { payChannel, payWay } = currentActive
+    // 付款码
+    if (payWay === payWayEnum.BARCODE) {
+      cashierBarCode.init(payChannel === payChannelEnum.ALI ? '请输入支付宝条码' : '请输入微信条码')
+    } else {
+      qrPay(payChannel, payWay)
+    }
+  }
+  /**
+   * 扫码支付
+   */
+  async function qrPay(payChannel, payWay) {
+    const param = {
+      title: title,
+      businessNo: businessNo,
+      amount: totalMoney,
+      channel: payChannel,
+      payWay,
+    }
+    loading = true
+    const { data } = await simplePayCashier(param)
+    loading = false
+    // pc支付
+    if ([payWayEnum.WAP, payWayEnum.WEB].includes(payWay)) {
+      window.open(data.payBody)
+    } else if (payChannel === payChannelEnum.ALI) {
+      cashierQrCode.init(data.payBody, '请使用支付宝"扫一扫"扫码支付')
+      resume()
+    } else {
+      cashierQrCode.init(data.payBody, '请使用微信"扫一扫"扫码支付')
+      resume()
+    }
+  }
+  /**
+   * 条码支付
+   */
+  function barPay(authCode) {
+    const { payChannel, payWay } = currentActive
+    const param = {
+      title: title,
+      businessNo,
+      amount: totalMoney,
+      channel: payChannel,
+      payWay,
+      authCode,
+    }
+    simplePayCashier(param).then(() => {
+      resume()
+    })
+  }
+  /**
+   * 生成业务号
+   */
+  function genBusinessNo() {
+    businessNo = 'P' + new Date().getTime()
+  }
+  /**
+   * 当前选择的支付类型
+   */
+  function handleActive(payInfo) {
+    currentActive = payInfo
+  }
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    cashierQrCode.handleClose()
+    cashierBarCode.handleClose()
+    genBusinessNo()
+    pause()
+  }
+
+  /**
+   * 入口
+   */
+  onMounted(() => {
+    initData()
+  })
+  /**
+   * 出口
+   */
+  onUnmounted(() => {
+    handleCancel()
+  })
+</script>
+
+<style scoped lang="less">
+  @import 'style.less';
+</style>
diff --git a/src/views/paydemo/cashier/CashierBarCode.vue b/src/views/paydemo/cashier/CashierBarCode.vue
new file mode 100644
index 000000000..6da55a9ac
--- /dev/null
+++ b/src/views/paydemo/cashier/CashierBarCode.vue
@@ -0,0 +1,49 @@
+<template>
+  <a-modal :visible="visible" title="条码支付" :width="350">
+    <a-spin :spinning="loading">
+      <div>
+        <div style="margin-bottom: 10px; display: flex; flex-direction: row; justify-content: start">
+          {{ topTitle }}
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between">
+          <a-input allowClear v-model="authCode" />
+        </div>
+      </div>
+    </a-spin>
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <a-button key="forward" :loading="loading" type="primary" @click="handleOk">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { $ref } from 'vue/macros'
+
+  let visible = $ref(false)
+  let loading = $ref(false)
+  let topTitle = $ref('')
+  let authCode = $ref('')
+
+  const emits = defineEmits(['ok', 'cancel'])
+  function init(title) {
+    visible = true
+    loading = false
+    topTitle = title
+    authCode = ''
+  }
+  function handleOk() {
+    loading = true
+    emits('ok', authCode)
+  }
+  function handleCancel() {
+    handleClose()
+    emits('cancel')
+  }
+  function handleClose() {
+    visible = false
+  }
+  defineExpose({ init, handleClose })
+</script>
+
+<style scoped></style>
diff --git a/src/views/paydemo/cashier/CashierQrCode.vue b/src/views/paydemo/cashier/CashierQrCode.vue
new file mode 100644
index 000000000..28964da2a
--- /dev/null
+++ b/src/views/paydemo/cashier/CashierQrCode.vue
@@ -0,0 +1,37 @@
+<template>
+  <a-modal :visible="visible" title="扫码支付" @cancel="handleCancel" :footer="null" :width="250">
+    <div style="display: flex; flex-direction: column; align-items: center; padding-top: 15px">
+      <qr-code :options="{ margin: 0 }" :width="180" :value="qrUrl" />
+      <div class="mt-15px mb-15px" style="display: flex; flex-direction: row; align-items: center; justify-content: center">
+        {{ bottomTitle }}
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
+  import { $ref } from 'vue/macros'
+
+  let visible = $ref(false)
+  let icon = $ref('')
+  let bottomTitle = $ref('')
+  let qrUrl = $ref('')
+
+  const emits = defineEmits(['cancel'])
+  function init(url, title) {
+    visible = true
+    qrUrl = url
+    bottomTitle = title
+  }
+  function handleCancel() {
+    handleClose()
+    emits('cancel')
+  }
+  function handleClose() {
+    visible = false
+  }
+  defineExpose({ init, handleClose })
+</script>
+
+<style scoped></style>
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_app.svg b/src/views/paydemo/cashier/imgs/ali/ali_app.svg
new file mode 100644
index 000000000..ebf11883e
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_app.svg
@@ -0,0 +1 @@
+<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_bar.svg b/src/views/paydemo/cashier/imgs/ali/ali_bar.svg
new file mode 100644
index 000000000..f249f4ac4
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_bar.svg
@@ -0,0 +1,2 @@
+<?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="#1977FD"></path><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="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_jsapi.svg b/src/views/paydemo/cashier/imgs/ali/ali_jsapi.svg
new file mode 100644
index 000000000..271349545
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_jsapi.svg
@@ -0,0 +1 @@
+<svg t="1646052857163" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3441" width="40" height="40"><path d="M486.783502 63.372299l37.690175 0 0 112.36441 53.268713 67.60592 73.387878 93.168312L504.379073 336.510942 357.576711 336.510942l73.388901-93.168312 55.821984-70.861213L486.787596 63.372299 486.783502 63.372299zM268.829294 886.785453l77.081167 0 0-504.708594 319.458773 0 0 504.708594 61.07896 0L726.448194 480.060058l139.242837 0 0 406.723348 93.004575 0 0 72.125057c-342.010453 0-546.954747 0-893.751433 0L64.944173 345.165458l203.88512 120.241176L268.829294 886.785453 268.829294 886.785453zM516.720738 740.490675l0 56.816685 44.13015 0 0-56.816685L516.720738 740.490675 516.720738 740.490675zM120.156238 654.417285l-26.706503 0 0 0 0 34.338687M221.975995 714.611043l0 34.312079 26.73004 0 0-34.312079L221.975995 714.611043 221.975995 714.611043zM221.975995 532.499853l0 34.288542 26.73004 0 0-34.288542L221.975995 532.499853 221.975995 532.499853zM179.131179 532.499853l0 34.288542 26.71162 0 0-34.288542L179.131179 532.499853 179.131179 532.499853zM135.294732 714.611043l0 34.312079 26.682966 0 0-34.312079L135.294732 714.611043 135.294732 714.611043zM135.294732 592.646537l0 34.360177 26.682966 0 0-34.360177L135.294732 592.646537 135.294732 592.646537zM93.449735 532.499853l0 34.288542 26.706503 0 0-34.288542L93.449735 532.499853 93.449735 532.499853zM751.041468 664.550549l0 42.647308 33.171038 0 0-42.647308L751.041468 664.550549 751.041468 664.550549zM751.041468 739.326097l0 42.601257 33.171038 0 0-42.601257L751.041468 739.326097 751.041468 739.326097zM751.041468 513.109317l0 42.646285 33.171038 0L784.212506 513.109317 751.041468 513.109317 751.041468 513.109317zM802.994146 587.835743l0 42.647308 33.150571 0 0-42.647308L802.994146 587.835743 802.994146 587.835743zM802.994146 513.109317l0 42.646285 33.150571 0L836.144717 513.109317 802.994146 513.109317 802.994146 513.109317zM382.289717 740.490675l0 56.816685 44.153687 0 0-56.816685L382.289717 740.490675 382.289717 740.490675zM382.289717 538.844656l0 56.766541 44.153687 0 0-56.766541L382.289717 538.844656 382.289717 538.844656zM583.234738 538.844656l0 56.766541 44.153687 0 0-56.766541L583.234738 538.844656 583.234738 538.844656zM516.720738 538.844656l0 56.766541 44.13015 0 0-56.766541L516.720738 538.844656 516.720738 538.844656zM450.476904 538.844656l0 56.766541 44.155734 0 0-56.766541L450.476904 538.844656 450.476904 538.844656zM382.289717 439.331541l0 56.790078 44.153687 0 0-56.790078L382.289717 439.331541 382.289717 439.331541zM583.234738 439.331541l0 56.790078 44.153687 0 0-56.790078L583.234738 439.331541 583.234738 439.331541zM516.720738 439.331541l0 56.790078 44.13015 0 0-56.790078L516.720738 439.331541 516.720738 439.331541zM382.289717 641.052265l0 56.744027 44.153687 0 0-56.744027L382.289717 641.052265 382.289717 641.052265zM583.234738 641.052265l0 56.744027 44.153687 0 0-56.744027L583.234738 641.052265z" p-id="3442" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_pc.svg b/src/views/paydemo/cashier/imgs/ali/ali_pc.svg
new file mode 100644
index 000000000..2a7527703
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_pc.svg
@@ -0,0 +1 @@
+<svg t="1627279878333" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8535" width="40" height="40"><path d="M1141.76 855.04h-286.72c0 40.96 30.72 71.68 71.68 71.68h107.52c20.48 0 35.84 15.36 35.84 35.84s-15.36 35.84-35.84 35.84h-783.36c-20.48 0-35.84-15.36-35.84-35.84s15.36-35.84 35.84-35.84h107.52c40.96 0 71.68-30.72 71.68-71.68h-286.72c-76.8 0-143.36-61.44-143.36-143.36v-568.32c0-76.8 61.44-143.36 143.36-143.36h993.28c76.8 0 143.36 61.44 143.36 143.36v568.32c5.12 76.8-56.32 143.36-138.24 143.36z m71.68-711.68c0-40.96-30.72-71.68-71.68-71.68h-993.28c-40.96 0-71.68 30.72-71.68 71.68v568.32c0 40.96 30.72 71.68 71.68 71.68h993.28c40.96 0 71.68-30.72 71.68-71.68v-568.32z m-143.36 568.32h-855.04c-40.96 0-71.68-30.72-71.68-71.68v-424.96c0-40.96 30.72-71.68 71.68-71.68h855.04c40.96 0 71.68 30.72 71.68 71.68v424.96c0 40.96-30.72 71.68-71.68 71.68z" p-id="8536" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_qr.svg b/src/views/paydemo/cashier/imgs/ali/ali_qr.svg
new file mode 100644
index 000000000..48337508a
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_qr.svg
@@ -0,0 +1,2 @@
+<?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="1627279238245" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><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="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#1977FD" p-id="4113"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/ali/ali_wap.svg b/src/views/paydemo/cashier/imgs/ali/ali_wap.svg
new file mode 100644
index 000000000..87075dbb7
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/ali/ali_wap.svg
@@ -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="1645964864184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8460" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M768.3 0 255.7 0c-70.8 0-128.1 57.4-128.1 128.1l0 767.8c0 70.8 57.4 128.1 128.1 128.1L512 1024l256.3 0c70.8 0 128.1-57.4 128.1-128.1L896.4 128.1C896.4 57.3 839 0 768.3 0zM383.9 96.1c0-17.7 14.3-32 32-32l192.2 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32L415.9 128.1C398.2 128.1 383.9 113.8 383.9 96.1L383.9 96.1zM512 959.9 512 959.9 512 959.9c-35.4 0-64.1-28.8-64.1-64.1 0-35.4 28.7-64.1 64.1-64.1l0 0 0 0c35.4 0 64.1 28.7 64.1 64.1C576.1 931.1 547.4 959.9 512 959.9zM832.3 755.6c0 6.7-5.4 12.2-12.2 12.2L203.9 767.8c-6.7 0-12.2-5.4-12.2-12.2L191.7 204.3c0-6.7 5.4-12.2 12.2-12.2l616.3 0c6.7 0 12.2 5.4 12.2 12.2L832.4 755.6z" p-id="8461" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/qr/auto_bar.svg b/src/views/paydemo/cashier/imgs/qr/auto_bar.svg
new file mode 100644
index 000000000..19c9d87d3
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/qr/auto_bar.svg
@@ -0,0 +1 @@
+<svg t="1627279968335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11104" width="40" height="40"><path d="M513.39159 457.491692H56.97641c-24.576 0-44.530872 19.928615-44.530872 44.530872v456.441436c0 24.576 19.954872 44.530872 44.530872 44.530872h456.441436c24.576 0 44.530872-19.954872 44.530872-44.530872V502.022564c0-24.602256-19.954872-44.530872-44.530872-44.530872z m-52.250257 419.971282c0 15.885128-12.865641 28.750769-28.724512 28.75077H137.924923c-15.885128 0-28.724513-12.865641-28.724513-28.75077V582.997333c0-15.885128 12.865641-28.750769 28.724513-28.750769h294.491898c15.858872 0 28.724513 12.865641 28.724512 28.750769v294.465641z m229.638564-375.44041v282.151385c0 24.628513 21.609026 44.530872 48.311795 44.530872h1.575385c26.650256 0 48.311795-19.902359 48.311795-44.530872V502.022564c0-24.602256-21.661538-44.530872-48.311795-44.530872h-1.575385c-26.702769 0-48.311795 19.928615-48.311795 44.530872z m283.516718-44.530872h-1.575384c-26.676513 0-48.311795 19.928615-48.311795 44.530872v70.550974c0 24.602256 21.635282 44.530872 48.311795 44.530872h1.575384c26.702769 0 48.311795-19.954872 48.311795-44.530872V502.022564c0-24.602256-21.609026-44.530872-48.311795-44.530872z m0 213.674667h-1.575384c-26.676513 0-48.311795 19.902359-48.311795 44.530872v189.098666h-189.098667c-24.628513 0-44.530872 21.609026-44.530872 48.311795v1.575385c0 26.702769 19.902359 48.311795 44.530872 48.311795h242.766769c11.395282 0 21.635282-4.726154 29.512206-12.393026 0.472615-0.393846 0.945231-0.787692 1.391589-1.234051a23.998359 23.998359 0 0 0 1.234052-1.39159c7.614359-7.876923 12.393026-18.116923 12.393025-29.512205v-242.766769c0-24.628513-21.609026-44.530872-48.311795-44.530872zM26.25641 347.083487h68.870564c7.614359 0 13.837128-6.196513 13.837129-13.863384V28.488205a13.837128 13.837128 0 0 0-13.837129-13.837128H26.25641a13.863385 13.863385 0 0 0-13.837128 13.837128v304.731898c0 7.666872 6.222769 13.863385 13.837128 13.863384z m166.570667 0H219.766154a13.837128 13.837128 0 0 0 13.837128-13.863384V28.488205A13.837128 13.837128 0 0 0 219.766154 14.651077H192.827077a13.837128 13.837128 0 0 0-13.863385 13.837128v304.731898c0 7.666872 6.170256 13.863385 13.863385 13.863384z m333.718974 0.787692c-0.341333 0-0.630154-0.131282-0.94523-0.183794-0.288821 0.052513-0.65641 0.183795-0.997744 0.183794h1.969231zM524.603077 15.333744c0.341333 0 0.708923 0.157538 0.997744 0.210051 0.315077-0.052513 0.603897-0.210051 0.971487-0.210051h-1.969231z m0.236308 331.644718a13.810872 13.810872 0 0 0 13.443282-13.758359V28.488205a13.810872 13.810872 0 0 0-13.443282-13.758359 13.784615 13.784615 0 0 0-13.443282 13.758359v304.731898c0 7.509333 5.986462 13.522051 13.443282 13.758359zM1009.112615 14.651077H940.242051a13.837128 13.837128 0 0 0-13.837128 13.837128v304.731898c0 7.666872 6.196513 13.863385 13.837128 13.863384h68.870564c7.614359 0 13.837128-6.196513 13.837129-13.863384V28.488205a13.837128 13.837128 0 0 0-13.837129-13.837128z m-193.509743 332.406154h27.464205a13.837128 13.837128 0 0 0 13.863385-13.837128V28.488205a13.837128 13.837128 0 0 0-13.863385-13.837128h-27.437949a13.863385 13.863385 0 0 0-13.863384 13.837128v304.731898c0 7.666872 6.222769 13.863385 13.863384 13.863384z m-470.829949 0h82.970256a13.837128 13.837128 0 0 0 13.863385-13.837128V28.488205a13.837128 13.837128 0 0 0-13.837128-13.837128H344.746667a13.837128 13.837128 0 0 0-13.837129 13.837128v304.731898c0 7.666872 6.196513 13.863385 13.837129 13.863384z m387.649641-13.837128V28.488205a13.863385 13.863385 0 0 0-13.863385-13.837128h-82.970256a13.837128 13.837128 0 0 0-13.810872 13.837128v304.731898c0 7.666872 6.170256 13.863385 13.810872 13.863384h82.970256a13.863385 13.863385 0 0 0 13.863385-13.863384z" fill="#47585C" p-id="11105"></path><path d="M359.187692 641.732923H211.101538a14.441026 14.441026 0 0 0-14.441025 14.441026v148.086154c0 7.981949 6.485333 14.441026 14.441025 14.441025h148.086154a14.441026 14.441026 0 0 0 14.441026-14.441025v-148.086154a14.441026 14.441026 0 0 0-14.441026-14.441026z" fill="#C19555" p-id="11106"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/qr/qr_cashier.svg b/src/views/paydemo/cashier/imgs/qr/qr_cashier.svg
new file mode 100644
index 000000000..40cdcfbc4
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/qr/qr_cashier.svg
@@ -0,0 +1 @@
+<svg t="1627279924625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9574" width="40" height="40"><path d="M896.011378 917.691733h-223.965867v-53.054577h187.511467a25.070933 25.070933 0 0 0 25.070933-25.070934v-116.4288h53.1456v152.758045a41.7792 41.7792 0 0 1-41.7792 41.796266z m-170.797511-176.856177V281.008356h53.1456v455.964444z m159.4368-558.569245a25.070933 25.070933 0 0 0-25.070934-25.070933h-187.534222v-53.048889h223.943111a41.7792 41.7792 0 0 1 41.7792 41.7792v135.082667H884.622222V182.272z m-301.1584 98.742045h78.045866v459.832888h-78.045866z m-197.626311 0h55.904711v459.832888l-55.904711-3.868444v-455.964444zM34.321067 875.912533v-152.775111h53.1456v116.417422a25.070933 25.070933 0 0 0 25.070933 25.070934h205.226667v53.054578h-241.664a41.7792 41.7792 0 0 1-41.7792-41.767823z m141.7216-135.076977V281.008356h17.7152v459.832888z m-88.576-558.569245v98.742045H34.321067V145.925689a41.7792 41.7792 0 0 1 41.7792-41.7792h241.664v53.048889H112.5376a25.070933 25.070933 0 0 0-25.070933 25.076622z" p-id="9575"></path><path d="M229.302044 279.7568h70.360178v462.324622H229.302044z" fill="#70E07B" p-id="9576"></path><path d="M495.047111 279.7568h35.180089v462.324622H495.047111z" fill="#EFFF3F" p-id="9577"></path><path d="M763.397689 566.801067a208.384 208.384 0 1 0 208.384 208.384 208.384 208.384 0 0 0-208.384-208.384z m110.427022 157.2864L750.267733 847.644444a15.104 15.104 0 0 1-21.361777 0l-75.935289-75.935288a15.104 15.104 0 0 1 21.361777-21.361778l65.251556 65.251555 112.878933-112.873244a15.104 15.104 0 0 1 21.361778 21.361778z" fill="#3AA5EA" p-id="9578"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/wechat/w_pay.png b/src/views/paydemo/cashier/imgs/wechat/w_pay.png
new file mode 100644
index 000000000..d6f8a107f
Binary files /dev/null and b/src/views/paydemo/cashier/imgs/wechat/w_pay.png differ
diff --git a/src/views/paydemo/cashier/imgs/wechat/wx_app.svg b/src/views/paydemo/cashier/imgs/wechat/wx_app.svg
new file mode 100644
index 000000000..e142d6238
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/wechat/wx_app.svg
@@ -0,0 +1 @@
+<svg t="1627280011498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12741" width="40" height="40"><path d="M404.992 628.224c-53.76 32.768-61.952-18.432-61.952-18.432L275.968 439.808c-26.112-80.896 22.528-36.352 22.528-36.352s41.472 34.304 73.216 54.784c31.744 20.992 67.584 6.144 67.584 6.144L880.64 243.712c-81.92-110.08-216.576-181.76-368.64-181.76-248.32 0-450.048 190.976-450.048 426.496 0 135.68 66.56 256 170.496 334.336l-18.944 116.736s-9.216 34.304 22.528 18.432c21.504-10.752 76.8-49.152 109.056-72.704 53.248 19.968 109.568 30.208 166.4 30.208 248.32 0 450.048-190.976 450.048-426.496 0-68.096-16.896-132.608-47.104-189.952-140.288 91.136-466.944 304.128-509.44 329.216z" fill="#41B035" p-id="12742"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/wechat/wx_bar.svg b/src/views/paydemo/cashier/imgs/wechat/wx_bar.svg
new file mode 100644
index 000000000..2ef5534cd
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/wechat/wx_bar.svg
@@ -0,0 +1,2 @@
+<?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><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"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/wechat/wx_h5.svg b/src/views/paydemo/cashier/imgs/wechat/wx_h5.svg
new file mode 100644
index 000000000..b06ec58b0
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/wechat/wx_h5.svg
@@ -0,0 +1 @@
+<svg t="1645964226710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2123" width="48" height="48"><path d="M136.533333 85.333333l68.266667 768 306.773333 85.333334 307.626667-85.333334 68.266667-768H136.533333z m590.933334 241.493334h-362.666667l11.093333 122.453333H716.8l-23.893333 266.24-180.906667 49.92-180.906667-50.346667-11.093333-124.586666h68.266667l6.4 72.533333 117.333333 31.573333 3.413333-0.853333 113.493334-30.72 12.8-145.066667h-328.533334L290.133333 258.56h443.733334l-6.4 68.266667z" fill="#04C361" opacity=".99" p-id="2124"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/wechat/wx_jsapi.svg b/src/views/paydemo/cashier/imgs/wechat/wx_jsapi.svg
new file mode 100644
index 000000000..3a6d15b70
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/wechat/wx_jsapi.svg
@@ -0,0 +1,2 @@
+<?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="1627279797174" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" 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="M797.14798 481.753a269.194 269.194 0 0 0 102.892-211.929C900.03998 120.99 779.02998 0 630.15698 0 481.28298 0 360.27398 120.99 360.27398 269.824c0 85.878 40.33 162.462 102.912 211.929A450.974 450.974 0 0 0 309.84198 582.774c-85.543 85.524-132.608 199.208-132.608 320.236 0 25.01 0 51.712 0.197 76.367a44.898 44.898 0 0 0 44.82 44.623h816.01a44.8 44.8 0 0 0 44.82-44.623V903.01c0-121.009-47.066-234.732-132.609-320.236a451.072 451.072 0 0 0-153.344-101.021z" p-id="7666" fill="#04C361"></path><path d="M1186.18898 580.391A378.644 378.644 0 0 0 1061.81198 473.03a223.783 223.783 0 0 0 64.237-157.657c0-49.742-15.872-96.67-45.746-136.074A225.34 225.34 0 0 0 964.70998 99.9a37.297 37.297 0 0 0-46.14 25.718c-5.592 19.89 5.79 40.724 25.6 46.356 63.114 18.196 107.363 77.135 107.363 143.4a148.913 148.913 0 0 1-81.23 133.06 38.065 38.065 0 0 0-20.363 36.608c1.32 15.203 11.58 28.16 25.975 32.65 125.479 39.601 209.703 155.038 209.703 287.173v63.074c0 20.638 16.62 37.534 37.16 37.711h0.196a37.396 37.396 0 0 0 37.337-37.336V805.06c-0.197-81.644-25.777-159.35-74.142-224.69z m-901.77-62.503a36.982 36.982 0 0 0 25.955-32.65 37.455 37.455 0 0 0-20.362-36.628 148.913 148.913 0 0 1-81.231-133.06c0-66.245 44.071-125.184 107.382-143.4a37.612 37.612 0 0 0 25.58-46.356 37.376 37.376 0 0 0-46.139-25.718 225.32 225.32 0 0 0-115.593 79.4 223.252 223.252 0 0 0-45.746 136.074c0 60.258 23.533 116.381 64.237 157.676A380.475 380.475 0 0 0 74.14498 580.569 373.839 373.839 0 0 0 0.00198 805.258v63.232c0 20.657 16.798 37.356 37.356 37.356h0.197a37.317 37.317 0 0 0 37.14-37.73V805.06c0-132.332 84.401-247.769 209.723-287.173z" p-id="7667" fill="#04C361"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/imgs/wechat/wx_native.svg b/src/views/paydemo/cashier/imgs/wechat/wx_native.svg
new file mode 100644
index 000000000..ad40b2a2c
--- /dev/null
+++ b/src/views/paydemo/cashier/imgs/wechat/wx_native.svg
@@ -0,0 +1,2 @@
+<?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="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><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="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"></path></svg>
\ No newline at end of file
diff --git a/src/views/paydemo/cashier/style.less b/src/views/paydemo/cashier/style.less
new file mode 100644
index 000000000..45c8e4fe8
--- /dev/null
+++ b/src/views/paydemo/cashier/style.less
@@ -0,0 +1,79 @@
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding-bottom: 80px;
+  margin-top: 81px;
+}
+.paydemo {
+  .content {
+    max-width: 1120px;
+    margin: 0 auto;
+  }
+  .paydemo-type-content {
+    padding: 20px;
+    margin-bottom: 20px;
+    background-color: #FFFFFF;
+    border-radius: 6px;
+    p {
+      margin-bottom: 10px;
+      text-align: left;
+    }
+  }
+  .colorChange {
+    color: #1953ff;
+    border: solid 2px #1953ff;
+    padding: 12px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .paydemoType {
+    padding: 12px;
+    border: solid 2px #e2e2e2;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .paydemo-type-img {
+    width: 40px;
+    height: 40px;
+    vertical-align: center;
+  }
+  .paydemo-type-name {
+    font-size: 16px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+  }
+  .paydemo-type-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .paydemo-type-h5 {
+    padding: 12px;
+    border: solid 2px #e2e2e2;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  .codeImg_wx_h5 {
+    position: absolute;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #ffffff;
+    width: 160px;
+  }
+  .paydemo-form-item {
+    height: 38px;
+    margin-bottom: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+img {
+  border: 0;
+  vertical-align: middle;
+}
diff --git a/src/views/payment/record/callback/PayCallbackRecordInfo.vue b/src/views/payment/record/callback/PayCallbackRecordInfo.vue
index fd415299e..9605a7ca4 100644
--- a/src/views/payment/record/callback/PayCallbackRecordInfo.vue
+++ b/src/views/payment/record/callback/PayCallbackRecordInfo.vue
@@ -13,13 +13,13 @@
         <a-descriptions-item label="本地订单ID">
           {{ form.orderId }}
         </a-descriptions-item>
-        <a-descriptions-item label="支付网关订单号">
+        <a-descriptions-item label="网关订单号">
           {{ form.gatewayOrderNo }}
         </a-descriptions-item>
         <a-descriptions-item label="支付通道">
           <a-tag>{{ dictConvert('PayChannel', form.channel) }}</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="支付通道">
+        <a-descriptions-item label="回调类型">
           <a-tag>{{ dictConvert('PaymentType', form.callbackType) }}</a-tag>
         </a-descriptions-item>
         <a-descriptions-item label="通知消息">