<template>
	<view>
		<view class="top-fixed" :style="'height:' + systems.barHeight + 'rpx;'">
			<view class="back" :style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<image src="../static/images/back.png"></image>
			</view>
			<view class="ss" :style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<image src="../static/images/ssico.png"></image>
			</view>
			<view class="guan" :style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<view class="guan-c ddflex">
					<image src="../static/images/gz_white.png"></image>关注
				</view>
			</view>
		</view>
		<view class="content">
			<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="shop-img"></image>
			<view class="shop">
				<view class="shop-info ddflex">
					<view class="fflex">
						<view class="shop-name tover">智企云助手（中电软件园店）</view>
						<view class="shop-datas">快送约43分钟·月售1438·开发票</view>
					</view>
					<view class="shop-pic">
						<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="shop-logo"></image>
					</view>
				</view>
				<view class="shop-news tover">公告：嗨！欢迎，欢迎，欢迎，欢迎来到智企云助手（中电软件园店）</view>
				<view class="coupons ddflex">
					<view class="li ddflex">
						<view class="cp-l ddflex fflex">
							<image src="../static/images/guan.png"></image>
							<view class="cp-money"><text>￥</text>6</view>
							<view class="cp-in">无门槛</view>
						</view>
						<view class="cp-r ddflex">兑</view>
					</view>
					<view class="li ddflex">
						<view class="cp-l ddflex fflex">
							<view class="cp-money"><text>￥</text>6</view>
						</view>
						<view class="cp-r ddflex">兑</view>
					</view>
					<view class="li ddflex">
						<view class="cp-l ddflex fflex">
							<image src="../static/images/quan.png"></image>
							<view>0.02折卡券</view>
						</view>
						<view class="cp-r ddflex">购</view>
					</view>
				</view>
				<view class="discount ddflex">
					<view class="ddflex fflex">
						<view class="li ddflex">22减1</view>
						<view class="li ddflex">80减10</view>
						<view class="li ddflex">30减5</view>
						<view class="li ddflex">配送费优惠</view>
					</view>
					<view class="dis-t ddflex">3个优惠<image src="../../static/pages/images/bico.png"></image></view>
				</view>
			</view>
			<view class="order ddflex">
				<view class="ddflex">集满送5元红包<image src="../static/images/wen.png"></image></view>
				<view class="count ddflex">
					<text class="active"></text>
					<text></text>
					<text></text>
					<text></text>
					<view>0/4 单</view>
				</view>
			</view>
			<view class="tabs ddflex">
				<view class="tab ddflex fflex">
					<view class="li ddflex active">点餐<image src="../static/images/backtop.png" class="backtop"></image></view>
					<view class="li">评价<text>4.6</text></view>
					<view class="li">商家<text>故事</text></view>
				</view>
				<view class="pin ddflex">好友拼单</view>
			</view>
			<view class="sbanner" v-if="bannerList && bannerList.length > 0">
				<swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
					<block v-for="(item, index) in bannerList" :key="index">
						<swiper-item @click="clickBanner(item)"><image lazy-load="true" :src="item" mode="aspectFill"></image></swiper-item>
					</block>
				</swiper>
				<view class="dots dflex">
					<block v-for="(item, index) in bannerList" :key="index"><view :class="['dot', index == swiperCurrent ? 'active' : '']"></view></block>
				</view>
			</view>
			<view class="recommend">
				<navigator url="" hover-class="none" class="tits ddflex">
					<view>商家推荐</view>
					<image src="../../static/pages/images/more.png" class="rico"></image>
				</navigator>
				<view class="rec-list ddflex">
					<navigator url="" hover-class="none" class="li">
						<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="rec-img"></image>
						<view class="rec-title tover">商品名称商品名称商品名称</view>
						<view class="res-op ddflex">
							<view class="unit ddflex">
								<view class="sale"><text>￥</text>1.99</view>
								<view class="del">￥8</view>
							</view>
							<image src="../../static/pages/images/jia.png" class="jia"></image>
						</view>
					</navigator>
					<navigator url="" hover-class="none" class="li">
						<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="rec-img"></image>
						<view class="rec-title tover">商品名称商品名称商品名称</view>
						<view class="res-op ddflex">
							<view class="unit ddflex">
								<view class="sale"><text>￥</text>1.99</view>
								<view class="del">￥8</view>
							</view>
							<image src="../../static/pages/images/jia.png" class="jia"></image>
						</view>
					</navigator>
					<navigator url="" hover-class="none" class="li">
						<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="rec-img"></image>
						<view class="rec-title tover">商品名称商品名称商品名称</view>
						<view class="res-op ddflex">
							<view class="unit ddflex">
								<view class="sale"><text>￥</text>1.99</view>
								<view class="del">￥8</view>
							</view>
							<image src="../../static/pages/images/jia.png" class="jia"></image>
						</view>
					</navigator>
				</view>
			</view>
			<view class="shop-pro ddflex">
				<view class="shop-l">
					<view class="li ddflex active"><image src="../static/images/yimai.png"></image>买过</view>
					<view class="li ddflex"><image src="../static/images/hot.png"></image>热销</view>
					<view class="li ddflex"><image src="../static/images/hui.png"></image>优惠</view>
					<view class="li ddflex">下饭虎邦</view>
					<view class="li ddflex">清润豆花套餐</view>
					<view class="li ddflex">满减专区</view>
					<view class="li ddflex">热销煲仔</view>
					<view class="li ddflex">精选煲仔</view>
					<view class="li ddflex">饮料特惠套餐</view>
					<view class="li ddflex">品质套餐</view>
					<view class="li ddflex">汤羹佐引</view>
					<view class="li ddflex">折扣优惠</view>
				</view>
				<view class="shop-r">
					<view class="tit">买过</view>
					<view class="buy">
						<view class="li ddflex">
							<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="buy-img"></image>
							<view class="buy-tit tover fflex">商品名称商品名称商品名称</view>
							<view class="buy-count ddflex">1次</view>
							<view class="sale"><text>￥</text>19.9</view>
							<image src="../../static/pages/images/jia.png" class="jia"></image>
						</view>
						<view class="li ddflex">
							<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="buy-img"></image>
							<view class="buy-tit tover fflex">商品名称商品名称商品名称</view>
							<view class="buy-count ddflex">1次</view>
							<view class="sale"><text>￥</text>19.9</view>
							<image src="../../static/pages/images/jia.png" class="jia"></image>
						</view>
					</view>
					<view class="tit">热销<text>大家喜欢吃，才叫真好吃</text></view>
					<view class="pro-list">
						<view class="li ddflex">
							<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="pro-img"></image>
							<view class="fflex">
								<view class="pro-tit">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
								<view class="pro-bri tovers">商品简介商品简介商品简介商品简介商品简介</view>
								<view class="sale-stock">月售 112</view>
								<view class="zhe ddflex">
									<view class="li ddflex">7.7折</view>
								</view>
								<view class="res-op ddflex">
									<view class="unit ddflex">
										<view class="sale"><text>￥</text>1.99</view>
										<view class="del">￥8</view>
									</view>
									<image src="../../static/pages/images/jia.png" class="jia"></image>
								</view>
							</view>
						</view>
						<view class="li ddflex">
							<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="pro-img"></image>
							<view class="fflex">
								<view class="pro-tit">商品名称商品名称商品名称商品</view>
								<view class="pro-bri tovers">商品简介商品简介商品简介商品简介商品简介</view>
								<view class="sale-stock">月售 112</view>
								<view class="zhe ddflex">
									<view class="li ddflex">7.7折</view>
								</view>
								<view class="res-op ddflex">
									<view class="unit ddflex">
										<view class="sale"><text>￥</text>1.99</view>
										<view class="del">￥8</view>
									</view>
									<image src="../../static/pages/images/jia.png" class="jia"></image>
								</view>
							</view>
						</view>
						<view class="li ddflex">
							<image src="../../static/pages/images/mbg.png" mode="aspectFill" class="pro-img"></image>
							<view class="fflex">
								<view class="pro-tit">商品名称商品名称商品名称商品</view>
								<view class="pro-bri tovers">商品简介商品简介商品简介商品简介商品简介</view>
								<view class="sale-stock">月售 112</view>
								<view class="zhe ddflex">
									<view class="li ddflex">7.7折</view>
								</view>
								<view class="res-op ddflex">
									<view class="unit ddflex">
										<view class="sale"><text>￥</text>1.99</view>
										<view class="del">￥8</view>
									</view>
									<image src="../../static/pages/images/jia.png" class="jia"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			systems: '',
			swiperCurrent: 0,
			bannerList: [
				'../../static/pages/images/mbg.png',
				'../../static/pages/images/mbg.png',
				'../../static/pages/images/mbg.png'
			]
		};
	},
	onLoad: function(options) {
	},
	onShow(){
	},

	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	}
};
</script>

<style>
	@import "./shop.css";
</style>
