football/components/page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue

<template>
    <view class="app-good-shop-recommendation">
        <view class="app-top-title dir-left-nowrap main-between cross-center" v-if="!showGoods && type === 'mch'">
            <view class="app-left dir-left-nowrap cross-center">
                <icon class="icon"></icon>
                <text>好店推荐</text>
            </view>
            <view class="app-right dir-left-nowrap cross-center">
                <app-jump-button form url="/plugins/mch/list/list">
                    <text>更多</text>
                    <icon class="icon"></icon>
                </app-jump-button>
            </view>
        </view>
        <view class="app-content" :style="[{'background-color':`${temp.data.backgroundColor}`}]" v-if="!showGoods">
            <scroll-view scroll-x class="app-scroll">
                <view class="app-item" :style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`}]"
                      v-for="(item, index) in list"
                      :key="index"
                >
                    <app-jump-button arrangement="column" form :url="'/plugins/mch/shop/shop?mch_id=' + item.id">
                        <image class="app-image" :src="item.picUrl"></image>
                        <text class="app-name">
                            {{item.name}}
                        </text>
                    </app-jump-button>
                </view>
            </scroll-view>
        </view>
        <view class="app-goods-shop" v-if="showGoods">
            <view class="app-shop" :style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`,'height': `${item.goodsList.length !== 0 ? '381rpx' : '148rpx'}`}]"
                  v-for="(item, index) in list" :key="index">
                <view class="app-top" @click.stop="jump(item.id)">
                    <image class="app-image" :src="item.pic_url"></image>
                    <view class="app-title">
                        <text class="app-name">{{item.name}}</text>
                        <view class="app-number-title">
                            <text class="app-shops">商品数量: {{item.goods_num}}</text>
                            <text class="app-sell" v-if="type === 'mch'">已售: {{item.order_num}}</text>
                        </view>
                    </view>
                    <view v-if="item.distance" class="box-grow-0 distance" >距离{{item.distance}}</view>
                    <view class="app-button-jump" v-else>
                        <app-jump-button form >
                            <view class="app-button">进店逛逛</view>
                        </app-jump-button>
                    </view>
                </view>
                <view class="app-bottom" v-if="item.goodsList.length !== 0">
                    <scroll-view class="app-scroll" scroll-x>
                        <view class="app-item" :style="{marginLeft: number !== 0 ? '8rpx' : '0'}"
                              v-for="(good, number) in item.goodsList">
                            <app-jump-button form
                                             @click.native.stop="router_jump(good, item.id)"
                                             >
                                <image class="app-image" :src="good.picUrl"></image>
                                <text class="app-price">￥{{good.price}}</text>
                            </app-jump-button>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapGetters} from 'vuex';

    export default {
        name: "app-good-shop-recommendation",
        props: {
            list: {
                type: Array,
                default: function () {
                    return []
                }
            },
            showGoods: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
            cardStyle: {
                type: String,
                default: function () {
                    return 1;
                }
            },
            type: {
                type: String,
                default() {
                   return 'mch';
                }
            },
            backgroundColor: {
                type: String,
                default() {
                   return '#fff';
                }
            }
        },
        computed: {
            ...mapGetters('mallConfig',{
                getVideo: 'getVideo'
            }),
        },
	    methods: {
            jump(data) {
                this.$jump({
	                url: `/plugins/mch/shop/shop?mch_id=${data}`,
	                open_type: 'navigate',
                });
            },
            router_jump(data, id) {
                // #ifndef MP-BAIDU
                if (data.goodsWarehouse.video_url && this.getVideo == 1) {
                    uni.navigateTo({
                        url: `/pages/goods/video?goods_id=${data.id}&sign=mch`
                    });
                } else {
                    uni.navigateTo({
                        url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
                    });
                }
                // #endif

                // #ifdef MP-BAIDU
                uni.navigateTo({
                    url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
                });
                // #endif
            }
	    }
    }
</script>

<style scoped lang="scss">
    .app-good-shop-recommendation {
        width: #{750rpx};

        .distance {
            align-self: flex-start;
            padding-top: #{36rpx};
            font-size: #{24rpx};
            color: #999999;
            float: right;
            padding-right: #{50rpx};
        }

        .app-top-title {
            width: #{750rpx};
            height: #{80rpx};
            border-bottom: #{1rpx} solid #e2e2e2;
            background-color: #ffffff;

            .icon {
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .app-left {
                height: #{80rpx};

                .icon {
                    width: #{46rpx};
                    height: #{46rpx};
                    background-image: url("../../../static/image/icon/good-shop.png");
                    margin-left: #{24rpx};

                }

                text {
                    font-size: #{26rpx};
                    color: #ff8831;
                    margin-left: #{16rpx};
                }
            }

            .app-right {
                height: #{80rpx};

                .icon {
                    width: #{12rpx};
                    height: #{22rpx};
                    background-image: url("../../../static/image/icon/arrow-right.png");
                    margin-right: #{24rpx};
                }

                text {
                    font-size: #{26rpx};
                    color: #999999;
                    margin-right: #{12rpx};
                }
            }
        }

        .app-content {
            width: #{750rpx};
            padding: #{12rpx} 0;

            .app-scroll {
                width: #{750rpx};
                padding-left: #{16rpx};
                white-space: nowrap;
                height: #{224+20+20+23rpx};

                .app-item {
                    display: inline-block;
                    width: #{224rpx};
                    height: #{224+20+20+24rpx};
                    margin: 0 #{8rpx};
                    border-radius: #{16rpx};

                    .app-image {
                        width: #{224rpx};
                        height: #{224rpx};
                        border-top-left-radius: #{16rpx};
                        border-top-right-radius: #{16rpx};
                    }

                    .app-name {
                        height: #{24+20+20rpx};
                        /* #ifndef MP-ALIPAY */
                        width: #{189rpx};
                        /* #endif */
                        /* #ifdef MP-ALIPAY */
                        width: #{195rpx};
                        /* #endif */
                        font-size: #{24rpx};
                        color: #353535;
                        line-height: #{24+20+20rpx};
                        display: inline-block;
                        overflow: hidden;
                        text-align: center;
                    }
                }
            }
        }

        .app-goods-shop {
            width: #{750rpx};
            padding: #{20rpx};

            .app-shop {
                width: #{750-20-20rpx};
                height: #{381rpx};
                padding: 0 #{24rpx};
                margin-top: #{20rpx};
                margin-bottom: #{20rpx};
                overflow: hidden;
                border-radius: #{16rpx};

                .app-top {
                    width: #{750-20-20-24-24rpx};
                    height: #{100rpx};
                    margin: #{24rpx} 0;

                    .app-image {
                        width: #{100rpx};
                        height: #{100rpx};
                        border-radius: #{8rpx};
                        float: left;
                    }

                    .app-title {
                        float: left;
                        margin-left: #{24rpx};
                        margin-top: #{36-24rpx};

                        .app-name {
                            font-size: #{28rpx};
                            color: #353535;
                        }

                        .app-number-title {
                            margin-top: #{12rpx};
                            color: #999999;
                            font-size: #{24rpx};

                            .app-sell {
                                margin-left: #{32rpx};
                            }
                        }
                    }

                    .app-button-jump {
                        float: right;
                        margin-right: #{24rpx};
                        width: #{144rpx};
                        height: #{64rpx};
                        margin-top: #{18rpx};
                        margin-bottom: #{18rpx};
                        .app-button {
                            width: #{144rpx};
                            height: #{64rpx};
                            text-align: center;
                            border: #{1rpx} solid #cccccc;
                            font-size: #{26rpx};
                            color: #666666;
                            line-height: #{64rpx};
                            border-radius: #{40rpx};
                        }
                    }
                }

                .app-bottom {
                    height: #{210+23rpx};
                    width: #{750-20-20-24-24rpx};
                    padding-bottom: #{23rpx};

                    .app-scroll {
                        height: #{210rpx};
                        width: #{750-20-20-24-24rpx};
                        white-space: nowrap;
                        margin-bottom: #{23rpx};

                        .app-item {
                            /*background-color: red;*/
                            display: inline-block;
                            width: #{210rpx};
                            height: #{210rpx};
                            margin-left: #{8rpx};
                            margin-right: #{8rpx};
                            position: relative;

                            .app-image {
                                width: #{210rpx};
                                height: #{210rpx};
                            }

                            .app-price {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: #{210rpx};
                                font-size: #{28rpx};
                                color: #ff4544;
                                height: #{50rpx};
                                text-align: center;
                                background-color: rgba(245, 245, 246, 0.5);
                            }
                        }
                    }
                }
            }
            .app-shop:first-of-type {
                margin-top: 0;
            }
            .app-shop:last-of-type {
                margin-bottom: 0;
            }
        }
    }
</style>