jjx-wap/components/index/goods.vue

<template>
    <view class="component">
        <view class="layout-goods">
            <view class="index-h2">
                <view class="big">现货市场</view>
                <view class="more" @click="listLink">更多</view>
            </view>
            <view class="goods-box">
                <view class="item" @click="detailLink(item._id)" v-for="(item, index) in spotGoodsData" :key="index">
                    <view class="top" v-if="item.isTop">特别推荐</view>
                    <view class="top" v-if="!item.isTop && index < 10">最新</view>
                    <!--                    <view class="link">立即查看</view>-->
                    <view class="title text-single">{{ item.name }}</view>
                    <view class="text m-top-10 flex justify-between align-center">
                        <text class="text-main w-40p">库存:约{{ parseFloat(item.stock) }}吨</text>
                    </view>
                    <view class="text">供货地: {{ item.addressStr }}</view>
                    <view class="flex justify-between align-center">
                        <view class="text" v-if="item.user && item.user.company">{{
                                item.user.company.companyName
                            }}
                        </view>
                    </view>
                    <view class="date">{{ item._add_time_str }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isLogin: false,
            spotGoodsData: []
        }
    },
    methods: {
        listLink() {
            vk.navigateTo('/pages/goods/goods')
        },
        detailLink(id) {
            vk.navigateTo(`/pages/goods/detail?id=${id}`);
        },
        getSpotGoods() {
            vk.callFunction({
                url: 'client/spot/goods/pub/getList',
                loading: false,
                data: {
                    pageIndex: 1,
                    pageSize: 10,
                },
                success: (data) => {
                    console.log('data: ', data);
                    data.rows.forEach(item => {
                        try {
                            item.addressStr = item.address.province.name + "-" + item.address.city
                                .name + "-" + item.address.area.name
                        } catch (err) {
                            item.addressStr = ""
                        }
                    })
                    this.spotGoodsData = data.rows
                }
            });
        },
    },
    mounted() {
        this.getSpotGoods()
    },
}
</script>

<style lang="scss">
.layout-goods {
    // width: 690rpx;
    padding: 10rpx 30rpx;

    .item {
        position: relative;
        margin-top: 10rpx;
        padding: 10rpx 20rpx 20rpx;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.12);

        .title {
            width: 90%;
            font-size: 28rpx;
            font-weight: 600;
            line-height: 48rpx;
            color: #101010;
        }

        .link, .askfor {
            position: absolute;
            right: 20rpx;
            top: 16rpx;
            z-index: 9;
            font-size: 24rpx;
            line-height: 36rpx;
            color: #A92924;
            padding: 4rpx 8rpx;
        }

        .link {
            border: 1px solid #A92924;
        }

        .text {
            font-size: 24rpx;
            line-height: 36rpx;
            color: #999999;
        }

        .red {
            margin-right: 20rpx;
            color: #A92924;
        }

        .date {
            font-size: 24rpx;
            line-height: 36rpx;
            color: #9a9a9a;
        }

        .company {
            height: 40rpx;

            .icon {
                width: 40rpx;
                height: 40rpx;
            }

            .text {
                width: 300rpx;
                height: 40rpx;
                font-size: 26rpx;
                line-height: 40rpx;
                color: #4f4f4f;
            }
        }
    }

    .item:nth-child(1) {
        margin-top: 0 !important;
    }
}


.top {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(169, 41, 36, 1);
    padding: 2px 5px;
    border-radius: 5px 0 5px 0;
    color: #FFFFFF;
    font-size: 25rpx;
}
</style>