H5-ThreeDoorder/components/b-shop-infor-head/b-shop-infor-head.vue

<template>
	<view class="b-shop-infor-head">
		<!-- 瑞幸 -->
		<view class="shop-top-rx shop-top" v-if="BrandInfor['brand_id'] == 13">
			<view class="shop-top-rx-infor ">
				<view class="shop-top-rx-infor-icon">
					<image class="img" :src="qnyurl('shopareaioc.png','rx')" mode=""></image>
				</view>
				<view class="shop-top-rx-infor-Name-Area">
					<view class="shop-top-rx-infor-Name-Area-name">
						{{GetShopInfor['restaurant_name']}}
					</view>
					<view class="shop-top-rx-infor-Name-Area-area">
						{{GetShopInfor['restaurant_address']}}
					</view>
				</view>
				<view class="shop-top-rx-infor-Navigation" @click="openLocation()">
					导航
				</view>
			</view>
		</view>
		
		<!-- 星巴克 -->
		<view class="shop-top-xbk shop-top" v-if="BrandInfor['brand_id'] == 10">
			<view class="shop-top-xbk-infor-Name-Area">
				<view class="shop-top-xbk-infor-Name-Area-icon">
					<image class="img" :src="qnyurl('xbk_home.png','xbk')" mode=""></image>
				</view>
				<view class="shop-top-xbk-infor-Name-Area-name">
					{{GetShopInfor['restaurant_name']}}>
				</view>
				<view class="shop-top-xbk-infor-Name-Area-map-address"  @tap="openLocation()">
					<image class="img" :src="qnyurl('map.png','xbk')" mode=""></image>
				</view>
			</view>
			<view class="shop-top-xbk-infor-Name-area">
				{{GetShopInfor['restaurant_address']}}
			</view>
		</view>
		
		<!-- 奈雪 -->
		<view class="shop-top-xbk shop-top" v-if="BrandInfor['brand_id'] == 2">
			<view class="shop-top-xbk-infor-Name-Area">
				<view class="shop-top-xbk-infor-Name-Area-icon">
					<image class="img" :src="qnyurl('xbk_home.png','xbk')" mode=""></image>
				</view>
				<view class="shop-top-xbk-infor-Name-Area-name">
					{{GetShopInfor['restaurant_name']}}>
				</view>
				<view class="shop-top-xbk-infor-Name-Area-map-address"  @tap="openLocation()">
					<image class="img" :src="qnyurl('map.png','xbk')" mode=""></image>
				</view>
			</view>
			<view class="shop-top-xbk-infor-Name-area">
				{{GetShopInfor['restaurant_address']}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import {
		isCollectionAPI,
		storeCollectionAPI,
	} from '@/request/restaurant/index.js';
	import mixin from '@/static/js/mixin/mixin.js';
	export default {
		name: "b-shop-infor-head",
		mixins: [mixin],
		data() {
			return {
				// 是否关注
				isCollection: false,
			};
		},

		computed: {
			...mapGetters({
				// 获取餐厅信息
				GetShopInfor: 'shopping/GetShopInfor',
				// 获取品牌Id
				BrandInfor: 'shopping/BrandInfor',
			}),
		},
		mounted() {
			if (this['BrandInfor']['brand_id'] == 1) {
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					restaurant_id: this['GetShopInfor']['restaurant_id']
				}
				isCollectionAPI(parameters).then(res => {
					this['isCollection'] = res ? true : false;
				})
			}
		},
		methods: {
			/**
			 * @关注或者取消关注
			 * */
			Collection() {
				let parameters = {
					lng: this['GetShopInfor']['longitude'],
					lat: this['GetShopInfor']['latitude'],
					status: !this['isCollection'],
					brand_id: this['BrandInfor']['brand_id'],
					brand_name: this['BrandInfor']['brand_name'],
					restaurant_id: this['GetShopInfor']['restaurant_id'],
					restaurant_name: this['GetShopInfor']['restaurant_name'],
					restaurant_address: this['GetShopInfor']['restaurant_address']
				}
				storeCollectionAPI(parameters).then(res => {
					this['isCollection'] = !this['isCollection'];
					if (this['isCollection']) {
						uni.showToast({
							title: '关注成功',
							icon: 'none'
						});
						return;
					};
					uni.showToast({
						title: '取消关注',
						icon: 'none'
					})
				})
			},

		}
	}
</script>

<style lang="scss">
	.shop-top{
		background-color: #FFFFFF;
	}
	// 肯德基收藏样式
	.shop-infor {
		display: flex;
		align-items: center;
		width: 100%;
		height: 131rpx;
		padding: 0 30rpx 30rpx 30rpx;

		.shop-infor-left {
			flex: 1;

			&-name {
				font-size: $FONTSIZE28;
				font-weight: 700;
				margin-bottom: 18rpx;
			}

			&-area {
				font-size: $FONTSIZE24;
				color: #999999;
			}
		}

		.shop-infor-right {
			font-size: $FONTSIZE24;
			color: $PROMPTTEXTCOLOR;
			font-size: 24rpx;
			color: #666666;
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				max-width: 36rpx;
				min-width: 36rpx;
				min-height: 36rpx;
				max-height: 36rpx;
				margin-bottom: 16rpx;
			}
		}
	}


	// 瑞幸导航样式
	.shop-top-rx {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
		&-infor {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&-icon {
				width: 37rpx;
				height: 43rpx;
				margin-right: 30rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			&-Name-Area {
				flex: 1;

				&-name {
					font-size: 30rpx;
					line-height: 65rpx;
				}

				&-area {
					color: #999999;
					font-size: 26rpx;
				}
			}

			&-Navigation {
				width: 89rpx;
				height: 43rpx;
				background: #FFFFFF;
				border: 1rpx solid #4A6FE7;
				border-radius: 22rpx;
				color: #4A6FE7;
				text-align: center;
				line-height: 43rpx;
				margin-left: 60rpx;
				font-size: 26rpx;
			}
		}

		// .shop-infor-Navigation{
		// 	width: 89rpx;
		// 	height: 43rpx;
		// 	background: #FFFFFF;
		// 	border: 1rpx solid #4A6FE7;
		// 	border-radius: 22rpx;
		// 	color: #4A6FE7;
		// 	text-align: center;
		// 	line-height: 43rpx;
		// 	margin-left: 60rpx;
		// }
		// &-icon{
		// 	.img{
		// 		width: 37px;
		// 		height: 43px;
		// 	}
		// }
	}

	.shop-top-xbk{
		width: 100%;
		padding:32rpx;
		&-infor-Name-Area{
			display: flex;
			justify-content:flex-start;
			margin-bottom: 16rpx;
			align-items: center;
			&-icon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			&-name{
				color: #333333;
				font-size: 30rpx;
				flex: 1;
			}
			&-map-address{
				width: 42rpx;
				height: 38rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		&-infor-Name-area{
			font-size: 24rpx;
			color: #777777;
		}
	}
</style>