|
|
@@ -1,7 +1,28 @@
|
|
|
<template>
|
|
|
<view class="search-container">
|
|
|
- <go-search :theme="themeClass" @getSearchText="getSearchText"></go-search>
|
|
|
- <view class="container commodity-list-wrapper" v-if="isShowWrapper" :style="{'overflow':'auto','height': 'auto'}">
|
|
|
+ <view class="search-main">
|
|
|
+ <view class="search">
|
|
|
+ <view class="search-input">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ <input maxlength="20" focus type="text" value="" confirm-type="search" @focus="onFocus" @input="onShowClose" @confirm="subMitSearch()" placeholder="请输入商品关键词" v-model.trim="searchInputVal"/>
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" @click="subMitSearch()">搜索</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="search-container-history" v-if="!isShowWrapper">
|
|
|
+ <view :class="'s-' + themeClass" v-if="serachRecordList.length>0">
|
|
|
+ <view class="header">
|
|
|
+ 搜索历史
|
|
|
+ <text class="iconfont icon-shanchu" @click="delhistory"></text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view v-for="(item,index) in serachRecordList" :key="index" @click="keywordsClick(item.searchWord)">{{item.searchWord}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <go-search :theme="themeClass" @subMitSearch="subMitSearch"></go-search> -->
|
|
|
+ <view v-else class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton ? 'hidden' : 'auto'),'height':(showSkeleton? (scrollHeight-57) + 'px' : 'auto')}">
|
|
|
<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="toLower" scroll-y v-if="!showEmpty">
|
|
|
<view v-for="(item,index) in commodityList" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.id)">
|
|
|
<image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
@@ -28,25 +49,37 @@
|
|
|
<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"></image>
|
|
|
<text class="error-text">抱歉，没有相关商品！</text>
|
|
|
</view>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
</view>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
+ <!-- 删除弹窗 -->
|
|
|
+ <model-alert v-if="isShowDelModal"
|
|
|
+ :alertText='alertText'
|
|
|
+ @btnConfirm ='confirmDetele'>
|
|
|
+ </model-alert>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import goSearch from '@/components/uni-search/go-search.vue'
|
|
|
+ import modelAlert from '@/components/module/modelAlert/modelAlert.vue'
|
|
|
import modalLayer from "@/components/modal-layer"
|
|
|
import authorize from '@/config/authorize.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
- goSearch,
|
|
|
- modalLayer
|
|
|
+ // goSearch,
|
|
|
+ modalLayer,
|
|
|
+ modelAlert
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
themeClass: 'block',
|
|
|
- searchInputVal:'',
|
|
|
+ searchInputVal:'', //搜索关键词
|
|
|
+ alertText:'确定删除全部历史记录?',
|
|
|
+ isShowDelModal:false, //控制显示删除弹窗
|
|
|
+ isShowClose:false, //是否显示清空输入框图标
|
|
|
+ isSearchHistory:false, //是都显示搜索历史
|
|
|
+ serachRecordList:[], //历史搜索记录
|
|
|
isShowWrapper:false,
|
|
|
isModallayer:false,
|
|
|
windowHeight: '',
|
|
|
@@ -67,84 +100,90 @@
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- let self = this;
|
|
|
- self.$api.getStorage().then((resolve) =>{
|
|
|
- self.userID = resolve.userID
|
|
|
+ this.$api.getStorage().then((resolve) =>{
|
|
|
+ this.userID = resolve.userID
|
|
|
})
|
|
|
- self.setScrollHeight();
|
|
|
- self.$api.loginStatus().then((resolveData) => {
|
|
|
- self.loginStatus = resolveData;
|
|
|
+ this.setScrollHeight();
|
|
|
+ this.$api.loginStatus().then((resolveData) => {
|
|
|
+ this.loginStatus = resolveData;
|
|
|
});
|
|
|
},
|
|
|
onLoad() {
|
|
|
-
|
|
|
+ this.initGetSerachRecord()
|
|
|
},
|
|
|
methods:{
|
|
|
- getSearchText(e) {
|
|
|
- this.searchInputVal = e
|
|
|
- this.getListFromServer(false)
|
|
|
- },
|
|
|
- toLoginPage() {
|
|
|
- const {lastPageType, lastPageVal} = this.$parent;
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/login/login?listType=${lastPageType}&listVal=${lastPageVal}`
|
|
|
+ initGetSerachRecord(){
|
|
|
+ authorize.getCode('weixin').then(wechatcode =>{
|
|
|
+ // console.log(wechatcode);
|
|
|
+ this.$api.get('/search/record',{organizeID:this.userOrganizeID,code:wechatcode},
|
|
|
+ response =>{
|
|
|
+ // console.log(response);
|
|
|
+ if(response.code == '1'){
|
|
|
+ this.serachRecordList = response.data
|
|
|
+ }else{
|
|
|
+ this.$util.msg(response.msg,2000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
})
|
|
|
},
|
|
|
+ subMitSearch() {
|
|
|
+ if (this.searchInputVal == '') {
|
|
|
+ this.$util.msg('请输入商品关键词',2000);
|
|
|
+ }else{
|
|
|
+ this.commodityList =[]
|
|
|
+ this.getListFromServer(false)
|
|
|
+ }
|
|
|
+ },
|
|
|
toLower() {
|
|
|
// 第一次加载排除常用商品
|
|
|
if(this.hasNextPage && this.pullFlag) {
|
|
|
this.getListFromServer(true);
|
|
|
}
|
|
|
},
|
|
|
- setScrollHeight() {
|
|
|
- const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
- this.windowHeight = windowHeight - 1;
|
|
|
- this.scrollHeight = windowHeight - 1;
|
|
|
- },
|
|
|
getListFromServer(loadMore) {
|
|
|
- let self = this;
|
|
|
- self.showLoading = true;
|
|
|
- self.loadingNow = true;
|
|
|
- self.loadingText = '加载中';
|
|
|
- self.showEmpty = false;
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = true;
|
|
|
+ this.loadingText = '加载中';
|
|
|
+ this.showEmpty = false;
|
|
|
if(loadMore) {
|
|
|
- self.pageNum += 1;
|
|
|
+ this.pageNum += 1;
|
|
|
}
|
|
|
authorize.getCode('weixin').then(wechatcode =>{
|
|
|
- let params = {code:wechatcode,searchWord:self.searchInputVal,index:self.pageNum,pageSize:self.pageSize,organizeID:self.userOrganizeID}
|
|
|
- self.$api.lodingGet('/search/product',params,
|
|
|
+ let params = {code:wechatcode,searchWord:this.searchInputVal,index:this.pageNum,pageSize:this.pageSize,organizeID:this.userOrganizeID}
|
|
|
+ this.$api.lodingGet('/search/product',params,
|
|
|
response => {
|
|
|
if(response.code == '1') {
|
|
|
this.isShowWrapper = true
|
|
|
const resData = response.data;
|
|
|
const resList = resData.results;
|
|
|
if(resList && resList.length > 0){
|
|
|
- self.hasNextPage = resData.hasNextPage;
|
|
|
- self.totalPage = resData.totalPage;
|
|
|
- self.showEmpty = false;
|
|
|
+ this.hasNextPage = resData.hasNextPage;
|
|
|
+ this.totalPage = resData.totalPage;
|
|
|
+ this.showEmpty = false;
|
|
|
if(loadMore) {
|
|
|
- self.commodityList = [...self.commodityList,...resList];
|
|
|
+ this.commodityList = [...this.commodityList,...resList];
|
|
|
+ this.showSkeleton = false;
|
|
|
} else {
|
|
|
- self.commodityList =[];
|
|
|
- self.commodityList = [...resList];
|
|
|
- self.showSkeleton = false;
|
|
|
+ this.commodityList = [...resList];
|
|
|
+ this.showSkeleton = true;
|
|
|
+ console.log(this.showSkeleton)
|
|
|
}
|
|
|
- console.log(self.commodityList)
|
|
|
// 防上拉暴滑
|
|
|
- self.pullFlag = false;
|
|
|
+ this.pullFlag = false;
|
|
|
setTimeout(()=>{
|
|
|
- self.pullFlag = true;
|
|
|
+ this.pullFlag = true;
|
|
|
},500)
|
|
|
// 底部提示文案
|
|
|
- if(self.hasNextPage) {
|
|
|
- self.loadingText = '上拉加载更多';
|
|
|
+ if(this.hasNextPage) {
|
|
|
+ this.loadingText = '上拉加载更多';
|
|
|
} else {
|
|
|
- self.showLoading = true;
|
|
|
- self.loadingNow = false;
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = false;
|
|
|
}
|
|
|
} else {
|
|
|
if(!loadMore) {
|
|
|
- self.showEmpty = true;
|
|
|
+ this.showEmpty = true;
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
@@ -154,19 +193,260 @@
|
|
|
)
|
|
|
})
|
|
|
},
|
|
|
+ onShowClose () { //输入框失去焦点时触发
|
|
|
+ this.inputEmpty(this.searchInputVal)
|
|
|
+ },
|
|
|
+ onFocus () { //输入框获取焦点时触发
|
|
|
+ this.inputEmpty(this.searchInputVal)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ delInputText () { //清除输入框内容
|
|
|
+ this.searchInputVal = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ this.isShowWrapper = false
|
|
|
+ this.inputEmpty(this.searchInputVal)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ keywordsClick (item) { //关键词搜索与历史搜索
|
|
|
+ this.searchInputVal = item;
|
|
|
+ this.isShowClose = true;
|
|
|
+ this.subMitSearch();
|
|
|
+ },
|
|
|
+ delhistory () { //清空历史记录
|
|
|
+ this.isShowDelModal = true;
|
|
|
+ },
|
|
|
+ confirmDetele() {
|
|
|
+ this.isShowDelModal = false;
|
|
|
+ authorize.getCode('weixin').then(wechatcode =>{
|
|
|
+ // console.log(wechatcode);
|
|
|
+ this.$api.get('/search/delete',{organizeID:this.userOrganizeID,code:wechatcode},
|
|
|
+ response =>{
|
|
|
+ // console.log(response);
|
|
|
+ if(response.code == '1'){
|
|
|
+ this.serachRecordList=[];
|
|
|
+ }else{
|
|
|
+ this.$util.msg(response.msg,2000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ inputEmpty(val){
|
|
|
+ this.isShowWrapper = false
|
|
|
+ if(val != ''){
|
|
|
+ this.isShowClose = true
|
|
|
+ }else{
|
|
|
+ this.isShowClose = false
|
|
|
+ }
|
|
|
+ },
|
|
|
navToDetailPage(id) {
|
|
|
this.isModallayer = true;
|
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
|
this.isModallayer = false;
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
+ this.windowHeight = windowHeight - 1;
|
|
|
+ this.scrollHeight = windowHeight - 1;
|
|
|
+ },
|
|
|
+ toLoginPage() {
|
|
|
+ let searchLoginType = 'search'
|
|
|
+ uni.navigateTo({
|
|
|
+ url:`/pages/login/login?type=${searchLoginType}`
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ @import "@/uni.scss";
|
|
|
page{
|
|
|
background-color: #F7F7F7 !important;
|
|
|
}
|
|
|
+ .search{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ z-index: 999;
|
|
|
+ .search-input{
|
|
|
+ width: 448rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 0 68rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #F0F0F0;
|
|
|
+ float: left;
|
|
|
+ .icon-iconfonticonfontsousuo1{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .icon-shanchu1{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ top: 0;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ width: 448rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #F0F0F0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn{
|
|
|
+ width: 118rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: $color-system;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .voice-icon{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 16rpx 20rpx 16rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 16rpx;
|
|
|
+ top: 4rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .search-container{
|
|
|
+ padding-top: 106rpx;
|
|
|
+ }
|
|
|
+ .s-block{
|
|
|
+ background: #FFFFFF;
|
|
|
+ .header{
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding:40rpx 24rpx 22rpx 24rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ .icon-shanchu{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ float: right;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ view{
|
|
|
+ color: #8A8A8A;
|
|
|
+ font-size: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin:12rpx;
|
|
|
+ padding:.0 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ background-color: #F3F3F3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .s-circle{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header{
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-bottom: 2rpx solid #F9F9F9;
|
|
|
+ position: relative;
|
|
|
+ image{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
+ top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view{
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wanted-block{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header{
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ view{
|
|
|
+ width: 50%;
|
|
|
+ color: #8A8A8A;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-top: 2rpx solid #FFF;
|
|
|
+ border-left: 2rpx solid #FFF;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wanted-circle{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header{
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view{
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.commodity-list-wrapper {
|
|
|
scroll-view {
|
|
|
height: 100%;
|
