hengmei-two/pagesB/shopSearch/shopSearch.vue

406 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'商品搜索'" :statusTitle="true"></status-nav>
<!-- 输入框 -->
<view class="search-input-box bacf poszy shop-nav-box" :style="{top: statusHNH+'px'}">
<view class="disac pad-zy30 mar-s20">
<!-- 输入框 -->
<input @confirm="checkShopList" style="border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;" class="width100 fon34 radius10" type="text" v-model="searchVal" placeholder="请输入商品名称"/>
<!-- 搜索 -->
<view @tap="checkShopList" class="flexs mar-z30 radius10 pad-zy40 fon34 colf" style="height: 80rpx;line-height: 80rpx;" :style="{background:publicColor}">搜索</view>
</view>
<!-- 筛选结果 -->
<view v-if="search_result" class="pad-z20 pad-x20">
<view class="col3 fon28 mar-s30">搜索结果:</view>
</view>
</view>
<!-- 数据列表 -->
<view v-if="search_result" :style="{marginTop:statusHNH+titleHeight+10+45+'px'}">
<view v-if="dataList.length!=0" style="margin-top: -20rpx;">
<view class="pad20">
<view style="width: 48.6%;float: left;">
<view v-if="index1%2==0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
</view>
<view class="disac">
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing">拼团价</span>
<span v-if="item1.isXian">促销价</span>
¥{{item1.zhePrice}}
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间:{{item1.activity_end_at}}</view>
</view>
</view>
</view>
<view style="width: 48.6%;float: right;">
<view v-if="index1%2!=0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
</view>
<view class="disac">
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing">拼团价</span>
<span v-if="item1.isXian">促销价</span>
¥{{item1.zhePrice}}
</view>
</view>
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间:{{item1.activity_end_at}}</view>
</view>
</view>
</view>
<!-- 弹框 -->
<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="submitQu" @cancleev="isShowT=false"></pu-po>
</view>
</view>
<nothing-page v-if="dataList.length==0" :content="`暂无更多商品列表`"></nothing-page>
</view>
<!-- 历史搜索和热门搜索 -->
<view v-if="!search_result" class="pad-z30 mar-s30" :style="{marginTop:statusHNH+titleHeight+10+'px'}">
<cate-tu :list="reSearchList" @delev='delev'></cate-tu>
</view>
<!-- 购物车 -->
<navigator url="/pagesA/shopCart/shopCart?isScore=false" hover-class="none">
<view class="cart-box">
<view class="posir">
<image src="/static/public/cart.png" mode="aspectFill"></image>
<view class="posia" v-if="cartNum!=0"><view>{{cartNum}}</view></view>
</view>
</view>
</navigator>
<!-- 弹框 -->
<pu-po :isShowT="isShowT" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
<!-- 返回顶部 -->
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
<!-- 用户信息授权手机号授权 -->
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
</view>
</template>
<script>
import {cartNum} from '@/jsFile/publicAPI.js';
import cateTu from '@/components/cate-items/cate-tu.vue';
export default {
components:{
cateTu
},
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
searchVal:'',//输入框的值
publicColor:uni.getStorageSync('publicColor'),//主题颜色
reSearchList:[//历史记录列表
{
title:'历史搜索',
src:'/static/public/del-icon.png',
list:[]
},
{
title:'热门搜索',
src:'',
list:[
// {content:'秃顶种植需要的条件'},
// {content:'眉毛种植的是什么'},
// {content:'那些人能种植'},
// {content:'眉毛种植需要多少钱'},
// {content:'那些人能种植'},
]
},
],
isShowT:false,//是否显示弹框
showTop:false,//是否显示返回顶部
newCurrent:0,
page:1,
size:200,
total:'',//总数
isZanw:true,
activeIndex:'-1',
shopCate:['全部病种','全部医生','全部活动'],
cateTitle:'',
bingzList:[],//小分类列表
zanBingArr:[],//暂存小分类
titleHeight:'',//标题高度
shaiList:[],//筛选后的结果列表
dataList:[],
searchVal:'',//关键词
doctor_role:'',//医生从职位标识 从商品筛选条件接口获取 目前为doctor=医生 design=设计师
doctor_name:'',//医生姓名 模糊搜索
activity:'',//活动类型 不填为普通商品+活动商品 normal=普通商品group_make=拼团group_buy=团购;limit_time=限时促销
disease_id:'',//病种ID
cartNum:0,
search_result:false,
timeList:[],
zanArr:[],
timer:'',
isShowP:false,
}
},
onPageScroll(e) {
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
},
onReachBottom() {//触底事件
// if(this.total!=this.dataList.length){
// this.page++
// this.checkShopList();
// } else {
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000);
setTimeout(()=>{
this.isZanw = true;
},10000)
// }
},
onLoad(options) {
if(options.keyWorld!=undefined && options.keyWorld!='') {
this.searchVal = options.keyWorld;
this.checkShopList();
} else {
this.search_result = false;
}
if(uni.getStorageSync('token')!=''){
// 调用查询历史搜索的搜索记录
this.checkSearchHistory();
// 调用查询热搜关键词事件
this.checkKey();
}
// 缓存状态栏+标题栏的高度
const query = wx.createSelectorQuery()
query.select('.search-input-box').boundingClientRect((rect) => {
// console.log('状态栏+标题栏:',rect.height);
this.titleHeight = rect.height
}).exec()
},
onShow() {
this.$toolAll.tools.isLogin();
if(uni.getStorageSync('token')!=''){
if(this.searchVal!=undefined && this.searchVal!='') this.checkShopList();
this.cartNumEv();//查询购物车数量
}
},
onUnload() {
clearInterval(this.timer);
},
methods: {
cartNumEv(){//购物车数量
this.$requst.post('order/shopping-cart-count',{type:'spu'}).then(res=>{
if(res.code==0){
this.cartNum = res.data.count;
}
})
},
// 查询商品列表
checkShopList(){
this.isZanw = true;
let params = {
keyword:this.searchVal,//商品关键字 支持模糊搜索
page:this.page,
size:this.size,
}
uni.request({
url:`${uni.getStorageSync('hostapi')}spu/list`,
data:params,
method:'post',
header:{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
},
success: (res) => {
if(res.data.code==0){
clearInterval(this.timer);
// if(this.page==1) {
this.zanArr = [];
this.dataList = [];
this.timeList = [];
// }
this.total = res.data.total;
if(res.data.data.list.length!=0){
res.data.data.list.forEach(item=>{
let tuan = false,ping = false,xian = false,integral = false;
if(item.activity_type=='group_make') ping = true;
if(item.activity_type=='group_buy') tuan = true;
if(item.activity_type=='limit_time') xian = true;
let group_cover = [];
if(item.activity_group_cover.length!=0) {
item.activity_group_cover.forEach(item=>{
group_cover.push(this.$http + item)
})
}
let obj = {
id:item.id,
imgSrc: this.$http + item.cover,
title: item.name,
zhePrice:item.price/100,
yuanPrice:item.original_price/100,
integral:'',
isTuan:tuan,//是否是团购
isPing:ping,//是否是拼团活动
isXian:xian,//是否是限时活动
isIntegral:integral,//是否是积分
grade:'',
disease_name:item.disease_name,//病种名称
reponseTime:res.header.Date,//接口响应时间
activity_end_at:item.activity_end_at,//限时结束时间
activity_group_cover:group_cover,//参团人的头像
activity_group_num:item.activity_group_num,//已经参团人数
}
this.zanArr.push(obj)
})
this.zanArr.forEach((item,index)=>{
if(item.activity_end_at!='') {
let obj = {
id:item.id,
reponseTime:item.reponseTime,
time:item.activity_end_at,
nIndex:index
}
this.timeList.push(obj);
}
})
if(this.timeList!=0){
this.$toolAll.tools.showToast('加载中...')
this.timer = setInterval(()=>{//定时器
if(this.timeList.length!=0){
this.timeList.forEach((item,index)=>{
if(item.id==this.zanArr[item.nIndex].id){
let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增,即:开始时间
if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
this.zanArr[item.nIndex].activity_end_at = "活动已结束";
} else {
// 继续进行倒计时
this.zanArr[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
}
}
})
}
},1000)
setTimeout(()=>{
this.dataList = this.zanArr;
this.search_result = true;
},1000)
} else {
this.dataList = this.zanArr;
}
} else {
this.search_result = true;
}
}
},
fail(err) {
this.$toolAll.tools.showToast(err.msg);
}
})
},
goPage(id,index){//进入商品详情事件
uni.navigateTo({
url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataList[index].isIntegral}`
})
},
checkKey(){//查询热搜关键词事件
this.$requst.get('index/hot-keywords',{type:'spu'}).then(res=>{
// console.log('关键词列表:',res);
if(res.code==0){
if(res.data.length!=0){
res.data.forEach(item=>{
let reObj = {
id:item.id,
content:item.keyword
}
this.reSearchList[1].list.push(reObj)
})
}
} else this.$toolAll.tools.showToast(res.msg);
},error=>{this.$toolAll.tools.showToast(error.msg);})
},
checkSearchHistory(){//查询历史搜索的搜索记录
this.$requst.post('user/search-history',{page:1,size:100}).then(res=>{
// console.log(res);
if(res.code==0){
if(res.data.list.length!=0){
res.data.list.forEach(item=>{
if(item.keyword!=null){
let searchObj = {
id:item.id,
content:item.keyword
}
this.reSearchList[0].list.push(searchObj)
}
})
}
} else this.$toolAll.tools.showToast(res.msg);
},error=>{this.$toolAll.tools.showToast(error.msg);})
},
delev(){//删除事件
this.isShowT = true
},
comfirmev(){//清空历史搜索确认事件
this.isShowT = false
this.$requst.post('user/clear-search').then(res=>{
if(res.code==0){
this.$toolAll.tools.showToast('已清空')
this.reSearchList[0].list = []//清空搜索历史
} else this.$toolAll.tools.showToast(res.msg);
},error=>{this.$toolAll.tools.showToast(error.msg);})
},
cancleev(){//取消事件
this.isShowT = false
},
backTop(){//回到顶部事件
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
},
}
}
</script>
<style>
</style>