caimei-applets-mcare/pages/search/components/product-list.vue

<template>
    <view class="product-wrapper">
        <!-- 文章搜索筛选 -->
        <view class="search-sort">
            <template v-for="item in sortItems">
                <view
                    class="sort-item"
                    :key="item.id"
                    :class="{ active: item.id === currentSortItem }"
                    @click="onSortItemClick(item)"
                >
                    <text v-text="item.name"></text>
                    <text :class="[item.icon, item.sortType]"></text>
                </view>
            </template>
        </view>
        <!-- 文章搜索列表 -->
        <view class="product-list">
            <view class="product" v-for="product in list" :key="product.productId" @click="onToDetail(product)">
                <view class="cover"><image :src="product.image"></image></view>
                <view class="content">
                    <view class="title" v-html="product.name"></view>
                    <view class="unit">
                        <text class="label">规格：</text>
                        <text class="value" v-text="product.unit"></text>
                    </view>
                    <view class="code">
                        <text class="label">商品编码：</text>
                        <text class="value" v-text="product.code"></text>
                    </view>
                    <view class="foot">
                        <view class="price">
                            <view class="real-price">￥{{ makePrice(product) }}</view>
                            <!-- <view class="old-price">￥480.00</view> -->
                        </view>
                        <view class="tag-list">
                            <view class="tag coupon" v-if="product.couponsLogo">优惠券</view>
                            <view class="tag svip" v-if="product.svipProductFlag == 1">svip</view>
                            <template v-if="product.actStatus == 1">
                                <template v-if="isPromotion(product.promotions)">
                                    <view class="tag other">
                                        {{ product.promotions.name }}
                                        <text>:￥{{ product.price | priceFormat }}</text>
                                    </view>
                                </template>
                                <template v-else>
                                    <view class="tag other">{{ product.promotions.name }}</view>
                                </template>
                            </template>
                            <!-- <view class="tag reduce">活动价</view> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { debounce } from '@/common/config/common'
const myDebounce = fn => debounce(fn, 200, false)

export default {
    filters: {
        priceFormat(price) {
            if (!price) return ''
            return Number(text).toFixed(2)
        }
    },
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        const sortItems = [
            { id: 1, name: '综合', icon: '', sortType: '' },
            { id: 2, name: '销量', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
            { id: 3, name: '人气', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
            { id: 4, name: '价格', icon: 'sort', sortType: 'asc' }, // asc 升序  desc 降序
            { id: 5, name: '筛选', icon: 'iconfont icon-shaixuan', sortType: '' }
        ]
        return {
            sortItems: sortItems,
            currentSortItem: 1
        }
    },
    methods: {
        // 跳转产品详情
        onToDetail: myDebounce(function(product) {
            this.$api.navigateTo(`/pages/goods/product?id=${product.productId}`)
        }),

        // 是否有促销价
        isPromotion(promo) {
            if (!promo) return false
            return promo.type == 1 && promo.mode == 1
        },

        // 返回产品价格
        makePrice(product) {
            const price = this.isPromotion(product.promotions) ? product.originalPrice : product.price
            return Number(price).toFixed(2)
        },

        // sort item click
        onSortItemClick(item) {
            if (item.id === 5) {
                console.log('filter')
            } else if (item.id === this.currentSortItem) {
                item.sortType = item.sortType === 'asc' ? 'desc' : 'asc'
            } else {
                const lastCurrent = this.sortItems.find(a => a.id === this.currentSortItem)
                this.currentSortItem = item.id
                lastCurrent.sortType = 'asc'
            }
            this.$emit('change', item)
        }
    }
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

.product-wrapper {
    .search-sort {
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        line-height: 90rpx;
        .sort-item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            font-size: 26rpx;
            color: #999999;

            text:first-child {
                margin-right: 4rpx;
            }

            &.active,
            &.active .sort.desc::after,
            &.active .sort.asc::before,
            &.active .icon-shaixuan {
                color: #F3B574;
            }

            .icon-shaixuan {
                font-size: 24rpx;
                color: #999999;
            }

            .sort {
                display: flex;
                flex-direction: column;
                align-items: center;
                line-height: 0.9;
                font-size: 14rpx;
                color: #aaa;
                transform: scale(0.7);
                &::after {
                    content: '▼';
                }
                &::before {
                    content: '▲';
                }
            }
        }
    }

    .product {
        display: flex;
        padding: 32rpx;
        border-top: 1rpx solid #e1e1e1;
        .cover {
            flex-shrink: 0;
            width: 220rpx;
            height: 220rpx;
            image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            flex: 1;
            margin-left: 24rpx;
            .title {
                font-size: 26rpx;
                color: #333333;
                line-height: 36rpx;
                height: 72rpx;
                @include ellipsis(2);
            }
            .unit,
            .code {
                font-size: 20rpx;
                color: #666666;
                margin-top: 8rpx;
                height: 28rpx;
                @include ellipsis(1);

                .value {
                    color: #999;
                }
            }

            .foot {
                margin-top: 34rpx;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .price {
                    display: flex;
                    align-items: flex-end;
                    .real-price {
                        color: #F3B574;
                        font-size: 24rpx;
                    }
                    .old-price {
                        text-decoration: line-through;
                        font-size: 20rpx;
                        color: #999;
                        margin-left: 8rpx;
                    }
                }
                .tag-list {
                    display: flex;
                    .tag {
                        height: 32rpx;
                        font-size: 22rpx;
                        flex-shrink: 0;
                        box-sizing: border-box;
                        padding: 0 8rpx;
                        margin-right: 8rpx;
                        border-radius: 6rpx;

                        &:last-child {
                            margin-right: 0;
                        }

                        &.coupon,
                        &.reduce,
                        &.other {
                            border: 1rpx solid rgba(225, 86, 22, 0.2);
                            line-height: 30rpx;
                            color: #F3B574;
                        }
                        &.svip {
                            line-height: 32rpx;
                            color: #f0cb72;
                            background: #333333;
                            text-transform: uppercase;
                        }
                    }
                }
            }
        }
    }
}
</style>