rrys121/pages/store/info/index.vue

<template>
	<view class="storeInfo" :style="colorStyle">
		<view class="headerBg">
			<image :src="storeInfo.background_image" mode="aspectFill" class="image"></image>
			<view class="shade"></view>
			<!-- #ifdef MP -->
			<view :style="{height: getHeight.barTop+'px'}"></view>
			<view :style="{height: getHeight.barHeight+'px'}"></view>
			<!-- #endif -->
			<view style="height: 224rpx;"></view>
		</view>
		<view class="container">
			<!-- #ifdef MP -->
			<NavBar titleText="店铺信息" textColor="#FFFFFF" iconColor="#FFFFFF" showBack></NavBar>
			<!-- #endif -->
			<view class="content">
				<view class="title-box">
					<image :src="storeInfo.image" class="logo"></image>
					<view class="title">{{storeInfo.name || ''}}</view>
					<view class="address">{{(storeInfo.address+storeInfo.detailed_address) || ''}}</view>
				</view>
				<view v-if="latitude" class="map-box">
					<map name="" style="width: 100%; height: 100%;" :scale="18" :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="showMaoLocation"></map>
				</view>
				<view class="qrcode-box acea-row row-between row-middle">
					<view class="name">店铺二维码</view>
					<view class="value">
						<text class="iconfont icon-ic_QRcode" @click="dialogShow = true"></text>
					</view>
				</view>
				<view class="time-box">
					<view class="item acea-row">
						<view class="name">店铺简介</view>
						<view class="value">{{storeInfo.introduction}}</view>
					</view>
					<view class="item acea-row">
						<view class="name">营业时间</view>
						<view class="value">{{storeInfo.day_start}}-{{storeInfo.day_end}}</view>
					</view>
					<view class="item acea-row">
						<view class="name">所在地区</view>
						<view class="value">{{storeInfo.address}}</view>
					</view>
					<view class="item acea-row">
						<view class="name">联系电话</view>
						<view class="value">{{storeInfo.phone}}</view>
					</view>
				</view>
			</view>
			<navigator url="" open-type="navigateBack" hover-class="none" class="btn">查看全部商品</navigator>
		</view>
		<view v-if="dialogShow">
			<view class="mask"></view>
			<view class="dialog">
				<view class="title">{{storeInfo.name}}</view>
				<!-- #ifdef MP -->
				<image :src="storeInfo.qrcode.routine" class="image"></image>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<image v-if="$wechat.isWeixin()" :src="storeInfo.qrcode.wechat" class="image"></image>
				<view class="acea-row row-center-wrapper" style="margin: 36rpx 0 22rpx;" v-else>
					<w-qrcode :options="config.qrc"></w-qrcode>
				</view>
				<!-- #endif -->
				<view class="tips">长按识别二维码进入店铺</view>
				<text class="iconfont icon-ic_close1" @click="dialogShow = false"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import colors from '@/mixins/color.js';
	import {
		getStoreData
	} from '@/api/store.js';

	export default {
		components: {
			NavBar
		},
		mixins: [colors],
		data() {
			return {
				getHeight: this.$util.getWXStatusHeight(),
				store_id: 0,
				storeInfo: {
					latitude: 0,
					longitude: 0,
					day_start: '',
					day_end: '',
				},
				latitude: 0,
				longitude: 0,
				markers: [],
				dialogShow: false,
				config: {
					qrc: {
						code: '',
						size: 380, // 二维码大小
						level: 3, //等级 0～4
						bgColor: '#FFFFFF', //二维码背景色 默认白色
						border: {
							color: ['#eee', '#eee'], //边框颜色支持渐变色
							lineWidth: 3, //边框宽度
						},
						color: ['#333', '#333'], //边框颜色支持渐变色
					}
				},
			}
		},
		onLoad(options) {
			this.store_id = options.store_id;
			// #ifndef MP
			this.config.qrc.code = '/pages/store/home/index?id=' + options.store_id;
			// #endif
			this.getStoreData();
		},
		methods: {
			showMaoLocation() {
				let data = {
					latitude: Number(this.storeInfo.latitude),
					longitude: Number(this.storeInfo.longitude),
					name: this.storeInfo.name,
					address: `${this.storeInfo.address+this.storeInfo.detailed_address}`,
				};
				// #ifdef H5
				if (this.$wechat.isWeixin()) {
					data.scale = 13;
					return this.$wechat.seeLocation(data);
				}
				// #endif
				uni.openLocation(data);
			},
			getStoreData() {
				getStoreData({
					store_id: this.store_id
				}).then(res => {
					this.storeInfo = res.data;
					this.$nextTick(() => {
						this.latitude = res.data.latitude
						this.longitude = res.data.longitude
						this.markers = [{
							id: res.data.id,
							latitude: res.data.latitude,
							longitude: res.data.longitude,
							iconPath: '../static/marker-icon.png',
							width: 42,
							height: 42,
							callout: {
								content: res.data.name,
								bgColor: '#FFFFFF',
								padding: 6,
								borderRadius: 8,
								textAlign: 'center',
								display: 'ALWAYS'
							}
						}];
					})
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		.image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.shade {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.4047) 0%, #F5F5F5 100%);
		}
	}

	.storeInfo {
		.container {
			position: relative;
			padding: 108rpx 20rpx 0;
		}

		.content {
			padding: 0 32rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
		}

		.title-box {
			position: relative;
			// min-height: 176rpx;
			padding-top: 104rpx;
			padding-bottom: 32rpx;
			text-align: center;

			.logo {
				position: absolute;
				top: -68rpx;
				left: 50%;
				width: 132rpx;
				height: 132rpx;
				border-radius: 12rpx;
				transform: translateX(-50%);
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
			}

			.address {
				margin-top: 20rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				color: #666666;
			}
		}

		.time-box {
			padding: 32rpx 0;

			.item {
				margin-top: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;

				&:first-child {
					margin-top: 0;
				}
			}

			.name {
				font-weight: 500;
				color: #333333;
			}

			.value {
				flex: 1;
				min-width: 0;
				padding-left: 32rpx;
				color: #666666;
			}
		}

		.qrcode-box {
			padding: 40rpx 0 32rpx;
			border-bottom: 2rpx solid #F8F8F8;
			line-height: 46rpx;

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.iconfont {
				font-size: 38rpx;
				color: #333333;
			}
		}

		.map-box {
			height: 352rpx;
			border-radius: 16rpx;
			background: #DFDFDF;
			overflow: hidden;
		}

		.btn {
			height: 88rpx;
			border-radius: 16rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			text-align: center;
			font-size: 28rpx;
			line-height: 88rpx;
			color: var(--view-theme);
		}

		.dialog {
			position: fixed;
			top: 50%;
			right: 65rpx;
			left: 65rpx;
			z-index: 6;
			max-width: 620rpx;
			padding: 60rpx 0 42rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			transform: translateY(-50%);

			.title {
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
			}

			.image {
				display: block;
				width: 420rpx;
				height: 420rpx;
				margin: 36rpx auto 22rpx;
			}

			.tips {
				text-align: center;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #999999;
			}

			.iconfont {
				position: absolute;
				bottom: -108rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 60rpx;
				color: #CCCCCC;
			}
		}
	}

	w-qrcode {}
</style>