<template>
	<!-- 拼团单一商家 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28" color="#fff"></uni-icons>
				</view>
				<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
					<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
					<input type="text" placeholder="搜索" />
				</view>
			</view>
		</view>
		<view class="content">
			<view class="pintuan">
				<view class="shop-top">
					<view class="shop-img">
						<img src="/static/images/img/shangpintu.png" alt="">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
							alt=""
							style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
					</view>
					<view class="shop-content" @tap="goDetail('shopDetail')">
						<view class="shop-name">
							牛仔农庄(医专店)
						</view>
						<view class="shop-content-center">
							<view class="shop-rate">
								<view class="shop-rate-num">4.3</view>
								<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)"
									:value="4.3" />
							</view>
							<view class="shop-tag">
								<text
									style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
									炒菜
								</text>
							</view>
						</view>
						<view class="shop-content-bottom">
							<view class="shop-deal">
								已拼<text style="color: red;font-weight: 700;"> 12 </text>单
							</view>
							<view class="shop-deal1">
								月售 <text> 100+</text>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-bottom">
					公告：这里是第三食堂美食top1，好吃不贵，欢迎下好吃不贵，欢迎下单！欢迎下单！
				</view>
			</view>
			<view class="pintuan" style="padding: 0;margin-top:20rpx;display: flex;">
				<view class="pintuan-left">
					<view class="pintuan-left-img">
						<img src="/static/images/img/shangpintu.png" alt="">
					</view>
					<view class="pintuan-left-box">
						<view class="pintuan-left-name">
							无骨双拼|招牌炸鸡套餐
						</view>
						<view class="pintuan-left-price">
							拼团<text style="color: red;">￥59.90</text>
						</view>
					</view>
				</view>
				<view class="pintuan-right">
					<view class="pintuan-right-img">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
							alt="" />
						<view class="weipincheng">+</view>
					</view>
					<view class="pintuan-right-cha">
						差<text style="color: red;">1人</text>拼成
					</view>
				</view>
			</view>
			<view class="goods-list">
				<view class="menu-box">
					<view class="menu1">

					</view>
				</view>
				<view class="goods-member">
					<view class="goods-top">
						<view class="goods-img">
							<img src="/static/images/img/shangpintu.png" alt="">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
								alt=""
								style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
						</view>
						<view class="goods-content" @tap="goDetail('shopDetail')">
							<view class="goods-name">
								牛仔农庄(医专店)
							</view>
							<view class="goods-content-center">
								<view class="goods-deal1">
									月售 <text> 100+</text>
								</view>
								<view class="goods-tag">
									<view class="pintuan-right-img">
										<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
											alt="" />
										<view class="weipincheng">+</view>
									</view>
									<view class="pintuan-right-cha">
										差<text style="color: red;">1人</text>拼成
									</view>
								</view>
							</view>
							<view class="goods-content-bottom">
								<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
									￥90.00
								</view>
								<view class="pintuan-left-price">
									拼团<text style="color: red;">￥59.90</text>
								</view>
							</view>
						</view>
					</view>
					<view class="goods-bottom">
						<view class="goods-btn"
							style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
							直接购买
						</view>
						<view class="goods-btn">
							拼团购买￥15.00
						</view>
					</view>
				</view>
				<view class="goods-member">
					<view class="goods-top">
						<view class="goods-img">
							<img src="/static/images/img/shangpintu.png" alt="">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
								alt=""
								style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
						</view>
						<view class="goods-content" @tap="goDetail('shopDetail')">
							<view class="goods-name">
								牛仔农庄(医专店)
							</view>
							<view class="goods-content-center">
								<view class="goods-deal1">
									月售 <text> 100+</text>
								</view>
								<view class="goods-tag">
									<view class="pintuan-right-img">
										<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
											alt="" />
										<view class="weipincheng">+</view>
									</view>
									<view class="pintuan-right-cha">
										差<text style="color: red;">1人</text>拼成
									</view>
								</view>
							</view>
							<view class="goods-content-bottom">
								<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
									￥90.00
								</view>
								<view class="pintuan-left-price">
									拼团<text style="color: red;">￥59.90</text>
								</view>
							</view>
						</view>
					</view>
					<view class="goods-bottom">
						<view class="goods-btn"
							style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
							直接购买
						</view>
						<view class="goods-btn">
							拼团购买￥15.00
						</view>
					</view>
				</view>
				<view class="goods-member">
					<view class="goods-top">
						<view class="goods-img">
							<img src="/static/images/img/shangpintu.png" alt="">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
								alt=""
								style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
						</view>
						<view class="goods-content" @tap="goDetail('shopDetail')">
							<view class="goods-name">
								牛仔农庄(医专店)
							</view>
							<view class="goods-content-center">
								<view class="goods-deal1">
									月售 <text> 100+</text>
								</view>
								<view class="goods-tag">
									<view class="pintuan-right-img">
										<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
											alt="" />
										<view class="weipincheng">+</view>
									</view>
									<view class="pintuan-right-cha">
										差<text style="color: red;">1人</text>拼成
									</view>
								</view>
							</view>
							<view class="goods-content-bottom">
								<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
									￥90.00
								</view>
								<view class="pintuan-left-price">
									拼团<text style="color: red;">￥59.90</text>
								</view>
							</view>
						</view>
					</view>
					<view class="goods-bottom">
						<view class="goods-btn"
							style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
							直接购买
						</view>
						<view class="goods-btn">
							拼团购买￥15.00
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 160rpx;"></view>
		<view class="bottom">
			<view class="bottom-left">
				<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;" @tap="openPopup('car')">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
					<view class="bottom-dot">1</view>
				</view>
				<view class="bottom-price">￥18.00</view>
			</view>
			<view class="bottom-right">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
			</view>
		</view>
	
	
		<!-- 购物车弹窗 -->
		<uni-popup ref="carPopup" background-color="#fff">
			<view class="car-content">
				<view class="car-close" @tap="$refs.carPopup.close()">
					<uni-icons type="close" size="30" color="#fff"></uni-icons>
				</view>
				<view class="car-title">
					已加购商品（3）
				</view>
				<view class="goods-top">
					<view class="goods-img">
						<img src="/static/images/img/shangpintu.png" alt="">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
							alt=""
							style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
					</view>
					<view class="goods-content" @tap="goDetail('shopDetail')">
						<view class="goods-name">
							牛仔农庄(医专店)
						</view>
						<view class="goods-content-center">
							<view class="goods-deal1">
								月售 <text> 100+</text>
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
								￥90.00
							</view>
							<view class="pintuan-left-price">
								拼团<text style="color: red;">￥59.90</text>
							</view>
							<view class="goods-tag">
								<view class="pintuan-right-img">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
										alt="" />
									<view class="weipincheng">+</view>
								</view>
								<view class="pintuan-right-cha">
									差<text style="color: red;">1人</text>拼成
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {}
			}
		},
		components: {

		},
		onLoad() {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			openPopup(type){
				if(type == 'car'){
					this.$refs.carPopup.open('bottom')
				}
			},
			goDetail(type) {
				if (type == 'shopDetail') {
					uni.navigateTo({
						url: '/package1/goods/goodsDetail'
					})
				}
			},
			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/9362dfb66c0f426789584cabb3977ccc.png') no-repeat;
		width: 100%;
		height: 700rpx;
		background-size: 100%;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.title-sreach {
		width: 75%;
		display: flex;
		height: 200rpx;
	}

	.title-search {
		margin-top: 110rpx;
		display: flex;
		background: #fff;
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;
		width: 460rpx;

		input {
			height: 54rpx;
			line-height: 54rpx;
		}
	}

	.back-btn {
		padding-top: 110rpx;
	}

	.content {
		margin-top: 430rpx;
	}

	.shop-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}

	.shop-top {
		display: flex;
	}

	.shop-content {
		flex: 1;
		padding-left: 20rpx;

	}

	.shop-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.shop-content-center {
		display: flex;
		margin: 20rpx 0;
	}

	.shop-rate {
		background: rgba(249, 212, 157, 0.34);
		height: 40rpx;
		display: flex;
		border-radius: 20rpx;
	}

	.shop-rate-num {
		width: 50rpx;
		height: 100%;
		text-align: center;
		background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
		color: #fff;
		line-height: 40rpx;
		font-size: 22rpx;
		border-bottom-left-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.shop-tag {
		flex: 1;
		line-height: 40rpx;
		text-align: right;
	}

	.shop-content-bottom {
		display: flex;
	}

	.shop-deal {
		flex: 1;
	}

	.shop-bottom {
		margin-top: 20rpx;
		line-height: 40rpx;
	}

	.pintuan {
		background: #fff;
		padding: 20rpx;
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.pintuan-left {
		display: flex;
		padding: 20rpx;
		flex: 1;
	}

	.pintuan-left-img {
		width: 90rpx;
		height: 90rpx;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.pintuan-left-box {
		flex: 1;
		padding-left: 20rpx;
	}

	.pintuan-right {
		display: flex;
		margin-top: 50rpx;
		width: 30%;
	}

	.pintuan-right-img {
		height: 40rpx;
		display: flex;

		img {
			width: 40rpx;
			height: 40rpx;
			z-index: 98;
			background-size: 100%;
		}
	}

	.pintuan-left-name {
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.pintuan-left-price {
		display: inline;
		padding: 10rpx;
		background: rgba(255, 57, 57, 0.1);
		border-radius: 10rpx;
	}

	.weipincheng {
		width: 40rpx;
		height: 40rpx;
		background: rgba(166, 255, 234, 1);
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
	}

	.pintuan-right-cha {}
	
	.goods-member{
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
		background: #fff;
	}

	.goods-list {
		width: 95%;
		height: auto;
		border-radius: 20rpx;
		margin: 20rpx auto 20rpx;
	}

	.goods-top {
		padding: 20rpx;
		display: flex;
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
	}

	.goods-rate {
		background: rgba(249, 212, 157, 0.34);
		height: 40rpx;
		display: flex;
		border-radius: 20rpx;
	}

	.goods-rate-num {
		width: 50rpx;
		height: 100%;
		text-align: center;
		background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
		color: #fff;
		line-height: 40rpx;
		font-size: 22rpx;
		border-bottom-left-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.goods-deal1 {
		width: 60%;
	}

	.goods-tag {
		display: flex;
		margin: 0;
		width: 40%;
	}

	.goods-content-bottom {
		display: flex;
	}

	.goods-deal {
		flex: 1;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}

	.goods-bottom {
		display: flex;
		width: 95%;
		margin: 20rpx auto;
		height: 70rpx;
		line-height: 70rpx;
	}

	.goods-btn {
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		width: 47%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 20rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		background: #fff;
		z-index: 98;
	}

	.bottom-left {
		flex: 1;
		display: flex;
		    padding: 20rpx;

		img {
			width: 60rpx;
			height: 80rpx;
			background-size: 100%;
		}
	}
	
	.bottom-price{
		margin-left: 40rpx;
		    font-size: 40rpx;
		    color: red;
		    font-weight: 700;
		    line-height: 110rpx;
	}

	.bottom-right {
		padding-top: 20rpx;
		flex: 1;

		img {
			width: 360rpx;
			height: 100rpx;
			background-size: 100%;
		}
	}
	.bottom-dot{
		    position: absolute;
		    top: 0;
		    right: -20rpx;
		    background: red;
		    color: #fff;
		    width: 32rpx;
		    height: 32rpx;
		    border-radius: 32rpx;
		    text-align: center;
		    line-height: 32rpx;
	}
	
	.car-content{
		position: relative;
		height: 600px;
		width: 100%;
	}
	
	.car-close{
		width: 30px;
		height: 30px;
		position: absolute;
		top: -40px;
		right: 10px;
	}
	
	.car-title{
		height: 48px;
		line-height: 48px;
		width: 95%;
		margin: 0 auto;
		font-size: 14px;
		font-weight: 700;
	}
</style>