78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
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> |