吉鹏 / gulu-vue

Download as
Browse Code »

Commit 56ccc089eae462e5dc8158fa2c9ae647dabed611

Authored by BigBoss
1 parent 88c0598d36
Exists in master

修改弹窗

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