hlm_pl_mall_h5/pages/home/common/CommonStoreHeader.vue

<template>
	<view>
		<title-header />
		<view class="header" :style="{backgroundImage:'url('+store.mb_title_img+')'}">
			<view class="content-wrapper">
				<view class="avatar" @click="goStoreabout">
					<image class="img" mode="aspectFit" :src="store.store_avatar">
				</view>
				<view class="content">
					<view class="store_name">{{store.store_name}}<text class="ml-5"
							v-if="(store.is_platform_store && config.business_licence) || store.business_licence_number_electronic"
							@click="showPopup('imageVisible')"><text class="iconfont">&#xe621;</text></text></view>
					<view>
						<uni-rate :size="14" :readonly="true" :value="parseInt(store.store_credit_percent/100*5)" />
					</view>
					<view class="follow_number">
						{{store.store_collect}}人收藏
					</view>
					<view class="store_address" v-if="store.store_address" @click="goMap()">
						<text class="iconfont">&#xe6d3;</text>
						<text class="span" v-if="store.store_address">{{store.store_address}}</text>
					</view>
				</view>
				<view class="follow_panel" :class="{'active':store.is_favorate}">
					<view class="follow_button" @click="toggleFavorite">
						<text class="iconfont" v-if="!store.is_favorate">&#xe64e;</text>
						{{favoriteName}}
					</view>

				</view>
			</view>
			<view class="background">
				<image mode="aspectFit" v-if="store.store_logo" :src="store.store_logo" width="100%" height="100%">
					<image mode="aspectFit" v-else :src="store.store_logo" width="100%" height="100%">
			</view>
			<uni-popup ref="imageVisible" class="middle-popup">
				<image class="img" mode="aspectFit" v-if="store.business_licence_number_electronic"
					:src="store.business_licence_number_electronic">
					<image class="img" mode="aspectFit" v-if="store.is_platform_store && config.business_licence"
						:src="config.business_licence">
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import TitleHeader from '../../TitleHeader'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		addFavoriteStore,
		delFavoriteStore
	} from '../../../api/memberFavorite'
	export default {
		name: 'CommonStoreHeader',
		data() {
			return {}
		},
		props: ['store'],
		computed: {
			...mapState({
				config: state => state.config.config,
			}),
			favoriteName() {
				return this.store.is_favorate ? '已收藏' : '收藏'
			}
		},
		components: {
			TitleHeader,
		},
		created: function() {

		},
		methods: {
			showPopup(id) {
				this.$refs[id].open()
			},
			hidePopup(id) {
				this.$refs[id].close()
			},
			goStoreabout: function() {
				uni.navigateTo({
					url: '/pages/home/storeabout/Storeabout?id=' + this.store.store_id
				})
			},
			goMap() {
				uni.navigateTo({
					url: '/pages/home/storedetail/Storemap?id=' + this.store.store_id
				})
			},
			toggleFavorite() {
				if (!this.store.is_favorate) {
					addFavoriteStore(this.store.store_id).then(
						response => {
							uni.showToast({
								icon: 'none',
								title: response.message
							})
							this.store.is_favorate = 1
							this.store.store_collect++
							this.$forceUpdate()
						},
						error => {
							uni.showToast({
								icon: 'none',
								title: error.message
							})
						}
					)
				} else {
					delFavoriteStore(this.store.store_id).then(
						response => {
							uni.showToast({
								icon: 'none',
								title: response.message
							})
							this.store.is_favorate = 0
							this.store.store_collect--
							this.$forceUpdate()
						},
						error => {
							uni.showToast({
								icon: 'none',
								title: error.message
							})
						}
					)
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	.dot {
		position: absolute;
		width: .5rem;
		height: .5rem;
		background: red;
		border-radius: 50%;
		top: .2rem;
		right: 0;
	}

	.header {
		background: $primaryColor;
		color: #fff;
		overflow: hidden;
		position: relative;
		background-position: center;
		background-size: auto 100%;
	}

	.header .content-wrapper {
		-ms-flex-align: center;
		-webkit-box-align: center;
		align-items: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 0.8rem $pageSpace;
		position: relative;
	}

	.header .content-wrapper .avatar {
		-ms-flex: 0 0 3rem;
		-webkit-box-flex: 0;
		flex: 0 0 3rem;
		margin-right: 0.4rem;
		width: 3rem;
	}

	.header .content-wrapper .avatar .img {
		border-radius: 0.2rem;
		width: 3rem;
		height: 3rem;
	}

	.header .content-wrapper .content {
		position: relative;
		width: 8rem;
	}

	.header .content-wrapper .content .store_name {
		font-size: $h2;
		font-weight: 700;
	}

	.header .content-wrapper .content .store_address .span {
		font-size: $h6
	}

	.follow_number {
		line-height: 0.7rem;
		font-size: $h6;
		color: #fff;
		margin-top: 0.1rem;
	}

	.follow_panel {
		position: absolute;
		top: 1rem;
		right: $pageSpace;
	}

	.follow_panel .follow_button {
		display: block;
		background: #fff;
		border: 1px solid #fff;
		border-radius: 2.5rem;
		padding: 0 0.4rem;
		line-height: 1.2rem;
		font-size: $fontSize;
		color: $primaryColor;
		width: 2.4rem;
		text-align: center
	}

	.follow_panel.active .follow_button {
		background: $primaryColor;
		border-color: #fff;
		color: #fff;
	}

	.follow_panel .follow_button i {
		line-height: 1.2rem;
	}

	.header-more {
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
		position: absolute;
		top: 0.5rem;
		right: 0;
		color: #fff;
		text-align: center;
		font-size: $h1;
	}

	.header .background {
		background: #2c3b53;
		-webkit-filter: blur(0.5rem);
		filter: blur(0.5rem);
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	.middle-popup {
		width: 80%
	}

	.middle-popup .img {
		max-width: 100%
	}
</style>