Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

zyh
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
Split 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>
</view>
<view class="recommendList acea-row row-between-wrapper">
<view
@click="routerGo(item)"
class="item"
v-for="(item, recommendIndex) in hostProduct"
:key="recommendIndex"
>
<view class="pictrue"><image :src="item.image" class="image" /></view>
<view @click="routerGo(item)" class="item" v-for="(item, recommendIndex) in hostProduct"
:key="recommendIndex">
<view class="pictrue">
<image :src="item.image" class="image" />
</view>
<view class="name line1">{{ item.storeName }}</view>
<view class="money font-color-red">
￥
@ -24,47 +22,61 @@
</view>
</template>
<script>
import { getHostProducts } from '@/api/store';
import Loading from '@/components/Loading';
export default {
name: 'Recommend',
props: {},
components: {
Loading
},
data: function() {
return {
hostProduct: [],
page: 1,
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 } });
import {
getHostProducts
} from '@/api/store';
import Loading from '@/components/Loading';
export default {
name: 'Recommend',
props: {
recommendLoading: Boolean
},
components: {
Loading
},
watch: {
recommendLoading(nextLoading) {
if (nextLoading) {
this.hostProducts()
}
}
},
data: function () {
return {
hostProduct: [],
page: 1,
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>

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

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

Write Preview
Loading…
Cancel
Save