<template>
    <view class="container">
        <view class="D1">
            <!-- 轮播图 -->
            <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
                <swiper-item v-for="(item) in infos" :key="item.goods_id">
                    <image :src="item.img" mode="scaleToFill"></image>
                </swiper-item>
            </swiper>
            <view class="D1_price">￥{{price}}</view>
            <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
            <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
        </view>
        <view class="D2" v-if="goodType === 0 || goodType === 3">
            <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
            <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
            <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
        </view>
        <view class="D2" v-if="goodType === 1">
            <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
            <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
            <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
        </view>
        <view class="D2" v-if="goodType === 2">
            <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
            <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
            <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
        </view>
		
        <view class="D3">
			<view class="screenBar">
				<view  v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)"  >
						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
				</view>
			</view>
			<view class="screen-item " v-if="current ===0">
				<view class="D3_list">
					<view v-for="(item) in parameter" :key="item.key">
						<image class="D3_image"  v-bind:src = "item.img"></image>
						<span>{{item.standard}}</span>
						<span>{{item.slength}}</span>
					</view>
				</view>
			</view >
			<view class="screen-item " v-if="current ===1">
				<view class="D3_list">
					<view>主体</view>
					<view>商品产地：韩国</view>
					<view>包装清单：彩色隐形 * 1</view>
				</view>
			</view >
			<view class="screen-item " v-if="current ===2">
				<view class="customerService">
					<view class="serviceItem" >
						<view class="title">
							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
							<text class="titleText">卖家服务</text>
						</view>
						<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
					</view>
					<view class="serviceItem" >
						<view class="title">
							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
							<text class="titleText">平台承诺</text>
						</view>
						<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
					</view>
					<view class="serviceItem">
						<view class="title">
							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
							<text class="titleText">正品保证</text>
						</view>
						<view class="itemContent">向您保证所售商品均为正品行货</view>
					</view>
					<view class="serviceItem2">
						<view class="title">
							<text class="titleText">权利申明</text>
						</view>
						<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
					</view>
					<view class="serviceItem2">
						<view class="title">
							<text class="titleText">价格保证</text>
						</view>
						<view class="itemContent">
							<view class="itemContent-child">
								<text class="contentTitle">平台价:</text>
								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
							</view>
							<view class="itemContent-child">
								<text class="contentTitle">划线价:</text>
								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
							</view>
							<view class="itemContent-child">
								<text class="contentTitle">平折扣:</text>
								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
							</view>
							<view class="itemContent-child">
								<text class="contentTitle">异常问题:</text>
								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
							</view>
							
						</view>
					</view>
				</view>
			</view >
        </view>
        <view class="D4" v-if="current !==2">
            <view class="D4_esvalue">
                <view>{{esvalue}}</view>
                <view class="D4_2">
					<view class="star" v-for="o in starCount" :key="o">
						<image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
					</view>
				</view>
            </view>
            <view class="D4_list">
                <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
            </view>
        </view>
        <view class="D5" v-if="current !==2">
            <view class="D5_fixed1">
                <image src="/static/img/detail/hr.png"></image>
                <view>商品详细</view>
                <image src="/static/img/detail/hr.png"></image>
            </view>
            <view class="D5_all">
                <image v-bind:src="imgAll"></image>
            </view>
            <view class="D5_photoes">
                <view class="D5_photoes1">
                    <view v-for="(photoes) in photoes" :key="photoes.value">
                        <image  v-bind:src = "photoes.img"></image>
                        <view>{{photoes.value}}</view>
                    </view>
                </view>
                <view class="D5_logo1">帕森防蓝光镜片</view>
                <view class="D5_logo2">健康护眼，我们是认真的！</view>
                <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
            </view>
        </view>
        <view class="D6" v-if="current !==2">
            <view class="D6_v1">CHARM DETAIL</view>
            <view class="D6_v2">细节展示</view>
            <view ><image v-bind:src="imgDetail"></image></view>
            <view>........................................................................</view>
            <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span  class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
        </view>

        <!-- 底部菜单 -->
        <view class="botton">
            <view class="botton_1"><image  v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
            <view class="botton_2">
                <view class="botton_input">加入购物车</view>
                <view class="botton_now" @click="goConfirmOder">立即购买</view>
            </view>
        </view>
    </view>
</template>

<script>
	import WucTab from '@/components/Wuc-tab/Wuc-tab.vue';
export default {
	components: {WucTab},
    data(){
        return {
            name:'商品名称',
			goodType:1,
            price: 120,
            number: 391,
			screenItems: [
				{current:0,text:'商品保障'},
				{current:1,text:'规格参数'},
				{current:2,text:'售后保障'},
				],
			current: 0,
			starCount:5,
            infos: [
                { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
            	{ goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
            	{ goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
            	{ goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
            ],
            parameter:[
                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
                {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
            ],
            assess:[
                {key: 0, Iassess: '价格实惠'},
                {key: 1, Iassess: '美观大方'},
                {key: 2, Iassess: '易搭配'}
            ],
            esvalue:'宝贝好评率 100%',
            introduction:{
                material:'钛合金',
                func:'抗疲劳/防辐射',
                rate: 1.6
            },
            imgAll:'/static/img/detail/d8.png' ,
            photoes:[
                {value:'日常办公', img:'/static/img/detail/d9.png'},
                {value:'上网', img:'/static/img/detail/d10.png'},
                {value:'追剧', img:'/static/img/detail/d11.png'},
                {value:'玩游戏', img:'/static/img/detail/d12.png'},
            ],
            imgDetail:'/static/img/detail/d13.png',
            imgShop:{
                img:'/static/tab-cart.png',
                IsShown: false
            }
        }
    },
	methods:{
		goConfirmOder(){
			uni.navigateTo({
				url: '../confirmOrder/confirmOrder',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		tabChange(e) {
			if (this.current !== e) {
				this.current = e;
			}
		}
	}
}
</script>
<style lang='scss'>
    .container{
        background-color:#f8f8f8 ;
    }
    .D1,.D2,.D3,.D4,.D6{
        background: #ffffff;
        margin-bottom: 10px;
        padding:8px 20px 8px 20px;
        box-sizing: border-box;
			.swiperImage {
			    width: 684rpx;
			    height: 512rpx;
			    image {
			        width: 100%;
			        height: 100%;
			        border-radius: 16rpx;
			    }
			}
    }
    .D5{
        background: #ffffff;
        padding:8px 20px 8px 20px;
        box-sizing: border-box;
    }
    .swiperImage{
        width: 100%;
        height: 560rpx;
        .swiper-item{
            width: 100%;
            image{
                width: 100%;
            }
        }
    }
    .D1{
        .D1_price{
            color: #EB5D3B;
            font-size: 18px;
            margin-top: 5px;
            font-family: 'PingFangSC-Semibold';
        }
        .D1_name{
            font-size: 16px;
            font-family: 'PingFangSC-Semibold';
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            .D1_name1{
                font-weight: bold;
				font-size: 16px;
				color: #333333;
            }
            .D1_number{
                color: #999999 ;
                font-size: 14px;
                font-family: 'PingFangSC-Regular';
            }
        }
        .D1_spans{
            font-size: 10px;
            color:#999999;
            margin-top: 5px;
            span{
                height: 14px;
                margin-right: 10px;
            }
        }

    }
    .D2{
        font-size: 14px;
        font-family: 'PingFangSC-Regular';
        view{
            height: 24px;
        }
        .D2_span1{
            color: #999999;
        }
        .D2_span2{
            color: #333333;
        }
    }
    .D3{
		.screenBar{
			width: 670rpx;
			margin-top: 20rpx;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: #333333;
			transition:all 0.2s;
		}
		.screen-item{
			font-size: 32rpx;
			color: #333333;
			display: flex;
			transition:all 0.2s;
			.D3_list{
			    margin-bottom: 4px;
			}
			.D3_list view{
			    display: flex;
			    align-content: center;
				font-size: 14px;
				color: #333333;
			}
			.D3_list image{
			    width: 50px;
			    height: 25px;
			    margin-right: 6px;
			}
			.D3_list span{
			    margin-left: 6px;
			    margin-right: 5px;
			    font-family: 'PingFangSC-Regular';
			}
		}
		.active{
			border-bottom: 4rpx solid #FF6B4A;
		}
		.customerService{
			margin-bottom: 90rpx;
			.serviceItem{
				margin-bottom: 32rpx;
				.title{
					display: flex;flex-direction: row;
					align-items: center;
					.titleText{
						font-size: 14px;
						color: #333333;
						margin-bottom: 12rpx;
					}
				}
				.itemContent{
					font-size: 14px;
					color: #999999;
					margin-left: 18rpx;
				}
			}
			.serviceItem2{
				margin-left: 18rpx;
				margin-bottom: 32rpx;
				.titleText{
					font-size: 14px;
					color: #FF6B4A;
				}
				.itemContent{
					font-size: 14px;
					color: #999999;
					.itemContent-child{
						margin-bottom: 40rpx;
						.contentTitle{
							border-bottom: 1px solid #FF6B4A;
						}
					}
				}
			}
		}
    }
    .D4{
        .D4_esvalue{
			font-size: 14px;
			color: #333333;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .D4_2{
                width: 90px;
				display: flex;
				align-items: center;
				justify-content: space-between;
            }
        }
        .D4_esvalue view{
            font-size: 14px;
            color: #333333;
            font-weight: bold;
        }
        .D4_list view{
            display: inline-block;
            font-size: 12px;
            text-align: center;
            margin-right: 12px;
            width: 90px;
            height: 24px;
            line-height: 24px;
            background: #F2F2F2;
            color: #666666 ;
        }
    }
    .D5{
        .D5_fixed1{
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-bottom: 12px;
            view{
                font-size: 14px;
                color: #333333;
                font-weight: bold;
                font-family: 'PingFangSC-Medium';
                line-height: 24px;
            }
            image{
                width: 240rpx;
                height: 3px;
                margin-top: 10px;
            }
        }
        .D5_all {
            width: 100%;
            height: 380px;
            margin-bottom: 30px;
            font-family: 'PingFangSC-Regular';
            border: #999999 solid 1.5px;
           image{
                width: 100%;
                height: 380px;
        }}
        .D5_photoes1{
            display: grid;
            grid-template-columns: 48% 48%;
            grid-row-gap: 10px;
            grid-column-gap: 4%;
            image{
                width: 100%;
                height: 70px;
            }
            view{
                width: 100%;
                font-size: 14px;
                text-align: center;
                background: #949494;
                font-family: 'PingFangSC-Regular';
                color: #ffffff;
                view{
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
        .D5_logo1,.D5_logo2{
            text-align: center;
        }
        .D5_logo1{
            margin-top: 40px;
            font-size: 24px;
            font-weight: bold;
            font-family: 'PingFangSC-Semibold';
        }
        .D5_logo2{
            font-size: 12px;
        }
        .D5_logo3{
            width: 100%;
            text-align: center;
            image{
                width: 50px;
                height: 24px;
            }
        }
    }
    .D6{
        width: 100%;
        height: 430px;
        background: #F9F6ED;
        margin-bottom: 74px;
        view{
            text-align: center;
        }
        .D6_v1{
            font-weight: bold;
        }
        .D6_v2{
            font-size: 14px;
            margin-bottom: 30px;
        }
        .D6_v5{
            .D6_v5_s1{
                font-weight: bold;
            }
            .D6_v5_s2{
                font-size: 14px;
            }
        }
    }
    .botton{
        position: fixed;
        bottom: 0;
        height: 74px;
        width: 100%;
        background: #FFFFFF;
        padding: 20px 20px 8px 20px;
        font-family: 'PingFangSC-Regular';
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .botton_1{
            width: 20%;
            height: 100%;
            text-align: center;
            color: #989898;
        }
        image{
            width: 60%;
            height: 30px;
        }
        .botton_image{
            font-size: 12px;
            text-align: center;
        }
        .botton_2{
            width: 74%;
            height: 86%;
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .botton_input{
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            background: #FFF0EC;
            font-size: 16px;
            color: #FF6B4A;
            border-radius: 20px 0 0 20px;
        }
        .botton_now{
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            background: #FF6B4A;
            font-size: 16px;
            color: #FFFFFF;
            border-radius:0  20px 20px 0;
        }
    }
</style>