刘文博 / 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
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path": "pages/user/user", 10 "path": "pages/user/user",
11 "style": { 11 "style": {
12 "navigationBarTitleText": "我的" 12 "navigationBarTitleText": "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path": "pages/addOpticsData/addOpticsData", 16 "path": "pages/addOpticsData/addOpticsData",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "验光数据" 18 "navigationBarTitleText": "验光数据"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "镜片名称名称" 24 "navigationBarTitleText": "镜片名称名称"
25 } 25 }
26 }, 26 },
27 { 27 {
28 "path": "pages/purchaseLenses/purchaseLenses", 28 "path": "pages/purchaseLenses/purchaseLenses",
29 "style": { 29 "style": {
30 "navigationBarTitleText": "参数选择" 30 "navigationBarTitleText": "参数选择"
31 } 31 }
32 }, 32 },
33 { 33 {
34 "path": "pages/lensDetails/lensDetails", 34 "path": "pages/lensDetails/lensDetails",
35 "style": { 35 "style": {
36 "navigationBarTitleText": "产品详情" 36 "navigationBarTitleText": "产品详情"
37 } 37 }
38 }, 38 },
39 { 39 {
40 "path": "pages/details/details", 40 "path": "pages/details/details",
41 "style": { 41 "style": {
42 "navigationBarTitleText": "产品详情" 42 "navigationBarTitleText": "产品详情"
43 } 43 }
44 }, 44 },
45 { 45 {
46 "path": "pages/myOrderPaying/myOrderPaying", 46 "path": "pages/myOrderPaying/myOrderPaying",
47 "style": { 47 "style": {
48 "navigationBarTitleText": "我的订单" 48 "navigationBarTitleText": "我的订单"
49 } 49 }
50 }, 50 },
51 { 51 {
52 "path": "pages/myOrder/myOrder", 52 "path": "pages/myOrder/myOrder",
53 "style": { 53 "style": {
54 "navigationBarTitleText": "我的订单" 54 "navigationBarTitleText": "我的订单"
55 } 55 }
56 }, 56 },
57 { 57 {
58 "path": "pages/cart/cart", 58 "path": "pages/cart/cart",
59 "style": { 59 "style": {
60 "navigationBarTitleText": "购物车", 60 "navigationBarTitleText": "购物车",
61 // "disableScroll":true, 61 // "disableScroll":true,
62 "app-plus":{ 62 "app-plus":{
63 "bounce":"none" 63 "bounce":"none"
64 } 64 }
65 } 65 }
66 }, 66 },
67 { 67 {
68 "path": "pages/frameDetail/frameDetail", 68 "path": "pages/frameDetail/frameDetail",
69 "style": { 69 "style": {
70 "navigationBarTitleText": "产品详情" 70 "navigationBarTitleText": "产品详情"
71 } 71 }
72 }, 72 },
73 // { 73 // {
74 // "path": "pages/refundProgress/refundProgress", 74 // "path": "pages/refundProgress/refundProgress",
75 // "style": { 75 // "style": {
76 // "navigationBarTitleText": "申请退款" 76 // "navigationBarTitleText": "申请退款"
77 // } 77 // }
78 // }, 78 // },
79 // { 79 // {
80 // "path": "pages/address/addAddress", 80 // "path": "pages/address/addAddress",
81 // "style": { 81 // "style": {
82 // "navigationBarTitleText": "新增地址" 82 // "navigationBarTitleText": "新增地址"
83 // } 83 // }
84 // }, 84 // },
85 // { 85 // {
86 // "path": "pages/address/addressList", 86 // "path": "pages/address/addressList",
87 // "style": { 87 // "style": {
88 // "navigationBarTitleText": "地址管理" 88 // "navigationBarTitleText": "地址管理"
89 // } 89 // }
90 // }, 90 // },
91 { 91 {
92 "path": "pages/confirmOrder/confirmOrder", 92 "path": "pages/confirmOrder/confirmOrder",
93 "style": { 93 "style": {
94 "navigationBarTitleText": "确认订单" 94 "navigationBarTitleText": "确认订单"
95 } 95 }
96 }, 96 },
97 // { 97 // {
98 // "path": "pages/refundment/refundWays", 98 // "path": "pages/refundment/refundWays",
99 // "style": { 99 // "style": {
100 // "navigationBarTitleText": "退款方式" 100 // "navigationBarTitleText": "退款方式"
101 // } 101 // }
102 // }, 102 // },
103 // { 103 // {
104 // "path": "pages/refundment/refundment", 104 // "path": "pages/refundment/refundment",
105 // "style": { 105 // "style": {
106 // "navigationBarTitleText": "申请退款" 106 // "navigationBarTitleText": "申请退款"
107 // } 107 // }
108 // }, 108 // },
109 { 109 {
110 "path": "pages/predelivery/predelivery", 110 "path": "pages/predelivery/predelivery",
111 "style": { 111 "style": {
112 "navigationBarTitleText": "待发货" 112 "navigationBarTitleText": "待发货"
113 } 113 }
114 }, 114 },
115 { 115 {
116 "path": "pages/customerService/customerService", 116 "path": "pages/customerService/customerService",
117 "style": { 117 "style": {
118 "navigationBarTitleText": "在线客服" 118 "navigationBarTitleText": "在线客服"
119 } 119 }
120 }, 120 },
121 { 121 {
122 "path": "pages/detailStandard/detailStandard_sun", 122 "path": "pages/detailStandard/detailStandard_sun",
123 "style": { 123 "style": {
124 "navigationBarTitleText": "太阳镜选购页" 124 "navigationBarTitleText": "太阳镜选购页"
125 } 125 }
126 }, 126 },
127 { 127 {
128 "path": "pages/detailStandard/detailStandard_k", 128 "path": "pages/detailStandard/detailStandard_k",
129 "style": { 129 "style": {
130 "navigationBarTitleText": "镜框选购页" 130 "navigationBarTitleText": "镜框选购页"
131 } 131 }
132 }, 132 },
133 { 133 {
134 "path": "pages/newOpticsData/newOpticsData", 134 "path": "pages/newOpticsData/newOpticsData",
135 "style": { 135 "style": {
136 "navigationBarTitleText": "验光数据" 136 "navigationBarTitleText": "验光数据"
137 } 137 }
138 } 138 }
139 ], 139 ],
140 "subpackages": [ 140 "subpackages": [
141 { 141 {
142 "root": "pages/refundment", 142 "root": "pages/refundment",
143 "pages": [ 143 "pages": [
144 "pages/refundment/refundWays", 144 "pages/refundment/refundWays",
145 "pages/refundment/refundment", 145 "pages/refundment/refundment",
146 "pages/refundProgress/refundProgress" 146 "pages/refundProgress/refundProgress"
147 ] 147 ]
148 }, 148 },
149 { 149 {
150 "root": "pages/address", 150 "root": "pages/address",
151 "name": "pack2", 151 "name": "pack2",
152 "pages": [ 152 "pages": [
153 "pages/address/addAddress", 153 "pages/address/addAddress",
154 "pages/address/addressList" 154 "pages/address/addressList"
155 ] 155 ]
156 } 156 }
157 ], 157 ],
158 "globalStyle": { 158 "globalStyle": {
159 "navigationBarTextStyle": "black", 159 "navigationBarTextStyle": "black",
160 "navigationBarTitleText": "uni-app", 160 "navigationBarTitleText": "uni-app",
161 "navigationBarBackgroundColor": "#F8F8F8", 161 "navigationBarBackgroundColor": "#F8F8F8",
162 "backgroundColor": "#F8F8F8" 162 "backgroundColor": "#F8F8F8"
163 }, 163 },
164 "tabBar": { 164 "tabBar": {
165 "color": "#C0C4CC", 165 "color": "#C0C4CC",
166 "selectedColor": "#fa436a", 166 "selectedColor": "#fa436a",
167 "borderStyle": "black", 167 "borderStyle": "black",
168 "backgroundColor": "#ffffff", 168 "backgroundColor": "#ffffff",
169 "list": [ 169 "list": [
170 { 170 {
171 "pagePath": "pages/index/index", 171 "pagePath": "pages/index/index",
172 "iconPath": "static/tab-home.png", 172 "iconPath": "static/tab-home.png",
173 "selectedIconPath": "static/tab-home-current.png", 173 "selectedIconPath": "static/tab-home-current.png",
174 "text": "首页" 174 "text": "首页"
175 }, 175 },
176 { 176 {
177 "pagePath": "pages/cart/cart", 177 "pagePath": "pages/cart/cart",
178 "iconPath": "static/tab-cart.png", 178 "iconPath": "static/tab-cart.png",
179 "selectedIconPath": "static/tab-cart-current.png", 179 "selectedIconPath": "static/tab-cart-current.png",
180 "text": "购物车" 180 "text": "购物车"
181 }, 181 },
182 { 182 {
183 "pagePath": "pages/user/user", 183 "pagePath": "pages/user/user",
184 "iconPath": "static/tab-my.png", 184 "iconPath": "static/tab-my.png",
185 "selectedIconPath": "static/tab-my-current.png", 185 "selectedIconPath": "static/tab-my-current.png",
186 "text": "我的" 186 "text": "我的"
187 } 187 }
188 ] 188 ]
189 }, 189 },
190 "condition": { 190 "condition": {
191 "current": 0, 191 "current": 0,
192 "list": [ 192 "list": [
193 // { 193 // {
194 // "name": "首页", 194 // "name": "首页",
195 // "path": "pages/test/index", 195 // "path": "pages/test/index",
196 // "query": "" 196 // "query": ""
197 // }, 197 // },
198 { 198 {
199 "name": "首页", 199 "name": "首页",
200 "path": "pages/index/index", 200 "path": "pages/index/index",
201 "query": "" 201 "query": ""
202 }, 202 },
203 { 203 {
204 "name": "产品详情", 204 "name": "产品详情",
205 "path": "pages/details/details",
206 "query": ""
207 },
208 {
209 "name": "旧版产品详情",
205 "path": "pages/details/details", 210 "path": "pages/frameDetail/frameDetail",
206 "query": "" 211 "query": ""
207 }, 212 },
208 { 213 {
209 "name": "镜片、美瞳参数选择", 214 "name": "镜片、美瞳参数选择",
210 "path": "pages/purchaseLenses/purchaseLenses", 215 "path": "pages/purchaseLenses/purchaseLenses",
211 "query": "" 216 "query": ""
212 }, 217 },
213 { 218 {
214 "name": "确认订单", 219 "name": "确认订单",
215 "path": "pages/confirmOrder/confirmOrder", 220 "path": "pages/confirmOrder/confirmOrder",
216 "query": "" 221 "query": ""
217 }, 222 },
218 { 223 {
219 "name": "新增地址", 224 "name": "新增地址",
220 "path": "pages/address/addAddress", 225 "path": "pages/address/addAddress",
221 "query": "" 226 "query": ""
222 }, 227 },
223 { 228 {
224 "name": "地址管理", 229 "name": "地址管理",
225 "path": "pages/address/addressList", 230 "path": "pages/address/addressList",
226 "query": "" 231 "query": ""
227 }, 232 },
228 { 233 {
229 "name": "我的订单", 234 "name": "我的订单",
230 "path": "pages/myOrder/myOrder", 235 "path": "pages/myOrder/myOrder",
231 "query": "" 236 "query": ""
232 }, 237 },
233 { 238 {
234 "name": "待付款订单详情", 239 "name": "待付款订单详情",
235 "path": "pages/myOrderPaying/myOrderPaying", 240 "path": "pages/myOrderPaying/myOrderPaying",
236 "query": "" 241 "query": ""
237 }, 242 },
238 { 243 {
239 "name": "我的", 244 "name": "我的",
240 "path": "pages/user/user", 245 "path": "pages/user/user",
241 "query": "" 246 "query": ""
242 } 247 }
243 ] 248 ]
244 } 249 }
245 } 250 }
src/pages/details/components/Introduce.vue
Diff comments   View file @7f3de0e
File was created 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>
149
src/pages/details/details.vue
Diff comments   View file @7f3de0e
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <!-- 基础信息 -->
3 <view class="basic_info"> 4 <view class="basic_info">
4 <!-- 轮播图 --> 5 <!-- 轮播图 -->
5 <swiper 6 <swiper
6 class="swiperImage" 7 class="swiperImage"
7 :indicator-dots="true" 8 :indicator-dots="true"
8 :autoplay="true" 9 :autoplay="true"
9 :interval="4000" 10 :interval="4000"
10 :duration="500" 11 :duration="500"
11 > 12 >
12 <swiper-item 13 <swiper-item
13 v-for="(item, index) in carousel" 14 v-for="(item, index) in carousel"
14 :key="index" 15 :key="index"
15 > 16 >
16 <image 17 <image
17 :src="item" 18 :src="item"
18 mode="scaleToFill" 19 mode="scaleToFill"
19 ></image> 20 ></image>
20 </swiper-item> 21 </swiper-item>
21 </swiper> 22 </swiper>
22 <!-- 产品价格及购买人数 --> 23 <!-- 产品价格及购买人数 -->
23 <view class="info_pay"> 24 <view class="info_pay">
24 <view>￥{{goodsInfo.price || '暂无'}}<span 25 <view>￥{{goodsInfo.price || '暂无'}}<span
25 v-if="goodsInfo.discountPrice" 26 v-if="goodsInfo.discountPrice"
26 class="info_pay_discount" 27 class="info_pay_discount"
27 >¥{{goodsInfo.discountPrice}}</span></view> 28 >¥{{goodsInfo.discountPrice}}</span></view>
28 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> 29 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
29 </view> 30 </view>
30 <!-- 产品名称 --> 31 <!-- 产品名称 -->
31 <view class="info_name"> 32 <view class="info_name">
32 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> 33 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
33 <view class="info_name_share"> 34 <view class="info_name_share">
34 <image src="/static/img/detail/share-icon.png"></image> 35 <image src="/static/img/detail/share-icon.png"></image>
35 <text>分享</text> 36 <text>分享</text>
36 </view> 37 </view>
37 </view> 38 </view>
38 <!-- 产品售后信息 --> 39 <!-- 产品售后信息 -->
39 <view class="info_after"> 40 <view class="info_after">
40 <span>支持7天无理由退货</span> 41 <span>支持7天无理由退货</span>
41 <span>顺丰发货</span> 42 <span>顺丰发货</span>
42 <span>30天质量保证</span> 43 <span>30天质量保证</span>
43 </view> 44 </view>
44 </view> 45 </view>
46 <!-- 详细信息 -->
45 <view class="detail_info"> 47 <view class="detail_info">
46 <!-- 详细信息菜单 --> 48 <!-- 详细信息菜单 -->
47 <view class="screen_bar"> 49 <view class="screen_bar">
48 <view 50 <view
49 v-for="item in screenItems" 51 v-for="(item, index) in screenItems"
50 :key="item.current" 52 :key="index"
51 @click="tabChange(item.current)" 53 @click="tabChange(index)"
52 > 54 >
53 <view 55 <view
54 class="screen_item" 56 class="screen_item"
55 v-bind:class="{ item_active: item_current === item.current }" 57 v-bind:class="{ item_active: item_current === index }"
56 >{{ item.text || '暂无' }}</view> 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 </view> 86 </view>
58 </view> 87 </view>
59 <!-- 售后保障 --> 88 <!-- 售后保障 -->
60 <view 89 <view
61 class="screen_item" 90 class="screen_item"
62 v-if="item_current === 2" 91 v-if="item_current === 2"
63 > 92 >
64 <AfterSails /> 93 <AfterSails />
65 </view> 94 </view>
66 </view> 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 </view> 167 </view>
68 </template> 168 </template>
69 169
70 <script> 170 <script>
71 import store from '@/store' 171 import store from '@/store'
72 import AfterSails from './components/AfterSails' 172 import Introduce from './components/Introduce' // 商品介绍基本信息
173 import AfterSails from './components/AfterSails' // 售后保障组件
73 // import BottomSheet from '@/components/BottomSheet.vue' 174 // import BottomSheet from '@/components/BottomSheet.vue'
74 175
75 export default { 176 export default {
76 components: { 177 components: {
178 Introduce,
77 AfterSails, 179 AfterSails,
78 }, 180 },
79 data () { 181 data () {
80 return { 182 return {
81 pid: 7, // 产品ID 183 pid: 7, // 产品ID
82 skId: undefined, // skuId 184 skId: undefined, // skuId
83 // 详细信息菜单 185 // 详细信息菜单
84 item_current: 0, 186 item_current: 0,
85 screenItems: [ 187 screenItems: [
86 { current: 0, text: '商品介绍' }, 188 '商品介绍',
87 { current: 1, text: '规格参数' }, 189 '规格参数',
88 { current: 2, text: '售后保障' }, 190 '售后保障',
89 ], 191 ],
90 } 192 }
91 }, 193 },
92 onLoad({ pid = this.pid, sk_id: skId }) { 194 onLoad({ pid = this.pid, sk_id: skId }) {
195 // 根据页面传参请求页面数据
93 this.pid = pid 196 this.pid = pid
94 this.skId = skId 197 this.skId = skId
95 198
96 // 获取产品详情 199 // 获取产品详情
97 this.getDetails({ pid, skId }) 200 this.getDetails({ pid, skId })
201 // 获取购物车数据
202 this.getCartNum()
98 }, 203 },
99 computed: { 204 computed: {
100 // 获取轮播图数据 205 // 获取轮播图数据
101 carousel() { 206 carousel() {
102 return this.$store.state.details.carousel 207 return this.$store.state.details.carousel
103 }, 208 },
104 // 商品基本信息 209 // 商品基本信息
105 goodsInfo() { 210 goodsInfo() {
106 return this.$store.state.details.goodsInfo 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 methods: { 234 methods: {
110 // 获取产品详情 235 // 获取产品详情
111 getDetails({ pid, skId }) { 236 getDetails({ pid, skId }) {
112 store.dispatch('details/details', { 237 store.dispatch('details/details', {
113 pid, 238 pid,
114 sk_id: skId, 239 sk_id: skId,
115 }) 240 })
116 }, 241 },
242 // 获取购物车数目
243 getCartNum() {
244 store.dispatch('details/getCartNumber')
245 },
117 // 切换详细信息菜单 246 // 切换详细信息菜单
118 tabChange (e) { 247 tabChange (e) {
119 if (this.current !== e) { 248 if (this.current !== e) {
120 this.item_current = e 249 this.item_current = e
121 } 250 }
122 }, 251 },
123 }, 252 },
124 } 253 }
125 </script> 254 </script>
126 255
127 <style lang="scss"> 256 <style lang="scss">
128 .container { 257 .container {
129 background-color: #f8f8f8; 258 background-color: #f8f8f8;
130 font-family: "PingFangSC-Regular"; 259 font-family: "PingFangSC-Regular";
131 // 板块样式 260 // 板块样式
132 > view { 261 > view {
133 background: #ffffff; 262 background: #ffffff;
134 margin-bottom: 10px; 263 margin-bottom: 10px;
135 padding: 8px 20px 8px 20px; 264 padding: 8px 20px 8px 20px;
136 box-sizing: border-box; 265 box-sizing: border-box;
137 } 266 }
138 // 基础信息板块 267 // 基础信息板块
139 .basic_info { 268 .basic_info {
140 // 轮播图 269 // 轮播图
141 .swiperImage { 270 .swiperImage {
142 width: 684rpx; 271 width: 684rpx;
143 height: 480rpx; 272 height: 480rpx;
144 image { 273 image {
145 max-width: 100%; 274 max-width: 100%;
146 max-height: 100%; 275 max-height: 100%;
147 border-radius: 16rpx; 276 border-radius: 16rpx;
148 } 277 }
149 } 278 }
150 // 产品价格及购买人数 279 // 产品价格及购买人数
151 .info_pay { 280 .info_pay {
152 color: #eb5d3b; 281 color: #eb5d3b;
153 font-size: 18px; 282 font-size: 18px;
154 margin-top: 5px; 283 margin-top: 5px;
155 font-family: "PingFangSC-Semibold"; 284 font-family: "PingFangSC-Semibold";
156 display: flex; 285 display: flex;
157 justify-content: space-between; 286 justify-content: space-between;
158 .info_pay_discount { 287 .info_pay_discount {
159 text-decoration: line-through; 288 text-decoration: line-through;
160 margin-left: 8rpx; 289 margin-left: 8rpx;
161 color: #999; 290 color: #999;
162 font-size: 14px; 291 font-size: 14px;
163 } 292 }
164 .info_pay_number { 293 .info_pay_number {
165 color: #999; 294 color: #999;
166 font-size: 14px; 295 font-size: 14px;
167 } 296 }
168 } 297 }
169 // 产品名称 298 // 产品名称
170 .info_name { 299 .info_name {
171 margin-top: 5px; 300 margin-top: 5px;
172 display: flex; 301 display: flex;
173 justify-content: space-between; 302 justify-content: space-between;
174 .info_name_name { 303 .info_name_name {
175 margin-right: 10px; 304 margin-right: 10px;
176 font-size: 16px; 305 font-size: 16px;
177 font-family: "PingFangSC-Semibold"; 306 font-family: "PingFangSC-Semibold";
178 max-width: 592rpx; 307 max-width: 592rpx;
179 } 308 }
180 .info_name_share { 309 .info_name_share {
181 display: flex; 310 display: flex;
182 flex-direction: column; 311 flex-direction: column;
183 justify-content: space-between; 312 justify-content: space-between;
184 align-items: center; 313 align-items: center;
185 margin-top: 14rpx; 314 margin-top: 14rpx;
186 > image { 315 > image {
187 height: 40rpx; 316 height: 40rpx;
188 width: 40rpx; 317 width: 40rpx;
189 } 318 }
190 > text { 319 > text {
191 font-family: PingFangSC-Regular; 320 font-family: PingFangSC-Regular;
192 font-size: 12px; 321 font-size: 12px;
193 color: #999; 322 color: #999;
194 letter-spacing: -0.23px; 323 letter-spacing: -0.23px;
195 } 324 }
196 } 325 }
197 } 326 }
198 // 售后服务 327 // 售后服务
199 .info_after { 328 .info_after {
200 font-size: 10px; 329 font-size: 10px;
201 color: #999; 330 color: #999;
202 margin-top: 20rpx; 331 margin-top: 20rpx;
203 > span { 332 > span {
204 height: 14px; 333 height: 14px;
205 margin-right: 10px; 334 margin-right: 10px;
206 } 335 }
207 } 336 }
208 } 337 }
209 // 详细信息 338 // 详细信息
210 .detail_info { 339 .detail_info {
340 margin-bottom: 20rpx;
211 .screen_bar { 341 .screen_bar {
212 width: 670rpx; 342 width: 670rpx;
213 margin-top: 20rpx; 343 margin-top: 20rpx;
214 margin-bottom: 24rpx; 344 margin-bottom: 24rpx;
215 display: flex; 345 display: flex;
216 flex-direction: row; 346 flex-direction: row;
217 justify-content: space-between; 347 justify-content: space-between;
218 align-items: center; 348 align-items: center;
219 font-size: 14px; 349 font-size: 14px;
220 color: #333333; 350 color: #333333;
221 transition: all 0.2s; 351 transition: all 0.2s;
222 } 352 }
223 .item_active { 353 .item_active {
224 border-bottom: 4rpx solid #ff6b4a; 354 border-bottom: 4rpx solid #ff6b4a;
225 } 355 }
226 .screen_item { 356 .screen_item {
227 font-size: 32rpx; 357 font-size: 32rpx;
228 color: #333333; 358 color: #333333;
229 display: flex; 359 display: flex;
230 transition: all 0.2s; 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 }
234 </style> 519 </style>
235 520
src/store/modules/details.js
Diff comments   View file @7f3de0e
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 read, 5 read,
6 cartList,
6 } = urlAlias 7 } = urlAlias
7 8
8 const state = { 9 const state = {
9 // 轮播图 10 // 轮播图
10 carousel: [ 11 carousel: [
11 '/static/img/detail/d9.png', 12 '/static/img/detail/d9.png',
12 ], 13 ],
13 // 商品基本信息 14 // 商品基本信息
14 goodsInfo: { 15 goodsInfo: {
15 name: '暂无名称', 16 name: '暂无名称',
16 price: '暂无价格', 17 price: '暂无价格',
17 discountPrice: undefined, 18 discountPrice: undefined,
18 tradeNumber: undefined, 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 const mutations = { 49 const mutations = {
23 INIT: (state, { carousel, goodsInfo }) => { 50 INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more }) => {
24 state.carousel = carousel 51 state.carousel = carousel
25 state.goodsInfo = goodsInfo 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 const actions = { 63 const actions = {
30 details({ commit }, param) { 64 // 获取详情
65 details({ commit, rootState }, param) {
31 return new Promise((resolve, reject) => request({ 66 return new Promise((resolve, reject) => request({
32 url: read, 67 url: read,
33 data: param, 68 data: param,
34 success: ({ data: { data } }) => { 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 commit('INIT', { 89 commit('INIT', {
36 carousel: data.pics, 90 carousel: data.pics,
37 goodsInfo: { 91 goodsInfo: {
38 name: data.p_name, 92 name: data.p_name,
39 price: data.priceArea.Min_Price, 93 price: data.priceArea.Min_Price,
40 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount), 94 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
41 tradeNumber: data.trade_num, 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 resolve(data) 106 resolve(data)
45 }, 107 },
46 fail: (res) => { 108 fail: (res) => {
47 console.log('fail status ===>', res) 109 console.log('fail status ===>', res)
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 export default { 130 export default {
54 namespaced: true, 131 namespaced: true,
55 state, 132 state,
56 mutations, 133 mutations,
57 actions, 134 actions,
58 } 135 }
59 136