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.
|
|
<template> <div class="hom-pro-list"> <div class="title" v-if="false"> <!-- #ifdef MP-WEIXIN --> <img class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix" /> <!-- #endif --> <!-- #ifdef H5 || APP-PLUS --> <image class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix" /> <!-- #endif --> </div> <div v-if="componentContent.arrangeType == '横向滑动' && productData.length > 2" class="product-list"> <scroll-view ref="mySwiper" class="swiper product-list-box" scroll-x="true"> <div class="swiper-wrap"> <div class="product-list-item-warp" v-for="(item,index) in productData" :key="index">
<div class="product-list-item" v-if="JSON.stringify(item)!=='{}' && componentContent.productStyleValue == '1'" @click="jumpProductDetail(item)"> <div class="product-list-img"> <img class="img pic-img 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"> </div> <div class="product-list-info"> <label class="product-name">{{ item.productName }}</label> <div class="flex"> <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)"> <label class="shop-name">{{ item.shopName }}</label> </div> <label class="buy-count">已售{{ item.number ? item.number : 0 }}件</label> </div> <div class="price-warp"> <!-- #ifdef MP-WEIXIN --> <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"> <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"> <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"> <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"> <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"> <img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"> <img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"> <!-- #endif --> <!-- #ifdef H5 || APP-PLUS --> <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"> <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"> <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"> <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"> <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"> <image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"> <image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"> <!-- #endif --> <div class="price"> ¥ {{ item.price }} </div> <div class="original-price"> ¥ {{ item.originalPrice }} </div> </div> </div> </div>
<div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'"> <div class="product-swiper-img"> <img class="img pic-img 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"> </div> <div class="product-swiper-info"> <div class="product-info-content"> <div class="product-name-row"> <label class="product-name">{{ item.productName }}</label> <img class="product-star" src="../../../static/images/product/icon_star.png">
<label class="product-star-text">{{ item.qaNum || 3.5 }}</label> </div> <div class="product-price-row"> <div class="price-warp"> ¥ {{ item.price }} </div> <img class="product-add" src="../../../static/images/product/icon_add.png"> </div>
</div> </div> </div>
<div class="item3" v-if="componentContent.productStyleValue == '3'" @click="jumpProductDetail(item)"><!-- <div class="item3_name">{{ item.productName }}</div>--> <div class="item3_image"> <img :src="item.image" fit="contain"></img> </div> <div class="item3_name">{{ item.productName }}</div><!-- <div class="item3_btn_row">
</div>--> </div>
<div class="item4" v-if="componentContent.productStyleValue == '4'">
<div class="item4_content"> <div class="item4_image"> <img :src="item.image" fit="contain"></img> </div> <div class="item4_info"> <div class="item4_name">{{ item.productName }}</div> <div class="item4_price">¥{{ item.price }}</div> </div>
<div class="item4_arrow"> <img src="http://36.138.125.206:8081/ceres-local-file/image/home_item_forward.png"> </div> </div>
<div class="item4_index_image" v-if="index < 3"> <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0"> <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1"> <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2"> </div> </div> <!-- 自定义骨架屏 --> <div class="product-list-item ske-loading" v-if="JSON.stringify(item)==='{}'"> <div class="product-list-img child-loading">
</div> <div class="product-list-info"> <label class="product-name child-loading"></label> <div class="price-warp child-loading" style="padding: 5px 0"> </div> <div class="price-warp child-loading" style="padding: 5px 0"> </div> </div> </div> </div> </div> </scroll-view> <!-- <view class="swiper-dots" v-if="productData && productData.length > 2" > <text class="dot" :class="index - swiperCurrent <= 1 && index - swiperCurrent >=0 && 'dot-active'" v-for="(dot, index) in productData.length" :key="index"></text> </view> --> </div> <div v-else class="product-list"> <ProductSkeleton style="" v-if="isFirst" :loading="loading" :isFirst="isFirst" /> <div class="product-list-box" v-else> <div class="product-list-item-warp" v-for="(item,index) in productData" :key="index"> <div @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '1'" class="product-list-item"> <div class="product-list-img"> <img class="img pic-img 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"> </div> <div class="product-list-info"> <label class="product-name">{{ item.productName }}</label> <div class="flex"> <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)"> <label class="shop-name">{{ item.shopName }}</label> <div class="shop-logo"> <img :src="item.shopLogo"> </div> </div> <label class="buy-count">已售{{ item.number ? item.number : 0 }}件</label> </div> <div class="price-warp"> <!-- #ifdef MP-WEIXIN --> <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png" /> <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png" /> <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png" /> <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png" /> <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png" /> <img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png" /> <img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" /> <!-- #endif --> <!-- #ifdef H5 || APP-PLUS --> <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png" /> <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png" /> <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png" /> <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png" /> <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png" /> <image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png" /> <image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" /> <!-- #endif --> <div class="price"> ¥ {{ item.price }} </div> <div class="original-price"> ¥ {{ item.originalPrice }} </div> </div> </div> </div>
<div class="product-swiper-item" @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '2'"> <div class="product-swiper-img"> <img class="img pic-img 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"> </div> <div class="product-swiper-info"> <div class="product-info-content"> <div class="product-name-row"> <label class="product-name">{{ item.productName }}</label> <img class="product-star" src="../../../static/images/product/icon_star.png">
<label class="product-star-text">{{ item.qaNum || 3.5 }}</label> </div> <div class="product-price-row"> <div class="price-warp"> ¥ {{ item.price }} </div> <img class="product-add" src="../../../static/images/product/icon_add.png"> </div>
</div> </div> </div>
<div class="item3" @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '3'"><!-- <div class="item3_name">{{ item.productName }}</div>--> <div class="item3_image"> <img :src="item.image" fit="contain"></img> </div><!-- <div class="item3_btn_row"> <div class="item3_btn">点击</div> </div>--> <div class="item3_name">{{ item.productName }}</div> </div>
<div class="item4" @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '4'">
<div class="item4_content"> <div class="item4_image"> <img :src="item.image" fit="contain"></img> </div> <div class="item4_info"> <div class="item4_name">{{ item.productName }}</div><!-- <div class="item4_price">¥{{ item.price }}</div>--> <div class="item4_price"> ¥<span style="margin-left: 5rpx">{{item.price | radixPointBefore}}</span> <span style="font-size: 20rpx">{{item.price | radixPointAfter}}</span> </div> </div>
<div class="item4_arrow"> <img src="http://36.138.125.206:8081/ceres-local-file/image/home_item_forward.png"> </div> </div>
<div class="item4_index_image" v-if="index < 3"> <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0"> <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1"> <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2"> </div> </div>
</div> </div> </div> <button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button> </div></template>
<script> import { commonMixin } from '../mixin' import ProductSkeleton from "@/components/basics/components/ProductSkeleton"; export default { mixins: [commonMixin], components: { ProductSkeleton }, data() { return { swiperCurrent: 0, } }, methods: { swiperChange(e) { this.swiperCurrent = e.detail.current; },
handlePrice(price) { //分割
let splitPrice = price.splice('.') //使用
return `${splitPrice[0]}.<span style="font-size:12px;">${splitPrice[1]}</span>` } } }</script>
<style lang="scss" scoped> .hom-pro-list { padding: 20rpx 13rpx;
.title { text-align: center; margin-bottom: 20rpx;
.title-img { width: 211rpx; } }
/**多行多列**/ .product-list { position: relative;
.product-list-box { display: flex; flex-wrap: wrap; flex-direction: row;
&.swiper { height: 415rpx; } }
.swiper-wrap{ display: flex; flex-wrap: nowrap; justify-content: space-between; padding-left: 20upx; padding-right: 20upx; }
&.product-swiper .product-list-box { padding-left: 0; }
.product-list-item-warp { margin: 0 0 0upx 0;
.product-list-item { width: 348rpx; padding: 0 7rpx; box-sizing: content-box;
.product-list-img { width: 348rpx; height: 348rpx; background-color: white; border-radius: 10rpx 10rpx 0 0;
.img { width: 100%; height: 100%; object-fit: contain; } }
.product-list-info { background-color: #FFFFFF; //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
border-radius: 0 0 10rpx 10rpx; padding: 20rpx;
label { font-weight: normal; }
.product-name { font-size: 28rpx; color: #333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 18rpx; line-height: 40rpx; }
.flex { display: flex; align-items: center; }
.shop-box { background-color: #333333; border-radius: 0rpx 20rpx 20rpx 0rpx; line-height: 40rpx; display: flex; align-items: center; height: 40rpx; margin-right: 10rpx;
.shop-name { font-size: 20rpx; color: #FFEBC4; padding: 0 8rpx 0 12rpx; }
.shop-logo { border: 2rpx solid #707070; border-radius: 50%; overflow: hidden; float: right;
img { width: 34rpx; height: 34rpx; display: block; } } }
.buy-count { color: #C5AA7B; font-size: 20rpx; border: 2rpx solid #E4E5E6; line-height: 40rpx; padding: 0 5rpx; }
.price-warp { display: flex; align-items: baseline; line-height: 56rpx;
.iconImg { width: 58rpx; height: 36rpx; margin-right: 10rpx; }
.price { color: #C83732; font-size: 40rpx; margin-right: 20rpx; }
.original-price { font-size: 24rpx; color: #ccc; text-decoration: line-through; } } }
}
.product-swiper-item { height: 320px; width: 242px !important; position: relative; margin-left: 10px; margin-right: 10px;
.product-swiper-img { width: 210px; height: 220px; margin-left: auto; margin-right: auto; background: #F6F6F8; border: 2px solid #FFFFFF; border-radius: 16px; position: relative; padding: 20px; z-index: 2; box-sizing: border-box;
.img { width: 100%; height: 100%; object-fit: contain; } }
.product-swiper-info { width: 242px; height: 210px; position: absolute; top: 110px; background: #FDFDFD; box-shadow: 0px 16px 24px 0px #F6F6F6; border-radius: 16px; text-align: center;
.product-info-content { margin-top: 125px;
.product-name-row { width: 100%; height: 22px; line-height: 22px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
.product-name { width: 100%; height: auto; font-size: 16px; font-family: Source Han Sans CN; font-weight: bold; color: #252744; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 28upx; margin-left: 24upx; text-align: left; }
.product-star { width: 22px; height: 22px; }
.product-star-text { width: auto; height: 28upx; line-height: 28upx; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #A5A5AD; margin-right: 20upx; margin-left: 5upx; } }
.product-sku-row { width: 100%; height: 28upx; line-height: 28upx; margin-top: 15upx; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
.product-sku-name { font-size: 24px; font-family: Source Han Sans CN; font-weight: 400; color: #90919C; margin-left: 30upx; } }
.product-price-row { width: 100%; height: 50upx; line-height: 50upx; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; margin-top: 10upx;
.price-warp { display: flex; align-items: center; line-height: 28upx; margin-left: 24upx; justify-content: flex-start; width: auto; flex-direction: row; flex-wrap: nowrap; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #252744; }
.product-add { width: 50px; height: 50px; margin-right: 24px; } }
} } }
.item3 { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; background: #ffffff; box-shadow: 0rpx 12rpx 24rpx 0rpx #EDEDED; border-radius: 24rpx; border: 1rpx solid #FFFFFF; width: 280rpx; height: 380rpx; margin: 10rpx 20rpx;
.item3_name { height: 90rpx; font-family: Source Han Sans CN; font-weight: 400; font-size: 24rpx; color: #252744; //text-align: center;
margin-top:20rpx; padding-left: 10rpx; padding-right: 10rpx; }
.item3_image { //margin: 15rpx;
width: 100%; //padding: 10rpx;
box-sizing:border-box;
img { width: 99.5%; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; } }
.item3_btn_row { margin-bottom: 15upx;
.item3_btn { background: #252744; border-radius: 24rpx; font-family: Microsoft YaHei; font-weight: 400; font-size: 20rpx; color: #FFFFFF; padding-left: 30upx; padding-right: 30upx; padding-top: 8upx; padding-bottom: 10upx; } } }
.item4 { width: 680upx; height: 210upx; margin: 10upx 20upx; background: #FDFDFD; box-shadow: 0upx 24upx 60upx 0upx #E5E5E5; border-radius: 16upx; position: relative;
.item4_index_image { width: 50upx; height: 50upx; position: absolute; left: 26upx; z-index: 100;
img { width: 100%; } }
.item4_content { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
.item4_image { width: 164upx; height: 164upx; background: #F6F6F7; border-radius: 8upx; margin: 24upx;
img { width: 100%; } }
.item4_info { height: 100%; padding-top: 30rpx; padding-bottom: 30rpx; flex: 1; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: flex-start; box-sizing:border-box;
.item4_name { font-family: Microsoft YaHei; font-weight: bold; font-size: 32rpx; color: #252744; }
.item4_price { font-family: Source Han Sans CN; font-weight: bold; font-size: 32rpx; color: #252744; } }
.item4_arrow { width: 21rpx; height: 36rpx; margin: 24upx;
img { width: 100%; height: 100%; } } }
} }
//::v-deep .swiper-pagination-bullet{
// display: none;
//}
} }
//::v-deep .uni-swiper-dots{
// display: flex;
// justify-content: center;
// padding: 10rpx 0;
// .uni-swiper-dot{
// width: 10rpx;
// height: 10rpx;
// background: #333333;
// opacity: 0.3;
// border-radius: 5rpx;
// margin: 0 5rpx;
// &-active{
// width: 20rpx;
// height: 10rpx;
// opacity: 1;
// }
// }
//}
.swiper-dots { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: 15rpx; z-index: 66;
.dot { width: 10rpx; height: 10rpx; background: #333333; opacity: 0.3; border-radius: 5rpx; margin: 0 10rpx; }
.dot-active { width: 20rpx; opacity: 1; } }
//.pagination{
// display: flex;
// justify-content: center;
// padding: 20rpx 0;
// ::v-deep .swiper-pagination-bullet{
// width: 10rpx;
// height: 10rpx;
// background: #333333;
// opacity: 0.3;
// border-radius: 5rpx;
// margin: 0 5rpx;
// }
// ::v-deep .swiper-pagination-bullet-active{
// width: 20rpx;
// height: 10rpx;
// opacity: 1;
// }
//}
.btn-more { width: 170rpx; height: 54rpx; line-height: 54rpx; border: 2rpx solid #C5AA7B; color: #C5AA7B; font-size: 24rpx; background-color: transparent; margin: 20rpx auto 0; display: flex; align-items: center; }</style>
|
