Authored by 肖亚东

品牌搜索功能,a-z排序跳转功能提交

... ... @@ -25,7 +25,7 @@ Component({
* 可用于模版渲染
*/
data: {
result: {},
result: [],
showResult: false,
hasResult: false,
... ... @@ -51,25 +51,17 @@ Component({
text = text.toLowerCase();
if (text) {
let all_list = this.properties.all_list;
let result = {};
let hasResult = false;
for (let k in all_list) {
let list = all_list[k];
let ary = [];
let result = [];
for (let item of all_list) {
let list = item.list;
list && list.map((value, key) => {
let name = value.brand_name.toLowerCase();
let cnName = value.brand_name_cn.toLowerCase();
let enName = value.brand_name_en.toLowerCase();
if (value.type == 2 && (name.includes(text)
|| cnName.includes(text)
|| enName.includes(text))) { //type==1 店铺 type==2 品牌
ary.push(value);
let name = value.name.toLowerCase();
if (name.includes(text)) {
result.push(value);
hasResult = true;
}
})
if (ary.length > 0) {
result[k] = ary;
}
}
this.setData({
hasResult,
... ...
<view class="searchContainer">
<template name="brand-list-item">
<view class='row' bindtap="brandItemTapped" data-brand-item="{{brand}}">
<view class="content">
<image class="brand-icon" src="{{item.logo}}" mode="aspectFill"></image>
<view class='rowContent'>
<text class='title'>{{item.name}}</text>
<text class='location'>展位号:A578</text>
</view>
</view>
<view class='spaceLine'/>
</view>
</template>
<view class="searchContainer">
<view class="search">
<image class="serachIcon" src="../index/images/home_search@2x.png"></image>
<image class="serachIcon" src="../../static/images/search@3x.png"></image>
<input class="serachInput" placeholder="搜索结果" bindinput="inputChanged" bindfocus="focusChanged" bindconfirm="inputConfirmed" placeholder-class="placeholder" auto-focus/>
</view>
<text class="cancelButton" bindtap="cancelSearch">取消</text>
... ... @@ -9,54 +23,10 @@
<view class="searchResult">
<block wx:if="{{showResult}}">
<view class='NoResult' wx:if="{{!hasResult}}">无结果</view>
<block wx:for="{{result}}" wx:key="{{index}}" wx:for-item="item">
<view id="{{index == '0-9' ? 'last' : index}}" class='search_sessionTitle'>
<text class='search_sessionText'>{{index == '0-9' ? '0' : index}}</text>
</view>
<block wx:for="{{item}}" wx:key="{{unique}}" wx:for-item="item">
<view class='search_row' wx:if="{{item.type == 2}}" bindtap="search_brandItemTapped" data-brand-item="{{item}}">
<view class='search_rowContent'>
<text class='search_title'>{{item.brand_name}}</text>
<view class='search_new' wx:if="{{item.is_show_new == 'Y'}}">
<text class='search_text'>NEW</text>
</view>
<view class='search_hot' wx:if="{{item.is_hot == 'Y'}}">
<text class='search_text'>HOT</text>
</view>
</view>
<view class='search_spaceLine'/>
</view>
</block>
<view class='noResult' wx:if="{{!hasResult}}">无结果</view>
<block wx:for="{{result}}" wx:key="{{index}}" wx:for-item="brand">
<template is="brand-list-item" data="{{item:brand}}"/>
</block>
</block>
<block wx:else>
<view class="searchHistoryContainer" hidden="{{(searchHistory.length > 0) ? false : true}}">
<text class="hotKeyword">最近搜索</text>
<image class='deleteButton' bindtap='clearSearchHistory' src='../search/images/rubbish-ic@2x.png'></image>
<view class="hotKeywordItemContainer">
<block wx:for="{{searchHistory}}" wx:key="{{index}}">
<view class="hotKeywordItem" bindtap="historyKeywordItemTapped" data-item="{{item}}">
<text class="hotKeywordTitle">{{item.brand_name}}</text>
</view>
</block>
</view>
</view>
<view class='hotHistorySeparator' hidden="{{(searchHistory.length > 0) ? false : true}}"></view>
<view class="hotKeywordContainer">
<text class="hotKeyword">热门搜索</text>
<view class="hotKeywordItemContainer">
<block wx:for="{{hotKeyword['data']}}" wx:key="{{index}}">
<view class="hotKeywordItem" bindtap="hotKeywordItemTapped" data-item="{{item}}">
<text class="hotKeywordTitle">{{item.brandName}}</text>
</view>
</block>
</view>
</view>
</block>
</view>
\ No newline at end of file
... ...
... ... @@ -50,172 +50,72 @@
color: #b0b0b0;
}
.hotKeywordContainer {
margin-top: 30rpx;
}
.hotKeyword {
margin-left: 30rpx;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #B0B0B0;
letter-spacing: -0.33px;
}
.hotKeywordItemContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 30rpx;
margin-top: 20rpx;
}
.hotKeywordItem {
padding-top: 8rpx;
padding-bottom: 8rpx;
padding-left: 14rpx;
padding-right: 14rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-left: 30rpx;
border: 2rpx #e0e0e0 solid;
border-radius: 6rpx;
display: flex;
justify-content: center;
}
.hotKeywordTitle {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #B0B0B0;
letter-spacing: -0.33px;
}
.hotHistorySeparator {
width: 100%;
height: 2rpx;
margin-left: 30rpx;
margin-top: 30rpx;
background-color: #f0f0f0;
}
.searchHistoryContainer {
padding-top: 30rpx;
position: relative;
}
.searchHistoryContainer .deleteButton {
width: 30rpx;
height: 34rpx;
position: absolute;
right: 30rpx;
top: 38rpx;
}
.searchResult {
margin-top: 88rpx;
width: 100%;
}
.searchResult .search_sessionTitle {
.searchResult .noResult {
text-align: center;
font-size: 40rpx;
color: #999999;
font-weight: bold;
margin-top: 200rpx;
display: flex;
align-items: center;
height: 58rpx;
width: 100%;
background: #F0F0F0;
justify-content: center;
}
.searchResult .search_sessionTitle .search_sessionText {
text-align: left;
margin-left: 30rpx;
font-weight: bold;
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #B0B0B0;
letter-spacing: -0.39px;
}
.searchResult .search_row {
height: 88rpx;
.row {
height: 140rpx;
width: 100%;
background: white;
}
.searchResult .search_row .search_rowContent {
display: flex;
.row .content {
display: flex;
align-items: center;
height: 86rpx;
width: 92%;
margin-left: 4%;
flex-direction: row;
background: white;
height: 139rpx;
width: 100%;
}
.row .brand-icon {
width: 200rpx;
height: 100rpx;
margin: 20rpx 20rpx 20rpx 30rpx;
}
.searchResult .search_row .search_spaceLine {
height: 2rpx;
width: 92%;
margin-left: 4%;
background: #F0F0F0;
.row .rowContent {
display: flex;
flex-direction: column;
justify-content: center;
height: 139rpx;
width: 460rpx;
}
.searchResult .search_row .search_rowContent .search_title {
text-align: left;
max-width: 500rpx;
.row .rowContent .title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: PingFang-SC-Regular;
font-size: 28rpx;
font-family: SanFranciscoText-Bold;
font-weight: bold;
font-size: 32rpx;
color: #444444;
letter-spacing: -0.39px;
letter-spacing: -0.38px;
}
.searchResult .search_row .search_rowContent .search_hot {
display: flex;
align-items: center;
height: 30rpx;
width: 76rpx;
margin-left: 40rpx;
justify-content: center;
background: #D0021B;
border-radius: 104rpx;
}
.searchResult .search_row .search_rowContent .search_new {
display: flex;
align-items: center;
height: 30rpx;
width: 76rpx;
background: green;
margin-left: 40rpx;
justify-content: center;
border-radius: 104rpx;
}
.searchResult .search_row .search_rowContent .search_hot .search_text {
text-align: left;
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #FFFFFF;
letter-spacing: -0.33px;
}
.searchResult .search_row .search_rowContent .search_new .search_text {
text-align: left;
font-family: PingFang-SC-Medium;
.row .rowContent .location {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #FFFFFF;
letter-spacing: -0.33px;
color: #B0B0B0;
letter-spacing: -0.29px;
margin-top: 14rpx;
}
.searchResult .NoResult {
text-align: center;
font-size: 40rpx;
color: #999999;
font-weight: bold;
margin-top: 200rpx;
display: flex;
justify-content: center;
.row .spaceLine {
height: 1rpx;
width: 690rpx;
margin-left: 30rpx;
background: #E0E0E0;
}
\ No newline at end of file
... ...
... ... @@ -69,14 +69,7 @@ Page({
GET(ACTIVITY_HOST + '/api/yohood/getBrandList', {})
.then(data => {
// let json = parseListResources(data.data);
// let all_list = json.all_list;
// let all_list_key = json.all_list_key;
// that.setData({
// cacheBrandListDataForMen: json,
// });
let brandsList = data.data;
let brandsList = data_letter_sort(data.data);
that.setData({
brandsList,
});
... ... @@ -136,39 +129,50 @@ Page({
})
function parseListResources(json) {
let all_list_old = json;
if (isEmptyObject(all_list_old)) {
return json;
function data_letter_sort(data) {
var all_list_old = data;
var letter_reg = /^[A-Z]$/;
var list = new Array();
for (var i = 0; i < all_list_old.length; i++) {
// 添加 # 分组,用来 存放 首字母不能 转为 大写英文的 数据
// list['#'] = new Array();
// 首字母
let barndName = all_list_old[i].name || '#';
let letter = barndName.substr(0, 1);
// 是否 大写 英文 字母
if (!letter_reg.test(letter)) {
letter = '#';
}
// 创建 字母 分组
if (!(letter in list)) {
list[letter] = new Array();
}
// 字母 分组 添加 数据
list[letter].push(all_list_old[i]);
}
let reg = /^[a-zA-Z]*$/;
let all_list = {};
let otherList = [];
let all_list_key = {};
for (let value of all_list_old) {
if (reg.test(value.name)) {
all_list_key[k] = {
key: k,
};
all_list[k] = all_list_old[k];
} else {
Array.prototype.push.apply(otherList, all_list_old[k]);
}
// 转换 格式 进行 排序;
var result = new Array();
for (var key in list) {
result.push({
letter: key,
list: list[key]
});
}
all_list['0-9'] = otherList;
all_list_key['0-9'] = {
key: '0-9',
};
return {
all_list,
all_list_key,
};
result.sort(function (x, y) {
return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
});
// # 号分组 放最后
var last_arr = result[0];
result.splice(0, 1);
result.push(last_arr);
// 转换 数据 {} 格式
// var json_sort = {}
// for (var i = 0; i < result.length; i++) {
// json_sort[result[i].letter] = result[i].list;
// }
return result;
}
function isEmptyObject(obj) {
... ...
... ... @@ -2,7 +2,7 @@
<import src="./brandSearch.wxml"/>
<block wx:if="{{searching}}">
<brandSearch id="brandSearch" all_list="{{all_list}}" hotKeyword="{{hotKeyword}}" bind:dismissSearchView="dismissSearchView"></brandSearch>
<brandSearch id="brandSearch" all_list="{{brandsList}}" hotKeyword="{{hotKeyword}}" bind:dismissSearchView="dismissSearchView"></brandSearch>
</block>
<block wx:else>
<scroll-view class='container' style="height: {{scrollHeight}}px;" scroll-y scroll-into-view="{{scrollToView}}">
... ... @@ -13,21 +13,22 @@
<view>
<block wx:for="{{brandsList}}" wx:key="{{index}}" wx:for-item="brand">
<view id="{{index == '0-9' ? 'last' : index}}" class='sessionTitle'>
<text class='sessionText'>{{index == '0-9' ? '0' : index}}</text>
<view id="{{brand.letter == '#' ? 'last' : brand.letter}}" class='sessionTitle'>
<text class='sessionText'>{{brand.letter}}</text>
</view>
<!-- <block wx:for="{{item}}" wx:key="{{unique}}" wx:for-item="item"> -->
<view class='row' bindtap="brandItemTapped" data-brand-item="{{brand}}">
<block wx:for="{{brand.list}}" wx:key="{{unique}}" wx:for-item="brand">
<!-- <view class='row' bindtap="brandItemTapped" data-brand-item="{{item}}">
<view class="content">
<image class="brand-icon" src="{{brand.logo}}" mode="aspectFill"></image>
<image class="brand-icon" src="{{item.logo}}" mode="aspectFill"></image>
<view class='rowContent'>
<text class='title'>{{brand.name}}</text>
<text class='title'>{{item.name}}</text>
<text class='location'>展位号:A578</text>
</view>
</view>
<view class='spaceLine'/>
</view>
<!-- </block> -->
</view> -->
<template is="brand-list-item" data="{{item:brand}}"/>
</block>
</block>
</view>
... ... @@ -35,8 +36,8 @@
<view class="alphanet-selector" data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove">
<view class="selector-one" data-ap="{{item.key=='0-9' ? 'last' : item.key}}" wx:for="{{all_list_key}}" wx:key="unique">
{{item.key=="0-9" ? '0' : item.key}}
<view class="selector-one" data-ap="{{item.letter=='#' ? 'last' : item.letter}}" wx:for="{{brandsList}}" wx:key="unique">
{{item.letter}}
</view>
</view>
</block>
... ...
... ... @@ -22,60 +22,6 @@
letter-spacing: -0.34px;
}
.row {
height: 140rpx;
width: 100%;
background: white;
}
.row .content {
display: flex;
align-items: center;
height: 139rpx;
width: 100%;
}
.row .brand-icon {
width: 200rpx;
height: 100rpx;
margin: 20rpx 20rpx 20rpx 30rpx;
}
.row .rowContent {
display: flex;
flex-direction: column;
justify-content: center;
height: 139rpx;
width: 460rpx;
}
.row .rowContent .title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: SanFranciscoText-Bold;
font-weight: bold;
font-size: 32rpx;
color: #444444;
letter-spacing: -0.38px;
}
.row .rowContent .location {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #B0B0B0;
letter-spacing: -0.29px;
margin-top: 14rpx;
}
.row .spaceLine {
height: 1rpx;
width: 690rpx;
margin-left: 30rpx;
background: #E0E0E0;
}
.rowType2 {
display: flex;
flex-direction: row;
... ...