<template> <view class="container"> <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> </template> <script> import CProgress from '../../components/UniSliper/UniSliper' import store from '@/store' export default { components: { CProgress }, data(){ return{ count: 1, // colour: '1.56非球面防蓝光_亚黑色', chooseNum : '', 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: "2", name:'', price:'', 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}, ], //配饰 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}, ], } }, computed: { details(){ return this.$store.state.detailStandard_k.list }, }, onLoad:function(){ store.dispatch('detailStandard_k/fetch', { uid: "1", pid: "26", p_root_index: "2" }); // console.log(this.$store.state.detailStandard_k.list+'ssss'); }, 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 ; //颜色选择 console.log(index,this.navData.colour); }, viewChoose(index,e){ this.chooseNum = index }, popArgs(){ uni.navigateTo({ url: '../detailsChoiceArgs/detailsChoiceArgs', success: res => {}, fail: () => {}, complete: () => {} }); }, //跳转确认订单页及传参 popSure(name,price){ this.navData.name = name; this.navData.price = price; var navData = JSON.stringify(this.navData); uni.navigateTo({ url: '../confirmOrder/confirmOrder?index='+navData, }); console.log(this.navData) }, } } </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; } .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; } } .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; } } .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: 20px; } .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: 120rpx; } .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>