|
|
|
@ -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> |
|
|
|
|
Gaoxs
5 years ago
