刘文博 / gulu-vue

Download as
Browse Code »

Commit 7f3de0e04f2a96c41da28eba7b057b00f4954a29

Authored by BigBoss
2 parents 61d8252632 fe62536c34
Exists in master

Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue

Showing 4 changed files   Show diff stats
... ... @@ -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
Diff comments   View file @7f3de0e
... ... @@ -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/details.vue
Diff comments   View file @7f3de0e
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
Diff comments   View file @7f3de0e
... ... @@ -3,6 +3,7 @@ import request from &#39;../request&#39;
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 {
... ...