Commit e79b72133954f7c2f35ec8d7649740ab111c1c8b

Authored by 范牧
1 parent 34703a7672
Exists in master

加购更新

Showing 1 changed file with 3 additions and 5 deletions   Show diff stats
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') 374 const uid = uni.getStorageSync('uid')
375 return { 375 return {
376 title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等) 376 title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等)
377 path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, 377 path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid,
378 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 378 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
379 success: function (res) { 379 success: function (res) {
380 if (res.errMsg === 'shareAppMessage:ok') { 380 if (res.errMsg === 'shareAppMessage:ok') {
381 console.log('分享成功!', res) 381 console.log('分享成功!', res)
382 } 382 }
383 }, 383 },
384 fail: function (res) { 384 fail: function (res) {
385 if (res.errMsg === 'shareAppMessage:fail cancel') { 385 if (res.errMsg === 'shareAppMessage:fail cancel') {
386 console.log('fail', '放弃分享') 386 console.log('fail', '放弃分享')
387 } else if (res.errMsg === 'shareAppMessage:fail') { 387 } else if (res.errMsg === 'shareAppMessage:fail') {
388 console.log('fail', '分享失败') 388 console.log('fail', '分享失败')
389 } 389 }
390 }, 390 },
391 } 391 }
392 }, 392 },
393 // 生成海报 393 // 生成海报
394 sharePost() { 394 sharePost() {
395 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' 395 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
396 396
397 store.dispatch('details/post', { 397 store.dispatch('details/post', {
398 pid: this.pid, 398 pid: this.pid,
399 sid: fromsid === 'undefined' ? 0 : fromsid, 399 sid: fromsid === 'undefined' ? 0 : fromsid,
400 }).then((data) => { 400 }).then((data) => {
401 uni.hideLoading() 401 uni.hideLoading()
402 this.$refs.uniPopupPost.open() 402 this.$refs.uniPopupPost.open()
403 }) 403 })
404 }, 404 },
405 // 参数选择弹窗开关 405 // 参数选择弹窗开关
406 showBottom(isCart) { 406 showBottom(isCart) {
407 this.isCart = isCart 407 this.isCart = isCart
408 this.isShowBottom = true 408 this.isShowBottom = true
409 }, 409 },
410 closeBottom() { 410 closeBottom() {
411 this.isShowBottom = false 411 this.isShowBottom = false
412 }, 412 },
413 // 前往购物车 413 // 前往购物车
414 toCart() { 414 toCart() {
415 uni.switchTab({ 415 uni.switchTab({
416 url: '/pages/cart/cart', 416 url: '/pages/cart/cart',
417 success: res => {}, 417 success: res => {},
418 fail: (error) => { console.log('跳转购物车失败======>', error) }, 418 fail: (error) => { console.log('跳转购物车失败======>', error) },
419 complete: () => { console.log('toCart') }, 419 complete: () => { console.log('toCart') },
420 }) 420 })
421 }, 421 },
422 // 加入购物车 422 // 加入购物车
423 addCart (mpId, num, checkedSKU, skId,price) { 423 addCart (mpId, num, checkedSKU, skId, price) {
424 const addCartList = {} 424 const addCartList = {}
425 addCartList.mp_id = mpId 425 addCartList.mp_id = mpId
426 addCartList.sk_id = skId 426 addCartList.sk_id = skId
427 addCartList.num = num 427 addCartList.num = num
428 addCartList.checkedSKU = checkedSKU 428 addCartList.checkedSKU = checkedSKU
429 addCartList.pid = this.pid 429 addCartList.pid = this.pid
430 addCartList.price = price 430 addCartList.price = price
431 console.log('添加购物车的参数', addCartList) 431 console.log('添加购物车的参数', addCartList)
432 store.dispatch('cart/addCart', addCartList).then((res) => { 432 store.dispatch('cart/addCart', addCartList).then((res) => {
433 if (res.code === 1) { 433 if (res.code === 1) {
434 uni.showToast({ 434 uni.showToast({
435 title: '添加成功~', 435 title: '添加成功~',
436 icon: 'success', 436 icon: 'success',
437 }) 437 })
438 } 438 }
439 // 再次请求购物车接口,实现实时更新 439 // 再次请求购物车接口,实现实时更新
440 store.dispatch('cart/getCartList', { 440 store.dispatch('details/getCartNumber')
441 uid: this.$store.state.user.userInfo.uid,
442 })
443 }) 441 })
444 }, 442 },
445 }, 443 },
446 } 444 }
447 </script> 445 </script>
448 446
449 <style lang="scss"> 447 <style lang="scss">
450 .container { 448 .container {
451 background-color: #f8f8f8; 449 background-color: #f8f8f8;
452 font-family: "PingFangSC-Regular"; 450 font-family: "PingFangSC-Regular";
453 // 板块样式 451 // 板块样式
454 > view { 452 > view {
455 background: #ffffff; 453 background: #ffffff;
456 margin-bottom: 10px; 454 margin-bottom: 10px;
457 padding: 8px 20px 8px 20px; 455 padding: 8px 20px 8px 20px;
458 box-sizing: border-box; 456 box-sizing: border-box;
459 } 457 }
460 // 基础信息板块 458 // 基础信息板块
461 .basic_info { 459 .basic_info {
462 // 轮播图 460 // 轮播图
463 .swiperImage { 461 .swiperImage {
464 width: 684rpx; 462 width: 684rpx;
465 height: 480rpx; 463 height: 480rpx;
466 image { 464 image {
467 max-width: 100%; 465 max-width: 100%;
468 max-height: 100%; 466 max-height: 100%;
469 border-radius: 16rpx; 467 border-radius: 16rpx;
470 } 468 }
471 } 469 }
472 // 产品价格及购买人数 470 // 产品价格及购买人数
473 .info_pay { 471 .info_pay {
474 color: #eb5d3b; 472 color: #eb5d3b;
475 font-size: 18px; 473 font-size: 18px;
476 margin-top: 5px; 474 margin-top: 5px;
477 font-family: "PingFangSC-Semibold"; 475 font-family: "PingFangSC-Semibold";
478 display: flex; 476 display: flex;
479 justify-content: space-between; 477 justify-content: space-between;
480 .info_pay_discount { 478 .info_pay_discount {
481 text-decoration: line-through; 479 text-decoration: line-through;
482 margin-left: 8rpx; 480 margin-left: 8rpx;
483 color: #999; 481 color: #999;
484 font-size: 14px; 482 font-size: 14px;
485 } 483 }
486 .info_pay_number { 484 .info_pay_number {
487 color: #999; 485 color: #999;
488 font-size: 14px; 486 font-size: 14px;
489 font-family: PingFangSC-Regular; 487 font-family: PingFangSC-Regular;
490 } 488 }
491 } 489 }
492 // 产品名称 490 // 产品名称
493 .info_name { 491 .info_name {
494 margin-top: 5px; 492 margin-top: 5px;
495 display: flex; 493 display: flex;
496 justify-content: space-between; 494 justify-content: space-between;
497 .info_name_name { 495 .info_name_name {
498 margin-right: 10px; 496 margin-right: 10px;
499 font-size: 16px; 497 font-size: 16px;
500 font-family: "PingFangSC-Semibold"; 498 font-family: "PingFangSC-Semibold";
501 max-width: 592rpx; 499 max-width: 592rpx;
502 } 500 }
503 .info_name_share { 501 .info_name_share {
504 display: flex; 502 display: flex;
505 flex-direction: column; 503 flex-direction: column;
506 justify-content: space-between; 504 justify-content: space-between;
507 align-items: center; 505 align-items: center;
508 margin-top: 14rpx; 506 margin-top: 14rpx;
509 > image { 507 > image {
510 height: 40rpx; 508 height: 40rpx;
511 width: 40rpx; 509 width: 40rpx;
512 } 510 }
513 > text { 511 > text {
514 font-family: PingFangSC-Regular; 512 font-family: PingFangSC-Regular;
515 font-size: 12px; 513 font-size: 12px;
516 color: #999; 514 color: #999;
517 letter-spacing: -0.23px; 515 letter-spacing: -0.23px;
518 } 516 }
519 } 517 }
520 } 518 }
521 // 售后服务 519 // 售后服务
522 .info_after { 520 .info_after {
523 font-size: 10px; 521 font-size: 10px;
524 color: #999; 522 color: #999;
525 margin-top: 20rpx; 523 margin-top: 20rpx;
526 > span { 524 > span {
527 height: 14px; 525 height: 14px;
528 margin-right: 10px; 526 margin-right: 10px;
529 } 527 }
530 } 528 }
531 } 529 }
532 // 详细信息 530 // 详细信息
533 .detail_info { 531 .detail_info {
534 margin-bottom: 20rpx; 532 margin-bottom: 20rpx;
535 .screen_bar { 533 .screen_bar {
536 width: 670rpx; 534 width: 670rpx;
537 margin-top: 20rpx; 535 margin-top: 20rpx;
538 margin-bottom: 24rpx; 536 margin-bottom: 24rpx;
539 display: flex; 537 display: flex;
540 flex-direction: row; 538 flex-direction: row;
541 justify-content: space-between; 539 justify-content: space-between;
542 align-items: center; 540 align-items: center;
543 font-size: 14px; 541 font-size: 14px;
544 color: #333333; 542 color: #333333;
545 transition: all 0.2s; 543 transition: all 0.2s;
546 } 544 }
547 .item_active { 545 .item_active {
548 border-bottom: 4rpx solid #ff6b4a; 546 border-bottom: 4rpx solid #ff6b4a;
549 } 547 }
550 .screen_item { 548 .screen_item {
551 font-size: 32rpx; 549 font-size: 32rpx;
552 color: #333333; 550 color: #333333;
553 display: flex; 551 display: flex;
554 transition: all 0.2s; 552 transition: all 0.2s;
555 // 规格参数 553 // 规格参数
556 .specification { 554 .specification {
557 margin-bottom: 4px; 555 margin-bottom: 4px;
558 .spe_item { 556 .spe_item {
559 image { 557 image {
560 width: 50px; 558 width: 50px;
561 height: 25px; 559 height: 25px;
562 margin-right: 6px; 560 margin-right: 6px;
563 vertical-align: middle; 561 vertical-align: middle;
564 } 562 }
565 span { 563 span {
566 margin-left: 24rpx; 564 margin-left: 24rpx;
567 } 565 }
568 } 566 }
569 } 567 }
570 } 568 }
571 // 569 //
572 } 570 }
573 // 宝贝好评率 571 // 宝贝好评率
574 .evaluate { 572 .evaluate {
575 .evaluate_title { 573 .evaluate_title {
576 font-size: 14px; 574 font-size: 14px;
577 color: #333333; 575 color: #333333;
578 display: flex; 576 display: flex;
579 justify-content: space-between; 577 justify-content: space-between;
580 .title_rate { 578 .title_rate {
581 margin-left: 10rpx; 579 margin-left: 10rpx;
582 } 580 }
583 .evaluate_star { 581 .evaluate_star {
584 width: 90px; 582 width: 90px;
585 display: flex; 583 display: flex;
586 align-items: center; 584 align-items: center;
587 justify-content: space-between; 585 justify-content: space-between;
588 } 586 }
589 view { 587 view {
590 font-size: 14px; 588 font-size: 14px;
591 color: #333333; 589 color: #333333;
592 font-weight: bold; 590 font-weight: bold;
593 } 591 }
594 } 592 }
595 .evaluate_tag { 593 .evaluate_tag {
596 view { 594 view {
597 display: inline-block; 595 display: inline-block;
598 margin-right: 20rpx; 596 margin-right: 20rpx;
599 min-width: 180rpx; 597 min-width: 180rpx;
600 margin-top: 10px; 598 margin-top: 10px;
601 height: 48rpx; 599 height: 48rpx;
602 background: #f2f2f2; 600 background: #f2f2f2;
603 border-radius: 2px; 601 border-radius: 2px;
604 font-family: PingFangSC-Regular; 602 font-family: PingFangSC-Regular;
605 font-size: 12px; 603 font-size: 12px;
606 color: #666666; 604 color: #666666;
607 letter-spacing: -0.23px; 605 letter-spacing: -0.23px;
608 text-align: center; 606 text-align: center;
609 padding: 0 48rpx; 607 padding: 0 48rpx;
610 line-height: 48rpx; 608 line-height: 48rpx;
611 } 609 }
612 } 610 }
613 } 611 }
614 // 商品详情 612 // 商品详情
615 .more_info { 613 .more_info {
616 .more_fixed1 { 614 .more_fixed1 {
617 display: flex; 615 display: flex;
618 justify-content: space-between; 616 justify-content: space-between;
619 align-content: center; 617 align-content: center;
620 margin-bottom: 12px; 618 margin-bottom: 12px;
621 view { 619 view {
622 font-size: 14px; 620 font-size: 14px;
623 color: #333333; 621 color: #333333;
624 font-weight: bold; 622 font-weight: bold;
625 font-family: "PingFangSC-Medium"; 623 font-family: "PingFangSC-Medium";
626 line-height: 24px; 624 line-height: 24px;
627 } 625 }
628 image { 626 image {
629 width: 240rpx; 627 width: 240rpx;
630 height: 3px; 628 height: 3px;
631 margin-top: 10px; 629 margin-top: 10px;
632 } 630 }
633 } 631 }
634 .more_all { 632 .more_all {
635 width: 100%; 633 width: 100%;
636 margin-top: 30rpx; 634 margin-top: 30rpx;
637 margin-right: 30rpx; 635 margin-right: 30rpx;
638 margin-bottom: 180rpx; 636 margin-bottom: 180rpx;
639 font-family: "PingFangSC-Regular"; 637 font-family: "PingFangSC-Regular";
640 } 638 }
641 } 639 }
642 // 菜单 640 // 菜单
643 .menu { 641 .menu {
644 position: fixed; 642 position: fixed;
645 bottom: 0; 643 bottom: 0;
646 height: 74px; 644 height: 74px;
647 width: 100%; 645 width: 100%;
648 background: #ffffff; 646 background: #ffffff;
649 padding: 20px 20px 8px 20px; 647 padding: 20px 20px 8px 20px;
650 font-family: "PingFangSC-Regular"; 648 font-family: "PingFangSC-Regular";
651 box-sizing: border-box; 649 box-sizing: border-box;
652 display: flex; 650 display: flex;
653 justify-content: space-between; 651 justify-content: space-between;
654 align-content: center; 652 align-content: center;
655 margin: 0; 653 margin: 0;
656 /* iphonex 等安全区设置,底部安全区适配 */ 654 /* iphonex 等安全区设置,底部安全区适配 */
657 /* #ifndef APP-NVUE */ 655 /* #ifndef APP-NVUE */
658 padding-bottom: constant(safe-area-inset-bottom); 656 padding-bottom: constant(safe-area-inset-bottom);
659 padding-bottom: env(safe-area-inset-bottom); 657 padding-bottom: env(safe-area-inset-bottom);
660 .menu_1 { 658 .menu_1 {
661 width: 20%; 659 width: 20%;
662 height: 100%; 660 height: 100%;
663 text-align: center; 661 text-align: center;
664 color: #989898; 662 color: #989898;
665 .cart_icon { 663 .cart_icon {
666 position: relative; 664 position: relative;
667 text { 665 text {
668 position: absolute; 666 position: absolute;
669 color: white; 667 color: white;
670 font-size: 17px; 668 font-size: 17px;
671 background-color: red; 669 background-color: red;
672 min-height: 24px; 670 min-height: 24px;
673 min-width: 24px; 671 min-width: 24px;
674 line-height: 24px; 672 line-height: 24px;
675 right: -12%; 673 right: -12%;
676 top: -12px; 674 top: -12px;
677 text-align: center; 675 text-align: center;
678 border-radius: 24px; 676 border-radius: 24px;
679 padding: 2px; 677 padding: 2px;
680 } 678 }
681 } 679 }
682 } 680 }
683 image { 681 image {
684 width: 42%; 682 width: 42%;
685 height: 26px; 683 height: 26px;
686 } 684 }
687 .menu_image { 685 .menu_image {
688 font-size: 12px; 686 font-size: 12px;
689 text-align: center; 687 text-align: center;
690 } 688 }
691 .menu_2 { 689 .menu_2 {
692 width: 74%; 690 width: 74%;
693 height: 86%; 691 height: 86%;
694 display: grid; 692 display: grid;
695 grid-template-columns: 50% 50%; 693 grid-template-columns: 50% 50%;
696 } 694 }
697 .menu_input { 695 .menu_input {
698 display: inline-flex; 696 display: inline-flex;
699 align-items: center; 697 align-items: center;
700 justify-content: space-around; 698 justify-content: space-around;
701 background: #fff0ec; 699 background: #fff0ec;
702 font-size: 16px; 700 font-size: 16px;
703 color: #ff6b4a; 701 color: #ff6b4a;
704 border-radius: 20px 0 0 20px; 702 border-radius: 20px 0 0 20px;
705 } 703 }
706 .menu_now { 704 .menu_now {
707 display: inline-flex; 705 display: inline-flex;
708 align-items: center; 706 align-items: center;
709 justify-content: space-around; 707 justify-content: space-around;
710 background: #ff6b4a; 708 background: #ff6b4a;
711 font-size: 16px; 709 font-size: 16px;
712 color: #ffffff; 710 color: #ffffff;
713 border-radius: 0 20px 20px 0; 711 border-radius: 0 20px 20px 0;
714 } 712 }
715 } 713 }
716 } 714 }
717 </style> 715 </style>
718 716