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