football/pages/cats/product-list.vue

<template>
    <view class="product-list">
        <view class="item dir-left-nowrap" v-for="(item, key) in goods_list" :key="key" @click="route_go(item)">
            <view class="box-grow-0 cover-pic">
                <image class="pic" :src="item.cover_pic"></image>
                <view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
                    <image mode="aspectFill" :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
                </view>
            </view>
            <view class="cont dir-top-nowrap main-between">
                <text class="name t-omit-two">{{item.name}}</text>
                <view class="box-grow-0 cross-bottom"
                      v-if="item.is_level == 1 && item.is_negotiable != 1">
                    <app-member-price :price="item.level_price"></app-member-price>
                </view>
                <app-sup-vip class="margin-vip" :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
                             v-if="item.vip_card_appoint.discount > 0"
                             :discount="item.vip_card_appoint.discount">
                </app-sup-vip>
                <view class="price-but dir-left-nowrap main-between cross-center">
                    <view class="price dir-top-nowrap">
                        <text class="price_content">{{item.price_content}}</text>
                        <text class="sales">{{item.sales}}</text>
                    </view>
                    <view class="but">
                        <view v-if="item.is_negotiable != 1 && isShowCart == 1 && item.goods_stock > 0" class="box-grow-0 cart-box">
                            <img @click.stop="specification(item)" class="goods-cart cross-bottom "
                                 src="/static/image/icon/goods-cart.png">
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapGetters, mapState} from 'vuex';
    import appMemberPrice from "../../components/page-component/app-member-mark/app-member-price.vue";
    import appSupVip from '../../components/page-component/app-sup-vip/app-sup-vip.vue';

    export default {
        name: "product-list",

        props : [`goods_list`],

        components: {
            'app-member-price': appMemberPrice,
            'app-sup-vip': appSupVip,
        },

        data() {
            return {
                previewUrl: '',
                submitUrl: '',
                attrGroup: [],
                selectAttr: {},
                item: {},
                show: 0
            }
        },

        computed: {
            ...mapGetters('mallConfig', {
                getVideo: 'getVideo',
                isShowCart: 'getShowCart'
            }),
            ...mapState({
                appSetting: state => state.mallConfig.mall.setting,
                appImg: state => state.mallConfig.__wxapp_img.mall
            })
        },

        methods: {
            specification(goods) {
                if (goods.sign === 'mch') {
                    this.previewUrl = this.$api.mch.order_preview;
                    this.submitUrl = this.$api.mch.order_submit;
                } else {
                    this.previewUrl = '';
                    this.submitUrl = '';
                }
                this.$emit('attr', this.previewUrl, this.submitUrl, goods.attr_groups, goods);
            },

            route_go(item) {
                // #ifndef MP-BAIDU
                if (item.video_url && this.getVideo == 1) {
                    uni.navigateTo({
                        url: `/pages/goods/video?goods_id=${item.id}&sign=${item.sign}`
                    });
                } else {
                    uni.navigateTo({
                        url: item.page_url
                    });
                }
                // #endif

                // #ifdef MP-BAIDU
                uni.navigateTo({
                    url: item.page_url
                });
                // #endif
            },

            onAttr(data) {
                this.selectAttr = data;
            },
        }
    }
</script>

<style scoped lang="scss">

    .cover-pic {
        position: relative;
        border-radius: #{8upx};
        margin-right: #{20upx};
    }
    .out-dialog {
        width: #{150upx};
        height: #{150upx};
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0,0,0,.5);
        image {
            width: #{150upx};
            height: #{150upx};
        }
    }
    .item {
        width: #{504upx};
        border-bottom: #{1upx} solid #e2e2e2;
        margin: #{20upx 0 0 0};
    }
    .cover-pic {
        width: #{150upx};
        height: #{150upx};

        border-radius: #{8upx};
        margin-right: #{20upx};
        position: relative;
    }
    .pic {
        width: #{150upx};
        height: #{150upx};
    }
    .out-dialog {
        width: #{150rpx};
        height: #{150rpx};
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0,0,0,.5);
        image {
            width: #{150rpx};
            height: #{150rpx};
        }
    }
    .cont {
        width: #{334upx};
    }
    .name {
        font-size: #{28upx};
        line-height: #{36upx};
        color: #353535;
        margin-top: #{5upx};
    }
    .margin-vip {
        margin: #{8upx 0 0 0};
    }
    .price-but {
        margin-bottom: #{20upx};
        margin-top: #{8upx};
    }
    .price_content {
        font-size: #{32upx};
        color: #ff4544;
        line-height: 1;
        text-align: left;
    }
    .cart-box {
        width:#{56rpx};
        height:#{56rpx};
        border-radius: 50%;
        border: 1px solid #ff4544;
        position: relative;
    }
    .sales {
        font-size: #{20upx};
        line-height: 1;
        color: #999999;
        margin-top: #{5upx};
        padding-left: #{5upx};
    }
    .goods-cart {
        width: #{32rpx};
        height: #{32rpx};
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>