:sparkles: 挂单历史搜索

src/router/index.js

@@ -98,12 +98,11 @@ const router = createRouter({
       component: () => import("@/views/buyOrSell/SellConf.vue"),
       meta: { index: 1 },
     },
-    // posi测试
+    // 测试组件通信
     {
-      path: "/posi",
-      name: "posi",
-      component: () => import("@/views/position/PositionIndex1.vue"),
-      meta: { index: 1 },
+      path: '/testConf',
+      name: 'testConf',
+      component: () => import("@/views/test/Father.vue"),
     },
     // 持仓
     {

src/service/position/index.js

@@ -5,9 +5,7 @@ export function getMyStock() {
     return axios.get(`/myStock/getMyStock`);
 }
 
-
 // 个人挂单历史记录
 export function listMyOrderHis(params) {
-    return axios.get(`/myStock/listMyOrderHis`, params);
-}
-
+    return axios.post(`/myStock/pageMyOrderHis`, params);
+}

src/styles/deviceSearch/index.less

@@ -2,7 +2,7 @@
   width: auto;
 }
 
-.deviceSearch {
+.SearchPop {
   .clearBtn {
     border-color: #39a6fe;
     background-color: #fff;

src/views/buyOrSell/SellConfList.vue

@@ -45,7 +45,6 @@ const getList = async () => {
     const { data } = await getSellConfList(
         Object.assign({}, searchParams)
     );
-    console.log("卖出列表 >>>", data.data);
     if (data.code === "00000") {
         if (searchParams.current === 0) {
             sellConfList.value = [];
@@ -92,9 +91,7 @@ const onLoad = () => {
 
 // 是否有操作的权限
 const isOper = ref(true);
-// 初始化页面获取列表
 onMounted(async () => {
-    // 加载样式
     styleUrl('sellConfList');
     if (user) {
         searchGetList();

src/views/position/PositionIndex.vue

@@ -133,12 +133,9 @@
                 </div>
             </van-list>
         </div>
-        <!-- 使用搜索弹窗组件 -->
-        <!-- <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" /> -->
 
-        <!-- <deviceOper ref="oprRef" @operfinish="operFinish"></deviceOper> -->
         <!-- 搜索弹出框 -->
-        <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch>
+        <SearchPop ref="searchRef" @search="search($event)"></SearchPop>
 
         <div style="height: 50px;"></div>
         <!-- <nav-bar></nav-bar> -->
@@ -150,12 +147,10 @@
 // 导入无数据组件
 import sHeader from "@/components/SimpleHeader"
 import { onMounted, reactive, ref } from "vue"
-// import SearchPop from './SearchPop.vue';
-// import TestComp from './TestComp.vue'
 import { listMyOrderHis, getMyStock } from "@/service/position";
-import deviceSearch from "./deviceSearch";
+import SearchPop from "./SearchPop";
+import { showFailToast } from "vant";
 
-// const showSearchPop = ref(false);
 
 const orderHisList = ref([]);
 const error = ref(false);
@@ -164,16 +159,6 @@ const loading = ref(false)
 const finished = ref(false)
 const hisLength = ref(0)
 
-// const showStatusText = (statusVal) => {
-//   const statusMap = {
-//     0: '过期',
-//     1: '生效',
-//     2: '撤单',
-//     3: '全部成交',
-//     4: '部分成交',
-//   }
-//   return statusMap[statusVal] || '未知状态';
-// }
 
 
 function twoNumber(val) {
@@ -185,7 +170,9 @@ function twoNumber(val) {
     }
 }
 
+// 滚动加载
 const onLoad = async () => {
+    console.log("finished >>>", finished.value);
     if (!finished.value) {
         loading.value = true
         searchParams.current = searchParams.current + 1;
@@ -199,24 +186,43 @@ let searchParams = reactive({
     size: 10, // 页大小，默认10条
 })
 
+// 查询列表
+const init = () => {
+    getMyStockFunc();
+    orderHisList.value = [];
+    searchParams.current = 1;
+    getList();
+};
+
 const getList = async () => {
     finished.value = false;
     const params = Object.assign({}, searchParams);
     const { data } = await listMyOrderHis(params);
+    console.log("data.data >>>", data.data);
     if (data.code === "00000") {
-        orderHisList.value = data.data.records
-        hisLength.value = orderHisList.value.length
+        if (searchParams.current === 0) {
+            orderHisList.value = [];
+        }
+        // 列表叠加
+        orderHisList.value = orderHisList.value.concat(
+            data.data.records
+        );
+        // hisLength.value = orderHisList.value.length
+        hisLength.value = data.data.total
         if (orderHisList.value.length >= data.data.total) {
             finished.value = true;
         }
+        // 加载状态结束
+        loading.value = false;
+    } else {
+        showFailToast(data.message);
     }
-    // 加载状态结束
-    loading.value = false;
+
 }
 
-onMounted(
-    onLoad,
-);
+onMounted(() => {
+    init();
+});
 
 const buyPrice = ref()
 const currentPrice = ref()
@@ -237,7 +243,6 @@ const searchRef = ref(null);
 
 // 搜索点击
 const searchClick = () => {
-    console.log("点击搜索");
     searchRef.value.showSearch();
 };
 
@@ -251,11 +256,6 @@ const search = (e) => {
 };
 
 
-// 处理子组件传递回来的更新事件
-// const handleUpdateShowSearchPop = (val) => {
-//   showSearchPop.value = val;
-// }
-
 </script>
 
 <style lang="less" scoped>

src/views/position/PositionIndex1.vue

@@ -1,219 +0,0 @@
-<template>
-  <!-- 持仓 -->
-  <div class="positionPage flex-col">
-    <div class="listBox">
-      <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
-
-
-      <div class="positionBox1 flex-col">
-        <div class="searchRow flex-row justify-between">
-          <div class="flex-col">
-            <div class="flex-row justify-between bd3">
-              <div class="flex-col outer4"></div>
-              <span class="flex-col txt2">持仓情况</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="o-plr-15 o-ptb-20">
-          <div class="bd1 flex-col">
-            <div class="box2 l-f l-flex-c l-flex-j-a">
-              <div class="TextGroup flex-col">
-                <div class="main6 flex-col justify-between align-center">
-                  <span class="word5">{{ currentPrice }}</span>
-                  <span class="word6">当前股价￥</span>
-                </div>
-              </div>
-
-              <div class="TextGroup flex-col">
-                <div class="main6 flex-col justify-between align-center">
-                  <span class="word5">{{ dailyDiff }}</span>
-                  <span class="word6">当日盈亏￥</span>
-                </div>
-              </div>
-
-              <div class="TextGroup flex-col">
-                <div class="main6 flex-col justify-between align-center">
-                  <span class="word5">{{ totalDiff }}</span>
-                  <span class="word6">总盈亏￥</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-
-      <img class="pic1" src="../../assets/device/line.png" />
-    </div>
-
-
-    <div class="positionBox">
-
-    </div>
-
-    <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
-    <div class="groove"></div>
-
-    <div class="tradingHistory">
-      <!-- 交易历史 -->
-      <div class="searchRow flex-row justify-between">
-        <div class="flex-col">
-          <div class="flex-row justify-between bd3">
-            <div class="flex-col outer4"></div>
-            <span class="flex-col txt2">
-              交易历史</span>
-          </div>
-        </div>
-        <!-- 搜索 -->
-        <div class="flex-col">
-          <div class="main5 flex-row justify-between" @click="searchClick">
-            <img class="label2" src="../../assets/position/searchIcon.png" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-
-    <!-- 历史记录明细 -->
-    <div class="historyList">
-      <div v-if="hisLength === 0">
-        <van-empty image="search" description="暂无交易历史" />
-      </div>
-      <div v-else>
-        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-          <div v-for="item in orderHisList" :key="item.id">
-            <van-card>
-              <template #title>
-                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
-              </template>
-              <template #desc>
-                <span class="word11">创建时间：{{ item.createTime }}</span>
-              </template>
-              <template #tags>
-                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag></div>
-                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
-                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
-              </template>
-              <template #price-top>
-                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
-                <!-- <div>
-                  交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
-                </div> -->
-                <div v-if="item.status === '0'">交易状态：<van-tag plain round type="danger">过期</van-tag></div>
-                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round type="success">生效</van-tag></div>
-                <div v-else-if="item.status === '2'">交易状态：<van-tag plain round>撤单</van-tag></div>
-                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round type="primary">全部成交</van-tag></div>
-                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round type="warning">部分成交</van-tag></div>
-                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
-              </template>
-              <template #price>
-                <span class="txt9">每股单价
-                  ：￥{{ item.price }}
-                </span>
-              </template>
-            </van-card>
-            <br>
-          </div>
-        </van-list>
-      </div>
-    </div>
-
-
-    <!-- 使用搜索弹窗组件 -->
-    <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" />
-    <!-- <div style="height: 50px;"></div> -->
-    <!-- <TestComp param="哈哈哈" /> -->
-  </div>
-
-</template>
-
-<script setup>
-// 导入无数据组件
-import sHeader from "@/components/SimpleHeader"
-import { onMounted, reactive, ref } from "vue"
-import SearchPop from './SearchPop.vue';
-// import TestComp from './TestComp.vue'
-import { listMyOrderHis, getMyStock } from "@/service/position";
-
-const showSearchPop = ref(false);
-
-const orderHisList = ref([]);
-const loading = ref(false)
-const finished = ref(false)
-const hisLength = ref(0)
-
-// const showStatusText = (statusVal) => {
-//   const statusMap = {
-//     0: '过期',
-//     1: '生效',
-//     2: '撤单',
-//     3: '全部成交',
-//     4: '部分成交',
-//   }
-//   return statusMap[statusVal] || '未知状态';
-// }
-
-const onLoad = async () => {
-  if (!finished.value) {
-    loading.value = true
-    searchParams.current = searchParams.current + 1;
-    getList();
-    getMyStockFunc();
-  }
-};
-
-let searchParams = reactive({
-  current: 1, // 当前页，默认1
-  size: 10, // 页大小，默认10条
-})
-
-const getList = async () => {
-  finished.value = false;
-  const params = Object.assign({}, searchParams);
-  const { data } = await listMyOrderHis(params);
-  if (data.code === "00000") {
-    orderHisList.value = data.data.records
-    hisLength.value = orderHisList.value.length
-    if (orderHisList.value.length >= data.data.total) {
-      finished.value = true;
-    }
-  }
-  // 加载状态结束
-  loading.value = false;
-}
-
-onMounted(
-  onLoad,
-);
-
-const buyPrice = ref()
-const currentPrice = ref()
-const dailyDiff = ref()
-const totalDiff = ref()
-
-const getMyStockFunc = async () => {
-  const { data } = await getMyStock();
-  if (data.code === '00000') {
-    buyPrice.value = data.data.buyPrice
-    currentPrice.value = data.data.currentPrice
-    dailyDiff.value = data.data.dailyDiff
-    totalDiff.value = data.data.totalDiff
-  }
-}
-
-const searchClick = () => {
-  console.log("点击搜索");
-  showSearchPop.value = true;
-}
-
-// 处理子组件传递回来的更新事件
-const handleUpdateShowSearchPop = (val) => {
-  showSearchPop.value = val;
-}
-
-</script>
-
-<style lang="less" scoped>
-@import "../../styles/position/index.less";
-</style>

src/views/position/SearchPop.vue

@@ -1,37 +1,156 @@
 <template>
-    <van-popup v-model:show="showPop" round :style="{ padding: '64px' }" @close="handlePopupClose">
-        <div>
-            <p>搜索弹窗的内容</p>
-        </div>
-    </van-popup>
+  <!-- 设备列表 - 搜索弹窗 -->
+  <div class="SearchPop flex-col">
+    <van-action-sheet v-model:show="sheetShow" :closeable='false' title="输入以下任意信息进行搜索">
+
+      <div class="content">
+        <van-form @submit="onSubmit">
+          <!-- 订单编号 -->
+          <van-field v-model="orderId" name="orderId" label="订单编号" placeholder="订单编号" />
+
+          <!-- 创建时间 -->
+
+          <!-- 挂单类型、挂单状态 -->
+          <van-row>
+            <!-- 挂单类型 type：1买，2卖-->
+            <van-col span="12">
+              <van-field label-width="66" v-model="orderTypeText" is-link readonly label="挂单类型" placeholder="请选择挂单类型"
+                @click="orderTypeShow = true" class="field" />
+              <van-popup v-model:show="orderTypeShow" round position="bottom">
+                <van-cascader v-model="orderType" title="请选择挂单类型" :options="orderTypeOptions"
+                  @close="orderTypeShow = false" @finish="orderTypeFinish" />
+              </van-popup>
+            </van-col>
+
+            <van-col span="12">
+              <van-field label-width="66" v-model="orderStatusText" is-link readonly label="挂单状态" placeholder="请选择挂单状态"
+                @click="orderStatusShow = true" class="field" />
+              <van-popup v-model:show="orderStatusShow" round position="bottom">
+                <van-cascader v-model="orderStatus" title="请选择挂单状态" :options="orderStatusOptions"
+                  @close="orderStatusShow = false" @finish="orderStatusFinish" />
+              </van-popup>
+            </van-col>
+          </van-row>
+
+          <van-row justify="space-around" style="padding: 2em;">
+            <van-button class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
+              @click="registerClick">清空条件</van-button>
+            <van-button class="selectBtn" span="5" round type="primary" style="height: 2em; padding: 0 2em;"
+              native-type="submit">点击搜索</van-button>
+          </van-row>
+        </van-form>
+      </div>
+    </van-action-sheet>
+  </div>
 </template>
 
-<script setup>
-import { ref, watch, defineProps, defineEmits } from 'vue';
+<script>
+import { ref, onMounted } from 'vue';
+import { styleUrl } from "../../common/js/utils";
 
-const props = defineProps({
-    showSearchPop: Boolean
-});
+export default {
+  setup(prop, context) {
 
-// const props = defineProps(['showSearchPop']);
+    const sheetShow = ref(false);
 
-const emit = defineEmits(['update:showSearchPop']);
+    const orderId = ref('');
 
+    const orderType = ref(''); // 挂单类型
+    const orderTypeText = ref(''); // 挂单类型 - 页面显示
+    const orderTypeShow = ref(false); // 挂单类型级联状态
+    const orderTypeOptions = ref([ // 挂单类型级联选项，挂单类型：1买，2卖
+      {
+        text: '买',
+        value: '1',
+      }, {
+        text: '卖',
+        value: '2',
+      }
+    ]);
+    const orderTypeFinish = ({ selectedOptions }) => { // 挂单类型级联选择
+      orderTypeShow.value = false;
+      orderTypeText.value = selectedOptions.map((option) => option.text).join('/');
+    };
 
-const showPop = ref(props.showSearchPop);
+    const orderStatus = ref(''); // 挂单状态
+    const orderStatusText = ref(''); // 挂单状态 - 页面显示
+    const orderStatusShow = ref(false); // 挂单状态级联状态
+    const orderStatusOptions = ref([ // 挂单状态级联选项：0过期，1生效，2撤单，3全部成交，4部分成交
+      {
+        text: '过期',
+        value: '0',
+      }, {
+        text: '匹配中',
+        value: '1',
+      }, {
+        text: '撤单',
+        value: '2',
+      }, {
+        text: '匹配成功',
+        value: '3',
+      }, {
+        text: '部分匹配成功',
+        value: '4',
+      }
+    ]);
+    const orderStatusFinish = ({ selectedOptions }) => { // 挂单类型级联选择
+      orderStatusShow.value = false;
+      orderStatusText.value = selectedOptions.map((option) => option.text).join('/');
+    };
 
-// 监听 props 的变化，更新 showPop 的值
-watch(() => props.showSearchPop, (newValue) => {
-  showPop.value = newValue;
-});
 
-// 处理弹窗关闭事件，更新 showSearchPop 的值
-const handlePopupClose = () => {
-  emit('update:showSearchPop', false);
-};
+    // 父组件页面触发展示及初始化
+    const showSearch = () => { sheetShow.value = true; };
+
+    // 提交搜索表单触发搜索
+    const onSubmit = () => {
+      const searchParam = {
+        id: orderId.value,
 
+        type: orderType.value,
+        status: orderStatus.value,
+      };
+      context.emit('search', searchParam);
+      sheetShow.value = false;
+    }
+    // 清空条件
+    const registerClick = () => {
+      orderId.value = '',
+      orderType.value = '';
+      orderTypeText.value = '';
+      orderStatus.value = '';
+      orderStatusText.value = '';
+    };
+
+    onMounted(() => {
+
+    });
+
+    // 加载样式
+    styleUrl('SearchPop');
+    return {
+      orderId,
+      sheetShow,
+
+      orderType,
+      orderTypeText,
+      orderTypeShow,
+      orderTypeOptions,
+      orderTypeFinish,
+
+      orderStatus,
+      orderStatusText,
+      orderStatusShow,
+      orderStatusOptions,
+      orderStatusFinish,
+
+      showSearch,
+      registerClick,
+      onSubmit,
+    };
+  },
+  components: {},
+};
 </script>
 
-<style scoped>
-/* 这里可以添加样式 */
-</style>
+<style lang="less" scoped></style>

src/views/position/TestComp.vue

@@ -1,13 +0,0 @@
-<script setup>
-import { defineProps } from "vue"
-
-defineProps(['param'])
-</script>
-
-<template>
-    <div style="background-color: plum; display: flex; justify-content: center;" >
-        <h2>{{ param }}</h2>
-    </div>
-</template>
-
-<style scoped></style>

src/views/position/deviceSearch.vue

@@ -1,156 +0,0 @@
-<template>
-  <!-- 设备列表 - 搜索弹窗 -->
-  <div class="deviceSearch flex-col" v-ref:searchRef>
-    <van-action-sheet v-model:show="sheetShow" :closeable='false' title="输入以下任意信息进行搜索">
-
-      <div class="content">
-        <van-form @submit="onSubmit">
-          <!-- 订单编号 -->
-          <van-field v-model="orderId" name="orderId" label="订单编号" placeholder="订单编号" />
-
-          <!-- 创建时间 -->
-
-          <!-- 挂单类型、挂单状态 -->
-          <van-row>
-            <!-- 挂单类型 type：1买，2卖-->
-            <van-col span="12">
-              <van-field label-width="66" v-model="orderTypeText" is-link readonly label="挂单类型" placeholder="请选择挂单类型"
-                @click="orderTypeShow = true" class="field" />
-              <van-popup v-model:show="orderTypeShow" round position="bottom">
-                <van-cascader v-model="orderType" title="请选择挂单类型" :options="orderTypeOptions"
-                  @close="orderTypeShow = false" @finish="orderTypeFinish" />
-              </van-popup>
-            </van-col>
-
-            <van-col span="12">
-              <van-field label-width="66" v-model="orderStatusText" is-link readonly label="挂单状态" placeholder="请选择挂单状态"
-                @click="orderStatusShow = true" class="field" />
-              <van-popup v-model:show="orderStatusShow" round position="bottom">
-                <van-cascader v-model="orderStatus" title="请选择挂单状态" :options="orderStatusOptions"
-                  @close="orderStatusShow = false" @finish="orderStatusFinish" />
-              </van-popup>
-            </van-col>
-          </van-row>
-
-          <van-row justify="space-around" style="padding: 2em;">
-            <van-button class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
-              @click="registerClick">清空条件</van-button>
-            <van-button class="selectBtn" span="5" round type="primary" style="height: 2em; padding: 0 2em;"
-              native-type="submit">点击搜索</van-button>
-          </van-row>
-        </van-form>
-      </div>
-    </van-action-sheet>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted } from 'vue';
-import { styleUrl } from "../../common/js/utils";
-
-export default {
-  setup(prop, context) {
-
-    const sheetShow = ref(false);
-
-    const orderId = ref('');
-
-    const orderType = ref(''); // 挂单类型
-    const orderTypeText = ref(''); // 挂单类型 - 页面显示
-    const orderTypeShow = ref(false); // 挂单类型级联状态
-    const orderTypeOptions = ref([ // 挂单类型级联选项，挂单类型：1买，2卖
-      {
-        text: '买',
-        value: '1',
-      }, {
-        text: '卖',
-        value: '2',
-      }
-    ]);
-    const orderTypeFinish = ({ selectedOptions }) => { // 挂单类型级联选择
-      orderTypeShow.value = false;
-      orderTypeText.value = selectedOptions.map((option) => option.text).join('/');
-    };
-
-    const orderStatus = ref(''); // 挂单状态
-    const orderStatusText = ref(''); // 挂单状态 - 页面显示
-    const orderStatusShow = ref(false); // 挂单状态级联状态
-    const orderStatusOptions = ref([ // 挂单状态级联选项：0过期，1生效，2撤单，3全部成交，4部分成交
-      {
-        text: '过期',
-        value: '0',
-      }, {
-        text: '匹配中',
-        value: '1',
-      }, {
-        text: '撤单',
-        value: '2',
-      }, {
-        text: '匹配成功',
-        value: '3',
-      }, {
-        text: '部分匹配成功',
-        value: '4',
-      }
-    ]);
-    const orderStatusFinish = ({ selectedOptions }) => { // 挂单类型级联选择
-      orderStatusShow.value = false;
-      orderStatusText.value = selectedOptions.map((option) => option.text).join('/');
-    };
-
-
-    // 父组件页面触发展示及初始化
-    const showSearch = () => { sheetShow.value = true; };
-
-    // 提交搜索表单触发搜索
-    const onSubmit = () => {
-      const searchParam = {
-        orderId: orderId.value,
-
-        orderType: orderType.value,
-        orderStatus: orderStatus.value,
-      };
-      context.emit('search', searchParam);
-      sheetShow.value = false;
-    }
-    // 清空条件
-    const registerClick = () => {
-      orderId.value = '',
-      orderType.value = '';
-      orderTypeText.value = '';
-      orderStatus.value = '';
-      orderStatusText.value = '';
-    };
-
-    onMounted(() => {
-
-    });
-
-    // 加载样式
-    styleUrl('deviceSearch');
-    return {
-      orderId,
-      sheetShow,
-
-      orderType,
-      orderTypeText,
-      orderTypeShow,
-      orderTypeOptions,
-      orderTypeFinish,
-
-      orderStatus,
-      orderStatusText,
-      orderStatusShow,
-      orderStatusOptions,
-      orderStatusFinish,
-
-      showSearch,
-      registerClick,
-      onSubmit,
-    };
-  },
-  components: {},
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/test/Child.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { defineEmits } from 'vue'
+import { ref } from 'vue'
+let dayNum = ref(7)
+
+const emit = defineEmits(['test-event'])
+
+const handleClick = (dayNum) => {
+  emit('test-event', dayNum)
+}
+</script>
+
+<template>
+  <div>
+    <button @click="handleClick(dayNum)">传递参数</button>
+  </div>
+</template>
+
+<style scoped></style>

src/views/test/Father.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Child from './Child.vue'
+
+function testEvent(param) {
+	console.log('param >>> 就是 dayNum', param)
+}
+
+</script>
+
+<template>
+  <Child @test-event="testEvent" />
+</template>
+
+<style scoped></style>