Commit d6200736ba2bd28207d7d3a0a87940a1b4fb59bf
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 |