<!-- 收藏 -->
<template>
    <view class="jy-collection" v-if="listProperty.list.length > 0">
        <checkbox-group @change="checkboxChange">
            <view v-for="(item, index) in listProperty.list" :key="index">
                <view class="select-card">
                    <JyShopInformation :showStatus="false"></JyShopInformation>
                    <view class="checkbox-list" v-for="(item2, index2) in item" :key="index2">
                        <checkbox :value="item2 + ''" backgroundColor="#ffffff" iconColor="#ffffff"
                            activeBackgroundColor="#F8BA4D" activeBorderColor="#F8BA4D" color="#FFCC33"
                            style="transform:scale(0.7)" />
                        <JyCommodityInformation :showType="3"></JyCommodityInformation>
                    </view>
                </view>
            </view>
        </checkbox-group>
        <view class="content-bottom" :style="{ bottom: bottomSafeAreaHeight() }">
            <view class="c999 f24">以选{{ checkNum.length }}款</view>
            <view class="df aic">
                <text class="c333 f28">应付：</text>
                <text class="price f20">￥</text>
                <text class="price">5.00</text>
            </view>
            <button class="content-bottom-price" @click="goto('/pages/shop/continue-pay/index')">
                <text class="cfff f24">去结算</text>
            </button>
        </view>
    </view>
</template>

<script>
import JyCommodityInformation from '@/components/public/jy-commodity-information'
// 店铺信息
import JyShopInformation from '@/components/public/jy-shop-information'
import { bottomSafeAreaHeight } from '@/components/public/Mixins.js'
import apiMixins from '@/components/public/apiMixins.js'
export default {
    components: {
        JyCommodityInformation,
        JyShopInformation
    },
    mixins: [apiMixins],
    data() {
        return {
            bottomSafeAreaHeight,
            checkNum: []
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.getData({
                api: 'shoppingCart',
                fn: 'list'
            }, {});
        },
        onReachBottomHandler() {
            this.listProperty.params.pageNum++;
            this.init();
        },
        onPullDownRefreshHandler() {
            this.listProperty.params.pageNum = 1
            this.getData({
                api: 'shoppingCart',
                fn: 'list'
            }, {}, true);
        },
        checkboxChange(e) {
            console.log('checkboxChange', e)
            checkNum = e.detail.value
        }
    }
}
</script>
<style scoped lang="scss">
.select-card {
    background-color: #fff;
    margin-bottom: 40rpx;
    padding: 20rpx 40rpx;

}

.checkbox-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20rpx;
}

::v-deep .uni-checkbox-input {
    border-radius: 50%
}

.content-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    padding: 40rpx 0;

    .content-bottom-price {
        margin: 0px;
        width: 350rpx;
        line-height: normal;
        border-radius: 10rpx;
        /* 自动布局 */
        background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28rpx 86rpx;
    }
}
</style>