<template> <view class="content"> <view class="goods-info"> <image src="../../static/myorder-paying-pic.png"></image> <view class="box-right"> <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> <text class="p2">支持7天无理由退货 顺丰发货</text> <view class="priceBox"> <view class="price">¥{{price*count}}</view> <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="goods-data"> <view class="opCollapse"> <!-- <view class="head"> <view v-if="!opIsOpen">填写验光数据</view> <view v-else></view> <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> </view> --> <view class="body"> <template v-if="opIsOpen"> <view class="goods-form"> <view class="data-title"> <image src="../../static/icon-data.png" ></image> <text class="p1">填写验光数据</text> </view> <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">验光单取名:</text> </view> <input class="choice-name uni-input" placeholder="下系" /> </view> </view> <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">左 (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">右 (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">左 (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">右 (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">左 (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">右 (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">左 (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">右 (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">年 (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">月 (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">日 (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> <template v-else> <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> <template v-if="item.nameC==='验光日期'"> <text class="names">{{item.nameC}}</text> <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> <text>{{item.nameArray3[item.nameIndex2]}}日</text> </template> <template v-else> <template v-if="item.nameC==='度数'"> <text style="display: inline;">*</text> </template> <text class="names">{{item.nameC}}</text> <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> <text>右 {{item.nameArray2[item.nameIndex2]}}</text> </template> </view> </template> </view> </view> <!-- 实用功能折叠框 --> <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> <view v-for="item in attrList" :key="item.mid" > <MyCollapse :funListProp="item" :funContentProp="reContent" :title="item.meta_name" /> </view> </view> <view class="submit">立即结算</view> </view> </template> <script> import MyCollapse from './compoents/MyCollapse.vue' import store from '@/store' export default { components: { MyCollapse }, data() { return { count:1, disabled:false, price:180, // 实用功能参数 funIsOpen:true, // 默认myCollapse开启 funList: [ {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"}, {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"}, {"name":"智能变色","isChioce": false,"key":3,"type": "fun"}, {"name":"易清洁","isChioce": false,"key":4,"type": "fun"}, {"name":"防辐射","isChioce": false,"key":5,"type": "fun"}, {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"}, ], funContent:[], // 镜片种类参数 kindIsOpen:true, kindList1: [ {"name":"染色","isChioce":false,key:1,"type": "kind"}, {"name":"渐变","isChioce":false,key:2,"type": "kind"}, ], kindList2: [ {"name":"JB234759","isChioce":false,key:3,"type": "kind"}, {"name":"JB234759","isChioce":false,key:4,"type": "kind"}, {"name":"JB234759","isChioce":false,key:5,"type": "kind"}, {"name":"JB234759","isChioce":false,key:6,"type": "kind"}, {"name":"JB234759","isChioce":false,key:7,"type": "kind"}, ], kindContent: [], // 材质选择 maIsOpen: true, maList1: [ {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, {"name":"特殊镜片","isChioce":false,key:2}, ], maList2: [ {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, {"name":"玻璃镜片","isChioce":false,key:4}, ], maContent: [], // 折射率参数 reIsOpen: true, reList1: [ {"name":"1.56(推荐)","isChioce":false,key:1,"range":"0-300度","isRange":true}, {"name":"1.60","isChioce":false,key:2}, ], reList2: [ {"name":"1.71(推荐)","isChioce":false,key:3,"range":"300-1000度","isRange":true}, {"name":"1.67","isChioce":false,key:4}, {"name":"1.71","isChioce":false,key:5}, {"name":"1.74","isChioce":false,key:6}, ], reContent:[], // 验光参数 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} ], } }, onLoad() { store.dispatch('read/fetch', { pid: 9, }) }, computed: { attrList() { return this.$store.state.read.goodInfo.attrList; } }, methods: { counter(isadd){ if(isadd){ this.count++ } else { this.count <= 1? this.disabled = true:this.count-- } }, myCollapseChange(isopen){ // console.log(isopen) this.opIsOpen = !isopen }, 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" scoped> .content{ width: 100%; background-color: #F2F2F2; display: flex; flex-direction: column; align-items: center; } .choice-name { border-bottom: 1px solid #CFCFCF; } .goods-info{ width: 100%; height: 272rpx; box-sizing: border-box; padding: 40rpx 40rpx 36rpx 36rpx; margin: 36rpx 0 18rpx 0; // margin-bottom: -18rpx; // margin-top: -36rpx; background: #FFFFFF; border-radius: 16rpx; display: flex; image{ width: 94px; height: 94px; margin-right: 28rpx; } .box-right{ width: 458rpx; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; .p1 { // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; text-align: justify; line-height: 18px; } .p2 { // font-family: PingFangSC-Regular; font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-top: -20rpx; } .priceBox{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; .price{ color: #FF6B4A; font-size: 28rpx; } .counter{ display: flex; flex-direction: row; justify-content: space-between; font-size: 28rpx; color: #333333; width: 122rpx; .btn{ display: flex; justify-content: center; line-height: 32rpx; height: 32rpx; width: 32rpx; background-color: #F2F2F2; color: #CFCFCF; } } } } } .goods-data{ width: 100%; box-sizing: border-box; padding: 37rpx 40rpx 0 40rpx; background: #FFFFFF; border-radius: 12rpx; margin-bottom: 92px; .opCollapse{ width: 100%; padding-bottom: 28rpx; margin-top: 7px; border-bottom: 1px solid #E9E9E9; .head{ display: flex; justify-content: space-between; height: 24px; // font-family: PingFangSC-Medium; font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; line-height: 24px; margin-bottom: 18rpx; .headRighted{ width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #CFCFCF; transform: scaleY(-1); margin-top: 10px; } .headMid{ // font-family: PingFangSC-Regular; font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-left: -120rpx; } .headRight{ width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #CFCFCF; margin-top: 10px; } } .body{ // font-family: PingFangSC-Regular; font-size: 12px; color: #666666; letter-spacing: 0; .bodyBox{ margin-top: 15px; .names{ // font-family: PingFangSC-Regular; font-size: 12px; color: #151515; letter-spacing: 0; text-align: justify; line-height: 17px; margin-left: 5px; margin-right: 10px; } text{ // font-family: PingFangSC-Regular; font-size: 12px; color: #666666; letter-spacing: 0; text-align: justify; } } } } } .goods-form { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; width: 100%; .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; } } } } .submit{ width: 100%; height: 112rpx; background: #FF6B4A; position: fixed; bottom: 0; text-align: center; line-height: 112rpx; // font-family: PingFangSC-Regular; font-size: 16px; color: #FFFFFF; letter-spacing: -0.3px; } </style>