<template>
<view>
    <view class="container" v-if="type===2">
        <view class="detail">
            <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
            <view class="detail2">
                <view class="detail2_name">{{details.data.p_name}}</view>
                <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
                <view class="detail2_price">
                    <text>¥{{details.data.p_sale_price*count}}</text>
                    <view class="counter">
                            <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
                            <text>{{count}}</text>
                            <view class="btn" @click="counter(true)">+</view>
                    </view>                    
                </view>
            </view>
        </view>
        <view class="choose">
            <view class="colour">
                <view class="colour1" @click="xialachange(0)">
                    <text>框架颜色</text>
                    <image v-bind:src="isNone[0].img"></image>
                </view>
                <view class="colour_exp">*{{navData.colour}}</view>
                <view>
                <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
                    <view 
                    v-for="(items,index) in details.data.skuList" 
                    :key="index" 
                    @click="viewChoose(index)"
                    class="colour2_view"
                    v-bind:class="{'colour2_viewed': chooseNum == index}"
                    >
                        <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>    
                    </view>
                </view>
                </view>
                <hr/>
            </view>
            <view class="colour">
                <view class="colour1"  @click="xialachange(1)">
                    <text>镜片颜色</text>
                    <image v-bind:src="isNone[1].img"></image>
                </view>
                <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
                <view  v-bind:class="{'colour2_none' : isNone[1].state}">
                <view class="jp_colour2">
                    <view 
                    v-for="(items,index) in jp_colour" 
                    :key="index" 
                    class="jp_colour2_view"
                    >
                        <image v-bind:src="items.img"></image>    
                    </view>
                </view>
                </view>
                <hr/>
            </view>
            <view class="colour">
                <view class="colour1"  @click="xialachange(2)">
                    <text>{{details.data.attrList[0].meta_name}}</text>
                    <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text>
                    <image  v-bind:src="isNone[2].img"></image>
                </view>
                <view>
                <view  class="colour_exp">*{{navData.split}}</view>
                <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}">
                    <view 
                    v-for="(items,index) in details.data.attrList[0].attr" 
                    :key="index" 
                    >
                    <view 
                    class="split_colour2"
                    @click="splitChoose(index,items.name)"
                    v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
                    >{{items.name}}</view>
                    </view>
                </view>
                </view>
                <hr/>
            </view>
            <view class="size">
                <view class="size1" @click="xialachange(3)">
                    <view class="size1_1">框架尺寸</view>
                    <view><image  v-bind:src="isNone[3].img"></image></view>
                </view>
                <view class="colour"> 
                    <view class="colour_exp">*{{navData.colour}}</view>
                </view>
                <view class="D3_list"  v-bind:class="{'colour2_none' : isNone[3].state}">
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[0].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="300"/>
                                <text>{{details.data.frame_width}}mm</text>
                           </view>
                            <view>{{parameter[0].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[1].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="190"/>
                                <view>{{details.data.glass_width}}mm</view>
                            </view>
                            <view>{{parameter[1].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[2].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                            <c-progress class="c-progress"  :inner_widthProp="210"/>
                            <view>{{details.data.glass_height}}mm</view>
                            </view>
                            <view>{{parameter[2].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[3].img"></image></view>
                        <view class="D3_list_jDu">
                            
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="160"/>
                                <view>{{details.data.nose_width}}mm</view>
                            </view>
                            <view>{{parameter[3].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[4].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="260"/>
                                <view>{{details.data.leg_long}}mm</view>
                            </view>
                           <view>{{parameter[4].standard}}</view>
                        </view> 
                    </view>
                </view>
                <hr/>
            </view>
            <view class="part">
                <view class="size1" @click="xialachange(4)">
                    <view class="size1_1">配件</view>
                    <view><span>+¥0.00</span><image v-bind:src="isNone[4].img"></image></view>
                </view>
                <view class="colour_exp">*0290</view>
                <view class="part_som"  v-bind:class="{'colour2_none' : isNone[4].state}">
                    <view 
                    v-for="(part) in part" 
                    :key="part.key"
                    v-bind:class="{'size_viewed': part.is_actived}"
                    >
                    <image v-bind:src="part.img"></image>
                </view>
                </view>
            </view>
        </view>
        <view class="buy">
            <view class="buy1">选了镜框,想选镜片?</view>
            <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
            <view class="buy3">
                <view class="buy3_1">暂时不选</view>
                <view class="buy3_2" @click="popArgs">立即去选</view>
            </view>
        </view>
					<template >
    					<view class="goods-form">
						    <text class="p1">填写验光数据</text>
						    <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[0].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[0].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[1].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[1].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[2].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[2].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[3].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[3].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[4].nameC}}</text>
						                    </view>
						                    <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
						                    <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
						                    <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="confirm">
						        <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
						        <text>确认以上输入信息来源于我的验光数据!</text>
						    </view>
						</view>
					
					</template> 
        <view class="zhanwei"></view>
        <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
    </view>
    <view class="container"  v-if="type===4">
        <view class="detail">
            <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
            <view class="detail2">
                <view class="detail2_name">{{details.data.p_name}}</view>
                <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
                <view class="detail2_price">
                    <span>¥{{details.data.p_sale_price*count}}</span>
                    <view class="counter">
                        <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
                        <text>{{count}}</text>
                        <view class="btn" @click="counter(true)">+</view>
                    </view>                    
                </view>
            </view>
        </view>
        <view class="choose">
            <view class="colour">
                <view class="colour1"  @click="xialachange(0)">
                    <text>框架颜色</text>
                    <image  v-bind:src="isNone[0].img"></image>
                </view>
                <view class="colour_exp">*{{navData.colour}}</view>
                <view>
                <view class="colour2"  v-bind:class="{'colour2_none' : isNone[0].state}">
                    <view 
                    v-for="(items,index) in details.data.skuList" 
                    :key="index" 
                    @click="viewChoose(index)"
                    class="colour2_view"
                    v-bind:class="{'colour2_viewed': chooseNum == index}"
                    >
                        <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>    
                    </view>
                </view>
                </view>
                <hr/>
            </view>
            <view class="size">
                <view class="size1" @click="xialachange(1)">
                    <view class="size1_1">框架尺寸</view>
                    <view><image v-bind:src="isNone[1].img"></image></view>
                </view>
                <view class="colour"> 
                    <view class="colour_exp">*{{navData.colour}}</view>
                </view>
                <view class="D3_list"  v-bind:class="{'colour2_none' : isNone[1].state}">
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[0].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="300"/>
                                <text>{{details.data.frame_width}}mm</text>
                           </view>
                            <view>{{parameter[0].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[1].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="190"/>
                                <view>{{details.data.glass_width}}mm</view>
                            </view>
                            <view>{{parameter[1].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[2].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                            <c-progress class="c-progress"  :inner_widthProp="210"/>
                            <view>{{details.data.glass_height}}mm</view>
                            </view>
                            <view>{{parameter[2].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[3].img"></image></view>
                        <view class="D3_list_jDu">
                            
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="160"/>
                                <view>{{details.data.nose_width}}mm</view>
                            </view>
                            <view>{{parameter[3].standard}}</view>
                        </view> 
                    </view>
                    <view>
                        <view><image class="D3_image"  v-bind:src ="parameter[4].img"></image></view>
                        <view class="D3_list_jDu">
                            <view class="D3_list1">
                                <c-progress class="c-progress"  :inner_widthProp="260"/>
                                <view>{{details.data.leg_long}}mm</view>
                            </view>
                           <view>{{parameter[4].standard}}</view>
                        </view> 
                    </view>
                    <hr/>
                </view>
            </view>
            <view class="part">
                <view class="size1" @click="xialachange(2)">
                    <view class="size1_1" >配件</view>
                    <view>
                        <span>+¥0.00</span>
                        <image  v-bind:src="isNone[2].img"></image>
                    </view>
                </view>
                <view class="colour_exp">*0290</view>
                <view class="part_som"  v-bind:class="{'colour2_none' : isNone[2].state}">
                    <view 
                    v-for="(part) in part" 
                    :key="part.key"
                    v-bind:class="{'size_viewed': part.is_actived}"
                    >
                    <image v-bind:src="part.img"></image>
                </view>
                </view>
            </view>
        </view>
        <view class="buy">
            <view class="buy1">选了镜框,想选镜片?</view>
            <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
            <view class="buy3">
                <view class="buy3_1">暂时不选</view>
                <view class="buy3_2" @click="popArgs">立即去选</view>
            </view>
        </view>
        <view class="zhanwei"></view>
        <view class="button"><view  @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view>
    </view>
</view>
</template>
<script>
import CProgress from '../../components/UniSliper/UniSliper'
import store from '@/store'

export default {
    components: {
        CProgress
    },
    data(){
        return{
            type: 2,
            count: 1,
            chooseNum : '',
            isSplit: '' ,
            isNone:[
                {state: false ,img: '/static/img/detail/xiala.png'},
                {state: false ,img: '/static/img/detail/xiala.png'},
                {state: false ,img: '/static/img/detail/xiala.png'},
                {state: false ,img: '/static/img/detail/xiala.png'},
                {state: false ,img: '/static/img/detail/xiala.png'},
            ],

            //传参
            navData:{
                pid: "26",
                p_root_index: "4",
                name:'',
                price:'',
                type:'',
                split: '1.56非球面防蓝光',
                colour: '1.56非球面防蓝光_亚黑色',
            },

            //尺寸
            parameter:[
                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
            ],
            //镜片颜色
            jp_colour:[
                {img:'/static/img/detail/Kuang/sun_jp.png'},
                {img:'/static/img/detail/Kuang/sun_jp.png'},
                {img:'/static/img/detail/Kuang/sun_jp.png'},
                {img:'/static/img/detail/Kuang/sun_jp.png'},
                {img:'/static/img/detail/Kuang/sun_jp.png'},
                {img:'/static/img/detail/Kuang/sun_jp.png'}
            ],
            //配饰
            part:[
                {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
                {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
                {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
                {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
                {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
                {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
            ],
            opIsOpen:true,
            tablist: {
				// read: true,
				// seeLong: false,
				confirm: false
				},
			tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
            // 度数相关数据                
			pickerInfoList:[
				{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
				{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
				{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
				{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
				{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
			],
        }
    },

    computed: {
        details(){
            return this.$store.state.detailStandard_k.list
        },
    },
    onLoad:function(){
        store.dispatch('detailStandard_k/fetch', {
			uid: "1",
            pid: "26",
            p_root_index: "4"
        });
    },
    methods: {
        counter(isadd){
		    if(isadd){
				this.count++
			}else{
				this.count <= 1? this.disabled = true:this.count--
            }
        },
        xialachange(index){
            this.isNone[index].state = !this.isNone[index].state;
            if(this.isNone[index].state){
                this.isNone[index].img = '/static/img/detail/right.png'
            }else{
                this.isNone[index].img = '/static/img/detail/xiala.png'
            }
        },
        colourChange(index,e){
            this.navData.colour = e ; //颜色选择

        },
        viewChoose(index){
            this.chooseNum = index
        },
        //折射率选择
        splitChoose(index,e){
            this.isSplit = index
            this.navData.split = e 
        },
        //跳转镜片选购页
        popArgs(){
            uni.navigateTo({
				url: '../detailsChoiceArgs/detailsChoiceArgs',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
        },
        //跳转确认订单页及传参
        popSure(name,price){
            this.navData.name = name;
            this.navData.price = price;
            this.navData.type = this.type;
            var navData = JSON.stringify(this.navData); 
            uni.navigateTo({
				url: '../confirmOrder/confirmOrder?index='+navData,
            });
            console.log(this.navData)
        },
        //验光表
        changeConfirm() {
	        this.tablist.confirm = !this.tablist.confirm
		},
		bindPickerChange01: function(e) {
		    this.pickerInfoList[0].nameIndex1 = e.target.value 
		},
		bindPickerChange02: function(e) {
		    this.pickerInfoList[0].nameIndex2 = e.target.value 
		},
		
		bindPickerChange11: function(e) {
		    this.pickerInfoList[1].nameIndex1 = e.target.value 
		},
		bindPickerChange12: function(e) {
		    this.pickerInfoList[1].nameIndex2 = e.target.value 
		},
		
		bindPickerChange21: function(e) {
		    this.pickerInfoList[2].nameIndex1 = e.target.value 
		},
		bindPickerChange22: function(e) {
		    this.pickerInfoList[2].nameIndex2 = e.target.value 
		},
		
		bindPickerChange31: function(e) {
		    this.pickerInfoList[3].nameIndex1 = e.target.value 
		},
		bindPickerChange32: function(e) {
		    this.pickerInfoList[3].nameIndex2 = e.target.value 
		},   
			
		bindPickerChange41: function(e) {
		    this.pickerInfoList[4].nameIndex1 = e.target.value 
		},
		bindPickerChange42: function(e) {
		    this.pickerInfoList[4].nameIndex2 = e.target.value 
			},         
	    bindPickerChange43: function(e) {
		    this.pickerInfoList[4].nameIndex3 = e.target.value 
	    },
    }

}
</script>

<style lang="scss">
.container{
    min-height: 100vh;
    background: #F2F2F2;
    padding-top: 10px;
    box-sizing: border-box;
}
hr{
    border: none;
    height: 1px;
    background: #F2F2F2;
    margin-top: 18px;
    margin-bottom: 10px;
}
.detail{
    height: 272rpx;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.detail1{
    height: 178rpx;
    width: 188rpx;
    image{
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}
.detail2{
    width: 68%;
    view{
        margin-bottom: 6px;
        font-family: PingFangSC-Regular;
    }
    .detail2_name{
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 18px;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
    .detail2_tui{
        font-size: 10px;
        color: #999999;
        letter-spacing: -0.19px;
        span{
            margin-right: 10px;
        }
    }
    .detail2_price{
        font-size: 14px;
        color: #FF6B4A;
        letter-spacing: -0.26px;
    }
}
.counter{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 28rpx;
	color: #333333;
	width: 122rpx;
    float: right;
	.btn{
		display: flex;
		justify-content: center;
		line-height: 32rpx;
        height: 32rpx;
		width: 32rpx;
		background-color: #F2F2F2;
		color: #CFCFCF;
		}
}
.choose{
    background: #FFFFFF;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 8px;
    .colour1{
        span{
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            letter-spacing: -0.3px;
            text-align: justify;
            line-height: 24px;
            font-weight: bold;
        }
        image{
            float: right;
            width: 40rpx;
            height: 36rpx;
        }
        .colour1_span2{
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
            margin-left: 10px;
            font-weight: normal
        }
    }
    .colour_exp{
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #666666;
        letter-spacing: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .colour2{
        display: grid;
        grid-template-columns: repeat(5, 17%);
        justify-content: space-between ;
        grid-row-gap: 10px;
        margin-bottom: 14px;
        .colour2_view{
            border: 1px solid #F2F2F2;
            image{
                width: 100rpx;
                height: 60rpx;
            }
        }
        .colour2_viewed{
            border: 1px solid #FF6B4A;
            image{
                width: 100rpx;
                height: 60rpx;
            }
        }
    }
    .colour2_none{
        display: none;
    }
}
.jp_colour2{
        display: grid;
        grid-template-columns: repeat(5, 13%);
        justify-content: start  ;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        margin-bottom: 14px;          
    .jp_colour2_view{
        border: 1px solid #F2F2F2;
        image{
            width: 80rpx;
            height: 80rpx;
        }
    }
}
.split{
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 10px ;
    .split_colour2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300rpx;
        height: 60rpx;
        background: #F2F2F2;
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #666666;
        letter-spacing: 0;
        text-align: center;
    }
    .split_colour2_actived{
        background: rgba(255,107,74,0.15);
        color: #FF6B4A;
    }
}
.size,.part{
    margin-top:14px;
    .size1{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .size1_1{
            font-weight: bold;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            letter-spacing: -0.3px;
            line-height: 24px;
        }
        view{
            span{
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #FF6B4A;
                letter-spacing: -0.26px;
                margin-right: 12px;
            }
            image{
                width: 40rpx;
                height: 36rpx;
            }
        }
    }
    .size2{
        view{
            display: inline-flex;
            align-items: center;
            justify-content: center; //字体居中
            margin-right: 12px;
            margin-bottom: 20px;
            width: 136rpx;
            height: 60rpx;
            background: #F2F2F2;
            border-radius: 2px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
        }
        view:hover{
            color: #FF6B4A;
            background: rgba(255,107,74,0.15);
        }
    }
    .D3_list{
        margin-bottom: 4px;
    }
    .D3_list>view{
        display: flex;
        align-content: center;
        margin-bottom: 10px;
        view{
            margin-right: 10px;
        }
    }
    .D3_list image{
        width: 50px;
        height: 25px;
        margin-right: 6px;
    }
    .D3_list span{
        margin-left: 6px;
        margin-right: 5px;
        font-family: 'PingFangSC-Regular';
    }
    .D3_list_jDu{
        view{
            font-family: PingFangSC-Regular;
            font-size: 10px;
            color: #999999;
            letter-spacing: -0.19px;
        }
        .D3_list1{
            display: flex;
        }
    }
}
.part{
    .part_som{
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(4, 22%);
        grid-row-gap: 12px;
        margin-bottom: 14px;
        view{
            border: 1px solid #F2F2F2;
            height: 72rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .size_viewed{
            border: 1px solid #FF6B4A;
            height: 72rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    .colour2_none{
        display: none;
    }
}

.buy{
    height: 300rpx;
    background: #FFFFFF ;
    margin-top: 10px;
    border-radius: 8px;
    padding-top: 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.buy1{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-align: center;
}
.buy2{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin: 10px;
}
.buy3{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-top: 14px;
    view{
        border-radius: 20px;
        width: 240rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .buy3_1{
        margin-right: 20px;
        background: rgba(255,107,74,0.15);
        color: #FF6B4A ;
    }
    .buy3_2{
        background: #FF6B4A;
        color: #FFFFFF ;
    }
}
.zhanwei{
    background: #F2F2F2;
    height: 200rpx;
}
.goods-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
    width: 100%;
    padding-top:20px;
    padding-bottom:20px;
    box-sizing: border-box;
	    
	.p1 {
        font-size: 16px;
        color: #333333;
        letter-spacing: -0.3px;
        text-align: justify;
        line-height: 24px;
        margin: 4px 0;
	    }
    .p2 {
        font-size: 12px;
        color: #999999;
        letter-spacing: -0.23px;
        margin-bottom: 18rpx;
    }
    image{
        width: 28rpx;
        height: 26rpx;
    }
    .confirm {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #666666;
        letter-spacing: -0.23px;
	    width: 684rpx;
        image{
            margin-right:25rpx;
        }
    }
    .picker{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
		width: 100%;
		image{
			width: 10px;
			height: 10px;
			margin-right: 5px;
		}
		.picker-choice{
			display: flex;
			width: 684rpx;
			align-items: center;
	        margin-bottom: 40rpx;
			.choice-left{
				width: 210rpx;
				.p11 {
					font-size: 14px;
					color: #333333;
					letter-spacing: -0.26px;
					text-align: justify;
					line-height: 24px;
					// margin-right: 10px;
				}
				.p12 {
					font-size: 10px;
					color: #3F3F3F;
					letter-spacing: -0.19px;
					text-align: justify;
					line-height: 24px;
				}
	            
	            
			}
			.p13 {
				font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-right: 10px;
			}
	        .p13-date {
	            font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-right: 5px;
	        }
			.p14 {
				font-size: 14px;
				color: #666666;
				letter-spacing: -0.26px;
				text-align: center;
				width: 124rpx;
				border-bottom: 1px solid #CFCFCF;
			}
	        
		}
	}
}
.button{
    position: fixed;
    bottom: 0;
    width:100%;
    height: 112rpx;
    background: #FF6B4A 100%;
    view{
        color: #FFFFFF;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 16px;
    }
}
</style>