<template>
	<view class="content" style="background: #eee;padding-bottom: 10rpx;">
		<view class="wrap">
			<u-swiper :list="list" height="750" border-radius="none"></u-swiper>
		</view>
		<view class="product-nr">
			<view class="biaoti">{{title}}</view>
			<view class="u-flex jiage">
				<view>
					<text style="font-weight: bold;">券后价¥</text>
					<text class="one">{{favourPrice}}</text>
					<text class="two">¥{{originalPrice}}</text>
				</view>
				<text class="xiaoliang">月销{{xiaoliang}}</text>
			</view>
		</view>
		<view class="product-nr" style="margin-top: 30rpx;border-radius: 10px;">
			<u-section title="您当前为免费版,升级请联系客服" sub-title="联系客服" :show-line="false" :bold="false" color="#a45711" 
			sub-color="#a45711" @click="dump('/pages/kefu/kefu')" style="margin-top: 20rpx;"></u-section>
			<view class="quan" @click="lingqu">
				<view style="width: 67%;text-align: center;">
					¥<text style="font-size:80rpx;margin:0 3%;">{{quan}}</text>优惠券
				</view>
			</view>
		</view>
		<view class="xiangqing">
			<u-collapse  event-type="close">
				<u-collapse-item :index="index" :title="item.head" v-for="(item, index) in itemList" :key="index">
					<view class="collapse-item" style="margin:auto 20upx auto 10upx;">
						<image :src="item.img_url" style="width: 100%;"></image>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="tuijian-title">
			<u-icon name="rewind-left" class="u-m-r-20"></u-icon>
			相似推荐
			<u-icon name="rewind-right" class="u-m-l-20"></u-icon>
		</view>
		<liebiao  style="margin-bottom: 150rpx;"></liebiao>
		<view class="navigation">
			<view class="left" style="margin-top: 17rpx;">
				<view class="item"  @tap="toindex">
					<u-icon name="home-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>
				<view class="item" @click="dump('/other/zuji/zuji')">
					<u-icon name="clock-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">足迹</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1">
					<view style="font-weight: bold;">¥<text style="font-size: 28rpx;margin-left: 8%;">{{tgz}}</text></view>
					<view>推广赚</view>
				</view>
				<view class="buy btn u-line-1">
					<view style="font-weight: bold;">¥<text style="font-size: 28rpx;margin-left: 8%;">{{zms}}</text></view>
					<view>自买省</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { dumpUrl, wxOauth } from '@/common/util.js';
	import { mapState } from 'vuex';
	import liebiao from '@/components/liebiao.vue'
	export default {
		components:{
			liebiao
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				list: [{
						img_url: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg'
					},
					{
						img_url: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg'
					},
					{
						img_url: 'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg'
					}
				],
				favourPrice:123,
				originalPrice:196,
				xiaoliang:'10万+',
				title:'秋装衬衫女2020新款设计款拼接雪纺长袖修身褶皱设计短款显瘦上衣',
				itemList: [{
					head: "商品详情",
					img_url:'https://gd2.alicdn.com/imgextra/i2/4065419919/O1CN010QvQFi2N8xCB2XPcg_!!4065419919.jpg',
					disabled: true
				}],
				quan:'50',
				tgz:'4.51',
				zms:'2.51'
			}
		},
		mounted() {
			
		},
		methods: {
			dump(url) {
				dumpUrl(url);
			},
			swiperChange(e) {
				this.indexs = e.detail.current;
				//向上透出模板切换事件，返回banner对象
				this.$emit('onSwiperChenge', this.list[e.detail.current])
			},
			lingqu(){
				uni.showToast({
					title: '领取成功',
					icon: 'none'
				})
			},
			toindex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-nr{
		padding: 20rpx 20rpx 30rpx 20rpx;
		background: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.jiage{
		justify-content: space-between;
		color: #a35612;
	}
	.jiage .one{
		font-weight: bold;
		font-size: 40upx;
		margin-left: 6rpx;
	}
	.jiage .two{
		color: #888888;
		text-decoration: line-through;
		margin-left: 20upx;
	}
	.xiaoliang{
		color: #888888;
	}
	.biaoti{
		line-height: 1.5;
		margin-bottom: 25upx;
	}
	.u-section{
		padding: 15upx;
		background: #fac897;
	}
	.u-collapse{
		margin-top: 30upx;
		padding:15upx 10upx 15upx 20upx;
		background: #fff;
		border-radius: 10px;
	}
	uni-image{
		height:720upx;
		overflow: inherit;
	}
	.tuijian-title{
		margin-top: 15upx;
		padding-top: 30upx;
		text-align: center;
		color: #a35612;
		font-size: 35upx;
		font-weight: bold;
	}
	.quan{
		margin-top: 30rpx;
		font-size: 35rpx;
		padding:20rpx 0;
		font-weight: bold;
		background: url(../../static/quan.png) no-repeat;
		background-size: 100% 100%;
		color: #a35612;
	}
	.navigation {
		position: fixed;
		display: flex;
		justify-content: space-between;
		width: 100%;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		bottom: 0;
		z-index: 99;
		.left {
			display: flex;
			font-size: 20rpx;
			.item {
				margin: 0 30rpx;
				text-align: center;
				&.car {
					text-align: center;
					position: relative;
					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-right: 3%;
			.btn {
				padding: 5rpx 70rpx;
				border-radius: 40rpx;
				color: #ffffff;
			}
			.cart {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				background:linear-gradient(to bottom,#ff7c00,#433023);
				font-size: 22rpx;
			}
			.buy {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				font-size: 22rpx;
				background:linear-gradient(to bottom,#f88f07,#f81107);
			}
		}
	}
	
/*#ifdef MP-WEIXIN*/
	.xiangqing{
		background: #fff;
		margin-top: 30rpx;
		padding: 15rpx 30rpx;
		border-radius: 10px;
	}
/*#endif*/
</style>
