hxx/uni-app-shopping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组件封装抽离

Browse Source
This commit is contained in:
jqtmviyu@gmail.com 2021-02-27 20:47:07 +08:00
parent c6b6e21ca0
commit 61bd2fde39
2 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/goodsItem/goodsItem.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<navigator :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`" class="composite_item" >
<!-- 商品图片容器 -->
<view class="goods_img">
<u-image width="200rpx" height="200rpx" :src="item.goods_small_logo" ></u-image>
</view>
<!-- 商品信息 -->
<view class="goods_info">
<view class="goods_name u-line-2">{{item.goods_name}}</view>
<view class="goods_price">￥{{item.goods_price || 9999}}</view>
</view>
</navigator>
</template>
<script>
export default {
props: ["item"]
}
</script>
<style lang="scss">
.composite_item {
display: flex;
padding: 10rpx 0;
.goods_img {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.goods_info {
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods_name {
font-size: 30rpx;
color: #333;
}
.goods_price {
font-size: 30rpx;
color: #eb4450;
}
}
}
</style>>
</style>

41
src/pages/goods_list/goods_list.vue
View File

@ -14,17 +14,7 @@
<view class="composite">
<block v-for="item in goods" :key="item.goods_id">
<u-line color="red" />
<navigator class="composite_item">
<!-- 3.1.1 图片 -->
<view class="goods_img">
<u-image width="190rpx" height="190rpx" mode="widthFix" :src="item.goods_small_logo"></u-image>
</view>
<!-- 3.1.2 商品信息-->
<view class="goods_info">
<view class="goods_name u-line-2">{{item.goods_name}}</view>
<view class="goods_price">￥{{item.goods_price||99999}}</view>
</view>
</navigator>
<goodsItem :item="item" />
</block>
</view>
</block>
@ -131,32 +121,5 @@ export default {
</script>
<style lang="scss">
.composite {
.composite_item {
display: flex;
padding: 10rpx 0;
.goods_img {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.goods_info {
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods_name {
font-size: 30rpx;
color: #333;
}
.goods_price {
font-size: 30rpx;
color: #eb4450;
}
}
}
}
</style>