110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
||
<view class="itemBox flex1 m-b-24 rad16 border flex ofh bg-w">
|
||
<u--image :src="spu.photo[0]" radius="8rpx" width="288rpx" height="216rpx"></u--image>
|
||
<view class="flex1 flex column md msb p-r-24 p-t-24">
|
||
<view class="flex1 flex column md">
|
||
<view class="fz28" style="height: 36rpx;line-height: 36rpx;">{{spu.name}}</view>
|
||
<view class="fz28 fcm flex mac" style="height: 36rpx;line-height: 36rpx;">¥{{spu.minPrice}}<text
|
||
class="fz24" v-if="!isPlus">起</text></view>
|
||
</view>
|
||
<view class="flex msb" v-if="isPlus">
|
||
<view v-if="spuCount > 0" class="tc bg-g radLT8 radRT8 fz28" style="width:40rpx;line-height: 48rpx;"
|
||
@click="handleSub">
|
||
-
|
||
</view>
|
||
<view v-if="spuCount > 0" class="tc fz28 p-l-12 p-r-12" style="line-height: 48rpx;">
|
||
{{spuCount}}
|
||
</view>
|
||
<view class="tc bg-m radLT8 radRT8 fci fz28" style="width:40rpx;line-height: 48rpx;" @click="handleAdd">
|
||
+
|
||
</view>
|
||
</view>
|
||
<navigator v-else :url="'/pages/shop/content?spu_id='+spu.id" hover-class="navigator-hover">
|
||
<view class="bg-m radLT8 radRT8 fci fz28 p-l-12 p-r-12" style="line-height: 48rpx;">
|
||
选规格
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "listItem",
|
||
data() {
|
||
return {}
|
||
},
|
||
props: {
|
||
spu: {
|
||
type: Object,
|
||
deep: true
|
||
}
|
||
},
|
||
computed: {
|
||
//判断否是 是单sku
|
||
isPlus() {
|
||
if (this.spu.bind_sku.length === 1 && this.spu.bind_sku[0].value.length === 1) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
//购物车列表
|
||
cartList() {
|
||
return this.$store.state.cartList
|
||
},
|
||
//spu计数器
|
||
spuCount() {
|
||
let count = 0
|
||
this.cartList.forEach(item => {
|
||
if (Number(item.spu_id) === Number(this.spu.id)) {
|
||
count += item.countG[0]
|
||
}
|
||
})
|
||
return count
|
||
}
|
||
},
|
||
onReady() {
|
||
// console.log(this.spu)
|
||
},
|
||
methods: {
|
||
// 仅用于 单品spu 减少
|
||
handleSub() {
|
||
this.cartList.forEach((item, index) => {
|
||
if (Number(item.spu_id) === Number(this.spu.id)) {
|
||
if (item.countG[0] === 1) {
|
||
// 如果数量为1，则从购物车中删除该项
|
||
this.$store.state.cartList.splice(index, 1)
|
||
} else {
|
||
// 否则，减少数量
|
||
this.$set(item.countG, 0, item.countG[0] - 1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 仅用于 单品spu 增加
|
||
handleAdd() {
|
||
let existingItem = this.cartList.find(item => Number(item.spu_id) === Number(this.spu.id))
|
||
|
||
if (existingItem) {
|
||
// 如果购物车已经存在相同的SPU，则增加数量
|
||
this.$set(existingItem.countG, 0, existingItem.countG[0] + 1)
|
||
} else {
|
||
// 如果购物车未添加过相同的SPU，则将其添加到购物车中
|
||
this.$store.state.cartList.push({
|
||
"spu_id": this.spu.id,
|
||
"skuG": this.spu.bind_sku[0].value,
|
||
"countG": [1],
|
||
"priceG": [this.spu.minPrice]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.itemBox {
|
||
height: 216rpx;
|
||
}
|
||
</style> |