刘文博 / gulu-vue

Download as
Browse Code »

Commit 25347a0061960dc547dfc13cf976d8c38e5b2f22

Authored by 范牧
1 parent 01b15d67e9
Exists in master

详情页重构

Showing 5 changed files with 177 additions and 82 deletions   Show diff stats
... ... @@ -37,6 +37,12 @@
37 37 }
38 38 },
39 39 {
  40 + "path": "pages/details/details",
  41 + "style": {
  42 + "navigationBarTitleText": "产品详情"
  43 + }
  44 + },
  45 + {
40 46 "path": "pages/myOrderPaying/myOrderPaying",
41 47 "style": {
42 48 "navigationBarTitleText": "我的订单"
... ... @@ -169,7 +175,7 @@
169 175 },
170 176 {
171 177 "name": "产品详情",
172   - "path": "pages/frameDetail/frameDetail",
  178 + "path": "pages/details/details",
173 179 "query": ""
174 180 },
175 181 {
... ...
src/pages/details/details.vue
Diff comments   View file @25347a0
... ... @@ -0,0 +1,145 @@
  1 +<template>
  2 + <view class="container">
  3 + <view class="info">
  4 + <!-- 轮播图 -->
  5 + <swiper
  6 + class="swiperImage"
  7 + :indicator-dots="true"
  8 + :autoplay="true"
  9 + :interval="4000"
  10 + :duration="500"
  11 + >
  12 + <swiper-item
  13 + v-for="(item, index) in goodInfo.pics"
  14 + :key="index"
  15 + >
  16 + <image
  17 + :src="item"
  18 + mode="scaleToFill"
  19 + ></image>
  20 + </swiper-item>
  21 + </swiper>
  22 + <!-- 产品价格及购买人数 -->
  23 + <view class="info_pay">
  24 + ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
  25 + <span class="info_pay_number">{{goodInfo.trade_num || '暂无'}}人购买过</span>
  26 + </view>
  27 + <!-- 产品名称 -->
  28 + <view class="info_name">
  29 + <span>{{goodInfo.p_name || '暂无'}}</span>
  30 + </view>
  31 + <!-- 产品售后信息 -->
  32 + <view class="info_after">
  33 + <span>支持7天无理由退货</span>
  34 + <span>顺丰发货</span>
  35 + <span>30天质量保证</span>
  36 + </view>
  37 + </view>
  38 + </view>
  39 +</template>
  40 +
  41 +<script>
  42 +import store from '@/store'
  43 +// import BottomSheet from '@/components/BottomSheet.vue'
  44 +
  45 +export default {
  46 + components: {},
  47 + data () {
  48 + return {
  49 + pid: 7, // 产品ID
  50 + }
  51 + },
  52 + onLoad({ pid = this.pid, sk_id: skId }) {
  53 + this.pid = pid
  54 +
  55 + // 获取产品详情
  56 + this.getDetails({ pid, skId })
  57 + },
  58 + computed: {
  59 +
  60 + },
  61 + methods: {
  62 + // 获取产品详情
  63 + getDetails({ pid, skId }) {
  64 + store.dispatch('read/fetch', {
  65 + pid,
  66 + sk_id: skId,
  67 + }).then((res) => {
  68 + // 储存规格参数
  69 + this.saveGlassInfo([
  70 + res.goodInfo.frame_width,
  71 + res.goodInfo.glass_heig,
  72 + res.goodInfo.glass_height,
  73 + res.goodInfo.nose_width,
  74 + res.goodInfo.leg_long,
  75 + res.goodInfo.weight,
  76 + ],
  77 + )
  78 + })
  79 + },
  80 + saveGlassInfo(infoArray) {
  81 +
  82 + },
  83 + },
  84 +}
  85 +</script>
  86 +
  87 +<style lang="scss">
  88 +.container {
  89 + background-color: #f8f8f8;
  90 + font-family: "PingFangSC-Regular";
  91 + // 板块样式
  92 + > view {
  93 + background: #ffffff;
  94 + margin-bottom: 10px;
  95 + padding: 8px 20px 8px 20px;
  96 + box-sizing: border-box;
  97 + }
  98 + // 信息板块
  99 + .info {
  100 + // 轮播图
  101 + .swiperImage {
  102 + width: 684rpx;
  103 + height: 480rpx;
  104 + image {
  105 + max-width: 100%;
  106 + max-height: 100%;
  107 + border-radius: 16rpx;
  108 + }
  109 + }
  110 + // 产品价格及购买人数
  111 + .info_pay {
  112 + color: #eb5d3b;
  113 + font-size: 18px;
  114 + margin-top: 5px;
  115 + font-family: "PingFangSC-Semibold";
  116 + display: flex;
  117 + justify-content: space-between;
  118 + .info_pay_number {
  119 + color: #999;
  120 + font-size: 14px;
  121 + }
  122 + }
  123 + // 产品名称
  124 + .info_name {
  125 + font-size: 16px;
  126 + font-family: "PingFangSC-Semibold";
  127 + margin-top: 5px;
  128 + > span {
  129 + height: 14px;
  130 + margin-right: 10px;
  131 + }
  132 + }
  133 + // 售后服务
  134 + .info_after {
  135 + font-size: 10px;
  136 + color: #999;
  137 + margin-top: 5px;
  138 + > span {
  139 + height: 14px;
  140 + margin-right: 10px;
  141 + }
  142 + }
  143 + }
  144 +}
  145 +</style>
... ...
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @25347a0
... ... @@ -20,7 +20,7 @@
20 20 mode="aspectFill"
21 21 style="width: 188rpx;height: 168rpx;"
22 22 ></image>
23   - </view>
  23 + </view>∂
24 24 <view class="infoRight">
25 25 <text class="goodName">{{goodInfo.p_name}}</text>
26 26 <text class="remarks">支持7天无理由退货 顺丰发货</text>
... ...
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @25347a0
... ... @@ -23,29 +23,13 @@
23 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 25 </view>
26   - <view
  26 + <!-- <view
27 27 class="D2"
28 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 29 >
30 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33   - </view>
34   - <!-- <view
35   - class="D2"
36   - v-if="updateGoodType == 1"
37   - >
38   - <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39   - <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40   - <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41   - </view>
42   - <view
43   - class="D2"
44   - v-if="updateGoodType == 3"
45   - >
46   - <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47   - <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48   - <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 33 </view> -->
50 34 <view class="D3">
51 35 <view class="screenBar">
... ... @@ -490,47 +474,7 @@ export default {
490 474 fail: (error) => { console.log('跳转参数选择失败======>', error) },
491 475 complete: () => { console.log('goPerchase') },
492 476 })
493   - // break
494   - // case '2':
495   - // uni.navigateTo({
496   - // url: '../detailStandard/detailStandard_k',
497   - // success: res => {},
498   - // fail: () => {},
499   - // complete: () => {}
500   - // })
501   - // break
502   - // case '3':
503   - // uni.navigateTo({
504   - // url: '../purchaseLenses/purchaseLenses',
505   - // success: res => {},
506   - // fail: () => {},
507   - // complete: () => {}
508   - // })
509   - // break
510   - // case '4':
511   - // uni.navigateTo({
512   - // url: '../detailStandard/detailStandard_sun',
513   - // success: res => {},
514   - // fail: () => {},
515   - // complete: () => {}
516   - // })
517   - // break
518   - // default :
519   - // break
520   - // }
521 477 },
522   - // 加入购物车
523   - // addCart () {
524   - // store.dispatch('cart/addCart', {
525   - // uid: this.$store.state.user.userInfo.uid,
526   - // openid: this.$store.state.user.userInfo.openid,
527   - // pid: this.pid,
528   - // checkedSKU: {},
529   - // })
530   - // store.dispatch('cart/getCartList', {
531   - // uid: this.$store.state.user.userInfo.uid, // 用户id
532   - // })
533   - // },
534 478 tabChange (e) {
535 479 if (this.current !== e) {
536 480 this.current = e
... ...
src/store/modules/read.js
Diff comments   View file @25347a0
... ... @@ -2,57 +2,57 @@ import urlAlias from &#39;../url&#39;
2 2 import request from '../request'
3 3  
4 4 const {
5   - read
  5 + read,
6 6 } = urlAlias
7 7  
8 8 const state = {
9   - goodInfo: {}
  9 + goodInfo: {},
10 10 }
11 11  
12 12 const mutations = {
13 13 INIT: (state, goodInfo) => {
14 14 state.goodInfo = goodInfo
15   - }
  15 + },
16 16 }
17 17  
18 18 const actions = {
19 19 fetch({ commit }, param) {
20   - // 由于购物车和用户推荐的价格要根据sk_id来获取
21   - const arg=Object.assign({},param)
22   - delete param.sk_id
  20 + // 由于购物车和用户推荐的价格要根据sk_id来获取
  21 + const arg = Object.assign({}, param)
  22 + delete param.sk_id
23 23 return new Promise((resolve, reject) => request({
24 24 url: read,
25 25 data: param,
26 26 success: (res) => {
27   - console.log('readParm====>',arg)
28   - console.log('read====>',res.data.data)
29   - // 用一个新的对象来接收sk_id找的值
30   - const Res=Object.assign({},res.data.data)
31   - if(arg.sk_id!=undefined){
32   - for (let i = 0; i < res.data.data.skuList.length; i++) {
33   - if(res.data.data.skuList[i].sk_id==arg.sk_id){
34   - Res.p_sale_price= res.data.data.skuList[i].real_price
35   - console.log('陈工了')
36   - }
37   - }
38   - }
39   - console.log(Res)
  27 + console.log('readParm====>', arg)
  28 + console.log('read====>', res.data.data)
  29 + // 用一个新的对象来接收sk_id找的值
  30 + const Res = Object.assign({}, res.data.data)
  31 + if (arg.sk_id !== undefined) {
  32 + for (let i = 0; i < res.data.data.skuList.length; i++) {
  33 + if (res.data.data.skuList[i].sk_id === arg.sk_id) {
  34 + Res.p_sale_price = res.data.data.skuList[i].real_price
  35 + console.log('陈工了')
  36 + }
  37 + }
  38 + }
  39 + console.log(Res)
40 40 commit('INIT', Res)
41   - resolve()
  41 + resolve(res)
42 42 },
43 43 fail: (res) => {
44 44 console.log('fail status === > ', res)
45 45 },
46 46 complete: (res) => {
47 47 console.log('complete status === > ', res)
48   - }
  48 + },
49 49 }))
50   - }
  50 + },
51 51 }
52 52  
53 53 export default {
54 54 namespaced: true,
55 55 state,
56 56 mutations,
57   - actions
  57 + actions,
58 58 }
... ...