464 lines
13 KiB
Vue
464 lines
13 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>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
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>
|