Adam / gulu-vue

Download as
Browse Code »

Commit 01b15d67e92ba230de65fac039790b37001ea12a

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