<template> <view class="BottomSheetContent"> <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()"> <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" > <view class="BottomSheetContent"> <view class="goodInfo"> <view class="imageWrap"> <image :src="skuItem.pic" mode="aspectFill" style="width: 188rpx;height: 168rpx;" ></image> </view> <view class="infoRight"> <text class="goodName">{{goodInfo.p_name}}</text> <text class="remarks">支持7天无理由退货 顺丰发货</text> <view class="priceBox"> <view class="price">¥{{skuItem.real_price || '暂无'}}</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="peopleChoose"> <view class="title">选择使用人</view> <view class="loveList"> <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }" @click="onClickLoveItem(index,item.name)"> {{item.name}} </view> </view> </view> <view class="goods-data" v-if="isCart !== 3"> <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" v-if="isCart ==3"> <view class="item2" v-for="(one,i) in item.attr" :key="i" :class="{ active2: current[index] === i}" @click="cartOnClickItem(index, i,one.aid)" >{{one.name}}</view> </view> <view class="itemsWrap" v-else> <view class="item2" v-for="(one,i) in item.attr" :key="i" :class="{ active2: current[index] === i }" @click="cartOnClickItem(index, i,one.aid)" >{{one.name}}</view> </view> </view> </UniCollapseItem> </UniCollapse> <view class="chooseRes" v-show="!show[index]" >* {{attrList[index].attr[current[index]].name}}</view> </view> </view> <view class="button" @click.native="addCart" v-if="isCart == 1" > 加入购物车 </view> <view class="button" @click="toComfirmOrder" v-if="isCart == 2" > 立即结算 </view> <view class="button" @click="comfirmChoose" v-if="isCart == 3" > 确定 </view> </view> </scroll-view> </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, }, props: { isShowBottom : Boolean, pid: Number, sk_id:String, propMpId:String, goodInfo:Object, isCart:Number, cart_id:Number, index:Number }, data() { return { loveCurrent:Number, count: 1, // pid: 0, maxCount: 20, dataName: '', // 验光数据人员名称 isDataName: false, // 是否是已存在的人员数据 dataConfirm: false, // 已确认所输入验光数据 opIsOpen: true, addDisabled: false, desDisabled: false, current: [], show: [true,true], checkedData: {}, // 度数相关数据 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, skuValueArray:[], skId:String } }, computed: { //进购物车选择的人的index p_current(){ const getLoveItemIndex = (item) => item.mp_id == this.propMpId const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex ) if(this.isCart == 3){ this.loveCurrent = p_current } return p_current }, arr_current(){ if(this.isCart == 3){ const skId = this.sk_id const skuValue = this.skuItem.sku_value const skuValueArray = skuValue.split('_') this.skuValueArray = skuValueArray const attrList = this.$store.state.read.goodInfo.attrList for (let i = 0;i<attrList.length;i++) { const getArrIndex = (item) => item.aid == skuValueArray[i] const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex ) // console.log('arr_current',arr_current) this.current.push(arr_current) } }else{ return null } }, loveList() { return this.$store.state.myLoveList.loveList || [] }, attrList() { // console.log('attrList',this.$store.state.read.goodInfo.attrList) let attrList = this.$store.state.read.goodInfo.attrList if(attrList !== undefined){ return attrList }else{ return [] } }, skuList() { // console.log('skuList',this.$store.state.read.goodInfo.skuList) return this.$store.state.read.goodInfo.skuList }, skuItem(){ // if(this.isCart == 3){ const skuList = this.$store.state.read.goodInfo.skuList const skuItem = skuList.filter(item => item.sk_id === this.skId)[0] return skuItem // }else{ // const skuList = this.$store.state.read.goodInfo.skuList // const skuItem = skuList[0] // return skuItem // } }, mpList() { return this.$store.state.myLoveList.loveList }, }, created() { this.skuValueArray = this.skuList[0].sku_value.split("_") // console.log(this.sk_id) this.mp_id = this.propMpId const pid = this.pid if(this.isCart!==3){ this.skId = this.skuList[0].sk_id 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 }else{ this.skId = this.sk_id } //获取关心的人列表 store.dispatch('myLoveList/getLoveList', { uid: this.$store.state.user.userInfo.uid, }); // 初始化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) } }, name : "bottomSheet", methods: { //参数点击事件==》改变对应图片 cartOnClickItem(index, i,aid) { //根据aid拼接skuValue this.skuValueArray[index] = aid const sku_value = this.skuValueArray.join('_') //根据sku_value获取对应的sk_id const itemSk_id = this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id //修改sk_id this.skId = itemSk_id if (this.current[index] !== i) { this.current[index] = i } this.$forceUpdate() }, comfirmChoose(){ const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车 this.$emit("closeBottom") }, addCart(){ const that = this const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name] const checkedSKU = [] let j; for (let i = 0;i<that.current.length;i++) { checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) // console.log('i', i, j, i !== this.current.length - 1) if (i !== this.current.length - 1) { // 后续需修改算法:目前暂定只有两个参数选择,后续若有多个参数需要修改实现自适应 j = this.current[i] * this.attrList[1].attr.length } else { j += this.current[i] } } const price = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price let sk_id = this.skuList[j].sk_id // console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU) // console.log('mp_id',this.mp_id,'数量',this.count) this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车 this.$emit("closeBottom")//关闭弹窗 }, onClickLoveItem(index,name){ const loveList = this.loveList for (let index = 0; index < loveList.length; index++) { if (name === loveList[index].name && name!==this.name) { this.isDataName = true this.kinds = 2 this.name = loveList[index].name this.pd = loveList[index].pd this.mp_id = loveList[index].mp_id this.oldname = loveList[index].name this.oldpd = loveList[index].pd this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) if (loveList[index].in_time.toString().slice(5, 6) === 0) { this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) } else { this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) } if (loveList[index].in_time.toString().slice(8, 9) === 0) { this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) } else { this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) } } } this.name = name; this.loveCurrent = index; }, closeSheet(){ this.$emit('closeBottom'); }, stopEvent(){ //@click.stop防止事件冒泡 }, moveHandle(){ //不让页面滚动 }, // picker相关功能 handleInput(e) { this.name = e.target.value this.isDataName = false 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) 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() }, 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) { 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, }) this.$store.state.cart.buyItem = this.skuItem // 跳转到确认订单页面 uni.navigateTo({ url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`, }) } }, } } </script> <style lang="scss"> .BottomSheetContent { 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; position: sticky; top: 0rpx; left: 0rpx; z-index: 99999; .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; width: 100%; .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; } } } } } .peopleChoose{ width: 100%; min-height: 200rpx; border-radius: 16rpx; background-color: #ffffff; box-sizing: border-box; padding: 36rpx; margin: 10px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; .title{ font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; line-height: 24px; margin: 4px 0; } .loveList{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding-top: 24rpx; width: 100%; .peopleName { 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; } .active2 { background: rgba(255, 107, 74, 0.15); color: #ff6b4a; } } } .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-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-size: 12px; color: #666666; letter-spacing: 0; .bodyBox { margin-top: 15px; .names { font-size: 12px; color: #151515; letter-spacing: 0; text-align: justify; line-height: 17px; margin-left: 5px; margin-right: 10px; } text { 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; } } } } } } } .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: sticky; bottom: 0rpx; left: 0rpx; } } /* sheet弹窗 */ .sheet{ width: 100%; height: 100%; position: fixed; top: 150%; left: 0upx; bottom: 0upx; right: 0upx; background:rgba(0,0,0,0.3); z-index: 10000; } /* 显示时候的动画默认0.5s */ .sheetView{ width: 100%; height: 0upx; position: absolute; bottom: 0upx; background: white; z-index: 10001; transition: all 0.5s; } .sheetShow{ top:0upx !important; } /* 关闭时的动画,时间自己可以设置0.5s*/ .sheeHide{ top:120% !important; transition: all 0.5s; } /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ .sheetView_active{ height: 1042upx; } </style>