123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <view id="body">
- <view class="history" v-if="products.length===0&&search===''">
- <view class="header">
- <image src="../../static/images/clock.png" mode="scaleToFill"
- style="width: 30upx;height: 30upx;margin-left: 10upx;"></image>
- <text style="margin-left: 10upx;">历史搜索</text>
- <uni-icons type="trash" style="margin-left: auto;margin-right: 10upx;" @tap="removeHistory"></uni-icons>
- </view>
- <view class="content">
- <view class="item" v-for="vlaue in history" @tap="fastSearch(vlaue)">
- {{vlaue}}
- </view>
- </view>
- </view>
- <view class="list">
- <template v-for="product in products">
- <product-item type="list" :id="product.id" :image="product.images|imagesFilter" :title="product.name"
- :org-price="product.org_price" :price="product.price"></product-item>
- </template>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- products: [],
- page: 1,
- pageLoading: false,
- search: "",
- history: []
- }
- },
- onPageScroll(e) {
- const query = uni.createSelectorQuery();
- query.select("#body").boundingClientRect(data => {
- if (e.scrollTop > data.height - uni.getSystemInfoSync().windowHeight * 2) {
- this.getProductList();
- }
- }).exec();
- },
- onLoad() {
- this.history = uni.getStorageSync("history") || []
- },
- onNavigationBarSearchInputChanged(e) {
- this.search = e.text;
- },
- onNavigationBarSearchInputConfirmed(e) {
- this.page = 1
- this.products = []
- this.getProductList()
- },
- onNavigationBarButtonTap(e) {
- if (e.index === 0) {
- this.page = 1
- this.products = []
- this.getProductList()
- }
- },
- methods: {
- getProductList() {
- if (!this.pageLoading) {
- console.log("加载下一页");
- this.pageLoading = true;
- this.$http.get({
- url: "/product/lists",
- data: {
- limit: 10,
- page: this.page,
- search: this.search
- },
- success: (res) => {
- this.products = [...this.products, ...res.data.data.rows]
- this.page++;
- this.pageLoading = false;
- }
- })
- if (!this.history.includes(this.search) && this.search !== '') {
- console.log(this.history)
- this.history.push(this.search)
- uni.setStorageSync("history", this.history)
- }
- }
- },
- fastSearch(vlaue) {
- this.search = vlaue
- this.page = 1
- this.products = []
- this.getProductList()
-
- // #ifdef APP-PLUS
- const currentWebview = this.$scope.$getAppWebview();
- currentWebview.setTitleNViewSearchInputText(this.search);
- // #endif
- },
- removeHistory() {
- uni.removeStorageSync("history")
- this.history = []
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .list {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- padding: 18upx;
- }
- .list .product-item {
- margin-bottom: 18upx;
- }
- .history {
- margin: 20upx;
- padding: 10upx;
- background: white;
- border-radius: 10upx;
- .header {
- display: flex;
- font-size: 28upx;
- align-items: center;
- padding-bottom: 10upx;
- border-bottom: 2upx solid #EEEEEE;
- }
- .content {
- min-height: 160upx;
- display: flex;
- justify-content: start;
- flex-wrap: wrap;
- .item {
- font-size: 28upx;
- margin: 10upx;
- padding: 0upx 20upx;
- color: #999999;
- border: 2upx solid #999999;
- height: 40upx;
- border-radius: 40upx;
- }
- }
- }
- </style>
|