<template>
|
<div class="goods">
|
<header-line-component v-if="header === 'discover'"></header-line-component>
|
<div class="weui-search-bar weui-search-bar_focusing" id="searchBar" v-if="header === 'search'">
|
<a href="javascript:" class="back" @click="jumpBack()"><i class="fa fa-angle-left"></i></a>
|
<form class="weui-search-bar__form">
|
<div class="weui-search-bar__box">
|
<i class="weui-icon-search"></i>
|
<input type="search" class="weui-search-bar__input" id="searchInput" @focus="isseeking = true" @blur="isseeking = false">
|
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
|
</div>
|
</form>
|
<a href="javascript:" class="weui-search-bar__confirm-btn">{{dict.search}}</a>
|
</div>
|
<div class="recommends" v-if="isseeking">
|
<h4>{{dict.recommend}}</h4>
|
<div class="recommend-box">
|
<span class="recommend-item" v-for="item in recommends" :key="item.id">{{item.name}}</span>
|
</div>
|
</div>
|
<tab-component class="border-bottom-5" v-if="!isseeking" :tabs="navList" @tabchange="tabChange"></tab-component>
|
<goods-list-component v-if="!isseeking && goods" :goods="goods" @goodslistjump="jumpmenu"></goods-list-component>
|
<bottom-line-component v-if="!isseeking && bottomtip" :message="bottomtip"></bottom-line-component>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
import {goodsData} from '../store/mockdata'
|
import goodsListComponent from '../components/goodsListComponent'
|
import headerLineComponent from '../components/headerLineComponent'
|
import bottomLineComponent from '../components/bottomLineComponent'
|
import tabComponent from '../components/tabComponent'
|
export default {
|
name: 'goods',
|
components: { goodsListComponent, tabComponent, headerLineComponent, bottomLineComponent },
|
data () {
|
return {
|
dict: dict, // 字典表翻译
|
isseeking: false, // 是否为搜索状态
|
recommends: null, // 推荐信息
|
header: 'search', // 顶部默认为搜索，可选为“发现”类
|
// tab类型切换，默认为综合、销量、价格
|
navList: [
|
{
|
name: dict.synthesis,
|
active: true,
|
type: 'synthesis'
|
},
|
{
|
name: dict.sales_volume,
|
active: false,
|
type: 'sales'
|
},
|
{
|
name: dict.price,
|
active: false,
|
type: 'price'
|
}
|
],
|
goods: null, // 商品列表
|
type: null, // 从其他界面传递过来的搜索类型
|
bottomtip: null // 底部提示信息
|
}
|
},
|
methods: {
|
/**
|
* @description 搜索行返回按钮，返回上一个界面
|
*/
|
jumpBack () {
|
this.$router.back(-1)
|
},
|
/**
|
* @description 类型切换，从组件中获取当前类型并更新数据
|
*/
|
tabChange (message) {
|
console.log(message.value)
|
this.goods = null
|
this.bottomtip = null
|
setTimeout(() => {
|
this.goods = JSON.parse(JSON.stringify(goodsData.goods))
|
this.bottomtip = dict.bottomtip
|
}, 1000)
|
},
|
/**
|
* @description 点击商品时页面跳转
|
*/
|
jumpmenu (message) {
|
this.$router.push({name: message.view, params: {id: message.id}})
|
}
|
},
|
mounted: function () {
|
let currentType = this.navList.find((item) => {
|
return item.active
|
})
|
console.log(currentType)
|
setTimeout(() => {
|
this.goods = JSON.parse(JSON.stringify(goodsData.goods))
|
this.recommends = JSON.parse(JSON.stringify(goodsData.recommends))
|
this.bottomtip = dict.bottomtip
|
}, 1000)
|
this.type = this.$route.params.type
|
console.log(this.type)
|
// 获取参数信息，控制头部为搜索框或提示
|
if (this.$route.params.header) {
|
this.header = this.$route.params.header
|
}
|
// 当页面从首页搜索跳转，搜索框获取焦点
|
if (this.$route.params.header === 'search') {
|
$('#searchInput').focus()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.back {
|
display: inline-block;
|
font-size: 30px;
|
padding: 0 10px;
|
line-height: 28px;
|
color: #bbbbbb;
|
}
|
.weui-search-bar {
|
top: 0px;
|
width: 100%;
|
max-width: 41.2rem;
|
padding: 8px 10px 8px 0px;
|
background: #ffffff;
|
}
|
.weui-search-bar:before {
|
border: none;
|
}
|
.weui-search-bar__form {
|
background: transparent;
|
}
|
.weui-search-bar__form:after {
|
border-radius: 10px;
|
}
|
.weui-search-bar__label {
|
border-radius: 20px;
|
}
|
.weui-search-bar__box .weui-search-bar__input{
|
height: 1.6em;
|
line-height: 1.6em;
|
}
|
.weui-search-bar__confirm-btn {
|
display: block;
|
margin-left: 10px;
|
line-height: 28px;
|
color: #000000;
|
white-space: nowrap;
|
}
|
.recommends h4 {
|
padding: 20px 0px 10px 12px;
|
}
|
.recommends .recommend-box {
|
padding: 0px 10px;
|
}
|
.recommends .recommend-box .recommend-item {
|
display: inline-block;
|
font-size: 14px;
|
padding: 0px 10px;
|
background: #eeeeee;
|
border-radius: 5px;
|
margin: 5px 2px;
|
}
|
</style>
|
