Adam / gulu-vue

Download as
Browse Code »

Commit 22e1420fab4604602a90616bcf586d952718d179

Authored by BigBoss
1 parent 0bda9efecb
Exists in master

弹窗组件修改

Showing 6 changed files with 1408 additions and 1258 deletions   Show diff stats
src/components.zip
View file @0bda9ef
No preview for this file type
src/components/BottomSheet/BottomSheet.vue
Diff comments   View file @22e1420
... ... @@ -0,0 +1,1247 @@
  1 +<template>
  2 + <view class="BottomSheetContent">
  3 + <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
  4 + <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
  5 + <view class="BottomSheetContent">
  6 + <view class="goodInfo">
  7 + <view class="imageWrap">
  8 + <image
  9 + :src="skuItem.pic"
  10 + mode="aspectFill"
  11 + style="width: 188rpx;height: 168rpx;"
  12 +
  13 + ></image>
  14 +
  15 + </view>
  16 + <view class="infoRight">
  17 + <text class="goodName">{{goodInfo.p_name}}</text>
  18 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  19 + <view class="priceBox">
  20 + <view class="price">￥{{skuItem.real_price || '暂无'}}</view>
  21 + <text>(限购{{maxCount}}副)</text>
  22 + <view class="counter">
  23 + <view
  24 + class="btn"
  25 + disabled="this.addDisabled"
  26 + type="default"
  27 + @click="counter(false)"
  28 + >-</view>
  29 + <text>{{count}}</text>
  30 + <view
  31 + class="btn"
  32 + disabled="this.desDisabled"
  33 + type="default"
  34 + @click="counter(true)"
  35 + >+</view>
  36 + </view>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + <view class="peopleChoose">
  41 + <view class="title">选择使用人</view>
  42 + <view class="loveList">
  43 + <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
  44 + @click="onClickLoveItem(index,item.name)">
  45 + {{item.name}}
  46 + </view>
  47 + </view>
  48 + </view>
  49 + <view class="goods-data" v-if="isCart !== 3">
  50 + <view class="opCollapse">
  51 + <view class="body">
  52 + <template v-if="opIsOpen">
  53 + <view class="goods-form">
  54 + <view class="p1">
  55 + <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
  56 + 填写验光数据
  57 + </view>
  58 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  59 + <view class="picker">
  60 + <view class="picker-choice">
  61 + <view class="choice-left">
  62 + <text class="pd">验光单取名:</text>
  63 + </view>
  64 + <input type="text" @blur="handleInput" class="input"
  65 + placeholder="请输入名称" maxlength="20" :value="name" />
  66 + </view>
  67 + </view>
  68 + <view class="picker" >
  69 + <view class="picker-choice">
  70 + <view class="choice-left">
  71 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  72 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  73 + </view>
  74 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  75 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  76 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  77 + <view class="p14">
  78 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
  79 + <image src="../../static/detail-tabicon.png" ></image>
  80 + </view>
  81 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  82 + </picker>
  83 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  84 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
  85 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  86 + <view class="p14">
  87 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
  88 + <image src="../../static/detail-tabicon.png" ></image>
  89 + </view>
  90 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  91 + </picker>
  92 + </view>
  93 + </view>
  94 + <view class="picker" >
  95 + <view class="picker-choice">
  96 + <view class="choice-left">
  97 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  98 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  99 + </view>
  100 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  101 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
  102 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  103 + <view class="p14">
  104 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  105 + <image src="../../static/detail-tabicon.png" ></image>
  106 + </view>
  107 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  108 + </picker>
  109 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  110 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
  111 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  112 + <view class="p14">
  113 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  114 + <image src="../../static/detail-tabicon.png" ></image>
  115 + </view>
  116 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  117 + </picker>
  118 + </view>
  119 + </view>
  120 + <view class="picker" >
  121 + <view class="picker-choice">
  122 + <view class="choice-left">
  123 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  124 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  125 + </view>
  126 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  127 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  128 + <view class="p14">
  129 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  130 + <image src="../../static/detail-tabicon.png" ></image>
  131 + </view>
  132 + </picker>
  133 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  134 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
  135 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  136 + <view class="p14">
  137 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  138 + <image src="../../static/detail-tabicon.png" ></image>
  139 + </view>
  140 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  141 + </picker>
  142 + </view>
  143 + </view>
  144 + <view class="picker">
  145 + <view class="picker-choice">
  146 + <view class="choice-left">
  147 + <text class="pd">瞳距:</text>
  148 + </view>
  149 + <input type="digit" @change="handleInputPd" class="input"
  150 + placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
  151 + </view>
  152 + </view>
  153 + <view class="picker" >
  154 + <view class="picker-choice">
  155 + <view class="choice-left">
  156 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  157 + </view>
  158 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  159 + <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  160 + <view class="p14" style="width: 30px;">
  161 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  162 + <image src="../../static/detail-tabicon.png" ></image>
  163 + </view>
  164 + </picker>
  165 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  166 + <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  167 + <view class="p14" style="width: 30px;">
  168 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  169 + <image src="../../static/detail-tabicon.png" ></image>
  170 + </view>
  171 + </picker>
  172 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  173 + <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
  174 + <view class="p14" style="width: 30px;">
  175 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  176 + <image src="../../static/detail-tabicon.png" ></image>
  177 + </view>
  178 + </picker>
  179 + </view>
  180 + </view>
  181 + <view class="confirm">
  182 + <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
  183 + <text>确认以上输入信息来源于我的验光数据!</text>
  184 + </view>
  185 + </view>
  186 + </template>
  187 + <template v-else>
  188 + <view
  189 + v-for="item in pickerInfoList"
  190 + :key="item.key"
  191 + class="bodyBox"
  192 + >
  193 + <template v-if="item.nameC==='验光日期'">
  194 + <text class="names">{{item.nameC}}</text>
  195 + <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
  196 + <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
  197 + <text>{{item.nameArray3[item.nameIndex2]}}日</text>
  198 + </template>
  199 + <template v-else>
  200 + <template v-if="item.nameC==='度数'">
  201 + <text style="display: inline;">*</text>
  202 + </template>
  203 +
  204 + <text class="names">{{item.nameC}}</text>
  205 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  206 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  207 + </template>
  208 + </view>
  209 + </template>
  210 + </view>
  211 + </view>
  212 + </view>
  213 + <view class="choose">
  214 + <view
  215 + class="chooseItem_1_content"
  216 + v-for="(item,index) in attrList"
  217 + :key="index"
  218 + >
  219 + <UniCollapse @change="changeShow(index)">
  220 + <UniCollapseItem
  221 + :open="show[index]"
  222 + :title="item.meta_name"
  223 + showAnimation=false
  224 + >
  225 + <view class="chooseItem_1_content">
  226 + <view class="itemsWrap" v-if="isCart ==3">
  227 + <view
  228 + class="item2"
  229 + v-for="(one,i) in item.attr"
  230 + :key="i"
  231 + :class="{ active2: current[index] === i}"
  232 + @click="cartOnClickItem(index, i,one.aid)"
  233 + >{{one.name}}</view>
  234 + </view>
  235 + <view class="itemsWrap" v-else>
  236 + <view
  237 + class="item2"
  238 + v-for="(one,i) in item.attr"
  239 + :key="i"
  240 + :class="{ active2: current[index] === i }"
  241 + @click="cartOnClickItem(index, i,one.aid)"
  242 + >{{one.name}}</view>
  243 + </view>
  244 + </view>
  245 + </UniCollapseItem>
  246 + </UniCollapse>
  247 + <view
  248 + class="chooseRes"
  249 + v-show="!show[index]"
  250 + >* {{attrList[index].attr[current[index]].name}}</view>
  251 + </view>
  252 + </view>
  253 + <view
  254 + class="button"
  255 + @click.native="addCart"
  256 + v-if="isCart == 1"
  257 + >
  258 + 加入购物车
  259 + </view>
  260 + <view
  261 + class="button"
  262 + @click="toComfirmOrder"
  263 + v-if="isCart == 2"
  264 + >
  265 + 立即结算
  266 + </view>
  267 + <view
  268 + class="button"
  269 + @click="comfirmChoose"
  270 + v-if="isCart == 3"
  271 + >
  272 + 确定
  273 + </view>
  274 + </view>
  275 + </scroll-view>
  276 + </view>
  277 + </view>
  278 +</template>
  279 +<script>
  280 +import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  281 +import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  282 +import store from '@/store'
  283 + export default {
  284 + components: {
  285 + UniCollapse,
  286 + UniCollapseItem,
  287 + },
  288 + props: {
  289 + isShowBottom : Boolean,
  290 + pid: Number,
  291 + sk_id:String,
  292 + propMpId:String,
  293 + goodInfo:Object,
  294 + isCart:Number,
  295 + cart_id:Number,
  296 + index:Number
  297 + },
  298 + data() {
  299 + return {
  300 + loveCurrent:Number,
  301 + count: 1,
  302 + // pid: 0,
  303 + maxCount: 20,
  304 + dataName: '', // 验光数据人员名称
  305 + isDataName: false, // 是否是已存在的人员数据
  306 + dataConfirm: false, // 已确认所输入验光数据
  307 + opIsOpen: true,
  308 + addDisabled: false,
  309 + desDisabled: false,
  310 + current: [],
  311 + show: [true,true],
  312 + checkedData: {},
  313 + // 度数相关数据
  314 + pickerInfoList: [
  315 + { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
  316 + { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
  317 + { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
  318 + { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
  319 + ],
  320 + confirm: false, // 用户是否确认
  321 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  322 + name: '',
  323 + oldname: '', // 用于判读用户是否改变名字
  324 + pickerInfoChioce: {
  325 + leftSph: '',
  326 + rightSph: '',
  327 + leftCyl: '',
  328 + rightCyl: '',
  329 + leftAxi: '',
  330 + rightAxi: '',
  331 + time: {
  332 + year: 0,
  333 + month: 0,
  334 + day: 0,
  335 + },
  336 + },
  337 + pd: '', // 瞳距
  338 + oldpd: '', // 用于判断用户是否改变瞳距
  339 + kinds: 1, // kinds=1，提交为新增验光，2为修改
  340 + mp_id: Number,
  341 + skuValueArray:[],
  342 + skId:String
  343 + }
  344 + },
  345 + computed: {
  346 + //进购物车选择的人的index
  347 + p_current(){
  348 + const getLoveItemIndex = (item) => item.mp_id == this.propMpId
  349 + const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex )
  350 + if(this.isCart == 3){
  351 + this.loveCurrent = p_current
  352 + }
  353 + return p_current
  354 + },
  355 + arr_current(){
  356 + if(this.isCart == 3){
  357 + const skId = this.sk_id
  358 + const skuValue = this.skuItem.sku_value
  359 + const skuValueArray = skuValue.split('_')
  360 + this.skuValueArray = skuValueArray
  361 + const attrList = this.$store.state.read.goodInfo.attrList
  362 + for (let i = 0;i<attrList.length;i++) {
  363 + const getArrIndex = (item) => item.aid == skuValueArray[i]
  364 + const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex )
  365 + // console.log('arr_current',arr_current)
  366 + this.current.push(arr_current)
  367 + }
  368 + }else{
  369 + return null
  370 + }
  371 + },
  372 + loveList() {
  373 + return this.$store.state.myLoveList.loveList || []
  374 + },
  375 + attrList() {
  376 + // console.log('attrList',this.$store.state.read.goodInfo.attrList)
  377 + let attrList = this.$store.state.read.goodInfo.attrList
  378 + if(attrList !== undefined){
  379 + return attrList
  380 + }else{
  381 + return []
  382 + }
  383 + },
  384 + skuList() {
  385 + // console.log('skuList',this.$store.state.read.goodInfo.skuList)
  386 + return this.$store.state.read.goodInfo.skuList
  387 + },
  388 + skuItem(){
  389 + // if(this.isCart == 3){
  390 + const skuList = this.$store.state.read.goodInfo.skuList
  391 + const skuItem = skuList.filter(item => item.sk_id === this.skId)[0]
  392 + return skuItem
  393 + // }else{
  394 + // const skuList = this.$store.state.read.goodInfo.skuList
  395 + // const skuItem = skuList[0]
  396 + // return skuItem
  397 + // }
  398 + },
  399 + mpList() {
  400 +
  401 + return this.$store.state.myLoveList.loveList
  402 + },
  403 + },
  404 + created() {
  405 + this.skuValueArray = this.skuList[0].sku_value.split("_")
  406 + // console.log(this.sk_id)
  407 + this.mp_id = this.propMpId
  408 + const pid = this.pid
  409 + if(this.isCart!==3){
  410 + this.skId = this.skuList[0].sk_id
  411 + const current = []
  412 + const show = []
  413 + for (let index = 0; index < this.attrList.length; index++) {
  414 + current.push(0)
  415 + show.push(true)
  416 + }
  417 + this.current = current
  418 + this.show = show
  419 + }else{
  420 + this.skId = this.sk_id
  421 + }
  422 +
  423 + //获取关心的人列表
  424 + store.dispatch('myLoveList/getLoveList', {
  425 + uid: this.$store.state.user.userInfo.uid,
  426 + });
  427 +
  428 +
  429 + // 初始化SPL、CYL、AXI的值
  430 + for (let j = 0; j < 3; j++) {
  431 + for (let i = -12; i < 6; i++) {
  432 + this.pickerInfoList[j].nameArray1.push(i)
  433 + this.pickerInfoList[j].nameArray1.push(i + 0.5)
  434 + this.pickerInfoList[j].nameArray2.push(i)
  435 + this.pickerInfoList[j].nameArray2.push(i + 0.5)
  436 + if (i >= -6) {
  437 + this.pickerInfoList[j].nameArray1.push(i + 0.25)
  438 + this.pickerInfoList[j].nameArray1.push(i + 0.75)
  439 + this.pickerInfoList[j].nameArray2.push(i + 0.25)
  440 + this.pickerInfoList[j].nameArray2.push(i + 0.75)
  441 + }
  442 + if (i === 5) {
  443 + this.pickerInfoList[j].nameArray1.push(i + 1)
  444 + this.pickerInfoList[j].nameArray2.push(i + 1)
  445 + }
  446 + }
  447 + }
  448 + // 初始化日期值
  449 + for (let i = 1; i < 32; i++) {
  450 + this.pickerInfoList[3].nameArray3.push(i)
  451 + }
  452 + // 初始化年份前后五年
  453 + const myDate = new Date()
  454 + const nowYear = myDate.getFullYear()
  455 + for (let i = 0; i < 5; i++) {
  456 + this.pickerInfoList[3].nameArray1.push(nowYear - i)
  457 + }
  458 + },
  459 + name : "bottomSheet",
  460 + methods: {
  461 + //参数点击事件==》改变对应图片
  462 + cartOnClickItem(index, i,aid) {
  463 + //根据aid拼接skuValue
  464 + this.skuValueArray[index] = aid
  465 + const sku_value = this.skuValueArray.join('_')
  466 + //根据sku_value获取对应的sk_id
  467 + const itemSk_id = this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id
  468 + //修改sk_id
  469 + this.skId = itemSk_id
  470 + if (this.current[index] !== i) {
  471 + this.current[index] = i
  472 + }
  473 + this.$forceUpdate()
  474 + },
  475 + comfirmChoose(){
  476 + const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price
  477 + this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车
  478 + this.$emit("closeBottom")
  479 + },
  480 + addCart(){
  481 + const that = this
  482 + const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
  483 + const checkedSKU = []
  484 + let j;
  485 + for (let i = 0;i<that.current.length;i++) {
  486 + checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
  487 + // console.log('i', i, j, i !== this.current.length - 1)
  488 + if (i !== this.current.length - 1) {
  489 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  490 + j = this.current[i] * this.attrList[1].attr.length
  491 + } else {
  492 + j += this.current[i]
  493 + }
  494 + }
  495 + let sk_id = this.skuList[j].sk_id
  496 + console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
  497 + this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id)//添加购物车
  498 + this.$emit("closeBottom")//关闭弹窗
  499 + },
  500 + onClickLoveItem(index,name){
  501 + const loveList = this.loveList
  502 + for (let index = 0; index < loveList.length; index++) {
  503 + if (name === loveList[index].name && name!==this.name) {
  504 + this.isDataName = true
  505 + this.kinds = 2
  506 + this.name = loveList[index].name
  507 + this.pd = loveList[index].pd
  508 + this.mp_id = loveList[index].mp_id
  509 + this.oldname = loveList[index].name
  510 + this.oldpd = loveList[index].pd
  511 + this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
  512 + this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
  513 + this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
  514 + this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
  515 + this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
  516 + this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
  517 + this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
  518 + if (loveList[index].in_time.toString().slice(5, 6) === 0) {
  519 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
  520 + } else {
  521 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
  522 + }
  523 + if (loveList[index].in_time.toString().slice(8, 9) === 0) {
  524 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
  525 + } else {
  526 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
  527 + }
  528 + }
  529 + }
  530 + this.name = name;
  531 + this.loveCurrent = index;
  532 + },
  533 + closeSheet(){
  534 + this.$emit('closeBottom');
  535 + },
  536 + stopEvent(){ //@click.stop防止事件冒泡
  537 +
  538 + },
  539 + moveHandle(){ //不让页面滚动
  540 +
  541 + },
  542 + // picker相关功能
  543 + handleInput(e) {
  544 + this.name = e.target.value
  545 + this.isDataName = false
  546 + const mpList = this.mpList
  547 + // console.log('mpList===>', mpList)
  548 + for (let index = 0; index < mpList.length; index++) {
  549 + if (e.detail.value === mpList[index].name) {
  550 + this.isDataName = true
  551 + uni.showModal({
  552 + title: '提示',
  553 + content: `是否填充已有的"${e.detail.value}"的数据`,
  554 + success: (res) => {
  555 + if (res.confirm) {
  556 + this.kinds = 2
  557 + // console.log('args===>', index)
  558 + // const mpList=Object.assign({},this.$store.state.mympList.mpList)
  559 + this.name = mpList[index].name
  560 + this.pd = mpList[index].pd
  561 + this.mp_id = mpList[index].mp_id
  562 + this.oldname = mpList[index].name
  563 + this.oldpd = mpList[index].pd
  564 + // 将kinds =2时的值传到该页面
  565 + this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
  566 + this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
  567 + this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
  568 + this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
  569 + this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
  570 + this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
  571 + this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
  572 + if (mpList[index].in_time.toString().slice(5, 6) === 0) {
  573 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
  574 + } else {
  575 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
  576 + }
  577 + if (mpList[index].in_time.toString().slice(8, 9) === 0) {
  578 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
  579 + } else {
  580 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
  581 + }
  582 + // this.checkedData = mpList[index]
  583 + // console.log('checkedData', this.checkedData)
  584 + } else if (res.cancel) {
  585 + this.kinds = 2
  586 + }
  587 + },
  588 + })
  589 + }
  590 + }
  591 + },
  592 + handleInputPd(e) {
  593 + // 只能输入正浮点数或正数
  594 + if (/^\d+(\.\d+)?$/.test(e.target.value)) {
  595 + this.pd = e.target.value
  596 + } else {
  597 + uni.showToast({
  598 + title: '请输入有效数据;示例:89',
  599 + icon: 'none',
  600 + duration: 2000,
  601 + })
  602 + this.pd = ''
  603 + }
  604 + },
  605 + changeConfirm() {
  606 + this.confirm = !this.confirm
  607 + },
  608 + bindPickerChange01: function(e) {
  609 + this.pickerInfoList[0].nameIndex1 = e.target.value
  610 + this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
  611 + },
  612 + bindPickerChange02: function(e) {
  613 + this.pickerInfoList[0].nameIndex2 = e.target.value
  614 + this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
  615 + },
  616 +
  617 + bindPickerChange11: function(e) {
  618 + this.pickerInfoList[1].nameIndex1 = e.target.value
  619 + this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
  620 + },
  621 + bindPickerChange12: function(e) {
  622 + this.pickerInfoList[1].nameIndex2 = e.target.value
  623 + this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
  624 + },
  625 +
  626 + bindPickerChange21: function(e) {
  627 + this.pickerInfoList[2].nameIndex1 = e.target.value
  628 + this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
  629 + },
  630 + bindPickerChange22: function(e) {
  631 + this.pickerInfoList[2].nameIndex2 = e.target.value
  632 + this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
  633 + },
  634 +
  635 + bindPickerChange41: function(e) {
  636 + this.pickerInfoList[3].nameIndex1 = e.target.value
  637 + this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
  638 + },
  639 + bindPickerChange42: function(e) {
  640 + this.pickerInfoList[3].nameIndex2 = e.target.value
  641 + this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
  642 + },
  643 + bindPickerChange43: function(e) {
  644 + this.pickerInfoList[3].nameIndex3 = e.target.value
  645 + this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
  646 + },
  647 + changeShow(num) {
  648 + this.show[num] = !this.show[num]
  649 + this.$forceUpdate()
  650 + },
  651 + counter(isadd) {
  652 + if (isadd) {
  653 + this.count >= this.maxCount ? this.addDisabled = true : this.count++
  654 + } else {
  655 + this.count <= 1 ? this.desDisabled = true : this.count--
  656 + }
  657 + },
  658 + toComfirmOrder() {
  659 + // 先处理验光部分的逻辑，如果ok在跳转
  660 + let flag = 0
  661 + if (this.name === '') {
  662 + uni.showToast({
  663 + title: '请输入验光单取名',
  664 + icon: 'none',
  665 + duration: 2000,
  666 + })
  667 + } else {
  668 + if (this.pd === '') {
  669 + uni.showToast({
  670 + title: '请输入瞳距',
  671 + icon: 'none',
  672 + duration: 2000,
  673 + })
  674 + } else {
  675 + if (this.kinds === 1) {
  676 + // 添加用户验光单
  677 + console.log('kinds====>', this.pickerInfoChioce.leftSph)
  678 + console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
  679 + console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
  680 + if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
  681 + this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
  682 + this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
  683 + ) {
  684 + uni.showToast({
  685 + title: '请输入您的验光数据',
  686 + icon: 'none',
  687 + duration: 2000,
  688 + })
  689 + } else {
  690 + if (this.confirm) {
  691 + store.dispatch('myLoveList/addMylove', {
  692 + uid: this.$store.state.user.userInfo.uid,
  693 + openid: this.$store.state.user.userInfo.openid,
  694 + // mp_name: this.$store.state.user.userInfo.mp_name,
  695 + leftSph: this.pickerInfoChioce.leftSph,
  696 + rightSph: this.pickerInfoChioce.rightSph,
  697 + leftCyl: this.pickerInfoChioce.leftCyl,
  698 + rightCyl: this.pickerInfoChioce.rightCyl,
  699 + leftAxi: this.pickerInfoChioce.leftAxi,
  700 + rightAxi: this.pickerInfoChioce.rightAxi,
  701 + pd: this.pd, // 瞳距
  702 + mp_name: this.name,
  703 + // time: this.pickerInfoChioce.time,
  704 + // img_url2: "http://localhost:8087/images/shop_1/1/",
  705 + }).then(({ mp_id: mpId }) => {
  706 + this.mp_id = mpId
  707 + })
  708 + flag = 1
  709 + } else {
  710 + uni.showToast({
  711 + title: '请确认您的验光数据',
  712 + icon: 'none',
  713 + duration: 3000,
  714 + })
  715 + }
  716 + }
  717 + }
  718 + if (this.kinds === 2) {
  719 + if (this.confirm) {
  720 + const leftList = ['leftSph', 'leftCyl', 'leftAxi']
  721 + const rightList = ['rightSph', 'rightCyl', 'rightAxi']
  722 + // let flag=0;
  723 + if (this.name !== this.oldname) {
  724 + store.dispatch('myLoveList/updateMylove', {
  725 + uid: this.$store.state.user.userInfo.uid,
  726 + openid: this.$store.state.user.userInfo.openid,
  727 + mp_id: this.mp_id,
  728 + keyname: 'name',
  729 + keyvalue: this.name,
  730 + })
  731 + flag = 1
  732 + }
  733 + if (this.pd !== this.oldpd) {
  734 + store.dispatch('myLoveList/updateMylove', {
  735 + uid: this.$store.state.user.userInfo.uid,
  736 + openid: this.$store.state.user.userInfo.openid,
  737 + mp_id: this.mp_id,
  738 + keyname: 'pd',
  739 + keyvalue: this.pd,
  740 + })
  741 + flag = 1
  742 + }
  743 + // 先验证是否输入有无空
  744 + let q = true
  745 + for (let k = 0; k < 3; k++) {
  746 + q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
  747 + this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
  748 + }
  749 + if (q) {
  750 + for (let j = 0; j < 3; j++) {
  751 + if (this.pickerInfoList[j].nameIndex1 !== 0) {
  752 + store.dispatch('myLoveList/updateMylove', {
  753 + uid: this.$store.state.user.userInfo.uid,
  754 + openid: this.$store.state.user.userInfo.openid,
  755 + mp_id: this.mp_id,
  756 + keyname: leftList[j],
  757 + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
  758 + })
  759 + }
  760 + if (this.pickerInfoList[j].nameIndex2 !== 0) {
  761 + store.dispatch('myLoveList/updateMylove', {
  762 + uid: this.$store.state.user.userInfo.uid,
  763 + openid: this.$store.state.user.userInfo.openid,
  764 + mp_id: this.mp_id,
  765 + keyname: rightList[j],
  766 + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
  767 + })
  768 + }
  769 + flag = 1
  770 + }
  771 + } else {
  772 + flag = 0
  773 + uni.showToast({
  774 + title: '请输入您的验光数据',
  775 + icon: 'none',
  776 + duration: 2000,
  777 + })
  778 + }
  779 + if (flag !== 0) {
  780 + store.dispatch('myLoveList/getLoveList', {
  781 + uid: this.$store.state.user.userInfo.uid,
  782 + })
  783 + }
  784 + } else {
  785 + uni.showToast({
  786 + title: '请确认您的验光数据',
  787 + icon: 'none',
  788 + duration: 3000,
  789 + })
  790 + }
  791 + }
  792 + }
  793 + }
  794 + if (flag !== 0) {
  795 + // 如果数据验证无误，那么更新验光单的数据
  796 + store.dispatch('myLoveList/getLoveList', {
  797 + uid: this.$store.state.user.userInfo.uid,
  798 + })
  799 + let i = 0
  800 + // 判断出是哪一个sku被选中
  801 + for (let index = 0; index < this.current.length; index++) {
  802 + // console.log('index', index, i, index !== this.current.length - 1)
  803 + if (index !== this.current.length - 1) {
  804 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  805 + i = this.current[index] * this.attrList[1].attr.length
  806 + } else {
  807 + i += this.current[index]
  808 + }
  809 + }
  810 + // 判断是否其输入的人员数据是否已存在
  811 + store.dispatch('order/saveParams', {
  812 + sk_id_arr: this.skuList[i],
  813 + current: this.current,
  814 + mp_id: this.mp_id,
  815 + attrList: this.attrList,
  816 + })
  817 + // 跳转到确认订单页面
  818 + uni.navigateTo({
  819 + url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
  820 + })
  821 + }
  822 + },
  823 + }
  824 + }
  825 +</script>
  826 +
  827 +<style lang="scss">
  828 + .BottomSheetContent {
  829 + min-height: 100vh;
  830 + background-color: #f2f2f2;
  831 + // padding-top: 20rpx;
  832 + .goodInfo {
  833 + width: 100%;
  834 + height: 272rpx;
  835 + border-radius: 16rpx;
  836 + background-color: #ffffff;
  837 + box-sizing: border-box;
  838 + padding: 36rpx;
  839 + display: flex;
  840 + flex-direction: row;
  841 + justify-content: flex-start;
  842 + position: sticky;
  843 + top: 0rpx;
  844 + left: 0rpx;
  845 + z-index: 99999;
  846 + .imageWrap {
  847 + height: 188rpx;
  848 + width: 188rpx;
  849 + margin-right: 28rpx;
  850 + image {
  851 + height: 188rpx;
  852 + width: 188rpx;
  853 + }
  854 + }
  855 + .infoRight {
  856 + display: flex;
  857 + flex-direction: column;
  858 + align-items: flex-start;
  859 + justify-content: space-between;
  860 + width: 100%;
  861 + .goodName {
  862 + font-size: 28rpx;
  863 + color: #333333;
  864 + }
  865 + .remarks {
  866 + font-size: 20rpx;
  867 + color: #999999;
  868 + }
  869 + .priceBox {
  870 + display: flex;
  871 + justify-content: space-between;
  872 + align-items: center;
  873 + width: 100%;
  874 + font-size: 14px;
  875 + color: #999999;
  876 + .price {
  877 + color: #ff6b4a;
  878 + font-size: 28rpx;
  879 + }
  880 + .counter {
  881 + display: flex;
  882 + flex-direction: row;
  883 + justify-content: space-between;
  884 + align-items: center;
  885 + font-size: 28rpx;
  886 + color: #333333;
  887 + width: 122rpx;
  888 + .btn {
  889 + display: flex;
  890 + justify-content: center;
  891 + line-height: 32rpx;
  892 + height: 32rpx;
  893 + width: 32rpx;
  894 + background-color: #f2f2f2;
  895 + color: #cfcfcf;
  896 + }
  897 + }
  898 + }
  899 + }
  900 + }
  901 + .peopleChoose{
  902 + width: 100%;
  903 + min-height: 200rpx;
  904 + border-radius: 16rpx;
  905 + background-color: #ffffff;
  906 + box-sizing: border-box;
  907 + padding: 36rpx;
  908 + margin: 10px 0;
  909 + display: flex;
  910 + flex-direction: column;
  911 + justify-content: flex-start;
  912 + align-items: center;
  913 + .title{
  914 + font-size: 16px;
  915 + color: #333333;
  916 + letter-spacing: -0.3px;
  917 + text-align: justify;
  918 + line-height: 24px;
  919 + margin: 4px 0;
  920 + }
  921 + .loveList{
  922 + display: flex;
  923 + flex-direction: row;
  924 + flex-wrap: wrap;
  925 + justify-content: flex-start;
  926 + align-items: center;
  927 + padding-top: 24rpx;
  928 + width: 100%;
  929 + .peopleName {
  930 + padding: 0 30rpx;
  931 + height: 60rpx;
  932 + margin: 0 20rpx 20rpx 0;
  933 + transition: all 0.3s;
  934 + background: #f2f2f2;
  935 + border-radius: 2px;
  936 + border-radius: 2px;
  937 + line-height: 60rpx;
  938 + text-align: center;
  939 + color: #666666;
  940 + font-size: 12px;
  941 + }
  942 + .active2 {
  943 + background: rgba(255, 107, 74, 0.15);
  944 + color: #ff6b4a;
  945 + }
  946 + }
  947 + }
  948 + .goods-data {
  949 + width: 100%;
  950 + box-sizing: border-box;
  951 + padding: 37rpx 40rpx 0 40rpx;
  952 + background: #ffffff;
  953 + border-radius: 12rpx;
  954 + .opCollapse {
  955 + width: 100%;
  956 + padding-bottom: 28rpx;
  957 + margin-top: 7px;
  958 + border-bottom: 1px solid #e9e9e9;
  959 + .head {
  960 + display: flex;
  961 + justify-content: space-between;
  962 + height: 24px;
  963 + // font-family: PingFangSC-Medium;
  964 + font-size: 16px;
  965 + color: #333333;
  966 + letter-spacing: -0.3px;
  967 + text-align: justify;
  968 + line-height: 24px;
  969 + margin-bottom: 18rpx;
  970 + .headRighted {
  971 + width: 0;
  972 + height: 0;
  973 + border-left: 4px solid transparent;
  974 + border-right: 4px solid transparent;
  975 + border-bottom: 4px solid #cfcfcf;
  976 + transform: scaleY(-1);
  977 + margin-top: 10px;
  978 + }
  979 + .headMid {
  980 + font-size: 10px;
  981 + color: #999999;
  982 + letter-spacing: -0.19px;
  983 + margin-left: -120rpx;
  984 + }
  985 + .headRight {
  986 + width: 0;
  987 + height: 0;
  988 + border-left: 4px solid transparent;
  989 + border-right: 4px solid transparent;
  990 + border-bottom: 4px solid #cfcfcf;
  991 + margin-top: 10px;
  992 + }
  993 + }
  994 + .body {
  995 + font-size: 12px;
  996 + color: #666666;
  997 + letter-spacing: 0;
  998 + .bodyBox {
  999 + margin-top: 15px;
  1000 + .names {
  1001 + font-size: 12px;
  1002 + color: #151515;
  1003 + letter-spacing: 0;
  1004 + text-align: justify;
  1005 + line-height: 17px;
  1006 + margin-left: 5px;
  1007 + margin-right: 10px;
  1008 + }
  1009 + text {
  1010 + font-size: 12px;
  1011 + color: #666666;
  1012 + letter-spacing: 0;
  1013 + text-align: justify;
  1014 + }
  1015 + }
  1016 + }
  1017 + .goods-form {
  1018 + display: flex;
  1019 + flex-direction: column;
  1020 + align-items: center;
  1021 + justify-content: center;
  1022 + background-color: #fff;
  1023 + width: 100%;
  1024 + padding: 40rpx 0;
  1025 + .p1 {
  1026 + font-size: 16px;
  1027 + color: #333333;
  1028 + letter-spacing: -0.3px;
  1029 + text-align: justify;
  1030 + line-height: 24px;
  1031 + margin: 4px 0;
  1032 +
  1033 + }
  1034 + .p2 {
  1035 + font-size: 12px;
  1036 + color: #999999;
  1037 + letter-spacing: -0.23px;
  1038 + margin-bottom: 32rpx;
  1039 + }
  1040 + .image2{
  1041 + width: 42rpx;
  1042 + height: 34rpx;
  1043 + margin-right: 12rpx;
  1044 + }
  1045 + .confirm {
  1046 + display: flex;
  1047 + align-items: center;
  1048 + font-size: 12px;
  1049 + color: #666666;
  1050 + letter-spacing: -0.23px;
  1051 + width: 684rpx;
  1052 + .image1{
  1053 + margin-right:25rpx;
  1054 + width: 42rpx;
  1055 + height: 38rpx;
  1056 + }
  1057 + }
  1058 + .picker{
  1059 + display: flex;
  1060 + flex-direction: column;
  1061 + justify-content: center;
  1062 + align-items: center;
  1063 + width: 100%;
  1064 +
  1065 + .picker-choice{
  1066 + display: flex;
  1067 + width: 684rpx;
  1068 + align-items: center;
  1069 + margin-bottom: 40rpx;
  1070 + .input{
  1071 + border-bottom: 1px solid #CFCFCF;
  1072 + height: 40rpx;
  1073 + }
  1074 + .choice-left{
  1075 + width: 210rpx;
  1076 + .pd{
  1077 + font-size: 14px;
  1078 + color: #333333;
  1079 + letter-spacing: -0.26px;
  1080 + text-align: justify;
  1081 + line-height: 24px;
  1082 + margin-right: 44rpx;
  1083 + }
  1084 + .p11 {
  1085 + font-size: 14px;
  1086 + color: #333333;
  1087 + letter-spacing: -0.26px;
  1088 + text-align: justify;
  1089 + line-height: 24px;
  1090 + // margin-right: 10px;
  1091 + }
  1092 + .p12 {
  1093 + font-size: 10px;
  1094 + color: #3F3F3F;
  1095 + letter-spacing: -0.19px;
  1096 + text-align: justify;
  1097 + line-height: 24px;
  1098 + }
  1099 +
  1100 + }
  1101 + .p13 {
  1102 + font-size: 10px;
  1103 + color: #999999;
  1104 + letter-spacing: -0.19px;
  1105 + margin-right: 10px;
  1106 + }
  1107 + .p13-date {
  1108 + font-size: 10px;
  1109 + color: #999999;
  1110 + letter-spacing: -0.19px;
  1111 + margin-right: 5px;
  1112 + }
  1113 + picker{
  1114 + width: 144rpx;
  1115 + height: 40rpx;
  1116 + display: flex;
  1117 + position: relative;
  1118 + .p14 {
  1119 + font-size: 14px;
  1120 + color: #666666;
  1121 + letter-spacing: -0.26px;
  1122 + text-align: center;
  1123 + width: 124rpx;
  1124 + border-bottom: 1px solid #CFCFCF;
  1125 + height: 38rpx;
  1126 + }
  1127 + image{
  1128 + width: 20rpx;
  1129 + height: 20rpx;
  1130 + position: absolute;
  1131 + right: 20rpx;
  1132 + top: 8rpx;
  1133 + }
  1134 + }
  1135 +
  1136 + }
  1137 + }
  1138 + }
  1139 + }
  1140 + }
  1141 + .choose {
  1142 + width: 100%;
  1143 + background: #ffffff;
  1144 + border-radius: 12rpx;
  1145 + margin-top: 20rpx;
  1146 + padding: 40rpx 40rpx 112rpx 40rpx;
  1147 + box-sizing: border-box;
  1148 + .chooseItem {
  1149 + width: 100%;
  1150 + padding-bottom: 32rpx;
  1151 + border-bottom: 1px solid #e9e9e9;
  1152 + margin-bottom: 28rpx;
  1153 + }
  1154 + .chooseRes {
  1155 + font-size: 12px;
  1156 + color: #666666;
  1157 + }
  1158 + .itemsWrap {
  1159 + display: flex;
  1160 + flex-direction: row;
  1161 + flex-wrap: wrap;
  1162 + justify-content: flex-start;
  1163 + align-items: center;
  1164 + padding-top: 24rpx;
  1165 + .item1 {
  1166 + width: 64rpx;
  1167 + height: 64rpx;
  1168 + border-radius: 32rpx;
  1169 + margin: 0 36rpx 24rpx 0;
  1170 + transition: all 0.3s;
  1171 + border: 1px solid #ffffff;
  1172 + }
  1173 + .item2 {
  1174 + // width: 100rpx;
  1175 + padding: 0 30rpx;
  1176 + height: 60rpx;
  1177 + margin: 0 20rpx 20rpx 0;
  1178 + transition: all 0.3s;
  1179 + background: #f2f2f2;
  1180 + border-radius: 2px;
  1181 + border-radius: 2px;
  1182 + line-height: 60rpx;
  1183 + text-align: center;
  1184 + color: #666666;
  1185 + font-size: 12px;
  1186 + }
  1187 + .active1 {
  1188 + opacity: 0.7;
  1189 + border: 1px solid #ff6b4a;
  1190 + }
  1191 + .active2 {
  1192 + background: rgba(255, 107, 74, 0.15);
  1193 + color: #ff6b4a;
  1194 + }
  1195 + }
  1196 + }
  1197 + .button {
  1198 + width: 100%;
  1199 + height: 112rpx;
  1200 + background-color: #ff6b4a;
  1201 + font-size: 16px;
  1202 + color: #ffffff;
  1203 + line-height: 112rpx;
  1204 + text-align: center;
  1205 + position: sticky;
  1206 + bottom: 0rpx;
  1207 + left: 0rpx;
  1208 + }
  1209 + }
  1210 + /* sheet弹窗 */
  1211 + .sheet{
  1212 + width: 100%;
  1213 + height: 100%;
  1214 + position: fixed;
  1215 + top: 150%;
  1216 + left: 0upx;
  1217 + bottom: 0upx;
  1218 + right: 0upx;
  1219 + background:rgba(0,0,0,0.3);
  1220 + z-index: 10000;
  1221 + }
  1222 +
  1223 + /* 显示时候的动画默认0.5s */
  1224 + .sheetView{
  1225 + width: 100%;
  1226 + height: 0upx;
  1227 + position: absolute;
  1228 + bottom: 0upx;
  1229 + background: white;
  1230 + z-index: 10001;
  1231 + transition: all 0.5s;
  1232 + }
  1233 + .sheetShow{
  1234 + top:0upx !important;
  1235 + }
  1236 + /* 关闭时的动画，时间自己可以设置0.5s*/
  1237 + .sheeHide{
  1238 + top:120% !important;
  1239 + transition: all 0.5s;
  1240 + }
  1241 +
  1242 + /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
  1243 + .sheetView_active{
  1244 + height: 1042upx;
  1245 + }
  1246 +
  1247 +</style>
... ...
src/pages/cart/cart.vue
Diff comments   View file @22e1420
... ... @@ -8,7 +8,6 @@
8 8 <view class="cardHeader">
9 9 <view
10 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11   - @touchstart="pChange(pIsoPen)"
12 11 >
13 12 <span class="correct"></span>
14 13 </view>
... ... @@ -26,7 +25,6 @@
26 25 >
27 26 <view
28 27 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29   - @touchstart="Change(childIsOpen[index],index)"
30 28 >
31 29 <span class="correct"></span>
32 30 </view>
... ... @@ -46,13 +44,18 @@
46 44 class="goodName"
47 45 @tap="toGoods(item.pid,item.sk_id)"
48 46 >{{item.p_name}}</view>
49   - <view class="describ">
50   - <view class="people">
51   - 使用人:{{item.peopleName}}
52   - </view>
53   - <view class="skuInfo">
54   - {{item.sku_name}}
55   - </view>
  47 + <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
  48 + <view class="desL">
  49 + <view class="people">
  50 + 使用人：{{item.peopleName}}
  51 + </view>
  52 + <view class="skuInfo">
  53 + {{item.sku_name}}
  54 + </view>
  55 + </view>
  56 + <view class="desR">
  57 + <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
  58 + </view>
56 59 </view>
57 60 <view class="priceBox">
58 61 <view class="price">￥{{item.nowPrice*item.num}}</view>
... ... @@ -84,27 +87,43 @@
84 87 <view class="paybtn" @click="toComfirmOrder">立即结算</view>
85 88 </view>
86 89 </view>
87   -
  90 + <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
  91 + :index="cartIndex"
  92 + :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
88 93 </view>
89 94 </template>
90 95  
91 96 <script>
92 97  
93 98 import store from '@/store'
94   -
95   -export default {
  99 +import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
  100 +export default {
  101 + components:{
  102 + BottomSheet,
  103 + },
96 104 data() {
97 105 return {
98   - totalPrice: 0,
99   - pIsoPen: false,
100   - // childIsOpen:[],
101   - maxCount: 20,
  106 + pid:Number,
  107 + isCart:Number,
  108 + sk_id:String,
  109 + mp_id:String,
  110 + isShowBottom : false, //底部弹窗开关
  111 + totalPrice: 0,
  112 + pIsoPen: false,
  113 + // childIsOpen:[],
  114 + cart_id:Number,
  115 + maxCount: 20,
  116 + cartIndex:Number
102 117 }
103 118 },
104 119 computed: {
105 120 // skInfo(){
106 121 // return filters()
107 122 // }
  123 + goodInfo () {
  124 + // console.log(this.$store.state.read.goodInfo)
  125 + return this.$store.state.read.goodInfo
  126 + },
108 127 cartList() {
109 128 // console.log('cart-list', this.$store.state.cart.cartList);
110 129 // this.totalPrice=0
... ... @@ -116,26 +135,60 @@ export default {
116 135 for (let i = 0; i < temp.length; i++) {
117 136 temp[i] = false
118 137 }
119   - console.log('this.childisOPne===>', temp)
  138 + // console.log('this.childisOPne===>', temp)
120 139 return temp
121 140 },
122 141 },
  142 + onShow() {
  143 + this.pIsoPen = false
  144 + },
123 145 onLoad: function() {
124   - // store.dispatch('cart/addCart', {
125   - // uid: this.$store.state.user.userInfo.uid,
126   - // openid: this.$store.state.user.userInfo.openid,
127   - // mp_id: 7,
128   - // sk_id: 7,
129   - // num: 1,
130   - // pid: 8,
131   - // price: 128,
132   - // checkedSKU:{},
133   - // })
134 146 store.dispatch('cart/getCartList', {
135 147 uid: this.$store.state.user.userInfo.uid, // 用户id
136 148 })
137 149 },
138 150 methods: {
  151 + //修改购物车
  152 + chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
  153 + // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
  154 + store.dispatch('cart/modiCart', {
  155 + uid: this.$store.state.user.userInfo.uid,
  156 + openid: this.$store.state.user.userInfo.openid,
  157 + mp_id: mp_id,
  158 + sk_id: sk_id,
  159 + price: price,
  160 + pid: pid,
  161 + num: num,
  162 + cart_id: cart_id,
  163 + args: {
  164 + index: index,
  165 + },
  166 + })
  167 + store.dispatch('cart/getCartList', {
  168 + uid: this.$store.state.user.userInfo.uid, // 用户id
  169 + })
  170 +
  171 + this.$forceUpdate()
  172 + console.log('21212121212',this.cartList)
  173 + },
  174 + //底部弹窗开关
  175 + showBottom(isCart,pid,skId,mp_id,cart_id,index){
  176 + store.dispatch('read/fetch', {
  177 + pid,
  178 + sk_id: skId,
  179 + }).then(()=>{
  180 + this.cartIndex = index
  181 + this.sk_id = skId;
  182 + this.pid = pid;
  183 + this.mp_id = mp_id;
  184 + this.isCart = isCart;
  185 + this.cart_id = cart_id;
  186 + this.isShowBottom = true;
  187 + })
  188 + },
  189 + closeBottom(){
  190 + this.isShowBottom = false;
  191 + },
139 192 toGoods(id, sk_id) {
140 193 console.log('cart-list', this.$store.state.cart.cartList)
141 194 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
... ... @@ -149,9 +202,6 @@ export default {
149 202 toComfirmOrder(){
150 203 uni.navigateTo({
151 204 url:`../confirmOrder/confirmOrder`,
152   - fail(res) {
153   - console.log(res)
154   - }
155 205 })
156 206 },
157 207 counter(index, isadd, item) {
... ... @@ -166,9 +216,9 @@ export default {
166 216 } else {
167 217 this.addDisabled = true
168 218 // 修改num
169   - if (this.childIsOpen[index]) {
170   - this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
171   - }
  219 + // if (this.childIsOpen[index]) {
  220 + // this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
  221 + // }
172 222 store.dispatch('cart/modiCart', {
173 223 uid: this.$store.state.user.userInfo.uid,
174 224 openid: this.$store.state.user.userInfo.openid,
... ... @@ -191,9 +241,9 @@ export default {
191 241 } else {
192 242 this.desDisabled = false
193 243 // post 请求修改相关参数
194   - if (this.childIsOpen[index]) {
195   - this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
196   - }
  244 + // if (this.childIsOpen[index]) {
  245 + // this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
  246 + // }
197 247 store.dispatch('cart/modiCart', {
198 248 uid: this.$store.state.user.userInfo.uid,
199 249 openid: this.$store.state.user.userInfo.openid,
... ... @@ -211,46 +261,44 @@ export default {
211 261 this.desDisabled = true
212 262 }
213 263 }
214   - // store.dispatch('cart/getCartList', {
215   - // uid: this.$store.state.user.userInfo.uid // 用户id
216   - // })
217   - },
218   - Change(isopen, indexC) {
219   - // console.log('lalla===>',isopen)
220   - this.childIsOpen[indexC] = !isopen
221   - if (!isopen) {
222   - this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
223   - } else {
224   - this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
225   - }
226   - let m = true
227   - for (let i = 0; i < this.childIsOpen.length; i++) {
228   - m = m & this.childIsOpen[i]
229   - }
230   - if (m === 1) {
231   - this.pIsoPen = true
232   - } else {
233   - this.pIsoPen = false
234   - }
235   - },
236   - pChange(isopen) {
237   - this.pIsoPen = !isopen
238   - for (let i = 0; i < this.childIsOpen.length; i++) {
239   - this.childIsOpen[i] = !isopen
240   - }
241   - if (this.pIsoPen) {
242   - // 计算总价逻辑
243   - if (this.childIsOpen.length !== 0) {
244   - for (let i = 0; i < this.childIsOpen.length; i++) {
245   - if (this.childIsOpen[i]) {
246   - this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
247   - }
248   - }
249   - }
250   - } else {
251   - this.totalPrice = 0
252   - }
  264 +
253 265 },
  266 + // Change(isopen, indexC) {
  267 + // // console.log('lalla===>',isopen)
  268 + // this.childIsOpen[indexC] = !isopen
  269 + // if (!isopen) {
  270 + // this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
  271 + // } else {
  272 + // this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
  273 + // }
  274 + // let m = true
  275 + // for (let i = 0; i < this.childIsOpen.length; i++) {
  276 + // m = m & this.childIsOpen[i]
  277 + // }
  278 + // if (m === 1) {
  279 + // this.pIsoPen = true
  280 + // } else {
  281 + // this.pIsoPen = false
  282 + // }
  283 + // },
  284 + // pChange(isopen) {
  285 + // this.pIsoPen = !isopen
  286 + // for (let i = 0; i < this.childIsOpen.length; i++) {
  287 + // this.childIsOpen[i] = !isopen
  288 + // }
  289 + // if (this.pIsoPen) {
  290 + // // 计算总价逻辑
  291 + // if (this.childIsOpen.length !== 0) {
  292 + // for (let i = 0; i < this.childIsOpen.length; i++) {
  293 + // if (this.childIsOpen[i]) {
  294 + // this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
  295 + // }
  296 + // }
  297 + // }
  298 + // } else {
  299 + // this.totalPrice = 0
  300 + // }
  301 + // },
254 302 delCart(cart_id, index) {
255 303 // console.log('userInfo',this.$store.state.user.userInfo)
256 304 cart_id = parseInt(cart_id)
... ... @@ -262,9 +310,9 @@ export default {
262 310 // content: '是否删除该商品',
263 311 success: function (res) {
264 312 if (res.confirm) {
265   - if (this.childIsOpen[index]) {
266   - this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
267   - }
  313 + // if (this.childIsOpen[index]) {
  314 + // this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
  315 + // }
268 316 console.log('index===>',index)
269 317 store.dispatch('cart/delCart', {
270 318 uid: this.$store.state.user.userInfo.uid,
... ... @@ -388,6 +436,7 @@ export default {
388 436 align-items: flex-start;
389 437 justify-content: space-between;
390 438 min-height: 240rpx;
  439 + width: 100%;
391 440 .goodName {
392 441 display: -webkit-box;
393 442 -webkit-box-orient: vertical;
... ... @@ -400,15 +449,23 @@ export default {
400 449 .describ {
401 450 width: 100%;
402 451 min-height: 80rpx;
403   - // box-sizing: border-box;
404   - // padding: 10rpx;
  452 + background: #F9F9F9;
  453 + border-radius: 2px;
  454 + box-sizing: border-box;
  455 + padding: 10rpx;
405 456 font-size: 20rpx;
406 457 letter-spacing: -0.23px;
407   - text-align: justify;
408 458 color: #999999;
409   - view{
410   - margin: 10rpx 0 10rpx 0 ;
  459 + display: flex;
  460 + justify-content: space-between;
  461 + align-items: center;
  462 + .desL{
  463 +
  464 + view{
  465 + margin: 10rpx 0 10rpx 0 ;
  466 + }
411 467 }
  468 +
412 469 }
413 470 .priceBox {
414 471 display: flex;
... ... @@ -420,7 +477,7 @@ export default {
420 477 color: #999999;
421 478 .maxCount {
422 479 color: #999999;
423   - font-size: 24rpx;
  480 + font-size: 20rpx;
424 481 }
425 482 .price {
426 483 color: #ff6b4a;
... ... @@ -490,4 +547,10 @@ export default {
490 547 }
491 548 }
492 549 }
  550 +/* 隐藏滚动条 */
  551 + ::-webkit-scrollbar {
  552 + width: 0;
  553 + height: 0;
  554 + color: transparent;
  555 + }
493 556 </style>
... ...
src/pages/frameDetail/components/BottomSheet.vue
View file @0bda9ef
... ... @@ -1,1161 +0,0 @@
1   -<template>
2   - <view class="content">
3   - <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
4   - <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
5   - <view class="content">
6   - <view class="goodInfo">
7   - <view class="imageWrap">
8   - <image
9   - :src="goodInfo.img_index_url"
10   - mode="aspectFill"
11   - style="width: 188rpx;height: 168rpx;"
12   - ></image>
13   - </view>
14   - <view class="infoRight">
15   - <text class="goodName">{{goodInfo.p_name}}</text>
16   - <text class="remarks">支持7天无理由退货 顺丰发货</text>
17   - <view class="priceBox">
18   - <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
19   - <text>(限购{{maxCount}}副)</text>
20   - <view class="counter">
21   - <view
22   - class="btn"
23   - disabled="this.addDisabled"
24   - type="default"
25   - @click="counter(false)"
26   - >-</view>
27   - <text>{{count}}</text>
28   - <view
29   - class="btn"
30   - disabled="this.desDisabled"
31   - type="default"
32   - @click="counter(true)"
33   - >+</view>
34   - </view>
35   - </view>
36   - </view>
37   - </view>
38   - <view class="peopleChoose">
39   - <view class="title">选择使用人</view>
40   - <view class="loveList">
41   - <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
42   - @click="onClickLoveItem(index,item.name)">
43   - {{item.name}}
44   - </view>
45   - </view>
46   - </view>
47   - <view class="goods-data">
48   - <view class="opCollapse">
49   - <view class="body">
50   - <template v-if="opIsOpen">
51   - <view class="goods-form">
52   - <view class="p1">
53   - <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
54   - 填写验光数据
55   - </view>
56   - <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
57   - <view class="picker">
58   - <view class="picker-choice">
59   - <view class="choice-left">
60   - <text class="pd">验光单取名:</text>
61   - </view>
62   - <input type="text" @blur="handleInput" class="input"
63   - placeholder="请输入名称" maxlength="20" :value="name" />
64   - </view>
65   - </view>
66   - <view class="picker" >
67   - <view class="picker-choice">
68   - <view class="choice-left">
69   - <text class="p11">{{pickerInfoList[0].nameC}}</text>
70   - <text class="p12">{{pickerInfoList[0].nameE}}</text>
71   - </view>
72   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
73   - <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
74   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
75   - <view class="p14">
76   - {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
77   - <image src="../../../static/detail-tabicon.png" ></image>
78   - </view>
79   - <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
80   - </picker>
81   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
82   - <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
83   - <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
84   - <view class="p14">
85   - {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
86   - <image src="../../../static/detail-tabicon.png" ></image>
87   - </view>
88   - <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
89   - </picker>
90   - </view>
91   - </view>
92   - <view class="picker" >
93   - <view class="picker-choice">
94   - <view class="choice-left">
95   - <text class="p11">{{pickerInfoList[1].nameC}}</text>
96   - <text class="p12">{{pickerInfoList[1].nameE}}</text>
97   - </view>
98   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99   - <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
100   - <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
101   - <view class="p14">
102   - {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
103   - <image src="../../../static/detail-tabicon.png" ></image>
104   - </view>
105   - <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
106   - </picker>
107   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
108   - <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
109   - <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
110   - <view class="p14">
111   - {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
112   - <image src="../../../static/detail-tabicon.png" ></image>
113   - </view>
114   - <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
115   - </picker>
116   - </view>
117   - </view>
118   - <view class="picker" >
119   - <view class="picker-choice">
120   - <view class="choice-left">
121   - <text class="p11">{{pickerInfoList[2].nameC}}</text>
122   - <text class="p12">{{pickerInfoList[2].nameE}}</text>
123   - </view>
124   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
125   - <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
126   - <view class="p14">
127   - {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
128   - <image src="../../../static/detail-tabicon.png" ></image>
129   - </view>
130   - </picker>
131   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
132   - <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
133   - <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
134   - <view class="p14">
135   - {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
136   - <image src="../../../static/detail-tabicon.png" ></image>
137   - </view>
138   - <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
139   - </picker>
140   - </view>
141   - </view>
142   - <view class="picker">
143   - <view class="picker-choice">
144   - <view class="choice-left">
145   - <text class="pd">瞳距:</text>
146   - </view>
147   - <input type="digit" @change="handleInputPd" class="input"
148   - placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
149   - </view>
150   - </view>
151   - <view class="picker" >
152   - <view class="picker-choice">
153   - <view class="choice-left">
154   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
155   - </view>
156   - <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
157   - <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
158   - <view class="p14" style="width: 30px;">
159   - {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
160   - <image src="../../../static/detail-tabicon.png" ></image>
161   - </view>
162   - </picker>
163   - <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
164   - <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
165   - <view class="p14" style="width: 30px;">
166   - {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
167   - <image src="../../../static/detail-tabicon.png" ></image>
168   - </view>
169   - </picker>
170   - <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
171   - <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
172   - <view class="p14" style="width: 30px;">
173   - {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
174   - <image src="../../../static/detail-tabicon.png" ></image>
175   - </view>
176   - </picker>
177   - </view>
178   - </view>
179   - <view class="confirm">
180   - <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
181   - <text>确认以上输入信息来源于我的验光数据!</text>
182   - </view>
183   - </view>
184   - </template>
185   - <template v-else>
186   - <view
187   - v-for="item in pickerInfoList"
188   - :key="item.key"
189   - class="bodyBox"
190   - >
191   - <template v-if="item.nameC==='验光日期'">
192   - <text class="names">{{item.nameC}}</text>
193   - <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
194   - <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
195   - <text>{{item.nameArray3[item.nameIndex2]}}日</text>
196   - </template>
197   - <template v-else>
198   - <template v-if="item.nameC==='度数'">
199   - <text style="display: inline;">*</text>
200   - </template>
201   -
202   - <text class="names">{{item.nameC}}</text>
203   - <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
204   - <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
205   - </template>
206   - </view>
207   - </template>
208   - </view>
209   - </view>
210   - </view>
211   - <view class="choose">
212   - <view
213   - class="chooseItem_1_content"
214   - v-for="(item,index) in attrList"
215   - :key="index"
216   - >
217   - <UniCollapse @change="changeShow(index)">
218   - <UniCollapseItem
219   - :open="show[index]"
220   - :title="item.meta_name"
221   - showAnimation=false
222   - >
223   - <view class="chooseItem_1_content">
224   - <view class="itemsWrap">
225   - <view
226   - class="item2"
227   - v-for="(one,i) in item.attr"
228   - :key="i"
229   - :class="{ active2: current[index] === i }"
230   - @click="onClickItem(index, i)"
231   - >{{one.name}}</view>
232   - </view>
233   - </view>
234   - </UniCollapseItem>
235   - </UniCollapse>
236   - <view
237   - class="chooseRes"
238   - v-show="!show[index]"
239   - >* {{attrList[index].attr[current[index]].name}}</view>
240   - </view>
241   - </view>
242   - <view
243   - class="button"
244   - @click.native="addCart"
245   - v-if="isCart"
246   - >
247   - 加入购物车
248   - </view>
249   - <view
250   - class="button"
251   - @click="toComfirmOrder"
252   - v-else
253   - >
254   - 立即结算
255   - </view>
256   - </view>
257   - </scroll-view>
258   - </view>
259   - </view>
260   -</template>
261   -<script>
262   -import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
263   -import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
264   -import store from '@/store'
265   - export default {
266   - components: {
267   - UniCollapse,
268   - UniCollapseItem,
269   - },
270   - props: {
271   - isShowBottom : Boolean,
272   - pid: Number,
273   - goodInfo:Object,
274   - isCart:Boolean
275   - },
276   - data() {
277   - return {
278   - loveCurrent:Number,
279   - count: 1,
280   - // pid: 0,
281   - maxCount: 20,
282   - dataName: '', // 验光数据人员名称
283   - isDataName: false, // 是否是已存在的人员数据
284   - dataConfirm: false, // 已确认所输入验光数据
285   - opIsOpen: true,
286   - addDisabled: false,
287   - desDisabled: false,
288   - current: [],
289   - show: [],
290   - checkedData: {},
291   - // 度数相关数据
292   - pickerInfoList: [
293   - { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
294   - { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
295   - { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
296   - { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
297   - ],
298   - confirm: false, // 用户是否确认
299   - tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
300   - name: '',
301   - oldname: '', // 用于判读用户是否改变名字
302   - pickerInfoChioce: {
303   - leftSph: '',
304   - rightSph: '',
305   - leftCyl: '',
306   - rightCyl: '',
307   - leftAxi: '',
308   - rightAxi: '',
309   - time: {
310   - year: 0,
311   - month: 0,
312   - day: 0,
313   - },
314   - },
315   - pd: '', // 瞳距
316   - oldpd: '', // 用于判断用户是否改变瞳距
317   - kinds: 1, // kinds=1，提交为新增验光，2为修改
318   - mp_id: Number,
319   - }
320   - },
321   - computed: {
322   - loveList() {
323   - // console.log('**********loveList',this.$store.state.myLoveList.loveList)
324   - return this.$store.state.myLoveList.loveList || []
325   - },
326   - attrList() {
327   - let attrList = this.$store.state.read.goodInfo.attrList
328   - if(attrList !== undefined){
329   - return attrList
330   - }else{
331   - return []
332   - }
333   - },
334   - skuList() {
335   - return this.$store.state.read.goodInfo.skuList
336   - },
337   - mpList() {
338   - return this.$store.state.myLoveList.loveList
339   - },
340   - },
341   - created() {
342   - const pid = this.pid
343   - console.log('this.goodInfo',this.goodInfo)
344   - const current = []
345   - const show = []
346   - for (let index = 0; index < this.attrList.length; index++) {
347   - current.push(0)
348   - show.push(true)
349   - }
350   - this.current = current
351   - this.show = show
352   -
353   - //获取关心的人列表
354   - store.dispatch('myLoveList/getLoveList', {
355   - uid: this.$store.state.user.userInfo.uid,
356   - });
357   -
358   -
359   - // 初始化SPL、CYL、AXI的值
360   - for (let j = 0; j < 3; j++) {
361   - for (let i = -12; i < 6; i++) {
362   - this.pickerInfoList[j].nameArray1.push(i)
363   - this.pickerInfoList[j].nameArray1.push(i + 0.5)
364   - this.pickerInfoList[j].nameArray2.push(i)
365   - this.pickerInfoList[j].nameArray2.push(i + 0.5)
366   - if (i >= -6) {
367   - this.pickerInfoList[j].nameArray1.push(i + 0.25)
368   - this.pickerInfoList[j].nameArray1.push(i + 0.75)
369   - this.pickerInfoList[j].nameArray2.push(i + 0.25)
370   - this.pickerInfoList[j].nameArray2.push(i + 0.75)
371   - }
372   - if (i === 5) {
373   - this.pickerInfoList[j].nameArray1.push(i + 1)
374   - this.pickerInfoList[j].nameArray2.push(i + 1)
375   - }
376   - }
377   - }
378   - // 初始化日期值
379   - for (let i = 1; i < 32; i++) {
380   - this.pickerInfoList[3].nameArray3.push(i)
381   - }
382   - // 初始化年份前后五年
383   - const myDate = new Date()
384   - const nowYear = myDate.getFullYear()
385   - for (let i = 0; i < 5; i++) {
386   - this.pickerInfoList[3].nameArray1.push(nowYear - i)
387   - }
388   - },
389   - name : "bottomSheet",
390   - methods: {
391   - addCart(){
392   - const that = this
393   - const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
394   - const checkedSKU = []
395   - let j;
396   - for (let i = 0;i<that.current.length;i++) {
397   - checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
398   - // console.log('i', i, j, i !== this.current.length - 1)
399   - if (i !== this.current.length - 1) {
400   - // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
401   - j = this.current[i] * this.attrList[1].attr.length
402   - } else {
403   - j += this.current[i]
404   - }
405   - }
406   - let sk_id = this.skuList[j].sk_id
407   - console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
408   - this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id)//添加购物车
409   - this.$emit("closeBottom")//关闭弹窗
410   - },
411   - onClickLoveItem(index,name){
412   - const loveList = this.loveList
413   - for (let index = 0; index < loveList.length; index++) {
414   - if (name === loveList[index].name && name!==this.name) {
415   - this.isDataName = true
416   - this.kinds = 2
417   - this.name = loveList[index].name
418   - this.pd = loveList[index].pd
419   - this.mp_id = loveList[index].mp_id
420   - this.oldname = loveList[index].name
421   - this.oldpd = loveList[index].pd
422   - this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
423   - this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
424   - this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
425   - this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
426   - this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
427   - this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
428   - this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
429   - if (loveList[index].in_time.toString().slice(5, 6) === 0) {
430   - this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
431   - } else {
432   - this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
433   - }
434   - if (loveList[index].in_time.toString().slice(8, 9) === 0) {
435   - this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
436   - } else {
437   - this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
438   - }
439   - }
440   - }
441   - this.name = name;
442   - this.loveCurrent = index;
443   - },
444   - closeSheet(){
445   - this.$emit('closeBottom');
446   - },
447   - stopEvent(){ //@click.stop防止事件冒泡
448   -
449   - },
450   - moveHandle(){ //不让页面滚动
451   -
452   - },
453   - // picker相关功能
454   - handleInput(e) {
455   - this.name = e.target.value
456   - this.isDataName = false
457   - console.log('e---->', e)
458   - const mpList = this.mpList
459   - // console.log('mpList===>', mpList)
460   - for (let index = 0; index < mpList.length; index++) {
461   - if (e.detail.value === mpList[index].name) {
462   - this.isDataName = true
463   - uni.showModal({
464   - title: '提示',
465   - content: `是否填充已有的"${e.detail.value}"的数据`,
466   - success: (res) => {
467   - if (res.confirm) {
468   - this.kinds = 2
469   - console.log('args===>', index)
470   - // const mpList=Object.assign({},this.$store.state.mympList.mpList)
471   - console.log('mpList===>', mpList)
472   - this.name = mpList[index].name
473   - this.pd = mpList[index].pd
474   - this.mp_id = mpList[index].mp_id
475   - this.oldname = mpList[index].name
476   - this.oldpd = mpList[index].pd
477   - // 将kinds =2时的值传到该页面
478   - this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
479   - this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
480   - this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
481   - this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
482   - this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
483   - this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
484   - this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
485   - if (mpList[index].in_time.toString().slice(5, 6) === 0) {
486   - this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
487   - } else {
488   - this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
489   - }
490   - if (mpList[index].in_time.toString().slice(8, 9) === 0) {
491   - this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
492   - } else {
493   - this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
494   - }
495   - // this.checkedData = mpList[index]
496   - // console.log('checkedData', this.checkedData)
497   - } else if (res.cancel) {
498   - this.kinds = 2
499   - }
500   - },
501   - })
502   - }
503   - }
504   - },
505   - handleInputPd(e) {
506   - // 只能输入正浮点数或正数
507   - if (/^\d+(\.\d+)?$/.test(e.target.value)) {
508   - this.pd = e.target.value
509   - } else {
510   - uni.showToast({
511   - title: '请输入有效数据;示例:89',
512   - icon: 'none',
513   - duration: 2000,
514   - })
515   - this.pd = ''
516   - }
517   - },
518   - changeConfirm() {
519   - this.confirm = !this.confirm
520   - },
521   - bindPickerChange01: function(e) {
522   - this.pickerInfoList[0].nameIndex1 = e.target.value
523   - this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
524   - },
525   - bindPickerChange02: function(e) {
526   - this.pickerInfoList[0].nameIndex2 = e.target.value
527   - this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
528   - },
529   -
530   - bindPickerChange11: function(e) {
531   - this.pickerInfoList[1].nameIndex1 = e.target.value
532   - this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
533   - },
534   - bindPickerChange12: function(e) {
535   - this.pickerInfoList[1].nameIndex2 = e.target.value
536   - this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
537   - },
538   -
539   - bindPickerChange21: function(e) {
540   - this.pickerInfoList[2].nameIndex1 = e.target.value
541   - this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
542   - },
543   - bindPickerChange22: function(e) {
544   - this.pickerInfoList[2].nameIndex2 = e.target.value
545   - this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
546   - },
547   -
548   - bindPickerChange41: function(e) {
549   - this.pickerInfoList[3].nameIndex1 = e.target.value
550   - this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
551   - },
552   - bindPickerChange42: function(e) {
553   - this.pickerInfoList[3].nameIndex2 = e.target.value
554   - this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
555   - },
556   - bindPickerChange43: function(e) {
557   - this.pickerInfoList[3].nameIndex3 = e.target.value
558   - this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
559   - },
560   - changeShow(num) {
561   - this.show[num] = !this.show[num]
562   - this.$forceUpdate()
563   - },
564   - onClickItem(index, i) {
565   - if (this.current[index] !== i) {
566   - this.current[index] = i
567   - }
568   - this.$forceUpdate()
569   - },
570   - counter(isadd) {
571   - if (isadd) {
572   - this.count >= this.maxCount ? this.addDisabled = true : this.count++
573   - } else {
574   - this.count <= 1 ? this.desDisabled = true : this.count--
575   - }
576   - },
577   - toComfirmOrder() {
578   - // 先处理验光部分的逻辑，如果ok在跳转
579   - let flag = 0
580   - if (this.name === '') {
581   - uni.showToast({
582   - title: '请输入验光单取名',
583   - icon: 'none',
584   - duration: 2000,
585   - })
586   - } else {
587   - if (this.pd === '') {
588   - uni.showToast({
589   - title: '请输入瞳距',
590   - icon: 'none',
591   - duration: 2000,
592   - })
593   - } else {
594   - if (this.kinds === 1) {
595   - // 添加用户验光单
596   - console.log('kinds====>', this.pickerInfoChioce.leftSph)
597   - console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
598   - console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
599   - if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
600   - this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
601   - this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
602   - ) {
603   - uni.showToast({
604   - title: '请输入您的验光数据',
605   - icon: 'none',
606   - duration: 2000,
607   - })
608   - } else {
609   - if (this.confirm) {
610   - store.dispatch('myLoveList/addMylove', {
611   - uid: this.$store.state.user.userInfo.uid,
612   - openid: this.$store.state.user.userInfo.openid,
613   - // mp_name: this.$store.state.user.userInfo.mp_name,
614   - leftSph: this.pickerInfoChioce.leftSph,
615   - rightSph: this.pickerInfoChioce.rightSph,
616   - leftCyl: this.pickerInfoChioce.leftCyl,
617   - rightCyl: this.pickerInfoChioce.rightCyl,
618   - leftAxi: this.pickerInfoChioce.leftAxi,
619   - rightAxi: this.pickerInfoChioce.rightAxi,
620   - pd: this.pd, // 瞳距
621   - mp_name: this.name,
622   - // time: this.pickerInfoChioce.time,
623   - // img_url2: "http://localhost:8087/images/shop_1/1/",
624   - }).then(({ mp_id: mpId }) => {
625   - this.mp_id = mpId
626   - })
627   - flag = 1
628   - } else {
629   - uni.showToast({
630   - title: '请确认您的验光数据',
631   - icon: 'none',
632   - duration: 3000,
633   - })
634   - }
635   - }
636   - }
637   - if (this.kinds === 2) {
638   - if (this.confirm) {
639   - const leftList = ['leftSph', 'leftCyl', 'leftAxi']
640   - const rightList = ['rightSph', 'rightCyl', 'rightAxi']
641   - // let flag=0;
642   - if (this.name !== this.oldname) {
643   - store.dispatch('myLoveList/updateMylove', {
644   - uid: this.$store.state.user.userInfo.uid,
645   - openid: this.$store.state.user.userInfo.openid,
646   - mp_id: this.mp_id,
647   - keyname: 'name',
648   - keyvalue: this.name,
649   - })
650   - flag = 1
651   - }
652   - if (this.pd !== this.oldpd) {
653   - store.dispatch('myLoveList/updateMylove', {
654   - uid: this.$store.state.user.userInfo.uid,
655   - openid: this.$store.state.user.userInfo.openid,
656   - mp_id: this.mp_id,
657   - keyname: 'pd',
658   - keyvalue: this.pd,
659   - })
660   - flag = 1
661   - }
662   - // 先验证是否输入有无空
663   - let q = true
664   - for (let k = 0; k < 3; k++) {
665   - q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
666   - this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
667   - }
668   - if (q) {
669   - for (let j = 0; j < 3; j++) {
670   - if (this.pickerInfoList[j].nameIndex1 !== 0) {
671   - store.dispatch('myLoveList/updateMylove', {
672   - uid: this.$store.state.user.userInfo.uid,
673   - openid: this.$store.state.user.userInfo.openid,
674   - mp_id: this.mp_id,
675   - keyname: leftList[j],
676   - keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
677   - })
678   - }
679   - if (this.pickerInfoList[j].nameIndex2 !== 0) {
680   - store.dispatch('myLoveList/updateMylove', {
681   - uid: this.$store.state.user.userInfo.uid,
682   - openid: this.$store.state.user.userInfo.openid,
683   - mp_id: this.mp_id,
684   - keyname: rightList[j],
685   - keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
686   - })
687   - }
688   - flag = 1
689   - }
690   - } else {
691   - flag = 0
692   - uni.showToast({
693   - title: '请输入您的验光数据',
694   - icon: 'none',
695   - duration: 2000,
696   - })
697   - }
698   - if (flag !== 0) {
699   - store.dispatch('myLoveList/getLoveList', {
700   - uid: this.$store.state.user.userInfo.uid,
701   - })
702   - }
703   - } else {
704   - uni.showToast({
705   - title: '请确认您的验光数据',
706   - icon: 'none',
707   - duration: 3000,
708   - })
709   - }
710   - }
711   - }
712   - }
713   - if (flag !== 0) {
714   - // 如果数据验证无误，那么更新验光单的数据
715   - store.dispatch('myLoveList/getLoveList', {
716   - uid: this.$store.state.user.userInfo.uid,
717   - })
718   - let i = 0
719   - // 判断出是哪一个sku被选中
720   - for (let index = 0; index < this.current.length; index++) {
721   - console.log('index', index, i, index !== this.current.length - 1)
722   - if (index !== this.current.length - 1) {
723   - // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
724   - i = this.current[index] * this.attrList[1].attr.length
725   - } else {
726   - i += this.current[index]
727   - }
728   - }
729   - // 判断是否其输入的人员数据是否已存在
730   - store.dispatch('order/saveParams', {
731   - sk_id_arr: this.skuList[i],
732   - current: this.current,
733   - mp_id: this.mp_id,
734   - attrList: this.attrList,
735   - })
736   - // 跳转到确认订单页面
737   - uni.navigateTo({
738   - url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
739   - })
740   - }
741   - },
742   - }
743   - }
744   -</script>
745   -
746   -<style lang="scss">
747   - .content {
748   - min-height: 100vh;
749   - background-color: #f2f2f2;
750   - // padding-top: 20rpx;
751   - .goodInfo {
752   - width: 100%;
753   - height: 272rpx;
754   - border-radius: 16rpx;
755   - background-color: #ffffff;
756   - box-sizing: border-box;
757   - padding: 36rpx;
758   - display: flex;
759   - flex-direction: row;
760   - justify-content: flex-start;
761   - .imageWrap {
762   - height: 188rpx;
763   - width: 188rpx;
764   - margin-right: 28rpx;
765   - image {
766   - height: 188rpx;
767   - width: 188rpx;
768   - }
769   - }
770   - .infoRight {
771   - display: flex;
772   - flex-direction: column;
773   - align-items: flex-start;
774   - justify-content: space-between;
775   - .goodName {
776   - font-size: 28rpx;
777   - color: #333333;
778   - }
779   - .remarks {
780   - font-size: 20rpx;
781   - color: #999999;
782   - }
783   - .priceBox {
784   - display: flex;
785   - justify-content: space-between;
786   - align-items: center;
787   - width: 100%;
788   - font-size: 14px;
789   - color: #999999;
790   - .price {
791   - color: #ff6b4a;
792   - font-size: 28rpx;
793   - }
794   - .counter {
795   - display: flex;
796   - flex-direction: row;
797   - justify-content: space-between;
798   - align-items: center;
799   - font-size: 28rpx;
800   - color: #333333;
801   - width: 122rpx;
802   - .btn {
803   - display: flex;
804   - justify-content: center;
805   - line-height: 32rpx;
806   - height: 32rpx;
807   - width: 32rpx;
808   - background-color: #f2f2f2;
809   - color: #cfcfcf;
810   - }
811   - }
812   - }
813   - }
814   - }
815   - .peopleChoose{
816   - width: 100%;
817   - min-height: 200rpx;
818   - border-radius: 16rpx;
819   - background-color: #ffffff;
820   - box-sizing: border-box;
821   - padding: 36rpx;
822   - margin: 10px 0;
823   - display: flex;
824   - flex-direction: column;
825   - justify-content: flex-start;
826   - align-items: center;
827   - .title{
828   - font-size: 16px;
829   - color: #333333;
830   - letter-spacing: -0.3px;
831   - text-align: justify;
832   - line-height: 24px;
833   - margin: 4px 0;
834   - }
835   - .loveList{
836   - display: flex;
837   - flex-direction: row;
838   - flex-wrap: wrap;
839   - justify-content: flex-start;
840   - align-items: center;
841   - padding-top: 24rpx;
842   - width: 100%;
843   - .peopleName {
844   - padding: 0 30rpx;
845   - height: 60rpx;
846   - margin: 0 20rpx 20rpx 0;
847   - transition: all 0.3s;
848   - background: #f2f2f2;
849   - border-radius: 2px;
850   - border-radius: 2px;
851   - line-height: 60rpx;
852   - text-align: center;
853   - color: #666666;
854   - font-size: 12px;
855   - }
856   - .active2 {
857   - background: rgba(255, 107, 74, 0.15);
858   - color: #ff6b4a;
859   - }
860   - }
861   - }
862   - .goods-data {
863   - width: 100%;
864   - box-sizing: border-box;
865   - padding: 37rpx 40rpx 0 40rpx;
866   - background: #ffffff;
867   - border-radius: 12rpx;
868   - .opCollapse {
869   - width: 100%;
870   - padding-bottom: 28rpx;
871   - margin-top: 7px;
872   - border-bottom: 1px solid #e9e9e9;
873   - .head {
874   - display: flex;
875   - justify-content: space-between;
876   - height: 24px;
877   - // font-family: PingFangSC-Medium;
878   - font-size: 16px;
879   - color: #333333;
880   - letter-spacing: -0.3px;
881   - text-align: justify;
882   - line-height: 24px;
883   - margin-bottom: 18rpx;
884   - .headRighted {
885   - width: 0;
886   - height: 0;
887   - border-left: 4px solid transparent;
888   - border-right: 4px solid transparent;
889   - border-bottom: 4px solid #cfcfcf;
890   - transform: scaleY(-1);
891   - margin-top: 10px;
892   - }
893   - .headMid {
894   - font-size: 10px;
895   - color: #999999;
896   - letter-spacing: -0.19px;
897   - margin-left: -120rpx;
898   - }
899   - .headRight {
900   - width: 0;
901   - height: 0;
902   - border-left: 4px solid transparent;
903   - border-right: 4px solid transparent;
904   - border-bottom: 4px solid #cfcfcf;
905   - margin-top: 10px;
906   - }
907   - }
908   - .body {
909   - font-size: 12px;
910   - color: #666666;
911   - letter-spacing: 0;
912   - .bodyBox {
913   - margin-top: 15px;
914   - .names {
915   - font-size: 12px;
916   - color: #151515;
917   - letter-spacing: 0;
918   - text-align: justify;
919   - line-height: 17px;
920   - margin-left: 5px;
921   - margin-right: 10px;
922   - }
923   - text {
924   - font-size: 12px;
925   - color: #666666;
926   - letter-spacing: 0;
927   - text-align: justify;
928   - }
929   - }
930   - }
931   - .goods-form {
932   - display: flex;
933   - flex-direction: column;
934   - align-items: center;
935   - justify-content: center;
936   - background-color: #fff;
937   - width: 100%;
938   - padding: 40rpx 0;
939   - .p1 {
940   - font-size: 16px;
941   - color: #333333;
942   - letter-spacing: -0.3px;
943   - text-align: justify;
944   - line-height: 24px;
945   - margin: 4px 0;
946   -
947   - }
948   - .p2 {
949   - font-size: 12px;
950   - color: #999999;
951   - letter-spacing: -0.23px;
952   - margin-bottom: 32rpx;
953   - }
954   - .image2{
955   - width: 42rpx;
956   - height: 34rpx;
957   - margin-right: 12rpx;
958   - }
959   - .confirm {
960   - display: flex;
961   - align-items: center;
962   - font-size: 12px;
963   - color: #666666;
964   - letter-spacing: -0.23px;
965   - width: 684rpx;
966   - .image1{
967   - margin-right:25rpx;
968   - width: 42rpx;
969   - height: 38rpx;
970   - }
971   - }
972   - .picker{
973   - display: flex;
974   - flex-direction: column;
975   - justify-content: center;
976   - align-items: center;
977   - width: 100%;
978   -
979   - .picker-choice{
980   - display: flex;
981   - width: 684rpx;
982   - align-items: center;
983   - margin-bottom: 40rpx;
984   - .input{
985   - border-bottom: 1px solid #CFCFCF;
986   - height: 40rpx;
987   - }
988   - .choice-left{
989   - width: 210rpx;
990   - .pd{
991   - font-size: 14px;
992   - color: #333333;
993   - letter-spacing: -0.26px;
994   - text-align: justify;
995   - line-height: 24px;
996   - margin-right: 44rpx;
997   - }
998   - .p11 {
999   - font-size: 14px;
1000   - color: #333333;
1001   - letter-spacing: -0.26px;
1002   - text-align: justify;
1003   - line-height: 24px;
1004   - // margin-right: 10px;
1005   - }
1006   - .p12 {
1007   - font-size: 10px;
1008   - color: #3F3F3F;
1009   - letter-spacing: -0.19px;
1010   - text-align: justify;
1011   - line-height: 24px;
1012   - }
1013   -
1014   - }
1015   - .p13 {
1016   - font-size: 10px;
1017   - color: #999999;
1018   - letter-spacing: -0.19px;
1019   - margin-right: 10px;
1020   - }
1021   - .p13-date {
1022   - font-size: 10px;
1023   - color: #999999;
1024   - letter-spacing: -0.19px;
1025   - margin-right: 5px;
1026   - }
1027   - picker{
1028   - width: 144rpx;
1029   - height: 40rpx;
1030   - display: flex;
1031   - position: relative;
1032   - .p14 {
1033   - font-size: 14px;
1034   - color: #666666;
1035   - letter-spacing: -0.26px;
1036   - text-align: center;
1037   - width: 124rpx;
1038   - border-bottom: 1px solid #CFCFCF;
1039   - height: 38rpx;
1040   - }
1041   - image{
1042   - width: 20rpx;
1043   - height: 20rpx;
1044   - position: absolute;
1045   - right: 20rpx;
1046   - top: 8rpx;
1047   - }
1048   - }
1049   -
1050   - }
1051   - }
1052   - }
1053   - }
1054   - }
1055   - .choose {
1056   - width: 100%;
1057   - background: #ffffff;
1058   - border-radius: 12rpx;
1059   - margin-top: 20rpx;
1060   - padding: 40rpx 40rpx 112rpx 40rpx;
1061   - box-sizing: border-box;
1062   - .chooseItem {
1063   - width: 100%;
1064   - padding-bottom: 32rpx;
1065   - border-bottom: 1px solid #e9e9e9;
1066   - margin-bottom: 28rpx;
1067   - }
1068   - .chooseRes {
1069   - font-size: 12px;
1070   - color: #666666;
1071   - }
1072   - .itemsWrap {
1073   - display: flex;
1074   - flex-direction: row;
1075   - flex-wrap: wrap;
1076   - justify-content: flex-start;
1077   - align-items: center;
1078   - padding-top: 24rpx;
1079   - .item1 {
1080   - width: 64rpx;
1081   - height: 64rpx;
1082   - border-radius: 32rpx;
1083   - margin: 0 36rpx 24rpx 0;
1084   - transition: all 0.3s;
1085   - border: 1px solid #ffffff;
1086   - }
1087   - .item2 {
1088   - // width: 100rpx;
1089   - padding: 0 30rpx;
1090   - height: 60rpx;
1091   - margin: 0 20rpx 20rpx 0;
1092   - transition: all 0.3s;
1093   - background: #f2f2f2;
1094   - border-radius: 2px;
1095   - border-radius: 2px;
1096   - line-height: 60rpx;
1097   - text-align: center;
1098   - color: #666666;
1099   - font-size: 12px;
1100   - }
1101   - .active1 {
1102   - opacity: 0.7;
1103   - border: 1px solid #ff6b4a;
1104   - }
1105   - .active2 {
1106   - background: rgba(255, 107, 74, 0.15);
1107   - color: #ff6b4a;
1108   - }
1109   - }
1110   - }
1111   - .button {
1112   - width: 100%;
1113   - height: 112rpx;
1114   - background-color: #ff6b4a;
1115   - font-size: 16px;
1116   - color: #ffffff;
1117   - line-height: 112rpx;
1118   - text-align: center;
1119   - // position: absolute;
1120   - bottom: 0;
1121   - left: 0;
1122   - }
1123   - }
1124   - /* sheet弹窗 */
1125   - .sheet{
1126   - width: 100%;
1127   - height: 100%;
1128   - position: fixed;
1129   - top: 150%;
1130   - left: 0upx;
1131   - bottom: 0upx;
1132   - right: 0upx;
1133   - background:rgba(0,0,0,0.3);
1134   - z-index: 10000;
1135   - }
1136   -
1137   - /* 显示时候的动画默认0.5s */
1138   - .sheetView{
1139   - width: 100%;
1140   - height: 0upx;
1141   - position: absolute;
1142   - bottom: 0upx;
1143   - background: white;
1144   - z-index: 10001;
1145   - transition: all 0.5s;
1146   - }
1147   - .sheetShow{
1148   - top:0upx !important;
1149   - }
1150   - /* 关闭时的动画，时间自己可以设置0.5s*/
1151   - .sheeHide{
1152   - top:120% !important;
1153   - transition: all 0.5s;
1154   - }
1155   -
1156   - /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
1157   - .sheetView_active{
1158   - height: 942upx;
1159   - }
1160   -
1161   -</style>
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @22e1420
... ... @@ -317,12 +317,12 @@
317 317 <view class="botton_2">
318 318 <view
319 319 class="botton_input"
320   - @tap="showBottom(true)"
  320 + @tap="showBottom(1)"
321 321 >加入购物车</view>
322 322 <view
323 323 class="botton_now"
324 324  
325   - @click="showBottom(false)"
  325 + @click="showBottom(2)"
326 326 >立即购买</view>
327 327 </view>
328 328 </view>
... ... @@ -333,14 +333,14 @@
333 333  
334 334 <script>
335 335 import store from '@/store'
336   -import BottomSheet from './components/BottomSheet.vue';
  336 +import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
337 337 export default {
338 338 components:{
339 339 BottomSheet,
340 340 },
341 341 data () {
342 342 return {
343   - isCart:Boolean,
  343 + isCart:Number,
344 344 isShowBottom : false, //底部弹窗开关
345 345 test: '',
346 346 goodType: 2,
... ... @@ -384,7 +384,7 @@ export default {
384 384 }],
385 385 },
386 386  
387   - pid: 0,
  387 + pid: Number,
388 388 // 购物车数据
389 389 addCartList: {
390 390 uid: Number,//用户的唯一识别码
... ... @@ -403,7 +403,7 @@ export default {
403 403 // console.log('sk_id=====>',sk_id)
404 404 store.dispatch('read/fetch', {
405 405 pid,
406   - sk_id: skId,
  406 + // sk_id: skId,
407 407 }).then(() => {
408 408 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
409 409 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
... ... @@ -461,7 +461,12 @@ export default {
461 461 this.addCartList.checkedSKU = checkedSKU
462 462 console.log('添加购物车的参数',this.addCartList)
463 463 store.dispatch('cart/addCart', this.addCartList).then((res)=>{
464   - console.log('*-*-*-*--*-',res)
  464 + if(res.code == 1){
  465 + uni.showToast({
  466 + title:'添加成功~',
  467 + icon:'success'
  468 + })
  469 + }
465 470 // 再次请求购物车接口，实现实时更新
466 471 store.dispatch('cart/getCartList', {
467 472 uid: this.$store.state.user.userInfo.uid,
... ...
src/store/modules/cart.js
Diff comments   View file @22e1420
... ... @@ -18,10 +18,7 @@ const mutations = {
18 18 // state.cartList=delList
19 19 },
20 20 MODI: (state, args) => {
21   - console.log('the num', state.cartList[args.index].num)
22   - console.log('mutations====>isadd', args)
23 21 state.cartList[args.index].num = args.num
24   - console.log('the num', state.cartList[args.index].num)
25 22 },
26 23  
27 24 }
... ... @@ -43,11 +40,10 @@ const actions = {
43 40 modiCart({ commit }, param) {
44 41 const arg = Object.assign({ num: param.num }, param.args)
45 42 delete param.args
46   - request({
  43 + return new Promise((resolve) => request({
47 44 url: cartModi,
48 45 data: param,
49 46 success: (res) => {
50   - console.log('modiCart-res=====>', res.data)
51 47 console.log('modi-parm', param)
52 48 commit('MODI', arg)
53 49 },
... ... @@ -57,7 +53,7 @@ const actions = {
57 53 complete: (res) => {
58 54 console.log('complete status === > ', res)
59 55 },
60   - })
  56 + }))
61 57 },
62 58 // 删除购物车商品
63 59 delCart({ commit }, param) {
... ...