<template> <view class="content"> <scroll-view scroll-y class="sroll-view"> <view class="goods-details"> <swiper class="swiper" :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="goods-price"> <text class="now-price">¥120</text> <text class="old-price">¥198</text> <text class="buy-num">349人购买过</text> </view> <view class="goods-name"> <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text> </view> <view class="goods-courier"> <text>支持7天无理由退货</text> <text class="courier-support">顺丰发货</text> </view> </view> <view class="goods-form"> <text class="p1">填写验光数据</text> <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> <view class="choice-use"> <text class="p3">您一般用眼镜:</text> <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image> <text class="p4">阅读</text> <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image> <text class="p5">看远处</text> </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">{{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">{{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">{{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> </scroll-view> <view class="goods-submit"> <button>下一步</button> </view> </view> </template> <script> export default { components: { }, data() { return { name: '眼镜名称名称', 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人付款' }, ], 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: function (option) { //option为object类型,会序列化上个页面传递的参数 }, methods: { changeRead() { this.tablist.read = !this.tablist.read // this.current = e.detail.current; }, changeSeeLong() { this.tablist.seeLong = !this.tablist.seeLong }, 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 { display: flex; flex-direction: column; align-items: center; justify-content: center; } .header{ display: flex; flex-direction: column; align-items: center; background-color: #fff; width: 100%; height: 64rpx; z-index: 999; position: fixed; top: 0; .header-name { display: flex; width: 684rpx; text { font-size: 36rpx; color: #333333; letter-spacing: -0.34px; margin-left: 54rpx; } image { width: 11px; height: 18px; border-radius: 16px; } } } .sroll-view{ height: 1760rpx; } .goods-details{ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; margin-bottom: 40rpx; .swiper { width: 684rpx; height: 512rpx; image { width: 100%; height: 100%; border-radius: 16rpx; } } .goods-price { display: flex; justify-content: space-between; padding: 40rpx 0 30rpx 0; align-items: center; width: 684rpx; .now-price { font-size: 18px; color: #EB5D3B; } .old-price { font-size: 14px; color: #999999; letter-spacing: -0.26px; margin-left: -156px; text-decoration: line-through; } .buy-num { font-size: 14px; color: #999999; letter-spacing: -0.26px; text-align: justify; } } .goods-name { font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; width: 684rpx; } .goods-courier { width: 684rpx; font-size: 10px; color: #999999; letter-spacing: -0.19px; padding: 10rpx 0; .courier-support { padding-left: 20rpx; } } } .goods-form { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; width: 100%; .choice-use{ display: flex; margin-bottom: 40rpx; width: 684rpx; align-items: center; .p3 { font-size: 14px; color: #333333; letter-spacing: -0.26px; text-align: justify; line-height: 24px; width: 164px; } .p4 { font-size: 14px; color: #666666; letter-spacing: -0.26px; margin: 0 71rpx 0 24rpx ; } .p5 { font-size: 14px; color: #666666; letter-spacing: -0.26px; margin-left: 24rpx; } } .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; } } } } .goods-submit{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; bottom: 0; z-index: 999; width: 100%; height: 120rpx; background-color: #fff; button{ width: 540rpx; height: 80rpx; font-size: 32rpx; color: #fff; background: #FF6B4A; border-radius: 20px; border-radius: 20px; } } </style>