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.
462 lines
14 KiB
462 lines
14 KiB
<template> |
|
<view class="productList" ref="container"> |
|
<view class="header"> |
|
<cu-custom :isBack="true"> |
|
<block slot="backText"> |
|
<image class="backImg" src="../../../static/images/back-btn.png" mode=""></image> |
|
</block> |
|
<block slot="content"> |
|
<view class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 57px);'"> |
|
<input v-if="where.keyword" type="text" v-model="where.keyword" :disabled="true"> |
|
<input v-else type="text" v-model="title" :disabled="true"> |
|
<view class="iconfont icon-guanbi" @click="close"></view> |
|
<!-- <view class="iconfont icon-guanbi" @click="submit"></view> --> |
|
</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
|
|
<view class="content" :style="'min-height:calc(100vh - '+CustomBar+'px);'"> |
|
<view class="no-product" v-if="productList.length === 0 && where.page > 1"> |
|
<image class="image" src="@/static/images/no-product.png" mode="widthFix"></image> |
|
<view class="">嗯？什么也没找到？</view> |
|
<view class="tip">请试一下其他关键词</view> |
|
</view> |
|
<view class="nav-box" :style="'top:'+ CustomBar +'px;'"> |
|
<view class="nav acea-row row-around" v-if="productList.length > 0"> |
|
<view class="item" @click="set_where(0)"> |
|
<view :class="'title ' + (stock === 0 && price === 0? 'active' : '')">综合</view> |
|
</view> |
|
<view class="item" @click="set_where(2)"> |
|
<view :class="'title ' + (stock === 2 ? 'active' : '')">销量</view> |
|
</view> |
|
<view class="item" @click="set_where(1)"> |
|
<view :class="'title acea-row row-middle ' + (stock === 0 && price ? 'active' : '')"> |
|
<view class="">价格</view> |
|
<view :class="'jiantou ' + (price?price === 1?'up':'down':'')"></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="list-box" v-if="productList.length > 0"> |
|
<PromotionGood :benefit="productList" /> |
|
|
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
|
</view> |
|
|
|
</view> |
|
|
|
|
|
<!-- <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> --> |
|
|
|
<!-- <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="!isIntegral"> |
|
<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> |
|
<view class="text" :class="Switch === true ? '' : 'on'"> |
|
<view class="name line1">{{ item.storeName }}</view> |
|
<view class="money font-color-red" :class="Switch === true ? '' : 'on'"> |
|
￥ |
|
<text class="num">{{ item.price }}</text> |
|
</view> |
|
<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'"> |
|
<view class="vip-money">￥{{ item.otPrice }}</view> |
|
<view>已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'true'"> |
|
<view @click="goIntegralGoodsCon(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> |
|
<view class="text" :class="Switch === true ? '' : 'on'"> |
|
<view class="name line1">{{ item.storeName }}</view> |
|
<view class="money font-color-red" :class="Switch === true ? '' : 'on'"> |
|
<text class="num">{{ item.integral }}积分</text> |
|
</view> |
|
<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'"> |
|
<view class="vip-money">￥{{ item.otPrice }}</view> ??? |
|
<view>已售{{ item.sales }}件</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> --> |
|
|
|
<!-- <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' |
|
import PromotionGood from '@/components/PromotionGood'; |
|
|
|
export default { |
|
name: 'GoodsList', |
|
components: { |
|
Recommend, |
|
Loading, |
|
PromotionGood |
|
}, |
|
props: {}, |
|
data: function() { |
|
const s = '', |
|
id = 0, |
|
title = '' |
|
return { |
|
CustomBar: this.CustomBar, |
|
CustomBarLeft: this.CustomBarLeft, |
|
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) {}, |
|
}, |
|
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() {}, |
|
methods: { |
|
close() { |
|
let pages = getCurrentPages(); |
|
let prevPage = pages[pages.length - 2]; //上一个页面 |
|
if (prevPage.route == 'pages/shop/GoodSearch/index') { |
|
prevPage.$vm.search = ''; |
|
} |
|
this.$yrouter.back(); |
|
}, |
|
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, |
|
}) |
|
}, |
|
getProductList() { |
|
if (this.loading) { |
|
return |
|
} |
|
this.loading = true |
|
var that = this |
|
this.setWhere() |
|
const { s = '', id = '', 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 = this.where |
|
let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral |
|
getData(q).then(res => { |
|
this.loading = false |
|
if (this.target) { |
|
this.productList = res.data |
|
this.target = false |
|
} else { |
|
this.productList.push.apply(this.productList, res.data) |
|
} |
|
console.log(this.target) |
|
this.loadend = res.data.length < this.where.limit //判断所有数据是否加载完成； |
|
this.where.page = this.where.page + 1 |
|
}) |
|
}, |
|
submitForm: function() { |
|
this.$set(this, 'productList', []) |
|
this.where.page = 1 |
|
this.loadend = false |
|
this.loading = false |
|
this.getProductList() |
|
}, |
|
//点击事件处理 |
|
set_where(index) { |
|
const { s = '', id = 0, title = '', isIntegral = false } = this.$yroute.query; |
|
switch (index) { |
|
case 0: |
|
if(this.stock !== 0 || this.price !== 0) { |
|
this.price = 0; |
|
this.stock = 0; |
|
} |
|
break |
|
case 1: |
|
if (this.price === 0) this.price = 1 |
|
else if (this.price === 1) this.price = 2 |
|
else if (this.price === 2) this.price = 1 |
|
// else if (that.price === 2) that.price = 0 |
|
this.stock = 0 |
|
this.where.keyword = s |
|
break |
|
case 2: |
|
if (this.stock === 0) this.stock = 2 |
|
// if (that.stock === 0) that.stock = 1 |
|
// else if (that.stock === 1) that.stock = 2 |
|
// else if (that.stock === 2) that.stock = 0 |
|
this.price = 0 |
|
this.where.keyword = s |
|
break |
|
case 3: |
|
this.nows = !this.nows |
|
this.where.keyword = s |
|
break |
|
default: |
|
break |
|
} |
|
this.productList = [] |
|
this.$set(this, 'productList', []) |
|
this.where.page = 1 |
|
this.target = true |
|
this.loadend = false |
|
this.getProductList() |
|
}, |
|
//设置where条件 |
|
setWhere() { |
|
if (this.price === 0) { |
|
this.where.priceOrder = '' |
|
} else if (this.price === 1) { |
|
this.where.priceOrder = 'asc' |
|
} else if (this.price === 2) { |
|
this.where.priceOrder = 'desc' |
|
} |
|
if (this.stock === 0) { |
|
this.where.salesOrder = '' |
|
} else if (this.stock === 1) { |
|
this.where.salesOrder = 'asc' |
|
} else if (this.stock === 2) { |
|
this.where.salesOrder = 'desc' |
|
} |
|
this.where.news = this.nows ? '1' : '0' |
|
}, |
|
switchTap() { |
|
this.Switch = !this.Switch |
|
}, |
|
}, |
|
} |
|
</script> |
|
<style scoped lang="less"> |
|
// .noCommodity { |
|
// border-top: 3px solid #f5f5f5; |
|
// padding-bottom: 1px; |
|
// } |
|
|
|
.productList { |
|
.backImg { |
|
height: 62rpx; |
|
width: 62rpx; |
|
margin-left: 26rpx; |
|
} |
|
.search { |
|
input { |
|
width: 376rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
} |
|
.iconfont { |
|
font-size: 28rpx; |
|
color: #999999; |
|
font-weight: 600; |
|
} |
|
} |
|
} |
|
|
|
.content { |
|
width: 100%; |
|
overflow-y: scroll; |
|
background: #FFFFFF; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
.nav-box { |
|
width: 100vw; |
|
padding-top: 4rpx; |
|
position: fixed; |
|
left: 0; |
|
z-index: 5; |
|
background: #F1F1F1; |
|
} |
|
.nav { |
|
width: 100vw; |
|
height: 104rpx; |
|
padding: 32rpx 32rpx 26rpx; |
|
background: #FFFFFF; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
.item { |
|
min-width: 66rpx; |
|
text-align: center; |
|
position: relative; |
|
.title { |
|
font-size: 26rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 38rpx; |
|
.jiantou { |
|
width: 0rpx; |
|
height: 0rpx; |
|
border-top: 0rpx solid transparent; |
|
border-left: 6rpx solid transparent; |
|
border-bottom: 10rpx solid transparent; |
|
border-right: 6rpx solid transparent; |
|
margin-left: 4rpx; |
|
} |
|
.up { |
|
border-top: 0rpx solid transparent; |
|
border-bottom: 10rpx solid #999999; |
|
} |
|
.down { |
|
border-top: 10rpx solid #999999; |
|
border-bottom: 0rpx solid transparent; |
|
} |
|
} |
|
.active { |
|
color: #3A3A3C; |
|
font-weight: 500; |
|
} |
|
.title::after { |
|
display: block; |
|
content: ''; |
|
width: 100%; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 0; |
|
transform:scaleX(0); |
|
transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease; |
|
} |
|
.active::after { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
.list-box { |
|
padding-top: 108rpx; |
|
} |
|
} |
|
|
|
.no-product { |
|
padding-top: 116rpx; |
|
font-size: 34rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 48rpx; |
|
text-align: center; |
|
.image { |
|
width: 446rpx; |
|
margin: 0rpx auto 24rpx; |
|
} |
|
.tip { |
|
font-size: 13px; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: #3A3A3C; |
|
line-height: 19px; |
|
margin-bottom: 76rpx; |
|
} |
|
} |
|
</style>
|
|
|