caimei-applets-mcare/pages/goods/components/procurement_good.vue

<template>
    <view class="pro-good" @click.stop="handleJumpLink">
        <view class="img">
            <image :src="storeInfo.mainImage" mode="aspectFill" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="pro-content">
            <view class="pro-title">
                {{storeInfo.name | sliceText(20)}}
            </view>
            <view class="pro-price" v-if='hasLogin'>
                ￥{{storeInfo.price}}
            </view>
            <view class="product-price-none" v-else>
                <uni-grader :grade="Number(storeInfo.priceGrade)"></uni-grader>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import uniGrader from '@/components/uni-grade/uni-grade.vue'
    export default {
        props: {
            storeInfo: {
                type: Object,
                default: () => {}
            }
        },
        components: {
            uniGrader
        },
        filters: {
            // 字符过滤
            sliceText(text, num) {
                if (text && text.length > num) {
                    let value = text.substring(0, num)
                    return value + '...'
                }
                return text
            }
        },
        computed: {
        	...mapState(['hasLogin'])
        },
        data() {
            return {
                
            }
        },
        methods: {
            handleJumpLink() {
                this.$api.navigateTo(`/pages/goods/product?id=${this.storeInfo.productId}`)
            },
        }
    }
</script>

<style scoped lang="scss">
    .pro-good {
        width: 339rpx;
        height: 518rpx;
        border-radius: 8rpx;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: 24rpx;
    }
    .img {
        width: 339rpx;
        height: 339rpx;
        // border: 1px dotted;
        box-sizing: border-box;
    }
    .pro-content {
        padding: 14rpx 24rpx 20rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        height: 179rpx;
        box-sizing: border-box;
        background-color: #fff;
    }
    .pro-title {
        color: #333333;
        font-size: 28rpx;
        width: 100%;
    }
    .pro-price {
        width: 100%;
        color: #F85050;
        font-size: 28rpx;
    }
    .product-price-none {
        width: 100%;
    	color: #f8c499;
    	float: left;
    	line-height: 54rpx;
    	margin-top: 16rpx;
    	.p-no {
    		float: left;
    		font-size: $font-size-24;
    		color: $text-color;
    	}
    }
</style>