Commit d6200736ba2bd28207d7d3a0a87940a1b4fb59bf

Authored by 范牧
1 parent 2cd0b0f44a
Exists in master

登陆问题修复

Showing 1 changed file with 6 additions and 5 deletions   Show diff stats
src/pages/user/user.vue
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <!-- 弹窗 --> 3 <!-- 弹窗 -->
4 <uni-popup 4 <uni-popup
5 ref="popup" 5 ref="popup"
6 type="center" 6 type="center"
7 > 7 >
8 <!-- 给一个左边弹窗的样式 --> 8 <!-- 给一个左边弹窗的样式 -->
9 <!-- 关闭弹窗按钮 --> 9 <!-- 关闭弹窗按钮 -->
10 <view 10 <view
11 class="closeBtn" 11 class="closeBtn"
12 @tap="this.$refs.popup.close()" 12 @tap="this.$refs.popup.close()"
13 >x</view> 13 >x</view>
14 <view 14 <view
15 class="popUpWrap" 15 class="popUpWrap"
16 v-if="whichTap==0" 16 v-if="whichTap==0"
17 > 17 >
18 <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> 18 <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text>
19 19
20 <!-- 左 --> 20 <!-- 左 -->
21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> 21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
22 <!-- 右 --> 22 <!-- 右 -->
23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> 23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
24 </view> 24 </view>
25 <view 25 <view
26 class="popUpWrap" 26 class="popUpWrap"
27 v-if="whichTap==1" 27 v-if="whichTap==1"
28 > 28 >
29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> 29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
30 </view> 30 </view>
31 <view 31 <view
32 class="popUpWrap" 32 class="popUpWrap"
33 v-if="whichTap==2" 33 v-if="whichTap==2"
34 > 34 >
35 <button @tap="chatOur(1)">客服1</button> 35 <button @tap="chatOur(1)">客服1</button>
36 <button @tap="chatOur(2)">客服2</button> 36 <button @tap="chatOur(2)">客服2</button>
37 </view> 37 </view>
38 </uni-popup> 38 </uni-popup>
39 <!-- <scroll-view 39 <!-- <scroll-view
40 enable-flex 40 enable-flex
41 @scrolltolower="handleScrolltolower" 41 @scrolltolower="handleScrolltolower"
42 scroll-y 42 scroll-y
43 style="height: 1000px;" 43 style="height: 1000px;"
44 > --> 44 > -->
45 <view 45 <view
46 v-if="isAuth" 46 v-if="isAuth"
47 class="content" 47 class="content"
48 > 48 >
49 <view class="userInfo"> 49 <view class="userInfo">
50 <view class="info"> 50 <view class="info">
51 <image 51 <image
52 :src="headerphoto" 52 :src="headerphoto"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="infoText"> 55 <view class="infoText">
56 <text class="userName">{{nickName}}</text> 56 <text class="userName">{{nickName}}</text>
57 </view> 57 </view>
58 </view> 58 </view>
59 <!-- <view class="service"> 59 <!-- <view class="service">
60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
61 </view> --> 61 </view> -->
62 </view> 62 </view>
63 <view 63 <view
64 class="myOpticsData" 64 class="myOpticsData"
65 @tap="toOpticsData" 65 @tap="toOpticsData"
66 > 66 >
67 <view class="left"> 67 <view class="left">
68 <image 68 <image
69 src="../../static/img/user/dataWrite.png" 69 src="../../static/img/user/dataWrite.png"
70 mode="aspectFit" 70 mode="aspectFit"
71 ></image> 71 ></image>
72 <text>验光数据</text> 72 <text>验光数据</text>
73 </view> 73 </view>
74 <image 74 <image
75 src="../../static/right.png" 75 src="../../static/right.png"
76 mode="aspectFit" 76 mode="aspectFit"
77 ></image> 77 ></image>
78 </view> 78 </view>
79 <view class="myOrder"> 79 <view class="myOrder">
80 <view class="orderHeader"> 80 <view class="orderHeader">
81 <text>我的订单</text> 81 <text>我的订单</text>
82 <view 82 <view
83 class="btn" 83 class="btn"
84 @click="toMyOrder('10')" 84 @click="toMyOrder('10')"
85 > 85 >
86 全部 86 全部
87 <image 87 <image
88 src="../../static/right.png" 88 src="../../static/right.png"
89 mode="aspectFit" 89 mode="aspectFit"
90 ></image> 90 ></image>
91 </view> 91 </view>
92 </view> 92 </view>
93 <view class="orderBody"> 93 <view class="orderBody">
94 <view 94 <view
95 class="item waitPay" 95 class="item waitPay"
96 @click="toMyOrder('0')" 96 @click="toMyOrder('0')"
97 > 97 >
98 <image 98 <image
99 src="../../static/img/user/waitDeliver.png" 99 src="../../static/img/user/waitDeliver.png"
100 mode="aspectFit" 100 mode="aspectFit"
101 ></image> 101 ></image>
102 <text>待付款</text> 102 <text>待付款</text>
103 </view> 103 </view>
104 <view 104 <view
105 class="item waitDeliver" 105 class="item waitDeliver"
106 @click="toMyOrder('1')" 106 @click="toMyOrder('1')"
107 > 107 >
108 <image 108 <image
109 src="../../static/img/user/waitPay.png" 109 src="../../static/img/user/waitPay.png"
110 mode="aspectFit" 110 mode="aspectFit"
111 ></image> 111 ></image>
112 <text>待收货</text> 112 <text>待收货</text>
113 </view> 113 </view>
114 <view 114 <view
115 class="item waitReceive" 115 class="item waitReceive"
116 @click="toMyOrder('2')" 116 @click="toMyOrder('2')"
117 > 117 >
118 <image 118 <image
119 src="../../static/img/user/waitReceive.png" 119 src="../../static/img/user/waitReceive.png"
120 mode="aspectFit" 120 mode="aspectFit"
121 ></image> 121 ></image>
122 <text>已完成</text> 122 <text>已完成</text>
123 </view> 123 </view>
124 <!-- <view class="item service" @click="toMyOrder('3')"> 124 <!-- <view class="item service" @click="toMyOrder('3')">
125 <image src="../../static/img/user/refound.png" mode="aspectFit"></image> 125 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
126 <text>已评价</text> 126 <text>已评价</text>
127 </view> --> 127 </view> -->
128 </view> 128 </view>
129 </view> 129 </view>
130 <view class="someItem"> 130 <view class="someItem">
131 <!-- <view class="item"> 131 <!-- <view class="item">
132 <view class="left"> 132 <view class="left">
133 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> 133 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
134 <text>推广记录与收益</text> 134 <text>推广记录与收益</text>
135 </view> 135 </view>
136 <image src="../../static/right.png" mode="aspectFit"></image> 136 <image src="../../static/right.png" mode="aspectFit"></image>
137 </view> --> 137 </view> -->
138 <view 138 <view
139 @tap="toAddress" 139 @tap="toAddress"
140 class="item" 140 class="item"
141 > 141 >
142 <image 142 <image
143 src="../../static/address-icon.png" 143 src="../../static/address-icon.png"
144 mode="aspectFit" 144 mode="aspectFit"
145 ></image> 145 ></image>
146 <view class="left"> 146 <view class="left">
147 <text>地址管理</text> 147 <text>地址管理</text>
148 <image 148 <image
149 class="image2" 149 class="image2"
150 src="../../static/right.png" 150 src="../../static/right.png"
151 mode="aspectFit" 151 mode="aspectFit"
152 ></image> 152 ></image>
153 </view> 153 </view>
154 154
155 </view> 155 </view>
156 <view 156 <view
157 @tap="introduce" 157 @tap="introduce"
158 class="item" 158 class="item"
159 > 159 >
160 <image 160 <image
161 src="../../static/img/user/introduce.png" 161 src="../../static/img/user/introduce.png"
162 mode="aspectFit" 162 mode="aspectFit"
163 ></image> 163 ></image>
164 <view class="left"> 164 <view class="left">
165 <text>系统介绍</text> 165 <text>系统介绍</text>
166 <image 166 <image
167 src="../../static/right.png" 167 src="../../static/right.png"
168 mode="aspectFit" 168 mode="aspectFit"
169 ></image> 169 ></image>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view 172 <view
173 @tap="joinUs" 173 @tap="joinUs"
174 class="item" 174 class="item"
175 > 175 >
176 <image 176 <image
177 src="../../static/img/user/joinUs.png" 177 src="../../static/img/user/joinUs.png"
178 mode="aspectFit" 178 mode="aspectFit"
179 ></image> 179 ></image>
180 <view class="left"> 180 <view class="left">
181 <text>加入我们</text> 181 <text>加入我们</text>
182 <image 182 <image
183 src="../../static/right.png" 183 src="../../static/right.png"
184 mode="aspectFit" 184 mode="aspectFit"
185 ></image> 185 ></image>
186 </view> 186 </view>
187 </view> 187 </view>
188 <view class="item"> 188 <view class="item">
189 <image 189 <image
190 src="../../static/img/user/service.png" 190 src="../../static/img/user/service.png"
191 mode="aspectFit" 191 mode="aspectFit"
192 ></image> 192 ></image>
193 <view class="left lastLeft"> 193 <view class="left lastLeft">
194 <text>联系客服</text> 194 <text>联系客服</text>
195 <image 195 <image
196 src="../../static/right.png" 196 src="../../static/right.png"
197 mode="aspectFit" 197 mode="aspectFit"
198 ></image> 198 ></image>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 <view class="recommend"> 202 <view class="recommend">
203 <view class="title"> 203 <view class="title">
204 <view class="line"></view> 204 <view class="line"></view>
205 <view class="text">精选推荐</view> 205 <view class="text">精选推荐</view>
206 <view class="line"></view> 206 <view class="line"></view>
207 </view> 207 </view>
208 <!-- 商品列表 --> 208 <!-- 商品列表 -->
209 <view class="goods-list"> 209 <view class="goods-list">
210 <!-- <scroll-view 210 <!-- <scroll-view
211 enable-flex 211 enable-flex
212 @scrolltolower="handleScrolltolower" 212 @scrolltolower="handleScrolltolower"
213 scroll-y 213 scroll-y
214 class="product-list" 214 class="product-list"
215 > --> 215 > -->
216 <view class="product-list"> 216 <view class="product-list">
217 <view 217 <view
218 class="product" 218 class="product"
219 v-for="(item, index) in userRecommandList" 219 v-for="(item, index) in userRecommandList"
220 :key="index" 220 :key="index"
221 > 221 >
222 <Card 222 <Card
223 :goods="item" 223 :goods="item"
224 :scrollTop="scrollTop" 224 :scrollTop="scrollTop"
225 :viewHeight="viewHeight" 225 :viewHeight="viewHeight"
226 ></Card> 226 ></Card>
227 </view> 227 </view>
228 </view> 228 </view>
229 <!-- </scroll-view> --> 229 <!-- </scroll-view> -->
230 <view class="loading-text">{{loadingText}}</view> 230 <view class="loading-text">{{loadingText}}</view>
231 </view> 231 </view>
232 </view> 232 </view>
233 </view> 233 </view>
234 <view 234 <view
235 v-else 235 v-else
236 class="auth" 236 class="auth"
237 > 237 >
238 <view class="icon"></view> 238 <view class="icon"></view>
239 <view class="divider"></view> 239 <view class="divider"></view>
240 <view class="title">申请获取以下权限</view> 240 <view class="title">申请获取以下权限</view>
241 <view class="text">获得您的公开信息(昵称、头像等)</view> 241 <view class="text">获得您的公开信息(昵称、头像等)</view>
242 <button 242 <button
243 type="primary" 243 type="primary"
244 open-type="getUserInfo" 244 open-type="getUserInfo"
245 @getuserinfo="onGotUserInfo" 245 @getuserinfo="onGotUserInfo"
246 >授权登陆</button> 246 >授权登陆</button>
247 </view> 247 </view>
248 <!-- </scroll-view> --> 248 <!-- </scroll-view> -->
249 </view> 249 </view>
250 </template> 250 </template>
251 251
252 <script> 252 <script>
253 import Card from '@/components/CommodityCard/CommodityCard.vue' 253 import Card from '@/components/CommodityCard/CommodityCard.vue'
254 import store from '@/store' 254 import store from '@/store'
255 import UniPopup from '@/components/UniPopup/uni-popup.vue' 255 import UniPopup from '@/components/UniPopup/uni-popup.vue'
256 256
257 export default { 257 export default {
258 components: { 258 components: {
259 Card, 259 Card,
260 UniPopup, 260 UniPopup,
261 }, 261 },
262 data() { 262 data() {
263 return { 263 return {
264 isAuth: true, // 是否显示授权页面, 264 isAuth: true, // 是否显示授权页面,
265 pagesnum: 1, // 分页请求初始值 265 pagesnum: 1, // 分页请求初始值
266 whichTap: 0, // 弹窗渲染选择条件 266 whichTap: 0, // 弹窗渲染选择条件
267 loadingText: '到底了', 267 loadingText: '到底了',
268 scrollTop: 0, 268 scrollTop: 0,
269 viewHeight: uni.getSystemInfoSync().windowHeight, 269 viewHeight: uni.getSystemInfoSync().windowHeight,
270 } 270 }
271 }, 271 },
272 onPageScroll({ scrollTop }) { 272 onPageScroll({ scrollTop }) {
273 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 273 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
274 this.scrollTop = scrollTop 274 this.scrollTop = scrollTop
275 }, 275 },
276 onLoad() { 276 onLoad() {
277 const that = this
277 // 判断是否授权 278 // 判断是否授权
278 uni.getSetting({ 279 uni.getSetting({
279 success(res) { 280 success(res) {
280 console.log('authSetting', res.authSetting) 281 console.log('authSetting', res.authSetting)
281 if (res.authSetting['scope.userInfo'] === true) { 282 if (res.authSetting['scope.userInfo'] === true) {
282 this.isAuth = true 283 that.isAuth = true
283 } else { 284 } else {
284 this.isAuth = false 285 that.isAuth = false
285 } 286 }
286 }, 287 },
287 }) 288 })
288 store.dispatch('userRecommand/getRecommandList', { 289 store.dispatch('userRecommand/getRecommandList', {
289 uid: this.$store.state.user.userInfo.uid, 290 uid: that.$store.state.user.userInfo.uid,
290 openid: this.$store.state.user.userInfo.openid, 291 openid: that.$store.state.user.userInfo.openid,
291 page: this.pagesnum, 292 page: that.pagesnum,
292 }) 293 })
293 }, 294 },
294 onReachBottom() { 295 onReachBottom() {
295 // console.log('usr-my',this.$store.state.user.userInfo) 296 // console.log('usr-my',this.$store.state.user.userInfo)
296 this.pagesnum++ 297 this.pagesnum++
297 store.dispatch('userRecommand/getRecommandList', { 298 store.dispatch('userRecommand/getRecommandList', {
298 uid: this.$store.state.user.userInfo.uid, 299 uid: this.$store.state.user.userInfo.uid,
299 openid: this.$store.state.user.userInfo.openid, 300 openid: this.$store.state.user.userInfo.openid,
300 page: this.pagesnum, 301 page: this.pagesnum,
301 }) 302 })
302 }, 303 },
303 computed: { 304 computed: {
304 nickName() { 305 nickName() {
305 return this.$store.state.user.userInfo.nickName 306 return this.$store.state.user.userInfo.nickName
306 }, 307 },
307 headerphoto() { 308 headerphoto() {
308 return this.$store.state.user.userInfo.headerphoto 309 return this.$store.state.user.userInfo.headerphoto
309 }, 310 },
310 userRecommandList() { 311 userRecommandList() {
311 console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList) 312 console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
312 return this.$store.state.userRecommand.recommandList 313 return this.$store.state.userRecommand.recommandList
313 }, 314 },
314 }, 315 },
315 methods: { 316 methods: {
316 // 弹窗 317 // 弹窗
317 changeTap(item) { 318 changeTap(item) {
318 this.whichTap = item 319 this.whichTap = item
319 this.$refs.popup.open() 320 this.$refs.popup.open()
320 }, 321 },
321 chatOur(item) { 322 chatOur(item) {
322 if (item === 1) { 323 if (item === 1) {
323 uni.makePhoneCall({ 324 uni.makePhoneCall({
324 phoneNumber: 13376189297, // 客服1 电话 325 phoneNumber: 13376189297, // 客服1 电话
325 }) 326 })
326 } else { 327 } else {
327 uni.makePhoneCall({ 328 uni.makePhoneCall({
328 phoneNumber: 18014995101, // 客服2 电话 329 phoneNumber: 18014995101, // 客服2 电话
329 }) 330 })
330 } 331 }
331 }, 332 },
332 // 授权 333 // 授权
333 onGotUserInfo(e) { 334 onGotUserInfo(e) {
334 if (e.detail.errMsg === 'getUserInfo:ok') { 335 if (e.detail.errMsg === 'getUserInfo:ok') {
335 const { fromInfo } = this.$store.state.user 336 const { fromInfo } = this.$store.state.user
336 // 用户授权成功 337 // 用户授权成功
337 store.dispatch('user/getUserInfo', fromInfo) 338 store.dispatch('user/getUserInfo', fromInfo)
338 this.isAuth = true 339 this.isAuth = true
339 } 340 }
340 }, 341 },
341 toAddress() { 342 toAddress() {
342 uni.navigateTo({ 343 uni.navigateTo({
343 url: '../address/addressList', 344 url: '../address/addressList',
344 success: res => {}, 345 success: res => {},
345 fail: () => {}, 346 fail: () => {},
346 complete: () => {}, 347 complete: () => {},
347 }) 348 })
348 }, 349 },
349 introduce() { 350 introduce() {
350 uni.showModal({ 351 uni.showModal({
351 content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', 352 content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。',
352 showCancel: false, 353 showCancel: false,
353 }) 354 })
354 }, 355 },
355 joinUs() { 356 joinUs() {
356 uni.showModal({ 357 uni.showModal({
357 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', 358 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
358 showCancel: false, 359 showCancel: false,
359 }) 360 })
360 }, 361 },
361 toMyOrder(status) { 362 toMyOrder(status) {
362 uni.navigateTo({ 363 uni.navigateTo({
363 url: `../myOrder/myOrder?status=${status}`, 364 url: `../myOrder/myOrder?status=${status}`,
364 success: res => {}, 365 success: res => {},
365 fail: () => {}, 366 fail: () => {},
366 complete: () => {}, 367 complete: () => {},
367 }) 368 })
368 }, 369 },
369 toOpticsData() { 370 toOpticsData() {
370 uni.navigateTo({ 371 uni.navigateTo({
371 url: '../addOpticsData/addOpticsData', 372 url: '../addOpticsData/addOpticsData',
372 }) 373 })
373 }, 374 },
374 }, 375 },
375 } 376 }
376 </script> 377 </script>
377 378
378 <style lang="scss"> 379 <style lang="scss">
379 .warp { 380 .warp {
380 font-size: 24rpx; 381 font-size: 24rpx;
381 background-color: #f2f2f2; 382 background-color: #f2f2f2;
382 height: 100vh; 383 height: 100vh;
383 } 384 }
384 .content { 385 .content {
385 display: flex; 386 display: flex;
386 flex-direction: column; 387 flex-direction: column;
387 align-items: center; 388 align-items: center;
388 justify-content: center; 389 justify-content: center;
389 background-color: #f2f2f2; 390 background-color: #f2f2f2;
390 } 391 }
391 .userInfo { 392 .userInfo {
392 background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%); 393 background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
393 width: 100%; 394 width: 100%;
394 height: 240rpx; 395 height: 240rpx;
395 color: #ffffff; 396 color: #ffffff;
396 padding: 60rpx 82rpx 80rpx 44rpx; 397 padding: 60rpx 82rpx 80rpx 44rpx;
397 box-sizing: border-box; 398 box-sizing: border-box;
398 display: flex; 399 display: flex;
399 flex-direction: row; 400 flex-direction: row;
400 justify-content: space-between; 401 justify-content: space-between;
401 align-items: flex-start; 402 align-items: flex-start;
402 .info { 403 .info {
403 display: flex; 404 display: flex;
404 flex-direction: row; 405 flex-direction: row;
405 justify-content: space-between; 406 justify-content: space-between;
406 align-items: center; 407 align-items: center;
407 image { 408 image {
408 border-radius: 50rpx; 409 border-radius: 50rpx;
409 height: 100rpx; 410 height: 100rpx;
410 width: 100rpx; 411 width: 100rpx;
411 margin-right: 40rpx; 412 margin-right: 40rpx;
412 } 413 }
413 .infoText { 414 .infoText {
414 display: flex; 415 display: flex;
415 flex-direction: column; 416 flex-direction: column;
416 justify-content: space-between; 417 justify-content: space-between;
417 align-items: flex-scetart; 418 align-items: flex-scetart;
418 .userName { 419 .userName {
419 font-size: 18px; 420 font-size: 18px;
420 color: #ffffff; 421 color: #ffffff;
421 margin-bottom: 8rpx; 422 margin-bottom: 8rpx;
422 } 423 }
423 .nickName { 424 .nickName {
424 font-size: 12px; 425 font-size: 12px;
425 color: #ffffff; 426 color: #ffffff;
426 } 427 }
427 } 428 }
428 } 429 }
429 // .service { 430 // .service {
430 // margin-top: 20rpx; 431 // margin-top: 20rpx;
431 // image { 432 // image {
432 // height: 36rpx; 433 // height: 36rpx;
433 // width: 36rpx; 434 // width: 36rpx;
434 // } 435 // }
435 // } 436 // }
436 } 437 }
437 .myOpticsData { 438 .myOpticsData {
438 width: 670rpx; 439 width: 670rpx;
439 height: 120rpx; 440 height: 120rpx;
440 background-color: #ffffff; 441 background-color: #ffffff;
441 border-radius: 6px; 442 border-radius: 6px;
442 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); 443 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
443 position: relative; 444 position: relative;
444 bottom: 44rpx; 445 bottom: 44rpx;
445 padding: 40rpx; 446 padding: 40rpx;
446 box-sizing: border-box; 447 box-sizing: border-box;
447 display: flex; 448 display: flex;
448 justify-content: space-between; 449 justify-content: space-between;
449 align-items: center; 450 align-items: center;
450 .left { 451 .left {
451 font-size: 14px; 452 font-size: 14px;
452 color: #333333; 453 color: #333333;
453 display: flex; 454 display: flex;
454 align-items: center; 455 align-items: center;
455 image { 456 image {
456 margin-right: 32rpx; 457 margin-right: 32rpx;
457 width: 40rpx; 458 width: 40rpx;
458 height: 44rpx; 459 height: 44rpx;
459 } 460 }
460 } 461 }
461 image { 462 image {
462 height: 16px; 463 height: 16px;
463 width: 8px; 464 width: 8px;
464 } 465 }
465 } 466 }
466 .myOrder { 467 .myOrder {
467 width: 100%; 468 width: 100%;
468 height: 296rpx; 469 height: 296rpx;
469 // margin-top: 116rpx; 470 // margin-top: 116rpx;
470 margin-bottom: 20rpx; 471 margin-bottom: 20rpx;
471 padding: 0 40rpx; 472 padding: 0 40rpx;
472 box-sizing: border-box; 473 box-sizing: border-box;
473 background: #ffffff; 474 background: #ffffff;
474 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 475 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
475 border-radius: 6px; 476 border-radius: 6px;
476 border-radius: 6px; 477 border-radius: 6px;
477 display: flex; 478 display: flex;
478 flex-direction: column; 479 flex-direction: column;
479 justify-content: space-around; 480 justify-content: space-around;
480 align-items: center; 481 align-items: center;
481 .orderHeader { 482 .orderHeader {
482 width: 100%; 483 width: 100%;
483 height: 100rpx; 484 height: 100rpx;
484 display: flex; 485 display: flex;
485 flex-direction: row; 486 flex-direction: row;
486 justify-content: space-between; 487 justify-content: space-between;
487 align-items: center; 488 align-items: center;
488 border-bottom: 1px solid #f5f5f5; 489 border-bottom: 1px solid #f5f5f5;
489 font-weight: bold; 490 font-weight: bold;
490 font-size: 18px; 491 font-size: 18px;
491 color: #333333; 492 color: #333333;
492 .btn { 493 .btn {
493 font-size: 12px; 494 font-size: 12px;
494 color: #999999; 495 color: #999999;
495 display: flex; 496 display: flex;
496 align-items: center; 497 align-items: center;
497 image { 498 image {
498 margin-left: 20rpx; 499 margin-left: 20rpx;
499 height: 32rpx; 500 height: 32rpx;
500 width: 16rpx; 501 width: 16rpx;
501 } 502 }
502 } 503 }
503 } 504 }
504 .orderBody { 505 .orderBody {
505 width: 100%; 506 width: 100%;
506 display: flex; 507 display: flex;
507 flex-direction: row; 508 flex-direction: row;
508 justify-content: space-around; 509 justify-content: space-around;
509 align-items: center; 510 align-items: center;
510 .item { 511 .item {
511 display: flex; 512 display: flex;
512 flex-direction: column; 513 flex-direction: column;
513 align-items: center; 514 align-items: center;
514 image { 515 image {
515 width: 62rpx; 516 width: 62rpx;
516 height: 46rpx; 517 height: 46rpx;
517 } 518 }
518 text { 519 text {
519 margin-top: 24rpx; 520 margin-top: 24rpx;
520 font-size: 12px; 521 font-size: 12px;
521 color: #333333; 522 color: #333333;
522 } 523 }
523 } 524 }
524 } 525 }
525 } 526 }
526 .someItem { 527 .someItem {
527 width: 100%; 528 width: 100%;
528 height: 336rpx; 529 height: 336rpx;
529 background: #ffffff; 530 background: #ffffff;
530 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 531 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
531 border-radius: 6px; 532 border-radius: 6px;
532 border-radius: 6px; 533 border-radius: 6px;
533 margin-bottom: 18rpx; 534 margin-bottom: 18rpx;
534 box-sizing: border-box; 535 box-sizing: border-box;
535 padding: 21rpx 48rpx 21rpx 42rpx; 536 padding: 21rpx 48rpx 21rpx 42rpx;
536 box-sizing: border-box; 537 box-sizing: border-box;
537 display: flex; 538 display: flex;
538 flex-direction: column; 539 flex-direction: column;
539 justify-content: space-between; 540 justify-content: space-between;
540 align-items: center; 541 align-items: center;
541 .item { 542 .item {
542 display: grid; 543 display: grid;
543 grid-template-columns: 10% 90%; 544 grid-template-columns: 10% 90%;
544 align-items: center; 545 align-items: center;
545 height: 72rpx; 546 height: 72rpx;
546 width: 100%; 547 width: 100%;
547 .left { 548 .left {
548 font-size: 14px; 549 font-size: 14px;
549 color: #333333; 550 color: #333333;
550 display: flex; 551 display: flex;
551 align-items: center; 552 align-items: center;
552 justify-content: space-between; 553 justify-content: space-between;
553 height: 72rpx; 554 height: 72rpx;
554 border-bottom: 1px solid #f2f2f2; 555 border-bottom: 1px solid #f2f2f2;
555 image { 556 image {
556 margin-right: 0; 557 margin-right: 0;
557 height: 16px; 558 height: 16px;
558 width: 8px; 559 width: 8px;
559 } 560 }
560 } 561 }
561 image { 562 image {
562 margin-right: 32rpx; 563 margin-right: 32rpx;
563 width: 40rpx; 564 width: 40rpx;
564 height: 44rpx; 565 height: 44rpx;
565 } 566 }
566 .lastLeft { 567 .lastLeft {
567 border-bottom: none; 568 border-bottom: none;
568 } 569 }
569 } 570 }
570 } 571 }
571 .recommend { 572 .recommend {
572 background: #ffffff; 573 background: #ffffff;
573 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 574 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
574 border-radius: 6px; 575 border-radius: 6px;
575 border-radius: 6px; 576 border-radius: 6px;
576 width: 100%; 577 width: 100%;
577 .title { 578 .title {
578 display: flex; 579 display: flex;
579 flex-direction: row; 580 flex-direction: row;
580 align-items: center; 581 align-items: center;
581 justify-content: space-between; 582 justify-content: space-between;
582 padding: 20rpx 40rpx; 583 padding: 20rpx 40rpx;
583 .line { 584 .line {
584 width: 264rpx; 585 width: 264rpx;
585 height: 1rpx; 586 height: 1rpx;
586 border-bottom: 1px solid #eaeaea; 587 border-bottom: 1px solid #eaeaea;
587 } 588 }
588 .text { 589 .text {
589 font-family: PingFangSC-Medium; 590 font-family: PingFangSC-Medium;
590 font-size: 14px; 591 font-size: 14px;
591 color: #333333; 592 color: #333333;
592 letter-spacing: -0.26px; 593 letter-spacing: -0.26px;
593 text-align: justify; 594 text-align: justify;
594 line-height: 24px; 595 line-height: 24px;
595 } 596 }
596 } 597 }
597 .goods-list { 598 .goods-list {
598 .loading-text { 599 .loading-text {
599 width: 100%; 600 width: 100%;
600 display: flex; 601 display: flex;
601 justify-content: center; 602 justify-content: center;
602 align-items: center; 603 align-items: center;
603 height: 30px; 604 height: 30px;
604 color: #979797; 605 color: #979797;
605 font-size: 12px; 606 font-size: 12px;
606 } 607 }
607 .product-list { 608 .product-list {
608 width: 92%; 609 width: 92%;
609 padding: 0 4% 3vw 4%; 610 padding: 0 4% 3vw 4%;
610 display: flex; 611 display: flex;
611 justify-content: space-between; 612 justify-content: space-between;
612 flex-wrap: wrap; 613 flex-wrap: wrap;
613 .product { 614 .product {
614 width: 48%; 615 width: 48%;
615 margin: 0 0 20rpx 0; 616 margin: 0 0 20rpx 0;
616 background: #ffffff; 617 background: #ffffff;
617 border: 1px solid #f2f2f2; 618 border: 1px solid #f2f2f2;
618 } 619 }
619 } 620 }
620 } 621 }
621 } 622 }
622 .auth { 623 .auth {
623 height: 100vh; 624 height: 100vh;
624 display: flex; 625 display: flex;
625 flex-direction: column; 626 flex-direction: column;
626 align-items: center; 627 align-items: center;
627 .icon { 628 .icon {
628 width: 140rpx; 629 width: 140rpx;
629 height: 140rpx; 630 height: 140rpx;
630 border-radius: 50%; 631 border-radius: 50%;
631 margin-top: 100rpx; 632 margin-top: 100rpx;
632 background-color: grey; 633 background-color: grey;
633 } 634 }
634 .divider { 635 .divider {
635 height: 1rpx; 636 height: 1rpx;
636 width: 600rpx; 637 width: 600rpx;
637 margin-top: 80rpx; 638 margin-top: 80rpx;
638 background-color: #e6e3e3; 639 background-color: #e6e3e3;
639 } 640 }
640 .title { 641 .title {
641 width: 600rpx; 642 width: 600rpx;
642 margin-top: 50rpx; 643 margin-top: 50rpx;
643 text-align: left; 644 text-align: left;
644 } 645 }
645 .text { 646 .text {
646 width: 600rpx; 647 width: 600rpx;
647 margin-top: 30rpx; 648 margin-top: 30rpx;
648 text-align: left; 649 text-align: left;
649 color: #e6e3e3; 650 color: #e6e3e3;
650 } 651 }
651 button { 652 button {
652 width: 450rpx; 653 width: 450rpx;
653 height: 80rpx; 654 height: 80rpx;
654 line-height: 80rpx; 655 line-height: 80rpx;
655 margin-top: 80rpx; 656 margin-top: 80rpx;
656 border-radius: 30rpx; 657 border-radius: 30rpx;
657 } 658 }
658 } 659 }
659 .closeBtn { 660 .closeBtn {
660 height: 28rpx; 661 height: 28rpx;
661 width: 28rpx; 662 width: 28rpx;
662 // border: 1px solid red; 663 // border: 1px solid red;
663 position: absolute; 664 position: absolute;
664 top: 20rpx; 665 top: 20rpx;
665 right: 10rpx; 666 right: 10rpx;
666 } 667 }
667 </style> 668 </style>
668 669