<template>
|
<div class="tab_head">
|
<div class="icon" @click="searchShow = true">
|
<van-icon name="search" size=".5em" />
|
</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">
|
<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";
|
export default {
|
name: "tabHead",
|
data() {
|
return {
|
searchShow: false, // 搜索弹窗
|
searchValue: '', // 搜索内容
|
lists: [], // 搜索列表
|
loading: false, // 是否加载
|
finished: true, // 是否加载完成
|
pageNum: 1,
|
pageSize: 20,
|
};
|
},
|
props: {
|
rightShow: { // 是否显示客服和设置图标
|
type: Boolean,
|
default: true
|
}
|
},
|
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];
|
}
|
|
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()
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@grey: #dddddd;
|
@dark_green: #07c160;
|
|
.tab_head {
|
font-size: 10vw;
|
padding: .266em;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.zhaobudao {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-top: .5em;
|
|
img {
|
width: 65%;
|
}
|
}
|
|
.search_item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 1.5em;
|
padding: .5em 0;
|
|
.search_item_left {
|
flex: 1;
|
|
.search_item_left_hint {
|
margin-top: .3em;
|
color: #969799;
|
font-size: .8em;
|
|
span {
|
border-radius: 0 26em 26em 0;
|
background: @dark_green;
|
color: #fff;
|
padding: 0 .3em;
|
margin-right: .1em;
|
}
|
}
|
}
|
|
.search_item_right {
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
color: #969799;
|
|
span {
|
margin-right: .5em;
|
}
|
}
|
}
|
|
.popup_head {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: .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: .5em;
|
margin-right: .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: .266em;
|
}
|
}
|
}
|
</style>
|
