Adam / gulu-vue

Blame view

src/pages/details/details.vue 3.03 KB
edit raw normal view history
25347a006   范牧   详情页重构 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
  <template>
    <view class="container">
      <view class="info">
        <!-- 轮播图 -->
        <swiper
          class="swiperImage"
          :indicator-dots="true"
          :autoplay="true"
          :interval="4000"
          :duration="500"
        >
          <swiper-item
            v-for="(item, index) in goodInfo.pics"
            :key="index"
          >
            <image
              :src="item"
              mode="scaleToFill"
            ></image>
          </swiper-item>
        </swiper>
        <!-- 产品价格及购买人数 -->
        <view class="info_pay">
          ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
          <span class="info_pay_number">{{goodInfo.trade_num || '暂无'}}人购买过</span>
        </view>
        <!-- 产品名称 -->
        <view class="info_name">
          <span>{{goodInfo.p_name || '暂无'}}</span>
        </view>
        <!-- 产品售后信息 -->
        <view class="info_after">
          <span>支持7天无理由退货</span>
          <span>顺丰发货</span>
          <span>30天质量保证</span>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import store from '@/store'
  // import BottomSheet from '@/components/BottomSheet.vue'
  
  export default {
    components: {},
    data () {
      return {
        pid: 7, // 产品ID
      }
    },
    onLoad({ pid = this.pid, sk_id: skId }) {
      this.pid = pid
  
      // 获取产品详情
      this.getDetails({ pid, skId })
    },
    computed: {
  
    },
    methods: {
      // 获取产品详情
      getDetails({ pid, skId }) {
        store.dispatch('read/fetch', {
          pid,
          sk_id: skId,
        }).then((res) => {
          // 储存规格参数
          this.saveGlassInfo([
            res.goodInfo.frame_width,
            res.goodInfo.glass_heig,
            res.goodInfo.glass_height,
            res.goodInfo.nose_width,
            res.goodInfo.leg_long,
            res.goodInfo.weight,
          ],
          )
        })
      },
      saveGlassInfo(infoArray) {
  
      },
    },
  }
  </script>
  
  <style lang="scss">
  .container {
    background-color: #f8f8f8;
    font-family: "PingFangSC-Regular";
    // 板块样式
    > view {
      background: #ffffff;
      margin-bottom: 10px;
      padding: 8px 20px 8px 20px;
      box-sizing: border-box;
    }
    // 信息板块
    .info {
      // 轮播图
      .swiperImage {
        width: 684rpx;
        height: 480rpx;
        image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 16rpx;
        }
      }
      // 产品价格及购买人数
      .info_pay {
        color: #eb5d3b;
        font-size: 18px;
        margin-top: 5px;
        font-family: "PingFangSC-Semibold";
        display: flex;
        justify-content: space-between;
        .info_pay_number {
          color: #999;
          font-size: 14px;
        }
      }
      // 产品名称
      .info_name {
        font-size: 16px;
        font-family: "PingFangSC-Semibold";
        margin-top: 5px;
        > span {
          height: 14px;
          margin-right: 10px;
        }
      }
      // 售后服务
      .info_after {
        font-size: 10px;
        color: #999;
        margin-top: 5px;
        > span {
          height: 14px;
          margin-right: 10px;
        }
      }
    }
  }
  </style>