Adam / gulu-vue

Blame view

src/components/CommodityCard/CommodityCard.vue 1.82 KB
edit raw normal view history
1003c53e8   Adam   go 
1
2
3
 
  <template>
  	<view class="card" @tap="toGoods(goods.id)">
  		<image mode="widthFix" :src="goods.imgurl" ></image>
fb85b244c   BigBoss   user页面 
4
5
6
 
  		<view class="name">{{goods.name}}</view>
  		<view class="info">
  			<view class="priceBox">
1003c53e8   Adam   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   BigBoss   user页面 
12
 
  			</view>
1003c53e8   Adam   go 
13
14
15
16
 
  			<view class="slogan">{{goods.trade_num}}</view>
  		</view>
  	</view>
  </template>
fb85b244c   BigBoss   user页面 
17
18
19
20
21
22
23
24
 
  
  <script>
  	export default {
  		props: {
  			/**
  			 * 商品数据
  			 */
  			goods: {
1003c53e8   Adam   go 
25
26
 
  				id: Number, 
  				imgurl: String,
fb85b244c   BigBoss   user页面 
27
 
  				name: String,
1003c53e8   Adam   go 
28
 
  				oldPrice:String,
fb85b244c   BigBoss   user页面 
29
 
  				price: String,
1003c53e8   Adam   go 
30
 
  				memo:String
fb85b244c   BigBoss   user页面 
31
32
33
34
 
  			}
  			
  		},
  		created() {
1003c53e8   Adam   go 
35
36
37
38
39
 
  		},
  		data() {
  			return {
  				
  			};
fb85b244c   BigBoss   user页面 
40
41
42
 
  		},
  		methods:{
  			toGoods(id){
1003c53e8   Adam   go 
43
 
  				console.log('toGoods    =====> id======>', id)
fb85b244c   BigBoss   user页面 
44
45
46
47
48
49
50
 
  				uni.navigateTo({
  					url: `../detail/detail?oderId=1`,
  					success: res => {},
  					fail: () => {},
  					complete: () => {}
  				});
  			}
1003c53e8   Adam   go 
51
52
53
54
 
  		}
  	}
  </script>
fb85b244c   BigBoss   user页面 
55
56
57
58
59
60
61
62
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
 
  <style lang="scss">
  	image{
  		width: 100%;
  		height: 120rpx;
  	}
  	.name{
  		width: 92%;
  		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   Adam   go 
98
99
 
  	}
  </style>