From 79db9782438e27a9006d540d18d649c720180a31 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Wed, 13 Aug 2025 18:46:46 +0800
Subject: [PATCH] 1
---
src/components/tabHead.vue | 286 ++++-----------------------------------------------------
1 files changed, 21 insertions(+), 265 deletions(-)
diff --git a/src/components/tabHead.vue b/src/components/tabHead.vue
index 58b3022..7feb71c 100644
--- a/src/components/tabHead.vue
+++ b/src/components/tabHead.vue
@@ -1,289 +1,45 @@
<template>
<div class="tab_head">
- <div class="head_left">
- <div class="icon" @click="searchShow = true" v-if="leftShow">
- <van-icon name="search" size=".5em" />
- </div>
- <slot name="left"></slot>
- </div>
- <div class="head_right">
- <div class="icon" v-if="rightShow" @click="aRouter1">
- <van-icon name="service-o" size=".5em" />
- </div>
- <div class="icon" v-if="rightShow" @click="goToTopUp">
- <van-icon name="setting" size=".5em" />
- </div>
- <slot></slot>
- </div>
- <!-- 搜索弹窗 -->
- <van-popup v-model="searchShow" round position="bottom" :style="{ height: '80%' }">
- <div class="popup_head">
- <van-icon name="arrow-left" size=".5em" @click="searchShow = false" />
- <div class="popup_input">
- <van-field v-model="searchValue" :placeholder="$t('hj37')" left-icon="search" clearable />
- </div>
- <van-button type="primary" round @click="submit">{{
- $t("Search")
- }}</van-button>
- </div>
-
- <van-list v-model="loading" :finished="finished" :finished-text="$t('hj43')" @load="onLoad"
- v-if="(lists && lists.length > 0) || !finished">
- <van-cell v-for="item in lists" :key="item.id" @click="toDetails(item)">
- <div class="search_item">
- <div class="search_item_left">
- <div class="search_item_left_name">{{ item.name }}</div>
- <div class="search_item_left_hint">
- <span>{{ item.stock_type }}</span>
- {{ item.spell }}
- </div>
- </div>
-
- <div class="search_item_right">
- <span>{{ item.nowPrice }}</span>
- <van-icon name="arrow" size="1em" />
- </div>
- </div>
- </van-cell>
- </van-list>
-
- <div class="zhaobudao" v-else>
- <img src="../assets/img/zhaobudao.png" alt="" />
- </div>
- </van-popup>
+ <slot name="left"></slot>
+ <div class="tab_title">{{ title }}</div>
+ <slot></slot>
</div>
</template>
<script>
-import * as api from "@/axios/api";
-import handleDt from "@/utils/deTh";
export default {
name: "tabHead",
- data() {
- return {
- searchShow: false, // 搜索弹窗
- searchValue: "", // 搜索内容
- lists: [], // 搜索列表
- loading: false, // 是否加载
- finished: true, // 是否加载完成
- pageNum: 1,
- pageSize: 20
- };
- },
props: {
- // 是否显示客服和设置图标
- rightShow: {
- type: Boolean,
- default: true
- },
- // 是否显示左侧搜索
- leftShow: {
- type: Boolean,
- default: true
+ title: {
+ type: String,
+ default: ""
}
},
- watch: {
- searchShow() {
- this.searchValue = "";
- this.init();
- }
- },
- async mounted() {
- this.init();
- this.getInfoSite();
- },
- methods: {
- // 跳转客服页面
- aRouter1() {
- window.open(this.onlineService);
- },
- // 获取客服地址
- async getInfoSite() {
- let data = await api.getInfoSite();
- if (data.status === 0) {
- this.onlineService = data.data.onlineService;
- // console.log(this.onlineService, 'this.onlineService');
- } else {
- this.$store.commit("elAlertShow", {
- elAlertShow: true,
- elAlertText: data.msg
- });
- }
- },
- goToTopUp() {
- // 跳转设置页面
- this.$router.push("/setting");
- },
- onLoad: handleDt.throttle(async function (a, b) {
- // 搜索列表加载
- this.finished = false;
- let opt = {
- pageNum: this.pageNum,
- pageSize: this.pageSize,
- stockPlate: "",
- keyWords: this.searchValue,
- stockType: "",
- orderBy: ""
- };
-
- let data = await api.getStockByType(opt);
- this.loading = false; // 加载状态结束
-
- if (data.status === 0 && data.data.list) {
- this.lists = [...this.lists, ...data.data.list];
- } else if (data.status != 0) {
- this.finished = true;
- }
-
- if (data.data.list && data.data.list.length <= 0) {
- // 数据全部加载完成
- this.finished = true;
- } else {
- this.pageNum++;
- }
- }, 500),
- init() {
- // 初始化
- this.pageNum = 1;
- this.lists = [];
- this.finished = true;
- },
- submit() {
- // 提交搜索
- this.init();
- this.onLoad();
- },
- // 点击进入详情
- toDetails(item) {
- const obj = {
- pid: item.code || "",
- type: item.stock_type || ""
- };
- window.localStorage.setItem("kLine", JSON.stringify(obj));
-
- this.$router.push({
- path: "/kline",
- query: {
- code: item.code,
- type: item.stock_type
- }
- });
- },
+ data() {
+ return {};
}
};
</script>
<style lang="less" scoped>
-@grey: #dddddd;
-@dark_green: #07c160;
-
.tab_head {
font-size: 10vw;
- padding: 0.266em;
+ padding: 0.2em 0.525em;
+ background: #13161e;
display: flex;
- justify-content: space-between;
align-items: center;
+ justify-content: space-between;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ height: 1.5em;
- .zhaobudao {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding-top: 0.5em;
-
- img {
- width: 65%;
- }
- }
-
- .search_item {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 1.5em;
- padding: 0.5em 0;
-
- .search_item_left {
- flex: 1;
-
- .search_item_left_hint {
- margin-top: 0.3em;
- color: #969799;
- font-size: 0.8em;
-
- span {
- border-radius: 0 26em 26em 0;
- background: @dark_green;
- color: #fff;
- padding: 0 0.3em;
- margin-right: 0.1em;
- }
- }
- }
-
- .search_item_right {
- display: flex;
- justify-content: end;
- align-items: center;
- color: #969799;
-
- span {
- margin-right: 0.5em;
- }
- }
- }
-
- .popup_head {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0.25em;
-
- /deep/ .van-cell {
- background: none;
- }
-
- /deep/ .van-field__left-icon .van-icon,
- .van-field__right-icon .van-icon {
- font-size: 1.5em;
- }
-
- /deep/ .van-field__control {
- font-size: 1.5em;
- }
-
- .popup_input {
- background: #f7f8fa;
- @inpH: 1em;
- height: @inpH;
- flex: 1;
- border-radius: @inpH / 2;
- display: flex;
- align-items: center;
- margin-left: 0.5em;
- margin-right: 0.5em;
- }
- }
-
- .icon {
- width: 1em;
- height: 1em;
- border-radius: 50%;
- background: @grey;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .head_right {
- display: flex;
- justify-content: end;
- }
-
- .head_right {
- .icon {
- margin-left: 0.266em;
- }
+ .tab_title {
+ font-size: 0.55em;
+ font-weight: 700;
+ color: #ccc;
}
}
</style>
--
Gitblit v1.9.3