demingshangjia/pages/release/selectshop.vue

<template>
    <view class="selectshop">
        <view class="title">我的商品</view>
        <u-checkbox-group>
            <view class="list">
                <shopItem @xuanzhong="xuanzhong" :wxuanzhong="sele.indexOf(i.goods_id + '') > -1" class="items" v-for="(i,j) in list" :key="j" :image="i.goods_image" :title="i.goods_name" :price="i.goods_marketprice" :num="i.goods_salenum" :sid="i.goods_id" ref="shop"></shopItem>
            </view>
        </u-checkbox-group>
        <view class="jiaru" @click="jiaru" :style="{'background-color': sele.length > 0 ? 'rgba(255, 120, 15, 1' : ''}">加入售货袋</view>
    </view>
</template>
<script>
import shopItem from "../../components/release/shop-item"
export default {
    name:"selectshop",
    data(){
        return {
            list:[],
            sele:[]
        }
    },
    components:{
        shopItem
    },
    methods:{
        
        xuanzhong(){
            // console.log(this.$refs.shop)
            this.sele = []
            for(let i of this.$refs.shop){
                // console.log(i)
                if(i.xuanzhong){
                    this.sele.push(i.sid)
                }
            }
            console.log(this.sele)
        },
        jiaru(){
            let that = this
            uni.setStorageSync("gouwudai",that.sele.join(","))
            this.$u.route({
                type:"back",
                delta:1
            })
        }
    },
    onLoad(){
        this.sele = uni.getStorageSync("gouwudai").split(',')
        if(this.sele[0] == ""){
            this.sele = []
        }
        console.log(this.sele[0])
        this.$u.api.getStoreGoodsList().then((res)=>{
            this.list = res.data.list
        })
    }
}
</script>
<style lang="scss" scoped>
.selectshop{
    padding: 15rpx 30rpx;
    padding-left: 6rpx;
    background-color: #2D2D2D;
    min-height: calc(100vh - 45px);
    .title{
        color: #FF780F;
        font-size: 30rpx;
        font-weight: 400;
        margin-left: 26rpx;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        margin-top: 35rpx;
        .items{
            margin-left: 24rpx;
            margin-bottom: 30rpx;
        }
    }
    .jiaru{
        position: fixed;
        bottom: 33rpx;
        right: 30rpx;
        height: 80rox;
        width: 348rpx;
        background-color: #999;
        font-size: 36rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        border-radius: 40rpx;
    }
}
</style>