123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search-box-bg">
|
|
<view class="bug-fix"></view>
|
|
<view class="search-box">
|
|
<view class="search-box-input">
|
|
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
|
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<DropDown @getQueryInfo="getShopList"></DropDown>
|
|
</view>
|
|
<view class="marginLR10">
|
|
<ShowShopList :showStyle="2" :adlinkPath="adlinkPath" :listType="4" :shopInfoList="shopInfoList" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DropDownItem from "@/components/DropDown/DropDownItem.vue"
|
|
export default {
|
|
components: {
|
|
DropDownItem
|
|
},
|
|
data() {
|
|
return {
|
|
adlinkPath: "/pages/publish/publishInvestment/publishInvestment",
|
|
shopInfoList: [],
|
|
pageSize: 5,
|
|
pageNum: 1,
|
|
customQuery: {},
|
|
shopListLength: '',
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (this.shopInfoList.length !== 0) {
|
|
this.pageNum++
|
|
this.getShopList()
|
|
console.log("触底加载");
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getShopList()
|
|
},
|
|
methods: {
|
|
getShopList(q) {
|
|
let query = this.getQueryInfo(q)
|
|
console.log("listquery", query);
|
|
this.$api.getShopList(query).then(res => {
|
|
this.shopListLength = res.data.data.length
|
|
this.shopInfoList = [...this.shopInfoList, ...res.data.data]
|
|
console.log(this.shopInfoList);
|
|
})
|
|
},
|
|
getQueryInfo(query) {
|
|
console.log("getQueryInfo", query);
|
|
const q = this.$u.queryParams({
|
|
type: 4,
|
|
pageSize: this.pageSize,
|
|
pageNum: this.pageNum,
|
|
...query
|
|
})
|
|
this.customQuery = q
|
|
return q
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
.marginLR10 {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.search-box-bg {
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 3;
|
|
background-color: #F8F8F8;
|
|
|
|
.bug-fix {
|
|
transform: translateY(-20rpx);
|
|
width: 100%;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 84.6%;
|
|
transform: translateX(-50%);
|
|
|
|
.search-box-input {
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
opacity: 0.85;
|
|
|
|
.u-border {
|
|
border: none;
|
|
|
|
.u-input__content {
|
|
height: 62rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
|
|
.u-input__content__field-wrapper__field {
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |