hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-10-31 10:18:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

重构页面抽取组件

Browse Source
This commit is contained in:
sfmind
2022-11-19 21:40:26 +08:00
parent 987c0218fa
commit dbf2597d3b
6 changed files with 407 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
yudao-ui-app/components/yd-product-box/yd-product-box.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view>
<view v-if="showType === 'normal'">
<u-gap height="180" bgColor="#398ade"></u-gap>
<view class="prod-block">
<view class="bloc-header">
<text class="bloc-title">{{title}}</text>
<text class="see-more">查看更多</text>
</view>
<view class="prod-grid">
<view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
<image class="prod-image" :src="item.image"></image>
<view class="item-info">
<view class="info-text">
<u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
</view>
<view class="price-and-cart">
<yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="showType === 'half'">
<view class="prod-block half">
<view class="bloc-header">
<text class="bloc-title">{{title}}</text>
<text class="more">更多 &gt;</text>
</view>
<view class="prod-grid half">
<view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
<image class="prod-image" :src="item.image"></image>
<view class="item-info">
<view class="info-text">
<u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
</view>
<view class="price-and-cart">
<yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 商品列表
*/
export default {
name: 'yd-product-box',
components: {},
props: {
showType: {
type: String,
default: 'normal'
},
title: {
type: String,
default: '商品推荐'
},
productList: {
type: Array,
default: () => []
}
},
computed: {},
methods: {
handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
})
}
}
}
</script>
<style lang="scss" scoped>
.prod-block {
margin-top: -160px;
.bloc-header {
@include flex-space-between;
padding: 10rpx 20rpx;
.bloc-title {
color: $custom-bg-color;
font-size: 34rpx;
}
.see-more {
color: $custom-bg-color;
background: $u-primary;
padding: 0 30rpx;
height: 50rpx;
line-height: 50rpx;
border-radius: 50rpx;
font-size: 24rpx;
}
}
&.half {
margin-top: 0;
.bloc-header {
margin-top: 50rpx;
margin-bottom: 20rpx;
.bloc-title {
color: #333333;
}
.more {
font-size: 24rpx;
}
}
}
.prod-grid {
width: 730rpx;
margin: 0 auto;
@include flex;
flex-wrap: wrap;
justify-content: left;
&.half {
.prod-item {
width: 345rpx;
margin: 10rpx;
.prod-image {
width: 345rpx;
height: 345rpx;
}
}
}
.prod-item {
width: 223rpx;
margin: 10rpx;
background: #ffffff;
border-radius: 10rpx;
box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
.prod-image {
width: 223rpx;
height: 223rpx;
border-radius: 10rpx 10rpx 0 0;
}
.item-info {
padding: 15rpx;
.info-text {
height: 70rpx;
padding-bottom: 10rpx;
}
.price-and-cart {
@include flex-space-between;
}
}
}
}
}
</style>