吉鹏 / gulu-vue

Download as
Browse Code »

Commit 88c0598d36fb0cb00ec272b1343eea3ef4aaca86

Authored by 范牧
1 parent bf61c5f4b1
Exists in master

详情页参数选择修改

Showing 3 changed files with 77 additions and 23 deletions   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @88c0598
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <easy-loadimage mode="widthFix" 6 <easy-loadimage
7 :scroll-top="scrollTop" 7 mode="widthFix"
8 :image-src="goods.imgurl?goods.imgurl:goods.pic" 8 :scroll-top="scrollTop"
9 :viewHeight="viewHeight"></easy-loadimage> 9 :image-src="goods.imgurl?goods.imgurl:goods.pic"
10 <!-- <image 10 :viewHeight="viewHeight"
11 ></easy-loadimage>
12 <!-- <image
11 mode="widthFix" 13 mode="widthFix"
12 :src="goods.imgurl?goods.imgurl:goods.pic" 14 :src="goods.imgurl?goods.imgurl:goods.pic"
13 ></image> --> 15 ></image> -->
14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 16 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
15 <view class="info"> 17 <view class="info">
16 <view class="priceBox"> 18 <view class="priceBox">
17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 19 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
18 <view class="originCost"> 20 <view class="originCost">
19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 21 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 22 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
21 </view> 23 </view>
22 </view> 24 </view>
23 <view class="trade_num">{{goods.trade_num}}人购买</view> 25 <view class="trade_num">{{goods.trade_num}}人购买</view>
24 </view> 26 </view>
25 </view> 27 </view>
26 </template> 28 </template>
27 29
28 <script> 30 <script>
29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' 31 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30 // const MockData = require('@/static/easy-loadimage/mock-data.json') 32 // const MockData = require('@/static/easy-loadimage/mock-data.json')
31 export default { 33 export default {
32 components:{easyLoadimage}, 34 components: { easyLoadimage },
33 props: { 35 props: {
34 /** 36 /**
35 * 商品数据 37 * 商品数据
36 */ 38 */
37 goods: { 39 goods: {
38 id: Number, 40 id: Number,
39 imgurl: String, 41 imgurl: String,
40 name: String, 42 name: String,
41 rsSon: Object, 43 rsSon: Object,
42 originCost: String, 44 originCost: String,
43 price: String, 45 price: String,
44 trade_num: String, 46 trade_num: String,
45 goodType: String, 47 goodType: String,
46 }, 48 },
47 scrollTop:Number, 49 scrollTop: Number,
48 viewHeight:Number, 50 viewHeight: Number,
49 }, 51 },
50 created () { 52 created () {
51 }, 53 },
52 data () { 54 data () {
53 return { 55 return {
54 56
55 } 57 }
56 }, 58 },
57 59
58 methods: { 60 methods: {
59 toGoods (id, skId) { 61 toGoods (id, skId) {
60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) 62 console.log('---', '../details/details?pid=' + id + '&sk_id=' + skId)
61 uni.navigateTo({ 63 uni.navigateTo({
62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, 64 url: '../details/details?pid=' + id + '&sk_id=' + skId,
63 success: res => {}, 65 success: res => {},
64 fail: () => {}, 66 fail: () => {},
65 complete: () => {}, 67 complete: () => {},
66 }) 68 })
67 }, 69 },
68 }, 70 },
69 } 71 }
70 </script> 72 </script>
71 73
72 <style lang="scss"> 74 <style lang="scss">
73
74 image { 75 image {
75 width: 100%; 76 width: 100%;
76 height: 120rpx; 77 height: 120rpx;
77 } 78 }
78 .name { 79 .name {
79 width: 92%; 80 width: 92%;
80 height: 84rpx; 81 height: 84rpx;
81 padding: 5px 4%; 82 padding: 5px 4%;
82 box-sizing: border-box; 83 box-sizing: border-box;
83 display: -webkit-box; 84 display: -webkit-box;
84 -webkit-box-orient: vertical; 85 -webkit-box-orient: vertical;
85 -webkit-line-clamp: 2; 86 -webkit-line-clamp: 2;
86 text-align: justify; 87 text-align: justify;
87 overflow: hidden; 88 overflow: hidden;
88 font-size: 26rpx; 89 font-size: 26rpx;
89 color: #333333; 90 color: #333333;
90 } 91 }
91 .info { 92 .info {
92 display: flex; 93 display: flex;
93 justify-content: space-between; 94 justify-content: space-between;
94 align-items: center; 95 align-items: center;
95 width: 92%; 96 width: 92%;
96 padding: 5px 4% 5px 4%; 97 padding: 5px 4% 5px 4%;
97 .priceBox { 98 .priceBox {
98 display: flex; 99 display: flex;
99 justify-content: space-between; 100 justify-content: space-between;
100 align-items: center; 101 align-items: center;
101 .price { 102 .price {
102 color: #eb5d3b; 103 color: #eb5d3b;
103 font-size: 28rpx; 104 font-size: 28rpx;
104 font-weight: 600; 105 font-weight: 600;
105 margin-right: 10rpx; 106 margin-right: 10rpx;
106 } 107 }
107 .originCost { 108 .originCost {
108 text-decoration: line-through; 109 text-decoration: line-through;
109 color: #999999; 110 color: #999999;
110 font-size: 20rpx; 111 font-size: 20rpx;
111 } 112 }
112 } 113 }
113 .trade_num { 114 .trade_num {
114 color: #999999; 115 color: #999999;
115 font-size: 20rpx; 116 font-size: 20rpx;
116 } 117 }
117 } 118 }
118 </style> 119 </style>
src/pages/details/details.vue
Diff comments   View file @88c0598
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <!-- 基础信息 --> 3 <!-- 基础信息 -->
4 <view class="basic_info"> 4 <view class="basic_info">
5 <!-- 轮播图 --> 5 <!-- 轮播图 -->
6 <swiper 6 <swiper
7 class="swiperImage" 7 class="swiperImage"
8 :indicator-dots="true" 8 :indicator-dots="true"
9 :autoplay="true" 9 :autoplay="true"
10 :interval="4000" 10 :interval="4000"
11 :duration="500" 11 :duration="500"
12 > 12 >
13 <swiper-item 13 <swiper-item
14 v-for="(item, index) in carousel" 14 v-for="(item, index) in carousel"
15 :key="index" 15 :key="index"
16 > 16 >
17 <image 17 <image
18 :src="item" 18 :src="item"
19 mode="scaleToFill" 19 mode="scaleToFill"
20 ></image> 20 ></image>
21 </swiper-item> 21 </swiper-item>
22 </swiper> 22 </swiper>
23 <!-- 产品价格及购买人数 --> 23 <!-- 产品价格及购买人数 -->
24 <view class="info_pay"> 24 <view class="info_pay">
25 <view>￥{{goodsInfo.price || '暂无'}}<span 25 <view>￥{{goodsInfo.price || '暂无'}}<span
26 v-if="goodsInfo.discountPrice" 26 v-if="goodsInfo.discountPrice"
27 class="info_pay_discount" 27 class="info_pay_discount"
28 >¥{{goodsInfo.discountPrice}}</span></view> 28 >¥{{goodsInfo.discountPrice}}</span></view>
29 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> 29 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
30 </view> 30 </view>
31 <!-- 产品名称 --> 31 <!-- 产品名称 -->
32 <view class="info_name"> 32 <view class="info_name">
33 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> 33 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
34 <view 34 <view
35 @tap="confirmShare" 35 @tap="confirmShare"
36 class="info_name_share" 36 class="info_name_share"
37 > 37 >
38 <image src="/static/img/detail/share-icon.png"></image> 38 <image src="/static/img/detail/share-icon.png"></image>
39 <text>分享</text> 39 <text>分享</text>
40 </view> 40 </view>
41 </view> 41 </view>
42 <!-- 产品售后信息 --> 42 <!-- 产品售后信息 -->
43 <view class="info_after"> 43 <view class="info_after">
44 <span>支持7天无理由退货</span> 44 <span>支持7天无理由退货</span>
45 <span>顺丰发货</span> 45 <span>顺丰发货</span>
46 <span>30天质量保证</span> 46 <span>30天质量保证</span>
47 </view> 47 </view>
48 </view> 48 </view>
49 <!-- 详细信息 --> 49 <!-- 详细信息 -->
50 <view class="detail_info"> 50 <view class="detail_info">
51 <!-- 详细信息菜单 --> 51 <!-- 详细信息菜单 -->
52 <view class="screen_bar"> 52 <view class="screen_bar">
53 <view 53 <view
54 v-for="(item, index) in screenItems" 54 v-for="(item, index) in screenItems"
55 :key="index" 55 :key="index"
56 @click="tabChange(index)" 56 @click="tabChange(index)"
57 > 57 >
58 <view 58 <view
59 class="screen_item" 59 class="screen_item"
60 v-bind:class="{ item_active: item_current === index }" 60 v-bind:class="{ item_active: item_current === index }"
61 >{{ screenItems[index] || '暂无' }}</view> 61 >{{ screenItems[index] || '暂无' }}</view>
62 </view> 62 </view>
63 </view> 63 </view>
64 <!-- 商品介绍 --> 64 <!-- 商品介绍 -->
65 <view 65 <view
66 class="screen_item" 66 class="screen_item"
67 v-if="item_current === 0" 67 v-if="item_current === 0"
68 > 68 >
69 <Introduce :tag="tag" /> 69 <Introduce :tag="tag" />
70 </view> 70 </view>
71 <!-- 规格参数 --> 71 <!-- 规格参数 -->
72 <view 72 <view
73 class="screen_item" 73 class="screen_item"
74 v-if="item_current === 1" 74 v-if="item_current === 1"
75 > 75 >
76 <view class="specification"> 76 <view class="specification">
77 <view 77 <view
78 class="spe_item" 78 class="spe_item"
79 v-for="(item, index) in specification" 79 v-for="(item, index) in specification"
80 :key="index" 80 :key="index"
81 > 81 >
82 <image 82 <image
83 class="spe_image" 83 class="spe_image"
84 v-bind:src="item.img" 84 v-bind:src="item.img"
85 ></image> 85 ></image>
86 <span>{{item.standard || '暂无'}}</span> 86 <span>{{item.standard || '暂无'}}</span>
87 <span>{{item.slength || '暂无'}}</span> 87 <span>{{item.slength || '暂无'}}</span>
88 </view> 88 </view>
89 </view> 89 </view>
90 </view> 90 </view>
91 <!-- 售后保障 --> 91 <!-- 售后保障 -->
92 <view 92 <view
93 class="screen_item" 93 class="screen_item"
94 v-if="item_current === 2" 94 v-if="item_current === 2"
95 > 95 >
96 <AfterSails /> 96 <AfterSails />
97 </view> 97 </view>
98 </view> 98 </view>
99 <!-- 评价 --> 99 <!-- 评价 -->
100 <template v-if="item_current !== 2"> 100 <template v-if="item_current !== 2">
101 <view class="evaluate"> 101 <view class="evaluate">
102 <!-- 标题 --> 102 <!-- 标题 -->
103 <view class="evaluate_title"> 103 <view class="evaluate_title">
104 <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> 104 <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
105 <!-- 星星 --> 105 <!-- 星星 -->
106 <view class="evaluate_star"> 106 <view class="evaluate_star">
107 <view 107 <view
108 class="star" 108 class="star"
109 v-for="(item, index) in evaluate.star" 109 v-for="(item, index) in evaluate.star"
110 :key="index" 110 :key="index"
111 > 111 >
112 <image 112 <image
113 src="../../static/img/detail/d_star.png" 113 src="../../static/img/detail/d_star.png"
114 mode="aspectFill" 114 mode="aspectFill"
115 style="height: 26rpx; width: 28rpx;" 115 style="height: 26rpx; width: 28rpx;"
116 ></image> 116 ></image>
117 </view> 117 </view>
118 </view> 118 </view>
119 </view> 119 </view>
120 <!-- 标签 --> 120 <!-- 标签 -->
121 <view class="evaluate_tag"> 121 <view class="evaluate_tag">
122 <view 122 <view
123 v-for="(item, index) in evaluate.tag" 123 v-for="(item, index) in evaluate.tag"
124 :key="index" 124 :key="index"
125 >{{item.name}}</view> 125 >{{item.name}}</view>
126 </view> 126 </view>
127 </view> 127 </view>
128 </template> 128 </template>
129 <!-- 商品详情页 --> 129 <!-- 商品详情页 -->
130 <template v-if="current !==2"> 130 <template v-if="current !==2">
131 <view class="more_info"> 131 <view class="more_info">
132 <view 132 <view
133 class="more_fixed1" 133 class="more_fixed1"
134 @click="consolg(goodInfo.prodIntro1)" 134 @click="consolg(goodInfo.prodIntro1)"
135 > 135 >
136 <image src="/static/img/detail/hr.png"></image> 136 <image src="/static/img/detail/hr.png"></image>
137 <view>商品详情</view> 137 <view>商品详情</view>
138 <image src="/static/img/detail/hr.png"></image> 138 <image src="/static/img/detail/hr.png"></image>
139 </view> 139 </view>
140 <view 140 <view
141 class="more_all" 141 class="more_all"
142 v-html="more" 142 v-html="more"
143 > 143 >
144 </view> 144 </view>
145 </view> 145 </view>
146 </template> 146 </template>
147 <!-- 底部菜单 --> 147 <!-- 底部菜单 -->
148 <view class="menu"> 148 <view class="menu">
149 <view 149 <view
150 @tap="toCart()" 150 @tap="toCart()"
151 class="menu_1" 151 class="menu_1"
152 > 152 >
153 <view class="cart_icon"> 153 <view class="cart_icon">
154 <image src="/static/tab-cart.png" /> 154 <image src="/static/tab-cart.png" />
155 <text>{{cartNumber}}</text> 155 <text>{{cartNumber}}</text>
156 </view> 156 </view>
157 <view class="menu_image">购物车</view> 157 <view class="menu_image">购物车</view>
158 </view> 158 </view>
159 <view class="menu_2"> 159 <view class="menu_2">
160 <view 160 <view
161 class="menu_input" 161 class="menu_input"
162 @tap="showBottom(1)" 162 @tap="showBottom(1)"
163 >加入购物车</view> 163 >加入购物车</view>
164 <view 164 <view
165 class="menu_now" 165 class="menu_now"
166 @click="showBottom(2)" 166 @click="showBottom(2)"
167 >立即购买</view> 167 >立即购买</view>
168 </view> 168 </view>
169 </view> 169 </view>
170 <!-- 参数选择 --> 170 <!-- 参数选择 -->
171 <!-- <BottomSheet 171 <template v-if="isShowBottom">
172 :isCart="isCart" 172 <BottomSheet
173 @addCart="addCart" 173 :isCart="isCart"
174 :pid="pid" 174 @addCart="addCart"
175 :goodInfo="goodInfo" 175 :pid="pid"
176 :isShowBottom="isShowBottom" 176 :goodInfo="goodInfo"
177 @closeBottom="closeBottom" 177 :isShowBottom="isShowBottom"
178 ></BottomSheet> --> 178 @closeBottom="closeBottom"
179 ></BottomSheet>
180 </template>
179 <!-- 分享 --> 181 <!-- 分享 -->
180 <template> 182 <template>
181 <uni-popup 183 <uni-popup
182 ref="popupShare" 184 ref="popupShare"
183 type="share" 185 type="share"
184 > 186 >
185 <uni-popup-share @select="selectShare"></uni-popup-share> 187 <uni-popup-share @select="selectShare"></uni-popup-share>
186 </uni-popup> 188 </uni-popup>
187 </template> 189 </template>
188 <!-- 分享海报 --> 190 <!-- 分享海报 -->
189 <template> 191 <template>
190 <uni-popup 192 <uni-popup
191 ref="uniPopupPost" 193 ref="uniPopupPost"
192 type="center" 194 type="center"
193 > 195 >
194 <uni-popup-post :postUrl="postUrl"></uni-popup-post> 196 <uni-popup-post :postUrl="postUrl"></uni-popup-post>
195 </uni-popup> 197 </uni-popup>
196 </template> 198 </template>
197 </view> 199 </view>
198 </template> 200 </template>
199 201
200 <script> 202 <script>
201 import store from '@/store' 203 import store from '@/store'
202 import Introduce from './components/Introduce' // 商品介绍基本信息组件 204 import Introduce from './components/Introduce' // 商品介绍基本信息组件
203 import AfterSails from './components/AfterSails' // 售后保障组件 205 import AfterSails from './components/AfterSails' // 售后保障组件
204 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 206 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
205 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 207 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
206 // import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 208 import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
207 209
208 export default { 210 export default {
209 components: { 211 components: {
210 Introduce, 212 Introduce,
211 AfterSails, 213 AfterSails,
212 // BottomSheet, 214 BottomSheet,
213 uniPopupShare, 215 uniPopupShare,
214 uniPopupPost, 216 uniPopupPost,
215 }, 217 },
216 data () { 218 data () {
217 return { 219 return {
218 pid: 7, // 产品ID 220 pid: 7, // 产品ID
219 skId: undefined, // skuId 221 skId: undefined, // skuId
220 // 详细信息菜单 222 // 详细信息菜单
221 item_current: 0, 223 item_current: 0,
222 screenItems: [ 224 screenItems: [
223 '商品介绍', 225 '商品介绍',
224 '规格参数', 226 '规格参数',
225 '售后保障', 227 '售后保障',
226 ], 228 ],
227 showPostImg: false, // 是否展示分享海报 229 showPostImg: false, // 是否展示分享海报
230 isShowBottom: false, // 是否展示参数选择
231 isCart: 1, // 参数选择 按钮判断
228 } 232 }
229 }, 233 },
230 onLoad({ pid = this.pid, sk_id: skId }) { 234 onLoad({ pid = this.pid, sk_id: skId }) {
231 // 根据页面传参请求页面数据 235 // 根据页面传参请求页面数据
232 this.pid = pid 236 this.pid = pid
233 this.skId = skId 237 this.skId = skId
234 238
235 // 获取产品详情 239 // 获取产品详情
236 this.getDetails({ pid, skId }) 240 this.getDetails({ pid, skId })
237 // 获取购物车数据 241 // 获取购物车数据
238 this.getCartNum() 242 this.getCartNum()
239 }, 243 },
240 computed: { 244 computed: {
241 // 获取轮播图数据 245 // 获取轮播图数据
246 goodInfo() {
247 return this.$store.state.details.goodInfo
248 },
249 // 获取轮播图数据
242 carousel() { 250 carousel() {
243 return this.$store.state.details.carousel 251 return this.$store.state.details.carousel
244 }, 252 },
245 // 商品基本信息 253 // 商品基本信息
246 goodsInfo() { 254 goodsInfo() {
247 return this.$store.state.details.goodsInfo 255 return this.$store.state.details.goodsInfo
248 }, 256 },
249 // 商品介绍商品标签 257 // 商品介绍商品标签
250 tag() { 258 tag() {
251 return this.$store.state.details.tag 259 return this.$store.state.details.tag
252 }, 260 },
253 // 规格参数 261 // 规格参数
254 specification() { 262 specification() {
255 return this.$store.state.details.specification 263 return this.$store.state.details.specification
256 }, 264 },
257 // 评价 265 // 评价
258 evaluate() { 266 evaluate() {
259 return this.$store.state.details.evaluate 267 return this.$store.state.details.evaluate
260 }, 268 },
261 // 商品详情 269 // 商品详情
262 more() { 270 more() {
263 return this.$store.state.details.more 271 return this.$store.state.details.more
264 }, 272 },
265 // 购物车数目 273 // 购物车数目
266 cartNumber() { 274 cartNumber() {
267 return this.$store.state.details.cartNumber 275 return this.$store.state.details.cartNumber
268 }, 276 },
269 // 购物车数目 277 // 购物车数目
270 skuList() { 278 skuList() {
271 return this.$store.state.details.skuList 279 return this.$store.state.details.skuList
272 }, 280 },
273 // 分享海报 281 // 分享海报
274 postUrl() { 282 postUrl() {
275 return this.$store.state.details.postUrl 283 return this.$store.state.details.postUrl
276 }, 284 },
277 }, 285 },
278 methods: { 286 methods: {
279 // 获取产品详情 287 // 获取产品详情
280 getDetails({ pid, skId }) { 288 getDetails({ pid, skId }) {
281 store.dispatch('details/details', { 289 store.dispatch('details/details', {
282 pid, 290 pid,
283 sk_id: skId, 291 sk_id: skId,
284 }) 292 })
293 store.dispatch('read/fetch', {
294 pid,
295 sk_id: skId,
296 })
285 }, 297 },
286 // 获取购物车数目 298 // 获取购物车数目
287 getCartNum() { 299 getCartNum() {
288 store.dispatch('details/getCartNumber') 300 store.dispatch('details/getCartNumber')
289 }, 301 },
290 // 切换详细信息菜单 302 // 切换详细信息菜单
291 tabChange (e) { 303 tabChange (e) {
292 if (this.current !== e) { 304 if (this.current !== e) {
293 this.item_current = e 305 this.item_current = e
294 } 306 }
295 }, 307 },
296 // 打开分享界面 308 // 打开分享界面
297 confirmShare() { 309 confirmShare() {
298 this.$refs.popupShare.open() 310 this.$refs.popupShare.open()
299 }, 311 },
300 // 选择分享 312 // 选择分享
301 selectShare(e, done) { 313 selectShare(e, done) {
302 switch (e.item.name) { 314 switch (e.item.name) {
303 // 分享到好物圈 315 // 分享到好物圈
304 case 'recommend': 316 case 'recommend':
305 this.shareRecommend() 317 this.shareRecommend()
306 break 318 break
307 // 分享到朋友圈 319 // 分享到朋友圈
308 case 'friend': 320 case 'friend':
309 break 321 break
310 // 生成海报 322 // 生成海报
311 case 'poster': 323 case 'poster':
312 uni.showLoading({ 324 uni.showLoading({
313 title: '生成图片中', 325 title: '生成图片中',
314 }) 326 })
315 this.sharePost() 327 this.sharePost()
316 break 328 break
317 default: 329 default:
318 break 330 break
319 } 331 }
320 done() 332 done()
321 }, 333 },
322 // 分享到好物圈 334 // 分享到好物圈
323 shareRecommend() { 335 shareRecommend() {
324 if (wx.openBusinessView) { 336 if (wx.openBusinessView) {
325 wx.openBusinessView({ 337 wx.openBusinessView({
326 businessType: 'friendGoodsRecommend', 338 businessType: 'friendGoodsRecommend',
327 extraData: { 339 extraData: {
328 product: { 340 product: {
329 item_code: '58_68', 341 item_code: '58_68',
330 title: this.goodsInfo.name, 342 title: this.goodsInfo.name,
331 image_list: this.carousel, 343 image_list: this.carousel,
332 }, 344 },
333 }, 345 },
334 success: function (res) { 346 success: function (res) {
335 uni.showToast({ 347 uni.showToast({
336 title: '好物圈分享成功！', 348 title: '好物圈分享成功！',
337 icon: 'none', 349 icon: 'none',
338 duration: 2000, 350 duration: 2000,
339 }) 351 })
340 // 向服务器报告这个事情 352 // 向服务器报告这个事情
341 // TODO:::记录这个用户的推广过程。 353 // TODO:::记录这个用户的推广过程。
342 console.log('好物圈分享成功！', res) 354 console.log('好物圈分享成功！', res)
343 }, 355 },
344 fail: function (res) { 356 fail: function (res) {
345 console.log('好物圈分享失败！', res) 357 console.log('好物圈分享失败！', res)
346 }, 358 },
347 }) 359 })
348 } 360 }
349 }, 361 },
350 // 分享到朋友/圈 362 // 分享到朋友/圈
351 shareFriend() { 363 shareFriend() {
352 this.onShareAppMessage() 364 this.onShareAppMessage()
353 }, 365 },
354 // 朋友圈设置页面 366 // 朋友圈设置页面
355 onShareAppMessage() { 367 onShareAppMessage() {
356 let myName = this.$store.state.user.userInfo.nickName 368 let myName = this.$store.state.user.userInfo.nickName
357 if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { 369 if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
358 myName = '【神秘人】' 370 myName = '【神秘人】'
359 } else { 371 } else {
360 myName = '【' + myName + '】' 372 myName = '【' + myName + '】'
361 } 373 }
362 const uid = uni.getStorageSync('uid') 374 const uid = uni.getStorageSync('uid')
363 return { 375 return {
364 title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) 376 title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
365 path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, 377 path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid,
366 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 378 imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
367 success: function (res) { 379 success: function (res) {
368 if (res.errMsg === 'shareAppMessage:ok') { 380 if (res.errMsg === 'shareAppMessage:ok') {
369 console.log('分享成功！', res) 381 console.log('分享成功！', res)
370 } 382 }
371 }, 383 },
372 fail: function (res) { 384 fail: function (res) {
373 if (res.errMsg === 'shareAppMessage:fail cancel') { 385 if (res.errMsg === 'shareAppMessage:fail cancel') {
374 console.log('fail', '放弃分享') 386 console.log('fail', '放弃分享')
375 } else if (res.errMsg === 'shareAppMessage:fail') { 387 } else if (res.errMsg === 'shareAppMessage:fail') {
376 console.log('fail', '分享失败') 388 console.log('fail', '分享失败')
377 } 389 }
378 }, 390 },
379 } 391 }
380 }, 392 },
381 // 生成海报 393 // 生成海报
382 sharePost() { 394 sharePost() {
383 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' 395 const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
384 396
385 store.dispatch('details/post', { 397 store.dispatch('details/post', {
386 pid: this.pid, 398 pid: this.pid,
387 sid: fromsid === 'undefined' ? 0 : fromsid, 399 sid: fromsid === 'undefined' ? 0 : fromsid,
388 }).then((data) => { 400 }).then((data) => {
389 uni.hideLoading() 401 uni.hideLoading()
390 this.$refs.uniPopupPost.open() 402 this.$refs.uniPopupPost.open()
391 }) 403 })
392 }, 404 },
405 // 参数选择弹窗开关
406 showBottom(isCart) {
407 this.isCart = isCart
408 this.isShowBottom = true
409 },
410 closeBottom() {
411 this.isShowBottom = false
412 },
413 // 前往购物车
414 toCart() {
415 uni.switchTab({
416 url: '/pages/cart/cart',
417 success: res => {},
418 fail: (error) => { console.log('跳转购物车失败======>', error) },
419 complete: () => { console.log('toCart') },
420 })
421 },
422 // 加入购物车
423 addCart (mpId, num, checkedSKU, skId) {
424 this.addCartList.mp_id = mpId
425 this.addCartList.sk_id = skId
426 this.addCartList.num = num
427 this.addCartList.checkedSKU = checkedSKU
428 console.log('添加购物车的参数', this.addCartList)
429 store.dispatch('cart/addCart', this.addCartList).then((res) => {
430 if (res.code === 1) {
431 uni.showToast({
432 title: '添加成功~',
433 icon: 'success',
434 })
435 }
436 // 再次请求购物车接口，实现实时更新
437 store.dispatch('cart/getCartList', {
438 uid: this.$store.state.user.userInfo.uid,
439 })
440 })
441 },
393 }, 442 },
394 } 443 }
395 </script> 444 </script>
396 445
397 <style lang="scss"> 446 <style lang="scss">
398 .container { 447 .container {
399 background-color: #f8f8f8; 448 background-color: #f8f8f8;
400 font-family: "PingFangSC-Regular"; 449 font-family: "PingFangSC-Regular";
401 // 板块样式 450 // 板块样式
402 > view { 451 > view {
403 background: #ffffff; 452 background: #ffffff;
404 margin-bottom: 10px; 453 margin-bottom: 10px;
405 padding: 8px 20px 8px 20px; 454 padding: 8px 20px 8px 20px;
406 box-sizing: border-box; 455 box-sizing: border-box;
407 } 456 }
408 // 基础信息板块 457 // 基础信息板块
409 .basic_info { 458 .basic_info {
410 // 轮播图 459 // 轮播图
411 .swiperImage { 460 .swiperImage {
412 width: 684rpx; 461 width: 684rpx;
413 height: 480rpx; 462 height: 480rpx;
414 image { 463 image {
415 max-width: 100%; 464 max-width: 100%;
416 max-height: 100%; 465 max-height: 100%;
417 border-radius: 16rpx; 466 border-radius: 16rpx;
418 } 467 }
419 } 468 }
420 // 产品价格及购买人数 469 // 产品价格及购买人数
421 .info_pay { 470 .info_pay {
422 color: #eb5d3b; 471 color: #eb5d3b;
423 font-size: 18px; 472 font-size: 18px;
424 margin-top: 5px; 473 margin-top: 5px;
425 font-family: "PingFangSC-Semibold"; 474 font-family: "PingFangSC-Semibold";
426 display: flex; 475 display: flex;
427 justify-content: space-between; 476 justify-content: space-between;
428 .info_pay_discount { 477 .info_pay_discount {
429 text-decoration: line-through; 478 text-decoration: line-through;
430 margin-left: 8rpx; 479 margin-left: 8rpx;
431 color: #999; 480 color: #999;
432 font-size: 14px; 481 font-size: 14px;
433 } 482 }
434 .info_pay_number { 483 .info_pay_number {
435 color: #999; 484 color: #999;
436 font-size: 14px; 485 font-size: 14px;
437 font-family: PingFangSC-Regular; 486 font-family: PingFangSC-Regular;
438 } 487 }
439 } 488 }
440 // 产品名称 489 // 产品名称
441 .info_name { 490 .info_name {
442 margin-top: 5px; 491 margin-top: 5px;
443 display: flex; 492 display: flex;
444 justify-content: space-between; 493 justify-content: space-between;
445 .info_name_name { 494 .info_name_name {
446 margin-right: 10px; 495 margin-right: 10px;
447 font-size: 16px; 496 font-size: 16px;
448 font-family: "PingFangSC-Semibold"; 497 font-family: "PingFangSC-Semibold";
449 max-width: 592rpx; 498 max-width: 592rpx;
450 } 499 }
451 .info_name_share { 500 .info_name_share {
452 display: flex; 501 display: flex;
453 flex-direction: column; 502 flex-direction: column;
454 justify-content: space-between; 503 justify-content: space-between;
455 align-items: center; 504 align-items: center;
456 margin-top: 14rpx; 505 margin-top: 14rpx;
457 > image { 506 > image {
458 height: 40rpx; 507 height: 40rpx;
459 width: 40rpx; 508 width: 40rpx;
460 } 509 }
461 > text { 510 > text {
462 font-family: PingFangSC-Regular; 511 font-family: PingFangSC-Regular;
463 font-size: 12px; 512 font-size: 12px;
464 color: #999; 513 color: #999;
465 letter-spacing: -0.23px; 514 letter-spacing: -0.23px;
466 } 515 }
467 } 516 }
468 } 517 }
469 // 售后服务 518 // 售后服务
470 .info_after { 519 .info_after {
471 font-size: 10px; 520 font-size: 10px;
472 color: #999; 521 color: #999;
473 margin-top: 20rpx; 522 margin-top: 20rpx;
474 > span { 523 > span {
475 height: 14px; 524 height: 14px;
476 margin-right: 10px; 525 margin-right: 10px;
477 } 526 }
478 } 527 }
479 } 528 }
480 // 详细信息 529 // 详细信息
481 .detail_info { 530 .detail_info {
482 margin-bottom: 20rpx; 531 margin-bottom: 20rpx;
483 .screen_bar { 532 .screen_bar {
484 width: 670rpx; 533 width: 670rpx;
485 margin-top: 20rpx; 534 margin-top: 20rpx;
486 margin-bottom: 24rpx; 535 margin-bottom: 24rpx;
487 display: flex; 536 display: flex;
488 flex-direction: row; 537 flex-direction: row;
489 justify-content: space-between; 538 justify-content: space-between;
490 align-items: center; 539 align-items: center;
491 font-size: 14px; 540 font-size: 14px;
492 color: #333333; 541 color: #333333;
493 transition: all 0.2s; 542 transition: all 0.2s;
494 } 543 }
495 .item_active { 544 .item_active {
496 border-bottom: 4rpx solid #ff6b4a; 545 border-bottom: 4rpx solid #ff6b4a;
497 } 546 }
498 .screen_item { 547 .screen_item {
499 font-size: 32rpx; 548 font-size: 32rpx;
500 color: #333333; 549 color: #333333;
501 display: flex; 550 display: flex;
502 transition: all 0.2s; 551 transition: all 0.2s;
503 // 规格参数 552 // 规格参数
504 .specification { 553 .specification {
505 margin-bottom: 4px; 554 margin-bottom: 4px;
506 .spe_item { 555 .spe_item {
507 image { 556 image {
508 width: 50px; 557 width: 50px;
509 height: 25px; 558 height: 25px;
510 margin-right: 6px; 559 margin-right: 6px;
511 vertical-align: middle; 560 vertical-align: middle;
512 } 561 }
513 span { 562 span {
514 margin-left: 24rpx; 563 margin-left: 24rpx;
515 } 564 }
516 } 565 }
517 } 566 }
518 } 567 }
519 // 568 //
520 } 569 }
521 // 宝贝好评率 570 // 宝贝好评率
522 .evaluate { 571 .evaluate {
523 .evaluate_title { 572 .evaluate_title {
524 font-size: 14px; 573 font-size: 14px;
525 color: #333333; 574 color: #333333;
526 display: flex; 575 display: flex;
527 justify-content: space-between; 576 justify-content: space-between;
528 .title_rate { 577 .title_rate {
529 margin-left: 10rpx; 578 margin-left: 10rpx;
530 } 579 }
531 .evaluate_star { 580 .evaluate_star {
532 width: 90px; 581 width: 90px;
533 display: flex; 582 display: flex;
534 align-items: center; 583 align-items: center;
535 justify-content: space-between; 584 justify-content: space-between;
536 } 585 }
537 view { 586 view {
538 font-size: 14px; 587 font-size: 14px;
539 color: #333333; 588 color: #333333;
540 font-weight: bold; 589 font-weight: bold;
541 } 590 }
542 } 591 }
543 .evaluate_tag { 592 .evaluate_tag {
544 view { 593 view {
545 display: inline-block; 594 display: inline-block;
546 margin-right: 20rpx; 595 margin-right: 20rpx;
547 min-width: 180rpx; 596 min-width: 180rpx;
548 margin-top: 10px; 597 margin-top: 10px;
549 height: 48rpx; 598 height: 48rpx;
550 background: #f2f2f2; 599 background: #f2f2f2;
551 border-radius: 2px; 600 border-radius: 2px;
552 font-family: PingFangSC-Regular; 601 font-family: PingFangSC-Regular;
553 font-size: 12px; 602 font-size: 12px;
554 color: #666666; 603 color: #666666;
555 letter-spacing: -0.23px; 604 letter-spacing: -0.23px;
556 text-align: center; 605 text-align: center;
557 padding: 0 48rpx; 606 padding: 0 48rpx;
558 line-height: 48rpx; 607 line-height: 48rpx;
559 } 608 }
560 } 609 }
561 } 610 }
562 // 商品详情 611 // 商品详情
563 .more_info { 612 .more_info {
564 .more_fixed1 { 613 .more_fixed1 {
565 display: flex; 614 display: flex;
566 justify-content: space-between; 615 justify-content: space-between;
567 align-content: center; 616 align-content: center;
568 margin-bottom: 12px; 617 margin-bottom: 12px;
569 view { 618 view {
570 font-size: 14px; 619 font-size: 14px;
571 color: #333333; 620 color: #333333;
572 font-weight: bold; 621 font-weight: bold;
573 font-family: "PingFangSC-Medium"; 622 font-family: "PingFangSC-Medium";
574 line-height: 24px; 623 line-height: 24px;
575 } 624 }
576 image { 625 image {
577 width: 240rpx; 626 width: 240rpx;
578 height: 3px; 627 height: 3px;
579 margin-top: 10px; 628 margin-top: 10px;
580 } 629 }
581 } 630 }
582 .more_all { 631 .more_all {
583 width: 100%; 632 width: 100%;
584 margin-top: 30rpx; 633 margin-top: 30rpx;
585 margin-right: 30rpx; 634 margin-right: 30rpx;
586 margin-bottom: 180rpx; 635 margin-bottom: 180rpx;
587 font-family: "PingFangSC-Regular"; 636 font-family: "PingFangSC-Regular";
588 } 637 }
589 } 638 }
590 // 菜单 639 // 菜单
591 .menu { 640 .menu {
592 position: fixed; 641 position: fixed;
593 bottom: 0; 642 bottom: 0;
594 height: 74px; 643 height: 74px;
595 width: 100%; 644 width: 100%;
596 background: #ffffff; 645 background: #ffffff;
597 padding: 20px 20px 8px 20px; 646 padding: 20px 20px 8px 20px;
598 font-family: "PingFangSC-Regular"; 647 font-family: "PingFangSC-Regular";
599 box-sizing: border-box; 648 box-sizing: border-box;
600 display: flex; 649 display: flex;
601 justify-content: space-between; 650 justify-content: space-between;
602 align-content: center; 651 align-content: center;
603 margin: 0; 652 margin: 0;
604 /* iphonex 等安全区设置，底部安全区适配 */ 653 /* iphonex 等安全区设置，底部安全区适配 */
605 /* #ifndef APP-NVUE */ 654 /* #ifndef APP-NVUE */
606 padding-bottom: constant(safe-area-inset-bottom); 655 padding-bottom: constant(safe-area-inset-bottom);
607 padding-bottom: env(safe-area-inset-bottom); 656 padding-bottom: env(safe-area-inset-bottom);
608 .menu_1 { 657 .menu_1 {
609 width: 20%; 658 width: 20%;
610 height: 100%; 659 height: 100%;
611 text-align: center; 660 text-align: center;
612 color: #989898; 661 color: #989898;
613 .cart_icon { 662 .cart_icon {
614 position: relative; 663 position: relative;
615 text { 664 text {
616 position: absolute; 665 position: absolute;
617 color: white; 666 color: white;
618 font-size: 17px; 667 font-size: 17px;
619 background-color: red; 668 background-color: red;
620 min-height: 24px; 669 min-height: 24px;
621 min-width: 24px; 670 min-width: 24px;
622 line-height: 24px; 671 line-height: 24px;
623 right: -12%; 672 right: -12%;
624 top: -12px; 673 top: -12px;
625 text-align: center; 674 text-align: center;
626 border-radius: 24px; 675 border-radius: 24px;
627 padding: 2px; 676 padding: 2px;
628 } 677 }
629 } 678 }
630 } 679 }
631 image { 680 image {
632 width: 42%; 681 width: 42%;
633 height: 26px; 682 height: 26px;
634 } 683 }
635 .menu_image { 684 .menu_image {
636 font-size: 12px; 685 font-size: 12px;
637 text-align: center; 686 text-align: center;
638 } 687 }
639 .menu_2 { 688 .menu_2 {
640 width: 74%; 689 width: 74%;
641 height: 86%; 690 height: 86%;
642 display: grid; 691 display: grid;
643 grid-template-columns: 50% 50%; 692 grid-template-columns: 50% 50%;
644 } 693 }
645 .menu_input { 694 .menu_input {
646 display: inline-flex; 695 display: inline-flex;
647 align-items: center; 696 align-items: center;
648 justify-content: space-around; 697 justify-content: space-around;
649 background: #fff0ec; 698 background: #fff0ec;
650 font-size: 16px; 699 font-size: 16px;
651 color: #ff6b4a; 700 color: #ff6b4a;
652 border-radius: 20px 0 0 20px; 701 border-radius: 20px 0 0 20px;
653 } 702 }
654 .menu_now { 703 .menu_now {
655 display: inline-flex; 704 display: inline-flex;
656 align-items: center; 705 align-items: center;
657 justify-content: space-around; 706 justify-content: space-around;
658 background: #ff6b4a; 707 background: #ff6b4a;
659 font-size: 16px; 708 font-size: 16px;
660 color: #ffffff; 709 color: #ffffff;
661 border-radius: 0 20px 20px 0; 710 border-radius: 0 20px 20px 0;
662 } 711 }
663 } 712 }
664 } 713 }
665 </style> 714 </style>
666 715
src/store/modules/details.js
Diff comments   View file @88c0598
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 cartList,
7 makePost, 7 makePost,
8 } = urlAlias 8 } = urlAlias
9 9
10 const state = { 10 const state = {
11 // 为配合参数选择框
12 goodInfo: {},
11 // 轮播图 13 // 轮播图
12 carousel: [ 14 carousel: [
13 '/static/img/detail/d9.png', 15 '/static/img/detail/d9.png',
14 ], 16 ],
15 // 商品基本信息 17 // 商品基本信息
16 goodsInfo: { 18 goodsInfo: {
17 name: '暂无名称', 19 name: '暂无名称',
18 price: '暂无价格', 20 price: '暂无价格',
19 discountPrice: undefined, 21 discountPrice: undefined,
20 tradeNumber: undefined, 22 tradeNumber: undefined,
21 }, 23 },
22 // 商品介绍 24 // 商品介绍
23 tag: { 25 tag: {
24 prod_tag_style: [{ 26 prod_tag_style: [{
25 label: '青春学子风', 27 label: '青春学子风',
26 value: '54', 28 value: '54',
27 }], 29 }],
28 }, 30 },
29 // 规格参数 31 // 规格参数
30 specification: [ 32 specification: [
31 { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 33 { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
32 { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 34 { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
33 { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 35 { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
34 { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 36 { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
35 { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 37 { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
36 { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' }, 38 { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' },
37 ], 39 ],
38 // 评价 40 // 评价
39 evaluate: { 41 evaluate: {
40 rate: '100%', 42 rate: '100%',
41 star: 5, 43 star: 5,
42 tag: [{ name: '价格实惠' }], 44 tag: [{ name: '价格实惠' }],
43 }, 45 },
44 // 商品详情 46 // 商品详情
45 more: '', 47 more: '',
46 // 购物车数目 48 // 购物车数目
47 cartNumber: 0, 49 cartNumber: 0,
48 // skuList 50 // skuList
49 skuList: [], 51 skuList: [],
50 postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', 52 postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png',
51 } 53 }
52 54
53 const mutations = { 55 const mutations = {
54 INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => { 56 INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => {
57 state.goodInfo = goodInfo
55 state.carousel = carousel 58 state.carousel = carousel
56 state.goodsInfo = goodsInfo 59 state.goodsInfo = goodsInfo
57 state.tag = tag 60 state.tag = tag
58 state.specification = specification 61 state.specification = specification
59 state.evaluate = evaluate 62 state.evaluate = evaluate
60 state.more = more 63 state.more = more
61 state.skuList = skuList 64 state.skuList = skuList
62 }, 65 },
63 CART: (state, number) => { 66 CART: (state, number) => {
64 state.cartNumber = number 67 state.cartNumber = number
65 }, 68 },
66 POST: (state, url) => { 69 POST: (state, url) => {
67 state.postUrl = url 70 state.postUrl = url
68 }, 71 },
69 } 72 }
70 73
71 const actions = { 74 const actions = {
72 // 获取详情 75 // 获取详情
73 details({ commit, rootState }, param) { 76 details({ commit, rootState }, param) {
74 return new Promise((resolve, reject) => request({ 77 return new Promise((resolve, reject) => request({
75 url: read, 78 url: read,
76 data: param, 79 data: param,
77 success: ({ data: { data } }) => { 80 success: ({ data: { data } }) => {
78 console.log('data.tag', data.tag) 81 console.log('data.tag', data.tag)
79 // 规格参数设置 82 // 规格参数设置
80 const specification = rootState.details.specification 83 const specification = rootState.details.specification
81 const parameter = { 84 const parameter = {
82 frame_width: data.frame_width, 85 frame_width: data.frame_width,
83 glass_width: data.glass_width, 86 glass_width: data.glass_width,
84 glass_height: data.glass_height, 87 glass_height: data.glass_height,
85 nose_width: data.nose_width, 88 nose_width: data.nose_width,
86 leg_long: data.leg_long, 89 leg_long: data.leg_long,
87 weight: data.weight, 90 weight: data.weight,
88 } 91 }
89 for (let index = 0; index < specification.length; index++) { 92 for (let index = 0; index < specification.length; index++) {
90 if (specification[index].key !== 'weight') { 93 if (specification[index].key !== 'weight') {
91 specification[index].slength = `${parameter[specification[index].key]}mm` 94 specification[index].slength = `${parameter[specification[index].key]}mm`
92 } else { 95 } else {
93 specification[index].slength = `${parameter[specification[index].key]}克（grams）` 96 specification[index].slength = `${parameter[specification[index].key]}克（grams）`
94 } 97 }
95 } 98 }
96 99
97 commit('INIT', { 100 commit('INIT', {
101 goodInfo: data,
98 skuList: data.skuList, 102 skuList: data.skuList,
99 carousel: data.pics, 103 carousel: data.pics,
100 goodsInfo: { 104 goodsInfo: {
101 name: data.p_name, 105 name: data.p_name,
102 price: data.priceArea.Min_Price, 106 price: data.priceArea.Min_Price,
103 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount), 107 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
104 tradeNumber: data.trade_num, 108 tradeNumber: data.trade_num,
105 }, 109 },
106 tag: data.tag, 110 tag: data.tag,
107 specification, 111 specification,
108 evaluate: { 112 evaluate: {
109 rate: data.judgeInfo.good, 113 rate: data.judgeInfo.good,
110 tag: data.judge_tag, 114 tag: data.judge_tag,
111 star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100), 115 star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
112 }, 116 },
113 // eslint-disable-next-line 117 // eslint-disable-next-line
114 more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), 118 more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
115 }) 119 })
116 resolve(data) 120 resolve(data)
117 }, 121 },
118 fail: (res) => { 122 fail: (res) => {
119 console.log('fail status ===>', res) 123 console.log('fail status ===>', res)
120 }, 124 },
121 })) 125 }))
122 }, 126 },
123 // 获取购物车列表 127 // 获取购物车列表
124 getCartNumber({ commit }, param) { 128 getCartNumber({ commit }, param) {
125 return new Promise((resolve) => request({ 129 return new Promise((resolve) => request({
126 url: cartList, 130 url: cartList,
127 data: param, 131 data: param,
128 success: ({ data: { data } }) => { 132 success: ({ data: { data } }) => {
129 let number = 0 133 let number = 0
130 for (let index = 0; index < data.length; index++) { 134 for (let index = 0; index < data.length; index++) {
131 number += Number(data[index].num) 135 number += Number(data[index].num)
132 } 136 }
133 commit('CART', number) 137 commit('CART', number)
134 }, 138 },
135 })) 139 }))
136 }, 140 },
137 // 生成分享海报 141 // 生成分享海报
138 post({ commit }, param) { 142 post({ commit }, param) {
139 return new Promise((resolve) => request({ 143 return new Promise((resolve) => request({
140 url: makePost, 144 url: makePost,
141 data: param, 145 data: param,
142 success: ({ data }) => { 146 success: ({ data }) => {
143 commit('POST', data.data) 147 commit('POST', data.data)
144 resolve() 148 resolve()
145 }, 149 },
146 })) 150 }))
147 }, 151 },
148 } 152 }
149 153
150 export default { 154 export default {
151 namespaced: true, 155 namespaced: true,
152 state, 156 state,
153 mutations, 157 mutations,
154 actions, 158 actions,
155 } 159 }
156 160