Blame view
src/components/CommodityCard/CommodityCard.vue
1.79 KB
1003c53e8 go |
1 |
<template> |
ab4209caf update |
2 3 |
<view class="card" @tap="toGoods(goods.goods_id)"> <image mode="widthFix" :src="goods.img" ></image> |
fb85b244c user页面 |
4 5 6 |
<view class="name">{{goods.name}}</view> <view class="info"> <view class="priceBox"> |
ab4209caf update |
7 8 9 |
<view class="price">{{goods.price}}</view> <view class="originCost"> {{goods.originCost}} |
1003c53e8 go |
10 |
</view> |
fb85b244c user页面 |
11 |
</view> |
ab4209caf update |
12 |
<view class="slogan">{{goods.slogan}}</view> |
1003c53e8 go |
13 14 15 |
</view> </view> </template> |
fb85b244c user页面 |
16 17 18 19 20 21 22 23 |
<script> export default { props: { /** * 商品数据 */ goods: { |
ab4209caf update |
24 25 |
goods_id: Number, img: String, |
fb85b244c user页面 |
26 |
name: String, |
ab4209caf update |
27 |
originCost:String, |
fb85b244c user页面 |
28 |
price: String, |
ab4209caf update |
29 |
slogan:String |
fb85b244c user页面 |
30 31 32 33 |
} }, created() { |
ab4209caf update |
34 |
console.log(this.goods) |
1003c53e8 go |
35 36 37 38 39 |
}, data() { return { }; |
fb85b244c user页面 |
40 41 42 |
}, methods:{ toGoods(id){ |
1003c53e8 go |
43 |
console.log('toGoods =====> id======>', id) |
fb85b244c user页面 |
44 45 46 47 48 49 50 |
uni.navigateTo({ url: `../detail/detail?oderId=1`, success: res => {}, fail: () => {}, complete: () => {} }); } |
1003c53e8 go |
51 52 53 54 |
} } </script> |
fb85b244c user页面 |
55 56 57 58 59 60 61 |
<style lang="scss"> image{ width: 100%; height: 120rpx; } .name{ width: 92%; |
0444517bf 商品卡片高度添加 |
62 |
height: 54rpx; |
fb85b244c user页面 |
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
padding: 5px 4%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: justify; overflow: hidden; font-size: 24rpx; color: #333333; } .info{ display: flex; justify-content: space-between; align-items: center; width: 92%; padding: 5px 4% 5px 4%; .priceBox{ display: flex; justify-content: space-between; align-items: center; .price{ color: #EB5D3B; font-size: 28rpx; font-weight: 600; margin-right: 10rpx; } .originCost{ text-decoration:line-through; color: #999999; font-size: 20rpx; } } .slogan{ color: #999999; font-size: 20rpx; } |
1003c53e8 go |
99 100 |
} </style> |