|
|
@@ -3,57 +3,78 @@
|
|
|
<view class="search-main">
|
|
|
<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>
|
|
|
+ <input maxlength="20" :focus="isFocus" 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.stop="delInputText()"></text>
|
|
|
</view>
|
|
|
<view class="search-btn" @click="subMitSearch()">搜索</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="confirmDetele"></text>
|
|
|
+ 搜索历史<text class="iconfont icon-shanchu" @click="confirmDetele"></text>
|
|
|
</view>
|
|
|
<view class="list">
|
|
|
<view v-for="(item,index) in serachRecordList" :key="index" @click="keywordsClick(item.searchWord)">{{item.searchWord}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-else class="commodity-list-wrapper" :style="{'overflow':'auto','height':(commodityList.length>4? windowHeight + 'px' : 'auto')}">
|
|
|
- <scroll-view :style="{'height':(commodityList.length>4? scrollHeight+'px' : 'auto')}" @scrolltolower="scrolltolower" 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.productID)">
|
|
|
- <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
+ <!-- <go-search :theme="themeClass" @subMitSearch="subMitSearch"></go-search> -->
|
|
|
+ <view v-else class="commodity-list-wrapper" :style="{'overflow':'auto','height':(listData.length>4? windowHeight + 'px' : 'auto')}">
|
|
|
+ <scroll-view :style="{'height':(listData.length>4? scrollHeight+'px' : 'auto')}" @scrolltolower="scrolltolower" scroll-y v-if="!showEmpty">
|
|
|
+ <view v-for="(item,index) in listData" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.p_id)">
|
|
|
+ <image mode='widthFix' :src="item.p_image" class="list-img" alt="list-img"></image>
|
|
|
<view class="list-details-info">
|
|
|
- <text class="list-details-title">{{item.name}}</text>
|
|
|
- <text class="list-details-specs">规格：{{item.unit}}</text>
|
|
|
- <text class="list-details-miniQuantity" v-if="fromRegularPurchasePage">起订量：{{item.minBuyNumber}}</text>
|
|
|
+ <view class="list-details-title">{{isInterceptHtmlFn(item.p_name)}}</view>
|
|
|
+ <text class="list-details-specs">规格：{{item.p_unit}}</text>
|
|
|
+ <view class="list-details-specs" v-if="item.p_code!=''&&item.p_code!=null">
|
|
|
+ <view>商品编码：{{item.p_code}}</view>
|
|
|
+ </view>
|
|
|
<view class="list-details-price">
|
|
|
- <view v-if="!hasLogin" class="list-login-now">
|
|
|
- <text class="p-no">价格:</text>
|
|
|
- <uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
|
|
|
- </view>
|
|
|
- <view class="list-price" v-else>
|
|
|
- <view class="price-larger" v-if="item.price1TextFlag == '1'">
|
|
|
- <text class="txt">未公开价格</text>
|
|
|
+ <view v-if="hasLogin"class="list-price">
|
|
|
+ <view v-if="userIdentity == 1">
|
|
|
+ <text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <text v-else>￥<text class="price-larger">{{item.price?item.price :'0.00'}}</text></text>
|
|
|
+ </view>
|
|
|
+ <view v-if="userIdentity == 4">
|
|
|
+ <view class="price-larger" v-if="item.p_price_flag == '1'">
|
|
|
+ <text class="txt">未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <view v-else>
|
|
|
+ <view class="price-larger" v-if="item.p_price_flag == '2'">
|
|
|
+ <text class="txt">价格仅会员可见</text>
|
|
|
+ <text class="btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</text>
|
|
|
+ </view>
|
|
|
+ <text v-else>￥<text class="price-larger">{{item.price ?item.price :'0.00'}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="userIdentity == 2">
|
|
|
+ <view class="price-larger" v-if="item.p_price_flag == '1'">
|
|
|
+ <text class="txt">未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
+ <text v-else>￥<text class="price-larger">{{item.price ? item.price :'0.00'}}</text></text>
|
|
|
</view>
|
|
|
- <text v-else>￥<text class="price-larger">{{item.retailPrice.toFixed(2)}}</text></text>
|
|
|
+ </view>
|
|
|
+ <view v-else class="list-login-now">
|
|
|
+ <text class="p-no">价格:</text>
|
|
|
+ <uni-stars :stars="parseInt(item.p_price_grade)" :font-size='36' :width-info="180"></uni-stars>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="showLoading && commodityList.length > 4">
|
|
|
+ <view v-if="showLoading && listData.length > 4">
|
|
|
<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="empty-container" v-if="showEmpty">
|
|
|
- <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/94/Cmis216Sk_SAMs28AAELHadZ9Xg226.png"></image>
|
|
|
+ <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"></image>
|
|
|
<text class="error-text">抱歉，没有相关商品！</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 透明模态层 -->
|
|
|
<modal-layer v-if='isModallayer'></modal-layer>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -63,7 +84,13 @@
|
|
|
import modalLayer from "@/components/modal-layer"
|
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
import authorize from '@/common/config/authorize.js'
|
|
|
- import { querySearchProduct , querySearchHistory,clearSearchHistory } from "@/api/product.js"
|
|
|
+ import {
|
|
|
+ queryNewSearchProduct ,
|
|
|
+ querySearchHistory,
|
|
|
+ clearSearchHistory,
|
|
|
+ searchHistoryAdd,
|
|
|
+ querySearchProductPrice
|
|
|
+ } from "@/api/product.js"
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -75,20 +102,25 @@
|
|
|
return {
|
|
|
userID:'',
|
|
|
themeClass: 'block',
|
|
|
- searchInputVal:'', //搜索关键词
|
|
|
- isShowClose:false, //是否显示清空输入框图标
|
|
|
- isSearchHistory:false, //是都显示搜索历史
|
|
|
- serachRecordList:[], //历史搜索记录
|
|
|
+ searchInputVal:'', //搜索关键词
|
|
|
+ userIdentity:'',
|
|
|
+ identity:2,
|
|
|
+ isShowClose:false, //是否显示清空输入框图标
|
|
|
+ isSearchHistory:false,//是都显示搜索历史
|
|
|
+ serachRecordList:[],//历史搜索记录
|
|
|
isShowWrapper:false,
|
|
|
isModallayer:false,
|
|
|
+ isFocus:false,
|
|
|
+ priceLoading:true,
|
|
|
windowHeight: '',
|
|
|
showEmpty: false,
|
|
|
scrollHeight: '',
|
|
|
- commodityList: [],
|
|
|
+ listData: [],
|
|
|
+ productIds:'',//查询价格的商品ID
|
|
|
showLoading: false,
|
|
|
loadingNow: true,
|
|
|
loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 20,
|
|
|
pageNum: 1,
|
|
|
hasNextPage: false,
|
|
|
totalPage: 1,
|
|
|
@@ -96,6 +128,7 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
+ this.isFocus = true
|
|
|
this.initGetSerachRecord()
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -105,6 +138,12 @@
|
|
|
initGetSerachRecord(){
|
|
|
this.$api.getStorage().then((resolve) =>{
|
|
|
this.userID = resolve.userID ? resolve.userID : '';
|
|
|
+ this.userIdentity = resolve.userIdentity ? resolve.userIdentity : '';
|
|
|
+ if(this.userIdentity == 1){
|
|
|
+ this.identity = 1
|
|
|
+ }else{
|
|
|
+ this.identity = 2
|
|
|
+ }
|
|
|
querySearchHistory({userId:this.userID}).then(response =>{
|
|
|
if(response.code == 0){
|
|
|
this.serachRecordList = response.data
|
|
|
@@ -116,12 +155,14 @@
|
|
|
if (this.searchInputVal == '') {
|
|
|
this.$util.msg('请输入商品关键词',2000);
|
|
|
}else{
|
|
|
- this.commodityList =[]
|
|
|
- this.getListFromServer(false)
|
|
|
+ this.listData =[]
|
|
|
+ this.setSearchHistoryAdd()
|
|
|
+ this.getListFromServer()
|
|
|
+ this.isFocus = false
|
|
|
}
|
|
|
},
|
|
|
scrolltolower() {
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
+ if(this.totalPage>this.listData.length && this.pullFlag) {
|
|
|
this.getListFromServer(true);
|
|
|
}
|
|
|
},
|
|
|
@@ -133,27 +174,34 @@
|
|
|
if(loadMore) {
|
|
|
this.pageNum += 1;
|
|
|
}
|
|
|
- let params = {userId:this.userID,searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize}
|
|
|
- querySearchProduct(params).then(response =>{
|
|
|
+ let params = {
|
|
|
+ identity:this.identity,
|
|
|
+ keyword:this.searchInputVal,
|
|
|
+ pageNum:this.pageNum,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ sortField:'',
|
|
|
+ sortType:'',
|
|
|
+ }
|
|
|
+ queryNewSearchProduct(params).then(response =>{
|
|
|
this.isShowWrapper = true
|
|
|
- const resData = response.data;
|
|
|
- const resList = resData.results;
|
|
|
+ const resData = JSON.parse(response.data);
|
|
|
+ const resList = resData.items;
|
|
|
+ // console.log(resData)
|
|
|
if(resList && resList.length > 0){
|
|
|
- this.hasNextPage = resData.hasNextPage;
|
|
|
- this.totalPage = resData.totalPage;
|
|
|
+ this.totalPage = resData.total;
|
|
|
this.showEmpty = false;
|
|
|
if(loadMore) {
|
|
|
- this.commodityList = [...this.commodityList,...resList];
|
|
|
+ this.listData = [...this.listData,...resList];
|
|
|
+ this.setProductPrice()
|
|
|
} else {
|
|
|
- this.commodityList = [...resList];
|
|
|
+ this.listData = [...resList];
|
|
|
+ this.setProductPrice()
|
|
|
}
|
|
|
// 防上拉暴滑
|
|
|
this.pullFlag = false;
|
|
|
- setTimeout(()=>{
|
|
|
- this.pullFlag = true;
|
|
|
- },500)
|
|
|
+ setTimeout(()=>{ this.pullFlag = true; },500)
|
|
|
// 底部提示文案
|
|
|
- if(this.hasNextPage) {
|
|
|
+ if(this.totalPage>this.listData.length) {
|
|
|
this.loadingText = '上拉加载更多';
|
|
|
} else {
|
|
|
this.showLoading = true;
|
|
|
@@ -164,11 +212,51 @@
|
|
|
this.showEmpty = true;
|
|
|
}
|
|
|
}
|
|
|
- }).catch(response =>{
|
|
|
- this.$util.msg(response.msg,2000);
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setSearchHistoryAdd(){//添加搜索记录
|
|
|
+ if (!this.hasLogin) {return false;}
|
|
|
+ searchHistoryAdd({userId: this.userID,keyword:this.searchInputVal}).then(response =>{
|
|
|
+ //此为每次搜索同时添加用户的搜索记录
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
})
|
|
|
},
|
|
|
- onShowClose () {//输入框失去焦点时触发
|
|
|
+ setProductPrice(){//获取价格
|
|
|
+ if (!this.hasLogin) {return false;}
|
|
|
+ let productIdArr = [];
|
|
|
+ this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
|
|
|
+ productIdArr.push(item.p_id)
|
|
|
+ })
|
|
|
+ this.productIds = productIdArr.join(",");
|
|
|
+ querySearchProductPrice({userId: this.userID,productIds:this.productIds}).then(response =>{
|
|
|
+ if (response.data) {
|
|
|
+ let priceList = response.data
|
|
|
+ this.listData.map(item=>{
|
|
|
+ for (let i = 0; i < priceList.length; i++) {
|
|
|
+ let priceObj ={
|
|
|
+ actStatus:priceList[i].actStatus,
|
|
|
+ costCheckFlag:priceList[i].costCheckFlag,
|
|
|
+ costPrice:priceList[i].costPrice,
|
|
|
+ costProportional:priceList[i].costProportional,
|
|
|
+ ladderPriceFlag:priceList[i].ladderPriceFlag,
|
|
|
+ price:Number(priceList[i].price).toFixed(2),
|
|
|
+ minBuyNumber:priceList[i].minBuyNumber
|
|
|
+ }
|
|
|
+ if( item.p_id == priceList[i].productId ){
|
|
|
+ Object.assign(item,priceObj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.priceLoading = false;
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShowClose () {//输入框输入时触发
|
|
|
this.inputEmpty(this.searchInputVal)
|
|
|
},
|
|
|
onFocus () { //输入框获取焦点时触发
|
|
|
@@ -192,8 +280,8 @@
|
|
|
clearSearchHistory({userId:this.userID}).then(response =>{
|
|
|
this.$util.msg('删除成功',2000,true,'success')
|
|
|
this.serachRecordList=[];
|
|
|
- }).catch(response =>{
|
|
|
- this.$util.msg(response.msg,2000)
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
@@ -201,10 +289,16 @@
|
|
|
this.isShowWrapper = false
|
|
|
if(val != ''){
|
|
|
this.isShowClose = true
|
|
|
+ this.isFocus = true
|
|
|
}else{
|
|
|
this.isShowClose = false
|
|
|
+ this.isFocus = true
|
|
|
}
|
|
|
},
|
|
|
+ isInterceptHtmlFn(text){
|
|
|
+ let name = this.$reg.interceptHtmlFn(text)
|
|
|
+ return name
|
|
|
+ },
|
|
|
navToDetailPage(id) {
|
|
|
this.isModallayer = true;
|
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
|
@@ -253,6 +347,8 @@
|
|
|
background: #F0F0F0;
|
|
|
float: left;
|
|
|
.icon-iconfonticonfontsousuo1{
|
|
|
+ display: block;
|
|
|
+ width: 68rpx;
|
|
|
font-size: 36rpx;
|
|
|
color: #8A8A8A;
|
|
|
position: absolute;
|
|
|
@@ -260,13 +356,15 @@
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.icon-shanchu1{
|
|
|
+ display: block;
|
|
|
+ width: 68rpx;
|
|
|
font-size: 36rpx;
|
|
|
- color: #8A8A8A;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
position: absolute;
|
|
|
- right: 24rpx;
|
|
|
+ right: 0;
|
|
|
top: 0;
|
|
|
- padding: 0 10rpx;
|
|
|
- z-index: 10;
|
|
|
+ z-index: 60;
|
|
|
}
|
|
|
input{
|
|
|
width: 448rpx;
|
|
|
@@ -473,7 +571,7 @@
|
|
|
}
|
|
|
.list-details-specs {
|
|
|
margin-top: 8rpx;
|
|
|
- color: #999999;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
.list-details-miniQuantity {
|
|
|
margin-top: 7rpx;
|
|
|
@@ -481,7 +579,6 @@
|
|
|
}
|
|
|
.list-details-price {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
position: absolute;
|
|
|
@@ -515,12 +612,29 @@
|
|
|
.list-price {
|
|
|
color: #FF2A2A;
|
|
|
.price-larger {
|
|
|
+ width: 100%;
|
|
|
font-size: 32rpx;
|
|
|
+ &.small{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
.txt{
|
|
|
font-size: $font-size-24;
|
|
|
display: inline-block;
|
|
|
- line-height: 30rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 112rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ border-radius: 22rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
jun.li@caimei365.com