From f6b7a69230dad6015bb2057ab25aadaa13c818cc Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Tue, 17 Sep 2024 21:44:39 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=BC=80=E5=8F=91=E8=80=85=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../daxpay/{PaymentEnum.ts => ChannelEnum.ts} |   2 +-
 .../daxpay/common/develop/DevelopTrade.api.ts | 199 +++++++++++++++++-
 .../daxpay/common/develop/DevelopTrade.vue    |  43 ++++
 .../daxpay/common/develop/DevelopTradePay.vue | 134 ++++++++++++
 .../common/develop/DevelopTradeRefund.vue     |  11 +
 .../common/develop/DevelopTradeTransfer.vue   |  11 +
 .../merchant/channel/ChannelConfigEdit.vue    |   8 +-
 .../merchant/channel/ChannelConfigList.vue    |   8 +-
 .../common/notice/notify/NotifyTaskList.vue   |   2 +-
 .../discrepancy/ReconcileDiscrepancyList.vue  |   2 +-
 .../callback/TradeCallbackRecordList.vue      |   2 +-
 .../record/flow/TradeFlowRecordList.vue       |   2 +-
 .../record/sync/TradeSyncRecordList.vue       |   2 +-
 13 files changed, 409 insertions(+), 17 deletions(-)
 rename src/enums/daxpay/{PaymentEnum.ts => ChannelEnum.ts} (95%)
 create mode 100644 src/views/daxpay/common/develop/DevelopTrade.vue
 create mode 100644 src/views/daxpay/common/develop/DevelopTradePay.vue
 create mode 100644 src/views/daxpay/common/develop/DevelopTradeRefund.vue
 create mode 100644 src/views/daxpay/common/develop/DevelopTradeTransfer.vue

diff --git a/src/enums/daxpay/PaymentEnum.ts b/src/enums/daxpay/ChannelEnum.ts
similarity index 95%
rename from src/enums/daxpay/PaymentEnum.ts
rename to src/enums/daxpay/ChannelEnum.ts
index 25728eef9..635361d76 100644
--- a/src/enums/daxpay/PaymentEnum.ts
+++ b/src/enums/daxpay/ChannelEnum.ts
@@ -1,7 +1,7 @@
 /**
  * 支付通道
  */
-export enum PaymentEnum {
+export enum ChannelEnum {
   ALI = 'ali_pay',
   WECHAT = 'wechat_pay',
   UNION_PAY = 'union_pay',
diff --git a/src/views/daxpay/common/develop/DevelopTrade.api.ts b/src/views/daxpay/common/develop/DevelopTrade.api.ts
index e01b5c653..13d5d4c3d 100644
--- a/src/views/daxpay/common/develop/DevelopTrade.api.ts
+++ b/src/views/daxpay/common/develop/DevelopTrade.api.ts
@@ -1,20 +1,213 @@
 import { defHttp } from '@/utils/http/axios'
-import { PageResult, Result } from '#/axios'
+import { Result } from '#/axios'
+
+/**
+ * 支付参数签名
+ */
+export function paySign(param: PayParam) {
+  return defHttp.post<Result<string>>({ url: '/develop/trade/pay/sign', data: param })
+}
 
 /**
  * 支付
  */
 export function tradePay(params) {
-  return defHttp.post<Result<PayResult>>({ url: '/develop/trade/pay', params })
+  return defHttp.post<Result<PayResult>>({ url: '/develop/trade/pay', data: params })
 }
 
+/**
+ * 退款参数签名
+ */
+export function refundSign(param: RefundParam) {
+  return defHttp.post<Result<string>>({ url: '/develop/trade/refund/sign', data: param })
+}
+
+/**
+ * 退款
+ */
+export function tradeRefund(params) {
+  return defHttp.post<Result<RefundResult>>({ url: '/develop/trade/refund', data: params })
+}
+
+/**
+ * 转账签名
+ */
+export function transferSign(param: TransferParam) {
+  return defHttp.post<Result<string>>({ url: '/develop/trade/transfer/sign', data: param })
+}
+
+/**
+ * 转账
+ */
+export function tradeTransfer(params) {
+  return defHttp.post<Result<TransferResult>>({ url: '/develop/trade/transfer', data: params })
+}
+
+/**
+ * 支付请求参数
+ */
+export interface PayParam {
+  /** 商户订单号 */
+  bizOrderNo?: string
+  /** 支付标题 */
+  title?: string
+  /** 支付描述 */
+  description?: string
+  /** 是否开启分账 */
+  allocation?: boolean
+  /** 自动分账 */
+  autoAllocation?: boolean
+  /** 过期时间 */
+  expiredTime?: string
+  /** 支付通道编码 */
+  channel?: string
+  /** 支付方式编码 */
+  method?: string
+  /** 支付金额 */
+  amount?: number
+  /** 支付扩展参数 */
+  extraParam?: string
+  /** 商户扩展参数 */
+  attach?: string
+  /** 同步跳转地址 */
+  returnUrl?: string
+  /** 用户付款中途退出返回商户网站的地址 */
+  quitUrl?: string
+  /** 异步通知地址 */
+  notifyUrl?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
+}
 
 /**
  * 支付返回结果
  */
 export interface PayResult {
+  /** 商户订单号 */
+  bizOrderNo?: string
+  /** 订单号 */
+  orderNo?: string
+  /** 支付状态 */
+  status?: string
+  /** 支付参数体 */
+  payBody?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
 }
 
 /**
- *
+ * 退款请求参数
  */
+export interface RefundParam {
+  /** 商户退款号 */
+  bizRefundNo?: string
+  /** 支付订单号 */
+  orderNo?: string
+  /** 商户订单号 */
+  bizOrderNo?: string
+  /** 退款金额 */
+  amount?: number
+  /** 退款原因 */
+  reason?: string
+  /** 退款扩展参数 */
+  extraParam?: string
+  /** 商户扩展参数 */
+  attach?: string
+  /** 异步通知地址 */
+  notifyUrl?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
+}
+
+/**
+ * 退款返回结果
+ */
+export interface RefundResult {
+  /** 退款号 */
+  refundNo?: string
+  /** 商户退款号 */
+  bizRefundNo?: string
+  /** 退款状态 */
+  status?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
+}
+
+/**
+ * 转账请求参数
+ */
+export interface TransferParam {
+  /** 商户转账号 */
+  bizTransferNo?: string
+  /** 支付通道 */
+  channel?: string
+  /** 转账金额 */
+  amount?: string
+  /** 标题 */
+  title?: string
+  /** 转账原因 */
+  reason?: string
+  /** 收款人账号类型 */
+  payeeType?: string
+  /** 收款人账号 */
+  payeeAccount?: string
+  /** 收款人姓名 */
+  payeeName?: string
+  /** 商户扩展参数 */
+  attach?: string
+  /** 异步通知地址 */
+  notifyUrl?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
+}
+/**
+ * 转账返回结果
+ */
+export interface TransferResult {
+  /** 商户转账号 */
+  bizTransferNo?: string
+  /** 转账号 */
+  transferNo?: string
+  /** 状态 */
+  status?: string
+  /** 提示信息 */
+  errorMsg?: string
+  /** 商户号 */
+  mchNo?: string
+  /** 应用号 */
+  appId?: string
+  /** 随机数 */
+  nonceStr?: string
+  /** 签名 */
+  sign?: string
+}
diff --git a/src/views/daxpay/common/develop/DevelopTrade.vue b/src/views/daxpay/common/develop/DevelopTrade.vue
new file mode 100644
index 000000000..ef899d8ac
--- /dev/null
+++ b/src/views/daxpay/common/develop/DevelopTrade.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="m-3 p-3 bg-white">
+      <div class="flex justify-center" style="flex-wrap: wrap">
+        <a-radio-group v-model:value="tradeType" button-style="solid">
+          <a-radio-button v-for="item in tradeTypes" :key="item.value" :value="item.value">{{
+            item.label
+          }}</a-radio-button>
+        </a-radio-group>
+        <div style="width: 100%; height: 25px"></div>
+        <develop-trade-pay v-if="tradeType === TradeTypeEnum.PAY" />
+        <develop-trade-refund v-if="tradeType === TradeTypeEnum.REFUND" />
+        <develop-trade-transfer v-if="tradeType === TradeTypeEnum.TRANSFER" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue'
+  import { TradeTypeEnum } from '@/enums/daxpay/ChannelEnum'
+  import { useDict } from '@/hooks/bootx/useDict'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import DevelopTradePay from './DevelopTradePay.vue'
+  import DevelopTradeRefund from './DevelopTradeRefund.vue'
+  import DevelopTradeTransfer from './DevelopTradeTransfer.vue'
+
+  const { dictDropDown } = useDict()
+
+  let tradeType = ref<string>(TradeTypeEnum.PAY)
+  let tradeTypes = ref<LabeledValue[]>([])
+
+  onMounted(() => initData())
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    tradeTypes.value = await dictDropDown('trade_type')
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/daxpay/common/develop/DevelopTradePay.vue b/src/views/daxpay/common/develop/DevelopTradePay.vue
new file mode 100644
index 000000000..11e4c66bb
--- /dev/null
+++ b/src/views/daxpay/common/develop/DevelopTradePay.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <a-form
+      class="small-from-item w-40vw"
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :labelCol="{ span: 6 }"
+      :wrapperCol="{ span: 18 }"
+      :validate-trigger="['blur', 'change']"
+    >
+      <a-form-item label="商户号" name="mchNo">
+        <a-select
+          :filter-option="search"
+          v-model:value="form.mchNo"
+          placeholder="请选择商户"
+          :options="mchNoOptions"
+          @change="merchantChange"
+        />
+      </a-form-item>
+      <a-form-item label="应用号" name="appId">
+        <a-select
+          :filter-option="search"
+          :options="mchAppOptions"
+          v-model:value="form.appId"
+          placeholder="请选择商户应用"
+        />
+      </a-form-item>
+      <a-form-item label="支付通道" name="channel">
+        <a-select
+          allow-clear
+          v-model:value="form.channel"
+          :options="channelOptions"
+          placeholder="请选择支付通道"
+        />
+      </a-form-item>
+      <a-form-item label="订单号" name="bizOrderNo">
+        <a-input v-model:value="form.bizOrderNo" placeholder="请输入订单号" />
+      </a-form-item>
+      <a-form-item label="支付标题" name="title">
+        <a-input v-model:value="form.title" placeholder="请输入支付标题" />
+      </a-form-item>
+      <a-form-item label="支付描述" name="description">
+        <a-input v-model:value="form.description" placeholder="请输入支付描述" />
+      </a-form-item>
+      <a-form-item label="支付金额" name="amount">
+        <a-input-number
+          v-model:value="form.amount"
+          :min="0.01"
+          :precision="2"
+          placeholder="请输入支付金额"
+        />
+      </a-form-item>
+      <a-form-item label="支付方式" name="method">
+        <a-select
+          allow-clear
+          v-model:value="form.method"
+          :options="methodOptions"
+          placeholder="请选择支付方式"
+        />
+      </a-form-item>
+      <a-form-item label="支付扩展参数" name="extraParam">
+        <a-textarea v-model:value="form.extraParam" :rows="3" placeholder="请输入支付扩展参数" />
+      </a-form-item>
+      <a-form-item label="商户扩展参数" name="attach">
+        <a-textarea v-model:value="form.attach" :rows="3" placeholder="请输入商户扩展参数" />
+      </a-form-item>
+      <a-form-item label="异步通知地址" name="notifyUrl">
+        <a-input v-model:value="form.notifyUrl" placeholder="请输入异步通知地址" />
+      </a-form-item>
+      <a-form-item label="支付超时时间" name="expiredTime">
+      </a-form-item>
+      <a-form-item label="随机数" name="nonceStr">
+        <a-input v-model:value="form.nonceStr" placeholder="请输入随机数" />
+      </a-form-item>
+      <a-form-item label="签名" name="sign">
+        <a-input v-model:value="form.sign" placeholder="请输入签名" />
+      </a-form-item>
+
+      <a-space style="display: flex; justify-content: center">
+        <a-button>重置</a-button>
+        <a-button type="primary">提交</a-button>
+      </a-space>
+    </a-form>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, onMounted, reactive, ref } from 'vue'
+  import { PayParam } from './DevelopTrade.api'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
+  import useFormEdit from '@/hooks/bootx/useFormEdit'
+  import { mchAppDropdown } from '@/views/daxpay/common/merchant/app/MchApp.api'
+  import { useDict } from '@/hooks/bootx/useDict'
+
+  const { search } = useFormEdit()
+  const { dictDropDown } = useDict()
+  const form = reactive<PayParam>({})
+  const rules = computed(() => {
+    return {}
+  })
+
+  const mchNoOptions = ref<LabeledValue[]>([])
+  const mchAppOptions = ref<LabeledValue[]>([])
+  const channelOptions = ref<LabeledValue[]>([])
+  const methodOptions = ref<LabeledValue[]>([])
+
+  onMounted(() => {
+    initData()
+  })
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    merchantDropdown().then(({ data }) => {
+      mchNoOptions.value = data
+    })
+    channelOptions.value = await dictDropDown('channel')
+    methodOptions.value = await dictDropDown('pay_method')
+  }
+
+  /**
+   * 商户变动时刷新应用列表
+   */
+  function merchantChange() {
+    form.appId = undefined
+    mchAppDropdown(form.mchNo).then(({ data }) => {
+      mchAppOptions.value = data
+    })
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/daxpay/common/develop/DevelopTradeRefund.vue b/src/views/daxpay/common/develop/DevelopTradeRefund.vue
new file mode 100644
index 000000000..0a8d203dd
--- /dev/null
+++ b/src/views/daxpay/common/develop/DevelopTradeRefund.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/views/daxpay/common/develop/DevelopTradeTransfer.vue b/src/views/daxpay/common/develop/DevelopTradeTransfer.vue
new file mode 100644
index 000000000..0a8d203dd
--- /dev/null
+++ b/src/views/daxpay/common/develop/DevelopTradeTransfer.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/views/daxpay/common/merchant/channel/ChannelConfigEdit.vue b/src/views/daxpay/common/merchant/channel/ChannelConfigEdit.vue
index 0931b0293..2944e154e 100644
--- a/src/views/daxpay/common/merchant/channel/ChannelConfigEdit.vue
+++ b/src/views/daxpay/common/merchant/channel/ChannelConfigEdit.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
   import { ref } from 'vue'
   import { useMessage } from '@/hooks/web/useMessage'
-  import { PaymentEnum } from '@/enums/daxpay/PaymentEnum'
+  import { ChannelEnum } from '@/enums/daxpay/ChannelEnum'
   import { ChannelConfig } from './ChannelConfig.api'
   import AlipayConfigEdit from '@/views/daxpay/common/channel/alipay/config/AlipayConfigEdit.vue'
   import WechatPayConfigEdit from '@/views/daxpay/common/channel/wechat/config/WechatPayConfigEdit.vue'
@@ -24,15 +24,15 @@
    */
   function show(record: ChannelConfig) {
     switch (record.channel) {
-      case PaymentEnum.ALI: {
+      case ChannelEnum.ALI: {
         alipay.value.init(record)
         break
       }
-      case PaymentEnum.WECHAT: {
+      case ChannelEnum.WECHAT: {
         wechat.value.init(record)
         break
       }
-      case PaymentEnum.UNION_PAY: {
+      case ChannelEnum.UNION_PAY: {
         union.value.init(record)
         break
       }
diff --git a/src/views/daxpay/common/merchant/channel/ChannelConfigList.vue b/src/views/daxpay/common/merchant/channel/ChannelConfigList.vue
index daa8a6e5d..5368150d1 100644
--- a/src/views/daxpay/common/merchant/channel/ChannelConfigList.vue
+++ b/src/views/daxpay/common/merchant/channel/ChannelConfigList.vue
@@ -54,7 +54,7 @@
   import { BasicDrawer } from '@/components/Drawer'
   import { ref } from 'vue'
   import { findAll, ChannelConfig } from './ChannelConfig.api'
-  import { PaymentEnum } from '@/enums/daxpay/PaymentEnum'
+  import { ChannelEnum } from '@/enums/daxpay/ChannelEnum'
   import alipay from '@/assets/daxpay/alipay.svg'
   import wechat from '@/assets/daxpay/wechat.svg'
   import unionPay from '@/assets/daxpay/unionPay.svg'
@@ -112,11 +112,11 @@
    */
   function getIcon(type: string) {
     switch (type) {
-      case PaymentEnum.ALI:
+      case ChannelEnum.ALI:
         return alipay
-      case PaymentEnum.WECHAT:
+      case ChannelEnum.WECHAT:
         return wechat
-      case PaymentEnum.UNION_PAY:
+      case ChannelEnum.UNION_PAY:
         return unionPay
       default:
         return ''
diff --git a/src/views/daxpay/common/notice/notify/NotifyTaskList.vue b/src/views/daxpay/common/notice/notify/NotifyTaskList.vue
index 4d0f902f0..fa774b2bc 100644
--- a/src/views/daxpay/common/notice/notify/NotifyTaskList.vue
+++ b/src/views/daxpay/common/notice/notify/NotifyTaskList.vue
@@ -89,7 +89,7 @@
   import PayOrderInfo from '@/views/daxpay/common/order/pay/PayOrderInfo.vue'
   import TransferOrderInfo from '@/views/daxpay/common/order/transfer/TransferOrderInfo.vue'
   import NotifyRecordList from './NotifyRecordList.vue'
-  import { NotifyContentTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import { NotifyContentTypeEnum } from '@/enums/daxpay/ChannelEnum'
   import RefundOrderInfo from '@/views/daxpay/common/order/refund/RefundOrderInfo.vue'
   import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
   import { mchAppDropdown } from '@/views/daxpay/common/merchant/app/MchApp.api'
diff --git a/src/views/daxpay/common/reconcile/discrepancy/ReconcileDiscrepancyList.vue b/src/views/daxpay/common/reconcile/discrepancy/ReconcileDiscrepancyList.vue
index f9ea04466..6e7adeb45 100644
--- a/src/views/daxpay/common/reconcile/discrepancy/ReconcileDiscrepancyList.vue
+++ b/src/views/daxpay/common/reconcile/discrepancy/ReconcileDiscrepancyList.vue
@@ -118,7 +118,7 @@
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import { useDict } from '@/hooks/bootx/useDict'
-  import { TradeTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import { TradeTypeEnum } from '@/enums/daxpay/ChannelEnum'
   import ReconcileDiscrepancyInfo from './ReconcileDiscrepancyInfo.vue'
   import ReconcileStatementInfo from '../statement/ReconcileStatementInfo.vue'
   import PayOrderInfo from '@/views/daxpay/common/order/pay/PayOrderInfo.vue'
diff --git a/src/views/daxpay/common/record/callback/TradeCallbackRecordList.vue b/src/views/daxpay/common/record/callback/TradeCallbackRecordList.vue
index d5b0687cc..a82577a63 100644
--- a/src/views/daxpay/common/record/callback/TradeCallbackRecordList.vue
+++ b/src/views/daxpay/common/record/callback/TradeCallbackRecordList.vue
@@ -87,7 +87,7 @@
   import PayOrderInfo from '@/views/daxpay/common/order/pay/PayOrderInfo.vue'
   import RefundOrderInfo from '@/views/daxpay/common/order/refund/RefundOrderInfo.vue'
   import TransferOrderInfo from '@/views/daxpay/common/order/transfer/TransferOrderInfo.vue'
-  import { TradeTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import { TradeTypeEnum } from '@/enums/daxpay/ChannelEnum'
   import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
   import { mchAppDropdown } from '@/views/daxpay/common/merchant/app/MchApp.api'
 
diff --git a/src/views/daxpay/common/record/flow/TradeFlowRecordList.vue b/src/views/daxpay/common/record/flow/TradeFlowRecordList.vue
index 6ec7f99ed..265566ce1 100644
--- a/src/views/daxpay/common/record/flow/TradeFlowRecordList.vue
+++ b/src/views/daxpay/common/record/flow/TradeFlowRecordList.vue
@@ -97,7 +97,7 @@
   import TransferOrderInfo from '@/views/daxpay/common/order/transfer/TransferOrderInfo.vue'
   import ALink from '@/components/Link/Link.vue'
   import TradeFlowRecordInfo from './TradeFlowRecordInfo.vue'
-  import { TradeTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import { TradeTypeEnum } from '@/enums/daxpay/ChannelEnum'
   import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
   import { mchAppDropdown } from '@/views/daxpay/common/merchant/app/MchApp.api'
 
diff --git a/src/views/daxpay/common/record/sync/TradeSyncRecordList.vue b/src/views/daxpay/common/record/sync/TradeSyncRecordList.vue
index cdda8f7f8..129fdec5f 100644
--- a/src/views/daxpay/common/record/sync/TradeSyncRecordList.vue
+++ b/src/views/daxpay/common/record/sync/TradeSyncRecordList.vue
@@ -83,7 +83,7 @@
   import BQuery from '@/components/Bootx/Query/BQuery.vue'
   import { LIST, QueryField, STRING } from '@/components/Bootx/Query/Query'
   import { useDict } from '@/hooks/bootx/useDict'
-  import { TradeTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import { TradeTypeEnum } from '@/enums/daxpay/ChannelEnum'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import ALink from '/@/components/Link/Link.vue'
   import PayOrderInfo from '@/views/daxpay/common/order/pay/PayOrderInfo.vue'