Blame view
src/components/CommodityCard/CommodityCard.vue
1.85 KB
1003c53e8 go |
1 2 3 |
<template> <view class="card" @tap="toGoods(goods.id)"> <image mode="widthFix" :src="goods.imgurl" ></image> |
fb85b244c user页面 |
4 5 6 |
<view class="name">{{goods.name}}</view> <view class="info"> <view class="priceBox"> |
1003c53e8 go |
7 8 9 10 11 |
<view class="price">{{goods.rsSon.Min_Price}}</view> <view class="originCost"> {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} <!-- {{goods.oldPrice}} --> </view> |
fb85b244c user页面 |
12 |
</view> |
1003c53e8 go |
13 14 15 16 |
<view class="slogan">{{goods.trade_num}}</view> </view> </view> </template> |
fb85b244c user页面 |
17 18 19 20 21 22 23 24 |
<script> export default { props: { /** * 商品数据 */ goods: { |
1003c53e8 go |
25 26 |
id: Number, imgurl: String, |
fb85b244c user页面 |
27 |
name: String, |
1003c53e8 go |
28 |
oldPrice:String, |
fb85b244c user页面 |
29 |
price: String, |
1003c53e8 go |
30 |
memo:String |
fb85b244c user页面 |
31 32 33 34 |
} }, created() { |
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 |
uni.navigateTo({ |
0508098fe 首页筛选列表接口获取 |
45 |
url: `../frameDetail/frameDetail?oderId={{id}}`, |
fb85b244c user页面 |
46 47 48 49 50 |
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> |