<template>
|
<view style="background-color: #f5f5f5;">
|
<view class="mainWrap" style=' border-bottom: none;'>
|
<view class="search">
|
<!-- <img style="height: 24px;width: 24px;" src="../../../static/search.png" alt=""> -->
|
<input placeholder-style="font-size:12px;" style="width: 100%; " :value="inputValue"
|
@input="valueChange" @focus="onfocus" placeholder="女装" confirm-type="search"
|
@confirm="clickSearch(inputValue)" />
|
<view class="searchBtn" @click="clickSearch(inputValue)">搜索</view>
|
</view>
|
|
</view>
|
<view class="showAssociate" v-if="showAssociate">
|
<view v-if="inputValue" v-for="(item,index) in linkList" class="showAssociaterow"
|
@click="clickSearch(item.kw)" :key="item.kw">
|
<text v-for="(item2,index2) in item.keywords" :key="item2">
|
<text v-if="item2">{{item2}}</text>
|
<text style="color: gray;" v-else>{{inputValue}}</text>
|
</text>
|
</view>
|
</view>
|
<view v-else>
|
<view>
|
<scroll-view id="tab-bar" class="scroll-h" scroll-x="true" show-scrollbar="false"
|
:scroll-into-view="'id'+scrollInto">
|
<text v-for="(item, index) in barList" class="uni-tab-item " :id="'id'+item.id" :key="'key'+item.id"
|
:data-current="index" :class="item.id==TabCur?'textlight':'textan'" :data-index="index"
|
@click="TabClick(item.id)">
|
{{item.name}}
|
</text>
|
</scroll-view>
|
</view>
|
<view class="messageTip" v-if="(TabCur==1||TabCur==3)&&goodsList.length==0">
|
<view style="font-size: 16px; font-weight: bold;margin-bottom: 12px; color: black;">三步轻松获得优惠券</view>
|
<view style="display: flex;font-size: 12px;line-height: 20px;">
|
<img style="width: 20px;height: 20px;border-radius: 50%;"
|
:src="TabCur==1? 'https://img.alicdn.com/imgextra/i2/751308485/O1CN01BB2oVT2CYBRnKHHsQ_!!751308485.png':'https://img.alicdn.com/imgextra/i1/751308485/O1CN01mQQZ6X2CYBRqECkNj_!!751308485.png'"
|
alt="">
|
<text>1.进入{{TabCur==1?'淘宝':'抖音'}} </text>
|
<img style="width: 20px;height: 20px;border-radius: 50%;"
|
src="https://img.alicdn.com/imgextra/i2/751308485/O1CN01AvtYnH2CYBRw0b7IS_!!751308485.png"
|
alt="">
|
<text>2.复制商品标题 </text>
|
<img style="width: 20px;height: 20px;border-radius: 50%;"
|
src="https://img.alicdn.com/imgextra/i1/751308485/O1CN01SuHx8T2CYBRt6WFiu_!!751308485.png"
|
alt="">
|
<text>3.点击搜索查询</text>
|
</view>
|
</view>
|
<view class="hotsearch" v-if="TabCur==1&&goodsList.length==0">
|
<view class="hotsearch_title">
|
买家热搜榜
|
</view>
|
<view style="margin-top: 10px;">
|
<view class="hotsearch_row" v-for="(itemm,indexm) in isShowMore?hotSearchListAll:hotSearchList" @click="clickSearch(itemm)">
|
<text
|
:class="indexm==0?'hotsearch_num0':indexm==1?'hotsearch_num1':indexm==2?'hotsearch_num2':indexm>8?'hotsearch_num3':indexm==99?'hotsearch_num5':'hotsearch_num4'">{{indexm+1}}</text>
|
{{itemm}}
|
</view>
|
</view>
|
<view @click="showMore" style="text-align: center;color: #00aaff;">
|
{{isShowMore?'收起更多':'显示更多'}}
|
</view>
|
</view>
|
<view class="searchType" v-if="goodsList.length>0">
|
<text style="cursor: pointer;" :class="selectType==0?'searchTypeSelected':''"
|
@click="setSearchType(0)">人气</text>
|
<text style="cursor: pointer;" :class="selectType==1?'searchTypeSelected':''"
|
@click="setSearchType(1)">销量</text>
|
<view v-if="TabCur==1" @click="setSearchType(5)"
|
:class="selectType==5||selectType==6?'searchTypeSelected':''"
|
style="display: flex;flex-direction: row;cursor: pointer;">价格
|
<view class="tblist_icon">
|
<view class="triangle_up" :class="selectType==6?'activeup':''"></view>
|
<view class="triangle_down" :class="selectType==5?'activedown':''"></view>
|
</view>
|
</view>
|
<!-- <radio :checked="hasCoupon" @click="radioClick()" color="rgb(254, 55, 56)">优惠券</radio> -->
|
</view>
|
<scroll-view class="scroll-v list" lower-threshold='180' enableBackToTop="true" scroll-y='true'
|
@scrolltolower="loadMore()" v-if="goodsList.length>0||nodata">
|
<view class="goodCards">
|
<view v-for="(item,index) in goodsList" :key="item.goodsId">
|
<view class="goodCard" @click="gotogoodDetail(1,item.goodsId,item)">
|
<view class="goodCardImg">
|
<img :src="item.mainPic" alt="" style="width: 180rpx;height: 180rpx;">
|
</view>
|
<view class="goodCardDesc">
|
<view class="goodCardDesc_title" style="display: flex;">
|
<view v-if="item.shopType==0||item.shopType==1" style="padding-top: 2px;margin-right: 6px;">
|
<img style="width:16px;height: 16px;"
|
:src="item.shopType==0?'https://img.alicdn.com/imgextra/i4/751308485/O1CN01ppfg8j2CYBRpPtb51_!!751308485.png':'https://img.alicdn.com/imgextra/i4/751308485/O1CN01mKVp3U2CYBRzeHVcG_!!751308485.png'"
|
alt="">
|
</view>
|
{{item.dtitle==''?item.desc:item.dtitle}}
|
</view>
|
<view class="goodCardDesc_bottom">
|
<view class="goodCardDesc_bottomLeft"
|
v-if="Number(item.actualPrice)&&item.actualPrice!==item.originalPrice">
|
<text style="color: gray;font-size: 24rpx;">券后</text>
|
<text
|
style="color:#ff5351;font-size:40rpx;font-weight: 600;">￥{{item.actualPrice}}</text>
|
</view>
|
<view class="goodCardDesc_bottomLeft" v-else>
|
<text
|
style="color:#ff5351;font-size:40rpx;font-weight: 600;">￥{{item.originalPrice}}</text>
|
</view>
|
<view class="goodCardDesc_bottomRight">
|
<view class="topcard_coupon"
|
v-if="(item.couponPrice!=='0'&&item.couponPrice)||(mathf.subtract(Number(item.originalPrice),Number(item.actualPrice))>0&&item.actualPrice!=='0')">
|
<text
|
style="color: white;margin-right: 12rpx;padding: 0 8rpx;border-right: 1px dashed;">券</text>
|
{{item.originalPrice?mathf.subtract(Number(item.originalPrice),Number(item.actualPrice)):item.couponPrice}}元
|
</view>
|
|
<view
|
:class="item.couponPrice!=='0'?'goodCardDesc_bottomRighttext':'goodCardDesc_bottomRighttext2'">
|
月售{{item.allsale?item.allsale:(Number(item.monthsale)==0||Number(item.monthSales)==0?' 0 ':getNumData(item.monthsale??item.monthSales) + '+')}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="loading-more" v-if="!nodata">
|
<!-- <text class="loading-more-text" v-if="nodata">暂无数据~</text> -->
|
<text class="loading-more-text" v-if="nomore">已经到底啦~</text>
|
<text class="loading-more-text" v-else-if="loadingMore&&!nomore">加载更多...</text>
|
<text class="loading-more-text" v-else-if="loadingMore==false&&!nomore">加载中...</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
import {
|
getNumData,
|
mathf,
|
} from "../../../common/util.js"
|
export default {
|
data() {
|
|
return {
|
getNumData,
|
mathf,
|
barList: [{
|
id: 1,
|
name: '淘宝',
|
},
|
{
|
id: 2,
|
name: '京东',
|
},
|
{
|
id: 3,
|
name: '抖音',
|
},
|
{
|
id: 4,
|
name: '拼多多',
|
}
|
],
|
scrollInto: '',
|
TabCur: 1,
|
goodsList: [],
|
currentGoodsPage: 1,
|
loadingMore: true,
|
nomore: false,
|
inputValue: '',
|
showAssociate: false,
|
linkList: [],
|
nodata: false,
|
selectType: 0,
|
hasCoupon: false,
|
scrollTop: 0,
|
old: {
|
scrollTop: 0
|
},
|
hotSearchList: [],
|
hotSearchListAll:[],
|
isShowMore:false,
|
}
|
},
|
onLoad(opt) {
|
// debugger
|
this.GetHeightCommissionGoodList()
|
if (opt.keyWords) {
|
this.inputValue = opt.keyWords
|
this.GetSearchGoodsList({
|
cur: 1,
|
keyWords: opt.keyWords
|
})
|
}
|
},
|
onShareAppMessage:function() {
|
return {
|
title: '淘券获取',
|
path: '/pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
methods: {
|
//搜索
|
GetSearchGoodsList(param) {
|
// debugger
|
let me = this
|
if(me.currentGoodsPage!==1&&me.currentGoodsPage==param.cur){return}
|
me.showAssociate = false
|
//淘宝
|
let url = 'https://h.ushopvip.com/api/TkProduct/GetSearchGoodsList'
|
let params = {
|
pageNo: param.cur,
|
pageSize: 20,
|
hasCoupon: this.hasCoupon ? 1 : 0,
|
// type: null,
|
// pageId: null,
|
keyWords: param.keyWords,
|
// keyWords:'',
|
// tmall: null,
|
sort: param.type ?? 0,
|
}
|
if (me.TabCur == 3) {
|
//抖音
|
url = 'https://h.ushopvip.com/api/TkTiktokProduct/GetSxSearchGoodsList'
|
} else if (me.TabCur == 2) {
|
//京东
|
url = 'https://h.ushopvip.com/api/TkJdProduct/GetSearchGoodsList'
|
params = {
|
pageNo: param.cur,
|
pageSize: 20,
|
keyword: param.keyWords,
|
sortName: param.type == 1 ? 'inOrderCount30Days' : '',
|
sort: 'desc',
|
}
|
} else if (me.TabCur == 4) {
|
//拼多多
|
url = 'https://h.ushopvip.com/api/TkPddProduct/GetPddSearchGoodsList'
|
}
|
uni.request({
|
url: url,
|
method: 'POST',
|
data: params,
|
success(res) {
|
|
if (res.data?.success) {
|
|
if (res.data.result.length < 20) {
|
me.nomore = true
|
}
|
if (param.cur === 1) {
|
me.goodsList = res.data.result
|
me.currentGoodsPage = param.cur
|
me.loadingMore = true
|
me.goTop()
|
} else {
|
let data = me.goodsList
|
me.goodsList = data.concat(res.data.result)
|
me.currentGoodsPage = param.cur
|
me.loadingMore = true
|
}
|
} else {
|
|
if (param.cur === 1) {
|
me.goodsList = []
|
me.nodata = true
|
} else {
|
me.nomore = true
|
}
|
}
|
|
},
|
fail(err) {
|
console.log('获取openid失败：', err);
|
}
|
})
|
},
|
GetSearchSuggestion(txt) {
|
// debugger
|
let me = this
|
uni.request({
|
url: 'https://h.ushopvip.com/api/TkProduct/GetSearchSuggestion',
|
method: 'POST',
|
data: {
|
keyWords: txt,
|
},
|
success(res) {
|
|
if (res.data?.success) {
|
let data = res.data.result.data
|
data.forEach(i => {
|
// debugger
|
let d = i.kw.split(txt)
|
i.keywords = d
|
});
|
me.linkList = data
|
}
|
|
},
|
fail(err) {
|
console.log('获取openid失败：', err);
|
}
|
})
|
},
|
GetHeightCommissionGoodList() {
|
// debugger
|
let me = this
|
uni.request({
|
url: 'https://h.ushopvip.com/api/TkProduct/GetHotTop100',
|
method: 'POST',
|
data: {
|
pageNo: 1,
|
pageSize:10,
|
hasCoupon:true,
|
},
|
success(res) {
|
|
if (res.data?.success) {
|
let data = res.data.result.hotWords
|
me.hotSearchListAll = data
|
me.hotSearchList=data.slice(0,10)
|
}
|
|
},
|
fail(err) {
|
console.log('获取openid失败：', err);
|
}
|
})
|
},
|
loadMore() {
|
|
if (this.nomore) {
|
return;
|
}
|
this.loadingMore = false
|
this.GetSearchGoodsList({
|
cur: this.currentGoodsPage + 1,
|
keyWords: this.inputValue,
|
type: this.selectType,
|
})
|
|
},
|
scroll: function(e) {
|
console.log(e)
|
this.old.scrollTop = e.detail.scrollTop
|
},
|
goTop: function(e) {
|
// 解决view层不同步的问题
|
this.scrollTop = this.old.scrollTop
|
this.$nextTick(function() {
|
this.scrollTop = 0
|
});
|
},
|
TabClick(id) {
|
// debugger
|
this.nomore=false
|
this.selectType = 0
|
this.nodata=false
|
for (let i = 0; i < this.barList.length; ++i) {
|
if (id === this.barList[i].id) {
|
this.TabCur = this.barList[i].id
|
this.scrollInto = this.barList[i].id
|
if (this.inputValue) {
|
this.GetSearchGoodsList({
|
cur: 1,
|
keyWords: this.inputValue,
|
type: 0,
|
})
|
}
|
}
|
}
|
},
|
gotogoodDetail(type, id, record) {
|
//商品详情
|
if (type == 1) {
|
uni.navigateTo({
|
url: '/pages/goodDetail/index?id=' + id + '&type=' + this.TabCur + '&info=' +
|
encodeURIComponent(JSON.stringify(record))
|
})
|
}
|
|
},
|
valueChange(val) {
|
this.inputValue = val.target.value
|
this.showAssociate = true
|
if (!val.target.value || val.target.value.replaceAll(' ', '') == '') {
|
this.linkList = []
|
return
|
}
|
this.GetSearchSuggestion(val.target.value)
|
},
|
onfocus() {
|
|
if (this.inputValue) {
|
this.showAssociate = true
|
}
|
|
},
|
onblur() {
|
// debugger
|
this.showAssociate = false
|
},
|
clickSearch(txt) {
|
this.nomore=false
|
this.nodata=false
|
this.inputValue = txt == '' ? '女装' : txt
|
// this.showAssociate = true
|
this.GetSearchGoodsList({
|
cur: 1,
|
keyWords: txt == '' ? '女装' : txt,
|
type: this.selectType??0,
|
})
|
|
},
|
setSearchType(type) {
|
let t = this.selectType
|
if (type < 5) {
|
t = type
|
} else {
|
if (t < 5) {
|
t = 6
|
} else if (t == 6) {
|
t = 5
|
} else {
|
t = 0
|
}
|
}
|
this.nomore=false
|
this.nodata=false
|
this.selectType = t
|
this.GetSearchGoodsList({
|
cur: 1,
|
keyWords: this.inputValue,
|
type: t,
|
})
|
|
},
|
radioClick() {
|
this.nomore=false
|
this.nodata=false
|
this.hasCoupon = !this.hasCoupon
|
this.GetSearchGoodsList({
|
cur: 1,
|
keyWords: this.inputValue,
|
type: this.selectType,
|
})
|
},
|
showMore(){
|
|
if(this.isShowMore){
|
uni.pageScrollTo({
|
scrollTop: 0,
|
})
|
}
|
this.isShowMore=!this.isShowMore
|
|
// this.hotSearchList=JSON.parse(JSON.stringify(this.hotSearchListAll))
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.mainWrap {
|
font-size: 0;
|
height: 46px;
|
width: 100%;
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
padding-left: 13px;
|
padding-right: 13px;
|
align-items: center;
|
box-sizing: border-box;
|
align-items: center;
|
/* border-bottom: 1px solid #e7e7e7; */
|
background-color: white;
|
}
|
|
.search {
|
height: 44rpx;
|
padding: 10rpx 25rpx;
|
line-height: 50rpx;
|
font-size: 28rpx;
|
background: white;
|
flex: 1;
|
border-radius: 20px;
|
display: flex;
|
border: 1px solid #ee132c;
|
}
|
|
.searchBtn {
|
color: white;
|
background-color: #ee132c;
|
width: 100rpx;
|
text-align: center;
|
font-size: 30rpx;
|
line-height: 44rpx;
|
border-radius: 24rpx;
|
}
|
|
.scroll-h {
|
width: 100%;
|
height: 97rpx;
|
font-size: 14px;
|
flex-direction: row;
|
white-space: nowrap;
|
text-align: center;
|
background-color: white;
|
}
|
|
.textlight {
|
/* color: palevioletred; */
|
border-bottom: 2px solid #ee0a24;
|
color: #ee0a24;
|
/* font-weight: 600; */
|
padding: 14px 6px 6px 6px;
|
}
|
|
.textan {
|
padding: 14px 6px 6px 6px;
|
}
|
|
.uni-tab-item {
|
/* #ifndef APP-PLUS */
|
display: inline-block;
|
/* #endif */
|
flex-wrap: nowrap;
|
padding-left: 34rpx;
|
padding-right: 34rpx;
|
}
|
|
.goodCards {
|
padding: 24rpx;
|
}
|
|
.goodCard {
|
background-color: white;
|
margin-bottom: 24rpx;
|
display: flex;
|
/* justify-content: start; */
|
flex-direction: row;
|
}
|
|
.topcard_coupon {
|
background: rgb(238, 51, 53);
|
padding: 6rpx 12rpx 6rpx 6rpx;
|
/* width: 120rpx; */
|
color: white;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
}
|
|
.goodCardDesc {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
/* margin-left: 24rpx; */
|
flex: 1;
|
padding: 12rpx 24rpx;
|
}
|
|
.goodCardDesc_bottom {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.goodCardDesc_bottomRighttext {
|
color: gray;
|
font-size: 24rpx;
|
text-align: right;
|
}
|
|
.goodCardDesc_bottomRighttext2 {
|
color: gray;
|
font-size: 24rpx;
|
text-align: right;
|
margin-top: 24rpx;
|
}
|
|
.scroll-v {
|
height: 94vh;
|
flex: 1;
|
/* #ifndef MP-ALIPAY */
|
flex-direction: column;
|
/* #endif */
|
width: 100%;
|
}
|
|
.loading-more {
|
align-items: center;
|
justify-content: center;
|
padding-top: 10px;
|
padding-bottom: 10px;
|
text-align: center;
|
}
|
|
.loading-more-text {
|
font-size: 28rpx;
|
color: #999;
|
}
|
|
.showAssociate {
|
padding: 0 24rpx;
|
background-color: white;
|
}
|
|
.showAssociaterow {
|
background-color: white;
|
padding: 24rpx 12rpx;
|
border-bottom: 1px solid #e7e7e7;
|
}
|
|
.searchType {
|
display: flex;
|
justify-content: space-evenly;
|
padding: 12rpx 24rpx;
|
background-color: white;
|
}
|
|
.searchTypeSelected {
|
color: rgb(254, 55, 56);
|
}
|
|
.searchTypeUnselected {}
|
|
.tblist_icon {
|
display: flex;
|
flex-direction: column;
|
margin-left: 12rpx;
|
justify-content: space-between;
|
height: 48rpx;
|
}
|
|
.triangle_up {
|
border: 12rpx solid transparent;
|
border-bottom-color: #d8d8d8;
|
/* width: 0;
|
height: 0; */
|
/* border-left: 12rpx solid transparent;
|
border-right: 12rpx solid transparent;
|
border-bottom: 24rpx solid #d8d8d8; */
|
}
|
|
.activeup {
|
border-bottom-color: #000 !important;
|
}
|
|
.activedown {
|
border-top-color: #000 !important;
|
}
|
|
.triangle_down {
|
/* width: 0;
|
height: 0; */
|
/* border-left: 12rpx solid transparent;
|
border-right:12rpx solid transparent;
|
border-top: 24rpx solid #d8d8d8; */
|
border: 12rpx solid transparent;
|
border-top-color: #d8d8d8;
|
}
|
|
.goodCardDesc_title {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
width: 490rpx;
|
}
|
|
.messageTip {
|
background-color: white;
|
margin: 12px 0;
|
padding: 12px 0 12px 12px;
|
color: #555;
|
}
|
|
.hotsearch {
|
background-color: white;
|
margin: 12px 0;
|
padding: 12px 0 12px 12px;
|
}
|
|
.hotsearch_title {
|
font-weight: bold;
|
}
|
|
.hotsearch_row {
|
margin-bottom: 10px;
|
}
|
|
.hotsearch_num0 {
|
color: white;
|
background-color: red;
|
padding: 3px 10px;
|
}
|
|
.hotsearch_num1 {
|
color: white;
|
background-color: #ff7402;
|
padding: 3px 10px;
|
}
|
|
.hotsearch_num2 {
|
color: white;
|
background-color: #ffaa00;
|
padding: 3px 10px;
|
}
|
|
.hotsearch_num3 {
|
color: #ffaa00;
|
padding: 0 5px;
|
}
|
.hotsearch_num4 {
|
color: #ffaa00;
|
padding: 0 10px;
|
}
|
.hotsearch_num5 {
|
color: #ffaa00;
|
padding: 0 ;
|
}
|
</style>
|
