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.
513 lines
16 KiB
513 lines
16 KiB
<template>
|
|
<view class="container">
|
|
<global-loading />
|
|
|
|
<!-- 商品列表 -->
|
|
<!-- <view class="flex-items-plus flex-row search">-->
|
|
<!-- <view class="searchBg">-->
|
|
<!-- <view class="searchImg-box flex-items-plus">-->
|
|
<!-- <image class="searchImg" src="http://36.138.125.206:8081/ceres-local-file/static/img/searchImg.png"></image>-->
|
|
<!-- <input class="search-box" v-model="keyWord" placeholder-class="searchboxPlace" :placeholder="$t('common.searchproduct_hint')" />-->
|
|
<!--<!– <image class="searchClose-icon" @click="searchTextDel" src="http://36.138.125.206:8081/ceres-local-file/static/img/index/searchClose_icon.png"></image>–>-->
|
|
<!-- </view>-->
|
|
<!-- <label class="mar-left-40 fs28" @click="searchList(1)">{{$t('page.search')}}</label>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="shop-list-nav">-->
|
|
<!-- <view class="nav-item-sort" @click="sortTap(1)">-->
|
|
<!-- <text class="nav-title" :class="{'active' : sortIndex == 1}">{{$t('common.default')}}</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="nav-item-sort" @click="sortTap(2)">-->
|
|
<!-- <text class="nav-title" :class="{'active' : sortIndex == 2}">{{$t('product.price')}}</text>-->
|
|
<!-- <view class="r">-->
|
|
<!-- <view class="arrowUp" :class="{activeUp: type == 1}"></view>-->
|
|
<!-- <view class="arrowDown" :class="{activeDown: type == 2}"></view>-->
|
|
<!-- <!– <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortUp.png" v-if="type == 1" class="arrow-img padd-t"></image>–>-->
|
|
<!-- <!– <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortDown.png" v-if="type == 2" class="arrow-img padd-b"></image>–>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="nav-item-sort" @click="sortTap(3)">-->
|
|
<!-- <text class="nav-title" :class="{'active' : sortIndex == 3}">{{$t('common.synthesis')}}</text>-->
|
|
<!-- <view class="r">-->
|
|
<!-- <view class="arrowUp" :class="{activeUp: volume == 1}"></view>-->
|
|
<!-- <view class="arrowDown" :class="{activeDown: volume == 2}"></view>-->
|
|
<!-- <!– <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortUp.png" v-if="volume == 1" class="arrow-img padd-t"></image>–>-->
|
|
<!-- <!– <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortDown.png" v-if="volume == 2" class="arrow-img padd-b"></image>–>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<view v-if="list.length>0" class="listBox">
|
|
<view v-for="(item, index) in list" :key="index" class="goodsDetails-box flex-display flex-column" @click="goodsDateils(item.shopId,item.productId,item.skuId)">
|
|
<view v-if="item.activityType === 0" class="goodsDetails flex-items-plus flex-row">
|
|
<image class="goodsImg default-img" :src="item.image"
|
|
onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"></image>
|
|
<view class="mar-left-30">
|
|
<view class="goodsName-box overflowNoDot">
|
|
<label class="goodsName fs26">{{item.productName}}</label>
|
|
</view>
|
|
<view class="usersBox">
|
|
<label class="fs24 font-color-C5AA7B" v-if="item.users != null">{{item.users}}{{$t('common.payticktip')}}</label>
|
|
<label class="fs24 font-color-C5AA7B" v-else>0{{$t('common.payticktip')}}</label>
|
|
</view>
|
|
<view class="priceBuyNum-box flex-items mar-top-20">
|
|
<view>
|
|
<label class="fs30 font-color-C83732">¥</label>
|
|
<label class="fs36 font-color-C83732 mar-left-10">{{item.price}}</label>
|
|
</view>
|
|
<view style="margin-left: 20upx; color: #CCCCCC; text-decoration:line-through">
|
|
<label class="fs24">¥{{item.originalPrice}}</label>
|
|
</view>
|
|
</view>
|
|
<view class="flex-display flex-sp-between flex-row mar-top-10 flex-items shopName">
|
|
<label class="fs22 font-color-FFEBC4">{{item.shopName}}</label>
|
|
<!-- <image class="arrowImg" src="http://36.138.125.206:8081/ceres-local-file/static/img/user/arrow.png"></image>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="spikeList goodsDetails">
|
|
<view class="listItem">
|
|
<view class="itemBox">
|
|
<img :src="item.image" class="pic-img default-img"
|
|
onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null">
|
|
</view>
|
|
<view class="itemInfo mar-top-30">
|
|
<p>{{item.productName}}</p>
|
|
<view class="number" v-if="item.users != null">
|
|
<view class="numText">{{item.users}}{{$t('common.payticktip')}}</view>
|
|
<!-- <view class="numText" v-if="item.total !=0">限量{{item.total}}件</view>-->
|
|
</view>
|
|
<view class="flex-row-plus flex-item mar-top-30">
|
|
<image class="iconImg" v-if="item.activityType == 1" src="http://36.138.125.206:8081/ceres-local-file/static/images/groupBuyIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 2" src="http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 4" src="http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 3" src="http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 5" src="http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 9" src="http://36.138.125.206:8081/ceres-local-file/static/images/memberCenterIcon.png"></image>
|
|
<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image>
|
|
<view class="font-color-C83732 flex-row-plus">
|
|
<b>￥</b>
|
|
<label class="fs28">{{item.price}}</label>
|
|
</view>
|
|
<view class="mar-left-30 discountsPriceLine font-color-999">¥{{item.originalPrice}}</view>
|
|
</view>
|
|
<view class="flex-display flex-sp-between flex-row mar-top-10 flex-items shopName">
|
|
<label class="fs22 font-color-FFEBC4">{{item.shopName}}</label>
|
|
<!-- <image class="arrowImg" src="http://36.138.125.206:8081/ceres-local-file/static/img/user/arrow.png"></image>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索为空 -->
|
|
<view v-if="ifEmpty" class="emptyCart-box flex-items-plus flex-column">
|
|
<image class="emptyCart-img" src="http://36.138.125.206:8081/ceres-local-file/static/images/searchEmpty.png"></image>
|
|
<label class="font-color-999 fs26 mar-top-30">{{$t('common.searchproductempty_short')}}</label>
|
|
<label class="font-color-999 fs26 mar-top-10">{{$t('common.searchemptyswitchword')}}</label>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyWord:'',
|
|
category3Id:'',
|
|
page: 1,
|
|
pageSize: 20,
|
|
source:2,
|
|
list:[],
|
|
loadingType:0,
|
|
sortIndex: 0,
|
|
ifNew:0,//是否新品
|
|
type:1,//价格排序条件
|
|
volume:1,//销量排序条件
|
|
sourceType: '',
|
|
ids: [],
|
|
classifyId: 0,
|
|
ifEmpty: false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if(option.sourceType){
|
|
this.sourceType = option.sourceType
|
|
if(option.sourceType === '1'){
|
|
this.ids = option.ids
|
|
} else if(option.sourceType === '2'){
|
|
this.classifyId = option.classifyId
|
|
}
|
|
}
|
|
this.searchList(1)
|
|
},
|
|
onReachBottom(){
|
|
if(this.loadingType == 1){
|
|
uni.stopPullDownRefresh()
|
|
}else{
|
|
this.page = this.page+1
|
|
this.searchList(0)
|
|
}
|
|
},
|
|
methods: {
|
|
sortTap(index){
|
|
this.page = 1
|
|
this.list = []
|
|
if(index == 1){
|
|
this.type = 1
|
|
this.volume = 1
|
|
this.sortIndex = index
|
|
}else if(index == 2){
|
|
this.type = this.type != 1 ? 1:2
|
|
this.sortIndex = index
|
|
}else if(index == 3){
|
|
this.volume = this.volume != 1 ? 1:2
|
|
this.sortIndex = index
|
|
}
|
|
this.searchList()
|
|
},
|
|
// searchTextDel(){
|
|
// this.keyWord = ''
|
|
// },
|
|
searchList(type){
|
|
// uni.showLoading({
|
|
// title: '加载中...',
|
|
// })
|
|
if(type == 1){
|
|
this.list = []
|
|
this.page = 1
|
|
}
|
|
var params = {
|
|
page: this.page,
|
|
pageSize: this.pageSize
|
|
}
|
|
if (this.sourceType === '1') {
|
|
if(this.ids && this.ids.length>0){
|
|
params.ids = this.ids
|
|
} else {
|
|
this.list = []
|
|
}
|
|
} else if(this.sourceType === '2'){
|
|
if(this.classifyId) {
|
|
params.classifyId = this.classifyId
|
|
} else {
|
|
this.list = []
|
|
}
|
|
}
|
|
if(params.ids || params.classifyId){
|
|
NET.request(API.getProductsV2, params, 'GET').then(res => {
|
|
uni.hideLoading()
|
|
this.list = this.list.concat(res.data.list)
|
|
if (this.list.length === 0) {
|
|
this.ifEmpty = true
|
|
}
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
},
|
|
//商品详情
|
|
goodsDateils(shopId,productId,skuId){
|
|
uni.navigateTo({
|
|
url: 'goodsDetails?shopId='+shopId + '&productId='+productId +'&skuId='+skuId
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f8f8f8;
|
|
}
|
|
input{padding-left: 80upx;}
|
|
.container{
|
|
height: 100%;
|
|
background: #f8f8f8;
|
|
.search {
|
|
padding: 20rpx;
|
|
background: #FFFFFF;
|
|
border-top: 2rpx solid #F3F4F5;
|
|
}
|
|
.searchImg-box {
|
|
position: relative;
|
|
}
|
|
.emptyCart-box{
|
|
margin-top: 70upx;
|
|
.emptyCart-img{
|
|
width: 113upx;
|
|
height: 98upx;
|
|
}
|
|
}
|
|
.searchBg {
|
|
width: 100%;
|
|
display: flex;
|
|
background-color: #F7F7F7;
|
|
align-items: center;
|
|
height: 78rpx;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
label {
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.searchImg{
|
|
width: 50upx;
|
|
height: 50upx;
|
|
position: absolute;
|
|
left: 0upx;
|
|
}
|
|
.search-box{
|
|
width: 400upx;
|
|
height: 66upx;
|
|
}
|
|
.searchboxPlace{
|
|
font-size: 26upx;
|
|
color: #A9A9A9;
|
|
padding-right: 30upx;
|
|
}
|
|
.searchClose-icon{
|
|
z-index: 999;
|
|
width: 40upx;
|
|
height: 40upx;
|
|
margin-left: -50upx;
|
|
}
|
|
.promotion618{
|
|
width: 130upx;
|
|
height: 30upx;
|
|
}
|
|
.goodsDetails-box{
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
.goodsDetails{
|
|
border-bottom: 1upx solid #EDEDED;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30upx;
|
|
position: relative;
|
|
.goodsName-box{
|
|
width: 389upx;
|
|
height: 85upx;
|
|
.img618-cion{
|
|
width:70upx;
|
|
height:36upx;
|
|
}
|
|
}
|
|
.shopName {
|
|
height: 50rpx;
|
|
background: #333333;
|
|
opacity: 1;
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
padding: 10rpx 15rpx;
|
|
}
|
|
.goodsImg{
|
|
width: 260upx;
|
|
height: 260upx;
|
|
}
|
|
.discounts-box{
|
|
margin-left: -10upx;
|
|
margin-top: 20upx;
|
|
.discounts-text{
|
|
margin-left: 10upx;
|
|
color: #C5AA7B;
|
|
background-color: #FFE4CC;
|
|
padding: 6upx 12upx;
|
|
border-radius: 4upx;
|
|
}
|
|
}
|
|
.arrowImg{
|
|
width: 20upx;
|
|
height: 20upx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.spikeList {
|
|
.arrowImg{
|
|
width: 20upx;
|
|
height: 20upx;
|
|
}
|
|
// padding: 108upx 30upx 20upx 30upx;
|
|
padding-top: 30rpx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
.listItem {
|
|
display: flex;
|
|
// padding-bottom: 10upx;
|
|
border-bottom: 1upx solid #EEEEEE;
|
|
margin-bottom: 30upx;
|
|
.iconImg {
|
|
width: 58rpx;
|
|
height: 36rpx;
|
|
}
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.itemBox {
|
|
width: 260upx;
|
|
height: 260upx;
|
|
margin-right: 30upx;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.itemInfo {
|
|
flex: 1;
|
|
p {
|
|
font-size: 26upx;
|
|
color: #333333;
|
|
line-height: 40upx;
|
|
margin-bottom: 20upx;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.number {
|
|
color: #999999;
|
|
font-size: 26upx;
|
|
display: flex;
|
|
align-items: center;
|
|
.numText {
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
border: 2rpx solid #E4E5E6;
|
|
color: #C5AA7B;
|
|
font-size: 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.listBox {
|
|
padding: 0 24rpx;
|
|
box-sizing: border-box;
|
|
.usersBox {
|
|
margin-top: 20rpx;
|
|
label {
|
|
padding: 10rpx;
|
|
border: 2rpx solid #E4E5E6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.shop-list-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
line-height: 76rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #C5AA7B;
|
|
}
|
|
|
|
.nav-item .line {
|
|
display: inline-block;
|
|
width: 80rpx;
|
|
height: 4rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.nav-item.active .line {
|
|
background: #C5AA7B;
|
|
}
|
|
|
|
.nav-item.padd-l {
|
|
padding-left: 20%;
|
|
box-sizing: border-box;
|
|
}
|
|
.active{
|
|
color: #C5AA7B;
|
|
}
|
|
.nav-item.padd-r {
|
|
padding-right: 20%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-item-sort {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #222;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.nav-item-sort .r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 5rpx;
|
|
.arrowDown {
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 10rpx;
|
|
border-style: solid;
|
|
border-color: #CCCCCC transparent transparent transparent;
|
|
margin-top: 2rpx;
|
|
}
|
|
.arrowUp {
|
|
margin-bottom: 2rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 10rpx;
|
|
border-style: solid;
|
|
border-color: transparent transparent #CCCCCC transparent;
|
|
}
|
|
.activeDown {
|
|
border-color: #C5AA7B transparent transparent transparent;
|
|
}
|
|
.activeUp {
|
|
border-color: transparent transparent #C5AA7B transparent;
|
|
}
|
|
}
|
|
|
|
//.nav-item-sort .r .arrow-img {
|
|
// width: 32rpx;
|
|
// height: 32rpx;
|
|
// padding: 7rpx;
|
|
// box-sizing: border-box;
|
|
//}
|
|
//// #ifdef MP-ALIPAY
|
|
//.nav-item-sort .r .arrow-img {
|
|
// width: 16rpx;
|
|
// height: 16rpx;
|
|
// padding: 4rpx;
|
|
// box-sizing: border-box;
|
|
//}
|
|
.search {
|
|
padding-top: 20rpx;
|
|
}
|
|
// #endif
|
|
</style>
|