Loki
/
fish-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

uniapp 商品列表搜索无效，并且下拉分页后，会刷新去掉关键字

master
Gao xiaosong 4 years ago
parent
e7dccf1572
commit
d267396a7b
2 changed files with 265 additions and 258 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 110
      components/Recommend.vue
  2. 413
      pages/shop/GoodsList/index.vue

110
components/Recommend.vue
Unescape View File

@ -6,13 +6,11 @@
<text class="iconfont icon-zhuangshixian lefticon"></text> <text class="iconfont icon-zhuangshixian lefticon"></text>
</view> </view>
<view class="recommendList acea-row row-between-wrapper"> <view class="recommendList acea-row row-between-wrapper">
<view <view @click="routerGo(item)" class="item" v-for="(item, recommendIndex) in hostProduct"
@click="routerGo(item)" :key="recommendIndex">
class="item" <view class="pictrue">
v-for="(item, recommendIndex) in hostProduct" <image :src="item.image" class="image" />
:key="recommendIndex" </view>
>
<view class="pictrue"><image :src="item.image" class="image" /></view>
<view class="name line1">{{ item.storeName }}</view> <view class="name line1">{{ item.storeName }}</view>
<view class="money font-color-red"> <view class="money font-color-red">
￥ ￥
@ -24,47 +22,61 @@
</view> </view>
</template> </template>
<script> <script>
import { getHostProducts } from '@/api/store'; import {
import Loading from '@/components/Loading'; getHostProducts
export default { } from '@/api/store';
name: 'Recommend', import Loading from '@/components/Loading';
props: {}, export default {
components: { name: 'Recommend',
Loading props: {
}, recommendLoading: Boolean
data: function() { },
return { components: {
hostProduct: [], Loading
page: 1, },
limit: 20, watch: {
loadTitle: '', recommendLoading(nextLoading) {
loading: false, if (nextLoading) {
loadend: false this.hostProducts()
}; }
}, }
mounted: function() { },
this.hostProducts(); data: function () {
}, return {
methods: { hostProduct: [],
routerGo(item) { page: 1,
this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } }); limit: 20,
loadTitle: '',
loading: false,
loadend: false
};
},
mounted: function () {
this.hostProducts();
},
methods: {
routerGo(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.id
}
});
},
hostProducts: function () {
let that = this;
if (that.loading) return; //阻止下次请求（false可以进行请求）；
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
that.loading = true;
getHostProducts(that.page, that.limit).then(res => {
that.loading = false;
//apply();js将一个数组插入另一个数组;
that.hostProduct.push.apply(that.hostProduct, res.data);
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
that.page = that.page + 1;
this.$emit('changeRecommendLoading', false)
});
}
}, },
hostProducts: function() { };
let that = this;
if (that.loading) return; //阻止下次请求（false可以进行请求）；
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
that.loading = true;
getHostProducts(that.page, that.limit).then(res => {
that.loading = false;
//apply();js将一个数组插入另一个数组;
that.hostProduct.push.apply(that.hostProduct, res.data);
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
that.page = that.page + 1;
});
}
},
onReachBottom() {
!this.loading && this.hostProducts();
}
};
</script> </script>

413
pages/shop/GoodsList/index.vue
Unescape View File

@ -3,22 +3,14 @@
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<view class="search bg-color-red acea-row row-between-wrapper"> <view class="search bg-color-red acea-row row-between-wrapper">
<view class="input acea-row row-between-wrapper"> <view class="input acea-row row-between-wrapper">
<text class="iconfont icon-sousuo"></text>
<input placeholder="搜索商品信息" v-model="where.keyword" /> <input placeholder="搜索商品信息" v-model="where.keyword" />
<text class="iconfont icon-sousuo" @click="submitForm"></text>
</view> </view>
<view <view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view>
class="iconfont"
:class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'"
@click="switchTap"
></view>
</view> </view>
</form> </form>
<view class="nav acea-row row-middle"> <view class="nav acea-row row-middle">
<view <view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : "默认" }}</view>
class="item"
:class="title ? 'font-color-red' : ''"
@click="set_where(0)"
>{{ title ? title : "默认" }}</view>
<view class="item" @click="set_where(1)"> <view class="item" @click="set_where(1)">
价格 价格
<image src="@/static/images/horn.png" v-if="price === 0" /> <image src="@/static/images/horn.png" v-if="price === 0" />
@ -34,19 +26,9 @@
<!-- down --> <!-- down -->
<view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view> <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
</view> </view>
<view <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container">
class="list acea-row row-between-wrapper" <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
:class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
ref="container"
>
<view
@click="goGoodsCon(item)"
class="item"
:class="Switch === true ? '' : 'on'"
v-for="(item, productListIndex) in productList"
:key="productListIndex"
:title="item.storeName"
>
<view class="pictrue" :class="Switch === true ? '' : 'on'"> <view class="pictrue" :class="Switch === true ? '' : 'on'">
<image :src="item.image" :class="Switch === true ? '' : 'on'" /> <image :src="item.image" :class="Switch === true ? '' : 'on'" />
</view> </view>
@ -64,209 +46,222 @@
</view> </view>
</view> </view>
<Loading :loaded="loadend" :loading="loading"></Loading> <Loading :loaded="loadend" :loading="loading"></Loading>
<view <view class="noCommodity" style="background-color: #fff;" v-if="productList.length === 0 && where.page > 1">
class="noCommodity"
style="background-color: #fff;"
v-if="productList.length === 0 && where.page > 1"
>
<view class="noPictrue"> <view class="noPictrue">
<image src="@/static/images/noGood.png" class="image" /> <image src="@/static/images/noGood.png" class="image" />
</view> </view>
</view> </view>
<Recommend v-if="productList.length === 0 && where.page > 1"></Recommend> <Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading"
@changeRecommendLoading="changeRecommendLoading"></Recommend>
</view> </view>
</template> </template>
<script> <script>
import Recommend from "@/components/Recommend"; import Recommend from "@/components/Recommend";
import { getProducts } from "@/api/store"; import {
import Loading from "@/components/Loading"; getProducts
} from "@/api/store";
import Loading from "@/components/Loading";
export default { export default {
name: "GoodsList", name: "GoodsList",
components: { components: {
Recommend, Recommend,
Loading Loading
}, },
props: {}, props: {},
data: function() { data: function () {
// const { s = "", id = 0, title = "" } = this.$yroute.query; // const { s = "", id = 0, title = "" } = this.$yroute.query;
const s = "", const s = "",
id = 0, id = 0,
title = ""; title = "";
return { return {
hostProduct: [], hostProduct: [],
productList: [], productList: [],
Switch: true, Switch: true,
where: { where: {
page: 1, page: 1,
limit: 8, limit: 8,
keyword: s, keyword: s,
sid: id, //二级分类id sid: id, //二级分类id
news: 0, news: 0,
priceOrder: "", priceOrder: "",
salesOrder: "" salesOrder: ""
},
title: title && id ? title : "",
loadTitle: "",
loading: false,
loadend: false,
price: 0,
stock: 0,
nows: false,
recommendLoading: false
};
},
watch: {
title() {
this.updateTitle();
}, },
title: title && id ? title : "", $yroute(to) {
loadTitle: "", // if (to.name !== "GoodsList") return;
loading: false, // const { s = "", id = 0, title = "" } = to.query;
loadend: false, // if (s !== this.where.keyword || id !== this.where.sid) {
price: 0, // this.where.keyword = s;
stock: 0, // this.loadend = false;
nows: false // this.loading = false;
}; // this.where.page = 1;
}, // this.where.sid = id;
watch: { // this.title = title && id ? title : "";
title() { // this.nows = false;
// this.$set(this, "productList", []);
// this.price = 0;
// this.stock = 0;
// this.get_product_list();
// }
}
},
mounted: function () {
const {
s = "", id = 0, title = ""
} = this.$yroute.query;
this.where.keyword = s;
this.updateTitle(); this.updateTitle();
this.get_product_list();
}, },
$yroute(to) { onReachBottom() {
// if (to.name !== "GoodsList") return; this.recommendLoading = true;
// const { s = "", id = 0, title = "" } = to.query; !this.loading && this.get_product_list();
// if (s !== this.where.keyword || id !== this.where.sid) {
// this.where.keyword = s;
// this.loadend = false;
// this.loading = false;
// this.where.page = 1;
// this.where.sid = id;
// this.title = title && id ? title : "";
// this.nows = false;
// this.$set(this, "productList", []);
// this.price = 0;
// this.stock = 0;
// this.get_product_list();
// }
}
},
mounted: function() {
const { s = "", id = 0, title = "" } = this.$yroute.query;
this.updateTitle();
this.get_product_list();
},
onReachBottom() {
!this.loading && this.get_product_list();
},
onHide() {
// this.hostProduct = [];
// this.productList = [];
// this.Switch = true;
// this.where = {
// page: 1,
// limit: 8,
// keyword: s,
// sid: id, //二级分类id
// news: 0,
// priceOrder: "",
// salesOrder: ""
// };
// this.loadTitle = "";
// this.loading = false;
// this.loadend = false;
// this.price = 0;
// this.stock = 0;
// this.nows = fals;
},
methods: {
goGoodsCon(item) {
this.$yrouter.push({
path: "/pages/shop/GoodsCon/index",
query: { id: item.id }
});
}, },
updateTitle() { onHide() {
// document.title = this.title || this.$yroute.meta.title; // this.hostProduct = [];
// this.productList = [];
// this.Switch = true;
// this.where = {
// page: 1,
// limit: 8,
// keyword: s,
// sid: id, //二级分类id
// news: 0,
// priceOrder: "",
// salesOrder: ""
// };
// this.loadTitle = "";
// this.loading = false;
// this.loadend = false;
// this.price = 0;
// this.stock = 0;
// this.nows = fals;
}, },
get_product_list() { methods: {
var that = this; changeRecommendLoading(recommendLoading) {
this.setWhere(); this.recommendLoading = recommendLoading
// if (to.name !== "GoodsList") return; },
const { s = "", id = 0, title = "" } = this.$yroute.query; goGoodsCon(item) {
if (s !== this.where.keyword || id !== this.where.sid) { this.$yrouter.push({
this.where.keyword = s; path: "/pages/shop/GoodsCon/index",
query: {
id: item.id
}
});
},
updateTitle() {
// document.title = this.title || this.$yroute.meta.title;
},
get_product_list() {
var that = this;
this.setWhere();
// if (to.name !== "GoodsList") return;
const {
s = "", id = 0, title = ""
} = this.$yroute.query;
if (s !== this.where.keyword || id !== this.where.sid) {
this.loadend = false;
this.loading = false;
this.where.page = 1;
this.where.sid = id;
this.title = title && id ? title : "";
this.nows = false;
this.$set(this, "productList", []);
this.price = 0;
this.stock = 0;
// this.get_product_list();
}
let q = that.where;
getProducts(q).then(res => {
that.loading = false;
that.productList.push.apply(that.productList, res.data);
that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
that.where.page = that.where.page + 1;
});
},
submitForm: function () {
this.$set(this, "productList", []);
this.where.page = 1;
this.loadend = false; this.loadend = false;
this.loading = false; this.loading = false;
this.where.page = 1; this.get_product_list();
this.where.sid = id; },
this.title = title && id ? title : ""; //点击事件处理
this.nows = false; set_where: function (index) {
this.$set(this, "productList", []); let that = this;
this.price = 0; switch (index) {
this.stock = 0; case 0:
// this.get_product_list(); return that.$yrouter.push({
} path: "/pages/shop/GoodsClass/index"
let q = that.where; });
getProducts(q).then(res => { case 1:
that.loading = false; if (that.price === 0) that.price = 1;
that.productList.push.apply(that.productList, res.data); else if (that.price === 1) that.price = 2;
that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成； else if (that.price === 2) that.price = 0;
that.where.page = that.where.page + 1; that.stock = 0;
}); break;
}, case 2:
submitForm: function() { if (that.stock === 0) that.stock = 1;
this.$set(this, "productList", []); else if (that.stock === 1) that.stock = 2;
this.where.page = 1; else if (that.stock === 2) that.stock = 0;
this.loadend = false; that.price = 0;
this.loading = false; break;
this.get_product_list(); case 3:
}, that.nows = !that.nows;
//点击事件处理 break;
set_where: function(index) { default:
let that = this; break;
switch (index) { }
case 0: that.$set(that, "productList", []);
return that.$yrouter.push({ path: "/pages/shop/GoodsClass/index" }); that.where.page = 1;
case 1: that.loadend = false;
if (that.price === 0) that.price = 1; that.get_product_list();
else if (that.price === 1) that.price = 2; },
else if (that.price === 2) that.price = 0; //设置where条件
that.stock = 0; setWhere: function () {
break; let that = this;
case 2: if (that.price === 0) {
if (that.stock === 0) that.stock = 1; that.where.priceOrder = "";
else if (that.stock === 1) that.stock = 2; } else if (that.price === 1) {
else if (that.stock === 2) that.stock = 0; that.where.priceOrder = "asc";
that.price = 0; } else if (that.price === 2) {
break; that.where.priceOrder = "desc";
case 3: }
that.nows = !that.nows; if (that.stock === 0) {
break; that.where.salesOrder = "";
default: } else if (that.stock === 1) {
break; that.where.salesOrder = "asc";
} } else if (that.stock === 2) {
that.$set(that, "productList", []); that.where.salesOrder = "desc";
that.where.page = 1; }
that.loadend = false; that.where.news = that.nows ? "1" : "0";
that.get_product_list(); },
}, switchTap: function () {
//设置where条件 let that = this;
setWhere: function() { that.Switch = !that.Switch;
let that = this;
if (that.price === 0) {
that.where.priceOrder = "";
} else if (that.price === 1) {
that.where.priceOrder = "asc";
} else if (that.price === 2) {
that.where.priceOrder = "desc";
}
if (that.stock === 0) {
that.where.salesOrder = "";
} else if (that.stock === 1) {
that.where.salesOrder = "asc";
} else if (that.stock === 2) {
that.where.salesOrder = "desc";
} }
that.where.news = that.nows ? "1" : "0";
},
switchTap: function() {
let that = this;
that.Switch = !that.Switch;
} }
} };
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.noCommodity { .noCommodity {
border-top: 3px solid #f5f5f5; border-top: 3px solid #f5f5f5;
padding-bottom: 1px; padding-bottom: 1px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save