school_uni/package1/group/groupBuyDetail.vue

<template>
	<!-- 拼团商家详情页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					商家详情
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" style="display: flex;">
				<view class="left">
					<view style="display: flex;">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3721d2aa18ac4700aa7ac4dfeb272b09.png" alt="" style="width: 24px;height: 24px;"/>
						<text style="height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;margin-left: 5px;">竹仔园牛仔农庄(第六分店)</text>
					</view>
					<view style="line-height: 30px;height: 30px;color: #777;">
						<uni-icons type="location" size="13"></uni-icons>
						<text>北校区沁园春食堂3楼321窗口</text>
					</view>
					<view style="line-height: 30px;height: 30px;color: #777;">
						<uni-icons type="loop" size="13"></uni-icons>
						<text>周一到周日 10:50-21:00</text>
					</view>
				</view>
				<view class="right">
					<img @tap="makeCall('15533910775')" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt=""  style="width: 40px;height: 40px;position: absolute;top: 32px;right: 30px;"/>
				</view>
			</view>
			<view class="box1">
				<view style="display: flex;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/86004fa6b60e477ea1622fc0bf4c99de.png" alt="" style="width: 24px;height: 24px;" />
					<text style="height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;margin-left: 5px;">商家承诺</text>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<img @tap="largeImg" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/5e54d31516264fd5b056d5d6b7009e40.png" alt="" style="width: 78px;height: 24px;margin-right: 20px;" />
					<img @tap="largeImg" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d9a6c7b6ebdd4fb09b1b681133752909.png" alt="" style="width: 78px;height: 24px;" />
				</view>
			</view>
			<view class="box1">
				<view style="display: flex;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png" alt="" style="width: 24px;height: 24px;" />
					<text style="height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;margin-left: 5px;">商家公告</text>
				</view>
				<view style="color: #777;line-height: 24px;margin-top: 10px;">
					公告：这里是第三食堂美食top1，好吃不贵，欢迎下好吃不贵，欢欢迎下单迎下单！欢迎下单！
				</view>
			</view>
		</view>
		<!-- 查看大图弹出层 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="img-popup-content">
				<img :src="bigImg" alt="" style="width: 100%;height: 100%;">
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				isPintuan:true,
				bigImg:''
			}
		},
		components: {
	
		},
		onLoad() {
	
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			//查看大图
			largeImg(img) {
				this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png'
				this.$refs.imgPopup.open()
			},
			//拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '15533910775'
				});
			},
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	
	.content{
		position: absolute;
		top: 100px;
		width: 95%;
		margin-left: 2.5%;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.title-name{
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.box1{
		width: 95%;
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 10px;
		    padding: 10px;
	}
	.left{
		width: 60%;
	}
	.right{
		width: 40%;
		height: 80px;
	}
	.img-popup-content {
		width: 500rpx;
		height: 500rpx;
	}
</style>