xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增搜索结果页面 优化搜索框

master
wanghongjun 2 years ago
parent
6c57222227
commit
9316ddc324
6 changed files with 411 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      components/search/index.vue
  2. 6
      pages.json
  3. 2
      pages/goods/detail.vue
  4. 130
      pages/goods/list.vue
  5. 4
      pages/index/index.vue
  6. 425
      pages/search/index.vue

60
components/search/index.vue
View File

@ -1,10 +1,13 @@
<template> <template>
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="search-wrapper"> <view class="search-wrapper">
<view class="index-search" @click="onClick"> <view class="index-search">
<view class="index-cont-search t-c"> <view class="index-cont-search t-c">
<text class="search-icon iconfont icon-search"></text> <text class="search-icon iconfont icon-search"></text>
<text class="search-text">{{ tips }}</text> <text class="search-text">
<input type="text" :placeholder="tips" v-model="searchValue">
</text>
<button class="search-text-bu" @click="onSearch">搜索</button>
</view> </view>
</view> </view>
</view> </view>
@ -15,25 +18,37 @@
props: { props: {
tips: { tips: {
type: String, type: String,
default: '搜索标的' default: '请输入店铺/标的名称关键字'
} }
}, },
data() { data() {
return {} return {
searchValue: ''
}
}, },
methods: { methods: {
onClick() { onClick() {
this.$emit('event') this.$emit('event')
},
onSearch() {
this.$navTo('pages/search/index', { searchValue: this.searchValue })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-wrapper { .search-wrapper {
background: #fff; background: #1c223b;
padding: 13rpx; padding: 0rpx 0rpx 0rpx 0rpx;
position: absolute;
top: 20rpx;
left: 19rpx;
width: 95%;
border-radius: 50rpx;
} }
.index-search { .index-search {
@ -44,8 +59,8 @@
font-size: 28rpx; font-size: 28rpx;
color: #6d6d6d; color: #6d6d6d;
box-sizing: border-box; box-sizing: border-box;
height: 64rpx; height: 74rpx;
line-height: 64rpx; line-height: 74rpx;
.index-cont-search { .index-cont-search {
width: 100%; width: 100%;
@ -54,15 +69,32 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.index-cont-search .search-icon { .search-icon {
font-size: 28rpx; font-size: 34rpx;
margin-left: 50rpx;
} }
.index-cont-search .search-text { .search-text {
margin-left: 14rpx; text-align: left;
} float: left;
margin-left: 20rpx;
width: 100%;
input {
font-size: 20rpx;
}
}
.search-text-bu {
margin-right: 20rpx;
color: #ffffff;
background-color: #1c223b;
font-size: 20rpx;
width: 120rpx;
height: 50rpx;
text-align: center;
border-radius: 50rpx;
}
}
} }
</style> </style>

6
pages.json
View File

@ -63,7 +63,9 @@
{ {
"path": "pages/search/index", "path": "pages/search/index",
"style": { "style": {
"navigationBarTitleText": "标的搜索" "navigationBarTitleText": "搜索结果",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#1c223b"
} }
}, },
{ {
@ -107,6 +109,8 @@
"path": "pages/goods/list", "path": "pages/goods/list",
"style": { "style": {
"navigationBarTitleText": "数据店铺", "navigationBarTitleText": "数据店铺",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#1c223b",
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, },

2
pages/goods/detail.vue
View File

@ -353,7 +353,7 @@
goteshop(){ goteshop(){
const app = this const app = this
let spname = this.goods.username let spname = this.goods.username
this.$navTo("pages/goods/goodsDetail?k="+spname+'&dt='+new Date().getTime()) this.$navTo("pages/goods/list?k="+spname+'&dt='+new Date().getTime())
}, },
// 转让 // 转让
transfer(pass_Num,pricets) { transfer(pass_Num,pricets) {

130
pages/goods/list.vue
View File

@ -2,21 +2,15 @@
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
<!-- 页面头部 --> <!-- 页面头部 -->
<!-- 搜索 --> <!-- 搜索 -->
<view class="sozone"> <view class="search">
<view class="sovue">
<view class="search-wrapper"> <view class="search-wrapper">
<view class="search-input"> <view class="index-search">
<view class="search-input-wrapper"> <view class="index-cont-search t-c">
<view class="left">
<text class="search-icon iconfont icon-search"></text> <text class="search-icon iconfont icon-search"></text>
</view> <text class="search-text">
<view class="right"> <input type="text" placeholder="请输入关键字" v-model="searchValue">
<input v-model="searchValue" class="input" focus="true" placeholder="请输入搜索关键词" type="text"> </text>
</view> <button class="search-text-bu" @click="onSearch">搜索</button>
</view>
</view>
<view class="search-button">
<view class="button" @click="onSearch">搜索</view>
</view> </view>
</view> </view>
</view> </view>
@ -263,22 +257,6 @@
this.$navTo('pages/goods/detail', { gislicode }) this.$navTo('pages/goods/detail', { gislicode })
}, },
/**
* 商品搜索
*/
handleSearch() {
const searchPageUrl = 'pages/search/index'
// 判断来源页面
let pages = getCurrentPages()
if (pages.length > 1 &&
pages[pages.length - 2].route === searchPageUrl) {
uni.navigateBack()
return
}
// 跳转到商品搜索页
this.$navTo(searchPageUrl)
}
}, },
} }
@ -287,80 +265,60 @@
<style lang="scss" scoped> <style lang="scss" scoped>
// 搜索 // 搜索
.sozone{ .search {
position: relative; position: fixed;
z-index: 70; float: top;
top: var(--window-top);
.sovue{ left: var(--window-left);
position: absolute; right: var(--window-right);
top: -100rpx; z-index: 19;
left: 4rpx;
width: 100%;
}
.search-wrapper { .search-wrapper {
display: flex; background: #1c223b;
height: 84rpx; padding: 0rpx 20rpx 20rpx 20rpx;
} }
// 搜索输入框 .index-search {
.search-input { border-bottom: 0;
width: 80%;
background: #fff; background: #fff;
border-radius: 10rpx 0 0 10rpx; border-radius: 50rpx;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx; font-size: 28rpx;
} color: #6d6d6d;
box-sizing: border-box;
} height: 64rpx;
line-height: 64rpx;
.right {
flex: 1;
input { .index-cont-search {
width: 100%;
font-size: 28rpx; font-size: 28rpx;
height: 84rpx; background: #f7f7f7;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
.input-placeholder { .search-icon {
color: #aba9a9; font-size: 34rpx;
} margin-left: 50rpx;
} }
.search-text {
text-align: left;
float: left;
font-size: 20rpx;
margin-left: 20rpx;
} }
.search-text-bu {
margin-right: 20rpx;
color: #ffffff;
background-color: #1c223b;
font-size: 20rpx;
width: 120rpx;
height: 50rpx;
text-align: center;
border-radius: 50rpx;
} }
} }
// 搜索按钮
.search-button {
width: 20%;
box-sizing: border-box;
.button {
height: 84rpx;
font-size: 28rpx;
border-radius: 0 10rpx 10rpx 0;
background: #4399ff;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
} }
} }

4
pages/index/index.vue
View File

@ -2,7 +2,7 @@
<view class="container"> <view class="container">
<!-- 搜索 --> <!-- 搜索 -->
<view class="sozone"> <view class="sozone">
<Search/> <search class="search" tips="请输入店铺/标的名称关键字"/>
</view> </view>
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="lbzone"> <view class="lbzone">
@ -73,7 +73,7 @@
<script> <script>
import Banner from './components/banner' import Banner from './components/banner'
import Search from './components/search' import Search from '@/components/search'
import * as Api from '@/api/page' import * as Api from '@/api/page'
import * as Gapi from '@/api/goods' import * as Gapi from '@/api/goods'
// 滚动加载 // 滚动加载

425
pages/search/index.vue
View File

@ -1,43 +1,101 @@
<template> <template>
<view class="container"> <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
<view class="search">
<view class="search-wrapper"> <view class="search-wrapper">
<view class="search-input"> <view class="index-search">
<view class="search-input-wrapper"> <view class="index-cont-search t-c">
<view class="left">
<text class="search-icon iconfont icon-search"></text> <text class="search-icon iconfont icon-search"></text>
<text class="search-text">
<input type="text" placeholder="请输入关键字" v-model="searchValue">
</text>
<button class="search-text-bu" @click="onSearch">搜索</button>
</view> </view>
<view class="right">
<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text"></input>
</view> </view>
</view> </view>
</view> </view>
<view class="search-button"> <view class="item-title-tab">
<view class="button" @click="onSearch">搜索</view> <view class="item-title b-f" v-for="items in tab" @click="changeTab(items.key)">
<text :class="{'item-title-text': tabKey === items.key}">{{items.title}}</text>
</view> </view>
</view> </view>
<view class="history" v-if="historySearch.length"> <view class="goods-list clearfix">
<view class="his-head"> <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_islicode)">
<text class="title">最近搜索</text> <!-- 单列显示 -->
<text class="icon iconfont icon-delete" @click="clearSearch"></text> <view class="dis-flex">
<!-- 图片 -->
<view class="goods-item_left">
<image class="image" :src="item.gdimg"></image>
</view> </view>
<view class="his-list"> <view class="goods-item_right">
<view class="his-item" v-for="(val, index) in historySearch" :key="index"> <!-- 名称 -->
<view class="history-button" @click="handleQuick(val)">{{ val }}</view> <view class="goods-name">
<text class="twoline-hide">{{ item.goods_name }}</text>
</view> </view>
<view class="goods-item_desc">
<!-- 权益 -->
<view class="desc-selling_point dis-flex">
<text class="oneline-hide">{{ item.goods_ownership_str }}</text>
</view> </view>
<!-- 用户 -->
<view class="desc-selling_point dis-flex">
<text class="oneline-hide">{{ item.username }}</text>
</view> </view>
<!-- </view> --> <!-- 销量 -->
<view class="desc-goods_sales dis-flex">
<text>销量：{{ item.sale_count }}</text>
</view> </view>
<!-- 价格 -->
<view class="desc_footer">
<text class="price_x">¥{{ item.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</mescroll-body>
</template> </template>
<script> <script>
const HISTORY_SEARCH = 'historySearch' import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as GoodsApi from '@/api/goods'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
//解压缩
import pako from '@/core/pako'
import { base64ToUint8Array,numberWithCommas} from '@/utils/util'
const pageSize = 2
export default { export default {
components: {
MescrollBody,
},
mixins: [MescrollMixin],
data() { data() {
return { return {
historySearch: [], searchValue: '',
searchValue: '' // 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于4条才显示无更多数据
noMoreSize: 4,
},
tab: [
{
key: 1,
title: '标的',
},
{
key: 2,
title: '店铺',
},
],
tabKey: 1,
list: getEmptyPaginateObj(), // 商品列表数据
} }
}, },
@ -45,183 +103,282 @@
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
// 获取历史搜索 // 记录商品ID
this.historySearch = this.getHistorySearch() this.searchValue = options.searchValue
}, },
methods: { methods: {
/**
* 获取历史搜索
*/
getHistorySearch() {
return uni.getStorageSync(HISTORY_SEARCH) || []
},
/** /**
* 搜索提交 * 搜索提交
*/ */
onSearch() { async onSearch() {
const { searchValue } = this if (this.searchValue == '') {
if (searchValue) { this.$error('请输入搜索关键词');
// 记录历史搜索 } else {
this.setHistory(searchValue) await this.getGoodsList()
// 跳转到商品列表页 await this.getHomeListImage()
this.$navTo('pages/goods/list', { search: searchValue })
} }
}, },
// 切换tab
/** async changeTab(val) {
* 记录历史搜索 this.tabKey = val
*/ await this.getGoodsList()
setHistory(searchValue) { await this.getHomeListImage()
const data = this.getHistorySearch()
const index = data.indexOf(searchValue)
index > -1 && data.splice(index, 1)
data.unshift(searchValue)
this.historySearch = data
this.onUpdateStorage()
}, },
/** /**
* 清空最近搜索记录 * 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/ */
clearSearch() { async upCallback(page = 1) {
this.historySearch = [] const app = this
this.onUpdateStorage() // 设置列表数据
await app.getGoodsList(page.num)
.then(list => {
const curPageLen = list.data.length
const totalSize = list.data.total
app.mescroll.endBySize(curPageLen, totalSize)
})
.catch(() => app.mescroll.endErr())
// 标的列表
await app.getHomeListImage()
}, },
/** /**
* 更新历史搜索缓存 * 获取标的列表
* @param {Object} data * @param {number} pageNo 页码
*/ */
onUpdateStorage(data) { getGoodsList(pageNo = 1) {
uni.setStorageSync(HISTORY_SEARCH, this.historySearch) const app = this
const param = {
authorization: '',
entrust_name: '',
entrust_user_name: app.options.k,
goods_status: '1',
limit: pageSize,
order: 'desc',
order_type: '',
page: pageNo,
record_type: '',
source_type: '',
}
if (app.searchValue != '') {
if (app.tabKey === 1) {
param.goods_name = app.searchValue
} else if (app.tabKey === 2) {
param.entrust_user_name = app.searchValue
}
}
return new Promise((resolve, reject) => {
GoodsApi.nbgoods(param)
.then(result => {
// 合并新数据
const newList = app.initList(result.data)
app.list.data = getMoreListData(newList, app.list, pageNo)
app.userList = newList.data[0].user
app.userList.stateStr = this.getUserStateStr(app.userList.state)
app.userList.user_islicode = newList.data[0].user_islicode
resolve(newList)
})
.catch(reject)
})
}, },
getUserStateStr(state){
/** let str = ''
* 跳转到最近搜索 if (state == "1" || state == "3" || state == "7" || state == "0") {
*/ str = '认证中'
handleQuick(search) { } else if (state == "2" || state == "4" || state == "5") {
this.$navTo('pages/goods/list', { search }) str = '认证失败'
} else if (state == "6") {
str = '认证成功'
} }
return str
},
// 初始化订单列表数据
initList(newList) {
newList.data.forEach(item => {
// 处理价格表现形式
item.price = numberWithCommas(item.price)
item.gdimg = item.goods_image === "" ? '' : pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'})
})
return newList
},
async getHomeListImage() {
this.list.data.forEach((item, key) => {
if (item.goods_image === "") {
GoodsApi.nbgoodsImage({"id": item.id}).then(res2 => {
if (res2.code === 200) {
this.list.data[key].goods_image = res2.data.data[0].goods_image;
this.list.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'})
}
})
}
})
},
// 跳转商品详情页
onTargetDetail(gislicode) {
this.$navTo('pages/goods/detail', { gislicode })
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
padding: 20rpx; .search {
min-height: 100vh; position: fixed;
background: #f7f7f7; float: top;
} top: var(--window-top);
left: var(--window-left);
right: var(--window-right);
z-index: 19;
.search-wrapper { .search-wrapper {
display: flex; background: #1c223b;
height: 64rpx; padding: 0rpx 20rpx 20rpx 20rpx;
} }
// 搜索输入框 .index-search {
.search-input { border-bottom: 0;
width: 80%;
background: #fff; background: #fff;
border-radius: 10rpx 0 0 10rpx; border-radius: 50rpx;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
font-size: 28rpx;
color: #6d6d6d;
box-sizing: border-box;
height: 64rpx;
line-height: 64rpx;
.search-input-wrapper { .index-cont-search {
display: flex; width: 100%;
font-size: 28rpx;
.left { background: #f7f7f7;
display: flex; display: flex;
width: 60rpx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.search-icon { .search-icon {
display: block; font-size: 34rpx;
color: #b4b4b4; margin-left: 50rpx;
font-size: 28rpx;
} }
.search-text {
text-align: left;
float: left;
font-size: 20rpx;
margin-left: 20rpx;
}
.search-text-bu {
margin-right: 20rpx;
color: #ffffff;
background-color: #1c223b;
font-size: 20rpx;
width: 120rpx;
height: 50rpx;
text-align: center;
border-radius: 50rpx;
}
} }
.right {
flex: 1;
input {
font-size: 28rpx;
height: 64rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
} }
} }
.item-title-tab {
width: 100%;
margin-top: 80rpx;
.item-title{
width: 20%;
background-color: #f7f7f7;
padding: 26rpx 26rpx 0rpx 26rpx;
font-size: 36rpx;
font-weight: 600;
display: inline-block;
text-align: left;
.item-title-text {
border-bottom: #000000 solid 4rpx;
} }
} }
} }
// 搜索按钮 // 单列显示
.search-button { .goods-list {
width: 20%; width: 100%;
margin-top: 20rpx;
.goods-item {
width: 97%;
height: 280rpx;
margin-bottom: 12rpx;
margin-left: 12rpx;
padding: 20rpx;
box-sizing: border-box; box-sizing: border-box;
background: #fff;
line-height: 1.6;
border-radius: 10rpx;
.button { &:last-child {
height: 64rpx; margin-bottom: 0;
font-size: 28rpx; }
border-radius: 0 10rpx 10rpx 0; }
background: #fa2209;
color: #fff; .goods-item_left {
display: flex; display: flex;
justify-content: center; width: 300rpx;
background: #fff;
align-items: center; align-items: center;
.image {
display: block;
width: 240rpx;
height: 240rpx;
} }
} }
.goods-item_right {
position: relative;
// width: 450rpx;
flex: 1;
// 最近搜索 .goods-name {
.history { margin-top: 10rpx;
min-height: 68rpx;
.his-head { line-height: 1.3;
font-size: 28rpx; white-space: normal;
padding: 50rpx 0 0 0; color: #484848;
color: #777; font-size: 26rpx;
font-weight: bold;
}
}
.icon { .goods-item_desc {
float: right; margin-top: 8rpx;
} }
.desc-selling_point {
width: 400rpx;
font-size: 28rpx;
color: #e49a3d;
} }
.his-list { .desc-goods_sales {
padding: 20rpx 0; color: #999;
overflow: hidden; font-size: 24rpx;
}
.his-item { .desc_footer {
width: 33.3%; font-size: 24rpx;
float: left;
padding: 10rpx;
box-sizing: border-box;
.history-button { .price_x {
text-align: center; margin-right: 16rpx;
padding: 14rpx; color: #f03c3c;
line-height: 30rpx; font-size: 30rpx;
border-radius: 100rpx; font-weight: bold;
background: #fff; float: right;
font-size: 26rpx; margin-top: 40rpx;
border: 1rpx solid #efefef;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.price_y {
text-decoration: line-through;
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save