吉鹏 / gulu-vue

Download as
Browse Code »

Commit 76144650958e539d2bf1b00ee185082eea8b9795

Authored by 吉鹏
1 parent eed6c3ca9b
Exists in master

修改detao;s样式问题

Showing 1 changed file with 2 additions and 0 deletions   Show diff stats
src/pages/details/details.vue
Diff comments   View file @7614465
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 return { 374 return {
375 title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) 375 title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
376 path: '/pages/details/details?sid=0&pid=' + this.pid, 376 path: '/pages/details/details?sid=0&pid=' + this.pid,
377 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 377 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
378 success: function (res) { 378 success: function (res) {
379 if (res.errMsg === 'shareAppMessage:ok') { 379 if (res.errMsg === 'shareAppMessage:ok') {
380 console.log('分享成功！', res) 380 console.log('分享成功！', res)
381 } 381 }
382 }, 382 },
383 fail: function (res) { 383 fail: function (res) {
384 if (res.errMsg === 'shareAppMessage:fail cancel') { 384 if (res.errMsg === 'shareAppMessage:fail cancel') {
385 console.log('fail', '放弃分享') 385 console.log('fail', '放弃分享')
386 } else if (res.errMsg === 'shareAppMessage:fail') { 386 } else if (res.errMsg === 'shareAppMessage:fail') {
387 console.log('fail', '分享失败') 387 console.log('fail', '分享失败')
388 } 388 }
389 }, 389 },
390 } 390 }
391 }, 391 },
392 // 生成海报 392 // 生成海报
393 sharePost() { 393 sharePost() {
394 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' 394 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
395 395
396 store.dispatch('details/post', { 396 store.dispatch('details/post', {
397 pid: this.pid, 397 pid: this.pid,
398 sid: fromsid === 'undefined' ? 0 : fromsid, 398 sid: fromsid === 'undefined' ? 0 : fromsid,
399 }).then((data) => { 399 }).then((data) => {
400 uni.hideLoading() 400 uni.hideLoading()
401 this.$refs.uniPopupPost.open() 401 this.$refs.uniPopupPost.open()
402 }) 402 })
403 }, 403 },
404 // 参数选择弹窗开关 404 // 参数选择弹窗开关
405 showBottom(isCart) { 405 showBottom(isCart) {
406 this.isCart = isCart 406 this.isCart = isCart
407 this.isShowBottom = true 407 this.isShowBottom = true
408 }, 408 },
409 closeBottom() { 409 closeBottom() {
410 this.isShowBottom = false 410 this.isShowBottom = false
411 }, 411 },
412 // 前往购物车 412 // 前往购物车
413 toCart() { 413 toCart() {
414 uni.switchTab({ 414 uni.switchTab({
415 url: '/pages/cart/cart', 415 url: '/pages/cart/cart',
416 success: res => {}, 416 success: res => {},
417 fail: (error) => { console.log('跳转购物车失败======>', error) }, 417 fail: (error) => { console.log('跳转购物车失败======>', error) },
418 complete: () => { console.log('toCart') }, 418 complete: () => { console.log('toCart') },
419 }) 419 })
420 }, 420 },
421 // 加入购物车 421 // 加入购物车
422 addCart (mpId, num, checkedSKU, skId, price) { 422 addCart (mpId, num, checkedSKU, skId, price) {
423 const addCartList = {} 423 const addCartList = {}
424 addCartList.mp_id = mpId 424 addCartList.mp_id = mpId
425 addCartList.sk_id = skId 425 addCartList.sk_id = skId
426 addCartList.num = num 426 addCartList.num = num
427 // addCartList.checkedSKU = checkedSKU 427 // addCartList.checkedSKU = checkedSKU
428 addCartList.pid = this.pid 428 addCartList.pid = this.pid
429 addCartList.price = price 429 addCartList.price = price
430 console.log('添加购物车的参数', addCartList) 430 console.log('添加购物车的参数', addCartList)
431 store.dispatch('cart/addCart', addCartList).then((res) => { 431 store.dispatch('cart/addCart', addCartList).then((res) => {
432 if (res.code === 1) { 432 if (res.code === 1) {
433 uni.showToast({ 433 uni.showToast({
434 title: '添加成功~', 434 title: '添加成功~',
435 icon: 'success', 435 icon: 'success',
436 }) 436 })
437 } 437 }
438 // 再次请求购物车接口，实现实时更新 438 // 再次请求购物车接口，实现实时更新
439 store.dispatch('details/getCartNumber') 439 store.dispatch('details/getCartNumber')
440 }) 440 })
441 }, 441 },
442 }, 442 },
443 } 443 }
444 </script> 444 </script>
445 445
446 <style lang="scss"> 446 <style lang="scss">
447 .container { 447 .container {
448 background-color: #f8f8f8; 448 background-color: #f8f8f8;
449 font-family: "PingFangSC-Regular"; 449 font-family: "PingFangSC-Regular";
450 // 板块样式 450 // 板块样式
451 > view { 451 > view {
452 background: #ffffff; 452 background: #ffffff;
453 margin-bottom: 10px; 453 margin-bottom: 10px;
454 padding: 8px 20px 8px 20px; 454 padding: 8px 20px 8px 20px;
455 box-sizing: border-box; 455 box-sizing: border-box;
456 } 456 }
457 // 基础信息板块 457 // 基础信息板块
458 .basic_info { 458 .basic_info {
459 // 轮播图 459 // 轮播图
460 .swiperImage { 460 .swiperImage {
461 width: 684rpx; 461 width: 684rpx;
462 height: 480rpx; 462 height: 480rpx;
463 text-align: center; 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 /* #endif */
715
714 } 716 }
715 </style> 717 </style>
716 718