H5-ThreeDoorder/components/b-shop-list-item/b-shop-list-item.vue

<template>
	<view class="Store-List-Item" @tap="itemclick">
		<!-- 肯德基店铺列表样式 -->
		<template v-if="BrandInfor['brand_id'] == 1">
			<view class="Store-List-Item-Top">
				<view class="Store-List-Item-Top-Name">
					{{item['restaurant_name']}}
				</view>
				<b-restaurant-state></b-restaurant-state>
				<view class="Store-List-Item-Top-distance">
					{{item['distance']}}m
				</view>
			</view>
			<view class="Store-List-Item-Area">
				{{item['restaurant_address']}}
			</view>
		</template>
		<!-- 瑞幸 -->
		<template v-if="BrandInfor['brand_id'] == 13">
			<view class="Store-List-Item-Top-RX">
				<view class="Store-List-Item-Top-RX-Left">
					<view class="Store-List-Item-Top-RX-Left-Title">
						{{item['restaurant_name']}}
					</view>
					<b-restaurant-state :item="item"></b-restaurant-state>
				</view>
				<view class="Store-List-Item-Top-RX-Right" @tap.stop="openLocation(item['latitude'],item['longitude'])">
					<img class="img" :src="qnyurl('Navigation.png','rx')" alt="">
					<view class="Store-List-Item-Top-RX-Right-distance">
						{{item['distance']}}km
					</view>
				</view>
			</view>
			<view class="Store-List-Item-Area-RX">
				<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
				<view class="Store-List-Item-Area-RX-text">
					{{item['restaurant_address']}}
				</view>
			</view>
		</template>
		<!-- 停店遮罩 -->
		<view class="state-stop" v-if="item['is_open'] == 0"></view>
		<!-- 闭店弹框 -->
		<u-modal :show="show" title=" " borderRadius="20">
			<template v-slot:default>
				<view class="RX-slot-content">
					<image class="img" :src="qnyurl('closureimg.png','rx')" mode=""></image>
					<view class="text">
						抱歉！该门店未营业
					</view>
				</view>
			</template>
			<template v-slot:confirmButton>
				<view class="RX-confirmButton">
					<view class="btn" @tap="show = false">
						确定
					</view>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	/**
	 * @店铺列表组件
	 * */
	import {
		mapGetters,
	} from 'vuex';
	import mixin from '@/static/js/mixin/mixin.js';
	export default {
		name: "b-shop-list-item",
		mixins: [mixin],
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			...mapGetters({
				// 获取品牌Id
				BrandInfor: 'shopping/BrandInfor',
			}),
		},
		data() {
			return {
				// 闭店弹框
				show: false
			};
		},
		methods: {
			itemclick() {
				if (this['item']['is_open'] == 0) {
					this['show'] = true;
					return;
				}
				this.$emit('itemclick', this['item'])
			}
		}

	}
</script>

<style lang="scss">
	// 瑞幸遮罩
	.state-stop {
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.Store-List-Item {
		width: 100%;
		height: auto;
		background-color: #ffffff;
		border-radius: 15rpx;
		min-height: 155rpx;
		padding: 32rpx;
		margin-top: 20rpx;
		position: relative;

		// 肯德基样式
		&-Top {
			display: flex;
			align-items: flex-end;
			margin-bottom: 30rpx;

			&-Name {
				font-size: $FONTSIZE30;
				color: $THEMECOLOR4;
				margin-right: 20rpx;
			}

			&-distance {
				font-size: $FONTSIZE26;
				color: $THEMECOLOR5;
				flex: 1;
				text-align: right;
			}
		}

		&-Area {
			font-size: $FONTSIZE26;
		}

		// 瑞幸咖啡样式
		&-Top-RX {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&-Left {
				font-size: $FONTSIZE30;
				color: $THEMECOLOR4;

				&-Title {
					margin-bottom: 20rpx;
					font-weight: 700;
				}
			}

			&-Right {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $THEMECOLOR6;
				font-size: 26rpx;

				.img {
					width: 64rpx;
					height: 64rpx;
				}

				&-distance {
					margin-top: 15rpx;
				}
			}
		}

		&-Area-RX {
			color: #999999;
			font-size: $FONTSIZE24;
			padding-top: 22rpx;
			border-top: 1rpx solid #EDEEF0;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			&-text {
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.img {
				width: 22rpx;
				height: 26rpx;
				margin-right: 15rpx;
			}
		}

	}

	// // 闭店弹框
	// .slot-content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	.img {
	// 		width: 196rpx;
	// 		height: 169rpx;
	// 		margin-bottom: 32rpx;
	// 	}

	// 	.text {
	// 		font-size: 32rpx;
	// 		color: #333333;
	// 	}
	// }

	// .confirmButton {
	// 	display: flex;
	// 	justify-content: center;

	// 	.btn {
	// 		width: 470rpx;
	// 		height: 86rpx;
	// 		background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
	// 		border-radius: 43rpx;
	// 		font-size: 30rpx;
	// 		color: #ffffff;
	// 		text-align: center;
	// 		line-height: 86rpx;
	// 	}
	// }
</style>