<template>
|
<div class="tab_head">
|
<div class="head_left flex-center">
|
<div class="icon" @click="searchShow = true" v-if="leftShow" style="margin-right:.2666rem;">
|
<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>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import handleDt from "@/utils/deTh";
|
import { Toast } from "vant";
|
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
|
}
|
},
|
watch: {
|
searchShow() {
|
this.searchValue = "";
|
this.init();
|
}
|
},
|
async mounted() {
|
this.init();
|
this.getInfoSite();
|
},
|
methods: {
|
// 跳转客服页面
|
aRouter1() {
|
// window.open(this.onlineService);
|
Toast(this.$t("kf1"));
|
},
|
// 获取客服地址
|
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
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@grey: #dddddd;
|
@dark_green: #07c160;
|
|
.tab_head {
|
font-size: 10vw;
|
padding: 0.266em;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.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;
|
}
|
}
|
}
|
</style>
|
