|
|
|
@ -1,43 +1,101 @@ |
|
|
|
<template> |
|
|
|
<view class="container"> |
|
|
|
<view class="search-wrapper"> |
|
|
|
<view class="search-input"> |
|
|
|
<view class="search-input-wrapper"> |
|
|
|
<view class="left"> |
|
|
|
<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="index-search"> |
|
|
|
<view class="index-cont-search t-c"> |
|
|
|
<text class="search-icon iconfont icon-search"></text> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text"></input> |
|
|
|
<text class="search-text"> |
|
|
|
<input type="text" placeholder="请输入关键字" v-model="searchValue"> |
|
|
|
</text> |
|
|
|
<button class="search-text-bu" @click="onSearch">搜索</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="search-button"> |
|
|
|
<view class="button" @click="onSearch">搜索</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="history" v-if="historySearch.length"> |
|
|
|
<view class="his-head"> |
|
|
|
<text class="title">最近搜索</text> |
|
|
|
<text class="icon iconfont icon-delete" @click="clearSearch"></text> |
|
|
|
<view class="item-title-tab"> |
|
|
|
<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 class="his-list"> |
|
|
|
<view class="his-item" v-for="(val, index) in historySearch" :key="index"> |
|
|
|
<view class="history-button" @click="handleQuick(val)">{{ val }}</view> |
|
|
|
</view> |
|
|
|
<view class="goods-list clearfix"> |
|
|
|
<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_islicode)"> |
|
|
|
<!-- 单列显示 --> |
|
|
|
<view class="dis-flex"> |
|
|
|
<!-- 图片 --> |
|
|
|
<view class="goods-item_left"> |
|
|
|
<image class="image" :src="item.gdimg"></image> |
|
|
|
</view> |
|
|
|
<view class="goods-item_right"> |
|
|
|
<!-- 名称 --> |
|
|
|
<view class="goods-name"> |
|
|
|
<text class="twoline-hide">{{ item.goods_name }}</text> |
|
|
|
</view> |
|
|
|
<view class="goods-item_desc"> |
|
|
|
<!-- 权益 --> |
|
|
|
<view class="desc-selling_point dis-flex"> |
|
|
|
<text class="oneline-hide">{{ item.goods_ownership_str }}</text> |
|
|
|
</view> |
|
|
|
<!-- 用户 --> |
|
|
|
<view class="desc-selling_point dis-flex"> |
|
|
|
<text class="oneline-hide">{{ item.username }}</text> |
|
|
|
</view> |
|
|
|
<!-- 销量 --> |
|
|
|
<view class="desc-goods_sales dis-flex"> |
|
|
|
<text>销量：{{ item.sale_count }}</text> |
|
|
|
</view> |
|
|
|
<!-- 价格 --> |
|
|
|
<view class="desc_footer"> |
|
|
|
<text class="price_x">¥{{ item.price }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- </view> --> |
|
|
|
</view> |
|
|
|
</mescroll-body> |
|
|
|
</template> |
|
|
|
|
|
|
|
<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 { |
|
|
|
components: { |
|
|
|
MescrollBody, |
|
|
|
}, |
|
|
|
mixins: [MescrollMixin], |
|
|
|
data() { |
|
|
|
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) { |
|
|
|
// 获取历史搜索 |
|
|
|
this.historySearch = this.getHistorySearch() |
|
|
|
// 记录商品ID |
|
|
|
this.searchValue = options.searchValue |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取历史搜索 |
|
|
|
*/ |
|
|
|
getHistorySearch() { |
|
|
|
return uni.getStorageSync(HISTORY_SEARCH) || [] |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 搜索提交 |
|
|
|
*/ |
|
|
|
onSearch() { |
|
|
|
const { searchValue } = this |
|
|
|
if (searchValue) { |
|
|
|
// 记录历史搜索 |
|
|
|
this.setHistory(searchValue) |
|
|
|
// 跳转到商品列表页 |
|
|
|
this.$navTo('pages/goods/list', { search: searchValue }) |
|
|
|
async onSearch() { |
|
|
|
if (this.searchValue == '') { |
|
|
|
this.$error('请输入搜索关键词'); |
|
|
|
} else { |
|
|
|
await this.getGoodsList() |
|
|
|
await this.getHomeListImage() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 记录历史搜索 |
|
|
|
*/ |
|
|
|
setHistory(searchValue) { |
|
|
|
const data = this.getHistorySearch() |
|
|
|
const index = data.indexOf(searchValue) |
|
|
|
index > -1 && data.splice(index, 1) |
|
|
|
data.unshift(searchValue) |
|
|
|
this.historySearch = data |
|
|
|
this.onUpdateStorage() |
|
|
|
// 切换tab |
|
|
|
async changeTab(val) { |
|
|
|
this.tabKey = val |
|
|
|
await this.getGoodsList() |
|
|
|
await this.getHomeListImage() |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 清空最近搜索记录 |
|
|
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
|
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
|
|
* @param {Object} page |
|
|
|
*/ |
|
|
|
clearSearch() { |
|
|
|
this.historySearch = [] |
|
|
|
this.onUpdateStorage() |
|
|
|
async upCallback(page = 1) { |
|
|
|
const app = this |
|
|
|
// 设置列表数据 |
|
|
|
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) { |
|
|
|
uni.setStorageSync(HISTORY_SEARCH, this.historySearch) |
|
|
|
getGoodsList(pageNo = 1) { |
|
|
|
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 = '认证中' |
|
|
|
} else if (state == "2" || state == "4" || state == "5") { |
|
|
|
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 }) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 跳转到最近搜索 |
|
|
|
*/ |
|
|
|
handleQuick(search) { |
|
|
|
this.$navTo('pages/goods/list', { search }) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.container { |
|
|
|
padding: 20rpx; |
|
|
|
min-height: 100vh; |
|
|
|
background: #f7f7f7; |
|
|
|
} |
|
|
|
|
|
|
|
.search-wrapper { |
|
|
|
display: flex; |
|
|
|
height: 64rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// 搜索输入框 |
|
|
|
.search-input { |
|
|
|
width: 80%; |
|
|
|
background: #fff; |
|
|
|
border-radius: 10rpx 0 0 10rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
.search { |
|
|
|
position: fixed; |
|
|
|
float: top; |
|
|
|
top: var(--window-top); |
|
|
|
left: var(--window-left); |
|
|
|
right: var(--window-right); |
|
|
|
z-index: 19; |
|
|
|
|
|
|
|
.search-wrapper { |
|
|
|
background: #1c223b; |
|
|
|
padding: 0rpx 20rpx 20rpx 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input-wrapper { |
|
|
|
display: flex; |
|
|
|
.index-search { |
|
|
|
border-bottom: 0; |
|
|
|
background: #fff; |
|
|
|
border-radius: 50rpx; |
|
|
|
overflow: hidden; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #6d6d6d; |
|
|
|
box-sizing: border-box; |
|
|
|
height: 64rpx; |
|
|
|
line-height: 64rpx; |
|
|
|
|
|
|
|
.left { |
|
|
|
.index-cont-search { |
|
|
|
width: 100%; |
|
|
|
font-size: 28rpx; |
|
|
|
background: #f7f7f7; |
|
|
|
display: flex; |
|
|
|
width: 60rpx; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.search-icon { |
|
|
|
display: block; |
|
|
|
color: #b4b4b4; |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 34rpx; |
|
|
|
margin-left: 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
input { |
|
|
|
font-size: 28rpx; |
|
|
|
height: 64rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.input-placeholder { |
|
|
|
color: #aba9a9; |
|
|
|
} |
|
|
|
.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: 64rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 0 10rpx 10rpx 0; |
|
|
|
background: #fa2209; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 单列显示 |
|
|
|
.goods-list { |
|
|
|
width: 100%; |
|
|
|
margin-top: 20rpx; |
|
|
|
.goods-item { |
|
|
|
width: 97%; |
|
|
|
height: 280rpx; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
margin-left: 12rpx; |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: #fff; |
|
|
|
line-height: 1.6; |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 最近搜索 |
|
|
|
.history { |
|
|
|
.goods-item_left { |
|
|
|
display: flex; |
|
|
|
width: 300rpx; |
|
|
|
background: #fff; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.his-head { |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 50rpx 0 0 0; |
|
|
|
color: #777; |
|
|
|
.image { |
|
|
|
display: block; |
|
|
|
width: 240rpx; |
|
|
|
height: 240rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
float: right; |
|
|
|
.goods-item_right { |
|
|
|
position: relative; |
|
|
|
// width: 450rpx; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
.goods-name { |
|
|
|
margin-top: 10rpx; |
|
|
|
min-height: 68rpx; |
|
|
|
line-height: 1.3; |
|
|
|
white-space: normal; |
|
|
|
color: #484848; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-item_desc { |
|
|
|
margin-top: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.his-list { |
|
|
|
padding: 20rpx 0; |
|
|
|
overflow: hidden; |
|
|
|
.desc-selling_point { |
|
|
|
width: 400rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #e49a3d; |
|
|
|
} |
|
|
|
|
|
|
|
.his-item { |
|
|
|
width: 33.3%; |
|
|
|
float: left; |
|
|
|
padding: 10rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
.desc-goods_sales { |
|
|
|
color: #999; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.history-button { |
|
|
|
text-align: center; |
|
|
|
padding: 14rpx; |
|
|
|
line-height: 30rpx; |
|
|
|
border-radius: 100rpx; |
|
|
|
background: #fff; |
|
|
|
font-size: 26rpx; |
|
|
|
border: 1rpx solid #efefef; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.desc_footer { |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
.price_x { |
|
|
|
margin-right: 16rpx; |
|
|
|
color: #f03c3c; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: bold; |
|
|
|
float: right; |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price_y { |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
wanghongjun
2 years ago