Commit 2cd0b0f44af9680f2afbd090aa4c9fdaa058ca3a

Authored by 范牧
1 parent c00dd2818b
Exists in master

bug修复

src/pages/cart/cart.vue
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view 9 <view
10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 @click="pClick" 11 @click="pClick"
12 > 12 >
13 <span class="correct"></span> 13 <span class="correct"></span>
14 </view> 14 </view>
15 <image 15 <image
16 src="../../static/store.png" 16 src="../../static/store.png"
17 mode="aspectFill" 17 mode="aspectFill"
18 ></image> 18 ></image>
19 <text>非常戴镜</text> 19 <text>非常戴镜</text>
20 </view> 20 </view>
21 <view 21 <view
22 class="cardBody" 22 class="cardBody"
23 v-for="(item,index) in cartList" 23 v-for="(item,index) in cartList"
24 :key="index" 24 :key="index"
25 @longpress="delCart(item.cart_id,index)" 25 @longpress="delCart(item.cart_id,index)"
26 > 26 >
27 <view 27 <view
28 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'" 28 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29 @click="childClick(cartList[index],index)" 29 @click="childClick(cartList[index],index)"
30 > 30 >
31 <span class="correct"></span> 31 <span class="correct"></span>
32 </view> 32 </view>
33 <view class="imageWrap"> 33 <view class="imageWrap">
34 <image 34 <image
35 :src="item.img_index_url" 35 :src="item.img_index_url"
36 mode="aspectFit" 36 mode="aspectFit"
37 style="width: 188rpx;height: 168rpx;" 37 style="width: 188rpx;height: 168rpx;"
38 ></image> 38 ></image>
39 </view> 39 </view>
40 <view class="goodInfo"> 40 <view class="goodInfo">
41 <!-- <view class="imageWrap"> 41 <!-- <view class="imageWrap">
42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43 </view> --> 43 </view> -->
44 <view class="infoRight"> 44 <view class="infoRight">
45 <view 45 <view
46 class="goodName" 46 class="goodName"
47 @tap="toGoods(item.pid,item.sk_id)" 47 @tap="toGoods(item.pid,item.sk_id)"
48 >{{item.p_name}}</view> 48 >{{item.p_name}}</view>
49 <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"> 49 <view
50 <view class="desL"> 50 class="describ"
51 <view class="people"> 51 @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"
52 使用人:{{item.peopleName}} 52 >
53 </view> 53 <view class="desL">
54 <view class="skuInfo"> 54 <view class="people">
55 {{item.sku_name}} 55 使用人:{{item.peopleName}}
56 </view> 56 </view>
57 </view> 57 <view class="skuInfo">
58 <view class="desR"> 58 {{item.sku_name}}
59 <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image> 59 </view>
60 </view> 60 </view>
61 <view class="desR">
62 <image
63 src="../../static/right.png"
64 mode="aspectFit"
65 style="width: 18rpx;height: 18rpx;"
66 ></image>
67 </view>
61 </view> 68 </view>
62 <view class="priceBox"> 69 <view class="priceBox">
63 <view class="price">¥{{item.nowPrice*item.num}}</view> 70 <view class="price">¥{{item.nowPrice*item.num}}</view>
64 <text class="maxCount">(限购{{maxCount}}副)</text> 71 <text class="maxCount">(限购{{maxCount}}副)</text>
65 <view class="counter"> 72 <view class="counter">
66 <view 73 <view
67 class="btn" 74 class="btn"
68 disabled="this.addDisabled" 75 disabled="this.addDisabled"
69 type="default" 76 type="default"
70 @tap="counter(index,false,item)" 77 @tap="counter(index,false,item)"
71 >-</view> 78 >-</view>
72 <text>{{item.num}}</text> 79 <text>{{item.num}}</text>
73 <view 80 <view
74 class="btn" 81 class="btn"
75 disabled="this.desDisabled" 82 disabled="this.desDisabled"
76 type="default" 83 type="default"
77 @tap="counter(index,true,item)" 84 @tap="counter(index,true,item)"
78 >+</view> 85 >+</view>
79 </view> 86 </view>
80 </view> 87 </view>
81 </view> 88 </view>
82 </view> 89 </view>
83 </view> 90 </view>
84 </view> 91 </view>
85 </block> 92 </block>
86 <view class="footer"> 93 <view class="footer">
87 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> 94 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view>
88 <view class="footerRight"> 95 <view class="footerRight">
89 <view class="paybtn" @click="toComfirmOrder">立即结算</view> 96 <view
97 class="paybtn"
98 @click="toComfirmOrder"
99 >立即结算</view>
90 </view> 100 </view>
91 </view> 101 </view>
92 <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id" 102 <BottomSheet
93 :index="cartIndex" 103 v-if="isShowBottom"
94 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> 104 :isCart="isCart"
105 @addCart="addCart"
106 :sk_id="sk_id"
107 :propMpId="mp_id"
108 @chooseCartModi="chooseCartModi"
109 :cart_id="cart_id"
110 :index="cartIndex"
111 :pid="pid"
112 :goodInfo="goodInfo"
113 :isShowBottom="isShowBottom"
114 @closeBottom="closeBottom"
115 ></BottomSheet>
95 </view> 116 </view>
96 </template> 117 </template>
97 118
98 <script> 119 <script>
99 120
100 import store from '@/store' 121 import store from '@/store'
101 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'; 122 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
102 export default { 123 export default {
103 components:{ 124 components: {
104 BottomSheet, 125 BottomSheet,
105 }, 126 },
106 data() { 127 data() {
107 return { 128 return {
108 pid:Number, 129 pid: Number,
109 isCart:Number, 130 isCart: Number,
110 sk_id:String, 131 sk_id: String,
111 mp_id:String, 132 mp_id: String,
112 isShowBottom : false, //底部弹窗开关 133 isShowBottom: false, // 底部弹窗开关
113 cart_id:Number, 134 cart_id: Number,
114 maxCount: 20, 135 maxCount: 20,
115 cartIndex:Number, 136 cartIndex: Number,
116 cartList:[] 137 cartList: [],
117 } 138 }
118 }, 139 },
119 computed: { 140 computed: {
120 pIsoPen (){ 141 pIsoPen () {
121 if (this.cartList.length > 0){ 142 if (this.cartList.length > 0) {
122 return this.cartList.find(item => !item.isChecked) ? false : true; 143 return !this.cartList.find(item => !item.isChecked)
123 } 144 }
124 return false 145 return false
125 }, 146 },
126 goodInfo () { 147 goodInfo () {
127 return this.$store.state.read.goodInfo 148 return this.$store.state.read.goodInfo
128 }, 149 },
129 totalPrice() { 150 totalPrice() {
130 let totalPrice = 0 151 let totalPrice = 0
131 this.cartList.forEach((item)=>{ 152 this.cartList.forEach((item) => {
132 if(item.isChecked){ 153 if (item.isChecked) {
133 totalPrice += item.nowPrice * item.num; 154 totalPrice += item.nowPrice * item.num
134 } 155 }
135 }) 156 })
136 return totalPrice 157 return totalPrice
137 } 158 },
138 }, 159 },
139 onShow() { 160 onShow() {
140 this.cartList = this.$store.state.cart.cartList; 161 this.cartList = this.$store.state.cart.cartList
141 }, 162 },
142 onLoad: async function() { 163 onLoad: async function() {
143 await this.$store.dispatch('cart/getCartList', { 164 await this.$store.dispatch('cart/getCartList', {
144 uid: this.$store.state.user.userInfo.uid, // 用户id 165 uid: this.$store.state.user.userInfo.uid, // 用户id
145 }) 166 })
146 167
147 this.cartList = this.$store.state.cart.cartList; 168 this.cartList = this.$store.state.cart.cartList
148 this.cartList.forEach((item)=>{ 169 this.cartList.forEach((item) => {
149 item.isChecked = false 170 item.isChecked = false
150 }) 171 })
151 }, 172 },
152 methods: { 173 methods: {
153 //全选按钮 174 // 全选按钮
154 pClick(){ 175 pClick() {
155 let pStatus = this.cartList.find(item => !item.isChecked) ? false : true 176 const pStatus = !this.cartList.find(item => !item.isChecked)
156 let oldList = this.cartList; 177 const oldList = this.cartList
157 oldList.forEach((item, index)=>{ 178 oldList.forEach((item, index) => {
158 item.isChecked = !pStatus 179 item.isChecked = !pStatus
159 this.cartList.splice(index,1, item) 180 this.cartList.splice(index, 1, item)
160 }) 181 })
161 }, 182 },
162 //单选按钮 183 // 单选按钮
163 childClick(type,index){ 184 childClick(type, index) {
164 this.cartList[index].isChecked = !this.cartList[index].isChecked 185 this.cartList[index].isChecked = !this.cartList[index].isChecked
165 //vue没有办法监听数组内部值的变化,所以需要通过这个方法去触发 186 // vue没有办法监听数组内部值的变化,所以需要通过这个方法去触发
166 this.cartList.splice(index,1, this.cartList[index]) 187 this.cartList.splice(index, 1, this.cartList[index])
167 }, 188 },
168 //修改购物车 189 // 修改购物车
169 chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){ 190 chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) {
170 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) 191 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
171 store.dispatch('cart/modiCart', { 192 store.dispatch('cart/modiCart', {
172 uid: this.$store.state.user.userInfo.uid, 193 uid: this.$store.state.user.userInfo.uid,
173 openid: this.$store.state.user.userInfo.openid, 194 openid: this.$store.state.user.userInfo.openid,
174 mp_id: mp_id, 195 mp_id: mp_id,
175 sk_id: sk_id, 196 sk_id: sk_id,
176 price: price, 197 price: price,
177 pid: pid, 198 pid: pid,
178 num: num, 199 num: num,
179 cart_id: cart_id, 200 cart_id: cart_id,
180 args: { 201 args: {
181 index: index, 202 index: index,
182 }, 203 },
183 }) 204 })
184 this.$nextTick(function(){ 205 this.$nextTick(function() {
185 store.dispatch('cart/getCartList', { 206 store.dispatch('cart/getCartList', {
186 uid: this.$store.state.user.userInfo.uid, // 用户id 207 uid: this.$store.state.user.userInfo.uid, // 用户id
187 }).then(()=>{ 208 }).then(() => {
188 this.cartList = this.$store.state.cart.cartList; 209 this.cartList = this.$store.state.cart.cartList
189 }) 210 })
190 }) 211 })
191 }, 212 },
192 //底部弹窗开关 213 // 底部弹窗开关
193 showBottom(isCart,pid,skId,mp_id,cart_id,index){ 214 showBottom(isCart, pid, skId, mp_id, cart_id, index) {
194 store.dispatch('read/fetch', { 215 store.dispatch('read/fetch', {
195 pid, 216 pid,
196 sk_id: skId, 217 sk_id: skId,
197 }).then(()=>{ 218 }).then(() => {
198 this.cartIndex = index 219 this.cartIndex = index
199 this.sk_id = skId; 220 this.sk_id = skId
200 this.pid = pid; 221 this.pid = pid
201 this.mp_id = mp_id; 222 this.mp_id = mp_id
202 this.isCart = isCart; 223 this.isCart = isCart
203 this.cart_id = cart_id; 224 this.cart_id = cart_id
204 this.isShowBottom = true; 225 this.isShowBottom = true
205 }) 226 })
206 }, 227 },
207 closeBottom(){ 228 closeBottom() {
208 this.isShowBottom = false; 229 this.isShowBottom = false
209 }, 230 },
210 toGoods(id, sk_id) { 231 toGoods(id, skId) {
211 uni.navigateTo({ 232 uni.navigateTo({
212 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, 233 url: '../details/details?pid=' + id + '&sk_id=' + skId,
213 success: res => {}, 234 success: res => {},
214 fail: () => {}, 235 fail: () => {},
215 complete: () => {}, 236 complete: () => {},
216 }) 237 })
217 }, 238 },
218 toComfirmOrder(){ 239 toComfirmOrder() {
219 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) 240 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
220 if(this.$store.state.cart.checkedCartLst.length>0){ 241 if (this.$store.state.cart.checkedCartLst.length > 0) {
221 uni.navigateTo({ 242 uni.navigateTo({
222 url:`../confirmOrder/confirmOrder?isCart=true`, 243 url: '../confirmOrder/confirmOrder?isCart=true',
223 }) 244 })
224 }else{ 245 } else {
225 uni.showToast({ 246 uni.showToast({
226 title:'您还没有选择宝贝哦~', 247 title: '您还没有选择宝贝哦~',
227 icon:'none' 248 icon: 'none',
228 }) 249 })
229 } 250 }
230 }, 251 },
231 counter(index, isadd, item) { 252 counter(index, isadd, item) {
232 // console.log('item=====>', item) 253 // console.log('item=====>', item)
233 // console.log('num=====>', item.num) 254 // console.log('num=====>', item.num)
234 const nums = parseInt(item.num) 255 const nums = parseInt(item.num)
235 if (isadd) { 256 if (isadd) {
236 if (nums >= this.maxCount) { 257 if (nums >= this.maxCount) {
237 this.addDisabled = true 258 this.addDisabled = true
238 } else { 259 } else {
239 this.addDisabled = true 260 this.addDisabled = true
240 store.dispatch('cart/modiCart', { 261 store.dispatch('cart/modiCart', {
241 uid: this.$store.state.user.userInfo.uid, 262 uid: this.$store.state.user.userInfo.uid,
242 openid: this.$store.state.user.userInfo.openid, 263 openid: this.$store.state.user.userInfo.openid,
243 mp_id: item.mp_id, 264 mp_id: item.mp_id,
244 sk_id: item.sk_id, 265 sk_id: item.sk_id,
245 price: item.nowPrice, 266 price: item.nowPrice,
246 pid: item.pid, 267 pid: item.pid,
247 num: nums + 1, 268 num: nums + 1,
248 cart_id: item.cart_id, 269 cart_id: item.cart_id,
249 args: { 270 args: {
250 index: index, 271 index: index,
251 isadd: isadd, 272 isadd: isadd,
252 }, 273 },
253 }) 274 })
254 this.addDisabled = false 275 this.addDisabled = false
255 } 276 }
256 } else { 277 } else {
257 if (nums <= 1) { 278 if (nums <= 1) {
258 this.desDisabled = true 279 this.desDisabled = true
259 } else { 280 } else {
260 this.desDisabled = false 281 this.desDisabled = false
261 282
262 store.dispatch('cart/modiCart', { 283 store.dispatch('cart/modiCart', {
263 uid: this.$store.state.user.userInfo.uid, 284 uid: this.$store.state.user.userInfo.uid,
264 openid: this.$store.state.user.userInfo.openid, 285 openid: this.$store.state.user.userInfo.openid,
265 mp_id: item.mp_id, 286 mp_id: item.mp_id,
266 sk_id: item.sk_id, 287 sk_id: item.sk_id,
267 price: item.nowPrice, 288 price: item.nowPrice,
268 pid: item.pid, 289 pid: item.pid,
269 num: nums - 1, 290 num: nums - 1,
270 cart_id: item.cart_id, 291 cart_id: item.cart_id,
271 args: { 292 args: {
272 index: index, 293 index: index,
273 isadd: isadd, 294 isadd: isadd,
274 }, 295 },
275 }) 296 })
276 this.desDisabled = true 297 this.desDisabled = true
277 } 298 }
278 } 299 }
279
280 }, 300 },
281 delCart(cart_id, index) { 301 delCart(cart_id, index) {
282 cart_id = parseInt(cart_id) 302 cart_id = parseInt(cart_id)
283 uni.showModal({ 303 uni.showModal({
284 title: '是否删除该商品', 304 title: '是否删除该商品',
285 success: function (res) { 305 success: function (res) {
286 if (res.confirm) { 306 if (res.confirm) {
287 store.dispatch('cart/delCart', { 307 store.dispatch('cart/delCart', {
288 uid: this.$store.state.user.userInfo.uid, 308 uid: this.$store.state.user.userInfo.uid,
289 openid: this.$store.state.user.userInfo.openid, 309 openid: this.$store.state.user.userInfo.openid,
290 cart_id: cart_id, // 要修改的购物车id 310 cart_id: cart_id, // 要修改的购物车id
291 arg: index, // 由于action 传参是能接收两参数,因此将index放入对象 311 arg: index, // 由于action 传参是能接收两参数,因此将index放入对象
292 }) 312 })
293 } 313 }
294 }.bind(this), 314 }.bind(this),
295 }) 315 })
296 // this.cartList.splice(index,1) 316 // this.cartList.splice(index,1)
297 }, 317 },
298 }, 318 },
299 } 319 }
300 </script> 320 </script>
301 321
302 <style lang="scss"> 322 <style lang="scss">
303 .content { 323 .content {
304 min-height: 100vh; 324 min-height: 100vh;
305 background-color: #f2f2f2; 325 background-color: #f2f2f2;
306 display: flex; 326 display: flex;
307 flex-direction: column; 327 flex-direction: column;
308 align-items: center; 328 align-items: center;
309 justify-content: space-between; 329 justify-content: space-between;
310 padding: 20rpx 40rpx; 330 padding: 20rpx 40rpx;
311 box-sizing: border-box; 331 box-sizing: border-box;
312 332
313 .partentCheck { 333 .partentCheck {
314 width: 16px; 334 width: 16px;
315 height: 16px; 335 height: 16px;
316 border-radius: 22px; 336 border-radius: 22px;
317 border: 1px solid #cfcfcf; 337 border: 1px solid #cfcfcf;
318 background-color: #ffffff; 338 background-color: #ffffff;
319 margin: 24rpx 12rpx 24rpx 24rpx; 339 margin: 24rpx 12rpx 24rpx 24rpx;
320 } 340 }
321 .partentChecked { 341 .partentChecked {
322 width: 18px; 342 width: 18px;
323 height: 18px; 343 height: 18px;
324 border-radius: 22px; 344 border-radius: 22px;
325 background-color: #ff6b4a; 345 background-color: #ff6b4a;
326 margin: 24rpx 12rpx 24rpx 24rpx; 346 margin: 24rpx 12rpx 24rpx 24rpx;
327 .correct { 347 .correct {
328 display: inline-block; 348 display: inline-block;
329 position: relative; 349 position: relative;
330 width: 10rpx; 350 width: 10rpx;
331 height: 2rpx; 351 height: 2rpx;
332 background: #ffffff; 352 background: #ffffff;
333 line-height: 0; 353 line-height: 0;
334 font-size: 0; 354 font-size: 0;
335 position: relative; 355 position: relative;
336 top: -7px; 356 top: -7px;
337 left: 4px; 357 left: 4px;
338 -webkit-transform: rotate(45deg); 358 -webkit-transform: rotate(45deg);
339 } 359 }
340 .correct:after { 360 .correct:after {
341 content: "/"; 361 content: "/";
342 display: block; 362 display: block;
343 width: 16rpx; 363 width: 16rpx;
344 height: 2rpx; 364 height: 2rpx;
345 background: #ffffff; 365 background: #ffffff;
346 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 366 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
347 } 367 }
348 } 368 }
349 369
350 .card { 370 .card {
351 background-color: #ffffff; 371 background-color: #ffffff;
352 border-radius: 16rpx; 372 border-radius: 16rpx;
353 box-sizing: border-box; 373 box-sizing: border-box;
354 padding: 36rpx 36rpx 36rpx 18rpx; 374 padding: 36rpx 36rpx 36rpx 18rpx;
355 display: flex; 375 display: flex;
356 flex-direction: column; 376 flex-direction: column;
357 align-items: center; 377 align-items: center;
358 justify-content: space-between; 378 justify-content: space-between;
359 margin-bottom: 180rpx; 379 margin-bottom: 180rpx;
360 .cardHeader { 380 .cardHeader {
361 width: 100%; 381 width: 100%;
362 height: 36rpx; 382 height: 36rpx;
363 display: flex; 383 display: flex;
364 align-items: center; 384 align-items: center;
365 justify-content: flex-start; 385 justify-content: flex-start;
366 margin-bottom: 20rpx; 386 margin-bottom: 20rpx;
367 image { 387 image {
368 height: 32rpx; 388 height: 32rpx;
369 width: 32rpx; 389 width: 32rpx;
370 padding-left: 6px; 390 padding-left: 6px;
371 padding-right: 10px; 391 padding-right: 10px;
372 } 392 }
373 text { 393 text {
374 // font-family: PingFangSC-Regular; 394 // font-family: PingFangSC-Regular;
375 font-size: 14px; 395 font-size: 14px;
376 color: #333333; 396 color: #333333;
377 letter-spacing: -0.26px; 397 letter-spacing: -0.26px;
378 } 398 }
379 } 399 }
380 .cardBody { 400 .cardBody {
381 width: 100%; 401 width: 100%;
382 min-height: 300rpx; 402 min-height: 300rpx;
383 display: flex; 403 display: flex;
384 align-items: center; 404 align-items: center;
385 justify-content: space-between; 405 justify-content: space-between;
386 .goodInfo { 406 .goodInfo {
387 width: 390rpx; 407 width: 390rpx;
388 display: flex; 408 display: flex;
389 flex-direction: row; 409 flex-direction: row;
390 justify-content: flex-start; 410 justify-content: flex-start;
391 padding-left: 6px; 411 padding-left: 6px;
392 412
393 .imageWrap { 413 .imageWrap {
394 height: 188rpx; 414 height: 188rpx;
395 width: 188rpx; 415 width: 188rpx;
396 margin-right: 28rpx; 416 margin-right: 28rpx;
397 417
398 image { 418 image {
399 border-radius: 4px; 419 border-radius: 4px;
400 height: 188rpx; 420 height: 188rpx;
401 width: 188rpx; 421 width: 188rpx;
402 } 422 }
403 } 423 }
404 .infoRight { 424 .infoRight {
405 display: flex; 425 display: flex;
406 flex-direction: column; 426 flex-direction: column;
407 align-items: flex-start; 427 align-items: flex-start;
408 justify-content: space-between; 428 justify-content: space-between;
409 min-height: 240rpx; 429 min-height: 240rpx;
410 width: 100%; 430 width: 100%;
411 .goodName { 431 .goodName {
412 display: -webkit-box; 432 display: -webkit-box;
413 -webkit-box-orient: vertical; 433 -webkit-box-orient: vertical;
414 -webkit-line-clamp: 2; 434 -webkit-line-clamp: 2;
415 text-align: justify; 435 text-align: justify;
416 overflow: hidden; 436 overflow: hidden;
417 font-size: 28rpx; 437 font-size: 28rpx;
418 color: #333333; 438 color: #333333;
419 } 439 }
420 .describ { 440 .describ {
421 width: 100%; 441 width: 100%;
422 min-height: 80rpx; 442 min-height: 80rpx;
423 background: #F9F9F9; 443 background: #f9f9f9;
424 border-radius: 2px; 444 border-radius: 2px;
425 box-sizing: border-box; 445 box-sizing: border-box;
426 padding: 10rpx; 446 padding: 10rpx;
427 font-size: 20rpx; 447 font-size: 20rpx;
428 letter-spacing: -0.23px; 448 letter-spacing: -0.23px;
429 color: #999999; 449 color: #999999;
430 display: flex; 450 display: flex;
431 justify-content: space-between; 451 justify-content: space-between;
432 align-items: center; 452 align-items: center;
433 .desL{ 453 .desL {
434 454 view {
435 view{ 455 margin: 10rpx 0 10rpx 0;
436 margin: 10rpx 0 10rpx 0 ; 456 }
437 } 457 }
438 }
439
440 } 458 }
441 .priceBox { 459 .priceBox {
442 display: flex; 460 display: flex;
443 justify-content: space-between; 461 justify-content: space-between;
444 align-items: center; 462 align-items: center;
445 // margin-top: 26px; 463 // margin-top: 26px;
446 width: 100%; 464 width: 100%;
447 font-size: 14px; 465 font-size: 14px;
448 color: #999999; 466 color: #999999;
449 .maxCount { 467 .maxCount {
450 color: #999999; 468 color: #999999;
451 font-size: 20rpx; 469 font-size: 20rpx;
452 } 470 }
453 .price { 471 .price {
454 color: #ff6b4a; 472 color: #ff6b4a;
455 font-size: 28rpx; 473 font-size: 28rpx;
456 } 474 }
457 .counter { 475 .counter {
458 display: flex; 476 display: flex;
459 flex-direction: row; 477 flex-direction: row;
460 justify-content: space-between; 478 justify-content: space-between;
461 align-items: center; 479 align-items: center;
462 font-size: 28rpx; 480 font-size: 28rpx;
463 color: #333333; 481 color: #333333;
464 width: 122rpx; 482 width: 122rpx;
465 .btn { 483 .btn {
466 display: flex; 484 display: flex;
467 justify-content: center; 485 justify-content: center;
468 line-height: 32rpx; 486 line-height: 32rpx;
469 height: 32rpx; 487 height: 32rpx;
470 width: 32rpx; 488 width: 32rpx;
471 background-color: #f2f2f2; 489 background-color: #f2f2f2;
472 color: #cfcfcf; 490 color: #cfcfcf;
473 } 491 }
474 } 492 }
475 } 493 }
476 } 494 }
477 } 495 }
478 } 496 }
479 } 497 }
480 .footer { 498 .footer {
481 position: fixed; 499 position: fixed;
482 left: 0; 500 left: 0;
483 bottom: 0px; 501 bottom: 0px;
484 height: 112rpx; 502 height: 112rpx;
485 width: 100%; 503 width: 100%;
486 background-color: #ffffff; 504 background-color: #ffffff;
487 font-size: 16px; 505 font-size: 16px;
488 display: flex; 506 display: flex;
489 justify-content: space-between; 507 justify-content: space-between;
490 align-items: center; 508 align-items: center;
491 .footerLeft { 509 .footerLeft {
492 display: flex; 510 display: flex;
493 justify-content: center; 511 justify-content: center;
494 align-items: center; 512 align-items: center;
495 width: 50%; 513 width: 50%;
496 color: #333333; 514 color: #333333;
497 text { 515 text {
498 color: #ff6b4a; 516 color: #ff6b4a;
499 } 517 }
500 } 518 }
501 .footerRight { 519 .footerRight {
502 display: flex; 520 display: flex;
503 justify-content: flex-end; 521 justify-content: flex-end;
504 align-items: center; 522 align-items: center;
505 width: 50%; 523 width: 50%;
506 margin-right: 26rpx; 524 margin-right: 26rpx;
507 .paybtn { 525 .paybtn {
508 display: flex; 526 display: flex;
509 justify-content: center; 527 justify-content: center;
510 align-items: center; 528 align-items: center;
511 background: #ff6b4a; 529 background: #ff6b4a;
512 border-radius: 20px; 530 border-radius: 20px;
513 border-radius: 20px; 531 border-radius: 20px;
514 color: #ffffff; 532 color: #ffffff;
515 width: 204rpx; 533 width: 204rpx;
516 height: 80rpx; 534 height: 80rpx;
517 } 535 }
518 } 536 }
519 } 537 }
520 } 538 }
521 /* 隐藏滚动条 */ 539 /* 隐藏滚动条 */
522 ::-webkit-scrollbar {
523 width: 0;
524 height: 0;
525 color: transparent;
src/pages/details/details.vue
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <!-- 基础信息 --> 3 <!-- 基础信息 -->
4 <view class="basic_info"> 4 <view class="basic_info">
5 <!-- 轮播图 --> 5 <!-- 轮播图 -->
6 <swiper 6 <swiper
7 class="swiperImage" 7 class="swiperImage"
8 :indicator-dots="true" 8 :indicator-dots="true"
9 :autoplay="true" 9 :autoplay="true"
10 :interval="4000" 10 :interval="4000"
11 :duration="500" 11 :duration="500"
12 > 12 >
13 <swiper-item 13 <swiper-item
14 v-for="(item, index) in carousel" 14 v-for="(item, index) in carousel"
15 :key="index" 15 :key="index"
16 > 16 >
17 <image 17 <image
18 :src="item" 18 :src="item"
19 mode="scaleToFill" 19 mode="scaleToFill"
20 ></image> 20 ></image>
21 </swiper-item> 21 </swiper-item>
22 </swiper> 22 </swiper>
23 <!-- 产品价格及购买人数 --> 23 <!-- 产品价格及购买人数 -->
24 <view class="info_pay"> 24 <view class="info_pay">
25 <view>¥{{goodsInfo.price || '暂无'}}<span 25 <view>¥{{goodsInfo.price || '暂无'}}<span
26 v-if="goodsInfo.discountPrice" 26 v-if="goodsInfo.discountPrice"
27 class="info_pay_discount" 27 class="info_pay_discount"
28 >¥{{goodsInfo.discountPrice}}</span></view> 28 >¥{{goodsInfo.discountPrice}}</span></view>
29 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> 29 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
30 </view> 30 </view>
31 <!-- 产品名称 --> 31 <!-- 产品名称 -->
32 <view class="info_name"> 32 <view class="info_name">
33 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> 33 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
34 <view 34 <view
35 @tap="confirmShare" 35 @tap="confirmShare"
36 class="info_name_share" 36 class="info_name_share"
37 > 37 >
38 <image src="/static/img/detail/share-icon.png"></image> 38 <image src="/static/img/detail/share-icon.png"></image>
39 <text>分享</text> 39 <text>分享</text>
40 </view> 40 </view>
41 </view> 41 </view>
42 <!-- 产品售后信息 --> 42 <!-- 产品售后信息 -->
43 <view class="info_after"> 43 <view class="info_after">
44 <span>支持7天无理由退货</span> 44 <span>支持7天无理由退货</span>
45 <span>顺丰发货</span> 45 <span>顺丰发货</span>
46 <span>30天质量保证</span> 46 <span>30天质量保证</span>
47 </view> 47 </view>
48 </view> 48 </view>
49 <!-- 详细信息 --> 49 <!-- 详细信息 -->
50 <view class="detail_info"> 50 <view class="detail_info">
51 <!-- 详细信息菜单 --> 51 <!-- 详细信息菜单 -->
52 <view class="screen_bar"> 52 <view class="screen_bar">
53 <view 53 <view
54 v-for="(item, index) in screenItems" 54 v-for="(item, index) in screenItems"
55 :key="index" 55 :key="index"
56 @click="tabChange(index)" 56 @click="tabChange(index)"
57 > 57 >
58 <view 58 <view
59 class="screen_item" 59 class="screen_item"
60 v-bind:class="{ item_active: item_current === index }" 60 v-bind:class="{ item_active: item_current === index }"
61 >{{ screenItems[index] || '暂无' }}</view> 61 >{{ screenItems[index] || '暂无' }}</view>
62 </view> 62 </view>
63 </view> 63 </view>
64 <!-- 商品介绍 --> 64 <!-- 商品介绍 -->
65 <view 65 <view
66 class="screen_item" 66 class="screen_item"
67 v-if="item_current === 0" 67 v-if="item_current === 0"
68 > 68 >
69 <Introduce :tag="tag" /> 69 <Introduce :tag="tag" />
70 </view> 70 </view>
71 <!-- 规格参数 --> 71 <!-- 规格参数 -->
72 <view 72 <view
73 class="screen_item" 73 class="screen_item"
74 v-if="item_current === 1" 74 v-if="item_current === 1"
75 > 75 >
76 <view class="specification"> 76 <view class="specification">
77 <view 77 <view
78 class="spe_item" 78 class="spe_item"
79 v-for="(item, index) in specification" 79 v-for="(item, index) in specification"
80 :key="index" 80 :key="index"
81 > 81 >
82 <image 82 <image
83 class="spe_image" 83 class="spe_image"
84 v-bind:src="item.img" 84 v-bind:src="item.img"
85 ></image> 85 ></image>
86 <span>{{item.standard || '暂无'}}</span> 86 <span>{{item.standard || '暂无'}}</span>
87 <span>{{item.slength || '暂无'}}</span> 87 <span>{{item.slength || '暂无'}}</span>
88 </view> 88 </view>
89 </view> 89 </view>
90 </view> 90 </view>
91 <!-- 售后保障 --> 91 <!-- 售后保障 -->
92 <view 92 <view
93 class="screen_item" 93 class="screen_item"
94 v-if="item_current === 2" 94 v-if="item_current === 2"
95 > 95 >
96 <AfterSails /> 96 <AfterSails />
97 </view> 97 </view>
98 </view> 98 </view>
99 <!-- 评价 --> 99 <!-- 评价 -->
100 <template v-if="item_current !== 2"> 100 <template v-if="item_current !== 2">
101 <view class="evaluate"> 101 <view class="evaluate">
102 <!-- 标题 --> 102 <!-- 标题 -->
103 <view class="evaluate_title"> 103 <view class="evaluate_title">
104 <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> 104 <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
105 <!-- 星星 --> 105 <!-- 星星 -->
106 <view class="evaluate_star"> 106 <view class="evaluate_star">
107 <view 107 <view
108 class="star" 108 class="star"
109 v-for="(item, index) in evaluate.star" 109 v-for="(item, index) in evaluate.star"
110 :key="index" 110 :key="index"
111 > 111 >
112 <image 112 <image
113 src="../../static/img/detail/d_star.png" 113 src="../../static/img/detail/d_star.png"
114 mode="aspectFill" 114 mode="aspectFill"
115 style="height: 26rpx; width: 28rpx;" 115 style="height: 26rpx; width: 28rpx;"
116 ></image> 116 ></image>
117 </view> 117 </view>
118 </view> 118 </view>
119 </view> 119 </view>
120 <!-- 标签 --> 120 <!-- 标签 -->
121 <view class="evaluate_tag"> 121 <view class="evaluate_tag">
122 <view 122 <view
123 v-for="(item, index) in evaluate.tag" 123 v-for="(item, index) in evaluate.tag"
124 :key="index" 124 :key="index"
125 >{{item.name}}</view> 125 >{{item.name}}</view>
126 </view> 126 </view>
127 </view> 127 </view>
128 </template> 128 </template>
129 <!-- 商品详情页 --> 129 <!-- 商品详情页 -->
130 <template v-if="current !==2"> 130 <template v-if="current !==2">
131 <view class="more_info"> 131 <view class="more_info">
132 <view 132 <view
133 class="more_fixed1" 133 class="more_fixed1"
134 @click="consolg(goodInfo.prodIntro1)" 134 @click="consolg(goodInfo.prodIntro1)"
135 > 135 >
136 <image src="/static/img/detail/hr.png"></image> 136 <image src="/static/img/detail/hr.png"></image>
137 <view>商品详情</view> 137 <view>商品详情</view>
138 <image src="/static/img/detail/hr.png"></image> 138 <image src="/static/img/detail/hr.png"></image>
139 </view> 139 </view>
140 <view 140 <view
141 class="more_all" 141 class="more_all"
142 v-html="more" 142 v-html="more"
143 > 143 >
144 </view> 144 </view>
145 </view> 145 </view>
146 </template> 146 </template>
147 <!-- 底部菜单 --> 147 <!-- 底部菜单 -->
148 <view class="menu"> 148 <view class="menu">
149 <view 149 <view
150 @tap="toCart()" 150 @tap="toCart()"
151 class="menu_1" 151 class="menu_1"
152 > 152 >
153 <view class="cart_icon"> 153 <view class="cart_icon">
154 <image src="/static/tab-cart.png" /> 154 <image src="/static/tab-cart.png" />
155 <text>{{cartNumber}}</text> 155 <text>{{cartNumber}}</text>
156 </view> 156 </view>
157 <view class="menu_image">购物车</view> 157 <view class="menu_image">购物车</view>
158 </view> 158 </view>
159 <view class="menu_2"> 159 <view class="menu_2">
160 <view 160 <view
161 class="menu_input" 161 class="menu_input"
162 @tap="showBottom(1)" 162 @tap="showBottom(1)"
163 >加入购物车</view> 163 >加入购物车</view>
164 <view 164 <view
165 class="menu_now" 165 class="menu_now"
166 @click="showBottom(2)" 166 @click="showBottom(2)"
167 >立即购买</view> 167 >立即购买</view>
168 </view> 168 </view>
169 </view> 169 </view>
170 <!-- 参数选择 --> 170 <!-- 参数选择 -->
171 <template v-if="isShowBottom"> 171 <template v-if="isShowBottom">
172 <BottomSheet 172 <BottomSheet
173 :isCart="isCart" 173 :isCart="isCart"
174 @addCart="addCart" 174 @addCart="addCart"
175 :pid="pid" 175 :pid="pid"
176 :goodInfo="goodInfo" 176 :goodInfo="goodInfo"
177 :isShowBottom="isShowBottom" 177 :isShowBottom="isShowBottom"
178 @closeBottom="closeBottom" 178 @closeBottom="closeBottom"
179 ></BottomSheet> 179 ></BottomSheet>
180 </template> 180 </template>
181 <!-- 分享 --> 181 <!-- 分享 -->
182 <template> 182 <template>
183 <uni-popup 183 <uni-popup
184 ref="popupShare" 184 ref="popupShare"
185 type="share" 185 type="share"
186 > 186 >
187 <uni-popup-share @select="selectShare"></uni-popup-share> 187 <uni-popup-share @select="selectShare"></uni-popup-share>
188 </uni-popup> 188 </uni-popup>
189 </template> 189 </template>
190 <!-- 分享海报 --> 190 <!-- 分享海报 -->
191 <template> 191 <template>
192 <uni-popup 192 <uni-popup
193 ref="uniPopupPost" 193 ref="uniPopupPost"
194 type="center" 194 type="center"
195 > 195 >
196 <uni-popup-post :postUrl="postUrl"></uni-popup-post> 196 <uni-popup-post :postUrl="postUrl"></uni-popup-post>
197 </uni-popup> 197 </uni-popup>
198 </template> 198 </template>
199 </view> 199 </view>
200 </template> 200 </template>
201 201
202 <script> 202 <script>
203 import store from '@/store' 203 import store from '@/store'
204 import Introduce from './components/Introduce' // 商品介绍基本信息组件 204 import Introduce from './components/Introduce' // 商品介绍基本信息组件
205 import AfterSails from './components/AfterSails' // 售后保障组件 205 import AfterSails from './components/AfterSails' // 售后保障组件
206 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 206 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
207 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 207 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
208 import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 208 import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
209 209
210 export default { 210 export default {
211 components: { 211 components: {
212 Introduce, 212 Introduce,
213 AfterSails, 213 AfterSails,
214 BottomSheet, 214 BottomSheet,
215 uniPopupShare, 215 uniPopupShare,
216 uniPopupPost, 216 uniPopupPost,
217 }, 217 },
218 data () { 218 data () {
219 return { 219 return {
220 pid: 7, // 产品ID 220 pid: 7, // 产品ID
221 skId: undefined, // skuId 221 skId: undefined, // skuId
222 // 详细信息菜单 222 // 详细信息菜单
223 item_current: 0, 223 item_current: 0,
224 screenItems: [ 224 screenItems: [
225 '商品介绍', 225 '商品介绍',
226 '规格参数', 226 '规格参数',
227 '售后保障', 227 '售后保障',
228 ], 228 ],
229 showPostImg: false, // 是否展示分享海报 229 showPostImg: false, // 是否展示分享海报
230 isShowBottom: false, // 是否展示参数选择 230 isShowBottom: false, // 是否展示参数选择
231 isCart: 1, // 参数选择 按钮判断 231 isCart: 1, // 参数选择 按钮判断
232 } 232 }
233 }, 233 },
234 onLoad({ pid = this.pid, sk_id: skId }) { 234 onLoad({ pid = this.pid, sk_id: skId }) {
235 // 根据页面传参请求页面数据 235 // 根据页面传参请求页面数据
236 this.pid = pid 236 this.pid = pid
237 this.skId = skId 237 this.skId = skId
238 238
239 // 获取产品详情 239 // 获取产品详情
240 this.getDetails({ pid, skId }) 240 this.getDetails({ pid, skId })
241 // 获取购物车数据 241 // 获取购物车数据
242 this.getCartNum() 242 this.getCartNum()
243 }, 243 },
244 computed: { 244 computed: {
245 // 获取轮播图数据 245 // 获取轮播图数据
246 goodInfo() { 246 goodInfo() {
247 return this.$store.state.details.goodInfo 247 return this.$store.state.details.goodInfo
248 }, 248 },
249 // 获取轮播图数据 249 // 获取轮播图数据
250 carousel() { 250 carousel() {
251 return this.$store.state.details.carousel 251 return this.$store.state.details.carousel
252 }, 252 },
253 // 商品基本信息 253 // 商品基本信息
254 goodsInfo() { 254 goodsInfo() {
255 return this.$store.state.details.goodsInfo 255 return this.$store.state.details.goodsInfo
256 }, 256 },
257 // 商品介绍商品标签 257 // 商品介绍商品标签
258 tag() { 258 tag() {
259 return this.$store.state.details.tag 259 return this.$store.state.details.tag
260 }, 260 },
261 // 规格参数 261 // 规格参数
262 specification() { 262 specification() {
263 return this.$store.state.details.specification 263 return this.$store.state.details.specification
264 }, 264 },
265 // 评价 265 // 评价
266 evaluate() { 266 evaluate() {
267 return this.$store.state.details.evaluate 267 return this.$store.state.details.evaluate
268 }, 268 },
269 // 商品详情 269 // 商品详情
270 more() { 270 more() {
271 return this.$store.state.details.more 271 return this.$store.state.details.more
272 }, 272 },
273 // 购物车数目 273 // 购物车数目
274 cartNumber() { 274 cartNumber() {
275 return this.$store.state.details.cartNumber 275 return this.$store.state.details.cartNumber
276 }, 276 },
277 // 购物车数目 277 // 购物车数目
278 skuList() { 278 skuList() {
279 return this.$store.state.details.skuList 279 return this.$store.state.details.skuList
280 }, 280 },
281 // 分享海报 281 // 分享海报
282 postUrl() { 282 postUrl() {
283 return this.$store.state.details.postUrl 283 return this.$store.state.details.postUrl
284 }, 284 },
285 }, 285 },
286 methods: { 286 methods: {
287 // 获取产品详情 287 // 获取产品详情
288 getDetails({ pid, skId }) { 288 getDetails({ pid, skId }) {
289 store.dispatch('details/details', { 289 store.dispatch('details/details', {
290 pid, 290 pid,
291 sk_id: skId, 291 sk_id: skId,
292 }) 292 })
293 store.dispatch('read/fetch', { 293 store.dispatch('read/fetch', {
294 pid, 294 pid,
295 sk_id: skId, 295 sk_id: skId,
296 }) 296 })
297 }, 297 },
298 // 获取购物车数目 298 // 获取购物车数目
299 getCartNum() { 299 getCartNum() {
300 store.dispatch('details/getCartNumber') 300 store.dispatch('details/getCartNumber')
301 }, 301 },
302 // 切换详细信息菜单 302 // 切换详细信息菜单
303 tabChange (e) { 303 tabChange (e) {
304 if (this.current !== e) { 304 if (this.current !== e) {
305 this.item_current = e 305 this.item_current = e
306 } 306 }
307 }, 307 },
308 // 打开分享界面 308 // 打开分享界面
309 confirmShare() { 309 confirmShare() {
310 this.$refs.popupShare.open() 310 this.$refs.popupShare.open()
311 }, 311 },
312 // 选择分享 312 // 选择分享
313 selectShare(e, done) { 313 selectShare(e, done) {
314 switch (e.item.name) { 314 switch (e.item.name) {
315 // 分享到好物圈 315 // 分享到好物圈
316 case 'recommend': 316 case 'recommend':
317 this.shareRecommend() 317 this.shareRecommend()
318 break 318 break
319 // 分享到朋友圈 319 // 分享到朋友圈
320 case 'friend': 320 case 'friend':
321 break 321 break
322 // 生成海报 322 // 生成海报
323 case 'poster': 323 case 'poster':
324 uni.showLoading({ 324 uni.showLoading({
325 title: '生成图片中', 325 title: '生成图片中',
326 }) 326 })
327 this.sharePost() 327 this.sharePost()
328 break 328 break
329 default: 329 default:
330 break 330 break
331 } 331 }
332 done() 332 done()
333 }, 333 },
334 // 分享到好物圈 334 // 分享到好物圈
335 shareRecommend() { 335 shareRecommend() {
336 if (wx.openBusinessView) { 336 if (wx.openBusinessView) {
337 wx.openBusinessView({ 337 wx.openBusinessView({
338 businessType: 'friendGoodsRecommend', 338 businessType: 'friendGoodsRecommend',
339 extraData: { 339 extraData: {
340 product: { 340 product: {
341 item_code: '58_68', 341 item_code: '58_68',
342 title: this.goodsInfo.name, 342 title: this.goodsInfo.name,
343 image_list: this.carousel, 343 image_list: this.carousel,
344 }, 344 },
345 }, 345 },
346 success: function (res) { 346 success: function (res) {
347 uni.showToast({ 347 uni.showToast({
348 title: '好物圈分享成功!', 348 title: '好物圈分享成功!',
349 icon: 'none', 349 icon: 'none',
350 duration: 2000, 350 duration: 2000,
351 }) 351 })
352 // 向服务器报告这个事情 352 // 向服务器报告这个事情
353 // TODO:::记录这个用户的推广过程。 353 // TODO:::记录这个用户的推广过程。
354 console.log('好物圈分享成功!', res) 354 console.log('好物圈分享成功!', res)
355 }, 355 },
356 fail: function (res) { 356 fail: function (res) {
357 console.log('好物圈分享失败!', res) 357 console.log('好物圈分享失败!', res)
358 }, 358 },
359 }) 359 })
360 } 360 }
361 }, 361 },
362 // 分享到朋友/圈 362 // 分享到朋友/圈
363 shareFriend() { 363 shareFriend() {
364 this.onShareAppMessage() 364 this.onShareAppMessage()
365 }, 365 },
366 // 朋友圈设置页面 366 // 朋友圈设置页面
367 onShareAppMessage() { 367 onShareAppMessage() {
368 let myName = this.$store.state.user.userInfo.nickName 368 let myName = this.$store.state.user.userInfo.nickName
369 if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { 369 if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
370 myName = '【神秘人】' 370 myName = '【神秘人】'
371 } else { 371 } else {
372 myName = '【' + myName + '】' 372 myName = '【' + myName + '】'
373 } 373 }
374 const uid = uni.getStorageSync('uid')
375 return { 374 return {
376 title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等) 375 title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等)
377 path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, 376 path: '/pages/details/details?sid=0&pid=' + this.pid,
378 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 377 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
379 success: function (res) { 378 success: function (res) {
380 if (res.errMsg === 'shareAppMessage:ok') { 379 if (res.errMsg === 'shareAppMessage:ok') {
381 console.log('分享成功!', res) 380 console.log('分享成功!', res)
382 } 381 }
383 }, 382 },
384 fail: function (res) { 383 fail: function (res) {
385 if (res.errMsg === 'shareAppMessage:fail cancel') { 384 if (res.errMsg === 'shareAppMessage:fail cancel') {
386 console.log('fail', '放弃分享') 385 console.log('fail', '放弃分享')
387 } else if (res.errMsg === 'shareAppMessage:fail') { 386 } else if (res.errMsg === 'shareAppMessage:fail') {
388 console.log('fail', '分享失败') 387 console.log('fail', '分享失败')
389 } 388 }
390 }, 389 },
391 } 390 }
392 }, 391 },
393 // 生成海报 392 // 生成海报
394 sharePost() { 393 sharePost() {
395 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' 394 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
396 395
397 store.dispatch('details/post', { 396 store.dispatch('details/post', {
398 pid: this.pid, 397 pid: this.pid,
399 sid: fromsid === 'undefined' ? 0 : fromsid, 398 sid: fromsid === 'undefined' ? 0 : fromsid,
400 }).then((data) => { 399 }).then((data) => {
401 uni.hideLoading() 400 uni.hideLoading()
402 this.$refs.uniPopupPost.open() 401 this.$refs.uniPopupPost.open()
403 }) 402 })
404 }, 403 },
405 // 参数选择弹窗开关 404 // 参数选择弹窗开关
406 showBottom(isCart) { 405 showBottom(isCart) {
407 this.isCart = isCart 406 this.isCart = isCart
408 this.isShowBottom = true 407 this.isShowBottom = true
409 }, 408 },
410 closeBottom() { 409 closeBottom() {
411 this.isShowBottom = false 410 this.isShowBottom = false
412 }, 411 },
413 // 前往购物车 412 // 前往购物车
414 toCart() { 413 toCart() {
415 uni.switchTab({ 414 uni.switchTab({
416 url: '/pages/cart/cart', 415 url: '/pages/cart/cart',
417 success: res => {}, 416 success: res => {},
418 fail: (error) => { console.log('跳转购物车失败======>', error) }, 417 fail: (error) => { console.log('跳转购物车失败======>', error) },
419 complete: () => { console.log('toCart') }, 418 complete: () => { console.log('toCart') },
420 }) 419 })
421 }, 420 },
422 // 加入购物车 421 // 加入购物车
423 addCart (mpId, num, checkedSKU, skId, price) { 422 addCart (mpId, num, checkedSKU, skId, price) {
424 const addCartList = {} 423 const addCartList = {}
425 addCartList.mp_id = mpId 424 addCartList.mp_id = mpId
426 addCartList.sk_id = skId 425 addCartList.sk_id = skId
427 addCartList.num = num 426 addCartList.num = num
428 addCartList.checkedSKU = checkedSKU 427 addCartList.checkedSKU = checkedSKU
429 addCartList.pid = this.pid 428 addCartList.pid = this.pid
430 addCartList.price = price 429 addCartList.price = price
431 console.log('添加购物车的参数', addCartList) 430 console.log('添加购物车的参数', addCartList)
432 store.dispatch('cart/addCart', addCartList).then((res) => { 431 store.dispatch('cart/addCart', addCartList).then((res) => {
433 if (res.code === 1) { 432 if (res.code === 1) {
434 uni.showToast({ 433 uni.showToast({
435 title: '添加成功~', 434 title: '添加成功~',
436 icon: 'success', 435 icon: 'success',
437 }) 436 })
438 } 437 }
439 // 再次请求购物车接口,实现实时更新 438 // 再次请求购物车接口,实现实时更新
440 store.dispatch('details/getCartNumber') 439 store.dispatch('details/getCartNumber')
441 }) 440 })
442 }, 441 },
443 }, 442 },
444 } 443 }
445 </script> 444 </script>
446 445
447 <style lang="scss"> 446 <style lang="scss">
448 .container { 447 .container {
449 background-color: #f8f8f8; 448 background-color: #f8f8f8;
450 font-family: "PingFangSC-Regular"; 449 font-family: "PingFangSC-Regular";
451 // 板块样式 450 // 板块样式
452 > view { 451 > view {
453 background: #ffffff; 452 background: #ffffff;
454 margin-bottom: 10px; 453 margin-bottom: 10px;
455 padding: 8px 20px 8px 20px; 454 padding: 8px 20px 8px 20px;
456 box-sizing: border-box; 455 box-sizing: border-box;
457 } 456 }
458 // 基础信息板块 457 // 基础信息板块
459 .basic_info { 458 .basic_info {
460 // 轮播图 459 // 轮播图
461 .swiperImage { 460 .swiperImage {
462 width: 684rpx; 461 width: 684rpx;
463 height: 480rpx; 462 height: 480rpx;
463 text-align: center;
464 image { 464 image {
465 max-width: 100%; 465 max-width: 100%;
466 max-height: 100%; 466 max-height: 100%;
467 border-radius: 16rpx; 467 border-radius: 16rpx;
468 } 468 }
469 } 469 }
470 // 产品价格及购买人数 470 // 产品价格及购买人数
471 .info_pay { 471 .info_pay {
472 color: #eb5d3b; 472 color: #eb5d3b;
473 font-size: 18px; 473 font-size: 18px;
474 margin-top: 5px; 474 margin-top: 5px;
475 font-family: "PingFangSC-Semibold"; 475 font-family: "PingFangSC-Semibold";
476 display: flex; 476 display: flex;
477 justify-content: space-between; 477 justify-content: space-between;
478 .info_pay_discount { 478 .info_pay_discount {
479 text-decoration: line-through; 479 text-decoration: line-through;
480 margin-left: 8rpx; 480 margin-left: 8rpx;
481 color: #999; 481 color: #999;
482 font-size: 14px; 482 font-size: 14px;
483 } 483 }
484 .info_pay_number { 484 .info_pay_number {
485 color: #999; 485 color: #999;
486 font-size: 14px; 486 font-size: 14px;
487 font-family: PingFangSC-Regular; 487 font-family: PingFangSC-Regular;
488 } 488 }
489 } 489 }
490 // 产品名称 490 // 产品名称
491 .info_name { 491 .info_name {
492 margin-top: 5px; 492 margin-top: 5px;
493 display: flex; 493 display: flex;
494 justify-content: space-between; 494 justify-content: space-between;
495 .info_name_name { 495 .info_name_name {
496 margin-right: 10px; 496 margin-right: 10px;
497 font-size: 16px; 497 font-size: 16px;
498 font-family: "PingFangSC-Semibold"; 498 font-family: "PingFangSC-Semibold";
499 max-width: 592rpx; 499 max-width: 592rpx;
500 } 500 }
501 .info_name_share { 501 .info_name_share {
502 display: flex; 502 display: flex;
503 flex-direction: column; 503 flex-direction: column;
504 justify-content: space-between; 504 justify-content: space-between;
505 align-items: center; 505 align-items: center;
506 margin-top: 14rpx; 506 margin-top: 14rpx;
507 > image { 507 > image {
508 height: 40rpx; 508 height: 40rpx;
509 width: 40rpx; 509 width: 40rpx;
510 } 510 }
511 > text { 511 > text {
512 font-family: PingFangSC-Regular; 512 font-family: PingFangSC-Regular;
513 font-size: 12px; 513 font-size: 12px;
514 color: #999; 514 color: #999;
515 letter-spacing: -0.23px; 515 letter-spacing: -0.23px;
516 } 516 }
517 } 517 }
518 } 518 }
519 // 售后服务 519 // 售后服务
520 .info_after { 520 .info_after {
521 font-size: 10px; 521 font-size: 10px;
522 color: #999; 522 color: #999;
523 margin-top: 20rpx; 523 margin-top: 20rpx;
524 > span { 524 > span {
525 height: 14px; 525 height: 14px;
526 margin-right: 10px; 526 margin-right: 10px;
527 } 527 }
528 } 528 }
529 } 529 }
530 // 详细信息 530 // 详细信息
531 .detail_info { 531 .detail_info {
532 margin-bottom: 20rpx; 532 margin-bottom: 20rpx;
533 .screen_bar { 533 .screen_bar {
534 width: 670rpx; 534 width: 670rpx;
535 margin-top: 20rpx; 535 margin-top: 20rpx;
536 margin-bottom: 24rpx; 536 margin-bottom: 24rpx;
537 display: flex; 537 display: flex;
538 flex-direction: row; 538 flex-direction: row;
539 justify-content: space-between; 539 justify-content: space-between;
540 align-items: center; 540 align-items: center;
541 font-size: 14px; 541 font-size: 14px;
542 color: #333333; 542 color: #333333;
543 transition: all 0.2s; 543 transition: all 0.2s;
544 } 544 }
545 .item_active { 545 .item_active {
546 border-bottom: 4rpx solid #ff6b4a; 546 border-bottom: 4rpx solid #ff6b4a;
547 } 547 }
548 .screen_item { 548 .screen_item {
549 font-size: 32rpx; 549 font-size: 32rpx;
550 color: #333333; 550 color: #333333;
551 display: flex; 551 display: flex;
552 transition: all 0.2s; 552 transition: all 0.2s;
553 // 规格参数 553 // 规格参数
554 .specification { 554 .specification {
555 margin-bottom: 4px; 555 margin-bottom: 4px;
556 .spe_item { 556 .spe_item {
557 image { 557 image {
558 width: 50px; 558 width: 50px;
559 height: 25px; 559 height: 25px;
560 margin-right: 6px; 560 margin-right: 6px;
561 vertical-align: middle; 561 vertical-align: middle;
562 } 562 }
563 span { 563 span {
564 margin-left: 24rpx; 564 margin-left: 24rpx;
565 } 565 }
566 } 566 }
567 } 567 }
568 } 568 }
569 // 569 //
570 } 570 }
571 // 宝贝好评率 571 // 宝贝好评率
572 .evaluate { 572 .evaluate {
573 .evaluate_title { 573 .evaluate_title {
574 font-size: 14px; 574 font-size: 14px;
575 color: #333333; 575 color: #333333;
576 display: flex; 576 display: flex;
577 justify-content: space-between; 577 justify-content: space-between;
578 .title_rate { 578 .title_rate {
579 margin-left: 10rpx; 579 margin-left: 10rpx;
580 } 580 }
581 .evaluate_star { 581 .evaluate_star {
582 width: 90px; 582 width: 90px;
583 display: flex; 583 display: flex;
584 align-items: center; 584 align-items: center;
585 justify-content: space-between; 585 justify-content: space-between;
586 } 586 }
587 view { 587 view {
588 font-size: 14px; 588 font-size: 14px;
589 color: #333333; 589 color: #333333;
590 font-weight: bold; 590 font-weight: bold;
591 } 591 }
592 } 592 }
593 .evaluate_tag { 593 .evaluate_tag {
594 view { 594 view {
595 display: inline-block; 595 display: inline-block;
596 margin-right: 20rpx; 596 margin-right: 20rpx;
597 min-width: 180rpx; 597 min-width: 180rpx;
598 margin-top: 10px; 598 margin-top: 10px;
599 height: 48rpx; 599 height: 48rpx;
600 background: #f2f2f2; 600 background: #f2f2f2;
601 border-radius: 2px; 601 border-radius: 2px;
602 font-family: PingFangSC-Regular; 602 font-family: PingFangSC-Regular;
603 font-size: 12px; 603 font-size: 12px;
604 color: #666666; 604 color: #666666;
605 letter-spacing: -0.23px; 605 letter-spacing: -0.23px;
606 text-align: center; 606 text-align: center;
607 padding: 0 48rpx; 607 padding: 0 48rpx;
608 line-height: 48rpx; 608 line-height: 48rpx;
609 } 609 }
610 } 610 }
611 } 611 }
612 // 商品详情 612 // 商品详情
613 .more_info { 613 .more_info {
614 .more_fixed1 { 614 .more_fixed1 {
615 display: flex; 615 display: flex;
616 justify-content: space-between; 616 justify-content: space-between;
617 align-content: center; 617 align-content: center;
618 margin-bottom: 12px; 618 margin-bottom: 12px;
619 view { 619 view {
620 font-size: 14px; 620 font-size: 14px;
621 color: #333333; 621 color: #333333;
622 font-weight: bold; 622 font-weight: bold;
623 font-family: "PingFangSC-Medium"; 623 font-family: "PingFangSC-Medium";
624 line-height: 24px; 624 line-height: 24px;
625 } 625 }
626 image { 626 image {
627 width: 240rpx; 627 width: 240rpx;
628 height: 3px; 628 height: 3px;
629 margin-top: 10px; 629 margin-top: 10px;
630 } 630 }
631 } 631 }
632 .more_all { 632 .more_all {
633 width: 100%; 633 width: 100%;
634 margin-top: 30rpx; 634 margin-top: 30rpx;
635 margin-right: 30rpx; 635 margin-right: 30rpx;
636 margin-bottom: 180rpx; 636 margin-bottom: 180rpx;
637 font-family: "PingFangSC-Regular"; 637 font-family: "PingFangSC-Regular";
638 } 638 }
639 } 639 }
640 // 菜单 640 // 菜单
641 .menu { 641 .menu {
642 position: fixed; 642 position: fixed;
643 bottom: 0; 643 bottom: 0;
644 min-height: 74px; 644 min-height: 74px;
645 width: 100%; 645 width: 100%;
646 background: #ffffff; 646 background: #ffffff;
647 padding: 20px 20px 8px 20px; 647 padding: 20px 20px 8px 20px;
648 font-family: "PingFangSC-Regular"; 648 font-family: "PingFangSC-Regular";
649 box-sizing: border-box; 649 box-sizing: border-box;
650 display: flex; 650 display: flex;
651 justify-content: space-between; 651 justify-content: space-between;
652 align-content: center; 652 align-content: center;
653 margin: 0; 653 margin: 0;
654 /* iphonex 等安全区设置,底部安全区适配 */ 654 /* iphonex 等安全区设置,底部安全区适配 */
655 /* #ifndef APP-NVUE */ 655 /* #ifndef APP-NVUE */
656 padding-bottom: constant(safe-area-inset-bottom); 656 padding-bottom: constant(safe-area-inset-bottom);
657 padding-bottom: env(safe-area-inset-bottom); 657 padding-bottom: env(safe-area-inset-bottom);
658 .menu_1 { 658 .menu_1 {
659 width: 20%; 659 width: 20%;
660 height: 100%; 660 height: 100%;
661 text-align: center; 661 text-align: center;
662 color: #989898; 662 color: #989898;
663 .cart_icon { 663 .cart_icon {
664 position: relative; 664 position: relative;
665 text { 665 text {
666 position: absolute; 666 position: absolute;
667 color: white; 667 color: white;
668 font-size: 17px; 668 font-size: 17px;
669 background-color: red; 669 background-color: red;
670 min-height: 24px; 670 min-height: 24px;
671 min-width: 24px; 671 min-width: 24px;
672 line-height: 24px; 672 line-height: 24px;
673 right: -12%; 673 right: -12%;
674 top: -12px; 674 top: -12px;
675 text-align: center; 675 text-align: center;
676 border-radius: 24px; 676 border-radius: 24px;
677 padding: 2px; 677 padding: 2px;
678 } 678 }
679 } 679 }
680 } 680 }
681 image { 681 image {
682 width: 42%; 682 width: 42%;
683 height: 26px; 683 height: 26px;
684 } 684 }
685 .menu_image { 685 .menu_image {
686 font-size: 12px; 686 font-size: 12px;
687 text-align: center; 687 text-align: center;
688 } 688 }
689 .menu_2 { 689 .menu_2 {
690 width: 74%; 690 width: 74%;
691 height: 80rpx; 691 height: 80rpx;
692 display: grid; 692 display: grid;
693 grid-template-columns: 50% 50%; 693 grid-template-columns: 50% 50%;
694 } 694 }
695 .menu_input { 695 .menu_input {
696 display: inline-flex; 696 display: inline-flex;
697 align-items: center; 697 align-items: center;
698 justify-content: space-around; 698 justify-content: space-around;
699 background: #fff0ec; 699 background: #fff0ec;
700 font-size: 16px; 700 font-size: 16px;
701 color: #ff6b4a; 701 color: #ff6b4a;
702 border-radius: 20px 0 0 20px; 702 border-radius: 20px 0 0 20px;
703 } 703 }
704 .menu_now { 704 .menu_now {
705 display: inline-flex; 705 display: inline-flex;
706 align-items: center; 706 align-items: center;
707 justify-content: space-around; 707 justify-content: space-around;
708 background: #ff6b4a; 708 background: #ff6b4a;
709 font-size: 16px; 709 font-size: 16px;
710 color: #ffffff; 710 color: #ffffff;
711 border-radius: 0 20px 20px 0; 711 border-radius: 0 20px 20px 0;
712 } 712 }
713 } 713 }
714 } 714 }
715 </style> 715 </style>
src/pages/index/index.vue
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view 3 <view
4 class="content skeleton" 4 class="content skeleton"
5 v-show="showContent" 5 v-show="showContent"
6 > 6 >
7 <view class="header"> 7 <view class="header">
8 <!-- 搜索--> 8 <!-- 搜索-->
9 <view class="searchBar skeleton-rect"> 9 <view class="searchBar skeleton-rect">
10 <icon 10 <icon
11 class="searchIcon" 11 class="searchIcon"
12 type="search" 12 type="search"
13 size="14" 13 size="14"
14 ></icon> 14 ></icon>
15 <input 15 <input
16 v-model="searchText" 16 v-model="searchText"
17 class="searchIpt" 17 class="searchIpt"
18 placeholder="老花镜" 18 placeholder="老花镜"
19 confirm-type="search" 19 confirm-type="search"
20 @blur="searchKey" 20 @blur="searchKey"
21 /> 21 />
22 </view> 22 </view>
23 23
24 <!-- 筛选栏--> 24 <!-- 筛选栏-->
25 <!-- <view class="screenBar"> 25 <!-- <view class="screenBar">
26 <view 26 <view
27 v-for="item in screenItems" 27 v-for="item in screenItems"
28 :key="item.current" 28 :key="item.current"
29 @click="onClickItem(item.current)" 29 @click="onClickItem(item.current)"
30 > 30 >
31 <view 31 <view
32 class="screenItem" 32 class="screenItem"
33 v-bind:class="{ active: current === item.current }" 33 v-bind:class="{ active: current === item.current }"
34 v-if="item.current === 2" 34 v-if="item.current === 2"
35 @click="dropDown" 35 @click="dropDown"
36 > 36 >
37 {{ item.text }} 37 {{ item.text }}
38 <icon 38 <icon
39 type="info" 39 type="info"
40 size="14" 40 size="14"
41 ></icon> 41 ></icon>
42 </view> 42 </view>
43 <view 43 <view
44 class="screenItem" 44 class="screenItem"
45 v-bind:class="{ active: current === item.current }" 45 v-bind:class="{ active: current === item.current }"
46 v-if="item.current === 4" 46 v-if="item.current === 4"
47 @click="showDrawer('showRight')" 47 @click="showDrawer('showRight')"
48 > 48 >
49 {{ item.text }} 49 {{ item.text }}
50 <icon 50 <icon
51 type="info" 51 type="info"
52 size="14" 52 size="14"
53 ></icon> 53 ></icon>
54 </view> 54 </view>
55 <view v-if="item.current !== 2&&item.current!==4"> 55 <view v-if="item.current !== 2&&item.current!==4">
56 <view 56 <view
57 class="screenItem" 57 class="screenItem"
58 v-bind:class="{ active: current === item.current }" 58 v-bind:class="{ active: current === item.current }"
59 >{{ item.text }}</view> 59 >{{ item.text }}</view>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> --> 62 </view> -->
63 </view> 63 </view>
64 <Uni-drawer 64 <Uni-drawer
65 ref="showRight" 65 ref="showRight"
66 mask="true" 66 mask="true"
67 maskClick="true" 67 maskClick="true"
68 mode="right" 68 mode="right"
69 :width="320" 69 :width="320"
70 @change="change($event,'showRight')" 70 @change="change($event,'showRight')"
71 > 71 >
72 <view class="close"> 72 <view class="close">
73 <view @click="closeDrawer('showRight')"> 73 <view @click="closeDrawer('showRight')">
74 <text class="word-btn-white">关闭</text> 74 <text class="word-btn-white">关闭</text>
75 </view> 75 </view>
76 </view> 76 </view>
77 </Uni-drawer> 77 </Uni-drawer>
78 78
79 <!-- 筛选菜单--> 79 <!-- 筛选菜单-->
80 <view class="content-wrap skeleton-rect"> 80 <view class="content-wrap skeleton-rect">
81 <view> 81 <view>
82 <HMfilterDropdown 82 <HMfilterDropdown
83 :filterData="categoryList" 83 :filterData="categoryList"
84 :defaultSelected="filterDropdownValue" 84 :defaultSelected="filterDropdownValue"
85 :updateMenuName="true" 85 :updateMenuName="true"
86 @search="search" 86 @search="search"
87 @getList="getList" 87 @getList="getList"
88 data-format="Object" 88 data-format="Object"
89 ></HMfilterDropdown> 89 ></HMfilterDropdown>
90 <!-- 商品列表 --> 90 <!-- 商品列表 -->
91 <!-- <scroll-view 91 <!-- <scroll-view
92 enable-flex 92 enable-flex
93 @scrolltolower="handleScrolltolower" 93 @scrolltolower="handleScrolltolower"
94 scroll-y 94 scroll-y
95 style="height: 1000px;margin-bottom: 20px;" 95 style="height: 1000px;margin-bottom: 20px;"
96 > --> 96 > -->
97 <view class="goods-list"> 97 <view class="goods-list">
98 <view class="product-list"> 98 <view class="product-list">
99 <view 99 <view
100 class="product skeleton-rect" 100 class="product skeleton-rect"
101 v-for="(goods) in goodsList" 101 v-for="(goods) in goodsList"
102 :key="goods.id" 102 :key="goods.id"
103 > 103 >
104 <Card 104 <Card
105 :goods="goods" 105 :goods="goods"
106 :scrollTop="scrollTop" 106 :scrollTop="scrollTop"
107 :viewHeight="viewHeight" 107 :viewHeight="viewHeight"
108 ></Card> 108 ></Card>
109 </view> 109 </view>
110 </view> 110 </view>
111 <view class="loading-text"> 111 <view class="loading-text">
112 <text v-if="isLoading==true">{{loadingText}}</text> 112 <text v-if="isLoading==true">{{loadingText}}</text>
113 <text v-else>{{loadedText}}</text> 113 <text v-else>{{loadedText}}</text>
114 </view> 114 </view>
115 </view> 115 </view>
116 <!-- </scroll-view> --> 116 <!-- </scroll-view> -->
117 </view> 117 </view>
118 </view> 118 </view>
119 </view> 119 </view>
120 <!--引用组件--> 120 <!--引用组件-->
121 <skeleton 121 <skeleton
122 :show="showSkeleton" 122 :show="showSkeleton"
123 ref="skeleton" 123 ref="skeleton"
124 loading="chiaroscuro" 124 loading="chiaroscuro"
125 selector="skeleton" 125 selector="skeleton"
126 bgcolor="#FFF" 126 bgcolor="#FFF"
127 ></skeleton> 127 ></skeleton>
128 </view> 128 </view>
129 </template> 129 </template>
130 130
131 <script> 131 <script>
132 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 132 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
133 import Card from '@/components/CommodityCard/CommodityCard.vue' 133 import Card from '@/components/CommodityCard/CommodityCard.vue'
134 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 134 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
135 import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' 135 import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'
136 import store from '@/store' 136 import store from '@/store'
137 137
138 export default { 138 export default {
139 components: { 139 components: {
140 UniDrawer: UniDrawer, 140 UniDrawer: UniDrawer,
141 HMfilterDropdown: HMfilterDropdown, 141 HMfilterDropdown: HMfilterDropdown,
142 Card: Card, 142 Card: Card,
143 skeleton: skeleton, 143 skeleton: skeleton,
144 }, 144 },
145 data() { 145 data() {
146 return { 146 return {
147 indexArr: '', 147 indexArr: '',
148 valueArr: '', 148 valueArr: '',
149 isLoading: true, // 初始化加载状态 149 isLoading: true, // 初始化加载状态
150 loadingText: 'data loading...', 150 loadingText: 'data loading...',
151 loadedText: '~~暂无更多数据~~', 151 loadedText: '~~暂无更多数据~~',
152 filterDropdownValue: [], 152 filterDropdownValue: [],
153 filterData: [], 153 filterData: [],
154 searchText: '', 154 searchText: '',
155 scrollTop: 0, 155 scrollTop: 0,
156 showContent: true, 156 showContent: true,
157 viewHeight: uni.getSystemInfoSync().windowHeight, 157 viewHeight: uni.getSystemInfoSync().windowHeight,
158 showSkeleton: false, // 骨架屏显示隐藏 158 showSkeleton: false, // 骨架屏显示隐藏
159 } 159 }
160 }, 160 },
161 onPageScroll({ scrollTop }) { 161 onPageScroll({ scrollTop }) {
162 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 162 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
163 this.scrollTop = scrollTop 163 this.scrollTop = scrollTop
164 }, 164 },
165 computed: { 165 computed: {
166 goodsList() { 166 goodsList() {
167 // 也可以从 getters 获取 167 // 也可以从 getters 获取
168 // console.log('index-list=====>',this.$store.state.index.list) 168 // console.log('index-list=====>',this.$store.state.index.list)
169 const list = this.$store.state.index.list 169 const list = this.$store.state.index.list
170 if (list.length == 0) { 170 if (list.length == 0) {
171 this.isLoading = false 171 this.isLoading = false
172 } 172 }
173 this.scrollTop = 0.1 173 this.scrollTop = 0.1
174 return list 174 return list
175 }, 175 },
176 categoryList() { 176 categoryList() {
177 return this.$store.state.index.categoryList 177 return this.$store.state.index.categoryList
178 }, 178 },
179 }, 179 },
180 filters: { 180 filters: {
181 outData(value) { 181 outData(value) {
182 return JSON.stringify(value) 182 return JSON.stringify(value)
183 }, 183 },
184 }, 184 },
185 /** 185 /**
186 * 页面载入完成后调用子组件的方法生成预加载效果 186 * 页面载入完成后调用子组件的方法生成预加载效果
187 */ 187 */
188 onReady: function() { 188 onReady: function() {
189 this.getInitData() 189 this.getInitData()
190 }, 190 },
191 methods: { 191 methods: {
192 async getInitData () { 192 async getInitData () {
193 this.showSkeleton = true 193 this.showSkeleton = true
194 await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) 194 await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])
195 this.showSkeleton = false 195 this.showSkeleton = false
196 this.showContent = true 196 this.showContent = true
197 }, 197 },
198 showDrawer(e) { 198 showDrawer(e) {
199 this.$refs[e].open() 199 this.$refs[e].open()
200 }, 200 },
201 // 朋友圈设置页面
202 onShareAppMessage() {
203 let myName = this.$store.state.user.userInfo.nickName
204 if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
205 myName = '【神秘人】'
206 } else {
207 myName = '【' + myName + '】'
208 }
209 return {
210 title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等)
211 path: '/pages/index/index',
212 // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
213 success: function (res) {
214 if (res.errMsg === 'shareAppMessage:ok') {
215 console.log('分享成功!', res)
216 }
217 },
218 fail: function (res) {
219 if (res.errMsg === 'shareAppMessage:fail cancel') {
220 console.log('fail', '放弃分享')
221 } else if (res.errMsg === 'shareAppMessage:fail') {
222 console.log('fail', '分享失败')
223 }
224 },
225 }
226 },
201 getList() { 227 getList() {
202 store.dispatch('index/list') 228 store.dispatch('index/list')
203 this.isLoading = false // TODO:::这里不知道怎么改,请同学帮忙写一下。 229 this.isLoading = false // TODO:::这里不知道怎么改,请同学帮忙写一下。
204 // 把data里的isLoading 改为false就可以了 230 // 把data里的isLoading 改为false就可以了
205 }, 231 },
206 // search(params) { 232 // search(params) {
207 // this.$store.index. 233 // this.$store.index.
208 // }, 234 // },
209 closeDrawer(e) { 235 closeDrawer(e) {
210 this.$refs[e].close() 236 this.$refs[e].close()
211 }, 237 },
212 change(e, type) { 238 change(e, type) {
213 this[type] = e 239 this[type] = e
214 }, 240 },
215 onClickItem(e) { 241 onClickItem(e) {
216 if (this.current !== e) { 242 if (this.current !== e) {
217 this.current = e 243 this.current = e
218 } 244 }
219 }, 245 },
220 dropDown() { 246 dropDown() {
221 console.log('下拉') 247 console.log('下拉')
222 }, 248 },
223 searchKey(e) { 249 searchKey(e) {
224 const { value: keyword } = e.detail 250 const { value: keyword } = e.detail
225 this.keyWords = keyword 251 this.keyWords = keyword
226 store.dispatch('index/search', { 252 store.dispatch('index/search', {
227 params: {}, 253 params: {},
228 keyword, 254 keyword,
229 }) 255 })
230 }, 256 },
231 // 接收菜单结果 257 // 接收菜单结果
232 search(e) { 258 search(e) {
233 const { on, value, selectedData } = e 259 const { on, value, selectedData } = e
234 let params = {} 260 let params = {}
235 const selectedPayload = {} 261 const selectedPayload = {}
236 for (const key in selectedData) { 262 for (const key in selectedData) {
237 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 263 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
238 selectedPayload[key] = selectedData[key].toString() 264 selectedPayload[key] = selectedData[key].toString()
239 } 265 }
240 } 266 }
241 if (on[0] === 1) { 267 if (on[0] === 1) {
242 // 若点击全部 268 // 若点击全部
243 this.searchText = '' 269 this.searchText = ''
244 store.dispatch('index/list') 270 store.dispatch('index/list')
245 } else { 271 } else {
246 for (let i = 1; i <= on.length; i++) { 272 for (let i = 1; i <= on.length; i++) {
247 // on[0]是全部 273 // on[0]是全部
248 if (on[i] === 1) { 274 if (on[i] === 1) {
249 // 若该选项被选中 275 // 若该选项被选中
250 if (this.categoryList[i].value === 'filter') { 276 if (this.categoryList[i].value === 'filter') {
251 params = { 277 params = {
252 ...selectedPayload, 278 ...selectedPayload,
253 ...params, 279 ...params,
254 } 280 }
255 } else if (this.categoryList[i].value === 'px') { 281 } else if (this.categoryList[i].value === 'px') {
256 params.orderby = value[i][0] 282 params.orderby = value[i][0]
257 } else { 283 } else {
258 params[`${this.categoryList[i].value}`] = value[i][0] 284 params[`${this.categoryList[i].value}`] = value[i][0]
259 } 285 }
260 } 286 }
261 } 287 }
262 store.dispatch('index/search', { 288 store.dispatch('index/search', {
263 params, 289 params,
264 keyword: this.keyWords, 290 keyword: this.keyWords,
265 }) 291 })
266 } 292 }
267 }, 293 },
268 }, 294 },
269 } 295 }
270 </script> 296 </script>
271 297
272 <style lang="scss"> 298 <style lang="scss">
273 .content, 299 .content,
274 .container { 300 .container {
275 display: flex; 301 display: flex;
276 flex-direction: column; 302 flex-direction: column;
277 align-items: center; 303 align-items: center;
278 justify-content: center; 304 justify-content: center;
279 width: 100%; 305 width: 100%;
280 } 306 }
281 .header { 307 .header {
282 display: flex; 308 display: flex;
283 flex-direction: column; 309 flex-direction: column;
284 align-items: center; 310 align-items: center;
285 justify-content: center; 311 justify-content: center;
286 background-color: #f7f6f6; 312 background-color: #f7f6f6;
287 height: 178rpx; 313 height: 178rpx;
288 width: 100%; 314 width: 100%;
289 z-index: 999; 315 z-index: 999;
290 position: fixed; 316 position: fixed;
291 top: 0; 317 top: 0;
292 left: 0; 318 left: 0;
293 } 319 }
294 .searchBar { 320 .searchBar {
295 width: 670rpx; 321 width: 670rpx;
296 display: flex; 322 display: flex;
297 justify-content: center; 323 justify-content: center;
298 align-items: center; 324 align-items: center;
299 box-sizing: border-box; 325 box-sizing: border-box;
300 padding: 0rpx 16rpx; 326 padding: 0rpx 16rpx;
301 border: 1px solid #ff6b4a; 327 border: 1px solid #ff6b4a;
302 border-radius: 8rpx; 328 border-radius: 8rpx;
303 background-color: #ffffff; 329 background-color: #ffffff;
304 } 330 }
305 331
306 .searchIpt { 332 .searchIpt {
307 height: 68rpx; 333 height: 68rpx;
308 width: 670rpx; 334 width: 670rpx;
309 padding: 16rpx; 335 padding: 16rpx;
310 font-size: 28rpx; 336 font-size: 28rpx;
311 box-sizing: border-box; 337 box-sizing: border-box;
312 } 338 }
313 .screenBar { 339 .screenBar {
314 width: 670rpx; 340 width: 670rpx;
315 height: 110rpx; 341 height: 110rpx;
316 display: flex; 342 display: flex;
317 flex-direction: row; 343 flex-direction: row;
318 justify-content: space-between; 344 justify-content: space-between;
319 align-items: center; 345 align-items: center;
320 color: #333333; 346 color: #333333;
321 font-size: 32rpx; 347 font-size: 32rpx;
322 } 348 }
323 .active { 349 .active {
324 color: #ff6b4a; 350 color: #ff6b4a;
325 } 351 }
326 .screenItem { 352 .screenItem {
327 display: flex; 353 display: flex;
328 justify-content: center; 354 justify-content: center;
329 align-items: center; 355 align-items: center;
330 } 356 }
331 .content-wrap { 357 .content-wrap {
332 width: 100%; 358 width: 100%;
333 background-color: #ffffff; 359 background-color: #ffffff;
334 } 360 }
335 361
336 .HMfilterDropdown { 362 .HMfilterDropdown {
337 top: 178rpx !important; 363 top: 178rpx !important;
338 } 364 }
339 365
340 .goods-list { 366 .goods-list {
341 padding-top: 286rpx; 367 padding-top: 286rpx;
342 .loading-text { 368 .loading-text {
343 width: 100%; 369 width: 100%;
344 display: flex; 370 display: flex;
345 justify-content: center; 371 justify-content: center;
346 align-items: center; 372 align-items: center;
347 height: 30px; 373 height: 30px;
348 color: #979797; 374 color: #979797;
349 font-size: 12px; 375 font-size: 12px;
350 } 376 }
351 .product-list { 377 .product-list {
352 width: 92%; 378 width: 92%;
353 padding: 0 4% 3vw 4%; 379 padding: 0 4% 3vw 4%;
354 display: flex; 380 display: flex;
355 justify-content: space-between; 381 justify-content: space-between;
356 flex-wrap: wrap; 382 flex-wrap: wrap;
357 .product { 383 .product {
358 width: 48%; 384 width: 48%;
359 min-height: 120rpx; 385 min-height: 120rpx;
360 margin: 0 0 20rpx 0; 386 margin: 0 0 20rpx 0;
361 background: #ffffff; 387 background: #ffffff;
362 border: 1px solid #f2f2f2; 388 border: 1px solid #f2f2f2;
363 } 389 }
364 } 390 }
365 } 391 }
366 </style> 392 </style>
367 393
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 class="item"> 138 <view
139 @tap="toAddress"
140 class="item"
141 >
139 <image 142 <image
140 src="../../static/address-icon.png" 143 src="../../static/address-icon.png"
141 mode="aspectFit" 144 mode="aspectFit"
142 ></image> 145 ></image>
143 <view class="left"> 146 <view class="left">
144 <text @tap="toAddress">地址管理</text> 147 <text>地址管理</text>
145 <image 148 <image
146 class="image2" 149 class="image2"
147 src="../../static/right.png" 150 src="../../static/right.png"
148 mode="aspectFit" 151 mode="aspectFit"
149 ></image> 152 ></image>
150 </view> 153 </view>
151 154
152 </view> 155 </view>
153 <view class="item"> 156 <view
157 @tap="introduce"
158 class="item"
159 >
154 <image 160 <image
155 src="../../static/img/user/introduce.png" 161 src="../../static/img/user/introduce.png"
156 mode="aspectFit" 162 mode="aspectFit"
157 ></image> 163 ></image>
158 <view class="left"> 164 <view class="left">
159 <text @tap="introduce">系统介绍</text> 165 <text>系统介绍</text>
160 <image 166 <image
161 src="../../static/right.png" 167 src="../../static/right.png"
162 mode="aspectFit" 168 mode="aspectFit"
163 ></image> 169 ></image>
164 </view> 170 </view>
165 </view> 171 </view>
166 <view class="item"> 172 <view
173 @tap="joinUs"
174 class="item"
175 >
167 <image 176 <image
168 src="../../static/img/user/joinUs.png" 177 src="../../static/img/user/joinUs.png"
169 mode="aspectFit" 178 mode="aspectFit"
170 ></image> 179 ></image>
171 <view class="left"> 180 <view class="left">
172 <text @tap="joinUs">加入我们</text> 181 <text>加入我们</text>
173 <image 182 <image
174 src="../../static/right.png" 183 src="../../static/right.png"
175 mode="aspectFit" 184 mode="aspectFit"
176 ></image> 185 ></image>
177 </view> 186 </view>
178 </view> 187 </view>
179 <view class="item"> 188 <view class="item">
180 <image 189 <image
181 src="../../static/img/user/service.png" 190 src="../../static/img/user/service.png"
182 mode="aspectFit" 191 mode="aspectFit"
183 ></image> 192 ></image>
184 <view class="left lastLeft"> 193 <view class="left lastLeft">
185 <text>联系客服</text> 194 <text>联系客服</text>
186 <image 195 <image
187 src="../../static/right.png" 196 src="../../static/right.png"
188 mode="aspectFit" 197 mode="aspectFit"
189 ></image> 198 ></image>
190 </view> 199 </view>
191 </view> 200 </view>
192 </view> 201 </view>
193 <view class="recommend"> 202 <view class="recommend">
194 <view class="title"> 203 <view class="title">
195 <view class="line"></view> 204 <view class="line"></view>
196 <view class="text">精选推荐</view> 205 <view class="text">精选推荐</view>
197 <view class="line"></view> 206 <view class="line"></view>
198 </view> 207 </view>
199 <!-- 商品列表 --> 208 <!-- 商品列表 -->
200 <view class="goods-list"> 209 <view class="goods-list">
201 <!-- <scroll-view 210 <!-- <scroll-view
202 enable-flex 211 enable-flex
203 @scrolltolower="handleScrolltolower" 212 @scrolltolower="handleScrolltolower"
204 scroll-y 213 scroll-y
205 class="product-list" 214 class="product-list"
206 > --> 215 > -->
207 <view class="product-list"> 216 <view class="product-list">
208 <view 217 <view
209 class="product" 218 class="product"
210 v-for="(item, index) in userRecommandList" 219 v-for="(item, index) in userRecommandList"
211 :key="index" 220 :key="index"
212 > 221 >
213 <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> 222 <Card
223 :goods="item"
224 :scrollTop="scrollTop"
225 :viewHeight="viewHeight"
226 ></Card>
214 </view> 227 </view>
215 </view> 228 </view>
216 <!-- </scroll-view> --> 229 <!-- </scroll-view> -->
217 <view class="loading-text">{{loadingText}}</view> 230 <view class="loading-text">{{loadingText}}</view>
218 </view> 231 </view>
219 </view> 232 </view>
220 </view> 233 </view>
221 <view 234 <view
222 v-else 235 v-else
223 class="auth" 236 class="auth"
224 > 237 >
225 <view class="icon"></view> 238 <view class="icon"></view>
226 <view class="divider"></view> 239 <view class="divider"></view>
227 <view class="title">申请获取以下权限</view> 240 <view class="title">申请获取以下权限</view>
228 <view class="text">获得您的公开信息(昵称、头像等)</view> 241 <view class="text">获得您的公开信息(昵称、头像等)</view>
229 <button 242 <button
230 type="primary" 243 type="primary"
231 open-type="getUserInfo" 244 open-type="getUserInfo"
232 @getuserinfo="onGotUserInfo" 245 @getuserinfo="onGotUserInfo"
233 >授权登陆</button> 246 >授权登陆</button>
234 </view> 247 </view>
235 <!-- </scroll-view> --> 248 <!-- </scroll-view> -->
236 </view> 249 </view>
237 </template> 250 </template>
238 251
239 <script> 252 <script>
240 import Card from '@/components/CommodityCard/CommodityCard.vue' 253 import Card from '@/components/CommodityCard/CommodityCard.vue'
241 import store from '@/store' 254 import store from '@/store'
242 import UniPopup from '@/components/UniPopup/uni-popup.vue' 255 import UniPopup from '@/components/UniPopup/uni-popup.vue'
243 256
244 export default { 257 export default {
245 components: { 258 components: {
246 Card, 259 Card,
247 UniPopup 260 UniPopup,
248 }, 261 },
249 data() { 262 data() {
250 return { 263 return {
251 isAuth: true, // 是否显示授权页面, 264 isAuth: true, // 是否显示授权页面,
252 pagesnum: 1, // 分页请求初始值 265 pagesnum: 1, // 分页请求初始值
253 whichTap: 0 ,// 弹窗渲染选择条件 266 whichTap: 0, // 弹窗渲染选择条件
254 loadingText: '到底了', 267 loadingText: '到底了',
255 scrollTop: 0, 268 scrollTop: 0,
256 viewHeight: uni.getSystemInfoSync().windowHeight, 269 viewHeight: uni.getSystemInfoSync().windowHeight,
257 } 270 }
258 }, 271 },
259 onPageScroll({scrollTop}) { 272 onPageScroll({ scrollTop }) {
260 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 273 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
261 this.scrollTop = scrollTop; 274 this.scrollTop = scrollTop
262 }, 275 },
263 onLoad() { 276 onLoad() {
264 // 判断是否授权 277 // 判断是否授权
265 uni.getSetting({ 278 uni.getSetting({
266 success(res) { 279 success(res) {
267 console.log('authSetting', res.authSetting) 280 console.log('authSetting', res.authSetting)
268 if (res.authSetting['scope.userInfo'] === true) { 281 if (res.authSetting['scope.userInfo'] === true) {
269 this.isAuth = true 282 this.isAuth = true
270 } else { 283 } else {
271 this.isAuth = false 284 this.isAuth = false
272 } 285 }
273 } 286 },
274 }) 287 })
275 store.dispatch('userRecommand/getRecommandList', { 288 store.dispatch('userRecommand/getRecommandList', {
276 uid: this.$store.state.user.userInfo.uid, 289 uid: this.$store.state.user.userInfo.uid,
277 openid: this.$store.state.user.userInfo.openid, 290 openid: this.$store.state.user.userInfo.openid,
278 page: this.pagesnum 291 page: this.pagesnum,
279 }) 292 })
280 }, 293 },
281 onReachBottom() { 294 onReachBottom() {
282 // console.log('usr-my',this.$store.state.user.userInfo) 295 // console.log('usr-my',this.$store.state.user.userInfo)
283 this.pagesnum++ 296 this.pagesnum++
284 store.dispatch('userRecommand/getRecommandList', { 297 store.dispatch('userRecommand/getRecommandList', {
285 uid: this.$store.state.user.userInfo.uid, 298 uid: this.$store.state.user.userInfo.uid,
286 openid: this.$store.state.user.userInfo.openid, 299 openid: this.$store.state.user.userInfo.openid,
287 page: this.pagesnum 300 page: this.pagesnum,
288 }) 301 })
289 }, 302 },
290 computed: { 303 computed: {
291 nickName() { 304 nickName() {
292 return this.$store.state.user.userInfo.nickName 305 return this.$store.state.user.userInfo.nickName
293 }, 306 },
294 headerphoto() { 307 headerphoto() {
295 return this.$store.state.user.userInfo.headerphoto 308 return this.$store.state.user.userInfo.headerphoto
296 }, 309 },
297 userRecommandList() { 310 userRecommandList() {
298 console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) 311 console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
299 return this.$store.state.userRecommand.recommandList 312 return this.$store.state.userRecommand.recommandList
300 } 313 },
301 }, 314 },
302 methods: { 315 methods: {
303 // 弹窗 316 // 弹窗
304 changeTap(item) { 317 changeTap(item) {
305 this.whichTap = item 318 this.whichTap = item
306 this.$refs.popup.open() 319 this.$refs.popup.open()
307 }, 320 },
308 chatOur(item) { 321 chatOur(item) {
309 if (item === 1) { 322 if (item === 1) {
310 uni.makePhoneCall({ 323 uni.makePhoneCall({
311 phoneNumber: 13376189297 // 客服1 电话 324 phoneNumber: 13376189297, // 客服1 电话
312 }) 325 })
313 } else { 326 } else {
314 uni.makePhoneCall({ 327 uni.makePhoneCall({
315 phoneNumber: 18014995101 // 客服2 电话 328 phoneNumber: 18014995101, // 客服2 电话
316 }) 329 })
317 } 330 }
318 }, 331 },
319 // 授权 332 // 授权
320 onGotUserInfo(e) { 333 onGotUserInfo(e) {
321 if (e.detail.errMsg === 'getUserInfo:ok') { 334 if (e.detail.errMsg === 'getUserInfo:ok') {
322 const { fromInfo } = this.$store.state.user 335 const { fromInfo } = this.$store.state.user
323 // 用户授权成功 336 // 用户授权成功
324 store.dispatch('user/getUserInfo', fromInfo) 337 store.dispatch('user/getUserInfo', fromInfo)
325 this.isAuth = true 338 this.isAuth = true
326 } 339 }
327 }, 340 },
328 toAddress() { 341 toAddress() {
329 uni.navigateTo({ 342 uni.navigateTo({
330 url: '../address/addressList', 343 url: '../address/addressList',
331 success: res => {}, 344 success: res => {},
332 fail: () => {}, 345 fail: () => {},
333 complete: () => {} 346 complete: () => {},
334 }) 347 })
335 }, 348 },
336 introduce() { 349 introduce() {
337 uni.showModal({ 350 uni.showModal({
338 content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', 351 content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。',
339 showCancel: false 352 showCancel: false,
340 }) 353 })
341 }, 354 },
342 joinUs() { 355 joinUs() {
343 uni.showModal({ 356 uni.showModal({
344 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', 357 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
345 showCancel: false 358 showCancel: false,
346 }) 359 })
347 }, 360 },
348 toMyOrder(status) { 361 toMyOrder(status) {
349 uni.navigateTo({ 362 uni.navigateTo({
350 url: `../myOrder/myOrder?status=${status}`, 363 url: `../myOrder/myOrder?status=${status}`,
351 success: res => {}, 364 success: res => {},
352 fail: () => {}, 365 fail: () => {},
353 complete: () => {} 366 complete: () => {},
354 }) 367 })
355 }, 368 },
356 toOpticsData() { 369 toOpticsData() {
357 uni.navigateTo({ 370 uni.navigateTo({
358 url: '../addOpticsData/addOpticsData' 371 url: '../addOpticsData/addOpticsData',
359 }) 372 })
360 } 373 },
361 } 374 },
362 } 375 }
363 </script> 376 </script>
364 377
365 <style lang="scss"> 378 <style lang="scss">
366 .warp { 379 .warp {
367 font-size: 24rpx; 380 font-size: 24rpx;
368 background-color: #f2f2f2; 381 background-color: #f2f2f2;
369 height: 100vh; 382 height: 100vh;
370 } 383 }
371 .content { 384 .content {
372 display: flex; 385 display: flex;
373 flex-direction: column; 386 flex-direction: column;
374 align-items: center; 387 align-items: center;
375 justify-content: center; 388 justify-content: center;
376 background-color: #f2f2f2; 389 background-color: #f2f2f2;
377 } 390 }
378 .userInfo { 391 .userInfo {
379 background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%); 392 background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
380 width: 100%; 393 width: 100%;
381 height: 240rpx; 394 height: 240rpx;
382 color: #ffffff; 395 color: #ffffff;
383 padding: 60rpx 82rpx 80rpx 44rpx; 396 padding: 60rpx 82rpx 80rpx 44rpx;
384 box-sizing: border-box; 397 box-sizing: border-box;
385 display: flex; 398 display: flex;
386 flex-direction: row; 399 flex-direction: row;
387 justify-content: space-between; 400 justify-content: space-between;
388 align-items: flex-start; 401 align-items: flex-start;
389 .info { 402 .info {
390 display: flex; 403 display: flex;
391 flex-direction: row; 404 flex-direction: row;
392 justify-content: space-between; 405 justify-content: space-between;
393 align-items: center; 406 align-items: center;
394 image { 407 image {
395 border-radius: 50rpx; 408 border-radius: 50rpx;
396 height: 100rpx; 409 height: 100rpx;
397 width: 100rpx; 410 width: 100rpx;
398 margin-right: 40rpx; 411 margin-right: 40rpx;
399 } 412 }
400 .infoText { 413 .infoText {
401 display: flex; 414 display: flex;
402 flex-direction: column; 415 flex-direction: column;
403 justify-content: space-between; 416 justify-content: space-between;
404 align-items: flex-scetart; 417 align-items: flex-scetart;
405 .userName { 418 .userName {
406 font-size: 18px; 419 font-size: 18px;
407 color: #ffffff; 420 color: #ffffff;
408 margin-bottom: 8rpx; 421 margin-bottom: 8rpx;
409 } 422 }
410 .nickName { 423 .nickName {
411 font-size: 12px; 424 font-size: 12px;
412 color: #ffffff; 425 color: #ffffff;
413 } 426 }
414 } 427 }
415 } 428 }
416 // .service { 429 // .service {
417 // margin-top: 20rpx; 430 // margin-top: 20rpx;
418 // image { 431 // image {
419 // height: 36rpx; 432 // height: 36rpx;
420 // width: 36rpx; 433 // width: 36rpx;
421 // } 434 // }
422 // } 435 // }
423 } 436 }
424 .myOpticsData { 437 .myOpticsData {
425 width: 670rpx; 438 width: 670rpx;
426 height: 120rpx; 439 height: 120rpx;
427 background-color: #ffffff; 440 background-color: #ffffff;
428 border-radius: 6px; 441 border-radius: 6px;
429 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); 442 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
430 position: relative; 443 position: relative;
431 bottom: 44rpx; 444 bottom: 44rpx;
432 padding: 40rpx; 445 padding: 40rpx;
433 box-sizing: border-box; 446 box-sizing: border-box;
434 display: flex; 447 display: flex;
435 justify-content: space-between; 448 justify-content: space-between;
436 align-items: center; 449 align-items: center;
437 .left { 450 .left {
438 font-size: 14px; 451 font-size: 14px;
439 color: #333333; 452 color: #333333;
440 display: flex; 453 display: flex;
441 align-items: center; 454 align-items: center;
442 image { 455 image {
443 margin-right: 32rpx; 456 margin-right: 32rpx;
444 width: 40rpx; 457 width: 40rpx;
445 height: 44rpx; 458 height: 44rpx;
446 } 459 }
447 } 460 }
448 image { 461 image {
449 height: 16px; 462 height: 16px;
450 width: 8px; 463 width: 8px;
451 } 464 }
452 } 465 }
453 .myOrder { 466 .myOrder {
454 width: 100%; 467 width: 100%;
455 height: 296rpx; 468 height: 296rpx;
456 // margin-top: 116rpx; 469 // margin-top: 116rpx;
457 margin-bottom: 20rpx; 470 margin-bottom: 20rpx;
458 padding: 0 40rpx; 471 padding: 0 40rpx;
459 box-sizing: border-box; 472 box-sizing: border-box;
460 background: #ffffff; 473 background: #ffffff;
461 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 474 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
462 border-radius: 6px; 475 border-radius: 6px;
463 border-radius: 6px; 476 border-radius: 6px;
464 display: flex; 477 display: flex;
465 flex-direction: column; 478 flex-direction: column;
466 justify-content: space-around; 479 justify-content: space-around;
467 align-items: center; 480 align-items: center;
468 .orderHeader { 481 .orderHeader {
469 width: 100%; 482 width: 100%;
470 height: 100rpx; 483 height: 100rpx;
471 display: flex; 484 display: flex;
472 flex-direction: row; 485 flex-direction: row;
473 justify-content: space-between; 486 justify-content: space-between;
474 align-items: center; 487 align-items: center;
475 border-bottom: 1px solid #F5F5F5; 488 border-bottom: 1px solid #f5f5f5;
476 font-weight: bold; 489 font-weight: bold;
477 font-size: 18px; 490 font-size: 18px;
478 color: #333333; 491 color: #333333;
479 .btn { 492 .btn {
480 font-size: 12px; 493 font-size: 12px;
481 color: #999999; 494 color: #999999;
482 display: flex; 495 display: flex;
483 align-items: center; 496 align-items: center;
484 image { 497 image {
485 margin-left: 20rpx; 498 margin-left: 20rpx;
486 height: 32rpx; 499 height: 32rpx;
487 width: 16rpx; 500 width: 16rpx;
488 } 501 }
489 } 502 }
490 } 503 }
491 .orderBody { 504 .orderBody {
492 width: 100%; 505 width: 100%;
493 display: flex; 506 display: flex;
494 flex-direction: row; 507 flex-direction: row;
495 justify-content: space-around; 508 justify-content: space-around;
496 align-items: center; 509 align-items: center;
497 .item { 510 .item {
498 display: flex; 511 display: flex;
499 flex-direction: column; 512 flex-direction: column;
500 align-items: center; 513 align-items: center;
501 image { 514 image {
502 width: 62rpx; 515 width: 62rpx;
503 height: 46rpx; 516 height: 46rpx;
504 } 517 }
505 text { 518 text {
506 margin-top: 24rpx; 519 margin-top: 24rpx;
507 font-size: 12px; 520 font-size: 12px;
508 color: #333333; 521 color: #333333;
509 } 522 }
510 } 523 }
511 } 524 }
512 } 525 }
513 .someItem { 526 .someItem {
514 width: 100%; 527 width: 100%;
515 height: 336rpx; 528 height: 336rpx;
516 background: #ffffff; 529 background: #ffffff;
517 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 530 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
518 border-radius: 6px; 531 border-radius: 6px;
519 border-radius: 6px; 532 border-radius: 6px;
520 margin-bottom: 18rpx; 533 margin-bottom: 18rpx;
521 box-sizing: border-box; 534 box-sizing: border-box;
522 padding: 21rpx 48rpx 21rpx 42rpx; 535 padding: 21rpx 48rpx 21rpx 42rpx;
523 box-sizing: border-box; 536 box-sizing: border-box;
524 display: flex; 537 display: flex;
525 flex-direction: column; 538 flex-direction: column;
526 justify-content: space-between; 539 justify-content: space-between;
527 align-items: center; 540 align-items: center;
528 .item { 541 .item {
529 display: grid; 542 display: grid;
530 grid-template-columns: 10% 90%; 543 grid-template-columns: 10% 90%;
531 align-items: center; 544 align-items: center;
532 height: 72rpx; 545 height: 72rpx;
533 width: 100%; 546 width: 100%;
534 .left { 547 .left {
535 font-size: 14px; 548 font-size: 14px;
536 color: #333333; 549 color: #333333;
537 display: flex; 550 display: flex;
538 align-items: center; 551 align-items: center;
539 justify-content: space-between; 552 justify-content: space-between;
540 height: 72rpx; 553 height: 72rpx;
541 border-bottom: 1px solid #F2F2F2; 554 border-bottom: 1px solid #f2f2f2;
542 image { 555 image {
543 margin-right: 0; 556 margin-right: 0;
544 height: 16px; 557 height: 16px;
545 width: 8px; 558 width: 8px;
546 } 559 }
547 } 560 }
548 image { 561 image {
549 margin-right: 32rpx; 562 margin-right: 32rpx;
550 width: 40rpx; 563 width: 40rpx;
551 height: 44rpx; 564 height: 44rpx;
552 } 565 }
553 .lastLeft{ 566 .lastLeft {
554 border-bottom: none; 567 border-bottom: none;
555 } 568 }
556 } 569 }
557 } 570 }
558 .recommend { 571 .recommend {
559 background: #ffffff; 572 background: #ffffff;
560 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 573 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
561 border-radius: 6px; 574 border-radius: 6px;
562 border-radius: 6px; 575 border-radius: 6px;
563 width: 100%; 576 width: 100%;
564 .title { 577 .title {
565 display: flex; 578 display: flex;
566 flex-direction: row; 579 flex-direction: row;
567 align-items: center; 580 align-items: center;
568 justify-content: space-between; 581 justify-content: space-between;
569 padding: 20rpx 40rpx; 582 padding: 20rpx 40rpx;
570 .line { 583 .line {
571 width: 264rpx; 584 width: 264rpx;
572 height: 1rpx; 585 height: 1rpx;
573 border-bottom: 1px solid #eaeaea; 586 border-bottom: 1px solid #eaeaea;
574 } 587 }
575 .text { 588 .text {
576 font-family: PingFangSC-Medium; 589 font-family: PingFangSC-Medium;
577 font-size: 14px; 590 font-size: 14px;
578 color: #333333; 591 color: #333333;
579 letter-spacing: -0.26px; 592 letter-spacing: -0.26px;
580 text-align: justify; 593 text-align: justify;
581 line-height: 24px; 594 line-height: 24px;
582 } 595 }
583 } 596 }
584 .goods-list { 597 .goods-list {
585 .loading-text { 598 .loading-text {
586 width: 100%; 599 width: 100%;
587 display: flex; 600 display: flex;
588 justify-content: center; 601 justify-content: center;
589 align-items: center; 602 align-items: center;
590 height: 30px; 603 height: 30px;
591 color: #979797; 604 color: #979797;
592 font-size: 12px; 605 font-size: 12px;
593 } 606 }
594 .product-list { 607 .product-list {
595 width: 92%; 608 width: 92%;
596 padding: 0 4% 3vw 4%; 609 padding: 0 4% 3vw 4%;
597 display: flex; 610 display: flex;
598 justify-content: space-between; 611 justify-content: space-between;
599 flex-wrap: wrap; 612 flex-wrap: wrap;
600 .product { 613 .product {
601 width: 48%; 614 width: 48%;
602 margin: 0 0 20rpx 0; 615 margin: 0 0 20rpx 0;
603 background: #ffffff; 616 background: #ffffff;
604 border: 1px solid #f2f2f2; 617 border: 1px solid #f2f2f2;
605 } 618 }
606 } 619 }
607 } 620 }
608 } 621 }
609 .auth { 622 .auth {
610 height: 100vh; 623 height: 100vh;
611 display: flex; 624 display: flex;
612 flex-direction: column; 625 flex-direction: column;
613 align-items: center; 626 align-items: center;
614 .icon { 627 .icon {
615 width: 140rpx; 628 width: 140rpx;
616 height: 140rpx; 629 height: 140rpx;
617 border-radius: 50%; 630 border-radius: 50%;
618 margin-top: 100rpx; 631 margin-top: 100rpx;
619 background-color: grey; 632 background-color: grey;
620 } 633 }
621 .divider { 634 .divider {
622 height: 1rpx; 635 height: 1rpx;
623 width: 600rpx; 636 width: 600rpx;
624 margin-top: 80rpx; 637 margin-top: 80rpx;
625 background-color: #e6e3e3; 638 background-color: #e6e3e3;
626 } 639 }
627 .title { 640 .title {
628 width: 600rpx; 641 width: 600rpx;
629 margin-top: 50rpx; 642 margin-top: 50rpx;
630 text-align: left; 643 text-align: left;
631 } 644 }
632 .text { 645 .text {
633 width: 600rpx; 646 width: 600rpx;
634 margin-top: 30rpx; 647 margin-top: 30rpx;
635 text-align: left; 648 text-align: left;
636 color: #e6e3e3; 649 color: #e6e3e3;
637 } 650 }
638 button { 651 button {
639 width: 450rpx; 652 width: 450rpx;
640 height: 80rpx; 653 height: 80rpx;
641 line-height: 80rpx; 654 line-height: 80rpx;
642 margin-top: 80rpx; 655 margin-top: 80rpx;
643 border-radius: 30rpx; 656 border-radius: 30rpx;
644 } 657 }
645 } 658 }
646 .closeBtn { 659 .closeBtn {
647 height: 28rpx; 660 height: 28rpx;
648 width: 28rpx; 661 width: 28rpx;
649 // border: 1px solid red; 662 // border: 1px solid red;
650 position: absolute; 663 position: absolute;
651 top: 20rpx; 664 top: 20rpx;
652 right: 10rpx; 665 right: 10rpx;
653 } 666 }
654 </style> 667 </style>
655 668