刘文博 / gulu-vue

Download as
Browse Code »

Commit 3cda19af7e48ddfedd80d77f19366752ee01b157

Authored by 范牧
2 parents 25347a0061 e9b87ccef5
Exists in master

详情页-售后保障

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

2.14 KB
src/store/modules/cart.js
Diff comments   View file @3cda19a
... ... @@ -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) {
... ...
src/store/modules/index.js
Diff comments   View file @3cda19a
... ... @@ -7,11 +7,21 @@
7 7 search,
8 8 } = urlAlias;
9 9  
  10 +let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",
  11 + "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",
  12 + "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}
  13 +var initArr = [1,2,3,4,5,6,7,8]
  14 +let list = []
  15 +initArr.forEach(function (value) {
  16 + list.push(initData)
  17 +});
  18 +
  19 +//初始化数据是为了显示默认骨架
10 20 const state = {
11 21 categoryList: [],
12   - list: []
  22 + list: list
13 23 };
14   -
  24 +
15 25 const mutations = {
16 26 LIST: (state, list) => {
17 27 state.list = list;
... ... @@ -25,10 +35,9 @@
25 35 category({
26 36 commit
27 37 }, param) {
28   - request({
  38 + return new Promise((resolve) => request({
29 39 url: category,
30 40 success: (res) => {
31   - console.log('category', res);
32 41 let data = res.data.data;
33 42 for (let i = 0; i <= data.length; i++) {
34 43 if (data[i] && data[i].type !== 'filter') {
... ... @@ -40,35 +49,34 @@
40 49 name: "全部",
41 50 value: "all",
42 51 isNoPull: true,
43   -
44 52 });
45 53 commit('CATEGORY', data);
  54 + resolve(data)
  55 + console.log('3333')
46 56 },
47 57 fail: (res) => {
48 58 console.log("fail status === > ", res);
49   - },
50   - complete: (res) => {
51   - console.log("complete status === > ", res);
52   - },
53   - })
  59 + }
  60 + }))
  61 +
54 62 },
55 63 list({
56 64 commit
57 65 }, param) {
58   -
59   - request({
  66 + return new Promise((resolve) => request({
60 67 url: shopList,
61 68 success: (res) => {
62 69 commit('LIST', res.data.data)
  70 + resolve(res.data)
  71 + console.log('3333')
63 72 },
64 73 fail: (res) => {
65 74 console.log("fail status === > ", res);
66 75 },
67 76 complete: (res) => {
68   - console.log("complete status === > ", res);
69 77 state.isLoading = false;
70 78 },
71   - })
  79 + }))
72 80 },
73 81 search({
74 82 commit
... ... @@ -76,9 +84,8 @@
76 84 params,
77 85 keyword
78 86 }) {
79   - const uid = uni.getStorageSync('uid');
80   - console.log("params", params, keyword);
81   - request({
  87 + const uid = uni.getStorageSync('uid');
  88 + return new Promise((resolve) => request({
82 89 url: search,
83 90 data: {
84 91 params: JSON.stringify(params),
... ... @@ -88,14 +95,13 @@
88 95 },
89 96 success: (res) => {
90 97 commit('LIST', res.data.data);
  98 + resolve(res.data)
91 99 },
92 100 fail: (res) => {
93 101 console.log("fail status === > ", res);
94   - },
95   - complete: (res) => {
96   - console.log("complete status === > ", res);
97   - },
98   - })
  102 + }
  103 + }))
  104 +
99 105 },
100 106 };
101 107  
... ...