<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="one_1">

						</view>
					</view>
				</scroll-view>
			</view>
			<view class="two">
				<uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft"
					@buttonClick="toNavright" />
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				// 底部菜单
				options: [{
						icon: 'shop',
						text: '店铺',
						type: 'shop',
						route: 'pagesHome/shop/index',
					},
					{
						icon: 'cart',
						text: '购物车',
						type: 'market',
						route: 'pages/market/index',
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff',
						type: '0'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff',
						type: '1'
					}
				],
			};
		},
		onLoad: function(e) {

		},
		onShow: function() {

		},
		onUnload: function() {

		},
		methods: {
			// 店铺,购物车
			toNavleft(e) {
				const that = this;
				if (e.content.type == 'shop') {
					that.toShop();
				} else if (e.content.type == 'market') {
					let obj = {
						route: e.content.route
					}
					that.toPath(obj)
				}
			},
			// 加入购物车,立即购买
			toNavright(e) {
				const that = this;
				that.$set(that, `popupShow`, '1');
				that.$set(that, `btn_type`, e.content.type);
				that.$refs.specShow.open();
			},

		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;
		}

		.two {
			width: 100vw;
			height: 8vh;
			overflow: hidden;
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>
