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>
|