<template> <view class="content"> <view class="goodInfo"> <view class="imageWrap"> <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;" ></image> </view> <view class="infoRight"> <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> <text class="remarks">支持7天无理由退货 顺丰发货</text> <view class="priceBox"> <view class="price">¥198</view> <text>(限购{{maxCount}}副)</text> <view class="counter"> <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)" >-</view> <text>{{count}}</text> <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)" >+</view> </view> </view> </view> </view> <view class="goods-data"> <view class="opCollapse"> <view class="body"> <template v-if="opIsOpen"> <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" @blur="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> <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> </view> <view class="choose"> <view class="chooseItem_1_content" v-for="(item,index) in attrList" :key="index" > <UniCollapse @change="changeShow(index)"> <UniCollapseItem :open="show[index]" :title="item.meta_name" showAnimation=false > <view class="chooseItem_1_content"> <view class="itemsWrap"> <view class="item2" v-for="(one,i) in item.attr" :key="i" :class="{ active2: current[index] === i }" @click="onClickItem(index, i)" >{{one.name}}</view> </view> </view> </UniCollapseItem> </UniCollapse> <view class="chooseRes" v-show="!show[index]" >* {{attrList[index].attr[current[index]].name}}</view> </view> <!-- <view class="chooseItem_1 chooseItem"> <UniCollapse @change="change(1)"> <UniCollapseItem open=true title="款式挑选" showAnimation=false > <view class="chooseRes" v-show="show[1]" >* {{chooseRes1}}</view> <view class="chooseItem_1_content"> <view class="itemsWrap"> <view class="item1" v-for="(item,index) in chooseItem1" :key="index" :style="item.style" :class="{ active1: current1 === index }" @click="onClickItem1(index)" ></view> </view> </view> </UniCollapseItem> </UniCollapse> <view class="chooseRes" v-show="show[1]" >* {{chooseRes1}}</view> </view> <view class="chooseItem_2 chooseItem "> <UniCollapse @change="change(2)"> <UniCollapseItem open=true title="直径" showAnimation=false > <view class="chooseItem_1_content"> <view class="itemsWrap"> <view class="item2" v-for="(item,index) in chooseItem2" :key="index" :class="{ active2: current2 === index }" @click="onClickItem2(index)" >{{item.num}}</view> </view> </view> </UniCollapseItem> </UniCollapse> <view class="chooseRes" v-show="show[2]" >* {{chooseRes2}}</view> </view> <view class="chooseItem_3 chooseItem"> <UniCollapse @change="change(3)"> <UniCollapseItem open=true title="度数" showAnimation=false > <view class="chooseItem_1_content"> <view class="itemsWrap"> <view class="item2" v-for="(item,index) in chooseItem3" :key="index" :class="{ active2: current3 === index }" @click="onClickItem3(index)" >{{item}}</view> </view> </view> </UniCollapseItem> </UniCollapse> <view class="chooseRes" v-show="show[3]" >* {{chooseRes3}}</view> </view> --> </view> <view class="button" @click="toComfirmOrder" > 立即结算 </view> </view> </template> <script> import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' import store from '@/store' export default { components: { UniCollapse, UniCollapseItem, }, data() { return { count: 1, pid: 0, maxCount: 20, dataName: '', // 验光数据人员名称 isDataName: false, // 是否是已存在的人员数据 dataConfirm: false, // 已确认所输入验光数据 opIsOpen: true, addDisabled: false, desDisabled: false, current1: 0, current2: 0, current3: 0, current: [], show: [], chooseRes1: { sku_name: 'Miss 黑二代【减龄自然】', sk_id: '128', }, checkedData: {}, chooseRes2: '14.0', chooseRes3: 0, chooseItem1: [ { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, ], chooseItem2: [ { num: '14.0' }, { num: '14.2' }, { num: '14.4' }, { num: '14.5' }, ], chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], // 度数相关数据 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: 1, // kinds=1,提交为新增验光,2为修改 mp_id: Number, } }, computed: { attrList() { return this.$store.state.read.goodInfo.attrList }, skuList() { return this.$store.state.read.goodInfo.skuList }, mpList() { return this.$store.state.myLoveList.loveList }, }, onLoad({ pid }) { this.pid = pid store.dispatch('read/fetch', { pid, }).then(() => { const current = [] const show = [] for (let index = 0; index < this.attrList.length; index++) { current.push(0) show.push(true) } this.current = current this.show = show }) store.dispatch('myLoveList/getLoveList') // 初始化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) } // 初始化年份前后五年 const myDate = new Date() const nowYear = myDate.getFullYear() for (let i = 0; i < 5; i++) { this.pickerInfoList[3].nameArray1.push(nowYear - i) } }, methods: { // picker相关功能 handleInput(e) { this.name = e.target.value this.isDataName = false console.log('e---->', e) const mpList = this.mpList console.log('mpList===>', mpList) for (let index = 0; index < mpList.length; index++) { if (e.detail.value === mpList[index].name) { this.isDataName = true uni.showModal({ title: '提示', content: `是否填充已有的"${e.detail.value}"的数据`, success: (res) => { if (res.confirm) { this.kinds = 2 console.log('args===>', index) // const mpList=Object.assign({},this.$store.state.mympList.mpList) console.log('mpList===>', mpList) this.name = mpList[index].name this.pd = mpList[index].pd this.mp_id = mpList[index].mp_id this.oldname = mpList[index].name this.oldpd = mpList[index].pd // 将kinds =2时的值传到该页面 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) if (mpList[index].in_time.toString().slice(5, 6) === 0) { this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) } else { this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) } if (mpList[index].in_time.toString().slice(8, 9) === 0) { this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) } else { this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) } // this.checkedData = mpList[index] // console.log('checkedData', this.checkedData) } else if (res.cancel) { this.kinds = 2 } }, }) } } }, 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 = '' } }, 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] }, changeShow(num) { this.show[num] = !this.show[num] this.$forceUpdate() }, onClickItem(index, i) { if (this.current[index] !== i) { this.current[index] = i } this.$forceUpdate() }, // onClickItem1(index) { // if (this.current1 !== index) { // this.current1 = index // this.chooseRes1 = this.chooseItem1[index].describ // } // }, // onClickItem2(index) { // if (this.current2 !== index) { // this.current2 = index // this.chooseRes2 = this.chooseItem2[index].num // } // }, // onClickItem3(index) { // if (this.current3 !== index) { // this.current3 = index // this.chooseRes3 = this.chooseItem3[index] // } // }, counter(isadd) { if (isadd) { this.count >= this.maxCount ? this.addDisabled = true : this.count++ } else { this.count <= 1 ? this.desDisabled = true : this.count-- } }, toComfirmOrder() { // 先处理验光部分的逻辑,如果ok在跳转 let flag = 0 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/", }).then(({ mp_id: mpId }) => { this.mp_id = mpId }) flag = 1 } 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 } // 先验证是否输入有无空 let q = true for (let k = 0; k < 3; k++) { q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') } if (q) { for (let j = 0; j < 3; j++) { 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, }) } } else { uni.showToast({ title: '请确认您的验光数据', icon: 'none', duration: 3000, }) } } } } if (flag !== 0) { // 如果数据验证无误,那么更新验光单的数据 store.dispatch('myLoveList/getLoveList', { uid: this.$store.state.user.userInfo.uid, }) let i = 0 // 判断出是哪一个sku被选中 for (let index = 0; index < this.current.length; index++) { console.log('index', index, i, index !== this.current.length - 1) if (index !== this.current.length - 1) { // 后续需修改算法:目前暂定只有两个参数选择,后续若有多个参数需要修改实现自适应 i = this.current[index] * this.attrList[1].attr.length } else { i += this.current[index] } } // 判断是否其输入的人员数据是否已存在 store.dispatch('order/saveParams', { sk_id_arr: this.skuList[i], current: this.current, mp_id: this.mp_id, attrList: this.attrList, }) // 跳转到确认订单页面 uni.navigateTo({ url: `../confirmOrder/confirmOrder?pid=${this.pid}`, }) } }, }, } </script> <style lang="scss"> .content { min-height: 100vh; background-color: #f2f2f2; // padding-top: 20rpx; .goodInfo { width: 100%; height: 272rpx; border-radius: 16rpx; background-color: #ffffff; box-sizing: border-box; padding: 36rpx; display: flex; flex-direction: row; justify-content: flex-start; .imageWrap { height: 188rpx; width: 188rpx; margin-right: 28rpx; image { height: 188rpx; width: 188rpx; } } .infoRight { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; .goodName { font-size: 28rpx; color: #333333; } .remarks { font-size: 20rpx; color: #999999; } .priceBox { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 14px; color: #999999; .price { color: #ff6b4a; font-size: 28rpx; } .counter { display: flex; flex-direction: row; justify-content: space-between; align-items: center; 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; .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; // } // .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-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; } } } } } } } .choose { width: 100%; background: #ffffff; border-radius: 12rpx; margin-top: 20rpx; padding: 40rpx 40rpx 112rpx 40rpx; box-sizing: border-box; .chooseItem { width: 100%; padding-bottom: 32rpx; border-bottom: 1px solid #e9e9e9; margin-bottom: 28rpx; } .chooseRes { font-size: 12px; color: #666666; } .itemsWrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding-top: 24rpx; .item1 { width: 64rpx; height: 64rpx; border-radius: 32rpx; margin: 0 36rpx 24rpx 0; transition: all 0.3s; border: 1px solid #ffffff; } .item2 { // width: 100rpx; padding: 0 30rpx; height: 60rpx; margin: 0 20rpx 20rpx 0; transition: all 0.3s; background: #f2f2f2; border-radius: 2px; border-radius: 2px; line-height: 60rpx; text-align: center; color: #666666; font-size: 12px; } .active1 { opacity: 0.7; border: 1px solid #ff6b4a; } .active2 { background: rgba(255, 107, 74, 0.15); color: #ff6b4a; } } } .button { width: 100%; height: 112rpx; background-color: #ff6b4a; font-size: 16px; color: #ffffff; line-height: 112rpx; text-align: center; position: fixed; bottom: 0; left: 0; } } </style>