Commit 530bb7e836a6337c7d71e8248779fb48a55b10a0
1 parent
3cda19af7e
Exists in
master
重构详情页-商品介绍
Showing
5 changed files
with
564 additions
and
35 deletions
Show diff stats
src/pages.json
| ... | ... | @@ -132,25 +132,25 @@ |
| 132 | 132 | "navigationBarTitleText": "验光数据" |
| 133 | 133 | } |
| 134 | 134 | } |
| 135 | - ], | |
| 136 | - "subpackages": [ | |
| 137 | - { | |
| 138 | - "root": "pages/refundment", | |
| 139 | - "pages": [ | |
| 140 | - "pages/refundment/refundWays", | |
| 141 | - "pages/refundment/refundment", | |
| 142 | - "pages/refundProgress/refundProgress" | |
| 143 | - ] | |
| 144 | - }, | |
| 145 | - { | |
| 146 | - "root": "pages/address", | |
| 147 | - "name": "pack2", | |
| 148 | - "pages": [ | |
| 149 | - "pages/address/addAddress", | |
| 150 | - "pages/address/addressList" | |
| 151 | - ] | |
| 152 | - } | |
| 153 | - ], | |
| 135 | + ], | |
| 136 | + "subpackages": [ | |
| 137 | + { | |
| 138 | + "root": "pages/refundment", | |
| 139 | + "pages": [ | |
| 140 | + "pages/refundment/refundWays", | |
| 141 | + "pages/refundment/refundment", | |
| 142 | + "pages/refundProgress/refundProgress" | |
| 143 | + ] | |
| 144 | + }, | |
| 145 | + { | |
| 146 | + "root": "pages/address", | |
| 147 | + "name": "pack2", | |
| 148 | + "pages": [ | |
| 149 | + "pages/address/addAddress", | |
| 150 | + "pages/address/addressList" | |
| 151 | + ] | |
| 152 | + } | |
| 153 | + ], | |
| 154 | 154 | "globalStyle": { |
| 155 | 155 | "navigationBarTextStyle": "black", |
| 156 | 156 | "navigationBarTitleText": "uni-app", |
| ... | ... | @@ -186,11 +186,11 @@ |
| 186 | 186 | "condition": { |
| 187 | 187 | "current": 0, |
| 188 | 188 | "list": [ |
| 189 | - // { | |
| 190 | - // "name": "首页", | |
| 191 | - // "path": "pages/test/index", | |
| 192 | - // "query": "" | |
| 193 | - // }, | |
| 189 | + // { | |
| 190 | + // "name": "首页", | |
| 191 | + // "path": "pages/test/index", | |
| 192 | + // "query": "" | |
| 193 | + // }, | |
| 194 | 194 | { |
| 195 | 195 | "name": "首页", |
| 196 | 196 | "path": "pages/index/index", |
| ... | ... | @@ -202,6 +202,11 @@ |
| 202 | 202 | "query": "" |
| 203 | 203 | }, |
| 204 | 204 | { |
| 205 | + "name": "旧版产品详情", | |
| 206 | + "path": "pages/frameDetail/frameDetail", | |
| 207 | + "query": "" | |
| 208 | + }, | |
| 209 | + { | |
| 205 | 210 | "name": "镜片、美瞳参数选择", |
| 206 | 211 | "path": "pages/purchaseLenses/purchaseLenses", |
| 207 | 212 | "query": "" | ... | ... |
src/pages/details/components/Introduce.vue
| ... | ... | @@ -0,0 +1,148 @@ |
| 1 | +<template> | |
| 2 | + <view class="introduce"> | |
| 3 | + <!-- 迭代时建议配合接口修改 为数组 --> | |
| 4 | + <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> | |
| 5 | + <view> | |
| 6 | + 年龄：<view | |
| 7 | + v-for="(item,index) in tag.prod_tag_age" | |
| 8 | + :key="index" | |
| 9 | + > | |
| 10 | + {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> | |
| 11 | + </view> | |
| 12 | + </view> | |
| 13 | + </view> | |
| 14 | + <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> | |
| 15 | + <view> | |
| 16 | + 颜色：<view | |
| 17 | + v-for="(item,index) in tag.prod_tag_color" | |
| 18 | + :key="index" | |
| 19 | + > | |
| 20 | + {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + </view> | |
| 24 | + <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> | |
| 25 | + <view> | |
| 26 | + 脸型：<view | |
| 27 | + v-for="(item,index) in tag.prod_tag_face" | |
| 28 | + :key="index" | |
| 29 | + > | |
| 30 | + {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> | |
| 31 | + </view> | |
| 32 | + </view> | |
| 33 | + </view> | |
| 34 | + <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> | |
| 35 | + <view> | |
| 36 | + 赠品：<view | |
| 37 | + v-for="(item,index) in tag.prod_tag_freesend" | |
| 38 | + :key="index" | |
| 39 | + > | |
| 40 | + {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> | |
| 41 | + </view> | |
| 42 | + </view> | |
| 43 | + </view> | |
| 44 | + <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> | |
| 45 | + <view> | |
| 46 | + 保险：<view | |
| 47 | + v-for="(item,index) in tag.prod_tag_insurance" | |
| 48 | + :key="index" | |
| 49 | + > | |
| 50 | + {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> | |
| 51 | + </view> | |
| 52 | + </view> | |
| 53 | + </view> | |
| 54 | + <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> | |
| 55 | + <view> | |
| 56 | + 材质：<view | |
| 57 | + v-for="(item,index) in tag.prod_tag_metal" | |
| 58 | + :key="index" | |
| 59 | + > | |
| 60 | + {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> | |
| 61 | + </view> | |
| 62 | + </view> | |
| 63 | + </view> | |
| 64 | + <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> | |
| 65 | + <view> | |
| 66 | + 个性：<view | |
| 67 | + v-for="(item,index) in tag.prod_tag_personal" | |
| 68 | + :key="index" | |
| 69 | + > | |
| 70 | + {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> | |
| 71 | + </view> | |
| 72 | + </view> | |
| 73 | + </view> | |
| 74 | + <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> | |
| 75 | + <view> | |
| 76 | + 场景：<view | |
| 77 | + v-for="(item,index) in tag.prod_tag_sense" | |
| 78 | + :key="index" | |
| 79 | + > | |
| 80 | + {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> | |
| 81 | + </view> | |
| 82 | + </view> | |
| 83 | + </view> | |
| 84 | + <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> | |
| 85 | + <view> | |
| 86 | + 性别：<view | |
| 87 | + v-for="(item,index) in tag.prod_tag_sex" | |
| 88 | + :key="index" | |
| 89 | + > | |
| 90 | + {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> | |
| 91 | + </view> | |
| 92 | + </view> | |
| 93 | + </view> | |
| 94 | + <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> | |
| 95 | + <view> | |
| 96 | + 风格：<view | |
| 97 | + v-for="(item,index) in tag.prod_tag_style" | |
| 98 | + :key="index" | |
| 99 | + > | |
| 100 | + {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> | |
| 101 | + </view> | |
| 102 | + </view> | |
| 103 | + </view> | |
| 104 | + <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> | |
| 105 | + <view> | |
| 106 | + 重量：<view | |
| 107 | + v-for="(item,index) in tag.prod_tag_weight" | |
| 108 | + :key="index" | |
| 109 | + > | |
| 110 | + {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> | |
| 111 | + </view> | |
| 112 | + </view> | |
| 113 | + </view> | |
| 114 | + </view> | |
| 115 | +</template> | |
| 116 | + | |
| 117 | +<script> | |
| 118 | +export default { | |
| 119 | + props: { | |
| 120 | + tag: Object, | |
| 121 | + }, | |
| 122 | + created() { | |
| 123 | + console.log('lalal') | |
| 124 | + console.log('tag', this) | |
| 125 | + }, | |
| 126 | + updated() { | |
| 127 | + console.log('lalal-2') | |
| 128 | + console.log('tag-2', this.tag) | |
| 129 | + }, | |
| 130 | +} | |
| 131 | +</script> | |
| 132 | + | |
| 133 | +<style lang="scss" scoped> | |
| 134 | +.introduce { | |
| 135 | + margin-bottom: 4px; | |
| 136 | + view { | |
| 137 | + display: flex; | |
| 138 | + align-content: center; | |
| 139 | + font-size: 14px; | |
| 140 | + color: #333333; | |
| 141 | + } | |
| 142 | + span { | |
| 143 | + margin-left: 6px; | |
| 144 | + margin-right: 5px; | |
| 145 | + font-family: "PingFangSC-Regular"; | |
| 146 | + } | |
| 147 | +} | |
| 148 | +</style> | ... | ... |
src/pages/details/components/Specification.vue
src/pages/details/details.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="container"> |
| 3 | + <!-- 基础信息 --> | |
| 3 | 4 | <view class="basic_info"> |
| 4 | 5 | <!-- 轮播图 --> |
| 5 | 6 | <swiper |
| ... | ... | @@ -42,18 +43,46 @@ |
| 42 | 43 | <span>30天质量保证</span> |
| 43 | 44 | </view> |
| 44 | 45 | </view> |
| 46 | + <!-- 详细信息 --> | |
| 45 | 47 | <view class="detail_info"> |
| 46 | 48 | <!-- 详细信息菜单 --> |
| 47 | 49 | <view class="screen_bar"> |
| 48 | 50 | <view |
| 49 | - v-for="item in screenItems" | |
| 50 | - :key="item.current" | |
| 51 | - @click="tabChange(item.current)" | |
| 51 | + v-for="(item, index) in screenItems" | |
| 52 | + :key="index" | |
| 53 | + @click="tabChange(index)" | |
| 52 | 54 | > |
| 53 | 55 | <view |
| 54 | 56 | class="screen_item" |
| 55 | - v-bind:class="{ item_active: item_current === item.current }" | |
| 56 | - >{{ item.text || '暂无' }}</view> | |
| 57 | + v-bind:class="{ item_active: item_current === index }" | |
| 58 | + >{{ screenItems[index] || '暂无' }}</view> | |
| 59 | + </view> | |
| 60 | + </view> | |
| 61 | + <!-- 商品介绍 --> | |
| 62 | + <view | |
| 63 | + class="screen_item" | |
| 64 | + v-if="item_current === 0" | |
| 65 | + > | |
| 66 | + <Introduce :tag="tag" /> | |
| 67 | + </view> | |
| 68 | + <!-- 规格参数 --> | |
| 69 | + <view | |
| 70 | + class="screen_item" | |
| 71 | + v-if="item_current === 1" | |
| 72 | + > | |
| 73 | + <view class="specification"> | |
| 74 | + <view | |
| 75 | + class="spe_item" | |
| 76 | + v-for="(item, index) in specification" | |
| 77 | + :key="index" | |
| 78 | + > | |
| 79 | + <image | |
| 80 | + class="spe_image" | |
| 81 | + v-bind:src="item.img" | |
| 82 | + ></image> | |
| 83 | + <span>{{item.standard || '暂无'}}</span> | |
| 84 | + <span>{{item.slength || '暂无'}}</span> | |
| 85 | + </view> | |
| 57 | 86 | </view> |
| 58 | 87 | </view> |
| 59 | 88 | <!-- 售后保障 --> |
| ... | ... | @@ -64,16 +93,89 @@ |
| 64 | 93 | <AfterSails /> |
| 65 | 94 | </view> |
| 66 | 95 | </view> |
| 96 | + <!-- 评价 --> | |
| 97 | + <template v-if="item_current !== 2"> | |
| 98 | + <view class="evaluate"> | |
| 99 | + <!-- 标题 --> | |
| 100 | + <view class="evaluate_title"> | |
| 101 | + <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> | |
| 102 | + <!-- 星星 --> | |
| 103 | + <view class="evaluate_star"> | |
| 104 | + <view | |
| 105 | + class="star" | |
| 106 | + v-for="(item, index) in evaluate.star" | |
| 107 | + :key="index" | |
| 108 | + > | |
| 109 | + <image | |
| 110 | + src="../../static/img/detail/d_star.png" | |
| 111 | + mode="aspectFill" | |
| 112 | + style="height: 26rpx; width: 28rpx;" | |
| 113 | + ></image> | |
| 114 | + </view> | |
| 115 | + </view> | |
| 116 | + </view> | |
| 117 | + <!-- 标签 --> | |
| 118 | + <view class="evaluate_tag"> | |
| 119 | + <view | |
| 120 | + v-for="(item, index) in evaluate.tag" | |
| 121 | + :key="index" | |
| 122 | + >{{item.name}}</view> | |
| 123 | + </view> | |
| 124 | + </view> | |
| 125 | + </template> | |
| 126 | + <!-- 商品详情页 --> | |
| 127 | + <template v-if="current !==2"> | |
| 128 | + <view class="more_info"> | |
| 129 | + <view | |
| 130 | + class="more_fixed1" | |
| 131 | + @click="consolg(goodInfo.prodIntro1)" | |
| 132 | + > | |
| 133 | + <image src="/static/img/detail/hr.png"></image> | |
| 134 | + <view>商品详情</view> | |
| 135 | + <image src="/static/img/detail/hr.png"></image> | |
| 136 | + </view> | |
| 137 | + <view | |
| 138 | + class="more_all" | |
| 139 | + v-html="more" | |
| 140 | + > | |
| 141 | + </view> | |
| 142 | + </view> | |
| 143 | + </template> | |
| 144 | + <!-- 底部菜单 --> | |
| 145 | + <view class="menu"> | |
| 146 | + <view | |
| 147 | + @tap="toCart()" | |
| 148 | + class="menu_1" | |
| 149 | + > | |
| 150 | + <view class="cart_icon"> | |
| 151 | + <image src="/static/tab-cart.png" /> | |
| 152 | + <text>{{cartNumber}}</text> | |
| 153 | + </view> | |
| 154 | + <view class="menu_image">购物车</view> | |
| 155 | + </view> | |
| 156 | + <view class="menu_2"> | |
| 157 | + <view | |
| 158 | + class="menu_input" | |
| 159 | + @tap="showBottom(1)" | |
| 160 | + >加入购物车</view> | |
| 161 | + <view | |
| 162 | + class="menu_now" | |
| 163 | + @click="showBottom(2)" | |
| 164 | + >立即购买</view> | |
| 165 | + </view> | |
| 166 | + </view> | |
| 67 | 167 | </view> |
| 68 | 168 | </template> |
| 69 | 169 | |
| 70 | 170 | <script> |
| 71 | 171 | import store from '@/store' |
| 72 | -import AfterSails from './components/AfterSails' | |
| 172 | +import Introduce from './components/Introduce' // 商品介绍基本信息 | |
| 173 | +import AfterSails from './components/AfterSails' // 售后保障组件 | |
| 73 | 174 | // import BottomSheet from '@/components/BottomSheet.vue' |
| 74 | 175 | |
| 75 | 176 | export default { |
| 76 | 177 | components: { |
| 178 | + Introduce, | |
| 77 | 179 | AfterSails, |
| 78 | 180 | }, |
| 79 | 181 | data () { |
| ... | ... | @@ -83,18 +185,21 @@ export default { |
| 83 | 185 | // 详细信息菜单 |
| 84 | 186 | item_current: 0, |
| 85 | 187 | screenItems: [ |
| 86 | - { current: 0, text: '商品介绍' }, | |
| 87 | - { current: 1, text: '规格参数' }, | |
| 88 | - { current: 2, text: '售后保障' }, | |
| 188 | + '商品介绍', | |
| 189 | + '规格参数', | |
| 190 | + '售后保障', | |
| 89 | 191 | ], |
| 90 | 192 | } |
| 91 | 193 | }, |
| 92 | 194 | onLoad({ pid = this.pid, sk_id: skId }) { |
| 195 | + // 根据页面传参请求页面数据 | |
| 93 | 196 | this.pid = pid |
| 94 | 197 | this.skId = skId |
| 95 | 198 | |
| 96 | 199 | // 获取产品详情 |
| 97 | 200 | this.getDetails({ pid, skId }) |
| 201 | + // 获取购物车数据 | |
| 202 | + this.getCartNum() | |
| 98 | 203 | }, |
| 99 | 204 | computed: { |
| 100 | 205 | // 获取轮播图数据 |
| ... | ... | @@ -105,6 +210,26 @@ export default { |
| 105 | 210 | goodsInfo() { |
| 106 | 211 | return this.$store.state.details.goodsInfo |
| 107 | 212 | }, |
| 213 | + // 商品介绍商品标签 | |
| 214 | + tag() { | |
| 215 | + return this.$store.state.details.tag | |
| 216 | + }, | |
| 217 | + // 规格参数 | |
| 218 | + specification() { | |
| 219 | + return this.$store.state.details.specification | |
| 220 | + }, | |
| 221 | + // 评价 | |
| 222 | + evaluate() { | |
| 223 | + return this.$store.state.details.evaluate | |
| 224 | + }, | |
| 225 | + // 商品详情 | |
| 226 | + more() { | |
| 227 | + return this.$store.state.details.more | |
| 228 | + }, | |
| 229 | + // 购物车数目 | |
| 230 | + cartNumber() { | |
| 231 | + return this.$store.state.details.cartNumber | |
| 232 | + }, | |
| 108 | 233 | }, |
| 109 | 234 | methods: { |
| 110 | 235 | // 获取产品详情 |
| ... | ... | @@ -114,6 +239,10 @@ export default { |
| 114 | 239 | sk_id: skId, |
| 115 | 240 | }) |
| 116 | 241 | }, |
| 242 | + // 获取购物车数目 | |
| 243 | + getCartNum() { | |
| 244 | + store.dispatch('details/getCartNumber') | |
| 245 | + }, | |
| 117 | 246 | // 切换详细信息菜单 |
| 118 | 247 | tabChange (e) { |
| 119 | 248 | if (this.current !== e) { |
| ... | ... | @@ -208,6 +337,7 @@ export default { |
| 208 | 337 | } |
| 209 | 338 | // 详细信息 |
| 210 | 339 | .detail_info { |
| 340 | + margin-bottom: 20rpx; | |
| 211 | 341 | .screen_bar { |
| 212 | 342 | width: 670rpx; |
| 213 | 343 | margin-top: 20rpx; |
| ... | ... | @@ -228,6 +358,161 @@ export default { |
| 228 | 358 | color: #333333; |
| 229 | 359 | display: flex; |
| 230 | 360 | transition: all 0.2s; |
| 361 | + // 规格参数 | |
| 362 | + .specification { | |
| 363 | + margin-bottom: 4px; | |
| 364 | + .spe_item { | |
| 365 | + image { | |
| 366 | + width: 50px; | |
| 367 | + height: 25px; | |
| 368 | + margin-right: 6px; | |
| 369 | + vertical-align: middle; | |
| 370 | + } | |
| 371 | + span { | |
| 372 | + margin-left: 24rpx; | |
| 373 | + } | |
| 374 | + } | |
| 375 | + } | |
| 376 | + } | |
| 377 | + // | |
| 378 | + } | |
| 379 | + // 宝贝好评率 | |
| 380 | + .evaluate { | |
| 381 | + .evaluate_title { | |
| 382 | + font-size: 14px; | |
| 383 | + color: #333333; | |
| 384 | + display: flex; | |
| 385 | + justify-content: space-between; | |
| 386 | + .title_rate { | |
| 387 | + margin-left: 10rpx; | |
| 388 | + } | |
| 389 | + .evaluate_star { | |
| 390 | + width: 90px; | |
| 391 | + display: flex; | |
| 392 | + align-items: center; | |
| 393 | + justify-content: space-between; | |
| 394 | + } | |
| 395 | + view { | |
| 396 | + font-size: 14px; | |
| 397 | + color: #333333; | |
| 398 | + font-weight: bold; | |
| 399 | + } | |
| 400 | + } | |
| 401 | + .evaluate_tag { | |
| 402 | + view { | |
| 403 | + display: inline-block; | |
| 404 | + margin-right: 20rpx; | |
| 405 | + min-width: 180rpx; | |
| 406 | + margin-top: 10px; | |
| 407 | + height: 48rpx; | |
| 408 | + background: #f2f2f2; | |
| 409 | + border-radius: 2px; | |
| 410 | + font-family: PingFangSC-Regular; | |
| 411 | + font-size: 12px; | |
| 412 | + color: #666666; | |
| 413 | + letter-spacing: -0.23px; | |
| 414 | + text-align: center; | |
| 415 | + padding: 0 48rpx; | |
| 416 | + line-height: 48rpx; | |
| 417 | + } | |
| 418 | + } | |
| 419 | + } | |
| 420 | + // 商品详情 | |
| 421 | + .more_info { | |
| 422 | + .more_fixed1 { | |
| 423 | + display: flex; | |
| 424 | + justify-content: space-between; | |
| 425 | + align-content: center; | |
| 426 | + margin-bottom: 12px; | |
| 427 | + view { | |
| 428 | + font-size: 14px; | |
| 429 | + color: #333333; | |
| 430 | + font-weight: bold; | |
| 431 | + font-family: "PingFangSC-Medium"; | |
| 432 | + line-height: 24px; | |
| 433 | + } | |
| 434 | + image { | |
| 435 | + width: 240rpx; | |
| 436 | + height: 3px; | |
| 437 | + margin-top: 10px; | |
| 438 | + } | |
| 439 | + } | |
| 440 | + .more_all { | |
| 441 | + width: 100%; | |
| 442 | + margin-top: 30rpx; | |
| 443 | + margin-right: 30rpx; | |
| 444 | + margin-bottom: 180rpx; | |
| 445 | + font-family: "PingFangSC-Regular"; | |
| 446 | + } | |
| 447 | + } | |
| 448 | + // 菜单 | |
| 449 | + .menu { | |
| 450 | + position: fixed; | |
| 451 | + bottom: 0; | |
| 452 | + height: 74px; | |
| 453 | + width: 100%; | |
| 454 | + background: #ffffff; | |
| 455 | + padding: 20px 20px 8px 20px; | |
| 456 | + font-family: "PingFangSC-Regular"; | |
| 457 | + box-sizing: border-box; | |
| 458 | + display: flex; | |
| 459 | + justify-content: space-between; | |
| 460 | + align-content: center; | |
| 461 | + margin: 0; | |
| 462 | + .menu_1 { | |
| 463 | + width: 20%; | |
| 464 | + height: 100%; | |
| 465 | + text-align: center; | |
| 466 | + color: #989898; | |
| 467 | + .cart_icon { | |
| 468 | + position: relative; | |
| 469 | + text { | |
| 470 | + position: absolute; | |
| 471 | + color: white; | |
| 472 | + font-size: 17px; | |
| 473 | + background-color: red; | |
| 474 | + min-height: 24px; | |
| 475 | + min-width: 24px; | |
| 476 | + line-height: 24px; | |
| 477 | + right: -12%; | |
| 478 | + top: -12px; | |
| 479 | + text-align: center; | |
| 480 | + border-radius: 24px; | |
| 481 | + padding: 2px; | |
| 482 | + } | |
| 483 | + } | |
| 484 | + } | |
| 485 | + image { | |
| 486 | + width: 42%; | |
| 487 | + height: 26px; | |
| 488 | + } | |
| 489 | + .menu_image { | |
| 490 | + font-size: 12px; | |
| 491 | + text-align: center; | |
| 492 | + } | |
| 493 | + .menu_2 { | |
| 494 | + width: 74%; | |
| 495 | + height: 86%; | |
| 496 | + display: grid; | |
| 497 | + grid-template-columns: 50% 50%; | |
| 498 | + } | |
| 499 | + .menu_input { | |
| 500 | + display: inline-flex; | |
| 501 | + align-items: center; | |
| 502 | + justify-content: space-around; | |
| 503 | + background: #fff0ec; | |
| 504 | + font-size: 16px; | |
| 505 | + color: #ff6b4a; | |
| 506 | + border-radius: 20px 0 0 20px; | |
| 507 | + } | |
| 508 | + .menu_now { | |
| 509 | + display: inline-flex; | |
| 510 | + align-items: center; | |
| 511 | + justify-content: space-around; | |
| 512 | + background: #ff6b4a; | |
| 513 | + font-size: 16px; | |
| 514 | + color: #ffffff; | |
| 515 | + border-radius: 0 20px 20px 0; | |
| 231 | 516 | } |
| 232 | 517 | } |
| 233 | 518 | } | ... | ... |
src/store/modules/details.js
| ... | ... | @@ -3,6 +3,7 @@ import request from '../request' |
| 3 | 3 | |
| 4 | 4 | const { |
| 5 | 5 | read, |
| 6 | + cartList, | |
| 6 | 7 | } = urlAlias |
| 7 | 8 | |
| 8 | 9 | const state = { |
| ... | ... | @@ -17,21 +18,74 @@ const state = { |
| 17 | 18 | discountPrice: undefined, |
| 18 | 19 | tradeNumber: undefined, |
| 19 | 20 | }, |
| 21 | + // 商品介绍 | |
| 22 | + tag: { | |
| 23 | + prod_tag_style: [{ | |
| 24 | + label: '青春学子风', | |
| 25 | + value: '54', | |
| 26 | + }], | |
| 27 | + }, | |
| 28 | + // 规格参数 | |
| 29 | + specification: [ | |
| 30 | + { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, | |
| 31 | + { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, | |
| 32 | + { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, | |
| 33 | + { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, | |
| 34 | + { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, | |
| 35 | + { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' }, | |
| 36 | + ], | |
| 37 | + // 评价 | |
| 38 | + evaluate: { | |
| 39 | + rate: '100%', | |
| 40 | + star: 5, | |
| 41 | + tag: [{ name: '价格实惠' }], | |
| 42 | + }, | |
| 43 | + // 商品详情 | |
| 44 | + more: '', | |
| 45 | + // 购物车数目 | |
| 46 | + cartNumber: 0, | |
| 20 | 47 | } |
| 21 | 48 | |
| 22 | 49 | const mutations = { |
| 23 | - INIT: (state, { carousel, goodsInfo }) => { | |
| 50 | + INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more }) => { | |
| 24 | 51 | state.carousel = carousel |
| 25 | 52 | state.goodsInfo = goodsInfo |
| 53 | + state.tag = tag | |
| 54 | + state.specification = specification | |
| 55 | + state.evaluate = evaluate | |
| 56 | + state.more = more | |
| 57 | + }, | |
| 58 | + CART: (state, number) => { | |
| 59 | + state.cartNumber = number | |
| 26 | 60 | }, |
| 27 | 61 | } |
| 28 | 62 | |
| 29 | 63 | const actions = { |
| 30 | - details({ commit }, param) { | |
| 64 | + // 获取详情 | |
| 65 | + details({ commit, rootState }, param) { | |
| 31 | 66 | return new Promise((resolve, reject) => request({ |
| 32 | 67 | url: read, |
| 33 | 68 | data: param, |
| 34 | 69 | success: ({ data: { data } }) => { |
| 70 | + console.log('data.tag', data.tag) | |
| 71 | + // 规格参数设置 | |
| 72 | + const specification = rootState.details.specification | |
| 73 | + const parameter = { | |
| 74 | + frame_width: data.frame_width, | |
| 75 | + glass_width: data.glass_width, | |
| 76 | + glass_height: data.glass_height, | |
| 77 | + nose_width: data.nose_width, | |
| 78 | + leg_long: data.leg_long, | |
| 79 | + weight: data.weight, | |
| 80 | + } | |
| 81 | + for (let index = 0; index < specification.length; index++) { | |
| 82 | + if (specification[index].key !== 'weight') { | |
| 83 | + specification[index].slength = `${parameter[specification[index].key]}mm` | |
| 84 | + } else { | |
| 85 | + specification[index].slength = `${parameter[specification[index].key]}克（grams）` | |
| 86 | + } | |
| 87 | + } | |
| 88 | + | |
| 35 | 89 | commit('INIT', { |
| 36 | 90 | carousel: data.pics, |
| 37 | 91 | goodsInfo: { |
| ... | ... | @@ -40,6 +94,14 @@ const actions = { |
| 40 | 94 | discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount), |
| 41 | 95 | tradeNumber: data.trade_num, |
| 42 | 96 | }, |
| 97 | + tag: data.tag, | |
| 98 | + specification, | |
| 99 | + evaluate: { | |
| 100 | + rate: data.judgeInfo.good, | |
| 101 | + tag: data.judge_tag, | |
| 102 | + star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100), | |
| 103 | + }, | |
| 104 | + more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), | |
| 43 | 105 | }) |
| 44 | 106 | resolve(data) |
| 45 | 107 | }, |
| ... | ... | @@ -48,6 +110,21 @@ const actions = { |
| 48 | 110 | }, |
| 49 | 111 | })) |
| 50 | 112 | }, |
| 113 | + // 获取购物车列表 | |
| 114 | + getCartNumber({ commit }, param) { | |
| 115 | + return new Promise((resolve) => request({ | |
| 116 | + url: cartList, | |
| 117 | + data: param, | |
| 118 | + success: ({ data: { data } }) => { | |
| 119 | + console.log('cartData', data) | |
| 120 | + let number = 0 | |
| 121 | + for (let index = 0; index < data.length; index++) { | |
| 122 | + number += Number(data[index].num) | |
| 123 | + } | |
| 124 | + commit('CART', number) | |
| 125 | + }, | |
| 126 | + })) | |
| 127 | + }, | |
| 51 | 128 | } |
| 52 | 129 | |
| 53 | 130 | export default { | ... | ... |