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.
357 lines
8.2 KiB
357 lines
8.2 KiB
<template>
|
|
<view class="goodList">
|
|
|
|
<view v-for="(item, index) in list" :key="index" class="goods">
|
|
<view class="top" @tap="jumpDetails(item)">
|
|
<image class="cover" lazy-load="true" :src="item.url" mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="bottom padding-lr-sm" >
|
|
<!-- <view v-if="item.goodsName" class="text-xs good_skuSubTitle" style="color: #009125;">
|
|
{{item.goodsName}}
|
|
</view> -->
|
|
<view class="goods_name text-df">
|
|
{{item.goodsName}}
|
|
</view>
|
|
<!-- <view v-if="item.goodsName" class="text-sm good_skuSubTitle padding-bottom-xs" style="color: #D5A94D;">
|
|
{{item.goodsName}}
|
|
</view> -->
|
|
<view>
|
|
<!-- <text class="tag1" v-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].styleText&&item.skuItem.v2Tags[0].tagType==0">
|
|
{{item.skuItem.v2Tags[0].styleText.text}}
|
|
</text>
|
|
<view class="" style="width: 82rpx; height: 30rpx;" v-else-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].image&&item.skuItem.v2Tags[0].tagType==1">
|
|
<image :src="item.skuItem.v2Tags[0].image.url" class="w-100 h-100" mode="aspectFit"></image>
|
|
</view> -->
|
|
</view>
|
|
<view class="goumai margin-top-xs flex justify-between align-center">
|
|
<view class="g_left price" v-if="hasToken">
|
|
<text v-if="item.price" class="text1 text-bold text-sm"> {{item.price}} </text>
|
|
<text style="color: #222">/{{ item.unit}}</text>
|
|
<!-- <text v-if="item.skuItem.dashPrice" class="text2 text-xs"> {{item.skuItem.dashPrice.text}}</text> -->
|
|
|
|
</view>
|
|
<view class="g_left price" v-else>
|
|
<text class="text1 text-bold text-sm">客服询价 </text>
|
|
|
|
</view>
|
|
<!-- <view class="g_right" @tap="addCart(item)">
|
|
<image src="/static/images/new/jiagou.png" style=" width: 28px;height: 28px;" mode="aspectFill"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view v-if="item.type==4" class="cboardVO padding-xs" :style="{backgroundImage:'url('+item.cboardVO.cboardBackGroundPic.url+')'}">
|
|
<view class="padding-left-sm w-100" style="height: 20%;">
|
|
<image :src="item.cboardVO.cboardNamePic.url" style="width: 75%;height:50%;" mode="aspectFit"></image>
|
|
<view class="text-white text-sm" style="height: 40%;">{{item.cboardVO.cboardDesc.text}}</view>
|
|
</view>
|
|
<view class="bg-white w-100 flex flex-direction justify-around padding-sm " style="height: 80%;border-radius: 4%;" >
|
|
<view class="flex" style="height: 30%;position: relative;" v-for="(good_item ,index) in item.cboardVO.cboardTabVO.skuItems">
|
|
<view class="h-100" style="width: 50%;">
|
|
<image :src="good_item.picUrl" style="width: 100%;" class="h-100" mode="aspectFit"></image>
|
|
<image :src="'/static/images/new/tag'+index+'.png'" class="cboardVO_tag" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="h-100 flex flex-wrap flex-direction justify-center" style="width: 50%;">
|
|
<view class="w-100 priceColor">{{good_item.sellPrice.text}}</view>
|
|
<view class="w-100 text-gray text-sm padding-top-xs">日售{{good_item.dailySales}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view> -->
|
|
|
|
</view>
|
|
<view class="place">
|
|
</view>
|
|
<view class="no-more" v-if="loading">
|
|
{{ hasMore ? '' : list.length === 0 ? '无相关数据...' : '已经到底了...' }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { setTabBarBadge } from '@/utils/util.js'
|
|
import {getCart, setCart ,resetCart, getCartNumber,setGoodsData,
|
|
setCartDetails,
|
|
setGoodsDetails,getToken} from '@/utils/auth.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
good_data:{
|
|
number: 1,
|
|
imgList:[],
|
|
selectSku:{},
|
|
sku: [],
|
|
skuArr: []
|
|
},
|
|
list: []
|
|
}
|
|
},
|
|
props:{
|
|
propsList:{
|
|
type:Array
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasMore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasToken: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
watch: {
|
|
propsList: function(newVal,oldVal){
|
|
this.list = newVal; //newVal即是chartData
|
|
}
|
|
},
|
|
methods: {
|
|
jumpDetails(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/views/goods/goodsDetails?id=' + item.id
|
|
});
|
|
},
|
|
addCart(e) {
|
|
console.log(e)
|
|
|
|
// 此处应该判断是否登录 如果没登录 跳转到登录页
|
|
if(!getToken()){
|
|
uni.navigateTo({ //登录
|
|
url:'/pages/login/index1'
|
|
})
|
|
return
|
|
}
|
|
setCartDetails(e.skuItem)
|
|
|
|
setGoodsDetails(e.skuItem)
|
|
var data = this.good_data
|
|
data.status= 0;
|
|
data.img = e.skuItem.picUrl;
|
|
data.title = e.skuItem.skuTitle.text;
|
|
data.money = parseFloat(e.skuItem.sellPrice.text.substr(1));
|
|
|
|
data.imgList.push(e.skuItem.picUrl);
|
|
data.imgList.push(e.skuItem.detailPagePic);
|
|
data.xiaoliang = e.skuItem.skuId;
|
|
data.goods_id = e.skuItem.skuId;
|
|
|
|
|
|
|
|
if(data.skuArr){
|
|
let sku = data.skuArr
|
|
|
|
for(let i=0;i<sku.length;i++){
|
|
sku[i].img = data.img
|
|
sku[i].goods_sku_text = data.title+"测试规格"+i;
|
|
sku[i].money = data.money
|
|
|
|
}
|
|
|
|
}
|
|
if(data.sku){
|
|
let sku = data.sku[0].child
|
|
|
|
for(let i=0;i<sku.length;i++){
|
|
sku[i].imgs = data.img
|
|
sku[i].tagname = data.title+"测试规格"+i;
|
|
sku[i].money = data.money
|
|
|
|
}
|
|
|
|
}
|
|
data.selectSku.goods_sku_text = data.skuArr[0].goods_sku_text
|
|
data.selectSku.img = data.skuArr[0].img
|
|
data.selectSku.money = data.skuArr[0].money
|
|
|
|
|
|
let colCart = getCart();
|
|
if(colCart.length){
|
|
const hasItem = colCart.some(v => v.goods_id === data.goods_id)
|
|
if (!hasItem) {
|
|
colCart.push(data)
|
|
} else {
|
|
for(let y = 0;y < colCart.length; y++){
|
|
const item = colCart[y]
|
|
if (data.goods_id === item.goods_id) {
|
|
item.number ++
|
|
break
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
colCart = [data]
|
|
}
|
|
resetCart(colCart)
|
|
/**
|
|
* 模拟获取购物车的数量 getCart
|
|
*/
|
|
// let cartNum = getCart()
|
|
setTabBarBadge(colCart.length)
|
|
|
|
|
|
// 存储商品数据
|
|
uni.showToast({
|
|
title: '加入购物车成功 !',
|
|
icon: 'none'
|
|
});
|
|
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.good_skuSubTitle {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.goodList {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
padding-bottom: 40upx;
|
|
column-count: 2;
|
|
/*分为两列 用于瀑布流*/
|
|
column-gap: 20rpx;
|
|
|
|
background: #F8F8F8;
|
|
overflow: hidden;
|
|
}
|
|
.no-more {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
// padding: 40upx;
|
|
font-size: 28upx;
|
|
color: #000;
|
|
padding: 10upx;
|
|
}
|
|
.tag1 {
|
|
font-size: 20rpx;
|
|
border: 1px solid #FF5560;
|
|
color: #FF5560;
|
|
border-radius: 15%;
|
|
padding: 0 4rpx;
|
|
}
|
|
.cboardVO{
|
|
height: 65vw;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.cboardVO_tag{
|
|
width: 50rpx;height: 50rpx;position: absolute;
|
|
left: 0;top: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.top .cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top .tags {
|
|
width: 65upx;
|
|
height: 65upx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bottom {
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods_name {
|
|
/* height: 66upx; */
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
font-weight: bold;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
|
|
.bottom .price .text1 {
|
|
font-size: 36upx;
|
|
font-weight: bold;
|
|
color: $mycolor;
|
|
}
|
|
|
|
.bottom .price .text2 {
|
|
font-size: 22upx;
|
|
color: #a0a0a0;
|
|
text-decoration: line-through;
|
|
padding-left: 15upx;
|
|
}
|
|
|
|
.g_left {
|
|
font-size: 24upx;
|
|
align-items: center;
|
|
}
|
|
|
|
.g_left text {
|
|
display: inline-block;
|
|
height: 35upx;
|
|
line-height: 35upx;
|
|
border-radius: 10upx;
|
|
color: $mycolor;
|
|
}
|
|
|
|
.g_right {
|
|
font-size: 28upx;
|
|
color: $mycolor;
|
|
}
|
|
</style>
|