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.
124 lines
3.6 KiB
124 lines
3.6 KiB
<template>
|
|
<view class="mall_cart_product_cn padding-lr-20">
|
|
|
|
<!-- 有效商品 -->
|
|
<view class="padding-bottom-20 radius-20 bg-ff" v-if="cartEffective.length">
|
|
<slot></slot>
|
|
|
|
<view class="cart_effective_list">
|
|
<view class="cart_effective_item margin-top-60 flex align-center" v-for="(item,index) in cartEffective"
|
|
:key="index" @click="go('/pages/mall/detail?id='+item.product_id)">
|
|
<view class="operate text-center" @click.stop="choose(index)">
|
|
<text
|
|
:class="item.is_select == 0 ? 'tyIcon-quan text-34 text-cc' : 'tyIcon-xuanzhong1 text-40 text-main'"></text>
|
|
</view>
|
|
<view class="flex-one flex align-center">
|
|
<image class="jc-image-180 radius-10" :src="item.product_cover_img" mode="aspectFill">
|
|
</image>
|
|
<view class="margin-left-30 padding-right-20 flex-one">
|
|
<view class="line-height-35 text-26 text-cut-one">{{item.product_name}}</view>
|
|
<view class="margin-top-20 line-30 height-60 text-22 text-4d text-cut-two">
|
|
{{item.product_sku_name}}
|
|
</view>
|
|
<view class="margin-top-15 flex align-center justify-between">
|
|
<text class="text-price text-32 text-bold text-main">{{item.product_price}}</text>
|
|
<ty-text-stepper :value="item.number" :max="item.product_stock" :async-change="async"
|
|
:identifier="index" input-width="70" button-size="50" @change="change">
|
|
</ty-text-stepper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 失效商品 -->
|
|
<view class="margin-top-20 padding-bottom-20 radius-20 bg-ff" v-if="cartInvalid.length">
|
|
<view class="line-height-80 padding-right-20 flex align-center justify-between"
|
|
style="padding-left: 80rpx;">
|
|
<view class="text-24">失效宝贝{{cartInvalid.length}}件</view>
|
|
<view class="text-24 text-main" @click="clear">清空失效宝贝</view>
|
|
</view>
|
|
<view class="cart_invalid_list">
|
|
<view class="cart_invalid_item margin-top-60 flex align-center" v-for="(item,index) in cartInvalid"
|
|
:key="index">
|
|
<view class="operate text-center" @click.stop="selectGood(index)">
|
|
<ty-text-label text="失效" bg-color="#cbcbcb" radius="15"></ty-text-label>
|
|
</view>
|
|
<view class="flex-one flex align-center">
|
|
<image class="jc-image-180 radius-10" :src="item.product_cover_img" mode="aspectFill">
|
|
</image>
|
|
<view class="margin-left-30 padding-right-20 flex-one">
|
|
<view class="line-height-35 text-26 text-cut-one">{{item.product_name}}</view>
|
|
<view class="margin-top-20 line-30 height-60 text-22 text-4d text-cut-two">
|
|
{{item.product_sku_name}}
|
|
</view>
|
|
<view class="margin-top-15 flex align-center justify-between">
|
|
<text class="text-price text-32 text-bold text-main">{{item.product_price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
cartEffective: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
cartInvalid: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
async: true
|
|
}
|
|
},
|
|
methods: {
|
|
//选中/取消选中产品
|
|
choose(index) {
|
|
this.$emit('choose', {
|
|
index: index
|
|
})
|
|
},
|
|
//清空失效宝贝
|
|
clear() {
|
|
this.$emit('clear')
|
|
},
|
|
//更改数量
|
|
change(e) {
|
|
this.$emit('change', {
|
|
type: e.type,
|
|
number: e.number,
|
|
identifier: e.identifier
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cart_effective_item:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.cart_invalid_item:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.cart_invalid_list {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.operate {
|
|
width: 80rpx;
|
|
}
|
|
</style>
|