football/plugins/book/components/app-product-list.vue

<template>
	<view class="goods-list dir-top-nowrap">
<!-- 		<view v-if="goodsList.length > 0"  class="row dir-left-nowrap main-between box-grow-1" v-for="(item, key) in goodsList" :key="key" >
			<view class="item box-grow-0" v-for="(good, index) in item"  :key="index" @click="route_go(good)">
				<view class="image-name dir-top-nowrap main-left">
					<view class="out-dialog" v-if="good.goods_stock == 0 && appSetting.is_show_stock == '1'">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
					</view>
					<image :lazy-load="true"  class="cover_pic" :src="good.cover_pic"></image>
					<view class="name t-omit">{{good.name}}</view>
				</view>
				<view class="content dir-top-nowrap main-right">
					<view class="price-bottom" v-if="good.is_level == 1">
						<app-member-price :price="good.level_price"></app-member-price>
					</view>
					<view v-if="good.discount > 0">
						<app-sup-vip :is_vip_card_user="good.is_vip_card_user" :discount="good.discount"></app-sup-vip>
					</view>
					<view class="price-btn dir-left-nowrap main-between cross-center">
						<view class="price">{{good.price_str}}</view>
						<view v-if="good.goods_stock != 0" class="btn">预约</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="row" v-for="(item, key) in goodsList" :key="key" >
			<view class="good-item dir-left-nowrap" v-for="(good, index) in item"  :key="index" @click="route_go(good)">
				<view class="box-grow-0 cover-pic">
			<!-- 		<view class="out-dialog" v-if="good.goods_stock == 0 && appSetting.is_show_stock == '1'">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
					</view> -->
					<image :lazy-load="true"  class="cover_pic" :src="good.cover_pic"></image>
					
				</view>
				<view class="box-grow-1 dir-top-nowrap main-betweens">
					<view class="box-grow-0 name t-omit t-omit-two">{{good.name}}</view>
					
					<view class="price-bottom" v-if="good.is_level == 1">
						<app-member-price :price="good.level_price"></app-member-price>
					</view>
					<view v-if="good.discount > 0">
						<app-sup-vip :is_vip_card_user="good.is_vip_card_user" :discount="good.discount"></app-sup-vip>
					</view>
					
					<view class="price-btn dir-left-nowrap main-between cross-center">
						<view class="price">{{good.price_str}}</view>
						<view v-if="good.goods_stock != 0" class="btn">预约</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    import appButton from '../components/app-button.vue';
    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: "app-product-list",
	    
        components: {
            'app-button': appButton,
			'app-member-price': appMemberPrice,
            'app-sup-vip': appSupVip,
        },
	    
        computed: {
            ...mapState({
                appImg: state => state.mallConfig.__wxapp_img.mall,
                appSetting: state => state.mallConfig.mall.setting,
            }),
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
        },

        props: [`goodsList`],
	    
	    methods: {
            route_go(data) {
            	console.log(data);
				// #ifndef MP-BAIDU
				if (data.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${data.goods_id}&sign=booking`
					});
				} else {
					uni.navigateTo({
						url: `/plugins/book/goods/goods?goods_id=${data.goods_id}`,
					});
				}
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: `/plugins/book/goods/goods?goods_id=${data.goods_id}`,
				});
				// #endif

            }
	    },
    }
</script>

<style scoped lang="scss">
	
	.goods-list {
		width: calc(100% - #{32upx});
		background-color: #f7f7f7;
		margin: #{0 16upx};
	}
	.row {
		margin-bottom: #{16upx};
		font-size: 28rpx;
		color: #353535;
	}
	.item {
		width: #{350upx};
		border-radius: #{15upx};
		background-color: #ffffff;
	}
	
	.image-name {
		height: #{396upx};
		margin-bottom: #{10upx};
		position: relative;
		.out-dialog {
			width: #{350upx};
			height: #{350upx};
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.5);
			image {
				width: #{350upx};
				height: #{350upx};
			}
		}
	}
	
	.content {
		margin: #{0 20upx};
		width: #{310upx};
		height: calc(100% - #{405upx});
	}
	.cover_pic {
		width: #{100%};
		height: #{100%};
		// width: #{350upx};
		// height: #{350upx};
		margin-bottom: #{20upx};
		border-top-right-radius: #{15upx};
		border-top-left-radius: #{15upx};
	}
	.name {
		// width: #{310upx};
		// margin: #{0 20upx};
		// font-size: #{28upx};
		// line-height: 1;
		// color: #353535;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #3d3d3d;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		
	}
	.btn {
		width: #{110upx};
		height: #{45upx};
		border-radius: #{22.5upx};
		border: #{1upx} solid #ff4544;
		font-size: #{26upx};
		color: #ff4544;
		line-height: 1;
		padding: #{9upx 0};
		text-align: center;
		background-color: #fff5f5;
	}
	.price-bottom {
		margin-bottom: #{10upx};
	}
	.price {
		// font-size: #{25upx};
		// color: #ff4544;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FF4800;
	}
	.price-btn {
		margin-top: #{10upx};
		margin-bottom: #{16upx};
	}
	.good-item{
		padding: 16rpx 24rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #e2e2e2;
	}
	.cover-pic{
		width: 138px;
		height: 110px;
		margin-right: 24rpx;
	}
	.main-between{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.main-betweens{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>