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.
476 lines
11 KiB
476 lines
11 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>
|
|
<!-- class padding-lr-sm -->
|
|
<view class="bottom " >
|
|
<!-- <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="item.price">
|
|
<text 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-if="!item.price">
|
|
<text class="text1 text-bold text-sm">客服询价 </text>
|
|
|
|
</view>
|
|
<view class="g_right" v-if="item.price" @tap="setCart(item)">
|
|
<image src="/static/images/new/jiagou.png" style=" width: 24px;height: 24px;" 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 class="mask-box" v-show="showMask">
|
|
<image class="close-btn" @tap="showMask = false" src="../../../static/images/search/close.png" mode=""></image>
|
|
<view class="btn-box">
|
|
<view class="right_btn">
|
|
<view class="sub" @tap="onChangeNum('sub')" :style="'color:' + (num == 1?'#ccc':'')">-</view>
|
|
<view class="input">
|
|
<input
|
|
@blur="handlerChangeNum('blur')"
|
|
@input="handlerChangeNum('input')"
|
|
v-model="num"
|
|
type="number"
|
|
max="99999"></input>
|
|
</view>
|
|
<view class="add" @tap="onChangeNum('add')" >+</view>
|
|
</view>
|
|
<view class="submit-btn" @tap="addCart">确定</view>
|
|
</view>
|
|
</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: [],
|
|
showMask: false,
|
|
goodsItem: {},
|
|
num: 1,
|
|
stock: 99999
|
|
}
|
|
},
|
|
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: {
|
|
handlerChangeNum(type = 'input') {
|
|
const total = Math.floor(Number(this.num))
|
|
const number = total < 1 ? 1 : total > this.stock ? this.stock : total
|
|
if (type === 'blur') {
|
|
if (!number) {
|
|
this.num = 1
|
|
}
|
|
}
|
|
},
|
|
onChangeNum(type = 'add') {
|
|
const item = this.goodsItem
|
|
if (item.status == 1) { //已失效商品不做操作
|
|
return
|
|
}
|
|
const total = Math.floor(Number(this.num))
|
|
let num = total < 1 ? 1 : total > this.stock ? this.stock : total
|
|
if (type === 'add') {
|
|
//增加
|
|
if (num >= this.stock) {
|
|
this.num = this.stock
|
|
return
|
|
}
|
|
this.num = String(num + 1)
|
|
} else {
|
|
if (num <= 1) {
|
|
return
|
|
}
|
|
this.num = String(num - 1)
|
|
}
|
|
},
|
|
jumpDetails(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/views/goods/goodsDetails?id=' + item.id
|
|
});
|
|
},
|
|
setCart(item) {
|
|
if(!getToken()){
|
|
uni.navigateTo({ //登录
|
|
url:'/pages/login/index1'
|
|
})
|
|
return
|
|
}
|
|
if (!item.ifSale) {
|
|
this.$toast('该商品已下架')
|
|
return
|
|
}
|
|
this.num = '1'
|
|
this.goodsItem = item
|
|
this.showMask = true
|
|
},
|
|
addCart() {
|
|
const number = Math.abs(Number(this.num))
|
|
if (number >= this.stock ) {
|
|
this.num = this.stock
|
|
}
|
|
if (number < 1) {
|
|
this.num = 1
|
|
}
|
|
const item = this.goodsItem
|
|
const cartList = getCart()
|
|
item.imgList = (item.url && item.url.split(',')) ||[]
|
|
item.number = number
|
|
item._selectedSku = [{
|
|
id: item.id,
|
|
imgs: '',
|
|
money: item.price,
|
|
number: number,
|
|
tagname: item.goodsName
|
|
}]
|
|
item._skus = [
|
|
{
|
|
sku_id: item.id,
|
|
skuname: '规格',
|
|
child: [
|
|
{
|
|
id: 1,
|
|
imgs: '',
|
|
money: item.price,
|
|
number: number,
|
|
tagname: item.goodsName
|
|
}
|
|
]
|
|
}
|
|
]
|
|
let hasItem = false
|
|
const cartHasGoodsList = cartList.map(v => {
|
|
if (v.id === (item.id +'')) {
|
|
const number1 = v.number + number
|
|
hasItem = true
|
|
v.number = number1 >= this.stock ? this.stock : number1
|
|
}
|
|
return v
|
|
})
|
|
if (!hasItem) {
|
|
cartHasGoodsList.push(item)
|
|
}
|
|
resetCart(cartHasGoodsList)
|
|
setTabBarBadge(cartHasGoodsList.length)
|
|
this.$toast('加入购物车成功')
|
|
this.showMask = false
|
|
this.num = '1'
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mask-box {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
background-color: rgba(0,0,0, 0.5);
|
|
.close-btn {
|
|
position: absolute;
|
|
right: 20upx;
|
|
top: 20upx;
|
|
width: 50upx;
|
|
height: 50upx;
|
|
}
|
|
.submit-btn {
|
|
margin-top: 40upx;
|
|
width: 280upx;
|
|
height: 70upx;
|
|
line-height: 70upx;
|
|
text-align: center;
|
|
background: #ddd;
|
|
border-radius: 10upx;
|
|
}
|
|
.btn-box {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.right_btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
.right_btn .sub, .right_btn .add {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
font-size: 56rpx;
|
|
background-color: #f3f3f3;
|
|
border-radius: 4rpx;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
}
|
|
|
|
.right_btn .sub:active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.right_btn .input {
|
|
width: 160upx;
|
|
height: 80upx;
|
|
margin: 0 8rpx;
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.right_btn .input input {
|
|
width: 100%;
|
|
height: 80upx;
|
|
text-align: center;
|
|
// display: flex;
|
|
// font-size: 22rpx;
|
|
// text-align: center;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
color: $mycolor;
|
|
}
|
|
|
|
// .right_btn .add {
|
|
// width: 40rpx;
|
|
// height: 40rpx;
|
|
// font-size: 40rpx;
|
|
// background-color: #f3f3f3;
|
|
// border-radius: 4rpx;
|
|
// text-align: center;
|
|
// line-height: 40rpx;
|
|
// }
|
|
|
|
.right_btn .add:active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
}
|
|
.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>
|