刘文博 / gulu-vue

Browse Code »

Commit 56ccc089eae462e5dc8158fa2c9ae647dabed611

Authored by BigBoss 5 years ago

1 parent 88c0598d36

Exists in master

修改弹窗

Showing 4 changed files with 29 additions and 17 deletions Show diff stats

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @56ccc08

 <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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">年&nbsp;&nbsp;&nbsp;(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">月&nbsp;&nbsp;&nbsp;(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">日&nbsp;&nbsp;&nbsp;(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;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
 				              <text>右&nbsp;{{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]
 					  }
 				}
 				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)//添加购物车
 				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>

src/pages.json

Diff comments View file @56ccc08

1	{	1	{
2	"pages": [	2	"pages": [
3	{	3	{
4	"path": "pages/index/index",	4	"path": "pages/index/index",
5	"style": {	5	"style": {
6	"navigationBarTitleText": "商城一览"	6	"navigationBarTitleText": "商城一览"
7	}	7	}
8	},	8	},
9	{	9	{
10	"path": "pages/user/user",	10	"path": "pages/user/user",
11	"style": {	11	"style": {
12	"navigationBarTitleText": "我的"	12	"navigationBarTitleText": "我的"
13	}	13	}
14	},	14	},
15	{	15	{
16	"path": "pages/addOpticsData/addOpticsData",	16	"path": "pages/addOpticsData/addOpticsData",
17	"style": {	17	"style": {
18	"navigationBarTitleText": "验光数据"	18	"navigationBarTitleText": "验光数据"
19	}	19	}
20	},	20	},
21	{	21	{
22	"path": "pages/detailsChoiceArgs/detailsChoiceArgs",	22	"path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23	"style": {	23	"style": {
24	"navigationBarTitleText": "镜片名称名称"	24	"navigationBarTitleText": "镜片名称名称"
25	}	25	}
26	},	26	},
27	{	27	{
28	"path": "pages/purchaseLenses/purchaseLenses",	28	"path": "pages/purchaseLenses/purchaseLenses",
29	"style": {	29	"style": {
30	"navigationBarTitleText": "参数选择"	30	"navigationBarTitleText": "参数选择"
31	}	31	}
32	},	32	},
33	{	33	{
34	"path": "pages/lensDetails/lensDetails",	34	"path": "pages/lensDetails/lensDetails",
35	"style": {	35	"style": {
36	"navigationBarTitleText": "产品详情"	36	"navigationBarTitleText": "产品详情"
37	}	37	}
38	},	38	},
39	{	39	{
40	"path": "pages/details/details",	40	"path": "pages/details/details",
41	"style": {	41	"style": {
42	"navigationBarTitleText": "产品详情"	42	"navigationBarTitleText": "产品详情"
43	}	43	}
44	},	44	},
45	{	45	{
46	"path": "pages/myOrderPaying/myOrderPaying",	46	"path": "pages/myOrderPaying/myOrderPaying",
47	"style": {	47	"style": {
48	"navigationBarTitleText": "我的订单"	48	"navigationBarTitleText": "我的订单"
49	}	49	}
50	},	50	},
51	{	51	{
52	"path": "pages/myOrder/myOrder",	52	"path": "pages/myOrder/myOrder",
53	"style": {	53	"style": {
54	"navigationBarTitleText": "我的订单"	54	"navigationBarTitleText": "我的订单"
55	}	55	}
56	},	56	},
57	{	57	{
58	"path": "pages/cart/cart",	58	"path": "pages/cart/cart",
59	"style": {	59	"style": {
60	"navigationBarTitleText": "购物车",	60	"navigationBarTitleText": "购物车",
61	// "disableScroll":true,	61	// "disableScroll":true,
62	"app-plus":{	62	"app-plus":{
63	"bounce":"none"	63	"bounce":"none"
64	}	64	}
65	}	65	}
66	},	66	},
67	{	67	{
68	"path": "pages/frameDetail/frameDetail",	68	"path": "pages/frameDetail/frameDetail",
69	"style": {	69	"style": {
70	"navigationBarTitleText": "产品详情"	70	"navigationBarTitleText": "产品详情"
71	}	71	}
72	},	72	},
73	// {	73	// {
74	// "path": "pages/refundProgress/refundProgress",	74	// "path": "pages/refundProgress/refundProgress",
75	// "style": {	75	// "style": {
76	// "navigationBarTitleText": "申请退款"	76	// "navigationBarTitleText": "申请退款"
77	// }	77	// }
78	// },	78	// },
79	// {	79	{
80	// "path": "pages/address/addAddress",	80	"path": "pages/address/addAddress",
81	// "style": {	81	"style": {
82	// "navigationBarTitleText": "新增地址"	82	"navigationBarTitleText": "新增地址"
83	// }	83	}
84	// },	84	},
85	// {	85	{
86	// "path": "pages/address/addressList",	86	"path": "pages/address/addressList",
87	// "style": {	87	"style": {
88	// "navigationBarTitleText": "地址管理"	88	"navigationBarTitleText": "地址管理"
89	// }	89	}
90	// },	90	},
91	{	91	{
92	"path": "pages/confirmOrder/confirmOrder",	92	"path": "pages/confirmOrder/confirmOrder",
93	"style": {	93	"style": {
94	"navigationBarTitleText": "确认订单"	94	"navigationBarTitleText": "确认订单"
95	}	95	}
96	},	96	},
97	// {	97	// {
98	// "path": "pages/refundment/refundWays",	98	// "path": "pages/refundment/refundWays",
99	// "style": {	99	// "style": {
100	// "navigationBarTitleText": "退款方式"	100	// "navigationBarTitleText": "退款方式"
101	// }	101	// }
102	// },	102	// },
103	// {	103	// {
104	// "path": "pages/refundment/refundment",	104	// "path": "pages/refundment/refundment",
105	// "style": {	105	// "style": {
106	// "navigationBarTitleText": "申请退款"	106	// "navigationBarTitleText": "申请退款"
107	// }	107	// }
108	// },	108	// },
109	{	109	{
110	"path": "pages/predelivery/predelivery",	110	"path": "pages/predelivery/predelivery",
111	"style": {	111	"style": {
112	"navigationBarTitleText": "待发货"	112	"navigationBarTitleText": "待发货"
113	}	113	}
114	},	114	},
115	{	115	{
116	"path": "pages/customerService/customerService",	116	"path": "pages/customerService/customerService",
117	"style": {	117	"style": {
118	"navigationBarTitleText": "在线客服"	118	"navigationBarTitleText": "在线客服"
119	}	119	}
120	},	120	},
121	{	121	{
122	"path": "pages/detailStandard/detailStandard_sun",	122	"path": "pages/detailStandard/detailStandard_sun",
123	"style": {	123	"style": {
124	"navigationBarTitleText": "太阳镜选购页"	124	"navigationBarTitleText": "太阳镜选购页"
125	}	125	}
126	},	126	},
127	{	127	{
128	"path": "pages/detailStandard/detailStandard_k",	128	"path": "pages/detailStandard/detailStandard_k",
129	"style": {	129	"style": {
130	"navigationBarTitleText": "镜框选购页"	130	"navigationBarTitleText": "镜框选购页"
131	}	131	}
132	},	132	},
133	{	133	{
134	"path": "pages/newOpticsData/newOpticsData",	134	"path": "pages/newOpticsData/newOpticsData",
135	"style": {	135	"style": {
136	"navigationBarTitleText": "验光数据"	136	"navigationBarTitleText": "验光数据"
137	}	137	}
138	}	138	}
139	],	139	],
140	"subpackages": [	140	"subpackages": [
141	{	141	{
142	"root": "pages/refundment",	142	"root": "pages/refundment",
143	"pages": [	143	"pages": [
144	"pages/refundment/refundWays",	144	"pages/refundment/refundWays",
145	"pages/refundment/refundment",	145	"pages/refundment/refundment",
146	"pages/refundProgress/refundProgress"	146	"pages/refundProgress/refundProgress"
147	]	147	]
148	},	148	},
149	{	149	{
150	"root": "pages/address",	150	"root": "pages/address",
151	"name": "pack2",	151	"name": "pack2",
152	"pages": [	152	"pages": [
153	"pages/address/addAddress",	153	"pages/address/addAddress",
154	"pages/address/addressList"	154	"pages/address/addressList"
155	]	155	]
156	}	156	}
157	],	157	],
158	"globalStyle": {	158	"globalStyle": {
159	"navigationBarTextStyle": "black",	159	"navigationBarTextStyle": "black",
160	"navigationBarTitleText": "uni-app",	160	"navigationBarTitleText": "uni-app",
161	"navigationBarBackgroundColor": "#F8F8F8",	161	"navigationBarBackgroundColor": "#F8F8F8",
162	"backgroundColor": "#F8F8F8"	162	"backgroundColor": "#F8F8F8"
163	},	163	},
164	"tabBar": {	164	"tabBar": {
165	"color": "#C0C4CC",	165	"color": "#C0C4CC",
166	"selectedColor": "#fa436a",	166	"selectedColor": "#fa436a",
167	"borderStyle": "black",	167	"borderStyle": "black",
168	"backgroundColor": "#ffffff",	168	"backgroundColor": "#ffffff",
169	"list": [	169	"list": [
170	{	170	{
171	"pagePath": "pages/index/index",	171	"pagePath": "pages/index/index",
172	"iconPath": "static/tab-home.png",	172	"iconPath": "static/tab-home.png",
173	"selectedIconPath": "static/tab-home-current.png",	173	"selectedIconPath": "static/tab-home-current.png",
174	"text": "首页"	174	"text": "首页"
175	},	175	},
176	{	176	{
177	"pagePath": "pages/cart/cart",	177	"pagePath": "pages/cart/cart",
178	"iconPath": "static/tab-cart.png",	178	"iconPath": "static/tab-cart.png",
179	"selectedIconPath": "static/tab-cart-current.png",	179	"selectedIconPath": "static/tab-cart-current.png",
180	"text": "购物车"	180	"text": "购物车"
181	},	181	},
182	{	182	{
183	"pagePath": "pages/user/user",	183	"pagePath": "pages/user/user",
184	"iconPath": "static/tab-my.png",	184	"iconPath": "static/tab-my.png",
185	"selectedIconPath": "static/tab-my-current.png",	185	"selectedIconPath": "static/tab-my-current.png",
186	"text": "我的"	186	"text": "我的"
187	}	187	}
188	]	188	]
189	},	189	},
190	"condition": {	190	"condition": {
191	"current": 0,	191	"current": 0,
192	"list": [	192	"list": [
193	// {	193	// {
194	// "name": "首页",	194	// "name": "首页",
195	// "path": "pages/test/index",	195	// "path": "pages/test/index",
196	// "query": ""	196	// "query": ""
197	// },	197	// },
198	{	198	{
199	"name": "首页",	199	"name": "首页",
200	"path": "pages/index/index",	200	"path": "pages/index/index",
201	"query": ""	201	"query": ""
202	},	202	},
203	{	203	{
204	"name": "产品详情",	204	"name": "产品详情",
205	"path": "pages/details/details",	205	"path": "pages/details/details",
206	"query": ""	206	"query": ""
207	},	207	},
208	{	208	{
209	"name": "旧版产品详情",	209	"name": "旧版产品详情",
210	"path": "pages/frameDetail/frameDetail",	210	"path": "pages/frameDetail/frameDetail",
211	"query": ""	211	"query": ""
212	},	212	},
213	{	213	{
214	"name": "镜片、美瞳参数选择",	214	"name": "镜片、美瞳参数选择",
215	"path": "pages/purchaseLenses/purchaseLenses",	215	"path": "pages/purchaseLenses/purchaseLenses",
216	"query": ""	216	"query": ""
217	},	217	},
218	{	218	{
219	"name": "确认订单",	219	"name": "确认订单",
220	"path": "pages/confirmOrder/confirmOrder",	220	"path": "pages/confirmOrder/confirmOrder",
221	"query": ""	221	"query": ""
222	},	222	},
223	{	223	{
224	"name": "新增地址",	224	"name": "新增地址",
225	"path": "pages/address/addAddress",	225	"path": "pages/address/addAddress",
226	"query": ""	226	"query": ""
227	},	227	},
228	{	228	{
229	"name": "地址管理",	229	"name": "地址管理",
230	"path": "pages/address/addressList",	230	"path": "pages/address/addressList",
231	"query": ""	231	"query": ""
232	},	232	},
233	{	233	{
234	"name": "我的订单",	234	"name": "我的订单",
235	"path": "pages/myOrder/myOrder",	235	"path": "pages/myOrder/myOrder",
236	"query": ""	236	"query": ""
237	},	237	},
238	{	238	{
239	"name": "待付款订单详情",	239	"name": "待付款订单详情",
240	"path": "pages/myOrderPaying/myOrderPaying",	240	"path": "pages/myOrderPaying/myOrderPaying",
241	"query": ""	241	"query": ""
242	},	242	},
243	{	243	{
244	"name": "我的",	244	"name": "我的",
245	"path": "pages/user/user",	245	"path": "pages/user/user",
246	"query": ""	246	"query": ""
247	}	247	}
248	]	248	]
249	}	249	}
250	}	250	}

src/pages/cart/cart.vue

Diff comments View file @56ccc08

 <template>
   <view class="content">
     <block v-if="cartList.length==0">
     </block>
     <block v-else>
       <view class="card">
         <view class="cardHeader">
           <view
             v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
 			@click="pClick"
           >
             <span class="correct"></span>
           </view>
           <image
             src="../../static/store.png"
             mode="aspectFill"
           ></image>
           <text>非常戴镜</text>
         </view>
         <view
           class="cardBody"
           v-for="(item,index) in cartList"
           :key="index"
           @longpress="delCart(item.cart_id,index)"
         >
           <view
             v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
 			@click="childClick(cartList[index],index)"
           >
             <span class="correct"></span>
           </view>
           <view class="imageWrap">
             <image
               :src="item.img_index_url"
               mode="aspectFit"
               style="width: 188rpx;height: 168rpx;"
             ></image>
           </view>
           <view class="goodInfo">
             <!-- <view class="imageWrap">
               <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
             </view> -->
             <view class="infoRight">
               <view
                 class="goodName"
                 @tap="toGoods(item.pid,item.sk_id)"
               >{{item.p_name}}</view>
               <view class="describ"  @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
 				  <view class="desL">
 						<view class="people">
 							使用人：{{item.peopleName}}
 						</view>
 						<view class="skuInfo">
 							{{item.sku_name}}
 						</view>
 				  </view>
 				  <view class="desR">
 						<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
 				  </view>
               </view>
               <view class="priceBox">
                 <view class="price">￥{{item.nowPrice*item.num}}</view>
                 <text class="maxCount">(限购{{maxCount}}副)</text>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.addDisabled"
                     type="default"
                     @tap="counter(index,false,item)"
                   >-</view>
                   <text>{{item.num}}</text>
                   <view
                     class="btn"
                     disabled="this.desDisabled"
                     type="default"
                     @tap="counter(index,true,item)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
         </view>
       </view>
     </block>
     <view class="footer">
       <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
       <view class="footerRight">
           <view class="paybtn" @click="toComfirmOrder">立即结算</view>
       </view>
     </view>
 	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
 	:index="cartIndex"
 	 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom"  @closeBottom="closeBottom"></BottomSheet>
   </view>
 </template>
 <script>
 import store from '@/store'
 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
 export default {
 	components:{
 		BottomSheet,
 	},
   data() {
     return {
 		pid:Number,
 		isCart:Number,
 		sk_id:String,
 		mp_id:String,
 		isShowBottom : false,	//底部弹窗开关
 		cart_id:Number,
 		maxCount: 20,
 		cartIndex:Number,
 		cartList:[]
     }
   },
   computed: {
 	pIsoPen (){
 		if (this.cartList.length > 0){
 			return this.cartList.find(item => !item.isChecked) ? false : true;
 		}
 		return false
 	},
 	goodInfo () {
 	  return this.$store.state.read.goodInfo
 	},
 	totalPrice() {
 		let totalPrice = 0
 		this.cartList.forEach((item)=>{
 			 if(item.isChecked){
 				totalPrice += item.nowPrice * item.num;
 			 }
 		})
 		return totalPrice
 	}
   },
   onShow() {
 	this.cartList = this.$store.state.cart.cartList;
   },
   onLoad: async function() {
     await this.$store.dispatch('cart/getCartList', {
       uid: this.$store.state.user.userInfo.uid, // 用户id
     })
 	this.cartList = this.$store.state.cart.cartList;
 	this.cartList.forEach((item)=>{
 		 item.isChecked = false
 	})
   },
   methods: {
 	  //全选按钮
 	  pClick(){
 		  let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
 		  let oldList = this.cartList;
 		  oldList.forEach((item, index)=>{
 		  	 item.isChecked = !pStatus
 			  this.cartList.splice(index,1, item)
 		  })
 	  },
 	  //单选按钮
 	  childClick(type,index){
 		  this.cartList[index].isChecked = !this.cartList[index].isChecked
 		  //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
 		  this.cartList.splice(index,1, this.cartList[index])
 	  },
 	  //修改购物车
 	  chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
 		  // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
 		  store.dispatch('cart/modiCart', {
 		    uid: this.$store.state.user.userInfo.uid,
 		    openid: this.$store.state.user.userInfo.openid,
 		    mp_id: mp_id,
 		    sk_id: sk_id,
 		    price: price,
 		    pid: pid,
 		    num: num,
 		    cart_id: cart_id,
 			args: {
 			  index: index,
 			},
 		  })
 		  store.dispatch('cart/getCartList', {
 			uid: this.$store.state.user.userInfo.uid, // 用户id
 		  })
 		  this.$forceUpdate()
 		  // console.log('21212121212',this.cartList)
 	  },
 	  //底部弹窗开关
 	  showBottom(isCart,pid,skId,mp_id,cart_id,index){
 		  store.dispatch('read/fetch', {
 			pid,
 			sk_id: skId,
 		  }).then(()=>{
 			  this.cartIndex = index
 			  this.sk_id = skId;
 			  this.pid = pid;
 			  this.mp_id = mp_id;
 			  this.isCart = isCart;
 			  this.cart_id = cart_id;
 			  this.isShowBottom = true;
 		  })
 	  },
 	  closeBottom(){
 	  	this.isShowBottom = false;
 	  },
     toGoods(id, sk_id) {
       uni.navigateTo({
         url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
 	toComfirmOrder(){
 		this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
-		uni.navigateTo({
+		if(this.$store.state.cart.checkedCartLst.length>0){
-			url:`../confirmOrder/confirmOrder?isCart=true`,
+			uni.navigateTo({
-		})
+				url:`../confirmOrder/confirmOrder?isCart=true`,
+			})
+		}else{
+			uni.showToast({
+				title:'您还没有选择宝贝哦~',
+				icon:'none'
+			})
+		}
 	},
     counter(index, isadd, item) {
       // console.log('item=====>', item)
       // console.log('num=====>', item.num)
       const nums = parseInt(item.num)
       if (isadd) {
         if (nums >= this.maxCount) {
           this.addDisabled = true
         } else {
           this.addDisabled = true
           store.dispatch('cart/modiCart', {
             uid: this.$store.state.user.userInfo.uid,
             openid: this.$store.state.user.userInfo.openid,
             mp_id: item.mp_id,
             sk_id: item.sk_id,
             price: item.nowPrice,
             pid: item.pid,
             num: nums + 1,
             cart_id: item.cart_id,
             args: {
               index: index,
               isadd: isadd,
             },
           })
           this.addDisabled = false
         }
       } else {
         if (nums <= 1) {
           this.desDisabled = true
         } else {
           this.desDisabled = false
           store.dispatch('cart/modiCart', {
             uid: this.$store.state.user.userInfo.uid,
             openid: this.$store.state.user.userInfo.openid,
             mp_id: item.mp_id,
             sk_id: item.sk_id,
             price: item.nowPrice,
             pid: item.pid,
             num: nums - 1,
             cart_id: item.cart_id,
             args: {
               index: index,
               isadd: isadd,
             },
           })
           this.desDisabled = true
         }
       }
     },
     delCart(cart_id, index) {
       cart_id = parseInt(cart_id)
 	  uni.showModal({
 	    title: '是否删除该商品',
 	    success: function (res) {
 	      if (res.confirm) {
 	        store.dispatch('cart/delCart', {
 	          uid: this.$store.state.user.userInfo.uid,
 	          openid: this.$store.state.user.userInfo.openid,
 	          cart_id: cart_id, // 要修改的购物车id
 	          arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
 	        })
 	      }
 	    }.bind(this),
 	  })
 	  // this.cartList.splice(index,1)
     },
   },
 }
 </script>
 <style lang="scss">
 .content {
   min-height: 100vh;
   background-color: #f2f2f2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 40rpx;
   box-sizing: border-box;
   .partentCheck {
     width: 16px;
     height: 16px;
     border-radius: 22px;
     border: 1px solid #cfcfcf;
     background-color: #ffffff;
     margin: 24rpx 12rpx 24rpx 24rpx;
   }
   .partentChecked {
     width: 18px;
     height: 18px;
     border-radius: 22px;
     background-color: #ff6b4a;
     margin: 24rpx 12rpx 24rpx 24rpx;
     .correct {
       display: inline-block;
       position: relative;
       width: 10rpx;
       height: 2rpx;
       background: #ffffff;
       line-height: 0;
       font-size: 0;
       position: relative;
       top: -7px;
       left: 4px;
       -webkit-transform: rotate(45deg);
     }
     .correct:after {
       content: "/";
       display: block;
       width: 16rpx;
       height: 2rpx;
       background: #ffffff;
       -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
     }
   }
   .card {
     background-color: #ffffff;
     border-radius: 16rpx;
     box-sizing: border-box;
     padding: 36rpx 36rpx 36rpx 18rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 180rpx;
     .cardHeader {
       width: 100%;
       height: 36rpx;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       margin-bottom: 20rpx;
       image {
         height: 32rpx;
         width: 32rpx;
         padding-left: 6px;
         padding-right: 10px;
       }
       text {
         // font-family: PingFangSC-Regular;
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
       }
     }
     .cardBody {
       width: 100%;
       min-height: 300rpx;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .goodInfo {
         width: 390rpx;
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         padding-left: 6px;
         .imageWrap {
           height: 188rpx;
           width: 188rpx;
           margin-right: 28rpx;
           image {
             border-radius: 4px;
             height: 188rpx;
             width: 188rpx;
           }
         }
         .infoRight {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
           min-height: 240rpx;
 		  width: 100%;
           .goodName {
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
             text-align: justify;
             overflow: hidden;
             font-size: 28rpx;
             color: #333333;
           }
           .describ {
             width: 100%;
             min-height: 80rpx;
 			background: #F9F9F9;
 			border-radius: 2px;
             box-sizing: border-box;
             padding: 10rpx;
             font-size: 20rpx;
             letter-spacing: -0.23px;
             color: #999999;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			.desL{
 				view{
 					margin: 10rpx 0 10rpx 0 ;
 				}
 			}
           }
           .priceBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             // margin-top: 26px;
             width: 100%;
             font-size: 14px;
             color: #999999;
             .maxCount {
               color: #999999;
               font-size: 20rpx;
             }
             .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;
               }
             }
           }
         }
       }
     }
   }
   .footer {
     position: fixed;
     left: 0;
     bottom: 0px;
     height: 112rpx;
     width: 100%;
     background-color: #ffffff;
     font-size: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .footerLeft {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 50%;
       color: #333333;
       text {
         color: #ff6b4a;
       }
     }
     .footerRight {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       width: 50%;
       margin-right: 26rpx;
       .paybtn {
         display: flex;
         justify-content: center;
         align-items: center;
         background: #ff6b4a;
         border-radius: 20px;
         border-radius: 20px;
         color: #ffffff;
         width: 204rpx;
         height: 80rpx;
       }
     }
   }
 }
 /* 隐藏滚动条 */
  ::-webkit-scrollbar {
 	width: 0;
 	height: 0;
 	color: transparent;
   }
 </style>

src/pages/frameDetail/frameDetail.vue

Diff comments View file @56ccc08

 <template>
   <view class="container">
     <view class="D1">
       <!-- 轮播图 -->
       <swiper
         class="swiperImage"
         :indicator-dots="true"
         :autoplay="true"
         :interval="4000"
         :duration="500"
       >
         <swiper-item
           v-for="(item, index) in goodInfo.pics"
           :key="index"
         >
           <image
             :src="item"
             mode="scaleToFill"
           ></image>
         </swiper-item>
       </swiper>
       <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
       <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
       <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
     </view>
     <!-- <view
       class="D2"
       v-if="updateGoodType == 2 || updateGoodType == 4"
     >
       <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
       <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
       <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
     </view> -->
     <view class="D3">
       <view class="screenBar">
         <view
           v-for="item in screenItems"
           :key="item.current"
           @click="tabChange(item.current)"
         >
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
           >{{ item.text || '暂无' }}</view>
         </view>
       </view>
       <view
         class="screen-item"
         v-if="current === 1"
       >
         <view class="D3_list">
           <view
             v-for="(item) in parameter"
             :key="item.key"
           >
             <image
               class="D3_image"
               v-bind:src="item.img"
             ></image>
             <span>{{item.standard || '暂无'}}</span>
             <span>{{item.slength || '暂无'}}</span>
           </view>
         </view>
       </view>
       <view
         class="screen-item"
         v-if="current === 0"
       >
         <view class="D3_list">
           <!-- <block>
             <view>主体</view>
             <view>商品产地：韩国</view>
             <view>包装清单：彩色隐形 * 1</view>
           </block> -->
           <!-- 迭代时建议配合接口修改 为数组 -->
           <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
             <view class="">
               年龄：<view
                 v-for="(item,index) in tag.prod_tag_age"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
             <view class="">
               颜色：<view
                 v-for="(item,index) in tag.prod_tag_color"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
             <view class="">
               脸型：<view
                 v-for="(item,index) in tag.prod_tag_face"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
             <view class="">
               赠品：<view
                 v-for="(item,index) in tag.prod_tag_freesend"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
             <view class="">
               保险：<view
                 v-for="(item,index) in tag.prod_tag_insurance"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
             <view class="">
               材质：<view
                 v-for="(item,index) in tag.prod_tag_metal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
             <view class="">
               个性：<view
                 v-for="(item,index) in tag.prod_tag_personal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
             <view class="">
               场景：<view
                 v-for="(item,index) in tag.prod_tag_sense"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
             <view class="">
               性别：<view
                 v-for="(item,index) in tag.prod_tag_sex"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
             <view class="">
               风格：<view
                 v-for="(item,index) in tag.prod_tag_style"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
             <view class="">
               重量：<view
                 v-for="(item,index) in tag.prod_tag_weight"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
               </view>
             </view>
           </view>
         </view>
       </view>
       <view
         class="screen-item "
         v-if="current ===2"
       >
         <view class="customerService">
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">卖家服务</text>
             </view>
             <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
           </view>
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">平台承诺</text>
             </view>
             <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
           </view>
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">正品保证</text>
             </view>
             <view class="itemContent">向您保证所售商品均为正品行货</view>
           </view>
           <view class="serviceItem2">
             <view class="title">
               <text class="titleText">权利申明</text>
             </view>
             <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
           </view>
           <view class="serviceItem2">
             <view class="title">
               <text class="titleText">价格保证</text>
             </view>
             <view class="itemContent">
               <view class="itemContent-child">
                 <text class="contentTitle">平台价:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">划线价:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">平折扣:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">异常问题:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
     <view
       class="D4"
       v-if="current !==2"
     >
       <view class="D4_esvalue">
         <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
         <view class="D4_2">
           <view
             class="star"
             v-for="o in starCount"
             :key="o"
           >
             <image
               src="../../static/img/detail/d_star.png"
               mode="aspectFill"
               style="height: 26rpx; width: 28rpx;"
             ></image>
           </view>
         </view>
       </view>
       <view class="D4_list">
         <view
           v-for="(assess) in goodInfo.judge_tag"
           :key="assess.key"
         >{{assess.name}}</view>
       </view>
     </view>
     <view
       class="D5"
       v-if="current !==2"
     >
       <view
         class="D5_fixed1"
         @click="consolg(goodInfo.prodIntro1)"
       >
         <image src="/static/img/detail/hr.png"></image>
         <view>商品详细</view>
         <image src="/static/img/detail/hr.png"></image>
       </view>
       <view
         class="D5_all"
         v-html="test"
       >
         <!-- <block>
           <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
         </block> -->
       </view>
     </view>
     <!-- 底部菜单 -->
     <view class="botton">
       <view
         @tap="toCart()"
         class="botton_1"
       >
         <view class="cart_icon">
           <image v-bind:src="imgShop.img" />
           <text>{{cartNumber}}</text>
         </view>
         <view class="botton_image">购物车</view>
       </view>
       <view class="botton_2">
         <view
           class="botton_input"
           @tap="showBottom(1)"
         >加入购物车</view>
         <view
           class="botton_now"
 		  @click="showBottom(2)"
         >立即购买</view>
       </view>
     </view>
     <BottomSheet
       v-if="isShowBottom"
       :isCart="isCart"
       @addCart="addCart"
       :pid="pid"
       :goodInfo="goodInfo"
       :isShowBottom="isShowBottom"
       @closeBottom="closeBottom"
     ></BottomSheet>
   </view>
 </template>
 <script>
 import store from '@/store'
 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
 export default {
 	components:{
 		BottomSheet,
 	},
   data () {
     return {
 	  isCart:Number,
 	  isShowBottom : false,	//底部弹窗开关
       test: '',
       goodType: 2,
       screenItems: [
         { current: 0, text: '商品介绍' },
         { current: 1, text: '规格参数' },
         { current: 2, text: '售后保障' },
       ],
       current: 0,
       starCount: 5,
       parameter: [
         { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
         { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
         { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
         { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
         { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
         { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
       ],
       esvalue: '宝贝好评率',
       introduction: {
         material: '钛合金',
         func: '抗疲劳/防辐射',
         rate: '男/女',
       },
       imgAll: '/static/img/detail/d8.png',
       photoes: [
         { value: '日常办公', img: '/static/img/detail/d9.png' },
         { value: '上网', img: '/static/img/detail/d10.png' },
         { value: '追剧', img: '/static/img/detail/d11.png' },
         { value: '玩游戏', img: '/static/img/detail/d12.png' },
       ],
       imgDetail: '/static/img/detail/d13.png',
       imgShop: {
         img: '/static/tab-cart.png',
         IsShown: false,
       },
       tag: {
         prod_tag_freesend: [{
           label: '眼镜盒',
           value: '262',
         }],
       },
 	  pid: Number,
 	  // 购物车数据
 	  addCartList: {
 	    uid: Number,//用户的唯一识别码
 	    openid: String,
 	    mp_id: Number,//使用人
 	    sk_id: Number,//产品的sku_id
 	    num: Number,//购买数量
 	    pid: Number,//产品id
 	    price: Number,//价格
 	  	checkedSKU:Object//产品信息
 	  },
     }
   },
   onLoad: function ({ pid, sk_id: skId }) {
     this.pid = pid
     // console.log('sk_id=====>',sk_id)
     store.dispatch('read/fetch', {
       pid,
       // sk_id: skId,
     }).then(() => {
       this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
       this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
       this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
       this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
       this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
       this.parameter[5].slength = `${this.goodInfo.weight}mm`
       this.tag = this.goodInfo.tag
       this.test = this.goodInfo.prodIntro1
       this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
       // addCart
       this.addCartList.uid = this.$store.state.user.userInfo.uid
       this.addCartList.openid = this.$store.state.user.userInfo.openid
       this.addCartList.pid = this.goodInfo.pid
       this.addCartList.price = this.goodInfo.priceArea.Min_Price
     })
     store.dispatch('cart/getCartList')
     // console.log(this.$store.state.user.userInfo.uid + 'ssss')
   },
   computed: {
     updateGoodType () {
       return this.goodType
     },
     goodInfo () {
       // console.log(this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
     cartNumber() {
       return this.$store.state.cart.cartList.length || 0
     },
   },
   methods: {
     // 底部弹窗开关
     showBottom(isCart) {
       this.isCart = isCart
       this.isShowBottom = true
     },
     closeBottom() {
       this.isShowBottom = false
     },
     // 前往购物车
     toCart() {
       uni.switchTab({
         url: '/pages/cart/cart',
         success: res => {},
         fail: (error) => { console.log('跳转购物车失败======>', error) },
         complete: () => { console.log('toCart') },
       })
     },
     // 加入购物车
     addCart (mp_id,num,checkedSKU,sk_id) {
 		this.addCartList.mp_id = mp_id
 		this.addCartList.sk_id = sk_id
 		this.addCartList.num = num
 		this.addCartList.checkedSKU = checkedSKU
-		console.log('添加购物车的参数',this.addCartList)
+		console.log('添加购物车的参数',mp_id)
+		console.log('添加购物车的参数',sk_id)
+		console.log('添加购物车的参数',num)
+		console.log('添加购物车的参数',checkedSKU)
       store.dispatch('cart/addCart', this.addCartList).then((res)=>{
 		  if(res.code == 1){
 			  uni.showToast({
 			  	title:'添加成功~',
 				icon:'success'
 			  })
 		  }
 		  // 再次请求购物车接口，实现实时更新
 		  store.dispatch('cart/getCartList', {
 		    uid: this.$store.state.user.userInfo.uid,
 		  })
 	  })
     },
     goPerchase () {
       // switch (this.updateGoodType) {
       //   case '1':
       console.log('goPerchase')
       uni.navigateTo({
         url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
         success: res => {},
         fail: (error) => { console.log('跳转参数选择失败======>', error) },
         complete: () => { console.log('goPerchase') },
       })
     },
     tabChange (e) {
       if (this.current !== e) {
         this.current = e
       }
     },
   },
 }
 </script>
 <style lang='scss'>
 .container {
   background-color: #f8f8f8;
 }
 .D1,
 .D2,
 .D3,
 .D4,
 .D6 {
   background: #ffffff;
   margin-bottom: 10px;
   padding: 8px 20px 8px 20px;
   box-sizing: border-box;
   .swiperImage {
     width: 684rpx;
     height: 480rpx;
     image {
       max-width: 100%;
       max-height: 100%;
       border-radius: 16rpx;
     }
   }
 }
 .D5 {
   background: #ffffff;
   padding: 8px 20px 8px 20px;
   box-sizing: border-box;
 }
 .swiperImage {
   width: 100%;
   height: 560rpx;
   .swiper-item {
     width: 100%;
     image {
       width: 100%;
     }
   }
 }
 .D1 {
   .D1_price {
     color: #eb5d3b;
     font-size: 18px;
     margin-top: 5px;
     font-family: "PingFangSC-Semibold";
     display: flex;
     justify-content: space-between;
     .D1_number {
       color: #999999;
       font-size: 14px;
       font-family: "PingFangSC-Regular";
     }
   }
   .D1_name {
     font-size: 16px;
     font-family: "PingFangSC-Semibold";
     margin-top: 5px;
     .D1_name1 {
       font-weight: bold;
       font-size: 16px;
       color: #333333;
     }
   }
   .D1_spans {
     font-size: 10px;
     color: #999999;
     margin-top: 5px;
     span {
       height: 14px;
       margin-right: 10px;
     }
   }
 }
 .D2 {
   font-size: 14px;
   font-family: "PingFangSC-Regular";
   view {
     height: 24px;
   }
   .D2_span1 {
     color: #999999;
   }
   .D2_span2 {
     color: #333333;
   }
 }
 .D3 {
   .screenBar {
     width: 670rpx;
     margin-top: 20rpx;
     margin-bottom: 24rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     color: #333333;
     transition: all 0.2s;
   }
   .screen-item {
     font-size: 32rpx;
     color: #333333;
     display: flex;
     transition: all 0.2s;
     .D3_list {
       margin-bottom: 4px;
     }
     .D3_list view {
       display: flex;
       align-content: center;
       font-size: 14px;
       color: #333333;
     }
     .D3_list image {
       width: 50px;
       height: 25px;
       margin-right: 6px;
     }
     .D3_list span {
       margin-left: 6px;
       margin-right: 5px;
       font-family: "PingFangSC-Regular";
     }
   }
   .active {
     border-bottom: 4rpx solid #ff6b4a;
   }
   .customerService {
     margin-bottom: 90rpx;
     .serviceItem {
       margin-bottom: 32rpx;
       .title {
         display: flex;
         flex-direction: row;
         align-items: center;
         .titleText {
           font-size: 14px;
           color: #333333;
           margin-bottom: 12rpx;
         }
       }
       .itemContent {
         font-size: 14px;
         color: #999999;
         margin-left: 18rpx;
       }
     }
     .serviceItem2 {
       margin-left: 18rpx;
       margin-bottom: 32rpx;
       .titleText {
         font-size: 14px;
         color: #ff6b4a;
       }
       .itemContent {
         font-size: 14px;
         color: #999999;
         .itemContent-child {
           margin-bottom: 40rpx;
           .contentTitle {
             border-bottom: 1px solid #ff6b4a;
           }
         }
       }
     }
   }
 }
 .D4 {
   .D4_esvalue {
     font-size: 14px;
     color: #333333;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     .D4_2 {
       width: 90px;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
   }
   .D4_esvalue view {
     font-size: 14px;
     color: #333333;
     font-weight: bold;
   }
   .D4_list {
     display: grid;
     grid-row-gap: 10px;
     grid-column-gap: 4px;
   }
   .D4_list view {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     width: 118px;
     height: 24px;
     border-radius: 2px;
     background: #f2f2f2;
     color: #666666;
     // letter-spacing: 1px;
   }
 }
 .D5 {
   .D5_fixed1 {
     display: flex;
     justify-content: space-between;
     align-content: center;
     margin-bottom: 12px;
     view {
       font-size: 14px;
       color: #333333;
       font-weight: bold;
       font-family: "PingFangSC-Medium";
       line-height: 24px;
     }
     image {
       width: 240rpx;
       height: 3px;
       margin-top: 10px;
     }
   }
   .D5_all {
     width: 100%;
     margin-top: 30rpx;
     margin-right: 30rpx;
     margin-bottom: 180rpx;
     font-family: "PingFangSC-Regular";
     // border: #999999 solid 1.5px;
   }
 }
 .D6 {
   width: 100%;
   height: 430px;
   background: #f9f6ed;
   margin-bottom: 74px;
   view {
     text-align: center;
   }
   .D6_v1 {
     font-weight: bold;
   }
   .D6_v2 {
     font-size: 14px;
     margin-bottom: 30px;
   }
   .D6_v5 {
     .D6_v5_s1 {
       font-weight: bold;
     }
     .D6_v5_s2 {
       font-size: 14px;
     }
   }
 }
 .botton {
   position: fixed;
   bottom: 0;
   height: 74px;
   width: 100%;
   background: #ffffff;
   padding: 20px 20px 8px 20px;
   font-family: "PingFangSC-Regular";
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-content: center;
   .botton_1 {
     width: 20%;
     height: 100%;
     text-align: center;
     color: #989898;
     .cart_icon {
       position: relative;
       image {
       }
       text {
         position: absolute;
         color: white;
         font-size: 17px;
         background-color: red;
         min-height: 24px;
         min-width: 24px;
         line-height: 24px;
         right: -12%;
         top: -12px;
         text-align: center;
         border-radius: 24px;
         padding: 2px;
       }
     }
   }
   image {
     width: 42%;
     height: 26px;
   }
   .botton_image {
     font-size: 12px;
     text-align: center;
   }
   .botton_2 {
     width: 74%;
     height: 86%;
     display: grid;
     grid-template-columns: 50% 50%;
   }
   .botton_input {
     display: inline-flex;
     align-items: center;
     justify-content: space-around;
     background: #fff0ec;
     font-size: 16px;
     color: #ff6b4a;
     border-radius: 20px 0 0 20px;
   }
   .botton_now {
     display: inline-flex;
     align-items: center;
     justify-content: space-around;
     background: #ff6b4a;
     font-size: 16px;
     color: #ffffff;
     border-radius: 0 20px 20px 0;
   }
 }
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
   width: 0;
   height: 0;
   color: transparent;
 }
 </style>