You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
14 KiB
451 lines
14 KiB
<template> |
|
<view class="productList" ref="container"> |
|
<form @submit.prevent="submitForm"> |
|
<view class="search bg-color-red acea-row row-between-wrapper"> |
|
<view class="input acea-row row-between-wrapper"> |
|
<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> |
|
</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" @click="set_where(1)"> |
|
价格 |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="price === 0" /> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="price === 1" /> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="price === 2" /> |
|
</view> |
|
<view class="item" @click="set_where(2)"> |
|
销量 |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="stock === 0" /> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="stock === 1" /> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="stock === 2" /> |
|
</view> |
|
<!-- down --> |
|
<view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view> |
|
</view> |
|
|
|
|
|
<!--list--> |
|
<view class="tui-product-list" v-if="!isIntegral"> |
|
<view class="tui-product-container" v-if="Switch"> |
|
<block v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> |
|
<!--商品列表--> |
|
<view class="tui-pro-item" :class="[Switch ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150" @tap="goGoodsCon(item)"> |
|
<image :src="item.image" class="tui-pro-img" :class="[Switch ? 'tui-proimg-list' : '']" mode="widthFix" /> |
|
<view class="tui-pro-content"> |
|
<view class="tui-pro-tit">{{ item.storeName }}</view> |
|
<view> |
|
<view class="tui-pro-price"> |
|
<text class="tui-sale-price">￥{{ item.price }}</text> |
|
<text class="tui-factory-price">￥{{ item.otPrice }}</text> |
|
</view> |
|
<view class="tui-pro-pay">已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!--商品列表--> |
|
</block> |
|
</view> |
|
<view class="tui-product-container" v-if="!Switch"> |
|
<block v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> |
|
<!--商品列表--> |
|
<view class="tui-pro-item" :class="[Switch ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150" @tap="goGoodsCon(item)"> |
|
<image :src="item.image" class="tui-pro-img" :class="[Switch ? 'tui-proimg-list' : '']" mode="widthFix" /> |
|
<view class="tui-pro-content"> |
|
<view class="tui-pro-tit">{{ item.storeName }}</view> |
|
<view> |
|
<view class="tui-pro-price"> |
|
<text class="tui-sale-price">￥{{ item.price }}</text> |
|
<text class="tui-factory-price">￥{{ item.otPrice }}</text> |
|
</view> |
|
<view class="tui-pro-pay">已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!--商品列表--> |
|
</block> |
|
</view> |
|
</view> |
|
|
|
<!--list--> |
|
<view class="tui-product-list" v-if="isIntegral == 'true'" > |
|
<view class="tui-product-container" v-if="Switch"> |
|
<block v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> |
|
<!--商品列表--> |
|
<view class="tui-pro-item" :class="[Switch ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150" @tap="goGoodsCon(item)"> |
|
<image :src="item.image" class="tui-pro-img" :class="[Switch ? 'tui-proimg-list' : '']" mode="widthFix" /> |
|
<view class="tui-pro-content"> |
|
<view class="tui-pro-tit">{{ item.storeName }}</view> |
|
<view> |
|
<view class="tui-pro-price"> |
|
<text class="tui-sale-price">{{ item.integral }}积分</text> |
|
</view> |
|
<view class="tui-pro-pay">已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!--商品列表--> |
|
</block> |
|
</view> |
|
<view class="tui-product-container" v-if="!Switch"> |
|
<block v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> |
|
<!--商品列表--> |
|
<view class="tui-pro-item" :class="[Switch ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150" @tap="goGoodsCon(item)"> |
|
<image :src="item.image" class="tui-pro-img" :class="[Switch ? 'tui-proimg-list' : '']" mode="widthFix" /> |
|
<view class="tui-pro-content"> |
|
<view class="tui-pro-tit">{{ item.storeName }}</view> |
|
<view> |
|
<view class="tui-pro-price"> |
|
<text class="tui-sale-price">{{ item.integral }}积分</text> |
|
</view> |
|
<view class="tui-pro-pay">已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!--商品列表--> |
|
</block> |
|
</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="noPictrue"> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noGood.png`" class="image" /> |
|
</view> |
|
</view> |
|
<Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading" @changeRecommendLoading="changeRecommendLoading"></Recommend> |
|
</view> |
|
</template> |
|
<script> |
|
import Recommend from '@/components/Recommend' |
|
import { getProducts, getProductsIntegral } 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 = '' |
|
|
|
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, |
|
target: false, |
|
isIntegral: false, |
|
} |
|
}, |
|
watch: { |
|
title() { |
|
this.updateTitle() |
|
}, |
|
isIntegral() { |
|
if (this.isIntegral) { |
|
uni.setNavigationBarTitle({ |
|
title: '积分商品', |
|
}) |
|
} else { |
|
uni.setNavigationBarTitle({ |
|
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.getProductList(); |
|
// } |
|
}, |
|
}, |
|
mounted: function () { |
|
const { s = '', id = 0, title = '', isIntegral = false } = this.$yroute.query |
|
|
|
this.where.keyword = s |
|
this.where.isIntegral = isIntegral == 'true' ? 1 : 0 |
|
this.isIntegral = isIntegral |
|
this.updateTitle() |
|
this.getProductList() |
|
}, |
|
onReachBottom() { |
|
this.recommendLoading = true |
|
!this.loading && this.getProductList() |
|
}, |
|
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: { |
|
changeRecommendLoading(recommendLoading) { |
|
this.recommendLoading = recommendLoading |
|
}, |
|
goGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.id, |
|
isIntegral: this.isIntegral, |
|
}, |
|
}) |
|
}, |
|
goIntegralGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/IntegralGoodsCon/index', |
|
query: { |
|
id: item.id, |
|
isIntegral: this.isIntegral, |
|
}, |
|
}) |
|
}, |
|
updateTitle() { |
|
uni.setNavigationBarTitle({ |
|
title: this.title, |
|
}) |
|
// document.title = this.title || this.$yroute.meta.title; |
|
}, |
|
getProductList() { |
|
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.getProductList(); |
|
} |
|
let q = that.where |
|
let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral |
|
getData(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.getProductList() |
|
}, |
|
//点击事件处理 |
|
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.getProductList() |
|
}, |
|
//设置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> |
|
<style scoped lang="less"> |
|
.noCommodity { |
|
border-top: 3px solid #f5f5f5; |
|
padding-bottom: 1px; |
|
} |
|
|
|
.tui-product-list { |
|
display: flex; |
|
box-sizing: border-box; |
|
margin-top: 1.72*100rpx; |
|
} |
|
|
|
.tui-product-container { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
flex:1; |
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.tui-product-container:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
.tui-pro-item { |
|
flex: 0 0 49%; |
|
margin-bottom: 10rpx; |
|
background: #fff; |
|
box-sizing: border-box; |
|
border-radius: 12rpx; |
|
overflow: hidden; |
|
transition: all 0.15s ease-in-out; |
|
} |
|
|
|
.tui-flex-list { |
|
flex:1 1 100%; |
|
display: flex; |
|
margin-bottom: 1rpx !important; |
|
} |
|
|
|
.tui-pro-img { |
|
width: 100%; |
|
display: block; |
|
} |
|
|
|
.tui-proimg-list { |
|
width: 260rpx; |
|
height: 260rpx !important; |
|
flex-shrink: 0; |
|
border-radius: 12rpx; |
|
} |
|
|
|
.tui-pro-content { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 20rpx; |
|
} |
|
|
|
.tui-pro-tit { |
|
color: #2e2e2e; |
|
font-size: 26rpx; |
|
word-break: break-all; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 2; |
|
} |
|
|
|
.tui-pro-price { |
|
padding-top: 18rpx; |
|
} |
|
|
|
.tui-sale-price { |
|
font-size: 34rpx; |
|
font-weight: 500; |
|
color: #e41f19; |
|
} |
|
|
|
.tui-factory-price { |
|
font-size: 24rpx; |
|
color: #a0a0a0; |
|
text-decoration: line-through; |
|
padding-left: 12rpx; |
|
} |
|
|
|
.tui-pro-pay { |
|
padding-top: 10rpx; |
|
font-size: 24rpx; |
|
color: #656565; |
|
} |
|
/* 商品列表*/ |
|
</style>
|
|
|