<template> <view class="wrap"> <view class="body"> <template > <view class="goods-form"> <view class="p1"> <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> 填写验光数据 </view> <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> <view class="picker"> <view class="picker-choice"> <view class="choice-left"> <text class="pd">验光单取名:</text> </view> <input type="text" @change="handleInput" class="input" placeholder="请输入名称" maxlength="20" :value="name" /> </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"> <view class="p14"> {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} <image src="../../static/detail-tabicon.png" ></image> </view> <!-- <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"> <view class="p14"> {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} <image src="../../static/detail-tabicon.png" ></image> </view> <!-- <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"> <view class="p14"> {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} <image src="../../static/detail-tabicon.png" ></image> </view> <!-- <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"> <view class="p14"> {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} <image src="../../static/detail-tabicon.png" ></image> </view> <!-- <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> <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> <view class="p14"> {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} <image src="../../static/detail-tabicon.png" ></image> </view> </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"> <view class="p14"> {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} <image src="../../static/detail-tabicon.png" ></image> </view> <!-- <image src="../../static/detail-tabicon.png" ></image> --> </picker> </view> </view> <view class="picker"> <view class="picker-choice"> <view class="choice-left"> <text class="pd">瞳距:</text> </view> <input type="digit" @change="handleInputPd" class="input" placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> </view> </view> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[3].nameC}}</text> </view> <text class="p13-date">年 (Y)</text> <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> <view class="p14" style="width: 30px;"> {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} <image src="../../static/detail-tabicon.png" ></image> </view> </picker> <text class="p13-date">月 (M)</text> <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> <view class="p14" style="width: 30px;"> {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} <image src="../../static/detail-tabicon.png" ></image> </view> </picker> <text class="p13-date">日 (D)</text> <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> <view class="p14" style="width: 30px;"> {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} <image src="../../static/detail-tabicon.png" ></image> </view> </picker> </view> </view> <view class="confirm"> <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> <text>确认以上输入信息来源于我的验光数据!</text> </view> </view> </template> </view> <view class="footer" @click="handleSubmit"> <button class="btn" type="default">提 交</button> </view> </view> </template> <script> import store from '@/store'; export default { data() { return { pickerInfoList:[ {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} ], confirm: false, // 用户是否确认 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], name: '夏小花', oldname:'',// 用于判读用户是否改变名字 pickerInfoChioce:{ "leftSph": '', "rightSph": '', "leftCyl": '', "rightCyl": '', "leftAxi": '', "rightAxi": '', "time":{ "year":0, "month": 0, "day":0 , } }, pd: '',// 瞳距 oldpd: '',// 用于判断用户是否改变瞳距 kinds:Number, // kinds=1,提交为新增验光,2为修改 mp_id: Number }; }, onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 // 初始化SPL、CYL、AXI的值 for (let j = 0; j < 3; j++) { for(let i=-12;i<6;i++){ this.pickerInfoList[j].nameArray1.push(i) this.pickerInfoList[j].nameArray1.push(i+0.5) this.pickerInfoList[j].nameArray2.push(i) this.pickerInfoList[j].nameArray2.push(i+0.5) if(i>=-6){ this.pickerInfoList[j].nameArray1.push(i+0.25) this.pickerInfoList[j].nameArray1.push(i+0.75) this.pickerInfoList[j].nameArray2.push(i+0.25) this.pickerInfoList[j].nameArray2.push(i+0.75) } if(i==5){ this.pickerInfoList[j].nameArray1.push(i+1) this.pickerInfoList[j].nameArray2.push(i+1) } } } // 初始化日期值 for (let i = 1; i < 32; i++){ this.pickerInfoList[3].nameArray3.push(i) } // 初始化年份前后五年 let myDate = new Date(); let nowYear = myDate.getFullYear(); for(let i=0;i<5;i++){ this.pickerInfoList[3].nameArray1.push(nowYear-i) } this.kinds=option.kinds if(option.kinds==1){ this.name= ''; this.pd= ''; } else{ console.log('args===>',option.index) const loveList=Object.assign({},this.$store.state.myLoveList.loveList) console.log('args===>',loveList[option.index].in_time) console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) this.name=loveList[option.index].name this.pd=loveList[option.index].pd this.mp_id=loveList[option.index].mp_id this.oldname=loveList[option.index].name this.oldpd=loveList[option.index].pd // 将kinds =2时的值传到该页面 this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) if(loveList[option.index].in_time.toString().slice(5,6)==0){ this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) } else{ this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) } if(loveList[option.index].in_time.toString().slice(8,9)==0){ this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) } else{ this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) } } }, methods:{ handleInput(e){ this.name=e.target.value }, handleInputPd(e){ // 只能输入正浮点数或正数 if(/^\d+(\.\d+)?$/.test(e.target.value)){ this.pd=e.target.value } else { uni.showToast({ title:"请输入有效数据;示例:89", icon: "none", duration: 2000, }) this.pd = '' } }, // 用户提交 handleSubmit(){ if(this.name==''){ uni.showToast({ title:"请输入验光单取名", icon: "none", duration: 2000, }) }else{ if(this.pd==''){ uni.showToast({ title:"请输入瞳距", icon: "none", duration: 2000, }) }else{ if(this.kinds==1){ // 添加用户验光单 console.log('kinds====>',this.pickerInfoChioce.leftSph) console.log('kinds====>',this.pickerInfoChioce.leftSph==Number) console.log('kinds====>',this.pickerInfoChioce.rightSph==Number) if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''|| this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''|| this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' ){ uni.showToast({ title:"请输入您的验光数据", icon: "none", duration: 2000, }) }else{ if(this.confirm){ store.dispatch('myLoveList/addMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, // mp_name: this.$store.state.user.userInfo.mp_name, leftSph: this.pickerInfoChioce.leftSph, rightSph: this.pickerInfoChioce.rightSph, leftCyl: this.pickerInfoChioce.leftCyl, rightCyl: this.pickerInfoChioce.rightCyl, leftAxi: this.pickerInfoChioce.leftAxi, rightAxi: this.pickerInfoChioce.rightAxi, pd: this.pd,// 瞳距 mp_name:this.name, // time: this.pickerInfoChioce.time, // img_url2: "http://localhost:8087/images/shop_1/1/", }); store.dispatch('myLoveList/getLoveList', { uid: this.$store.state.user.userInfo.uid, }); uni.navigateBack({ delta:1, animationDuration:2000 }) } else{ uni.showToast({ title:"请确认您的验光数据", icon: "none", duration: 3000, }) } } } if(this.kinds==2){ // console.log('kinds====>',this.kinds) // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) if(this.confirm){ const leftList = ["leftSph","leftCyl","leftAxi"]; const rightList = ["rightSph", "rightCyl", "rightAxi"]; let flag=0; if(this.name!=this.oldname){ store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: 'name', keyvalue: this.name, }); flag=1 } if(this.pd!=this.oldpd){ store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: 'pd', keyvalue: this.pd, }); flag=1 } // 先验证是否有改动项, for (let j=0; j<3; j++) { if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){ if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&& this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){ if(this.pickerInfoList[j].nameIndex1!=0){ store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: leftList[j], keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], }); } if(this.pickerInfoList[j].nameIndex2!=0){ store.dispatch('myLoveList/updateMylove', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, mp_id: this.mp_id, keyname: rightList[j], keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] }); } flag=1; } else{ flag=0; uni.showToast({ title:"请输入您的验光数据", icon: "none", duration: 2000, }) } } } if(flag!=0){ store.dispatch('myLoveList/getLoveList', { uid: this.$store.state.user.userInfo.uid, }); uni.navigateBack({ delta:1, animationDuration:2000 }) } } else{ uni.showToast({ title:"请确认您的验光数据", icon: "none", duration: 3000, }) } } } } }, changeConfirm() { this.confirm = !this.confirm }, bindPickerChange01: function(e) { this.pickerInfoList[0].nameIndex1 = e.target.value this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] }, bindPickerChange02: function(e) { this.pickerInfoList[0].nameIndex2 = e.target.value this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] }, bindPickerChange11: function(e) { this.pickerInfoList[1].nameIndex1 = e.target.value this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] }, bindPickerChange12: function(e) { this.pickerInfoList[1].nameIndex2 = e.target.value this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] }, bindPickerChange21: function(e) { this.pickerInfoList[2].nameIndex1 = e.target.value this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] }, bindPickerChange22: function(e) { this.pickerInfoList[2].nameIndex2 = e.target.value this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] }, bindPickerChange41: function(e) { this.pickerInfoList[3].nameIndex1 = e.target.value this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] }, bindPickerChange42: function(e) { this.pickerInfoList[3].nameIndex2 = e.target.value this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] }, bindPickerChange43: function(e) { this.pickerInfoList[3].nameIndex3 = e.target.value this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] }, } } </script> <style lang="scss"> .wrap{ min-height: 100vh; background-color: #F2F2F2; .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%; padding: 40rpx 0; .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: 32rpx; } .image2{ width: 42rpx; height: 34rpx; margin-right: 12rpx; } .confirm { display: flex; align-items: center; font-size: 12px; color: #666666; letter-spacing: -0.23px; width: 684rpx; .image1{ margin-right:25rpx; width: 42rpx; height: 38rpx; } } .picker{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; .picker-choice{ display: flex; width: 684rpx; align-items: center; margin-bottom: 40rpx; .input{ border-bottom: 1px solid #CFCFCF; height: 40rpx; } .choice-left{ width: 210rpx; .pd{ font-size: 14px; color: #333333; letter-spacing: -0.26px; text-align: justify; line-height: 24px; margin-right: 44rpx; } .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; } picker{ width: 144rpx; height: 40rpx; display: flex; position: relative; .p14 { font-size: 14px; color: #666666; letter-spacing: -0.26px; text-align: center; width: 124rpx; border-bottom: 1px solid #CFCFCF; height: 38rpx; } image{ width: 20rpx; height: 20rpx; position: absolute; right: 20rpx; top: 8rpx; } } } } } .footer{ width: 100%; position: fixed; bottom: 0; left: 0; .btn{ width: 100%; height: 112rpx; line-height: 112rpx; background: #FF6B4A; font-size: 16px; color: #FFFFFF; } } } </style>