小程序商品列表重复数据
This commit is contained in:
Gao xiaosong
@ -6,11 +6,20 @@
|
|||||||
<input placeholder="搜索商品信息" v-model="where.keyword" />
|
<input placeholder="搜索商品信息" v-model="where.keyword" />
|
||||||
<text class="iconfont icon-sousuo" @click="submitForm"></text>
|
<text class="iconfont icon-sousuo" @click="submitForm"></text>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</form>
|
</form>
|
||||||
<view class="nav acea-row row-middle">
|
<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)">
|
<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" />
|
||||||
@ -24,21 +33,42 @@
|
|||||||
<image src="@/static/images/down.png" v-if="stock === 2" />
|
<image src="@/static/images/down.png" v-if="stock === 2" />
|
||||||
</view>
|
</view>
|
||||||
<!-- 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 class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container">
|
<view
|
||||||
<view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
|
class="list acea-row row-between-wrapper"
|
||||||
v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
|
: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'">
|
<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>
|
||||||
<view class="text" :class="Switch === true ? '' : 'on'">
|
<view class="text" :class="Switch === true ? '' : 'on'">
|
||||||
<view class="name line1">{{ item.storeName }}</view>
|
<view class="name line1">{{ item.storeName }}</view>
|
||||||
<view class="money font-color-red" :class="Switch === true ? '' : 'on'">
|
<view
|
||||||
|
class="money font-color-red"
|
||||||
|
:class="Switch === true ? '' : 'on'"
|
||||||
|
>
|
||||||
￥
|
￥
|
||||||
<text class="num">{{ item.price }}</text>
|
<text class="num">{{ item.price }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
|
<view
|
||||||
|
class="vip acea-row row-between-wrapper"
|
||||||
|
:class="Switch === true ? '' : 'on'"
|
||||||
|
>
|
||||||
<view class="vip-money">￥{{ item.otPrice }}</view>
|
<view class="vip-money">￥{{ item.otPrice }}</view>
|
||||||
<view>已售{{ item.sales }}件</view>
|
<view>已售{{ item.sales }}件</view>
|
||||||
</view>
|
</view>
|
||||||
@ -46,222 +76,231 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<Loading :loaded="loadend" :loading="loading"></Loading>
|
<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">
|
<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" :recommendLoading="recommendLoading"
|
<Recommend
|
||||||
@changeRecommendLoading="changeRecommendLoading"></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 {
|
import { getProducts } from "@/api/store";
|
||||||
getProducts
|
import Loading from "@/components/Loading";
|
||||||
} 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();
|
|
||||||
},
|
},
|
||||||
$yroute(to) {
|
title: title && id ? title : "",
|
||||||
// if (to.name !== "GoodsList") return;
|
loadTitle: "",
|
||||||
// const { s = "", id = 0, title = "" } = to.query;
|
loading: false,
|
||||||
// if (s !== this.where.keyword || id !== this.where.sid) {
|
loadend: false,
|
||||||
// this.where.keyword = s;
|
price: 0,
|
||||||
// this.loadend = false;
|
stock: 0,
|
||||||
// this.loading = false;
|
nows: false,
|
||||||
// this.where.page = 1;
|
recommendLoading: false,
|
||||||
// this.where.sid = id;
|
target: false,
|
||||||
// this.title = title && id ? title : "";
|
};
|
||||||
// this.nows = false;
|
},
|
||||||
// this.$set(this, "productList", []);
|
watch: {
|
||||||
// this.price = 0;
|
title() {
|
||||||
// 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();
|
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
$yroute(to) {
|
||||||
this.recommendLoading = true;
|
// if (to.name !== "GoodsList") return;
|
||||||
!this.loading && this.get_product_list();
|
// 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();
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
onHide() {
|
},
|
||||||
// this.hostProduct = [];
|
mounted: function () {
|
||||||
// this.productList = [];
|
const { s = "", id = 0, title = "" } = this.$yroute.query;
|
||||||
// this.Switch = true;
|
this.where.keyword = s;
|
||||||
// this.where = {
|
|
||||||
// page: 1,
|
this.updateTitle();
|
||||||
// limit: 8,
|
this.get_product_list();
|
||||||
// keyword: s,
|
},
|
||||||
// sid: id, //二级分类id
|
onReachBottom() {
|
||||||
// news: 0,
|
this.recommendLoading = true;
|
||||||
// priceOrder: "",
|
!this.loading && this.get_product_list();
|
||||||
// salesOrder: ""
|
},
|
||||||
// };
|
onHide() {
|
||||||
// this.loadTitle = "";
|
// this.hostProduct = [];
|
||||||
// this.loading = false;
|
// this.productList = [];
|
||||||
// this.loadend = false;
|
// this.Switch = true;
|
||||||
// this.price = 0;
|
// this.where = {
|
||||||
// this.stock = 0;
|
// page: 1,
|
||||||
// this.nows = fals;
|
// 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: {
|
||||||
|
changeRecommendLoading(recommendLoading) {
|
||||||
|
this.recommendLoading = recommendLoading;
|
||||||
},
|
},
|
||||||
methods: {
|
goGoodsCon(item) {
|
||||||
changeRecommendLoading(recommendLoading) {
|
this.$yrouter.push({
|
||||||
this.recommendLoading = recommendLoading
|
path: "/pages/shop/GoodsCon/index",
|
||||||
},
|
query: {
|
||||||
goGoodsCon(item) {
|
id: item.id,
|
||||||
this.$yrouter.push({
|
},
|
||||||
path: "/pages/shop/GoodsCon/index",
|
});
|
||||||
query: {
|
},
|
||||||
id: item.id
|
updateTitle() {
|
||||||
}
|
// document.title = this.title || this.$yroute.meta.title;
|
||||||
});
|
},
|
||||||
},
|
get_product_list() {
|
||||||
updateTitle() {
|
var that = this;
|
||||||
// document.title = this.title || this.$yroute.meta.title;
|
this.setWhere();
|
||||||
},
|
// if (to.name !== "GoodsList") return;
|
||||||
get_product_list() {
|
const { s = "", id = 0, title = "" } = this.$yroute.query;
|
||||||
var that = this;
|
if (s !== this.where.keyword || id !== this.where.sid) {
|
||||||
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.get_product_list();
|
this.where.page = 1;
|
||||||
},
|
this.where.sid = id;
|
||||||
//点击事件处理
|
this.title = title && id ? title : "";
|
||||||
set_where: function (index) {
|
this.nows = false;
|
||||||
let that = this;
|
this.$set(this, "productList", []);
|
||||||
switch (index) {
|
this.price = 0;
|
||||||
case 0:
|
this.stock = 0;
|
||||||
return that.$yrouter.push({
|
// this.get_product_list();
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
let q = that.where;
|
||||||
};
|
getProducts(q).then((res) => {
|
||||||
|
that.loading = false;
|
||||||
|
if (that.target) {
|
||||||
|
that.productList = res.data;
|
||||||
|
} else {
|
||||||
|
that.productList.push.apply(that.productList, res.data);
|
||||||
|
}
|
||||||
|
that.target = false
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
this.productList = [];
|
||||||
|
that.$set(that, "productList", []);
|
||||||
|
that.where.page = 1;
|
||||||
|
that.target = true;
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user