demingshangjia/components/release/shop-item.vue

<template>
    <view class="item" @click="xuanzhongs">
        <image :src="image"></image>
        <view class="title u-line-1" >{{title}}</view>
        <view class="info">
            <text>{{price}}</text>
            <text>销量：{{num}}</text>
        </view>
        <u-checkbox class="xuanzhong" active-color="#FF7A15" :name="sid" v-model="xuanzhong" @change="xuanzhongs">
        </u-checkbox>
    </view>
</template>
<script>
export default {
    name:"shop-item",
    data(){
        return {
            xuanzhong:false,
        }
    },
    props:['image','title','price','num','sid','wxuanzhong'],
    methods:{
        xuanzhongs(){
            this.xuanzhong = !this.xuanzhong
            this.$emit("xuanzhong")
        }
    },
    watch:{
        
    },
    created(){
        this.xuanzhong = this.wxuanzhong
        console.log(this.wxuanzhong)
    }
}
</script>
<style lang="scss" scoped>
.item{
    width: 214rpx;
    // height: 297rpx;
    background-color: #fff;
    border-radius:10rpx 10rpx 0 0;
    padding-bottom: 14rpx;
    overflow: hidden;
    position: relative;
    >image{
        width: 100%;
        height: 207rpx;
    }
    .title{
        width: 194rpx;
        margin: 19rpx auto;
        margin-bottom: 0;
        font-size: 26rpx;
        color: #333;
    }
    .info{
        display: flex;
        padding: 0 10rpx;
        align-items: flex-end;
        justify-content: space-between;
        >text:first-child{
            font-size: 26rpx;
            color: #FF3131;
        }
        >text:last-child{
            font-size: 20rpx;
            color: #999;
            
        }
    }
    .xuanzhong{
        position: absolute;
        left: 8rpx;
        top: 8rpx;
    }
}
</style>