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.
503 lines
9.6 KiB
503 lines
9.6 KiB
<template>
|
|
<view style="background: #F8F8F8;overflow: hidden;">
|
|
<!-- 宫格类样式 -->
|
|
<view class="recommend_goods" v-if="modes == true">
|
|
<view v-for="(item, index) in newList" :key="index" class="goods">
|
|
<view class="top" @tap="jumpDetails(item)" >
|
|
<image class="cover" lazy-load="true" :src="item.img" mode="scaleToFill"></image>
|
|
<image class="tags" lazy-load="true" v-if="item.baoyou" :src="tagImg[0]"></image>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="goods_name" @tap="jumpDetails(item)">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="price">
|
|
<text class="text1">￥ {{item.money}}</text>
|
|
<text class="text2">￥ {{item.hmoney}}</text>
|
|
</view>
|
|
<view class="goumai">
|
|
<view class="g_left">
|
|
<text v-if="item.youhui == true" >优惠券</text>
|
|
<text v-if="item.baoyou == true" >包邮</text>
|
|
</view>
|
|
<view class="g_right" @tap="addCart(item)">
|
|
<text class="iconfont icon-gouwuche"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="place">
|
|
</view>
|
|
</view>
|
|
<!-- 列表类样式 -->
|
|
<view class="list_mode" v-if="modes == false">
|
|
<view class="goods_list" v-if="newList.length !== 0">
|
|
<view v-for="(item, index) in newList" :key="index" class="goods_item">
|
|
<image :src="item.img" lazy-load="true" @tap="jumpDetails(item)"></image>
|
|
<!-- 商品标签 -->
|
|
<image class="tags" :src="tagImg[item.type-1]"></image>
|
|
<view class="goods_right">
|
|
<view class="goods_name" @tap="jumpDetails(item)">{{item.title}}</view>
|
|
<view class="numbers">
|
|
<text v-if="item.youhui == true" >优惠券</text>
|
|
<text v-if="item.baoyou == true" >包邮</text>
|
|
</view>
|
|
<view class="price">
|
|
<text class="money">￥{{item.money}}</text>
|
|
<text class="hx_money">￥{{item.hmoney}}</text>
|
|
<text class="iconfont icon-gouwuche gouwuche" @tap="addCart(item)"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<nodata :colors="colors" title="暂无分类商品" v-if="newList.length == 0"></nodata>
|
|
<view class="loading" v-if="loading == true">加载中...</view>
|
|
<view class="loading" v-if="loading == false">—— 到底啦 ——</view>
|
|
<!-- 选择规格 -->
|
|
<sku :skuList="nowList" :showModal="showModal" :colors="colors" @onhide="onhide" :bottoms="bottoms"></sku>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
import {setCart, getCart} from '@/utils/auth.js'
|
|
import sku from '../public/sku.vue'
|
|
export default {
|
|
components:{
|
|
sku
|
|
},
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
nowList: {},
|
|
newList: [],
|
|
sku: "",
|
|
tagImg:[
|
|
'/static/images/home/five.png',
|
|
],
|
|
};
|
|
},
|
|
props: {
|
|
colors: {
|
|
type: String
|
|
},
|
|
dataList: {
|
|
type: Array
|
|
},
|
|
modes: {
|
|
//控制显示宫格类样式或者列表类样式
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
loading:{
|
|
type:Boolean,
|
|
default: true
|
|
},
|
|
bottoms:{
|
|
type:String,
|
|
default: '0'
|
|
}
|
|
},
|
|
created() {
|
|
this.setDataList(this.dataList)
|
|
},
|
|
watch:{
|
|
dataList(value){
|
|
this.setDataList(value)
|
|
}
|
|
},
|
|
methods: {
|
|
setDataList(newVal){
|
|
const newList = [].concat(...Array.from(newVal.reduce((total, cur, index) => { //瀑布流处理
|
|
total[index % 2].push(cur);
|
|
return total;
|
|
}, {
|
|
0: [],
|
|
1: [],
|
|
length: 2
|
|
})));
|
|
this.setData({
|
|
newList: newList
|
|
});
|
|
},
|
|
onhide(){
|
|
this.showModal = false
|
|
},
|
|
addCart(item) {
|
|
//加入购物车弹出对话框
|
|
console.log('点击了',item)
|
|
this.showModal = true
|
|
this.nowList = item
|
|
},
|
|
jumpDetails(e) {
|
|
uni.navigateTo({
|
|
url: '/pages/views/goods/goodsDetails'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
.recommend_goods {
|
|
padding: 20upx;
|
|
column-count: 2; /*分为两列 用于瀑布流*/
|
|
column-gap: 20upx;
|
|
}
|
|
.loading{
|
|
height: 80upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
color: #ccc;
|
|
font-size: 24upx;
|
|
width: 100%;
|
|
margin-bottom: 20upx;
|
|
}
|
|
.goods {
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin-bottom: 20upx;
|
|
break-inside: avoid; /*用于瀑布流*/
|
|
border-radius: 10upx;
|
|
box-sizing: content-box;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
.goods .top {
|
|
height: 45vw;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.top .cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top .tags {
|
|
width: 65upx;
|
|
height: 65upx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bottom {
|
|
padding: 15upx;
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods_name {
|
|
/* height: 66upx; */
|
|
font-size: 24upx;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
font-weight: bold;
|
|
}
|
|
.bottom .price{
|
|
margin-top: 15upx;
|
|
}
|
|
.bottom .price .text1{
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
color: $mycolor;
|
|
}
|
|
.bottom .price .text2{
|
|
font-size: 22upx;
|
|
color: #a0a0a0;
|
|
text-decoration: line-through;
|
|
padding-left: 15upx;
|
|
}
|
|
.goumai{
|
|
margin-top: 10upx;
|
|
}
|
|
.g_left{
|
|
font-size: 24upx;
|
|
float: left;
|
|
align-items: center;
|
|
}
|
|
.g_left text{
|
|
display: inline-block;
|
|
height: 35upx;
|
|
line-height: 35upx;
|
|
padding: 0 10upx;
|
|
background-color: #FAEFF7;
|
|
border-radius: 10upx;
|
|
margin-right: 20upx;
|
|
color: $mycolor;
|
|
}
|
|
.g_right{
|
|
float: right;
|
|
font-size: 28upx;
|
|
color: $mycolor;
|
|
}
|
|
.mask{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: #000;
|
|
z-index: 900;
|
|
opacity: 0.7;
|
|
}
|
|
.sku{
|
|
width: 100vw;
|
|
min-height: 30vh;
|
|
position: fixed;
|
|
bottom: -100%;
|
|
z-index: 910;
|
|
left: 0;
|
|
background-color: #ffffff;
|
|
padding: 20upx 4%;
|
|
border-top-left-radius: 10upx;
|
|
border-top-right-radius: 10upx;
|
|
border-bottom: 1upx solid #eee;
|
|
transition: all 0.3s;
|
|
}
|
|
.shows{
|
|
/* #ifdef MP */
|
|
bottom: 0!important;
|
|
/* #endif */
|
|
/* #ifdef H5 */
|
|
bottom: 100upx!important;
|
|
/* #endif */
|
|
transition: all 0.3s;
|
|
}
|
|
.sku_top{
|
|
overflow: hidden;
|
|
}
|
|
.sku_top image{
|
|
height: 170upx;
|
|
width: 170upx;
|
|
float: left;
|
|
margin-right: 15upx;
|
|
border-radius: 8upx;
|
|
}
|
|
.sku_top .sku_title{
|
|
font-size: 24upx;
|
|
line-height: 35upx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
font-weight: bold;
|
|
}
|
|
.sku_top .moneys{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
overflow: hidden;
|
|
margin-top: 20upx;
|
|
}
|
|
.sku_top .kucun{
|
|
font-size: 24upx;
|
|
color: #999;
|
|
overflow: hidden;
|
|
}
|
|
.sku_list{
|
|
margin-top: 20upx;
|
|
overflow: hidden;
|
|
margin-bottom: 40upx;
|
|
}
|
|
.sku_name{
|
|
font-size: 24upx;
|
|
color: #666;
|
|
overflow: hidden;
|
|
}
|
|
.sku_tag{
|
|
overflow: hidden;
|
|
margin-top: 20upx;
|
|
}
|
|
.sku_tag .tag_s{
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
padding: 0 20upx;
|
|
text-align: center;
|
|
font-size: 22upx;
|
|
color: #333;
|
|
background-color: #F5F5F5;
|
|
border: 1upx solid rgba(0, 0, 0, .05);
|
|
float: left;
|
|
border-radius: 30upx;
|
|
margin-right: 20upx;
|
|
transition: all 0.2s;
|
|
margin-bottom: 20upx;
|
|
}
|
|
.number{
|
|
margin-top: 10upx;
|
|
border-top: 1upx solid #ccc;
|
|
width: 100%;
|
|
height: 80upx;
|
|
line-height: 80upx;
|
|
padding-top: 10upx;
|
|
}
|
|
.number .n_left{
|
|
float: left;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
.number .n_right{
|
|
float: right;
|
|
height: 60upx;
|
|
width: 200upx;
|
|
background-color: #F5F5F5;
|
|
margin-top: 10upx;
|
|
border-radius: 5upx;
|
|
}
|
|
.n_right .jian,.jia{
|
|
width: 60upx;
|
|
height: 60upx;
|
|
text-align: center;
|
|
line-height: 60upx;
|
|
font-size: 42upx;
|
|
}
|
|
.jian{
|
|
float: left;
|
|
}
|
|
.jia{
|
|
float: right;
|
|
}
|
|
.jian:active{
|
|
background-color: #eee;
|
|
}
|
|
.jia:active{
|
|
background-color: #eee;
|
|
}
|
|
.n_right input{
|
|
width: 76upx;
|
|
float: left;
|
|
text-align: center;
|
|
margin-top: 6upx;
|
|
}
|
|
.btn_box{
|
|
margin-top: 40upx;
|
|
}
|
|
.btn_box .addcart_btn, .submit{
|
|
width: 40vw;
|
|
height: 56upx;
|
|
line-height: 56upx;
|
|
border-radius: 42upx;
|
|
font-size: 24upx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
float: left;
|
|
margin-left: 30upx;
|
|
margin-bottom: 30upx;
|
|
}
|
|
.btn_box view:active{
|
|
opacity: 0.8;
|
|
}
|
|
/* 列表类样式 */
|
|
.list_mode{
|
|
padding: 20upx 4% 0upx;
|
|
z-index: 10;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.goods_list {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods_list .goods_item {
|
|
align-items: center;
|
|
border-bottom: 1upx solid #eee;
|
|
padding-bottom: 10upx;
|
|
margin-bottom: 15upx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&:last-of-type{
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.goods_item image {
|
|
width: 200upx;
|
|
height: 200upx;
|
|
float: left;
|
|
border-radius: 10upx;
|
|
margin-right: 5upx;
|
|
}
|
|
.goods_item .tags{
|
|
width: 60upx;
|
|
height: 60upx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.goods_right {
|
|
/* float: left; */
|
|
padding: 0 10upx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods_right .goods_name {
|
|
font-size: 28upx;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
color: #333;
|
|
min-height: 50upx;
|
|
}
|
|
.goods_right .numbers{
|
|
font-size: 20upx;
|
|
line-height: 30upx;
|
|
overflow: hidden;
|
|
margin-top: 30upx;
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
.goods_right .numbers text{
|
|
display: inline-block;
|
|
height: 35upx;
|
|
line-height: 35upx;
|
|
padding: 0 10upx;
|
|
background-color: #FAEFF7;
|
|
border-radius: 10upx;
|
|
margin-right: 20upx;
|
|
color: $mycolor;
|
|
}
|
|
.goods_right .price{
|
|
line-height: 40upx;
|
|
font-size: 24upx;
|
|
overflow: hidden;
|
|
margin-top: 20upx;
|
|
}
|
|
.price .money{
|
|
margin-right: 20upx;
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
color: $mycolor;
|
|
}
|
|
.hx_money{
|
|
text-decoration: line-through;
|
|
color: #999;
|
|
font-size: 22upx;
|
|
}
|
|
.gouwuche{
|
|
font-size: 32upx;
|
|
float: right;
|
|
margin-right: 20upx;
|
|
color: $mycolor;
|
|
}
|
|
.nodata{
|
|
color: #999;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
margin-top: 20upx;
|
|
height: 80upx;
|
|
line-height: 80upx;
|
|
}
|
|
</style> |