刘文博 / gulu-vue

Download as
Browse Code »

Commit 967ce241aff1735e153c739abc15fe718860fdca

Authored by 喻鹏
1 parent b38a27f3ec
Exists in master

合并冲突

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