2024.06.29

- 完成代金券操作页和代金券入账页和代金券出账页和充值列表页，并对接代金券相关接口；

src/api/table.js

@@ -7,3 +7,12 @@ export function getList(params) {
     params
   })
 }
+
+// 通联支付入口支付
+export function gotoOrderH5PayApi(data) {
+  return request({
+    url: '/shopVoucherOrder/allinPay/gotoPay',
+    method: 'post',
+    data
+  })
+}

src/api/voucherManagement/voucherAccounting.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 代金券入账记录
+export function getEntryRecordShopVoucher(data) {
+  return request({
+    url: '/shopVoucherEntryRecord/entryRecord',
+    method: 'post',
+    data
+  })
+}

src/api/voucherManagement/voucherOperation.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+// 分页查询平台代金券
+export function getAllPlatformVoucher(data) {
+  return request({
+    url: '/platformVoucher/getAll',
+    method: 'post',
+    data
+  })
+}
+
+// 充值代金券统计
+export function getByUserOrderShopVoucher(params) {
+  return request({
+    url: '/shopVoucherEntryRecord/getByUserOrderVoucher',
+    method: 'get',
+    params
+  })
+}
+
+// 兑换代金券统计
+export function getShopTotalShopVoucher(data) {
+  return request({
+    url: '/shopVoucherEntryRecord/shopTotal',
+    method: 'post',
+    data
+  })
+}
+
+// 充值代金券转赠
+export function updateTransferRechargeShopVoucher(data) {
+  return request({
+    url: '/shopVoucherEntryRecord/getByUserOrderVoucher',
+    method: 'post',
+    data
+  })
+}
+
+// 兑换代金券转赠
+export function updateTransferExchangeShopVoucher(data) {
+  return request({
+    url: '/shopVoucherEntryRecord/transfer',
+    method: 'post',
+    data
+  })
+}
+
+// 代金券购买提交订单
+export function submitShopVoucherEntryRecord(data) {
+  return request({
+    url: '/shopVoucherEntryRecord/submitVoucher',
+    method: 'post',
+    data
+  })
+}

src/api/voucherManagement/voucherOrder.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 分页查询用户充值代金券订单表
+export function getAllShopVoucherEntryRecord(params) {
+  return request({
+    url: '/shopVoucherEntryRecord/getAll',
+    method: 'get',
+    params
+  })
+}

src/api/voucherManagement/voucherOutgoing.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 代金券出账记录
+export function getOutgoingRecordShopVoucher(data) {
+  return request({
+    url: '/shopVoucherOutgoingRecord/outgoingRecord',
+    method: 'post',
+    data
+  })
+}

src/components/CashierList/index.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="cashier-list-content" :style="{ padding, borderRadius: radius }">
+    <div v-if="show">
+      <slot name="header" :payment-list="paymentList"></slot>
+      <el-radio-group :value="paymentMode" @input="handleChangePaymentMode">
+        <div v-for="payment in paymentList" :key="payment.paymentMode" class="cashier" @click="handleClickPaymentMode(payment)">
+          <div class="cashier-item">
+            <div class="icon-text">
+              <el-image
+                lazy :src="payment.icon"
+                style="width: 18px;height:18px;" fit="contain"
+              />
+            </div>
+            <div style="margin-left: 8px;">
+              <el-radio
+                :disabled="payment.disabled" :label="payment.paymentMode"
+              >
+                <span>{{ payment.label }}</span>
+                <span v-if="(payment.paymentMode === '7')">（佣金：{{ Number.parseFloat(Number(pricePlatformInfo.commissionPrice || 0)).toFixed(2) }}）</span>
+                <span v-if="(payment.paymentMode === '5')">（余额：{{ Number.parseFloat(Number(pricePlatformInfo.rechargePrice || 0)).toFixed(2) }}）</span>
+                <span v-if="(payment.paymentMode === '8')">（余额：{{ Number.parseFloat(Number(pricePlatformInfo.beeCoinPrice || 0)).toFixed(2) }}）</span>
+                <span v-if="(payment.paymentMode === '6')">（余额：{{ priceShopInfo.current }}）</span>
+                <span v-if="(paymentMode === '3') && (paymentMode === payment.paymentMode)">
+                  （手续费：￥{{ flowerObj.hbServiceChargeTotal }}）
+                </span>
+              </el-radio>
+            </div>
+          </div>
+          <!-- 花呗分期 -->
+          <div v-if="(paymentMode === '3') && (paymentMode === payment.paymentMode)" class="ali-hb-content">
+            <el-radio-group :value="flowerObj.hbByStagesPeriods" @input="handleChangePeriods">
+              <div v-for="(flowerItem, index) in flowerObj.hbByStagesList" :key="index" class="cashier">
+                <div class="cashier-item">
+                  <div class="icon-text">
+                    {{ flowerItem.numberOfStages }}期（￥{{ flowerItem.price }}/期）
+                  </div>
+                  <div style="display: flex;align-items: center;font-size: 24px;">
+                    手续费：￥{{ flowerItem.serviceCharge }}/期
+                    <el-radio
+                      style="margin-left: 15px;" :disabled="flowerItem.disabled"
+                      :label="flowerItem.numberOfStages"
+                    >
+                    </el-radio>
+                  </div>
+                </div>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getOrderHuabeiConfigApi, getPricePlatformAllApi, getRechargeTotalCustomersApi } from '../../api/anotherTFInterface'
+
+export default {
+  name: 'CashierList',
+  props: {
+    padding: {
+      type: String,
+      default: '0px 15px'
+    },
+    missingPriceText: {
+      type: String,
+      default: '缺少金额'
+    },
+    radius: {
+      type: String,
+      default: '0'
+    },
+    pricePay: {
+      type: Number,
+      default: 0
+    },
+    // 是否显示，用于默认某一个支付
+    show: {
+      type: Boolean,
+      default: false
+    },
+    showWechatPay: {
+      type: Boolean,
+      default: false
+    },
+    showAliPay: {
+      type: Boolean,
+      default: false
+    },
+    showHuabeiPay: {
+      type: Boolean,
+      default: false
+    },
+    showTonglianPay: {
+      type: Boolean,
+      default: true
+    },
+    // 佣金支付
+    showCommissionPay: {
+      type: Boolean,
+      default: false
+    },
+    // 平台余额支付
+    showPlatformPay: {
+      type: Boolean,
+      default: false
+    },
+    // 消费金支付
+    showTransactionPay: {
+      type: Boolean,
+      default: false
+    },
+    // 惠市宝支付
+    showHuiShiBaoPay: {
+      type: Boolean,
+      default: false
+    },
+    // 用户的商家充值的余额支付
+    shopIdPay: { // 某商家的‘用户的商家充值的余额支付’对应的商家Id
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      paymentMode: '', // 支付方式 1微信 2支付宝 3花呗分期
+      paymentList: [],
+      // 花呗相关
+      flowerObj: {
+        huabeiChargeType: 0, // 花呗手续费支付方式 1-商户支付 2-用户支付 后端接口返回
+        hbByStagesPeriods: '-1', // 花呗分期期数 3 6 12
+        hbByStagesList: [
+          {
+            rate: 0,
+            price: 0,
+            numberOfStages: '3',
+            serviceCharge: 0,
+            disabled: false
+          },
+          {
+            rate: 0,
+            price: 0,
+            numberOfStages: '6',
+            serviceCharge: 0,
+            disabled: false
+          },
+          {
+            rate: 0,
+            price: 0,
+            numberOfStages: '12',
+            serviceCharge: 0,
+            disabled: false
+          }
+        ], // 花呗手续费比例列表 【{3期}，{6期}，{12期}】
+        hbServiceChargeTotal: 0 // 花呗支付总手续费
+      },
+      // 平台余额相关
+      pricePlatformInfo: {
+        rechargePrice: 0,
+        commissionPrice: 0,
+        beeCoinPrice: 0
+      },
+      // 用户的商家充值的余额相关
+      priceShopInfo: {
+        current: 0
+      }
+    }
+  },
+  watch: { // 对于watch，按书写顺序执行（如果由同步代码触发）。shopIdPay->pricePay
+    showCommissionPay: {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          uni.showLoading()
+          if (!this.paymentList.find((item) => item.paymentMode === '7')) {
+            this.paymentList.push({
+              label: '佣金支付',
+              paymentMode: '7',
+              icon: require('../../assets/images/user/pay/yongjin.png'),
+              disabled: true
+            })
+          }
+          getPricePlatformAllApi({})
+            .then((res) => {
+              this.pricePlatformInfo = res.data
+              this.paymentList.find((item) => item.paymentMode === '7').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.commissionPrice)
+              if (this.paymentList.find((item) => item.paymentMode === '7').disabled && (this.paymentMode === '7')) this.handleSetDisable()
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+            .catch((e) => {
+              if (this.paymentMode === '7') this.handleSetDisable()
+              if (this.paymentList.find((item) => item.paymentMode === '7')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '7'), 1)
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+        } else {
+          if (this.paymentMode === '7') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '7')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '7'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    showPlatformPay: {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          uni.showLoading()
+          if (!this.paymentList.find((item) => item.paymentMode === '5')) {
+            this.paymentList.push({
+              label: '平台余额支付',
+              paymentMode: '5',
+              icon: require('../../assets/images/user/pay/platform-pay.png'),
+              disabled: true
+            })
+          }
+          getPricePlatformAllApi({})
+            .then((res) => {
+              this.pricePlatformInfo = res.data
+              this.paymentList.find((item) => item.paymentMode === '5').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.rechargePrice)
+              if (this.paymentList.find((item) => item.paymentMode === '5').disabled && (this.paymentMode === '5')) this.handleSetDisable()
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+            .catch((e) => {
+              if (this.paymentMode === '5') this.handleSetDisable()
+              if (this.paymentList.find((item) => item.paymentMode === '5')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '5'), 1)
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+        } else {
+          if (this.paymentMode === '5') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '5')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '5'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    showTransactionPay: {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          uni.showLoading()
+          if (!this.paymentList.find((item) => item.paymentMode === '8')) {
+            this.paymentList.push({
+              label: '消费金支付',
+              paymentMode: '8',
+              icon: require('../../assets/images/user/pay/jiaoyijin.png'),
+              disabled: true
+            })
+          }
+          getPricePlatformAllApi({})
+            .then((res) => {
+              this.pricePlatformInfo = res.data
+              this.paymentList.find((item) => item.paymentMode === '8').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.beeCoinPrice)
+              if (this.paymentList.find((item) => item.paymentMode === '8').disabled && (this.paymentMode === '8')) this.handleSetDisable()
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+            .catch((e) => {
+              if (this.paymentMode === '8') this.handleSetDisable()
+              if (this.paymentList.find((item) => item.paymentMode === '8')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '8'), 1)
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+        } else {
+          if (this.paymentMode === '8') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '8')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '8'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    showHuiShiBaoPay: {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          if (!this.paymentList.find((item) => item.paymentMode === '9')) {
+            this.paymentList.push({
+              label: '惠市宝支付（支持微信/支付宝/银联）',
+              paymentMode: '9',
+              icon: require('../../assets/images/user/pay/huishibao.png'),
+              disabled: true
+            })
+          }
+          this.paymentList.find((item) => item.paymentMode === '9').disabled = !this.pricePay
+          if (this.paymentList.find((item) => item.paymentMode === '9').disabled && (this.paymentMode === '9')) this.handleSetDisable()
+          this.handleNoticeFather()
+        } else {
+          if (this.paymentMode === '9') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '9')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '9'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    shopIdPay: {
+      handler(newValue, oldValue) {
+        // console.log(2222)
+        if (newValue && (newValue !== oldValue)) {
+          uni.showLoading()
+          if (!this.paymentList.find((item) => item.paymentMode === '6')) {
+            this.paymentList.push({
+              label: '商家余额支付',
+              paymentMode: '6',
+              icon: require('../../assets/images/user/pay/shop-id-pay.png'),
+              disabled: true
+            })
+          }
+          getRechargeTotalCustomersApi({ shopId: this.shopIdPay })
+            .then((res) => {
+              // console.log(3333)
+              this.priceShopInfo = res.data
+              this.paymentList.find((item) => item.paymentMode === '6').disabled = !this.pricePay || (this.pricePay > this.priceShopInfo.current)
+              if (this.paymentList.find((item) => item.paymentMode === '6').disabled && (this.paymentMode === '6')) this.handleSetDisable()
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+            .catch((e) => {
+              if (this.paymentMode === '6') this.handleSetDisable()
+              if (this.paymentList.find((item) => item.paymentMode === '6')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '6'), 1)
+              this.handleNoticeFather()
+              uni.hideLoading()
+            })
+        } else if (!newValue) {
+          if (this.paymentMode === '6') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '6')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '6'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    pricePay: {
+      handler(newValue, oldValue) {
+        // console.log(1111)
+        if (newValue !== oldValue) {
+          if (this.paymentMode === '3') {
+            this.handleHbStagesAndPrice()
+          }
+          if (this.showCommissionPay) {
+            this.paymentList.find((item) => item.paymentMode === '7').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.commissionPrice)
+            if (this.paymentList.find((item) => item.paymentMode === '7').disabled && (this.paymentMode === '7')) this.handleSetDisable()
+          } else if (!this.showCommissionPay && (this.paymentMode === '7')) {
+            this.handleSetDisable()
+          }
+          if (this.showPlatformPay) {
+            this.paymentList.find((item) => item.paymentMode === '5').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.rechargePrice)
+            if (this.paymentList.find((item) => item.paymentMode === '5').disabled && (this.paymentMode === '5')) this.handleSetDisable()
+          } else if (!this.showPlatformPay && (this.paymentMode === '5')) {
+            this.handleSetDisable()
+          }
+          if (this.showTransactionPay) {
+            this.paymentList.find((item) => item.paymentMode === '8').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.beeCoinPrice)
+            if (this.paymentList.find((item) => item.paymentMode === '8').disabled && (this.paymentMode === '8')) this.handleSetDisable()
+          } else if (!this.showTransactionPay && (this.paymentMode === '8')) {
+            this.handleSetDisable()
+          }
+          if (this.showHuiShiBaoPay) {
+            this.paymentList.find((item) => item.paymentMode === '9').disabled = !this.pricePay
+            if (this.paymentList.find((item) => item.paymentMode === '9').disabled && (this.paymentMode === '9')) this.handleSetDisable()
+          } else if (!this.showHuiShiBaoPay && (this.paymentMode === '9')) {
+            this.handleSetDisable()
+          }
+          if (this.shopIdPay) { // pricePay（明显直接）依赖shopIdPay，所以pricePay放后面
+            if (this.paymentList.find((item) => item.paymentMode === '6')) {
+              this.paymentList.find((item) => item.paymentMode === '6').disabled = !this.pricePay || (this.pricePay > this.priceShopInfo.current)
+              if (this.paymentList.find((item) => item.paymentMode === '6').disabled && (this.paymentMode === '6')) this.handleSetDisable()
+            }
+          } else if (!this.shopIdPay && (this.paymentMode === '6')) {
+            this.handleSetDisable()
+          }
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    showTonglianPay: {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          if (!this.paymentList.find((item) => item.paymentMode === '4')) {
+            this.paymentList.push({
+              label: '通联支付（微信）',
+              paymentMode: '4',
+              icon: require('../../assets/images/user/pay/tonglian.png'),
+              disabled: true
+            })
+          }
+          this.handleSetDisable()
+          this.handleNoticeFather()
+        } else {
+          if (this.paymentMode === '4') this.handleSetDisable()
+          if (this.paymentList.find((item) => item.paymentMode === '4')) this.paymentList.splice(this.paymentList.findIndex((item) => item.paymentMode === '4'), 1)
+          this.handleNoticeFather()
+        }
+      },
+      immediate: false,
+      deep: true
+    }
+  },
+  created() {
+    this.paymentList = []
+    if (this.showWechatPay) {
+      this.paymentList.push({
+        label: '微信支付',
+        paymentMode: '1',
+        icon: require('../../assets/images/user/pay/wechat_pay.png'),
+        disabled: true
+      })
+      this.handleSetDisable()
+      this.handleNoticeFather()
+    }
+    if (this.showAliPay) {
+      this.paymentList.push({
+        label: '支付宝支付',
+        paymentMode: '2',
+        icon: require('../../assets/images/user/pay/alipay.png'),
+        disabled: true
+      })
+      this.handleSetDisable()
+      this.handleNoticeFather()
+    }
+    if (this.showHuabeiPay) {
+      this.paymentList.push({
+        label: '花呗分期',
+        paymentMode: '3',
+        icon: require('../../assets/images/user/pay/huabei.png'),
+        disabled: true
+      })
+      // 获取花呗分期配置
+      getOrderHuabeiConfigApi({})
+        .then((res) => {
+          this.flowerObj.huabeiChargeType = res.data.huabeiChargeType
+          if (this.flowerObj.huabeiChargeType === 1) { // 如果后端返回的是用户支付手续费，设置费率信息
+            res.data.huabeiFeeRateList.forEach((rate, index) => {
+              this.flowerObj.hbByStagesList[index].rate = rate
+            })
+          }
+          this.handleSetDisable()
+          this.handleNoticeFather()
+        })
+    }
+    if (this.showTonglianPay) {
+      this.paymentList.push({
+        label: '通联支付（微信）',
+        paymentMode: '4',
+        icon: require('../../assets/images/user/pay/tonglian.png'),
+        disabled: true
+      })
+      this.handleSetDisable()
+      this.handleNoticeFather()
+    }
+    if (this.showCommissionPay || this.showPlatformPay || this.showTransactionPay) {
+      if (this.showCommissionPay) {
+        this.paymentList.push({
+          label: '佣金支付',
+          paymentMode: '7',
+          icon: require('../../assets/images/user/pay/yongjin.png'),
+          disabled: true
+        })
+      }
+      if (this.showPlatformPay) {
+        this.paymentList.push({
+          label: '平台余额支付',
+          paymentMode: '5',
+          icon: require('../../assets/images/user/pay/platform-pay.png'),
+          disabled: true
+        })
+      }
+      if (this.showTransactionPay) {
+        this.paymentList.push({
+          label: '消费金支付',
+          paymentMode: '8',
+          icon: require('../../assets/images/user/pay/jiaoyijin.png'),
+          disabled: true
+        })
+      }
+      getPricePlatformAllApi({})
+        .then((res) => {
+          this.pricePlatformInfo = res.data
+          if (this.showCommissionPay) {
+            this.paymentList.find((item) => item.paymentMode === '7').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.commissionPrice)
+          }
+          if (this.showPlatformPay) {
+            this.paymentList.find((item) => item.paymentMode === '5').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.rechargePrice)
+          }
+          if (this.showTransactionPay) {
+            this.paymentList.find((item) => item.paymentMode === '8').disabled = !this.pricePay || (this.pricePay > this.pricePlatformInfo.beeCoinPrice)
+          }
+          this.handleSetDisable()
+          this.handleNoticeFather()
+        })
+    }
+    if (this.showHuiShiBaoPay) {
+      this.paymentList.push({
+        label: '惠市宝支付（支持微信/支付宝/银联）',
+        paymentMode: '9',
+        icon: require('../../assets/images/user/pay/huishibao.png'),
+        disabled: true
+      })
+      this.paymentList.find((item) => item.paymentMode === '9').disabled = !this.pricePay
+      this.handleSetDisable()
+      this.handleNoticeFather()
+    }
+    if (this.shopIdPay) {
+      this.paymentList.push({
+        label: '商家余额支付',
+        paymentMode: '6',
+        icon: require('../../assets/images/user/pay/shop-id-pay.png'),
+        disabled: true
+      })
+      getRechargeTotalCustomersApi({ shopId: this.shopIdPay })
+        .then((res) => {
+          this.priceShopInfo = res.data
+          this.paymentList.find((item) => item.paymentMode === '6').disabled = !this.pricePay || (this.pricePay > this.priceShopInfo.current)
+          this.handleSetDisable()
+          this.handleNoticeFather()
+        })
+    }
+  },
+  methods: {
+    // 根据环境更改可选支付项
+    handleSetDisable() {
+      // #ifdef H5
+      if (this.showTonglianPay) {
+        this.paymentList.find((item) => item.paymentMode === '4').disabled = false
+        this.paymentMode = '4'
+      } else {
+        this.paymentList.find((item) => item.paymentMode === '4').disabled = true
+        this.paymentMode = ''
+      }
+      // #endif
+      // // #ifdef APP
+      // if (this.showTonglianPay) {
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = false
+      //   this.paymentMode = '4'
+      // } else {
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = true
+      //   this.paymentMode = ''
+      // }
+      // // #endif
+      // // #ifdef MP-WEIXIN
+      // if (this.showTonglianPay) {
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = false
+      //   this.paymentMode = '4'
+      // } else {
+      //   // this.paymentList.find((item) => item.paymentMode === '1').disabled = false
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = true
+      //   this.paymentMode = '' // 1
+      // }
+      // // #endif
+      // // #ifdef MP-ALIPAY
+      // if (this.showTonglianPay) {
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = false
+      //   this.paymentMode = '4'
+      // } else {
+      //   // this.paymentList.find((item) => item.paymentMode === '2').disabled = false
+      //   // if(this.flowerObj.huabeiChargeType) this.paymentList.find((item) => item.paymentMode === '3').disabled = false
+      //   this.paymentList.find((item) => item.paymentMode === '4').disabled = true
+      //   this.paymentMode = '' // 2
+      // }
+      // // #endif
+    },
+
+    // 支付方式改变事件
+    handleChangePaymentMode(e) {
+      console.log(e)
+      if (this.paymentList.find((item) => item.paymentMode === e).disabled) {
+        this.paymentMode = ''
+      } else {
+        this.paymentMode = e
+      }
+      if (this.paymentMode !== '3') {
+        // 支付宝支付，取消分期选择
+        this.flowerObj.hbByStagesPeriods = '-1'
+        // 3 6 12 全部禁止
+        this.flowerObj.hbByStagesList.forEach((item) => {
+          item.disabled = true
+        })
+      } else {
+        // 分期支付，默认选三期
+        this.flowerObj.hbByStagesPeriods = '3'
+      }
+      this.handleHbStagesAndPrice()
+      this.handleNoticeFather()
+    },
+    // 支付方式点击事件
+    handleClickPaymentMode(payment) {
+      if (payment.paymentMode === '7') {
+        if (!this.pricePay) {
+          uni.showToast({ title: this.missingPriceText, icon: 'none' })
+        } else if (this.pricePay > this.pricePlatformInfo.commissionPrice) {
+          uni.showToast({ title: '该余额小于支付金额，请使用其他支付方式', icon: 'none' }) // 佣金不足
+        }
+      } else if (payment.paymentMode === '5') {
+        if (!this.pricePay) {
+          uni.showToast({ title: this.missingPriceText, icon: 'none' })
+        } else if (this.pricePay > this.pricePlatformInfo.rechargePrice) {
+          uni.showToast({ title: '该余额小于支付金额，请使用其他支付方式', icon: 'none' }) // 平台余额不足
+        }
+      } else if (payment.paymentMode === '8') {
+        if (!this.pricePay) {
+          uni.showToast({ title: this.missingPriceText, icon: 'none' })
+        } else if (this.pricePay > this.pricePlatformInfo.beeCoinPrice) {
+          uni.showToast({ title: '该余额小于支付金额，请使用其他支付方式', icon: 'none' }) // 消费金余额不足
+        }
+      } else if (payment.paymentMode === '6') {
+        if (!this.pricePay) {
+          uni.showToast({ title: this.missingPriceText, icon: 'none' })
+        } else if (this.pricePay > this.priceShopInfo.current) {
+          uni.showToast({ title: '该余额小于支付金额，请使用其他支付方式', icon: 'none' }) // 商家余额不足
+        }
+      }
+    },
+
+    /**
+		 * 处理花呗期数选择
+		 * @param periods 期数
+		 * @param disabled
+		 */
+
+    handleChangePeriods(e) {
+      if (this.flowerObj.hbByStagesList.find((item) => item.numberOfStages === e).disabled) return
+      this.flowerObj.hbByStagesPeriods = e
+      this.handleHbStagesAndPrice()
+      this.handleNoticeFather()
+    },
+
+    // 处理花呗价格和手续费显示
+    handleHbStagesAndPrice() {
+      if (this.paymentMode !== '3') return
+      this.flowerObj.hbByStagesList.forEach((stages) => {
+        // 根据价格填充每一期价格和手续费信息
+        stages.price = ((this.pricePay * (1 + stages.rate / 100)) / Number(stages.numberOfStages)).toFixed(2) // 每一期价格
+        stages.serviceCharge = ((this.pricePay * (stages.rate / 100)) / Number(stages.numberOfStages)).toFixed(2) // 每一期手续费
+        // 计算总手续费
+        if (Number(stages.numberOfStages) === Number(this.flowerObj.hbByStagesPeriods)) {
+          this.flowerObj.hbServiceChargeTotal = (this.pricePay * (stages.rate / 100)).toFixed(2)
+        }
+        // 处理允许分期的区间，公式为总价格要大于分期数/100
+        this.pricePay < Number(stages.numberOfStages) / 100 ? stages.disabled = true : stages.disabled = false
+      })
+    },
+
+    // 通知父组件
+    handleNoticeFather() {
+      this.$emit('change', {
+        paymentMode: Number(this.paymentMode),
+        huabeiPeriod: this.paymentMode === '3' ? Number(this.flowerObj.hbByStagesPeriods) : -1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cashier-list-content {
+	width: 100%;
+	box-sizing: border-box;
+	background: #fff;
+
+	.cashier {
+		border-bottom: 2px solid #d0d0d0;
+
+		&:last-child {
+			border-bottom: none
+		}
+
+		.cashier-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20px 0;
+			box-sizing: border-box;
+			position: relative;
+
+			.icon-text {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				image {
+					width: 50px;
+					height: 50px;
+					margin-right: 15px;
+				}
+			}
+		}
+
+		.ali-hb-content {
+			padding: 10px 20px;
+			box-sizing: border-box;
+			border-top: 2px solid #d0d0d0;
+		}
+	}
+}
+</style>

src/utils/payUtil.js

@@ -0,0 +1,970 @@
+// import { ANOTHER_TF_INTERFACE } from '../config'
+// import { T_PAY_ORDER, T_STORAGE_KEY } from '../constant'
+// import { gotoOrderAppPayApi, gotoOrderH5PayApi, getSessionKeyAppApi, gotoOrderPayApi, payOrderSuccessApi, getPayMiniProgramQueryApi } from '../api/anotherTFInterface'
+// import store from '../store'
+// import { getUserId, isInWx, jumpToOtherProject } from './index'
+const T_PAY_ORDER = 'T_PAY_ORDER'
+import { gotoOrderH5PayApi } from '@/api/table'
+const isInWx = () => {
+  // #ifdef H5
+  var ua = navigator.userAgent.toLowerCase()
+  if (ua.match(/MicroMessenger/i) == 'micromessenger') return true
+  // #endif
+  return false
+}
+
+// #ifdef H5
+// const jweixin = require('jweixin-module')
+
+/**
+ * 普通H5处理
+ * @param payInfo 结算返回的支付信息
+ */
+
+async function payH5InEquipment(payInfo) {
+  try {
+    const res = await gotoOrderH5PayApi(payInfo)
+    location.replace(res.data.mwebUrl)
+  } catch (e) {
+    uni.showToast({ title: '支付失败', icon: 'none' })
+    setTimeout(() => {
+      if ([1, 2].includes(payInfo.purchaseMode)) {
+        uni.switchTab({ url: '/pages/order/order' })
+      } else if ([3, 4, 5].includes(payInfo.purchaseMode)) {
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+      }
+    }, 2000)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 微信内H5处理
+ * @param payInfo 结算返回的支付信息
+ * @param orderId 订单ID
+ */
+
+async function payH5InWechat(payInfo) {
+  const res = await gotoOrderPayApi(payInfo)
+  jweixin.config({
+    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    appId: res.data.appId, // 必填，公众号的唯一标识
+    timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
+    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
+    signature: res.data.paySign, // 必填，签名，见附录1
+    jsApiList: [ 'chooseWXPay' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+  })
+  if ([1, 2].includes(payInfo.purchaseMode)) {
+    jweixin.ready(function () {
+      jweixin.checkJsApi({
+        jsApiList: [ 'chooseWXPay' ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
+        success(res) {},
+        fail(res) {}
+      })
+      jweixin.chooseWXPay({
+        timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+        nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
+        package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
+        signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+        paySign: res.data.paySign, // 支付签名
+        success(res) {
+          // 支付成功后的回调函数
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/another-tf/another-serve/paySuccessful/index?orderId=' + payInfo.orderId }) }, 2000)
+        },
+        cancel(r) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+        },
+        fail(res) {
+          uni.showToast({ icon: 'none', title: '微信内支付错误' })
+          setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+        }
+      })
+    })
+    jweixin.error(function (res) {
+      uni.showToast({ icon: 'none', title: '微信内支付加载失败', duration: 3000 })
+      setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+    })
+  } else if ([3, 4, 5].includes(payInfo.purchaseMode)) {
+    jweixin.ready(function () {
+      jweixin.checkJsApi({
+        jsApiList: [ 'chooseWXPay' ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
+        success(res) {},
+        fail(res) {}
+      })
+      jweixin.chooseWXPay({
+        timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+        nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
+        package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
+        signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+        paySign: res.data.paySign, // 支付签名
+        success(res) {
+          // 支付成功后的回调函数
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+        },
+        cancel(r) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+        },
+        fail(res) {
+          uni.showToast({ icon: 'none', title: '微信内支付错误' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+        }
+      })
+    })
+    jweixin.error(function (res) {
+      uni.showToast({ icon: 'none', title: '微信内支付加载失败', duration: 3000 })
+      setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+    })
+  }
+}
+// #endif
+
+/**
+ * 支付宝小程序拉起支付
+ * @param payInfo 结算返回的支付信息
+ * @return {Promise<void>}
+ */
+
+async function zhiAliPay(payInfo) {
+  if ([1, 2].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderPayApi(payInfo)
+      uni.requestPayment({
+        provider: 'alipay',
+        orderInfo: res.data.tradeNo,
+        success(payRes) {
+          if (payRes.resultCode == '6001') {
+            uni.showToast({ icon: 'none', title: '取消支付' })
+            setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+          } else if (payRes.resultCode == '9000') {
+            uni.showToast({ icon: 'none', title: '支付成功' })
+            setTimeout(() => { uni.redirectTo({ url: '/another-tf/another-serve/paySuccessful/index?orderId=' + payInfo.orderId }) }, 2000)
+          }
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '支付取消' })
+          setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: '支付宝支付异常', icon: 'none' })
+      setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+    } finally {
+      uni.hideLoading()
+    }
+  } else if ([3, 4, 5].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderPayApi(payInfo)
+      uni.requestPayment({
+        provider: 'alipay',
+        orderInfo: res.data.tradeNo,
+        success(payRes) {
+          if (payRes.resultCode == '6001') {
+            uni.showToast({ icon: 'none', title: '取消支付' })
+            setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+          } else if (payRes.resultCode == '9000') {
+            uni.showToast({ icon: 'none', title: '支付成功' })
+            setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+          }
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '支付取消' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: '支付宝支付异常', icon: 'none' })
+      setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+    } finally {
+      uni.hideLoading()
+    }
+  }
+}
+
+/**
+ * 微信小程序拉起支付
+ * @param payInfo
+ * @return {Promise<void>}
+ */
+
+async function mpWechatPay(payInfo) {
+  if ([1, 2].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderPayApi(payInfo)
+      uni.requestPayment({
+        provider: 'wxpay',
+        timeStamp: res.data.timeStamp,
+        nonceStr: res.data.nonceStr,
+        package: res.data.package,
+        signType: res.data.signType,
+        paySign: res.data.paySign,
+        success: async (payRes) => {
+          // 拼团微信支付成功回调
+          if (payInfo.collageId) await payOrderSuccessApi({ orderId: payInfo.orderId, collageId: payInfo.collageId })
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/another-tf/another-serve/paySuccessful/index?orderId=' + payInfo.orderId }) }, 2000)
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: '微信支付拉起失败', icon: 'none' })
+      setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+    }
+  } else if ([3, 4, 5].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderPayApi(payInfo)
+      uni.requestPayment({
+        provider: 'wxpay',
+        timeStamp: res.data.timeStamp,
+        nonceStr: res.data.nonceStr,
+        package: res.data.package,
+        signType: res.data.signType,
+        paySign: res.data.paySign,
+        success: async (payRes) => {
+          // 拼团微信支付成功回调
+          if (payInfo.collageId) await payOrderSuccessApi({ orderId: payInfo.orderId, collageId: payInfo.collageId })
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: '微信支付拉起失败', icon: 'none' })
+      setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+    }
+  }
+}
+
+/**
+ * App拉起微信支付
+ * @param payInfo
+ * @return {Promise<void>}
+ */
+
+async function appWechatPay(payInfo) {
+  if ([1, 2].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderAppPayApi(payInfo)
+      const obj = {
+        appid: res.data.appId,
+        noncestr: res.data.nonceStr,
+        package: 'Sign=WXPay',
+        prepayid: res.data.prepayId,
+        timestamp: res.data.timeStamp,
+        sign: res.data.paySign,
+        partnerid: res.data.partnerId
+      }
+      uni.requestPayment({
+        provider: 'wxpay',
+        orderInfo: obj,
+        success(payRes) {
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/another-tf/another-serve/paySuccessful/index?orderId=' + payInfo.orderId }) }, 2000)
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: 'APP拉起微信支付失败', icon: 'none' })
+      setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+    } finally {
+      uni.hideLoading()
+    }
+  } else if ([3, 4, 5].includes(payInfo.purchaseMode)) {
+    try {
+      const res = await gotoOrderAppPayApi(payInfo)
+      const obj = {
+        appid: res.data.appId,
+        noncestr: res.data.nonceStr,
+        package: 'Sign=WXPay',
+        prepayid: res.data.prepayId,
+        timestamp: res.data.timeStamp,
+        sign: res.data.paySign,
+        partnerid: res.data.partnerId
+      }
+      uni.requestPayment({
+        provider: 'wxpay',
+        orderInfo: obj,
+        success(payRes) {
+          uni.showToast({ icon: 'none', title: '支付成功' })
+          setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+        },
+        fail(err) {
+          uni.showToast({ icon: 'none', title: '用户取消支付' })
+          uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+        }
+      })
+    } catch (e) {
+      uni.showToast({ title: 'APP拉起微信支付失败', icon: 'none' })
+      setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+    } finally {
+      uni.hideLoading()
+    }
+  }
+}
+
+/**
+ * 银行卡支付处理
+ * @param data 结算返回的支付信息
+ */
+
+async function bankCardPay(data, payType, type, otherArgs) {
+  try {
+    let res
+    if ([1, 2].includes(payType)) {
+    } else if (payType === 3) {
+      // res = await payGotoH5SettlePayApi({ ...data, purchaseMode: payType })
+      // uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+    } else if (payType === 4) {
+      // res = await payGotoH5VoucherApi({ ...data, purchaseMode: payType })
+      // uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+    }
+  } catch (e) {
+    uni.showToast({ title: '银行卡支付失败', icon: 'none' })
+    setTimeout(() => {
+      if ([1, 2].includes(payType)) {
+      } else if ([3, 4, 5].includes(payType)) {
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+      }
+    }, 2000)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 通联支付H5处理
+ * @param data 结算返回的支付信息
+ */
+
+async function h5TonglianPay(data, payType, type, otherArgs) {
+  if (isInWx()) {
+    await gotoOrderH5PayApi({
+      ...data,
+      purchaseMode: payType,
+      ...otherArgs
+    }).then((res) => {
+      console.log(JSON.stringify(res.data))
+      if (type) {
+        uni.removeStorageSync(T_PAY_ORDER)
+        uni.setStorageSync(T_PAY_ORDER, {
+          type,
+          TL_ORDER_NO: data.orderSn
+        })
+      }
+      if (!res.data.package) { // 零元支付情况
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+      } else {
+        const payData = JSON.parse(res.data.package)
+        const form = document.createElement('form')
+        form.setAttribute('action', res.data.mwebUrl)
+        form.setAttribute('method', 'POST')
+        let input
+        for (const key in payData) {
+          input = document.createElement('input')
+          input.name = key
+          input.value = payData[key]
+          form.appendChild(input)
+        }
+        document.body.appendChild(form)
+        form.submit()
+        document.body.removeChild(form)
+      }
+    })
+      .catch((e) => {
+        console.log(e)
+        uni.showToast({ title: '支付失败', icon: 'none' })
+        setTimeout(() => {
+          if ([1, 2].includes(payType)) {
+            uni.switchTab({ url: '/pages/order/order' })
+          } else if ([3, 4, 5].includes(payType)) {
+            uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+          }
+        }, 2000)
+      })
+      .finally((e) => {
+        uni.hideLoading()
+      })
+  } else {
+    await getPayMiniProgramQueryApi({
+      orderFormid: data.orderFormid, // 无此传参
+      orderNo: data.orderSn || data.orderFormid,
+      purchaseMode: payType,
+      paymentMode: data.paymentMode,
+      ...otherArgs
+    }).then((res) => {
+      console.log(JSON.stringify(res.data))
+      if (res.code == 200) {
+        if (type) {
+          uni.removeStorageSync(T_PAY_ORDER)
+          uni.setStorageSync(T_PAY_ORDER, {
+            type,
+            TL_ORDER_NO: data.orderSn
+          })
+        }
+        if (res.data.isZeroOrder === '1') { // 零元支付情况
+          uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+        } else {
+          delete res.data.isZeroOrder
+          let query = ''
+          for (const key in res.data) {
+            query += key + '=' + res.data[key] + '&'
+          }
+          location.href = `weixin://dl/business/?appid=wx3cef6c7325c38a45&path=pages/loading/loading&query=${query}orderNo=${data.orderSn}&userId=${getUserId()}`
+        }
+      }
+    })
+      .finally((e) => {
+        uni.hideLoading()
+      })
+  }
+}
+
+/**
+ * 通联支付webview套壳处理
+ * @param data 结算返回的支付信息
+ */
+
+async function wvTonglianPay(data, payType, type, otherArgs) {
+  await getPayMiniProgramQueryApi({
+    orderFormid: data.orderFormid, // 无此传参
+    orderNo: data.orderSn || data.orderFormid,
+    purchaseMode: payType,
+    paymentMode: data.paymentMode,
+    ...otherArgs
+  }).then((res) => {
+    console.log(JSON.stringify(res.data))
+    if (res.code == 200) {
+      if (type) {
+        uni.removeStorageSync(T_PAY_ORDER)
+        uni.setStorageSync(T_PAY_ORDER, {
+          type,
+          TL_ORDER_NO: data.orderSn
+        })
+      }
+      if (res.data.isZeroOrder === '1') { // 零元支付情况
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+      } else {
+        delete res.data.isZeroOrder
+        let query = ''
+        for (const key in res.data) {
+          query += key + '=' + res.data[key] + '&'
+        }
+        wx.miniProgram.navigateTo({
+          url: '/pages/loading/loading?' + query + 'orderNo=' + data.orderSn + '&userId=' + getUserId(),
+          fail: () => {
+            uni.switchTab({
+              url: '/pages/order/order'
+            })
+          }
+        })
+      }
+    }
+  })
+    .finally((e) => {
+      uni.hideLoading()
+    })
+}
+
+/**
+ * 通联支付APP处理
+ * @param data 结算返回的支付信息
+ */
+
+async function appTonglianPay(data, payType, type, otherArgs) {
+  await getPayMiniProgramQueryApi({
+    orderFormid: data.orderFormid, // 无此传参
+    orderNo: data.orderSn || data.orderFormid,
+    purchaseMode: payType,
+    paymentMode: data.paymentMode,
+    ...otherArgs
+  }).then((res) => {
+    if (res.code == 200) {
+      if (type) {
+        uni.removeStorageSync(T_PAY_ORDER)
+        uni.setStorageSync(T_PAY_ORDER, {
+          type,
+          TL_ORDER_NO: data.orderSn
+        })
+      }
+      if (res.data.isZeroOrder === '1') { // 零元支付情况
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+      } else {
+        delete res.data.isZeroOrder
+        let query = ''
+        for (const key in res.data) {
+          query += key + '=' + res.data[key] + '&'
+        }
+        plus.share.getServices(function (result) {
+          let sweixin = null
+          for (const i in result) {
+            if (result[i].id == 'weixin') {
+              sweixin = result[i]
+            }
+          }
+          if (sweixin) {
+            sweixin.launchMiniProgram({
+              id: 'gh_e64a1a89a0ad', // 微信小程序的原始ID（"g_"开头的字符串）
+              type: 0,
+              path: 'pages/orderDetail/orderDetail?' + query
+            })
+          } else {
+            uni.showToast({ title: '请先安装微信', icon: 'none' })
+          }
+        }, function (e) {
+          uni.showToast({ title: '获取分享服务列表失败', icon: 'none' })
+          console.log('获取分享服务列表失败：' + e.message)
+        })
+      }
+    }
+  })
+    .finally((e) => {
+      uni.hideLoading()
+    })
+}
+
+/**
+ * 惠市宝支付H5处理
+ * @param data 结算返回的支付信息
+ */
+
+async function h5HuiShiBaoPay(data, payType, type, otherArgs) {
+  await gotoOrderH5PayApi({
+    ...data,
+    purchaseMode: payType,
+    ...otherArgs
+  }).then((res) => {
+    console.log(JSON.stringify(res.data))
+    if (type) {
+      uni.removeStorageSync(T_PAY_ORDER)
+      uni.setStorageSync(T_PAY_ORDER, {
+        type,
+        TL_ORDER_NO: data.orderSn
+      })
+    }
+    if (!res.data.Cshdk_Url) {
+      uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+    } else {
+      const payData = res.data
+      const form = document.createElement('form')
+      form.setAttribute('action', res.data.Cshdk_Url)
+      form.setAttribute('method', 'POST')
+      let input
+      for (const key in payData) {
+        input = document.createElement('input')
+        input.name = key
+        input.value = payData[key]
+        form.appendChild(input)
+      }
+      document.body.appendChild(form)
+      form.submit()
+      document.body.removeChild(form)
+    }
+  })
+    .catch((e) => {
+      console.log(e)
+      uni.showToast({ title: '支付失败', icon: 'none' })
+      setTimeout(() => {
+        if ([1, 2].includes(payType)) {
+          uni.switchTab({ url: '/pages/order/order' })
+        } else if ([3, 4, 5].includes(payType)) {
+          uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+        }
+      }, 2000)
+    })
+    .finally((e) => {
+      uni.hideLoading()
+    })
+}
+
+/**
+ * 惠市宝支付webview套壳处理
+ * @param data 结算返回的支付信息
+ */
+
+async function wvHuiShiBaoPay(data, payType, type, otherArgs) {
+  // 方式一：
+  if (typeof otherArgs.isSuccess === 'number') { // isSuccess、payType、orderId、collageId
+    if (otherArgs.isSuccess) {
+      if ([1, 2, 3, 4, 5].includes(payType)) {
+        if (data.collageId) await payOrderSuccessApi({ orderId: data.orderId, collageId: data.collageId })
+        uni.redirectTo({ url: '/user/otherServe/payment-completed/index' })
+      }
+    } else if ([1, 2, 3, 4, 5].includes(payType)) {
+      uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+    }
+  } else {
+    if (type) {
+      uni.removeStorageSync(T_PAY_ORDER)
+      uni.setStorageSync(T_PAY_ORDER, {
+        type,
+        TL_ORDER_NO: data.orderSn
+      })
+    }
+    // 尝试一
+    // uni.postMessage({
+    // 	data: {
+    // 		event: 'wvHuiShiBaoPay',
+    // 		data,
+    // 		payType,
+    // 		type,
+    // 		otherArgs,
+    // 		jumpType: `wvHuiShiBaoPayTurn`
+    // 	}
+    // })
+    // 尝试二
+    // var popup = window.open(...popup)
+    // popup.postMessage(
+    // 	"The user is 'bob' and the password is 'secret'",
+    // 	'https://www.tuanfengkeji.cn'
+    // )
+    // popup.postMessage('hello there!', 'https://test.tuanfengkeji.cn')
+    // function receiveMessage(event) {
+    // 	if (event.origin !== 'https://test.tuanfengkeji.cn') return
+    // }
+    // window.addEventListener('message', receiveMessage, false)
+    // 尝试三
+    // parent.postMessage('aaaaa', '*')
+    // 尝试四
+    const res = uni.getStorageSync(T_STORAGE_KEY) || {}
+    if (res.token) res.Authorization = res.token
+    if (res.ssoUserInfo && res.ssoUserInfo.token) res['satoken-user'] = res.ssoUserInfo.token
+    jumpToOtherProject({
+      isInMiniProgram: store.state.app.isInMiniProgram,
+      id: 'gh_c5b32d0f9bc9',
+      appId: 'wx3cef6c7325c38a45',
+      url: `pages/skip/skip`,
+      programUrl: `pages/skip/skip`,
+      toType: 'MP',
+      query: `?type=wvHuiShiBaoPay&data=${encodeURIComponent(JSON.stringify({ data, payType, type, otherArgs, jumpType: `wvHuiShiBaoPayTurn`, Authorization: res.Authorization || '', satokenUser: res['satoken-user'] || '', baseUrl: ANOTHER_TF_INTERFACE }))}`,
+      montageTerminal: [6, 5, 1, 2, 4]
+    })
+    uni.hideLoading()
+  }
+  // 方式二：
+  // // , otherArgs = { stage: 'one' }
+  // if (otherArgs.satge === 'one') {
+  // 	delete otherArgs.satge
+  // 	uni.postMessage({
+  // 		data: {
+  // 			event: 'wvHuiShiBaoPay',
+  // 			data,
+  // 			payType,
+  // 			type,
+  // 			otherArgs: { ...otherArgs, stage: 'two' },
+  // 			jumpType: `wvHuiShiBaoPayTurn`
+  // 		}
+  // 	})
+  // } else if (otherArgs.satge === 'two') {
+  // 	// 考虑到跳转webview的该链接还需要让网页的isInMiniProgram重新赋值（或者在链接上的传参非常多），比较麻烦且可能会产生其它问题
+  // 	delete otherArgs.satge
+  // 	const code = otherArgs.code
+  // 	const result = await getSessionKeyAppApi({ code })
+  // 	await gotoOrderH5PayApi({
+  // 		...data,
+  // 		purchaseMode: payType,
+  // 		hsbSubPayType: '05',
+  // 		extJsonStr: JSON.stringify({
+  // 			'Sub_Appid': 'wx3cef6c7325c38a45', // 小程序appId
+  // 			'Sub_Openid': result.data.wechatOpenId // 微信用户openId
+  // 		}),
+  // 		...otherArgs
+  // 	}).then((res) => {
+  // 		console.log(JSON.stringify(res.data))
+  // 		if (type) {
+  // 			uni.removeStorageSync(T_PAY_ORDER)
+  // 			uni.setStorageSync(T_PAY_ORDER, {
+  // 				type,
+  // 				TL_ORDER_NO: data.orderSn
+  // 			})
+  // 		}
+  // 		if (!res.data.Cshdk_Url) {
+  // 			uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+  // 		} else {
+  // 			uni.postMessage({
+  // 				data: {
+  // 					event: 'wvHuiShiBaoPay',
+  // 					data,
+  // 					payType,
+  // 					type,
+  // 					otherArgs: { ...otherArgs, stage: 'three' },
+  // 					jumpType: `wvHuiShiBaoPayBack`
+  // 				}
+  // 			})
+  // 		}
+  // 	})
+  // 		.catch((e) => {
+  // 			console.log(e)
+  // 			uni.showToast({ title: '支付失败', icon: 'none' })
+  // 			setTimeout(() => {
+  // 				if ([1, 2].includes(payType)) {
+  // 					uni.switchTab({ url: '/pages/order/order' })
+  // 				} else if ([3, 4, 5].includes(payType)) {
+  // 					uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+  // 				}
+  // 			}, 2000)
+  // 		})
+  // 		.finally((e) => {
+  // 			uni.hideLoading()
+  // 		})
+  // } else if (otherArgs.satge === 'three') {
+  // 	delete otherArgs.satge
+  // 	if ([1, 2].includes(payType)) {
+  // 		if (otherArgs.isSuccess) {
+  // 			if (data.collageId) await payOrderSuccessApi({ orderId: data.orderId, collageId: data.collageId })
+  // 			uni.showToast({ icon: 'none', title: '支付成功' })
+  // 			setTimeout(() => { uni.redirectTo({ url: '/another-tf/another-serve/paySuccessful/index?orderId=' + data.orderId }) }, 2000)
+  // 		} else {
+  // 			uni.showToast({ icon: 'none', title: '用户取消支付' })
+  // 			setTimeout(() => { uni.switchTab({ url: '/pages/order/order' }) }, 2000)
+  // 		}
+  // 	} else if ([3, 4, 5].includes(payType)) {
+  // 		if (otherArgs.isSuccess) {
+  // 			if (data.collageId) await payOrderSuccessApi({ orderId: data.orderId, collageId: data.collageId })
+  // 			uni.showToast({ icon: 'none', title: '支付成功' })
+  // 			setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+  // 		} else {
+  // 			uni.showToast({ icon: 'none', title: '用户取消支付' })
+  // 			setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' }) }, 2000)
+  // 		}
+  // 	}
+  // }
+}
+
+/**
+ * 惠市宝支付微信小程序处理
+ * @param data 结算返回的支付信息
+ */
+
+function mpHuiShiBaoPay(data, payType, type, otherArgs) {
+  return new Promise((resolve, reject) => {
+    const failOperation = (failText = '支付失败') => {
+      uni.showToast({ title: failText, icon: 'none' })
+      setTimeout(() => {
+        if ([1, 2].includes(payType)) {
+          uni.switchTab({ url: '/pages/order/order' })
+        } else if ([3, 4, 5].includes(payType)) {
+          uni.redirectTo({ url: '/user/otherServe/payment-completed/index?state=fail' })
+        }
+      }, 2000)
+    }
+    uni.login({
+      provider: 'weixin',
+      success: (res) => {
+        getSessionKeyAppApi({ code: res.code, _isShowToast: false })
+          .then(async (res1) => {
+            await gotoOrderH5PayApi({
+              ...data,
+              purchaseMode: payType,
+              ...otherArgs,
+              hsbSubPayType: '05',
+              extJsonStr: JSON.stringify({
+                'Sub_Appid': 'wx3cef6c7325c38a45', // 小程序appId
+                'Sub_Openid': res1.data.wechatOpenId // 微信用户openId
+              }),
+              _isShowToast: false
+            }).then((res2) => {
+              if (type) {
+                uni.removeStorageSync(T_PAY_ORDER)
+                uni.setStorageSync(T_PAY_ORDER, {
+                  type,
+                  TL_ORDER_NO: data.orderSn
+                })
+              }
+              if (res2.data.Rtn_Par_Data) {
+                const paymentObj = JSON.parse(res2.data.Rtn_Par_Data)
+                uni.requestPayment({
+                  provider: 'wxpay',
+                  timeStamp: paymentObj.timeStamp,
+                  nonceStr: paymentObj.nonceStr,
+                  package: paymentObj.package,
+                  signType: paymentObj.signType,
+                  paySign: paymentObj.paySign,
+                  success: async (res3) => {
+                    if (data.collageId) await payOrderSuccessApi({ orderId: data.orderId, collageId: data.collageId }) // 拼团微信支付成功回调
+                    uni.showToast({ icon: 'none', title: '支付成功' })
+                    setTimeout(() => { uni.redirectTo({ url: '/user/otherServe/payment-completed/index' }) }, 2000)
+                    resolve('支付成功')
+                  },
+                  fail(e) {
+                    console.log(e)
+                    failOperation('支付失败！' + e)
+                    reject('支付失败！' + e)
+                  }
+                })
+              } else {
+                uni.hideLoading()
+                failOperation('缺少支付信息')
+                reject('缺少支付信息')
+              }
+            })
+              .catch((e) => {
+                uni.hideLoading()
+                if (e.data) failOperation(`${e.data.message}-${e.data.errorData}`)
+                else failOperation(`请求：${e.errMsg}`)
+                reject(e)
+              })
+          })
+          .catch((e) => {
+            uni.hideLoading()
+            if (e.data) failOperation(`${e.data.message}-${e.data.errorData}`)
+            else failOperation(`请求：${e.errMsg}`)
+            reject(e)
+          })
+      },
+      fail: () => {
+        uni.hideLoading()
+        failOperation('鉴权失败！')
+        reject('鉴权失败！')
+      }
+    })
+  })
+}
+
+/**
+ * 处理支付
+ * @param submitResult 结算结果
+ */
+
+// eslint-disable-next-line complexity
+export async function handleDoPay(submitResult, purchaseMode, type = 'DEFAULT', otherArgs = {}) {
+  uni.showLoading({
+    mask: true,
+    title: '支付中...'
+  })
+  console.log(JSON.stringify(submitResult))
+  if (purchaseMode) { // 1-商城 2-本地 3-入驻 4-代金券 5-地图红包
+    const submitInfo = { ...submitResult, purchaseMode }
+    if (submitInfo.paymentMode === 999) {
+      await bankCardPay(submitResult, purchaseMode, type, otherArgs)
+    } else if ([ 1 ].includes(submitInfo.paymentMode)) { // 微信支付
+      if (isInWx()) {
+        if (store.state.app.isInMiniProgram) {
+          await payH5InWechat(submitInfo)
+        } else {
+          await payH5InWechat(submitInfo)
+        }
+      } else {
+        // #ifdef H5
+        await payH5InEquipment(submitInfo)
+        // #endif
+        // #ifdef APP
+        await appWechatPay(submitInfo)
+        // #endif
+        // #ifdef MP-WEIXIN
+        await mpWechatPay(submitInfo)
+        // #endif
+        // #ifdef MP-ALIPAY
+        uni.hideLoading()
+        uni.showToast({ title: '暂不支持在支付宝小程序使用微信支付', icon: 'none' })
+        // #endif
+      }
+    } else if ([2, 3].includes(submitInfo.paymentMode)) { // 支付宝
+      if (isInWx()) {
+        if (store.state.app.isInMiniProgram) {
+          uni.hideLoading()
+          uni.showToast({ title: '暂不支持在此端使用支付宝支付', icon: 'none' })
+        } else {
+          uni.hideLoading()
+          uni.showToast({ title: '暂不支持在此端使用支付宝支付', icon: 'none' })
+        }
+      } else {
+        // #ifdef H5
+        uni.hideLoading()
+        uni.showToast({ title: '暂不支持在此端使用支付宝支付', icon: 'none' })
+        // #endif
+        // #ifdef APP
+        uni.hideLoading()
+        uni.showToast({ title: '暂不支持在此端使用支付宝支付', icon: 'none' })
+        // #endif
+        // #ifdef MP-WEIXIN
+        uni.hideLoading()
+        uni.showToast({ title: '暂不支持在此端使用支付宝支付', icon: 'none' })
+        // #endif
+        // #ifdef MP-ALIPAY
+        await zhiAliPay(submitInfo)
+        throw new Error('支付宝相关支付暂时只支持支付宝小程序')
+        // #endif
+      }
+    } else if ([ 4 ].includes(submitInfo.paymentMode)) { // 通联支付
+      if (isInWx()) {
+        // if (store.state.app.isInMiniProgram) {
+        //   await wvTonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // } else {
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // }
+      } else {
+        // #ifdef H5
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // // #ifdef APP
+        // await appTonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // // #endif
+        // // #ifdef MP-WEIXIN
+        // uni.hideLoading()
+        // uni.showToast({ title: '暂不支持在微信小程序使用通联支付', icon: 'none' })
+        // // #endif
+        // // #ifdef MP-ALIPAY
+        // uni.hideLoading()
+        // uni.showToast({ title: '暂不支持在支付宝小程序使用通联支付', icon: 'none' })
+        // // #endif
+      }
+    } else if ([5, 6, 7, 8].includes(submitInfo.paymentMode)) { // 佣金支付、平台余额支付、商家余额支付、消费金支付
+      if (isInWx()) {
+        if (store.state.app.isInMiniProgram) {
+          await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        } else {
+          await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        }
+      } else {
+        // #ifdef H5
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef APP
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef MP-WEIXIN
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef MP-ALIPAY
+        await h5TonglianPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+      }
+    } else if ([ 9 ].includes(submitInfo.paymentMode)) { // 惠市宝支付
+      if (isInWx()) {
+        if (store.state.app.isInMiniProgram) {
+          await wvHuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        } else {
+          await h5HuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        }
+      } else {
+        // #ifdef H5
+        await h5HuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        // await wvHuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef APP
+        await wvHuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef MP-WEIXIN
+        await mpHuiShiBaoPay(submitResult, purchaseMode, type, otherArgs)
+        // #endif
+        // #ifdef MP-ALIPAY
+        uni.hideLoading()
+        uni.showToast({ title: '暂不支持在支付宝小程序使用惠市宝支付', icon: 'none' })
+        // #endif
+      }
+    }
+  }
+}

src/views/active/index.vue

@@ -32,7 +32,7 @@
         <el-option label="活动已结束" value="4" />
       </el-select>
       <el-select
-        v-model="listQuery.state" clearable size="mini" class="filter-item"
+        v-model="listQuery.examineState" clearable size="mini" class="filter-item"
         style="width: 200px;margin-left: 10px;" placeholder="请选择审核状态"
       >
         <el-option label="待审核" value="0" />

src/views/selectionCenter/distributionPricingPlan/index.vue

@@ -91,7 +91,7 @@
     <!-- 新增编辑 -->
     <EditModal ref="EditModal" @success="getList" />
     <!-- 查看详情 -->
-    <DetailModal ref="DetailModal" @success="getList" />
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 

src/views/selectionCenter/productSelectionList/components/PlatformSelection.vue

@@ -112,7 +112,7 @@
       </div>
 
       <!-- 查看详情 -->
-      <DetailModal ref="DetailModal" @success="getList" />
+      <DetailModal ref="DetailModal" />
       <!-- 加入选品 -->
       <SelectionAddModal ref="SelectionAddModal" @success="getList" />
     </div>

src/views/selectionCenter/productSelectionList/components/SelectionAddModal.vue

@@ -120,8 +120,8 @@ export default {
                 const { classifyId, shopGroupId, ...otps } = this.formData
                 const params = {
                   ...otps,
-                  classifyId: classifyId[classifyId.length - 1],
-                  shopGroupId: shopGroupId[shopGroupId.length - 1]
+                  classifyId: Array.isArray(classifyId) && classifyId.length ? classifyId[classifyId.length - 1] : '',
+                  shopGroupId: Array.isArray(shopGroupId) && shopGroupId.length ? shopGroupId[shopGroupId.length - 1] : ''
                 }
                 await shopSelectionSelectShopLibrary(params)
                 loading.close()

src/views/selectionCenter/productSelectionList/index.vue

@@ -114,7 +114,7 @@
     <!-- 新增编辑 -->
     <PlatformSelection ref="PlatformSelection" @success="getList" />
     <!-- 查看详情 -->
-    <DetailModal ref="DetailModal" @success="getList" />
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 

src/views/voucherManagement/voucherAccounting/components/DetailModal.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 代金券入账信息 -->
+      <el-form-item label="ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+      <el-form-item label="平台代金券ID" prop="platformVoucherId">
+        {{ formData.platformVoucherId || '--' }}
+      </el-form-item>
+      <el-form-item label="入账商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="来源类型" prop="sourceType">
+        <span v-if="formData.sourceType === 0">平台</span>
+        <span v-else-if="formData.sourceType === 1">商家</span>
+        <span v-else-if="formData.sourceType === 2">用户</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="来源ID" prop="sourceId">
+        {{ formData.sourceId }}
+      </el-form-item>
+      <el-form-item label="来源订单编号" prop="orderFormid">
+        {{ formData.orderFormid || '--' }}
+      </el-form-item>
+      <el-form-item label="入账数量" prop="number">
+        {{ formData.number || '--' }}
+      </el-form-item>
+      <el-form-item label="入账类型" prop="waterType">
+        <span v-if="formData.waterType === 0">充值</span>
+        <span v-else-if="formData.waterType === 1">活动</span>
+        <span v-else-if="formData.waterType === 2">用户兑换</span>
+        <span v-else-if="formData.waterType === 3">转入</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="有效时间" prop="effectiveTime">
+        {{ formData.effectiveTime || '--' }}
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        {{ formData.createTime || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看代金券入账详情'
+      },
+      visible: false,
+      formData: {
+        id: '',
+        platformVoucherId: '',
+        shopId: '',
+        sourceType: '',
+        sourceId: '',
+        orderFormid: '',
+        number: '',
+        waterType: '',
+        effectiveTime: '',
+        createTime: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        // this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/voucherManagement/voucherAccounting/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
+        <el-table-column align="center" width="150" label="平台代金券ID" prop="platformVoucherId" fixed="left" show-overflow-tooltip />
+        <el-table-column align="center" width="120" label="入账商家ID" prop="shopId" show-overflow-tooltip />
+        <el-table-column align="center" label="来源类型" prop="sourceType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.sourceType === 0" effect="plain" type="info">平台</el-tag>
+            <el-tag v-else-if="row.sourceType === 1" effect="plain" type="success">商家</el-tag>
+            <el-tag v-else-if="row.sourceType === 2" effect="plain" type="danger">用户</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="来源ID" prop="sourceId" show-overflow-tooltip />
+        <el-table-column align="center" min-width="150" label="来源订单编号" prop="orderFormid" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="入账数量" prop="number" show-overflow-tooltip />
+        <el-table-column align="center" label="入账类型" prop="waterType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.waterType === 1" effect="plain" type="info">充值</el-tag>
+            <el-tag v-else-if="row.waterType === 2" effect="plain" type="success">活动</el-tag>
+            <el-tag v-else-if="row.waterType === 3" effect="plain" type="danger">用户兑换</el-tag>
+            <el-tag v-else-if="row.waterType === 4" effect="plain" type="warning">转入</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="150" label="有效时间" prop="effectiveTime" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import DetailModal from './components/DetailModal'
+import { getEntryRecordShopVoucher } from '@/api/voucherManagement/voucherAccounting'
+
+export default {
+  name: 'VoucherAccounting',
+  components: {
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getEntryRecordShopVoucher(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/voucherManagement/voucherOperation/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <span style="font-size: 20px;font-weight: bold;">平台代金券种类：</span>
+      <el-select
+        :value="voucherChooseInfo.platformVoucherId" clearable size="medium" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择平台代金券种类" @change="handleVoucherItemSelect"
+      >
+        <el-option
+          v-for="item in platformVoucherList" :key="item.id"
+          :label="`${item.voucherName}（${item.platformVoucherId}）`" :value="item.platformVoucherId"
+          style="height: auto;border-bottom: 1px solid #8492a6;"
+        >
+          <div style="display: flex;align-items: center;">
+            <div style="margin-right: 4px;">{{ `${item.voucherName}（${item.platformVoucherId}）` }}</div>
+            <div style="font-size: 13px;color: #8492a6;">
+              <div>购买比例：{{ item.purchaseRatio }}：1</div>
+              <div>抵扣比例：{{ item.paymentRatio }}：1</div>
+            </div>
+          </div>
+        </el-option>
+      </el-select>
+    </div>
+    <el-card style="margin-bottom: 10px;">
+      <h2>代金券</h2>
+      <div style="display: flex;justify-content: space-around;align-items: center;font-size: 20px;text-align: center;">
+        <div>
+          <div style="font-size: 28px;font-weight: bold;color: #c5c900;">{{ voucherAcount.chongzhiRechargeTotal }}</div>
+          <div style="margin-top: 10px;">充值代金券</div>
+        </div>
+        <div>
+          <div style="font-size: 28px;font-weight: bold;color: #c5c900;">{{ voucherAcount.duihuanRechargeTotal }}</div>
+          <div style="margin-top: 10px;">兑换代金券</div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card style="margin-bottom: 10px;">
+      <h2>转赠</h2>
+      <el-form
+        ref="transferDataForm" :model="transferFormData" :rules="transferFormRules" size="mini"
+        label-suffix=":"
+        label-width="200px"
+      >
+        <el-form-item label="代金券类型" prop="shelveState">
+          <el-radio-group v-model="transferFormData.voucherType">
+            <el-radio label="1">充值代金券</el-radio>
+            <el-radio label="2">兑换代金券</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="用户ID（被赠与方）" prop="buyerUserId">
+          <el-input
+            v-model="transferFormData.buyerUserId" clearable size="mini" type="number"
+            style="width: 200px;"
+            placeholder="请输入转赠用户ID"
+          />
+        </el-form-item>
+        <el-form-item label="数量" prop="number">
+          <el-input
+            v-model="transferFormData.number" clearable size="mini" type="number"
+            style="width: 200px;"
+            placeholder="请输入代金券数量"
+          />
+        </el-form-item>
+      </el-form>
+      <div>
+        <el-button type="primary" @click="handleTransfer">
+          转赠
+        </el-button>
+      </div>
+    </el-card>
+
+    <el-card style="margin-bottom: 10px;">
+      <h2>充值</h2>
+      <el-form
+        ref="rechargeDataForm" :model="rechargeFormData" :rules="rechargeFormRules" size="mini"
+        label-suffix=":"
+        label-width="200px"
+      >
+        <div>
+        </div>
+        <el-form-item label="数量" prop="number">
+          <el-input
+            v-model="rechargeFormData.number" clearable size="mini" type="number"
+            style="width: 250px;"
+            placeholder="请输入代金券数量"
+          >
+            <template #append>
+              <span v-if="rechargeFormData.number">售价{{ rechargeFormData.number / 2 }}元</span>
+              <span v-else>代金券</span>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        <el-button type="primary" @click="showPayTypePopup = true">
+          充值
+        </el-button>
+      </div>
+    </el-card>
+
+    <el-dialog
+      :visible.sync="showPayTypePopup"
+      v-bind="{ closeOnClickModal: false, width: '420px', title: '支付方式选择' }"
+    >
+      <div v-if="showPayTypePopup" style="padding: 10px 0 14px;">
+        <CashierList
+          :price-pay="rechargeFormData.number / 2" show
+          @change="(e) => payInfo = e"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="showPayTypePopup = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleRecharge">确认支付</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import CashierList from '@/components/CashierList'
+import { getAllPlatformVoucher, getByUserOrderShopVoucher, getShopTotalShopVoucher, updateTransferRechargeShopVoucher, updateTransferExchangeShopVoucher, submitShopVoucherEntryRecord } from '@/api/voucherManagement/voucherOperation'
+import { handleDoPay } from '../../../utils/payUtil'
+
+export default {
+  name: 'VoucherOperation',
+  components: {
+    CashierList
+  },
+  data() {
+    return {
+      platformVoucherList: [],
+      // 选择的代金券种类
+      voucherChooseInfo: {
+        platformVoucherId: ''
+      },
+      // 账户数据
+      voucherAcount: {
+        chongzhiRechargeTotal: 0,
+        duihuanRechargeTotal: 0
+      },
+      // 表单数据
+      transferFormData: {
+        voucherType: '1',
+        buyerUserId: '',
+        number: ''
+      },
+      transferFormRules: {
+        voucherType: [ { required: true, message: '请选择代金券类型' } ],
+        buyerUserId: [ { required: true, message: '被赠与方id不能为空', trigger: 'blur' } ],
+        number: [ { required: true, message: '数量不能为空', trigger: 'blur' } ]
+      },
+      rechargeFormData: {
+        voucherId: '',
+        number: '',
+        payGrade: ''
+      },
+      rechargeFormRules: {
+        number: [ { required: true, message: '数量不能为空' } ]
+      },
+      showPayTypePopup: false,
+      payInfo: {}
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      await this.getPlatformVoucherList()
+    },
+    async getPlatformVoucherList() {
+      const loading = this.$loading({ text: '加载中' })
+      const res = await getAllPlatformVoucher({ page: 1, pageSize: 9999 })
+      this.platformVoucherList = res.data.list
+      if (this.platformVoucherList && this.platformVoucherList.length) {
+        this.handleVoucherItemSelect(this.platformVoucherList[0].platformVoucherId)
+      }
+      loading.close()
+    },
+    // 平台代金券选择
+    async handleVoucherItemSelect(id) {
+      if (this.voucherChooseInfo.platformVoucherId === id) return
+      this.voucherChooseInfo.platformVoucherId = id
+      if (this.voucherChooseInfo.platformVoucherId) {
+        const res1 = await getByUserOrderShopVoucher({ page: 1, pageSize: 9999 })
+        this.voucherAcount.chongzhiRechargeTotal = Number(res1.data.rechargeTotal)
+        const res2 = await getShopTotalShopVoucher({ page: 1, pageSize: 9999 })
+        this.voucherAcount.duihuanRechargeTotal = Number(res2.data.rechargeTotal)
+      }
+    },
+    handleTransfer() {
+      this.$refs.transferDataForm.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            const { ...otps } = this.transferFormData
+            const params = {
+              ...otps
+            }
+            let _url
+            if (this.transferFormData.voucherType === '1') {
+              _url = updateTransferRechargeShopVoucher
+            } else if (this.transferFormData.voucherType === '2') {
+              _url = updateTransferExchangeShopVoucher
+            }
+            await _url(params)
+            loading.close()
+            this.$message({ message: `操作成功!`, type: 'success' })
+            this.$refs.transferDataForm && this.$refs.transferDataForm.resetFields()
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    },
+    handleRecharge() {
+      if (!this.voucherChooseInfo.platformVoucherId) return this.$message({ message: '缺少代金券种类', type: 'warning' })
+      this.$refs.rechargeDataForm.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            const { number, ...otps } = this.rechargeFormData
+            const params = {
+              ...otps,
+              voucherId: this.voucherChooseInfo.platformVoucherId,
+              number,
+              payGrade: number / 2
+            }
+            const res = await submitShopVoucherEntryRecord(params)
+            await handleDoPay({ ...res.data, ...this.payInfo }, 4, '')
+            loading.close()
+            this.$message({ message: `充值成功！`, type: 'success' })
+            this.$refs.rechargeDataForm && this.$refs.rechargeDataForm.resetFields()
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+}
+</style>

src/views/voucherManagement/voucherOrder/components/DetailModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 代金券充值信息 -->
+      <el-form-item label="ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+      <el-form-item label="充值订单编号" prop="orderFormid">
+        {{ formData.orderFormid || '--' }}
+      </el-form-item>
+      <el-form-item label="购买者ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="购买的代金券ID" prop="voucherId">
+        {{ formData.voucherId || '--' }}
+      </el-form-item>
+      <el-form-item label="购买数量" prop="number">
+        {{ formData.number || '--' }}
+      </el-form-item>
+      <el-form-item label="充值类型" prop="status">
+        <span v-if="formData.status === 0">未付款</span>
+        <span v-else-if="formData.status === 1">取消</span>
+        <span v-else-if="formData.status === 2">已付款</span>
+        <span v-else-if="formData.status === 3">代金券未发放</span>
+        <span v-else-if="formData.status === 4">代金券已发放</span>
+        <span v-else-if="formData.status === 5">支付失败</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="消费金额" prop="payGrade">
+        {{ formData.payGrade || '--' }}
+      </el-form-item>
+      <el-form-item label="第三方支付ID" prop="trxId">
+        {{ formData.trxId || '--' }}
+      </el-form-item>
+      <el-form-item label="支付时间" prop="payTime">
+        {{ formData.payTime || '--' }}
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        {{ formData.createTime || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看代金券充值详情'
+      },
+      visible: false,
+      formData: {
+        id: '',
+        orderFormid: '',
+        shopId: '',
+        voucherId: '',
+        number: '',
+        status: '',
+        payGrade: '',
+        trxId: '',
+        payTime: '',
+        createTime: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        // this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/voucherManagement/voucherOrder/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.status" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择库存状态"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="未付款" :value="0" />
+        <el-option label="取消" :value="1" />
+        <el-option label="已付款" :value="2" />
+        <el-option label="支付失败" :value="3" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
+        <el-table-column align="center" min-width="150" label="充值订单编号" prop="orderFormid" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="购买者ID" prop="shopId" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="购买的代金券ID" prop="voucherId" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="购买数量" prop="number" show-overflow-tooltip />
+        <el-table-column align="center" label="状态" prop="status">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.status === 0" effect="plain" type="info">未付款</el-tag>
+            <el-tag v-else-if="row.status === 1" effect="plain" type="success">取消</el-tag>
+            <el-tag v-else-if="row.status === 2" effect="plain" type="danger">已付款</el-tag>
+            <el-tag v-else-if="row.status === 3" effect="plain" type="danger">代金券未发放</el-tag>
+            <el-tag v-else-if="row.status === 4" effect="plain" type="danger">代金券已发放</el-tag>
+            <el-tag v-else-if="row.status === 5" effect="plain" type="danger">支付失败</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="消费金额" prop="payGrade" show-overflow-tooltip />
+        <el-table-column align="center" min-width="150" label="第三方支付ID" prop="trxId" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="支付时间" prop="payTime" />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import DetailModal from './components/DetailModal'
+import { getAllShopVoucherEntryRecord } from '@/api/voucherManagement/voucherOrder'
+
+export default {
+  name: 'VoucherOrder',
+  components: {
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
+        status: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getAllShopVoucherEntryRecord(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/voucherManagement/voucherOutgoing/components/DetailModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 代金券出账信息 -->
+      <el-form-item label="ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+      <el-form-item label="平台代金券ID" prop="platformVoucherId">
+        {{ formData.platformVoucherId || '--' }}
+      </el-form-item>
+      <el-form-item label="出账商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="兑换订单编号" prop="orderFormid">
+        {{ formData.orderFormid || '--' }}
+      </el-form-item>
+      <el-form-item label="出账数量" prop="number">
+        {{ formData.number || '--' }}
+      </el-form-item>
+      <el-form-item label="出账类型" prop="waterType">
+        <span v-if="formData.waterType === 1">专区兑换</span>
+        <span v-else-if="formData.waterType === 2">社区兑换</span>
+        <span v-else-if="formData.waterType === 3">转出</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        {{ formData.createTime || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看代金券出账详情'
+      },
+      visible: false,
+      formData: {
+        id: '',
+        platformVoucherId: '',
+        shopId: '',
+        orderFormid: '',
+        number: '',
+        waterType: '',
+        createTime: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        // this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/voucherManagement/voucherOutgoing/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
+        <el-table-column align="center" width="150" label="平台代金券ID" prop="platformVoucherId" fixed="left" show-overflow-tooltip />
+        <el-table-column align="center" width="120" label="出账商家ID" prop="shopId" show-overflow-tooltip />
+        <el-table-column align="center" min-width="150" label="兑换订单编号" prop="orderFormid" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="出账数量" prop="number" show-overflow-tooltip />
+        <el-table-column align="center" label="出账类型" prop="waterType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.waterType === 1" effect="plain" type="info">专区兑换</el-tag>
+            <el-tag v-else-if="row.waterType === 2" effect="plain" type="success">社区兑换</el-tag>
+            <el-tag v-else-if="row.waterType === 3" effect="plain" type="danger">转出</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import DetailModal from './components/DetailModal'
+import { getOutgoingRecordShopVoucher } from '@/api/voucherManagement/voucherOutgoing'
+
+export default {
+  name: 'VoucherOutgoing',
+  components: {
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getOutgoingRecordShopVoucher(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>