456 lines
12 KiB
Vue
456 lines
12 KiB
Vue
<template>
|
|
<view :style="{ paddingTop: mbConfig + 'rpx'}" v-if="tempArr.length">
|
|
<view class="index-product-wrapper" :style="{ background: themeColor,borderRadius: bgStyle+'rpx'}">
|
|
<!-- 单列 -->
|
|
<block v-if="itemStyle == 0">
|
|
<view class="list-box animated listA" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
|
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
|
|
<view class="pictrue" :class="'cont'+conStyle">
|
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
|
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
|
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
|
</view>
|
|
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
|
<view>
|
|
<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
|
|
<view class="merchant_info">
|
|
<view v-if="item.merchant && item.merchant.type_name" :style="'background:'+labelColor" class="font-bg-red">{{item.merchant.type_name}}</view>
|
|
<view class="txt" :style="'border-color:'+priceColor+';color:'+priceColor+';'" v-if="item.issetCoupon && couponShow">领券</view>
|
|
<view class="txt delivery" v-if="item.delivery_free">包邮</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
|
|
<view>
|
|
¥
|
|
<text>{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 两列 -->
|
|
<block v-if="itemStyle == 1">
|
|
<view class="list-box listS animated" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
|
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)" :class="'bg'+conStyle">
|
|
<view class="pictrue picture1" :class="'cont'+conStyle">
|
|
<!-- <image :src="item.image" mode=""></image> -->
|
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
|
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
|
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
|
</view>
|
|
<view class="text-info">
|
|
<view v-if="titleShow" class="title line1">{{ item.store_name }}</view>
|
|
<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
|
|
<view>¥<text>{{ item.price }}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 三列 -->
|
|
<block v-if="itemStyle == 2">
|
|
<view class="list-box animated listB" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
|
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
|
|
<view class="pictrue" :class="'cont'+conStyle">
|
|
<!-- <image :src="item.image" mode=""></image> -->
|
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
|
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
|
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
|
</view>
|
|
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
|
<view v-if="titleShow" class="title line1">{{ item.store_name }}</view>
|
|
<view v-if="priceShow" class="price">
|
|
<view v-if="priceShow" :style="'color:'+priceColor">
|
|
¥<text>{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!--大图-->
|
|
<block v-if="itemStyle == 3">
|
|
<view class="list-box animated listC" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
|
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)" :style="'border-radius:'+bgStyle+'rpx;'">
|
|
<view class="pictrue" :class="'cont'+conStyle">
|
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
|
</view>
|
|
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
|
<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
|
|
<view v-if="priceShow || opriceShow" class="price">
|
|
<view v-if="priceShow" :style="'color:'+priceColor">
|
|
<text>￥</text>
|
|
{{ item.price }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { getProductData } from '@/api/api.js';
|
|
export default {
|
|
name: 'goodList',
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
merId: {
|
|
type: String || Number,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tempArr: [],
|
|
mbConfig: this.dataConfig.mbConfig.val*2,
|
|
numConfig: this.dataConfig.numConfig.val ? this.dataConfig.numConfig.val : this.dataConfig.numConfig.val,
|
|
themeColor: this.dataConfig.themeColor.color[0].item,
|
|
priceColor: this.dataConfig.fontColor.color[0].item,
|
|
labelColor: this.dataConfig.labelColor.color[0].item,
|
|
itemStyle: this.dataConfig.itemStyle.type,
|
|
sortType: this.dataConfig.goodsSort.type,
|
|
conStyle: this.dataConfig.conStyle.type,
|
|
bgStyle: this.dataConfig.bgStyle.type ? '20' : '0',
|
|
type: this.dataConfig.tabConfig.tabVal || 0,
|
|
selectId: this.dataConfig.selectConfig.activeValue || 0,
|
|
productIds: this.dataConfig.goodsList.ids || [],
|
|
titleShow: this.dataConfig.titleShow.val,
|
|
priceShow: this.dataConfig.priceShow.val,
|
|
couponShow: this.dataConfig.couponShow.val,
|
|
diy_id: this.dataConfig.did,
|
|
unique: this.dataConfig.timestamp,
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.productslist();
|
|
},
|
|
methods: {
|
|
productslist() {
|
|
let data = {};
|
|
if (this.type == 1) {
|
|
data = {
|
|
diy_id: this.diy_id,
|
|
unique: this.unique,
|
|
mer_id: this.merId,
|
|
product_ids: this.productIds.toString(),
|
|
limit: this.productIds.length,
|
|
};
|
|
} else {
|
|
data = {
|
|
diy_id: this.diy_id,
|
|
unique: this.unique,
|
|
mer_id: this.merId,
|
|
order: this.sortType == 2 ? 'price_asc' : this.sortType == 1 ? 'sales' : '',
|
|
limit: this.numConfig,
|
|
};
|
|
if(this.merId){
|
|
data.mer_cate_id = (this.selectId&&this.selectId.toString()) || ''
|
|
}else{
|
|
data.cate_pid = (this.selectId&&this.selectId.toString()) || ''
|
|
}
|
|
}
|
|
getProductData(data).then(res => {
|
|
this.tempArr = res.data.list;
|
|
});
|
|
},
|
|
goDetail(item) {
|
|
this.$emit('detail', item);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index-product-wrapper {
|
|
margin: 0 20rpx;
|
|
padding: 20rpx 20rpx 0;
|
|
.list-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.item {
|
|
width: 328rpx;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&.on {
|
|
border-radius: 0;
|
|
}
|
|
.pictrue_log {
|
|
width: 92rpx;
|
|
height: 44rpx;
|
|
font-size: 26rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
|
width: 100%;
|
|
display: block;
|
|
position: relative;
|
|
.border-picture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: center/cover no-repeat;
|
|
}
|
|
}
|
|
.picture1,/deep/.picture1 image,/deep/.picture1 .easy-loadimage,/deep/.picture1 uni-image {
|
|
height: 346rpx;
|
|
position: relative;
|
|
.border-picture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: center/cover no-repeat;
|
|
}
|
|
.sell_out {
|
|
display: flex;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
background: rgba(0,0,0,.6);
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -75rpx 0 0 -75rpx;
|
|
&::before{
|
|
content: "";
|
|
display: block;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 100%;
|
|
border: 1px dashed #fff;
|
|
position: absolute;
|
|
top: 5rpx;
|
|
left: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
.cont1,/deep/.cont1 image,/deep/.cont1 .easy-loadimage,/deep/.cont1 uni-image,.cont1 .border-picture{
|
|
border-radius: 16rpx;
|
|
}
|
|
.text-info {
|
|
padding: 10rpx 20rpx 15rpx;
|
|
.title {
|
|
color: #222222;
|
|
}
|
|
.old-price {
|
|
margin-top: 4rpx;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
text {
|
|
margin-right: 2px;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
.price {
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
font-size: 26rpx;
|
|
align-items: center;
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: 550;
|
|
}
|
|
.ot-price{
|
|
color: #aaa;
|
|
font-size: 26rpx;
|
|
text-decoration: line-through;
|
|
margin-left: 6rpx;
|
|
font-weight: normal;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.pictrue {
|
|
position: relative;
|
|
}
|
|
.border-picture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
background: center/cover no-repeat;
|
|
}
|
|
}
|
|
.merchant_info{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
.merchant_type{
|
|
color: #fff;
|
|
line-height: 30rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 2rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
.txt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4rpx;
|
|
height: 28rpx;
|
|
margin-left: 15rpx;
|
|
border: 1px solid $theme-color;
|
|
border-radius: 4rpx;
|
|
font-size: 20rpx;
|
|
font-weight: normal;
|
|
&.delivery{
|
|
color: #FF9000;
|
|
border-color: #FF9000;
|
|
}
|
|
}
|
|
}
|
|
&.on {
|
|
display: flex;
|
|
}
|
|
&.listA {
|
|
.item {
|
|
display: flex;
|
|
width: 100%;
|
|
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
}
|
|
.sell_out {
|
|
display: flex;
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
background: rgba(0,0,0,.6);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -55rpx 0 0 -55rpx;
|
|
&::before{
|
|
content: "";
|
|
display: block;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100%;
|
|
border: 1px dashed #fff;
|
|
position: absolute;
|
|
top: 5rpx;
|
|
left: 5rpx;
|
|
}
|
|
}
|
|
.text-info {
|
|
width: 490rpx;
|
|
}
|
|
}
|
|
}
|
|
&.listB {
|
|
justify-content: inherit;
|
|
.item {
|
|
width: 31.3%;
|
|
margin-right: 3.05%;
|
|
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
|
height: 220rpx;
|
|
}
|
|
.sell_out {
|
|
display: flex;
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
background: rgba(0,0,0,.6);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -55rpx 0 0 -55rpx;
|
|
&::before{
|
|
content: "";
|
|
display: block;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100%;
|
|
border: 1px dashed #fff;
|
|
position: absolute;
|
|
top: 5rpx;
|
|
left: 5rpx;
|
|
}
|
|
}
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
.price{
|
|
font-size: 20rpx;
|
|
text{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.text-info{
|
|
padding: 10rpx 4rpx;
|
|
}
|
|
}
|
|
}
|
|
&.listC{
|
|
.item{
|
|
width: 100%;
|
|
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image{
|
|
height: 320rpx;
|
|
}
|
|
.price{
|
|
margin-top: 20rpx;
|
|
font-size: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.old-price{
|
|
font-weight: normal;
|
|
font-size: 22rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.listS{
|
|
.item{
|
|
background: #ffffff;
|
|
}
|
|
.price{
|
|
font-size: 40rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
.old-price{
|
|
font-weight: normal;
|
|
font-size: 22rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.cont1,/deep/.cont1 image,/deep/.cont1 .easy-loadimage,/deep/.cont1 uni-image,.cont1 .border-picture{
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
.bg1{
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|