<template>
	<div class="app-content">
		<app-swiper :height="{type: 'number',val: 750}" :tagShow="true" />
		<!-- 商品简介 -->
		<div class="shop-intro">
			<div class="app-price app-bold">
				<text>￥</text>
				<text class="app-size-34">49</text>
				<text>.00</text>
			</div>
			<div class="tui-pro-titbox">
				<div class="tui-pro-title app-size-32">谈判官明星同款耳坠韩国气质简约显脸瘦的耳环女百搭个性长款耳钉 个性水滴耳环【A2】</div>
				<button open-type="share" class="tui-share-btn tui-share-position">
					<app-tag type="gray" tui-tag-class="tui-tag-share tui-size" shape="circleLeft" size="small">
						<div class="flex-center">
							<i class="iconfont iconfenxiang"></i>
							<text class="tui-share-text tui-gray">分享</text>
						</div>
					</app-tag>
				</button>
			</div>
			<div class="shop-express app-color-3">
				<div>快递：0.00</div>
				<div>月销2000</div>
				<div>浙江杭州</div>
			</div>
		</div>
		<!-- 商品简介 -->
		<!-- 商品详情 -->
		<div class="module-wrap shop-detail">
			<div class="module-tit app-size-30">商品详情</div>
			<div class="module-det">
				<img src="../../static/images/swiper.png" alt mode="widthFix" />
			</div>
		</div>
		<!-- 商品详情 -->
		<!-- 简要说明 -->
		<div class="module-wrap shop-desc">
			<div class="module-tit app-size-30">商品详情</div>
			<div class="module-det">配送及费用： 除部分较偏地区，市区内一般免收配送费。市外配送费： 30元~100元不等。因鲜花的特殊性，需由专人配送费用高 于一般快递。 签收事宜： 通常情况下，我们由专人送到收花人手上，确保本人签收。 但特殊情况除外：比如收花人不在、不方便签收或者门卫 不让进等原因，我们将征求收花人意见或结合实际情况处 理。</div>
		</div>
		<!-- 简要说明 -->
		<app-trademark />
		<sel-popup :show="popupShow" :buyNum="buyNum" @change="changeNum" @close="hidePopup" />
		<buy-foot @buy="showPopup" />
	</div>
</template>

<script>
import appSwiper from '@/components/app-swiper'
import appTag from '@/components/module/app-tag.vue'
import appTrademark from '@/components/module/app-trademark'
import buyFoot from './components/buy-foot.vue'
import selPopup from './components/sel-popup.vue'
export default {
	name: 'goods-detail',
	components: {
		appSwiper,
		appTag,
		appTrademark,
		buyFoot,
		selPopup
	},
	data() {
		return {
			buyNum: 1,
			popupShow: false
		}
	},
	onLoad(option) {},
	methods: {
		changeNum(e) {
			this.buyNum = e.value
		},
		showPopup() {
			this.popupShow = true
		},
		hidePopup() {
			this.popupShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 120px;
		// 公共模块
		.module-wrap {
			margin-top: 20px;
			background-color: #fff;
			.module-tit {
				padding: 14px 30px;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				color: $fontColor2;
			}
		}
		// 公共模块
		.shop-intro {
			background: #fff;
			padding: 30px 0 30px 30px;
			.tui-pro-titbox {
				margin: 30px 0 20px;
				@include disFlex(center, space-between);
				.tui-pro-title {
					width: 80%;
				}
				.tui-share-btn {
					display: block;
					background: none;
					margin: 0;
					padding: 0;
					border-radius: 0;
					.tui-share-text {
						padding-left: 4px;
						color: $fontColor3;
					}
				}
				.iconfenxiang {
					font-size: 26px;
					color: $fontColor3;
					margin-right: 6px;
				}
			}
			.shop-express {
				padding-right: 30px;
				@include disFlex(center, space-between);
			}
		}
		.shop-desc {
			.module-det {
				padding: 24px;
				line-height: 48px;
			}
		}
	}
</style>
