78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<template>
|
|
<view class="flex">
|
|
<view class="m-t-24 rad8 ofh" style="width:192rpx;height: 144rpx;">
|
|
<u--image :src="cart.photo" width="192rpx" height="144rpx"></u--image>
|
|
</view>
|
|
<view class="flex1 flex column p-24">
|
|
<view class="fz28 m-b-24">{{cart.spu_name}}</view>
|
|
<view v-for="(item,index) in cart.sku_nameG" :key="index" v-if="cart.sku_nameG.length>1"
|
|
class="fz24 fcb l-h-12">1 X {{item}}</view>
|
|
<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{cart | calculateTotal}}</view>
|
|
</view>
|
|
<view class="flex md">
|
|
<u-number-box disabledInput="false" :integer="true" v-model="cart.countG[0]" @change="valChange"
|
|
@overlimit="subZero"></u-number-box>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
calculateTotal
|
|
} from '@/utils/index.js'
|
|
|
|
export default {
|
|
name: "cart",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
deep: true
|
|
}
|
|
},
|
|
computed: {
|
|
cart() {
|
|
let cart = this.$store.state.cartList[this.index]
|
|
const spu = this.$store.state.spuList.find(item => item.id === cart.spu_id)
|
|
cart.spu_name = spu.name //添加spu名字
|
|
cart.photo = spu.photo[0] //添加spu照片
|
|
let skuNG = []
|
|
cart.skuG.forEach(item => {
|
|
let sku = this.$store.state.skuList.find(i => i.id === item.toString())
|
|
skuNG.push(sku.name)
|
|
})
|
|
cart.sku_nameG = skuNG
|
|
return cart
|
|
}
|
|
},
|
|
methods: {
|
|
//计数器只改了购物车列表项 第一个商品的数量 此函数将所有商品数量同步
|
|
valChange(e) {
|
|
let countG = this.$store.state.cartList[this.index].countG
|
|
if (countG.length != 1) {
|
|
for (let i = 1; i < countG.length; i++) {
|
|
countG[i] = e.value
|
|
}
|
|
}
|
|
},
|
|
//计数器 减号 到1时候 再次执行 从购物车清除
|
|
subZero() {
|
|
this.$store.state.cartList.splice(this.index, 1);
|
|
}
|
|
},
|
|
onReady() {
|
|
// console.log(this.cart)
|
|
},
|
|
filters: {
|
|
calculateTotal, //计算spu单价
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |