<template>
<!--
@descirption购物车商品组件
@statrTiem 2022/10/19
-->
<view :id="'ids' + ids ">
<view class="yh-cart-row">
<!-- 商品列表 S -->
<view class="packs">
<!-- 头部的 店铺名 -->
<view class="carrier">
<view class="shop">
<view class="left">
<image class="select" :src="shopItem.is_selected == 0 ? selectDefault :selectPitchOn "
mode="widthFix" @click="handelChangeState(shopItem.is_selected,shopItem.shop_id)"></image>
<!-- <image v-if="!item.isShop" class="select" :src="selectDefault" mode="widthFix"></image> -->
<!-- <u-checkbox shape="circle" v-model="checkAll" @change="handelChangeState"></u-checkbox> -->
<view class="shop-name">
<view class="name">
{{shopItem.shop_name}}
</view>
</view>
</view>
</view>
<!-- 商品的名称 -->
<view class="goods" v-for="(item, index) in shopItem.list" :key="index" >
<!-- 这里是选择的 radio -->
<view class="left">
<image class="select" :src="item.is_selected == 0 ? selectDefault : selectPitchOn"
mode="widthFix" @click="handelChilrenChangeState(item.id,item.is_selected)"></image>
</view>
<view class="right">
<image class="goods-image"
:src="item.image || 'https://img0.baidu.com/it/u=3156137851,1307209439&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'">
</image>
<view class="goods-info">
<view class="goods-name">
{{item.goods_title}}
</view>
<view class="specification">
<view class="right_msg">
<!-- <view class="right_title">
{{item.title}}
</view> -->
<view class="hotspc">
<view class="hotwidth">
<view class="minus">
减
</view>
<view class="down">
满39元减5元
</view>
</view>
<view class="hot">
<image style="width: 24rpx;
height: 28rpx;" src="../../static/image/shop/hotmsg.png" mode=""></image>
<view class="down">
直降10.0
</view>
</view>
</view>
<view class="price">
<view class="price_left">
<text>¥</text>
<text>{{item.price * item.num}}</text>
</view>
<view class="price_right">
<view class="amount">
<view class="num-minus" @click="addRedState = -1;handerClickSetShopNum(item.id)">
-
</view>
<view class="input-price">
{{item.num}}
</view>
<view class="num-add" @click = "addRedState = 1;handerClickSetShopNum(item.id)">
+
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
let i = 0
export default {
name: "cartShopList",
props: {
/**
* 接收传递数组
* 以 item 为例
* */
shopItem: {
type: Object,
default: []
},
shopTitle: {
type: String,
default: '测试'
},
shop_id: {
type: Number | String
},
checkStateAll: {
type: Number | String
}
},
data() {
return {
ids: '',
selectDefault: '../../../static/image/shop/radio1.png', //this.$mAssetsPath.iconDefault, // 默认图标
selectPitchOn: '../../../static/image/shop/radio2.png',
addRedState:0
};
},
watch: {
/**
*
* @description 给商品添加选中默认状态
* */
// shopItem: {
// handler(newVal) {
// newVal.forEach(item => item.flag = false)
// console.log(this.shopItem, 'aaa')
// console.log(newVal);
// this.shopList = newVal
// },
// deep: true
// }
},
methods: {
// 全选派发事件
async handelChangeState(state,id) {
console.log(state+'状态',id+'id');
this.$emit('handelChangeState',{state,id})
},
/**
* @description 子的反选派发事件
* */
handelChilrenChangeState(id,state) {
this.$emit('handelChilrenChangeState',{id,state})
},
/**
* @desctrption 增加 减少派发事件
*
* */
handerClickSetShopNum(id){
this.$emit('handerClickSetShopNum',{id,state:this.addRedState})
}
},
created() {
i++
this.ids = i
}
}
</script>
<style lang="scss" scoped>
.yh-cart-row {
// .carrier:last-child {
// border-bottom: none;
// }
.packs {
background-color: #FFFFFF;
border-radius: 14rpx;
margin: 0 20rpx;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
.carrier {
.shop {
display: flex;
align-items: center;
padding: 23rpx 0;
margin: 0 20rpx;
border-bottom: 1rpx solid #e6e6e6;
.left {
display: flex;
align-items: center;
.select {
width: 44rpx;
height: 44rpx;
margin-right: 39rpx;
}
.shop-name {
display: flex;
align-items: center;
.icon-shop {
width: 42rpx;
margin-right: 10rpx;
}
.name {
font-size: 30rpx;
font-weight: 600;
}
}
}
.right {
width: 30rpx;
margin-left: 10rpx;
}
}
.goods {
display: flex;
align-items: center;
// position: relative;
margin: 0 20rpx;
margin-top: 30rpx;
.left {
.select {
width: 44rpx;
height: 44rpx;
margin-right: 36rpx;
}
}
.right {
display: flex;
align-items: center;
z-index: 2;
.goods-image {
width: 120rpx;
height: 120rpx;
border-radius: 14rpx;
margin-right: 20rpx;
}
.goods-info {
width: 450rpx;
.goods-name {
width: 400rpx;
font-size: 28rpx;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.specification {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 13rpx;
.right_msg {
flex: 1;
.right_title {
font-size: 28rpx;
color: #000000;
}
.hotspc {
display: flex;
align-items: center;
.hotwidth {
display: flex;
align-items: center;
// width: 150rpx;
// height: 28rpx;
border: 1rpx solid #e93853;
border-radius: 4rpx;
line-height: 28rpx;
text-align: center;
.minus {
width: 24rpx;
height: 28rpx;
background: #e93853;
text-align: center;
line-height: 28rpx;
font-size: 20rpx;
color: #ffffff;
}
.down {
font-size: 20rpx;
color: #e93853;
margin-left: 6rpx;
}
}
.hot {
margin-left: 10rpx;
margin-right: 10rpx;
display: flex;
align-items: center;
// width: 121rpx;
// height: 28rpx;
border: 1rpx solid #e93853;
border-radius: 6rpx;
line-height: 28rpx;
text-align: center;
.down {
font-size: 20rpx;
color: #e93853;
margin-left: 10rpx;
}
}
}
.price {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12rpx;
.price_left {
text:nth-child(1) {
font-size: 22rpx;
color: #e93853;
}
text:nth-child(2) {
font-size: 35rpx;
color: #e93853;
font-weight: 600;
}
}
.price_right {
.amount {
display: flex;
align-items: center;
height: 40rpx;
// border: 1rpx solid skyblue;
.num-minus,
.num-add {
width: 40rpx;
text-align: center;
}
.num-minus {
height: 40rpx;
border-right: 1rpx solid #F5F5F5;
background-color: #F5F5F5;
}
.num-add {
height: 40rpx;
background-color: #F5F5F5;
border-left: 1rpx solid #F5F5F5;
}
.input-price {
width: 60rpx;
text-align: center;
}
}
}
}
}
// .specification-image {
// width: 25rpx;
// margin-left: 10rpx;
// }
}
}
}
}
.carrier-title {
display: flex;
justify-content: space-between;
padding: 20rpx 30rpx 30rpx;
.goods-lose-efficacy-num {
font-size: green;
font-weight: 600;
}
.goods-lose-efficacy-operation {
font-size: 12rpx;
padding-top: 4rpx;
color: blue;
}
}
}
}
}
</style>
当多个组件渲染数据冲突解决方法
最新推荐文章于 2024-08-11 18:40:36 发布