刘文博 / gulu-vue

Download as
Browse Code »

Commit 637a02b07932dead77c556937018bc994178414e

Authored by 尹聃
1 parent 87e0a41035
Exists in master

添加购物车

Showing 4 changed files with 52 additions and 18 deletions   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @637a02b
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @tap="pChange(pIsoPen)"> 10 @tap="pChange(pIsoPen)">
11 <span class="correct"></span> 11 <span class="correct"></span>
12 </view> 12 </view>
13 <image src="../../static/store.png" mode="aspectFill"></image> 13 <image src="../../static/store.png" mode="aspectFill"></image>
14 <text>非常戴镜</text> 14 <text>非常戴镜</text>
15 </view> 15 </view>
16 16
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
18 @longpress="delCart(item.cart_id,index)"> 18 @longpress="delCart(item.cart_id,index)">
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @tap="Change(childIsOpen[index],index)"> 20 @tap="Change(childIsOpen[index],index)">
21 <span class="correct"></span> 21 <span class="correct"></span>
22 </view> 22 </view>
23 <view class="imageWrap"> 23 <view class="imageWrap">
24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
25 </view> 25 </view>
26 <view class="goodInfo"> 26 <view class="goodInfo">
27 <!-- <view class="imageWrap"> 27 <!-- <view class="imageWrap">
28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
29 </view> --> 29 </view> -->
30 <view class="infoRight"> 30 <view class="infoRight">
31 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> 31 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
32 <!-- <view class="describ"> --> 32 <!-- <view class="describ"> -->
33 <uni-collapse accordion="true" > 33 <uni-collapse accordion="true" >
34 <uni-collapse-item showAnimation='true' 34 <uni-collapse-item showAnimation='true'
35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" > 35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" >
36 <text class="describ"> 36 <text class="describ">
37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
38 {{tag.label+`&nbsp;&nbsp;`}} 38 {{tag.label+`&nbsp;&nbsp;`}}
39 </block> 39 </block>
40 </text> 40 </text>
41 <!-- <text> 41 <!-- <text>
42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> 42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43 {{tag.label+`&nbsp;&nbsp;`}} 43 {{tag.label+`&nbsp;&nbsp;`}}
44 </block> 44 </block>
45 </text> --> 45 </text> -->
46 </uni-collapse-item> 46 </uni-collapse-item>
47 </uni-collapse> 47 </uni-collapse>
48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> 48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49 <!-- </view> --> 49 <!-- </view> -->
50 <view class="priceBox"> 50 <view class="priceBox">
51 <view class="price">￥{{item.nowPrice*item.num}}</view> 51 <view class="price">￥{{item.nowPrice*item.num}}</view>
52 <text class="maxCount">(限购{{maxCount}}副)</text> 52 <text class="maxCount">(限购{{maxCount}}副)</text>
53 <view class="counter"> 53 <view class="counter">
54 <view class="btn" disabled="this.addDisabled" type="default" 54 <view class="btn" disabled="this.addDisabled" type="default"
55 @tap="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> 55 @tap="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
56 <text>{{item.num}}</text> 56 <text>{{item.num}}</text>
57 <view class="btn" disabled="this.desDisabled" type="default" 57 <view class="btn" disabled="this.desDisabled" type="default"
58 @tap="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> 58 @tap="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 </view> 63 </view>
64 </view> 64 </view>
65 </block> 65 </block>
66 <view class="footer"> 66 <view class="footer">
67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
68 <view class="footerRight"> 68 <view class="footerRight">
69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> 69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
70 <view class="paybtn" >立即结算</view> 70 <view class="paybtn" >立即结算</view>
71 </navigator> 71 </navigator>
72 </view> 72 </view>
73 </view> 73 </view>
74 74
75 </view> 75 </view>
76 </template> 76 </template>
77 77
78 <script> 78 <script>
79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81 import store from '@/store' 81 import store from '@/store'
82 82
83 export default { 83 export default {
84 components: { UniCollapse, UniCollapseItem }, 84 components: { UniCollapse, UniCollapseItem },
85 data() { 85 data() {
86 return { 86 return {
87 totalPrice: 0, 87 totalPrice: 0,
88 pIsoPen: false, 88 pIsoPen: false,
89 // childIsOpen:[], 89 // childIsOpen:[],
90 maxCount: 20 90 maxCount: 20
91 } 91 }
92 }, 92 },
93 computed: { 93 computed: {
94 94
95 cartList() { 95 cartList() {
96 // console.log('cart-list', this.$store.state.cart.cartList); 96 // console.log('cart-list', this.$store.state.cart.cartList);
97 return this.$store.state.cart.cartList 97 return this.$store.state.cart.cartList
98 }, 98 },
99 childIsOpen() { 99 childIsOpen() {
100 const temp = [] 100 const temp = []
101 temp.length = this.$store.state.cart.cartList.length 101 temp.length = this.$store.state.cart.cartList.length
102 for (let i = 0; i < temp.length; i++) { 102 for (let i = 0; i < temp.length; i++) {
103 temp[i] = false 103 temp[i] = false
104 } 104 }
105 console.log('this.childisOPne===>', temp) 105 console.log('this.childisOPne===>', temp)
106 return temp 106 return temp
107 } 107 }
108 }, 108 },
109 onLoad: function() { 109 onLoad: function() {
110 // store.dispatch('cart/addCart', { 110 // store.dispatch('cart/addCart', {
111 // uid: this.$store.state.user.userInfo.uid, 111 // uid: this.$store.state.user.userInfo.uid,
112 // openid: this.$store.state.user.userInfo.openid, 112 // openid: this.$store.state.user.userInfo.openid,
113 // mp_id: 7, 113 // mp_id: 7,
114 // sk_id: 7, 114 // sk_id: 7,
115 // num: 1, 115 // num: 1,
116 // pid: 8, 116 // pid: 8,
117 // price: 128, 117 // price: 128,
118 // checkedSKU:{}, 118 // checkedSKU:{},
119 // }) 119 // })
120 store.dispatch('cart/getCartList', { 120 store.dispatch('cart/getCartList', {
121 uid: this.$store.state.user.userInfo.uid // 用户id 121 uid: this.$store.state.user.userInfo.uid // 用户id
122 }) 122 })
123
124 }, 123 },
125 124
126 methods: { 125 methods: {
127 126
128 toGoods(id, type) { 127 toGoods(id, type) {
129 uni.navigateTo({ 128 uni.navigateTo({
130 url: '../frameDetail/frameDetail?oderId=' + id, 129 url: '../frameDetail/frameDetail?oderId=' + id,
131 success: res => {}, 130 success: res => {},
132 fail: () => {}, 131 fail: () => {},
133 complete: () => {} 132 complete: () => {}
134 }) 133 })
135 console.log('toGoods =====> id:' + id + '======>type:' + type) 134 console.log('toGoods =====> id:' + id + '======>type:' + type)
136 switch (type) { 135 switch (type) {
137 case 1: 136 case 1:
138 uni.navigateTo({ 137 uni.navigateTo({
139 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 138 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
140 success: res => {}, 139 success: res => {},
141 fail: () => {}, 140 fail: () => {},
142 complete: () => {} 141 complete: () => {}
143 }) 142 })
144 break 143 break
145 case 2: 144 case 2:
146 uni.navigateTo({ 145 uni.navigateTo({
147 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 146 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
148 success: res => {}, 147 success: res => {},
149 fail: () => {}, 148 fail: () => {},
150 complete: () => {} 149 complete: () => {}
151 }) 150 })
152 break 151 break
153 case 3: 152 case 3:
154 uni.navigateTo({ 153 uni.navigateTo({
155 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 154 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
156 success: res => {}, 155 success: res => {},
157 fail: () => {}, 156 fail: () => {},
158 complete: () => {} 157 complete: () => {}
159 }) 158 })
160 break 159 break
161 case 4: 160 case 4:
162 uni.navigateTo({ 161 uni.navigateTo({
163 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 162 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
164 success: res => {}, 163 success: res => {},
165 fail: () => {}, 164 fail: () => {},
166 complete: () => {} 165 complete: () => {}
167 }) 166 })
168 break 167 break
169 default : 168 default :
170 break 169 break
171 } 170 }
172 }, 171 },
173 172
174 counter(index, isadd, mp_id, sk_id, num, cart_id) { 173 counter(index, isadd, mp_id, sk_id, num, cart_id) {
175 // console.log('===>>counter ===>num',num) 174 // console.log('===>>counter ===>num',num)
176 // console.log('===>>counter ===>isadd',isadd) 175 // console.log('===>>counter ===>isadd',isadd)
177 num = parseInt(num) 176 num = parseInt(num)
178 if (isadd) { 177 if (isadd) {
179 if (num >= this.maxCount) { 178 if (num >= this.maxCount) {
180 this.addDisabled = true 179 this.addDisabled = true
181 } else { 180 } else {
182 this.addDisabled = true 181 this.addDisabled = true
183 // 修改num 182 // 修改num
184 if(this.childIsOpen[index]){ 183 if (this.childIsOpen[index]) {
185 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 184 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
186 } 185 }
187 store.dispatch('cart/modiCart', { 186 store.dispatch('cart/modiCart', {
188 uid: this.$store.state.user.userInfo.uid, 187 uid: this.$store.state.user.userInfo.uid,
189 openid: this.$store.state.user.userInfo.openid, 188 openid: this.$store.state.user.userInfo.openid,
190 mp_id: mp_id, 189 mp_id: mp_id,
191 sk_id: sk_id, 190 sk_id: sk_id,
192 cart_id: cart_id, 191 cart_id: cart_id,
193 num: num + 1, 192 num: num + 1,
194 args: { 193 args: {
195 index: index, 194 index: index,
196 isadd: isadd 195 isadd: isadd
197 } 196 }
198 }) 197 })
199 this.addDisabled = false 198 this.addDisabled = false
200 } 199 }
201 } else { 200 } else {
202 if (num <= 1) { 201 if (num <= 1) {
203 this.desDisabled = true 202 this.desDisabled = true
204 } else { 203 } else {
205 this.desDisabled = false 204 this.desDisabled = false
206 // post 请求修改相关参数 205 // post 请求修改相关参数
207 if(this.childIsOpen[index]){ 206 if (this.childIsOpen[index]) {
208 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 207 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
209 } 208 }
210 store.dispatch('cart/modiCart', { 209 store.dispatch('cart/modiCart', {
211 uid: this.$store.state.user.userInfo.uid, 210 uid: this.$store.state.user.userInfo.uid,
212 openid: this.$store.state.user.userInfo.openid, 211 openid: this.$store.state.user.userInfo.openid,
213 mp_id: mp_id, 212 mp_id: mp_id,
214 sk_id: sk_id, 213 sk_id: sk_id,
215 cart_id: cart_id, 214 cart_id: cart_id,
216 num: num - 1, 215 num: num - 1,
217 args: { 216 args: {
218 index: index, 217 index: index,
219 isadd: isadd 218 isadd: isadd
220 } 219 }
221 }) 220 })
222 this.desDisabled = true 221 this.desDisabled = true
223 } 222 }
224 } 223 }
225 // store.dispatch('cart/getCartList', { 224 // store.dispatch('cart/getCartList', {
226 // uid: this.$store.state.user.userInfo.uid // 用户id 225 // uid: this.$store.state.user.userInfo.uid // 用户id
227 // }) 226 // })
228 }, 227 },
229 228
230 Change(isopen, indexC) { 229 Change(isopen, indexC) {
231 // console.log('lalla===>',isopen) 230 // console.log('lalla===>',isopen)
232 this.childIsOpen[indexC] = !isopen 231 this.childIsOpen[indexC] = !isopen
233 if (!isopen) { 232 if (!isopen) {
234 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 233 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
235 } else { 234 } else {
236 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 235 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
237 } 236 }
238 let m = true 237 let m = true
239 for (let i = 0; i < this.childIsOpen.length; i++) { 238 for (let i = 0; i < this.childIsOpen.length; i++) {
240 m = m & this.childIsOpen[i] 239 m = m & this.childIsOpen[i]
241 } 240 }
242 if (m == 1) { 241 if (m == 1) {
243 this.pIsoPen = true 242 this.pIsoPen = true
244 } else { 243 } else {
245 this.pIsoPen = false 244 this.pIsoPen = false
246 } 245 }
247 }, 246 },
248 pChange(isopen) { 247 pChange(isopen) {
249 this.pIsoPen = !isopen 248 this.pIsoPen = !isopen
250 for (let i = 0; i < this.childIsOpen.length; i++) { 249 for (let i = 0; i < this.childIsOpen.length; i++) {
251 this.childIsOpen[i] = !isopen 250 this.childIsOpen[i] = !isopen
252 } 251 }
253 if (this.pIsoPen) { 252 if (this.pIsoPen) {
254 // 计算总价逻辑 253 // 计算总价逻辑
255 if (this.childIsOpen.length != 0) { 254 if (this.childIsOpen.length != 0) {
256 for (let i = 0; i < this.childIsOpen.length; i++) { 255 for (let i = 0; i < this.childIsOpen.length; i++) {
257 if (this.childIsOpen[i]) { 256 if (this.childIsOpen[i]) {
258 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
259 } 258 }
260 } 259 }
261 } 260 }
262 } else { 261 } else {
263 this.totalPrice = 0 262 this.totalPrice = 0
264 } 263 }
265 }, 264 },
266 delCart(cart_id, index) { 265 delCart(cart_id, index) {
267 // console.log('userInfo',this.$store.state.user.userInfo) 266 // console.log('userInfo',this.$store.state.user.userInfo)
268 cart_id = parseInt(cart_id) 267 cart_id = parseInt(cart_id)
269 // console.log('delcart------>cart_id',cart_id) 268 // console.log('delcart------>cart_id',cart_id)
270 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
271 // console.log('delcart======>index',index) 270 // console.log('delcart======>index',index)
272 uni.showModal({ 271 uni.showModal({
273 title: '是否删除该商品', 272 title: '是否删除该商品',
274 // content: '是否删除该商品', 273 // content: '是否删除该商品',
275 success: function (res) { 274 success: function (res) {
276 if (res.confirm) { 275 if (res.confirm) {
277 // this.$store.state.cart.cartList.splice(index,1) 276 // this.$store.state.cart.cartList.splice(index,1)
278 store.dispatch('cart/delCart', { 277 store.dispatch('cart/delCart', {
279 uid: this.$store.state.user.userInfo.uid, 278 uid: this.$store.state.user.userInfo.uid,
280 openid: this.$store.state.user.userInfo.openid, 279 openid: this.$store.state.user.userInfo.openid,
281 cart_id: cart_id, // 要修改的购物车id 280 cart_id: cart_id, // 要修改的购物车id
282 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 281 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
283 }) 282 })
284 console.log('用户点击确定') 283 console.log('用户点击确定')
285 } 284 }
286 } 285 }
287 }) 286 })
288 } 287 }
289 } 288 }
290 } 289 }
291 </script> 290 </script>
292 291
293 <style lang="scss"> 292 <style lang="scss">
294 .content { 293 .content {
295 min-height: 100vh; 294 min-height: 100vh;
296 background-color: #f2f2f2; 295 background-color: #f2f2f2;
297 display: flex; 296 display: flex;
298 flex-direction: column; 297 flex-direction: column;
299 align-items: center; 298 align-items: center;
300 justify-content: space-between; 299 justify-content: space-between;
301 padding: 20rpx 40rpx; 300 padding: 20rpx 40rpx;
302 box-sizing: border-box; 301 box-sizing: border-box;
303 302
304 .partentCheck{ 303 .partentCheck{
305 width: 16px; 304 width: 16px;
306 height: 16px; 305 height: 16px;
307 border-radius: 22px; 306 border-radius: 22px;
308 border: 1px solid #CFCFCF; 307 border: 1px solid #CFCFCF;
309 background-color: #FFFFFF; 308 background-color: #FFFFFF;
310 margin: 6px; 309 margin: 6px;
311 } 310 }
312 .partentChecked{ 311 .partentChecked{
313 width: 18px; 312 width: 18px;
314 height: 18px; 313 height: 18px;
315 border-radius: 22px; 314 border-radius: 22px;
316 background-color: #FF6B4A; 315 background-color: #FF6B4A;
317 margin: 6px; 316 margin: 6px;
318 .correct { 317 .correct {
319 display: inline-block; 318 display: inline-block;
320 position: relative; 319 position: relative;
321 width: 10rpx; 320 width: 10rpx;
322 height: 2rpx; 321 height: 2rpx;
323 background: #FFFFFF; 322 background: #FFFFFF;
324 line-height: 0; 323 line-height: 0;
325 font-size: 0; 324 font-size: 0;
326 position: relative; 325 position: relative;
327 top: -7px; 326 top: -7px;
328 left: 4px; 327 left: 4px;
329 -webkit-transform: rotate(45deg); 328 -webkit-transform: rotate(45deg);
330 } 329 }
331 .correct:after { 330 .correct:after {
332 content: '/'; 331 content: '/';
333 display: block; 332 display: block;
334 width: 16rpx; 333 width: 16rpx;
335 height: 2rpx; 334 height: 2rpx;
336 background: #FFFFFF; 335 background: #FFFFFF;
337 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 336 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
338 } 337 }
339 } 338 }
340 339
341 .card{ 340 .card{
342 background-color: #FFFFFF; 341 background-color: #FFFFFF;
343 border-radius: 16rpx; 342 border-radius: 16rpx;
344 box-sizing: border-box; 343 box-sizing: border-box;
345 padding: 36rpx 36rpx 36rpx 18rpx; 344 padding: 36rpx 36rpx 36rpx 18rpx;
346 display: flex; 345 display: flex;
347 flex-direction: column; 346 flex-direction: column;
348 align-items: center; 347 align-items: center;
349 justify-content: space-between; 348 justify-content: space-between;
350 margin-bottom: 180rpx; 349 margin-bottom: 180rpx;
351 .cardHeader{ 350 .cardHeader{
352 width: 100%; 351 width: 100%;
353 height: 36rpx; 352 height: 36rpx;
354 display: flex; 353 display: flex;
355 align-items: center; 354 align-items: center;
356 justify-content: flex-start; 355 justify-content: flex-start;
357 margin-bottom: 20rpx; 356 margin-bottom: 20rpx;
358 image{ 357 image{
359 height: 32rpx; 358 height: 32rpx;
360 width: 32rpx; 359 width: 32rpx;
361 padding-left: 6px; 360 padding-left: 6px;
362 padding-right: 10px; 361 padding-right: 10px;
363 } 362 }
364 text{ 363 text{
365 // font-family: PingFangSC-Regular; 364 // font-family: PingFangSC-Regular;
366 font-size: 14px; 365 font-size: 14px;
367 color: #333333; 366 color: #333333;
368 letter-spacing: -0.26px; 367 letter-spacing: -0.26px;
369 } 368 }
370 } 369 }
371 .cardBody{ 370 .cardBody{
372 width: 100%; 371 width: 100%;
373 min-height: 300rpx; 372 min-height: 300rpx;
374 display: flex; 373 display: flex;
375 align-items: center; 374 align-items: center;
376 justify-content: space-between; 375 justify-content: space-between;
377 .goodInfo{ 376 .goodInfo{
378 width: 390rpx; 377 width: 390rpx;
379 display: flex; 378 display: flex;
380 flex-direction: row; 379 flex-direction: row;
381 justify-content: flex-start; 380 justify-content: flex-start;
382 padding-left: 6px; 381 padding-left: 6px;
383 382
384 .imageWrap{ 383 .imageWrap{
385 height: 188rpx; 384 height: 188rpx;
386 width: 188rpx; 385 width: 188rpx;
387 margin-right: 28rpx; 386 margin-right: 28rpx;
388 387
389 image{ 388 image{
390 border-radius: 4px; 389 border-radius: 4px;
391 height: 188rpx; 390 height: 188rpx;
392 width: 188rpx; 391 width: 188rpx;
393 } 392 }
394 } 393 }
395 .infoRight{ 394 .infoRight{
396 display: flex; 395 display: flex;
397 flex-direction: column; 396 flex-direction: column;
398 align-items: flex-start; 397 align-items: flex-start;
399 justify-content: space-between; 398 justify-content: space-between;
400 min-height: 240rpx; 399 min-height: 240rpx;
401 .goodName{ 400 .goodName{
402 display: -webkit-box; 401 display: -webkit-box;
403 -webkit-box-orient: vertical; 402 -webkit-box-orient: vertical;
404 -webkit-line-clamp: 2; 403 -webkit-line-clamp: 2;
405 text-align: justify; 404 text-align: justify;
406 overflow: hidden; 405 overflow: hidden;
407 font-size: 28rpx; 406 font-size: 28rpx;
408 color: #333333; 407 color: #333333;
409 } 408 }
410 .describ{ 409 .describ{
411 width: 100%; 410 width: 100%;
412 // min-height: 80rpx; 411 // min-height: 80rpx;
413 // box-sizing: border-box; 412 // box-sizing: border-box;
414 // padding: 10rpx; 413 // padding: 10rpx;
415 font-size: 20rpx; 414 font-size: 20rpx;
416 letter-spacing: -0.23px; 415 letter-spacing: -0.23px;
417 text-align: justify; 416 text-align: justify;
418 color: #999999; 417 color: #999999;
419 // background: #F9F9F9; 418 // background: #F9F9F9;
420 // display: flex; 419 // display: flex;
421 // justify-content: center; 420 // justify-content: center;
422 // align-items: center; 421 // align-items: center;
423 // text{ 422 // text{
424 // text-overflow: -o-ellipsis-lastline; 423 // text-overflow: -o-ellipsis-lastline;
425 // overflow: hidden; 424 // overflow: hidden;
426 // text-overflow: ellipsis; 425 // text-overflow: ellipsis;
427 // display: -webkit-box; 426 // display: -webkit-box;
428 // -webkit-line-clamp: 2; 427 // -webkit-line-clamp: 2;
429 // line-clamp: 2; 428 // line-clamp: 2;
430 // -webkit-box-orient: vertical; 429 // -webkit-box-orient: vertical;
431 // } 430 // }
432 // .icon { 431 // .icon {
433 // width: 0; 432 // width: 0;
434 // height: 0; 433 // height: 0;
435 // border-left: 5px transparent; 434 // border-left: 5px transparent;
436 // border-right: 5px transparent; 435 // border-right: 5px transparent;
437 // border-top: 5px #979797; 436 // border-top: 5px #979797;
438 // border-bottom: 0 transparent; 437 // border-bottom: 0 transparent;
439 // border-style: solid; 438 // border-style: solid;
440 // position: relative; 439 // position: relative;
441 // margin-left: 10px; 440 // margin-left: 10px;
442 // // transform: scaleY(-1); 441 // // transform: scaleY(-1);
443 // } 442 // }
444 // .icon::after{ 443 // .icon::after{
445 // content: ''; 444 // content: '';
446 // position: absolute; 445 // position: absolute;
447 // top: -6.5px; 446 // top: -6.5px;
448 // left: -5px; 447 // left: -5px;
449 // border-left: 5px transparent; 448 // border-left: 5px transparent;
450 // border-right: 5px transparent; 449 // border-right: 5px transparent;
451 // border-top: 5px #FFFFFF; 450 // border-top: 5px #FFFFFF;
452 // border-bottom: 0 transparent; 451 // border-bottom: 0 transparent;
453 // border-style: solid; 452 // border-style: solid;
454 // } 453 // }
455 } 454 }
456 .priceBox{ 455 .priceBox{
457 display: flex; 456 display: flex;
458 justify-content: space-between; 457 justify-content: space-between;
459 align-items: center; 458 align-items: center;
460 // margin-top: 26px; 459 // margin-top: 26px;
461 width: 100%; 460 width: 100%;
462 font-size: 14px; 461 font-size: 14px;
463 color: #999999; 462 color: #999999;
464 .maxCount{ 463 .maxCount{
465 color: #999999; 464 color: #999999;
466 font-size: 24rpx; 465 font-size: 24rpx;
467 } 466 }
468 .price{ 467 .price{
469 color: #FF6B4A; 468 color: #FF6B4A;
470 font-size: 28rpx; 469 font-size: 28rpx;
471 } 470 }
472 .counter{ 471 .counter{
473 display: flex; 472 display: flex;
474 flex-direction: row; 473 flex-direction: row;
475 justify-content: space-between; 474 justify-content: space-between;
476 align-items: center; 475 align-items: center;
477 font-size: 28rpx; 476 font-size: 28rpx;
478 color: #333333; 477 color: #333333;
479 width: 122rpx; 478 width: 122rpx;
480 .btn{ 479 .btn{
481 display: flex; 480 display: flex;
482 justify-content: center; 481 justify-content: center;
483 line-height: 32rpx; 482 line-height: 32rpx;
484 height: 32rpx; 483 height: 32rpx;
485 width: 32rpx; 484 width: 32rpx;
486 background-color: #F2F2F2; 485 background-color: #F2F2F2;
487 color: #CFCFCF; 486 color: #CFCFCF;
488 } 487 }
489 } 488 }
490 } 489 }
491 } 490 }
492 } 491 }
493 } 492 }
494 } 493 }
495 494
496 .footer{ 495 .footer{
497 position: fixed; 496 position: fixed;
498 left: 0; 497 left: 0;
499 bottom: 0px; 498 bottom: 0px;
500 height: 112rpx; 499 height: 112rpx;
501 width: 100%; 500 width: 100%;
502 background-color: #FFFFFF; 501 background-color: #FFFFFF;
503 font-size: 16px; 502 font-size: 16px;
504 display: flex; 503 display: flex;
505 justify-content: space-between; 504 justify-content: space-between;
506 align-items: center; 505 align-items: center;
507 .footerLeft{ 506 .footerLeft{
508 display: flex; 507 display: flex;
509 justify-content: center; 508 justify-content: center;
510 align-items: center; 509 align-items: center;
511 width: 50%; 510 width: 50%;
512 color: #333333; 511 color: #333333;
513 text{ 512 text{
514 color: #FF6B4A; 513 color: #FF6B4A;
515 } 514 }
516 } 515 }
517 .footerRight{ 516 .footerRight{
518 display: flex; 517 display: flex;
519 justify-content: flex-end; 518 justify-content: flex-end;
520 align-items: center; 519 align-items: center;
521 width: 50%; 520 width: 50%;
522 margin-right: 26rpx; 521 margin-right: 26rpx;
523 .paybtn{ 522 .paybtn{
524 display: flex; 523 display: flex;
525 justify-content: center; 524 justify-content: center;
526 align-items: center; 525 align-items: center;
527 background: #FF6B4A; 526 background: #FF6B4A;
528 border-radius: 20px; 527 border-radius: 20px;
529 border-radius: 20px; 528 border-radius: 20px;
530 color: #FFFFFF; 529 color: #FFFFFF;
531 width: 204rpx; 530 width: 204rpx;
532 height: 80rpx; 531 height: 80rpx;
533 } 532 }
534 } 533 }
535 534
536 } 535 }
537 } 536 }
538 537
539 </style> 538 </style>
540 539
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @637a02b
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <view 34 <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> 49 </view>
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305 305
306 <!-- 底部菜单 --> 306 <!-- 底部菜单 -->
307 <view class="botton"> 307 <view class="botton">
308 <view 308 <view
309 @tap="toCart()" 309 @tap="toCart()"
310 class="botton_1" 310 class="botton_1"
311 > 311 >
312 <image v-bind:src="imgShop.img"></image> 312 <image v-bind:src="imgShop.img"></image>
313 <view class="botton_image">购物车</view> 313 <view class="botton_image">购物车</view>
314 </view> 314 </view>
315 <view class="botton_2"> 315 <view class="botton_2">
316 <view 316 <view
317 class="botton_input" 317 class="botton_input"
318 @tap="toCart()" 318 @tap="addCart()"
319 >加入购物车</view> 319 >加入购物车</view>
320 <view 320 <view
321 class="botton_now" 321 class="botton_now"
322 @tap="goPerchase()" 322 @tap="goPerchase()"
323 >立即购买</view> 323 >立即购买</view>
324 </view> 324 </view>
325 </view> 325 </view>
326 </view> 326 </view>
327 </template> 327 </template>
328 328
329 <script> 329 <script>
330 import store from '@/store' 330 import store from '@/store'
331 export default { 331 export default {
332 data () { 332 data () {
333 return { 333 return {
334 test: '', 334 test: '',
335 goodType: 2, 335 goodType: 2,
336 pid: 0, 336 pid: 0,
337 // 购物车数据
338 addCartList: {
339 mp_id: 335,
340 sk_id: 0,
341 num: 1,
342 price: ''
343 },
337 screenItems: [ 344 screenItems: [
338 { current: 0, text: '商品介绍' }, 345 { current: 0, text: '商品介绍' },
339 { current: 1, text: '规格参数' }, 346 { current: 1, text: '规格参数' },
340 { current: 2, text: '售后保障' } 347 { current: 2, text: '售后保障' }
341 ], 348 ],
342 current: 0, 349 current: 0,
343 starCount: 5, 350 starCount: 5,
344 parameter: [ 351 parameter: [
345 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
346 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
347 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
348 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
349 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
350 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }
351 ], 358 ],
352 esvalue: '宝贝好评率', 359 esvalue: '宝贝好评率',
353 introduction: { 360 introduction: {
354 material: '钛合金', 361 material: '钛合金',
355 func: '抗疲劳/防辐射', 362 func: '抗疲劳/防辐射',
356 rate: '男/女' 363 rate: '男/女'
357 }, 364 },
358 imgAll: '/static/img/detail/d8.png', 365 imgAll: '/static/img/detail/d8.png',
359 photoes: [ 366 photoes: [
360 { value: '日常办公', img: '/static/img/detail/d9.png' }, 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
361 { value: '上网', img: '/static/img/detail/d10.png' }, 368 { value: '上网', img: '/static/img/detail/d10.png' },
362 { value: '追剧', img: '/static/img/detail/d11.png' }, 369 { value: '追剧', img: '/static/img/detail/d11.png' },
363 { value: '玩游戏', img: '/static/img/detail/d12.png' } 370 { value: '玩游戏', img: '/static/img/detail/d12.png' }
364 ], 371 ],
365 imgDetail: '/static/img/detail/d13.png', 372 imgDetail: '/static/img/detail/d13.png',
366 imgShop: { 373 imgShop: {
367 img: '/static/tab-cart.png', 374 img: '/static/tab-cart.png',
368 IsShown: false 375 IsShown: false
369 }, 376 },
370 tag: { 377 tag: {
371 prod_tag_freesend: [{ 378 prod_tag_freesend: [{
372 label: '眼镜盒', 379 label: '眼镜盒',
373 value: '262' 380 value: '262'
374 }] 381 }]
375 } 382 }
376 } 383 }
377 }, 384 },
378 onLoad: function ({ pid }) { 385 onLoad: function ({ pid }) {
379 this.pid = pid 386 this.pid = pid
380 store.dispatch('read/fetch', { 387 store.dispatch('read/fetch', {
381 pid 388 pid
382 }).then(() => { 389 }).then(() => {
383 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
384 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
385 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
386 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
387 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
388 this.parameter[5].slength = `${this.goodInfo.weight}mm` 395 this.parameter[5].slength = `${this.goodInfo.weight}mm`
389 this.tag = this.goodInfo.tag 396 this.tag = this.goodInfo.tag
397 this.addCartList.price = this.goodInfo.p_sale_price
390 this.test = this.goodInfo.prodIntro1 398 this.test = this.goodInfo.prodIntro1
391 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
392 }) 400 })
393 }, 401 },
394 computed: { 402 computed: {
395 updateGoodType () { 403 updateGoodType () {
396 return this.goodType 404 return this.goodType
397 }, 405 },
398 goodInfo () { 406 goodInfo () {
399 console.log(this.$store.state.read.goodInfo) 407 console.log(this.$store.state.read.goodInfo)
400 return this.$store.state.read.goodInfo 408 return this.$store.state.read.goodInfo
401 } 409 }
402 }, 410 },
403 methods: { 411 methods: {
404 // 前往购物车 412 // 前往购物车
405 toCart() { 413 toCart() {
406 uni.switchTab({ 414 uni.switchTab({
407 url: '/pages/cart/cart', 415 url: '/pages/cart/cart',
408 success: res => {}, 416 success: res => {},
409 fail: (error) => { console.log('跳转购物车失败======>', error) }, 417 fail: (error) => { console.log('跳转购物车失败======>', error) },
410 complete: () => { console.log('toCart') } 418 complete: () => { console.log('toCart') }
411 }) 419 })
412 }, 420 },
421 // 加入购物车
422 addCart () {
423 store.dispatch('cart/addCart', {
424 uid: this.$store.state.user.userInfo.uid,
425 openid: this.$store.state.user.userInfo.openid,
426 mp_id: this.addCartList.mp_id,
427 sk_id: this.addCartList.sk_id,
428 num: this.addCartList.num,
429 pid: this.pid,
430 price: this.addCartList.price,
431 checkedSKU: {}
432 })
433 store.dispatch('cart/getCartList', {
434 uid: this.$store.state.user.userInfo.uid // 用户id
435 })
436 },
413 goPerchase () { 437 goPerchase () {
414 // switch (this.updateGoodType) { 438 // switch (this.updateGoodType) {
415 // case '1': 439 // case '1':
416 console.log('goPerchase') 440 console.log('goPerchase')
417 uni.navigateTo({ 441 uni.navigateTo({
418 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
419 success: res => {}, 443 success: res => {},
420 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 444 fail: (error) => { console.log('跳转参数选择失败======>', error) },
421 complete: () => { console.log('goPerchase') } 445 complete: () => { console.log('goPerchase') }
422 }) 446 })
423 // break 447 // break
424 // case '2': 448 // case '2':
425 // uni.navigateTo({ 449 // uni.navigateTo({
426 // url: '../detailStandard/detailStandard_k', 450 // url: '../detailStandard/detailStandard_k',
427 // success: res => {}, 451 // success: res => {},
428 // fail: () => {}, 452 // fail: () => {},
429 // complete: () => {} 453 // complete: () => {}
430 // }) 454 // })
431 // break 455 // break
432 // case '3': 456 // case '3':
433 // uni.navigateTo({ 457 // uni.navigateTo({
434 // url: '../purchaseLenses/purchaseLenses', 458 // url: '../purchaseLenses/purchaseLenses',
435 // success: res => {}, 459 // success: res => {},
436 // fail: () => {}, 460 // fail: () => {},
437 // complete: () => {} 461 // complete: () => {}
438 // }) 462 // })
439 // break 463 // break
440 // case '4': 464 // case '4':
441 // uni.navigateTo({ 465 // uni.navigateTo({
442 // url: '../detailStandard/detailStandard_sun', 466 // url: '../detailStandard/detailStandard_sun',
443 // success: res => {}, 467 // success: res => {},
444 // fail: () => {}, 468 // fail: () => {},
445 // complete: () => {} 469 // complete: () => {}
446 // }) 470 // })
447 // break 471 // break
448 // default : 472 // default :
449 // break 473 // break
450 // } 474 // }
451 }, 475 },
476 // 加入购物车
477 addCart () {
478 store.dispatch('cart/addCart', {
479 uid: this.$store.state.user.userInfo.uid,
480 openid: this.$store.state.user.userInfo.openid,
481 pid: this.pid,
482 checkedSKU: {}
483 })
484 store.dispatch('cart/getCartList', {
485 uid: this.$store.state.user.userInfo.uid // 用户id
486 })
487 },
452 tabChange (e) { 488 tabChange (e) {
453 if (this.current !== e) { 489 if (this.current !== e) {
454 this.current = e 490 this.current = e
455 } 491 }
456 } 492 }
457 } 493 }
458 } 494 }
459 </script> 495 </script>
460 <style lang='scss'> 496 <style lang='scss'>
461 .container { 497 .container {
462 background-color: #f8f8f8; 498 background-color: #f8f8f8;
463 } 499 }
464 .D1, 500 .D1,
465 .D2, 501 .D2,
466 .D3, 502 .D3,
467 .D4, 503 .D4,
468 .D6 { 504 .D6 {
469 background: #ffffff; 505 background: #ffffff;
470 margin-bottom: 10px; 506 margin-bottom: 10px;
471 padding: 8px 20px 8px 20px; 507 padding: 8px 20px 8px 20px;
472 box-sizing: border-box; 508 box-sizing: border-box;
473 .swiperImage { 509 .swiperImage {
474 width: 684rpx; 510 width: 684rpx;
475 height: 512rpx; 511 height: 480rpx;
476 image { 512 image {
477 width: 100%; 513 max-width: 100%;
478 height: 100%; 514 max-height: 100%;
479 border-radius: 16rpx; 515 border-radius: 16rpx;
480 } 516 }
481 } 517 }
482 } 518 }
483 .D5 { 519 .D5 {
484 background: #ffffff; 520 background: #ffffff;
485 padding: 8px 20px 8px 20px; 521 padding: 8px 20px 8px 20px;
486 box-sizing: border-box; 522 box-sizing: border-box;
487 } 523 }
488 .swiperImage { 524 .swiperImage {
489 width: 100%; 525 width: 100%;
490 height: 560rpx; 526 height: 560rpx;
491 .swiper-item { 527 .swiper-item {
492 width: 100%; 528 width: 100%;
493 image { 529 image {
494 width: 100%; 530 width: 100%;
495 } 531 }
496 } 532 }
497 } 533 }
498 .D1 { 534 .D1 {
499 .D1_price { 535 .D1_price {
500 color: #eb5d3b; 536 color: #eb5d3b;
501 font-size: 18px; 537 font-size: 18px;
502 margin-top: 5px; 538 margin-top: 5px;
503 font-family: "PingFangSC-Semibold"; 539 font-family: "PingFangSC-Semibold";
504 display: flex; 540 display: flex;
505 justify-content: space-between; 541 justify-content: space-between;
506 .D1_number { 542 .D1_number {
507 color: #999999; 543 color: #999999;
508 font-size: 14px; 544 font-size: 14px;
509 font-family: "PingFangSC-Regular"; 545 font-family: "PingFangSC-Regular";
510 } 546 }
511 } 547 }
512 .D1_name { 548 .D1_name {
513 font-size: 16px; 549 font-size: 16px;
514 font-family: "PingFangSC-Semibold"; 550 font-family: "PingFangSC-Semibold";
515 margin-top: 5px; 551 margin-top: 5px;
516 .D1_name1 { 552 .D1_name1 {
517 font-weight: bold; 553 font-weight: bold;
518 font-size: 16px; 554 font-size: 16px;
519 color: #333333; 555 color: #333333;
520 } 556 }
521 } 557 }
522 .D1_spans { 558 .D1_spans {
523 font-size: 10px; 559 font-size: 10px;
524 color: #999999; 560 color: #999999;
525 margin-top: 5px; 561 margin-top: 5px;
526 span { 562 span {
527 height: 14px; 563 height: 14px;
528 margin-right: 10px; 564 margin-right: 10px;
529 } 565 }
530 } 566 }
531 } 567 }
532 .D2 { 568 .D2 {
533 font-size: 14px; 569 font-size: 14px;
534 font-family: "PingFangSC-Regular"; 570 font-family: "PingFangSC-Regular";
535 view { 571 view {
536 height: 24px; 572 height: 24px;
537 } 573 }
538 .D2_span1 { 574 .D2_span1 {
539 color: #999999; 575 color: #999999;
540 } 576 }
541 .D2_span2 { 577 .D2_span2 {
542 color: #333333; 578 color: #333333;
543 } 579 }
544 } 580 }
545 .D3 { 581 .D3 {
546 .screenBar { 582 .screenBar {
547 width: 670rpx; 583 width: 670rpx;
548 margin-top: 20rpx; 584 margin-top: 20rpx;
549 margin-bottom: 24rpx; 585 margin-bottom: 24rpx;
550 display: flex; 586 display: flex;
551 flex-direction: row; 587 flex-direction: row;
552 justify-content: space-between; 588 justify-content: space-between;
553 align-items: center; 589 align-items: center;
554 font-size: 14px; 590 font-size: 14px;
555 color: #333333; 591 color: #333333;
556 transition: all 0.2s; 592 transition: all 0.2s;
557 } 593 }
558 .screen-item { 594 .screen-item {
559 font-size: 32rpx; 595 font-size: 32rpx;
560 color: #333333; 596 color: #333333;
561 display: flex; 597 display: flex;
562 transition: all 0.2s; 598 transition: all 0.2s;
563 .D3_list { 599 .D3_list {
564 margin-bottom: 4px; 600 margin-bottom: 4px;
565 } 601 }
566 .D3_list view { 602 .D3_list view {
567 display: flex; 603 display: flex;
568 align-content: center; 604 align-content: center;
569 font-size: 14px; 605 font-size: 14px;
570 color: #333333; 606 color: #333333;
571 } 607 }
572 .D3_list image { 608 .D3_list image {
573 width: 50px; 609 width: 50px;
574 height: 25px; 610 height: 25px;
575 margin-right: 6px; 611 margin-right: 6px;
576 } 612 }
577 .D3_list span { 613 .D3_list span {
578 margin-left: 6px; 614 margin-left: 6px;
579 margin-right: 5px; 615 margin-right: 5px;
580 font-family: "PingFangSC-Regular"; 616 font-family: "PingFangSC-Regular";
581 } 617 }
582 } 618 }
583 .active { 619 .active {
584 border-bottom: 4rpx solid #ff6b4a; 620 border-bottom: 4rpx solid #ff6b4a;
585 } 621 }
586 .customerService { 622 .customerService {
587 margin-bottom: 90rpx; 623 margin-bottom: 90rpx;
588 .serviceItem { 624 .serviceItem {
589 margin-bottom: 32rpx; 625 margin-bottom: 32rpx;
590 .title { 626 .title {
591 display: flex; 627 display: flex;
592 flex-direction: row; 628 flex-direction: row;
593 align-items: center; 629 align-items: center;
594 .titleText { 630 .titleText {
595 font-size: 14px; 631 font-size: 14px;
596 color: #333333; 632 color: #333333;
597 margin-bottom: 12rpx; 633 margin-bottom: 12rpx;
598 } 634 }
599 } 635 }
600 .itemContent { 636 .itemContent {
601 font-size: 14px; 637 font-size: 14px;
602 color: #999999; 638 color: #999999;
603 margin-left: 18rpx; 639 margin-left: 18rpx;
604 } 640 }
605 } 641 }
606 .serviceItem2 { 642 .serviceItem2 {
607 margin-left: 18rpx; 643 margin-left: 18rpx;
608 margin-bottom: 32rpx; 644 margin-bottom: 32rpx;
609 .titleText { 645 .titleText {
610 font-size: 14px; 646 font-size: 14px;
611 color: #ff6b4a; 647 color: #ff6b4a;
612 } 648 }
613 .itemContent { 649 .itemContent {
614 font-size: 14px; 650 font-size: 14px;
615 color: #999999; 651 color: #999999;
616 .itemContent-child { 652 .itemContent-child {
617 margin-bottom: 40rpx; 653 margin-bottom: 40rpx;
618 .contentTitle { 654 .contentTitle {
619 border-bottom: 1px solid #ff6b4a; 655 border-bottom: 1px solid #ff6b4a;
620 } 656 }
621 } 657 }
622 } 658 }
623 } 659 }
624 } 660 }
625 } 661 }
626 .D4 { 662 .D4 {
627 .D4_esvalue { 663 .D4_esvalue {
628 font-size: 14px; 664 font-size: 14px;
629 color: #333333; 665 color: #333333;
630 display: flex; 666 display: flex;
631 justify-content: space-between; 667 justify-content: space-between;
632 margin-bottom: 10px; 668 margin-bottom: 10px;
633 .D4_2 { 669 .D4_2 {
634 width: 90px; 670 width: 90px;
635 display: flex; 671 display: flex;
636 align-items: center; 672 align-items: center;
637 justify-content: space-between; 673 justify-content: space-between;
638 } 674 }
639 } 675 }
640 .D4_esvalue view { 676 .D4_esvalue view {
641 font-size: 14px; 677 font-size: 14px;
642 color: #333333; 678 color: #333333;
643 font-weight: bold; 679 font-weight: bold;
644 } 680 }
645 .D4_list{ 681 .D4_list{
646 display: grid; 682 display: grid;
647 grid-row-gap: 10px; 683 grid-row-gap: 10px;
648 grid-column-gap: 4px; 684 grid-column-gap: 4px;
649 } 685 }
650 .D4_list view { 686 .D4_list view {
651 display: flex; 687 display: flex;
652 justify-content: center; 688 justify-content: center;
653 align-items: center; 689 align-items: center;
654 font-size: 12px; 690 font-size: 12px;
655 width: 118px; 691 width: 118px;
656 height: 24px; 692 height: 24px;
657 border-radius: 2px; 693 border-radius: 2px;
658 background: #f2f2f2; 694 background: #f2f2f2;
659 color: #666666; 695 color: #666666;
660 // letter-spacing: 1px; 696 // letter-spacing: 1px;
661 } 697 }
662 } 698 }
663 .D5 { 699 .D5 {
664 .D5_fixed1 { 700 .D5_fixed1 {
665 display: flex; 701 display: flex;
666 justify-content: space-between; 702 justify-content: space-between;
667 align-content: center; 703 align-content: center;
668 margin-bottom: 12px; 704 margin-bottom: 12px;
669 view { 705 view {
670 font-size: 14px; 706 font-size: 14px;
671 color: #333333; 707 color: #333333;
672 font-weight: bold; 708 font-weight: bold;
673 font-family: "PingFangSC-Medium"; 709 font-family: "PingFangSC-Medium";
674 line-height: 24px; 710 line-height: 24px;
675 } 711 }
676 image { 712 image {
677 width: 240rpx; 713 width: 240rpx;
678 height: 3px; 714 height: 3px;
679 margin-top: 10px; 715 margin-top: 10px;
680 } 716 }
681 } 717 }
682 .D5_all { 718 .D5_all {
683 width: 100%; 719 width: 100%;
684 margin-top: 30rpx; 720 margin-top: 30rpx;
685 margin-right: 30rpx; 721 margin-right: 30rpx;
686 margin-bottom: 180rpx; 722 margin-bottom: 180rpx;
687 font-family: "PingFangSC-Regular"; 723 font-family: "PingFangSC-Regular";
688 // border: #999999 solid 1.5px; 724 // border: #999999 solid 1.5px;
689 } 725 }
690 } 726 }
691 .D6 { 727 .D6 {
692 width: 100%; 728 width: 100%;
693 height: 430px; 729 height: 430px;
694 background: #f9f6ed; 730 background: #f9f6ed;
695 margin-bottom: 74px; 731 margin-bottom: 74px;
696 view { 732 view {
697 text-align: center; 733 text-align: center;
698 } 734 }
699 .D6_v1 { 735 .D6_v1 {
700 font-weight: bold; 736 font-weight: bold;
701 } 737 }
702 .D6_v2 { 738 .D6_v2 {
703 font-size: 14px; 739 font-size: 14px;
704 margin-bottom: 30px; 740 margin-bottom: 30px;
705 } 741 }
706 .D6_v5 { 742 .D6_v5 {
707 .D6_v5_s1 { 743 .D6_v5_s1 {
708 font-weight: bold; 744 font-weight: bold;
709 } 745 }
710 .D6_v5_s2 { 746 .D6_v5_s2 {
711 font-size: 14px; 747 font-size: 14px;
712 } 748 }
713 } 749 }
714 } 750 }
715 .botton { 751 .botton {
716 position: fixed; 752 position: fixed;
717 bottom: 0; 753 bottom: 0;
718 height: 74px; 754 height: 74px;
719 width: 100%; 755 width: 100%;
720 background: #ffffff; 756 background: #ffffff;
721 padding: 20px 20px 8px 20px; 757 padding: 20px 20px 8px 20px;
722 font-family: "PingFangSC-Regular"; 758 font-family: "PingFangSC-Regular";
723 box-sizing: border-box; 759 box-sizing: border-box;
724 display: flex; 760 display: flex;
725 justify-content: space-between; 761 justify-content: space-between;
726 align-content: center; 762 align-content: center;
727 .botton_1 { 763 .botton_1 {
728 width: 20%; 764 width: 20%;
729 height: 100%; 765 height: 100%;
730 text-align: center; 766 text-align: center;
731 color: #989898; 767 color: #989898;
732 } 768 }
733 image { 769 image {
734 width: 60%; 770 width: 60%;
735 height: 30px; 771 height: 30px;
736 } 772 }
737 .botton_image { 773 .botton_image {
738 font-size: 12px; 774 font-size: 12px;
739 text-align: center; 775 text-align: center;
740 } 776 }
741 .botton_2 { 777 .botton_2 {
742 width: 74%; 778 width: 74%;
743 height: 86%; 779 height: 86%;
744 display: grid; 780 display: grid;
745 grid-template-columns: 50% 50%; 781 grid-template-columns: 50% 50%;
746 } 782 }
747 .botton_input { 783 .botton_input {
748 display: inline-flex; 784 display: inline-flex;
749 align-items: center; 785 align-items: center;
750 justify-content: space-around; 786 justify-content: space-around;
751 background: #fff0ec; 787 background: #fff0ec;
752 font-size: 16px; 788 font-size: 16px;
753 color: #ff6b4a; 789 color: #ff6b4a;
754 border-radius: 20px 0 0 20px; 790 border-radius: 20px 0 0 20px;
755 } 791 }
756 .botton_now { 792 .botton_now {
757 display: inline-flex; 793 display: inline-flex;
758 align-items: center; 794 align-items: center;
759 justify-content: space-around; 795 justify-content: space-around;
760 background: #ff6b4a; 796 background: #ff6b4a;
761 font-size: 16px; 797 font-size: 16px;
762 color: #ffffff; 798 color: #ffffff;
763 border-radius: 0 20px 20px 0; 799 border-radius: 0 20px 20px 0;
764 } 800 }
765 } 801 }
766 </style> 802 </style>
767 803
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @637a02b
1 <!-- 订单待付款 待收货 --> 1 <!-- 订单待付款 待收货 -->
2 <template> 2 <template>
3 <view class="content"> 3 <view class="content">
4 <!-- 待付款 --> 4 <!-- 待付款 -->
5 <view 5 <view
6 class="order-time" 6 class="order-time"
7 v-if="status == '0'" 7 v-if="status == '0'"
8 > 8 >
9 <text>请在</text> 9 <text>请在</text>
10 <uni-countdown 10 <uni-countdown
11 color="#EC5D3B" 11 color="#EC5D3B"
12 splitor-color="#EC5D3B" 12 splitor-color="#EC5D3B"
13 :show-day="false" 13 :show-day="false"
14 :hour="0" 14 :hour="0"
15 :second="getTime" 15 :second="getTime"
16 @timeup=timeup 16 @timeup=timeup
17 ></uni-countdown> 17 ></uni-countdown>
18 <text>内完成付款</text> 18 <text>内完成付款</text>
19 </view> 19 </view>
20 <!-- 待收货 --> 20 <!-- 待收货 -->
21 <view 21 <view
22 class="headerBanner" 22 class="headerBanner"
23 v-if="status == '1'" 23 v-if="status == '1'"
24 > 24 >
25 <view class="bannerLeft"> 25 <view class="bannerLeft">
26 <view class="T1">卖家已发货</view> 26 <view class="T1">卖家已发货</view>
27 <view class="T2">还剩 确认收货</view> 27 <view class="T2">还剩 确认收货</view>
28 </view> 28 </view>
29 <image 29 <image
30 src="../../static/car.png" 30 src="../../static/car.png"
31 mode="aspectFill" 31 mode="aspectFill"
32 ></image> 32 ></image>
33 </view> 33 </view>
34 <view class="order"> 34 <view class="order">
35 <view class="order-user"> 35 <view class="order-user">
36 <view class="order-user-head"> 36 <view class="order-user-head">
37 <text class="p1">{{orderAddressInfo.userName}}</text> 37 <text class="p1">{{orderAddressInfo.userName}}</text>
38 <text class="p2">{{orderAddressInfo.telNumber}}</text> 38 <text class="p2">{{orderAddressInfo.telNumber}}</text>
39 </view> 39 </view>
40 <view class="order-user-body"> 40 <view class="order-user-body">
41 <image src="../../static/myorder-paying-location.png"></image> 41 <image src="../../static/myorder-paying-location.png"></image>
42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> 42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 <view class="order-info"> 45 <view class="order-info">
46 <view 46 <view
47 class="order-info-head" 47 class="order-info-head"
48 v-for="(orderInfoListItem,index) in orderInfoList" 48 v-for="(orderInfoListItem,index) in orderInfoList"
49 :key="index" 49 :key="index"
50 > 50 >
51 <image 51 <image
52 :src="orderInfoListItem.imgUrl" 52 :src="orderInfoListItem.imgUrl"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="order-info-head-r"> 55 <view class="order-info-head-r">
56 <text class="p1">{{orderInfoListItem.p_name}}</text> 56 <text class="p1">{{orderInfoListItem.p_name}}</text>
57 <view 57 <view
58 class="p2" 58 class="p2"
59 style="margin: 0;" 59 style="margin: 0;"
60 > 60 >
61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62 <!-- <view class="arrow"></view> --> 62 <!-- <view class="arrow"></view> -->
63 </view> 63 </view>
64 <view class="infoText-bottom"> 64 <view class="infoText-bottom">
65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> 65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66 <view class="buy-num">X {{orderInfoListItem.num}}</view> 66 <view class="buy-num">X {{orderInfoListItem.num}}</view>
67 </view> 67 </view>
68 </view> 68 </view>
69 </view> 69 </view>
70 <!-- <view class="order-info-goodsnum"> 70 <!-- <view class="order-info-goodsnum">
71 <text>X1</text> 71 <text>X1</text>
72 </view> --> 72 </view> -->
73 <text class="order-info-freight"> 73 <text class="order-info-freight">
74 <text class="p1">运费</text> 74 <text class="p1">运费</text>
75 <text class="p2">{{orderInfo.trans_price}}</text> 75 <text class="p2">{{orderInfo.trans_price}}</text>
76 </text> 76 </text>
77 <text class="order-info-discount"> 77 <text class="order-info-discount">
78 <text class="p1">优惠</text> 78 <text class="p1">优惠</text>
79 <text class="p2">-￥{{totalDiscount}}</text> 79 <text class="p2">-￥{{totalDiscount}}</text>
80 </text> 80 </text>
81 <text class="order-info-price"> 81 <text class="order-info-price">
82 <text class="p1">实付</text> 82 <text class="p1">实付</text>
83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text> 83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>
84 </text> 84 </text>
85 <text class="order-info-num"> 85 <text class="order-info-num">
86 <text>订单号：{{payId}}</text> 86 <text>订单号：{{payId}}</text>
87 </text> 87 </text>
88 <text class="order-info-time"> 88 <text class="order-info-time">
89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text> 89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
90 </text> 90 </text>
91 <view class="order-info-hr"></view> 91 <view class="order-info-hr"></view>
92 <view class="order-info-contact"> 92 <view class="order-info-contact">
93 <image src="../../static/myorder-paying-contact.png"></image> 93 <image src="../../static/myorder-paying-contact.png"></image>
94 <text>联系客服</text> 94 <text>联系客服</text>
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
98 <view 98 <view
99 class="order-confim" 99 class="order-confim"
100 v-if="status == '0'" 100 v-if="status == '0'"
101 > 101 >
102 <button 102 <button
103 class="b1" 103 class="b1"
104 @click="cancleOrder" 104 @click="cancleOrder"
105 >取消订单</button> 105 >取消订单</button>
106 <button 106 <button
107 class="b2" 107 class="b2"
108 @click="paylog" 108 @click="paylog"
109 >立即支付</button> 109 >立即支付</button>
110 </view> 110 </view>
111 111
112 <view 112 <view
113 class="order-confim" 113 class="order-confim"
114 v-if="status == '1'" 114 v-if="status == '1'"
115 > 115 >
116 <!-- <button class="b1">取消订单</button> --> 116 <!-- <button class="b1">取消订单</button> -->
117 <button 117 <button
118 class="b2" 118 class="b2"
119 @click="confirmOrder" 119 @click="confirmOrder"
120 >确认收货</button> 120 >确认收货</button>
121 </view> 121 </view>
122 </view> 122 </view>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import store from '@/store' 126 import store from '@/store'
127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
128 export default { 128 export default {
129 components: { 129 components: {
130 UniCountdown 130 UniCountdown
131 }, 131 },
132 data () { 132 data () {
133 return { 133 return {
134 // orderInfo:{}, 134 // orderInfo:{},
135 payId: '', 135 payId: '',
136 payTime: '', 136 payTime: '',
137 status: '', 137 status: '',
138 uid: '', 138 uid: '',
139 openid: '', 139 openid: '',
140 lefttime: 0 140 lefttime: 0
141 141
142 } 142 }
143 }, 143 },
144 onLoad: function (option) { 144 onLoad: function (option) {
145 console.log(option) 145 console.log(option)
146 this.payId = option.payId 146 this.payId = option.payId
147 this.status = option.status 147 this.status = option.status
148 const openid = uni.getStorageSync('openid') 148 const openid = uni.getStorageSync('openid')
149 const uid = this.$store.state.user.uid 149 const uid = this.$store.state.user.uid
150 this.uid = uid 150 this.uid = uid
151 this.openid = openid 151 this.openid = openid
152 store.dispatch('orderRead/getOrderInfo', { 152 store.dispatch('orderRead/getOrderInfo', {
153 pay_id: this.payId, 153 pay_id: this.payId,
154 uid: '1', 154 uid: '1',
155 openid: openid 155 openid: openid
156 }) 156 })
157 157
158 // this.orderInfo = this.$store.state.orderRead.orderInfo 158 // this.orderInfo = this.$store.state.orderRead.orderInfo
159 }, 159 },
160 computed: { 160 computed: {
161 // 获取订单详细信息 161 // 获取订单详细信息
162 orderInfo () { 162 orderInfo () {
163 console.log(this.$store.state.orderRead.orderInfo) 163 console.log(this.$store.state.orderRead.orderInfo)
164 return this.$store.state.orderRead.orderInfo || {} 164 return this.$store.state.orderRead.orderInfo || {}
165 }, 165 },
166 orderInfoList () { 166 orderInfoList () {
167 const orderInfoList = this.orderInfo.order_info[0].list 167 const orderInfoList = this.orderInfo.order_info[0].list
168 return orderInfoList 168 return orderInfoList
169 }, 169 },
170 // 获取订单地址信息 170 // 获取订单地址信息
171 orderAddressInfo () { 171 orderAddressInfo () {
172 return this.orderInfo.order_info[0].address 172 return this.orderInfo.order_info[0].address
173 }, 173 },
174 // 订单付款时间 174 // 订单付款时间
175 getTime () { 175 getTime () {
176 return this.orderInfo.order_info[0].lefttime 176 return this.orderInfo.order_info[0].lefttime
177 }, 177 },
178 // 计算总优惠额 178 // 计算总优惠额
179 totalDiscount () { 179 totalDiscount () {
180 const discountInfoList = this.orderInfo.discount_info 180 const discountInfoList = this.orderInfo.discount_info
181 let totalDiscount = 0 181 let totalDiscount = 0
182 if (discountInfoList) { 182 if (discountInfoList) {
183 discountInfoList.map((discountItem, index) => { 183 discountInfoList.map((discountItem, index) => {
184 totalDiscount += Number(discountItem.value) 184 totalDiscount += Number(discountItem.value)
185 }) 185 })
186 } 186 }
187 // console.log(totalDiscount) 187 // console.log(totalDiscount)
188 return totalDiscount 188 return totalDiscount
189 } 189 }
190 }, 190 },
191 methods: { 191 methods: {
192 // 取消订单 192 // 取消订单
193 timeup () { 193 timeup () {
194 this.cancleOrder() 194 this.cancleOrder()
195 }, 195 },
196 cancleOrder () { 196 cancleOrder () {
197 const uid = this.uid 197 const uid = this.uid
198 const openid = this.openid 198 const openid = this.openid
199 uni.showModal({ 199 uni.showModal({
200 title: '提示', 200 title: '提示',
201 content: '现在取消，订单不可恢复哦，确认取消吗？', 201 content: '现在取消，订单不可恢复哦，确认取消吗？',
202 success: function (res) { 202 success: function (res) {
203 if (res.confirm) { 203 if (res.confirm) {
204 store.dispatch('cancelOrder/cancel', { 204 store.dispatch('cancelOrder/cancel', {
205 keyname: '1', 205 keyname: '1',
206 uid: uid, 206 uid: uid,
207 openid: openid 207 openid: openid
208 }) 208 })
209 } else if (res.cancel) { 209 } else if (res.cancel) {
210 console.log('用户点击取消') 210 console.log('用户点击取消')
211 } 211 }
212 } 212 }
213 }) 213 })
214 }, 214 },
215 paylog () { 215 paylog () {
216 216
217 }, 217 },
218 confirmOrder () { 218 confirmOrder () {
219 store.dispatch('statusConfirm/confirm', { 219 store.dispatch('statusConfirm/confirm', {
220 uid: this.uid, 220 uid: this.uid,
221 openid: this.openid, 221 openid: this.openid,
222 oldway: '1', 222 oldway: '1',
223 way: '2', 223 way: '2',
224 pay_id: this.payId, 224 pay_id: this.payId,
225 judgeContent: '', 225 judgeContent: '',
226 orderInfo: this.orderInfo.order_info 226 orderInfo: this.orderInfo.order_info
227 }).then( 227 }).then(
228 setTimeout(() => { 228 setTimeout(() => {
229 uni.navigateBack() 229 uni.navigateBack()
230 }, 1500) 230 }, 1500)
231 ) 231 )
232 } 232 }
233 }, 233 },
234 filters: { 234 filters: {
235 timerChange: function(value) { 235 timerChange: function(value) {
236 var newDate = new Date() 236 var newDate = new Date()
237 newDate.setTime(value * 1000) 237 newDate.setTime(value * 1000)
238 console.log(newDate.toLocaleString())
239 return newDate.toLocaleString() 238 return newDate.toLocaleString()
240 } 239 }
241 } 240 }
242 } 241 }
243 </script> 242 </script>
244 243
245 <style lang="scss" scoped> 244 <style lang="scss" scoped>
246 .content { 245 .content {
247 min-height: 100vh; 246 min-height: 100vh;
248 display: flex; 247 display: flex;
249 flex-direction: column; 248 flex-direction: column;
250 justify-content: flex-start; 249 justify-content: flex-start;
251 align-items: center; 250 align-items: center;
252 background-color: #f2f2f2; 251 background-color: #f2f2f2;
253 } 252 }
254 253
255 .order { 254 .order {
256 margin-bottom: 112rpx; 255 margin-bottom: 112rpx;
257 background: #f2f2f2; 256 background: #f2f2f2;
258 margin-top: 140rpx; 257 margin-top: 140rpx;
259 width: 670rpx; 258 width: 670rpx;
260 } 259 }
261 260
262 .order-time { 261 .order-time {
263 width: 100%; 262 width: 100%;
264 height: 140rpx; 263 height: 140rpx;
265 background-color: #fff; 264 background-color: #fff;
266 display: flex; 265 display: flex;
267 justify-content: center; 266 justify-content: center;
268 align-items: center; 267 align-items: center;
269 position: fixed; 268 position: fixed;
270 top: 0; 269 top: 0;
271 left: 0; 270 left: 0;
272 text { 271 text {
273 // font-family: PingFangSC-Regular; 272 // font-family: PingFangSC-Regular;
274 // margin-top: 48rpx; 273 // margin-top: 48rpx;
275 font-size: 14px; 274 font-size: 14px;
276 color: #333333; 275 color: #333333;
277 letter-spacing: -0.26px; 276 letter-spacing: -0.26px;
278 } 277 }
279 .p2 { 278 .p2 {
280 // font-family: DINAlternate-Bold; 279 // font-family: DINAlternate-Bold;
281 margin: 42rpx 20rpx 0 20rpx; 280 margin: 42rpx 20rpx 0 20rpx;
282 font-size: 18px; 281 font-size: 18px;
283 color: #ec5d3b; 282 color: #ec5d3b;
284 letter-spacing: -0.34px; 283 letter-spacing: -0.34px;
285 } 284 }
286 } 285 }
287 .headerBanner { 286 .headerBanner {
288 width: 100%; 287 width: 100%;
289 height: 140rpx; 288 height: 140rpx;
290 background: #4a90e2; 289 background: #4a90e2;
291 padding: 26rpx 60rpx 24rpx 60rpx; 290 padding: 26rpx 60rpx 24rpx 60rpx;
292 box-sizing: border-box; 291 box-sizing: border-box;
293 color: #ffffff; 292 color: #ffffff;
294 display: flex; 293 display: flex;
295 justify-content: space-between; 294 justify-content: space-between;
296 align-items: center; 295 align-items: center;
297 position: fixed; 296 position: fixed;
298 top: 0; 297 top: 0;
299 left: 0; 298 left: 0;
300 .bannerLeft { 299 .bannerLeft {
301 font-size: 36rpx; 300 font-size: 36rpx;
302 display: flex; 301 display: flex;
303 flex-direction: column; 302 flex-direction: column;
304 justify-content: center; 303 justify-content: center;
305 align-items: center; 304 align-items: center;
306 .T2 { 305 .T2 {
307 font-size: 24rpx; 306 font-size: 24rpx;
308 } 307 }
309 } 308 }
310 image { 309 image {
311 height: 56rpx; 310 height: 56rpx;
312 width: 72rpx; 311 width: 72rpx;
313 } 312 }
314 } 313 }
315 314
316 .order-user { 315 .order-user {
317 height: 228rpx; 316 height: 228rpx;
318 background: #ffffff; 317 background: #ffffff;
319 border-radius: 14rpx; 318 border-radius: 14rpx;
320 margin: 0 auto; 319 margin: 0 auto;
321 margin-top: 20rpx; 320 margin-top: 20rpx;
322 margin-bottom: 20rpx; 321 margin-bottom: 20rpx;
323 .order-user-head { 322 .order-user-head {
324 display: flex; 323 display: flex;
325 height: 108rpx; 324 height: 108rpx;
326 align-items: center; 325 align-items: center;
327 margin-left: 126rpx; 326 margin-left: 126rpx;
328 .p1 { 327 .p1 {
329 // font-family: PingFangSC-Regular; 328 // font-family: PingFangSC-Regular;
330 font-size: 14px; 329 font-size: 14px;
331 color: #333333; 330 color: #333333;
332 letter-spacing: -0.26px; 331 letter-spacing: -0.26px;
333 margin-right: 20rpx; 332 margin-right: 20rpx;
334 } 333 }
335 .p2 { 334 .p2 {
336 // font-family: PingFangSC-Regular; 335 // font-family: PingFangSC-Regular;
337 font-size: 14px; 336 font-size: 14px;
338 color: #999999; 337 color: #999999;
339 letter-spacing: -0.26px; 338 letter-spacing: -0.26px;
340 } 339 }
341 } 340 }
342 .order-user-body { 341 .order-user-body {
343 display: flex; 342 display: flex;
344 width: 100%; 343 width: 100%;
345 image { 344 image {
346 width: 24px; 345 width: 24px;
347 height: 26px; 346 height: 26px;
348 margin: 12rpx 32rpx 0 40rpx; 347 margin: 12rpx 32rpx 0 40rpx;
349 } 348 }
350 .p3 { 349 .p3 {
351 // font-family: PingFangSC-Semibold; 350 // font-family: PingFangSC-Semibold;
352 font-size: 14px; 351 font-size: 14px;
353 color: #333333; 352 color: #333333;
354 letter-spacing: -0.26px; 353 letter-spacing: -0.26px;
355 } 354 }
356 } 355 }
357 } 356 }
358 357
359 .order-info { 358 .order-info {
360 background-color: #fff; 359 background-color: #fff;
361 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 360 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
362 border-radius: 16rpx; 361 border-radius: 16rpx;
363 margin: 0 auto; 362 margin: 0 auto;
364 view { 363 view {
365 margin-left: 40rpx; 364 margin-left: 40rpx;
366 } 365 }
367 text { 366 text {
368 font-size: 14px; 367 font-size: 14px;
369 } 368 }
370 .order-info-head { 369 .order-info-head {
371 display: flex; 370 display: flex;
372 padding-top: 40rpx; 371 padding-top: 40rpx;
373 image { 372 image {
374 height: 188rpx; 373 height: 188rpx;
375 width: 188rpx; 374 width: 188rpx;
376 } 375 }
377 .order-info-head-r { 376 .order-info-head-r {
378 margin: 0; 377 margin: 0;
379 width: 368rpx; 378 width: 368rpx;
380 margin-left: 24rpx; 379 margin-left: 24rpx;
381 // margin-top: 40rpx; 380 // margin-top: 40rpx;
382 text { 381 text {
383 display: block; 382 display: block;
384 } 383 }
385 // .arrow{ 384 // .arrow{
386 // width: 0; 385 // width: 0;
387 // height: 0; 386 // height: 0;
388 // border-left: 5px transparent; 387 // border-left: 5px transparent;
389 // border-right: 5px transparent; 388 // border-right: 5px transparent;
390 // border-top: 5px #979797; 389 // border-top: 5px #979797;
391 // border-bottom: 0 transparent; 390 // border-bottom: 0 transparent;
392 // border-style: solid; 391 // border-style: solid;
393 // position: relative; 392 // position: relative;
394 // // transform: scaleY(-1); 393 // // transform: scaleY(-1);
395 // } 394 // }
396 // .arrow::after{ 395 // .arrow::after{
397 // content: ''; 396 // content: '';
398 // position: absolute; 397 // position: absolute;
399 // top: -6.5px; 398 // top: -6.5px;
400 // left: -5px; 399 // left: -5px;
401 // border-left: 5px transparent; 400 // border-left: 5px transparent;
402 // border-right: 5px transparent; 401 // border-right: 5px transparent;
403 // border-top: 5px #FFFFFF; 402 // border-top: 5px #FFFFFF;
404 // border-bottom: 0 transparent; 403 // border-bottom: 0 transparent;
405 // border-style: solid; 404 // border-style: solid;
406 // } 405 // }
407 .p1 { 406 .p1 {
408 min-height: 40px; 407 min-height: 40px;
409 // font-family: PingFangSC-Regular; 408 // font-family: PingFangSC-Regular;
410 font-size: 14px; 409 font-size: 14px;
411 color: #333333; 410 color: #333333;
412 letter-spacing: -0.26px; 411 letter-spacing: -0.26px;
413 line-height: 18px; 412 line-height: 18px;
414 // line-height: 20px; 413 // line-height: 20px;
415 } 414 }
416 .p2 { 415 .p2 {
417 height: 34px; 416 height: 34px;
418 padding: 1px 0 3px 0; 417 padding: 1px 0 3px 0;
419 // font-family: PingFangSC-Regular; 418 // font-family: PingFangSC-Regular;
420 font-size: 12px; 419 font-size: 12px;
421 color: #999999; 420 color: #999999;
422 letter-spacing: -0.23px; 421 letter-spacing: -0.23px;
423 } 422 }
424 .infoText-bottom { 423 .infoText-bottom {
425 display: flex; 424 display: flex;
426 flex-direction: row; 425 flex-direction: row;
427 justify-content: flex-start; 426 justify-content: flex-start;
428 align-items: center; 427 align-items: center;
429 width: 100%; 428 width: 100%;
430 margin-left: 0; 429 margin-left: 0;
431 .markPrice { 430 .markPrice {
432 font-size: 14px; 431 font-size: 14px;
433 color: #ff6b4a; 432 color: #ff6b4a;
434 margin-right: 20rpx; 433 margin-right: 20rpx;
435 margin-left: 0rpx; 434 margin-left: 0rpx;
436 } 435 }
437 .buy-num { 436 .buy-num {
438 font-size: 12px; 437 font-size: 12px;
439 color: #999999; 438 color: #999999;
440 } 439 }
441 } 440 }
442 } 441 }
443 } 442 }
444 // .order-info-goodsnum { 443 // .order-info-goodsnum {
445 // display: flex; 444 // display: flex;
446 // align-items: center; 445 // align-items: center;
447 // justify-content: flex-end; 446 // justify-content: flex-end;
448 // text { 447 // text {
449 // margin-right: 44rpx; 448 // margin-right: 44rpx;
450 // // ont-family: PingFangSC-Regular; 449 // // ont-family: PingFangSC-Regular;
451 // font-size: 12px; 450 // font-size: 12px;
452 // color: #999999; 451 // color: #999999;
453 // letter-spacing: -0.23px; 452 // letter-spacing: -0.23px;
454 // } 453 // }
455 // } 454 // }
456 .order-info-freight { 455 .order-info-freight {
457 display: block; 456 display: block;
458 margin-left: 40rpx; 457 margin-left: 40rpx;
459 margin-top: 22rpx; 458 margin-top: 22rpx;
460 .p1 { 459 .p1 {
461 // font-family: PingFangSC-Regular; 460 // font-family: PingFangSC-Regular;
462 font-size: 14px; 461 font-size: 14px;
463 color: #333333; 462 color: #333333;
464 letter-spacing: -0.26px; 463 letter-spacing: -0.26px;
465 line-height: 18px; 464 line-height: 18px;
466 margin-right: 24px; 465 margin-right: 24px;
467 } 466 }
468 .p2 { 467 .p2 {
469 // font-family: PingFangSC-Regular; 468 // font-family: PingFangSC-Regular;
470 font-size: 14px; 469 font-size: 14px;
471 color: #ff6b4a; 470 color: #ff6b4a;
472 letter-spacing: -0.26px; 471 letter-spacing: -0.26px;
473 } 472 }
474 } 473 }
475 .order-info-discount { 474 .order-info-discount {
476 display: block; 475 display: block;
477 margin-left: 40rpx; 476 margin-left: 40rpx;
478 margin-top: 24rpx; 477 margin-top: 24rpx;
479 .p1 { 478 .p1 {
480 // font-family: PingFangSC-Regular; 479 // font-family: PingFangSC-Regular;
481 font-size: 14px; 480 font-size: 14px;
482 color: #333333; 481 color: #333333;
483 letter-spacing: -0.26px; 482 letter-spacing: -0.26px;
484 line-height: 18px; 483 line-height: 18px;
485 margin-right: 24px; 484 margin-right: 24px;
486 } 485 }
487 .p2 { 486 .p2 {
488 // font-family: PingFangSC-Regular; 487 // font-family: PingFangSC-Regular;
489 font-size: 14px; 488 font-size: 14px;
490 color: #ff6b4a; 489 color: #ff6b4a;
491 letter-spacing: -0.26px; 490 letter-spacing: -0.26px;
492 } 491 }
493 } 492 }
494 .order-info-price { 493 .order-info-price {
495 display: block; 494 display: block;
496 margin-left: 40rpx; 495 margin-left: 40rpx;
497 margin-top: 24rpx; 496 margin-top: 24rpx;
498 .p1 { 497 .p1 {
499 // font-family: PingFangSC-Semibold; 498 // font-family: PingFangSC-Semibold;
500 font-size: 14px; 499 font-size: 14px;
501 color: #333333; 500 color: #333333;
502 letter-spacing: -0.26px; 501 letter-spacing: -0.26px;
503 line-height: 18px; 502 line-height: 18px;
504 margin-right: 24px; 503 margin-right: 24px;
505 } 504 }
506 .p2 { 505 .p2 {
507 // font-family: PingFangSC-Semibold; 506 // font-family: PingFangSC-Semibold;
508 font-size: 14px; 507 font-size: 14px;
509 color: #ff6b4a; 508 color: #ff6b4a;
510 letter-spacing: -0.26px; 509 letter-spacing: -0.26px;
511 } 510 }
512 } 511 }
513 .order-info-num { 512 .order-info-num {
514 display: block; 513 display: block;
515 margin-left: 40rpx; 514 margin-left: 40rpx;
516 margin-top: 44rpx; 515 margin-top: 44rpx;
517 text { 516 text {
518 // font-family: PingFangSC-Regular; 517 // font-family: PingFangSC-Regular;
519 font-size: 12px; 518 font-size: 12px;
520 color: #999999; 519 color: #999999;
521 letter-spacing: -0.23px; 520 letter-spacing: -0.23px;
522 } 521 }
523 } 522 }
524 .order-info-time { 523 .order-info-time {
525 display: block; 524 display: block;
526 margin: 8rpx 0 48rpx 40rpx; 525 margin: 8rpx 0 48rpx 40rpx;
527 text { 526 text {
528 // font-family: PingFangSC-Regular; 527 // font-family: PingFangSC-Regular;
529 font-size: 12px; 528 font-size: 12px;
530 color: #999999; 529 color: #999999;
531 letter-spacing: -0.23px; 530 letter-spacing: -0.23px;
532 } 531 }
533 } 532 }
534 .order-info-hr { 533 .order-info-hr {
535 width: 520rpx; 534 width: 520rpx;
536 height: 1px; 535 height: 1px;
537 background-color: #e9e9e9; 536 background-color: #e9e9e9;
538 margin-bottom: 20rpx; 537 margin-bottom: 20rpx;
539 } 538 }
540 .order-info-contact { 539 .order-info-contact {
541 display: flex; 540 display: flex;
542 padding-bottom: 28rpx; 541 padding-bottom: 28rpx;
543 image { 542 image {
544 width: 19px; 543 width: 19px;
545 height: 16px; 544 height: 16px;
546 } 545 }
547 text { 546 text {
548 // font-family: PingFangSC-Regular; 547 // font-family: PingFangSC-Regular;
549 margin-left: 20rpx; 548 margin-left: 20rpx;
550 font-size: 14px; 549 font-size: 14px;
551 color: #333333; 550 color: #333333;
552 letter-spacing: -0.26px; 551 letter-spacing: -0.26px;
553 line-height: 18px; 552 line-height: 18px;
554 } 553 }
555 } 554 }
556 } 555 }
557 556
558 .order-confim { 557 .order-confim {
559 display: flex; 558 display: flex;
560 align-items: center; 559 align-items: center;
561 justify-content: flex-end; 560 justify-content: flex-end;
562 // z-index: 999; 561 // z-index: 999;
563 width: 100%; 562 width: 100%;
564 height: 112rpx; 563 height: 112rpx;
565 position: fixed; 564 position: fixed;
566 bottom: 0; 565 bottom: 0;
567 background: #ffffff; 566 background: #ffffff;
568 button { 567 button {
569 width: 204rpx; 568 width: 204rpx;
570 height: 80rpx; 569 height: 80rpx;
571 border: 1px solid #ff6b4a; 570 border: 1px solid #ff6b4a;
572 border-radius: 40rpx; 571 border-radius: 40rpx;
573 font-size: 32rpx; 572 font-size: 32rpx;
574 letter-spacing: -0.3px; 573 letter-spacing: -0.3px;
575 margin-right: 0; 574 margin-right: 0;
576 } 575 }
577 .b1 { 576 .b1 {
578 // font-family: PingFangSC-Regular; 577 // font-family: PingFangSC-Regular;
579 color: #ff6b4a; 578 color: #ff6b4a;
580 background-color: #ffffff; 579 background-color: #ffffff;
581 } 580 }
582 .b2 { 581 .b2 {
583 // font-family: PingFangSC-Regular; 582 // font-family: PingFangSC-Regular;
584 background-color: #ff6b4a; 583 background-color: #ff6b4a;
585 color: #ffffff; 584 color: #ffffff;
586 margin: 0 26rpx 0 20rpx; 585 margin: 0 26rpx 0 20rpx;
587 } 586 }
588 } 587 }
589 </style> 588 </style>
590 589
src/store/modules/cart.js
Diff comments   View file @637a02b
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5
6 const state = { 6 const state = {
7 cartList: [] 7 cartList: []
8 } 8 }
9 9
10 const mutations = { 10 const mutations = {
11 INIT: (state, cartList) => { 11 INIT: (state, cartList) => {
12 state.cartList = cartList 12 state.cartList = cartList
13 }, 13 },
14 DEL: (state, index) => { 14 DEL: (state, index) => {
15 console.log('mutations====>', state.cartList) 15 console.log('mutations====>', state.cartList)
16 state.cartList.splice(index, 1) 16 state.cartList.splice(index, 1)
17 console.log('mutations====>index', index) 17 console.log('mutations====>index', index)
18 // state.cartList=delList 18 // state.cartList=delList
19 }, 19 },
20 MODI: (state, args) => { 20 MODI: (state, args) => {
21 console.log('the num', state.cartList[args.index].num) 21 console.log('the num', state.cartList[args.index].num)
22 console.log('mutations====>isadd', args) 22 console.log('mutations====>isadd', args)
23 state.cartList[args.index].num = args.num 23 state.cartList[args.index].num = args.num
24 console.log('the num', state.cartList[args.index].num) 24 console.log('the num', state.cartList[args.index].num)
25 } 25 }
26 26
27 } 27 }
28 28
29 const actions = { 29 const actions = {
30 getCartList({ commit }, param) { 30 getCartList({ commit }, param) {
31 request({ 31 request({
32 url: cartList, 32 url: cartList,
33 data: param, 33 data: param,
34 success: (res) => { 34 success: (res) => {
35 console.log('cart===>接口数据', res.data.data) 35 console.log('cart===>接口数据', res.data.data)
36 // const resData = { 36 // const resData = {
37 // ...res, 37 // ...res,
38 // data, 38 // data,
39 // } 39 // }
40 commit('INIT', res.data.data) 40 commit('INIT', res.data.data)
41 }, 41 },
42 fail: (res) => { 42 fail: (res) => {
43 console.log('fail status === > ', res) 43 console.log('fail status === > ', res)
44 }, 44 },
45 complete: (res) => { 45 complete: (res) => {
46 console.log('complete status === > ', res) 46 console.log('complete status === > ', res)
47 } 47 }
48 }) 48 })
49 }, 49 },
50 50
51 modiCart({ commit }, param) { 51 modiCart({ commit }, param) {
52 const arg = Object.assign({ num: param.num }, param.args) 52 const arg = Object.assign({ num: param.num }, param.args)
53 delete param.args 53 delete param.args
54 request({ 54 request({
55 url: cartModi, 55 url: cartModi,
56 data: param, 56 data: param,
57 success: (res) => { 57 success: (res) => {
58 console.log('modiCart-res=====>',res.data) 58 console.log('modiCart-res=====>', res.data)
59 console.log('modi-parm', param) 59 console.log('modi-parm', param)
60 commit('MODI', arg) 60 commit('MODI', arg)
61 }, 61 },
62 fail: (res) => { 62 fail: (res) => {
63 console.log('fail status === > ', res) 63 console.log('fail status === > ', res)
64 }, 64 },
65 complete: (res) => { 65 complete: (res) => {
66 console.log('complete status === > ', res) 66 console.log('complete status === > ', res)
67 } 67 }
68 }) 68 })
69 }, 69 },
70 70
71 delCart({ commit }, param) { 71 delCart({ commit }, param) {
72 const arg = param.arg 72 const arg = param.arg
73 delete param.arg 73 delete param.arg
74 request({ 74 request({
75 url: cartDel, 75 url: cartDel,
76 data: param, 76 data: param,
77 success: (res) => { 77 success: (res) => {
78 console.log('del-parm', param) 78 console.log('del-parm', param)
79 console.log('del-myparms==>', arg) 79 console.log('del-myparms==>', arg)
80 // console.log('deacart====>cartList',this.$store.state.cart.cartList) 80 // console.log('deacart====>cartList',this.$store.state.cart.cartList)
81 81
82 commit('DEL', arg) 82 commit('DEL', arg)
83 }, 83 },
84 fail: (res) => { 84 fail: (res) => {
85 console.log('fail status === > ', res) 85 console.log('fail status === > ', res)
86 }, 86 },
87 complete: (res) => { 87 complete: (res) => {
88 console.log('complete status === > ', res) 88 console.log('complete status === > ', res)
89 } 89 }
90 }) 90 })
91 }, 91 },
92 92
93 addCart({ commit }, param) { 93 addCart({ commit }, param) {
94 console.log('请求接口开始') 94 console.log('请求接口开始')
95 request({ 95 request({
96 url: cartAdd, 96 url: cartAdd,
97 data: param, 97 data: param,
98 success: (res) => { 98 success: (res) => {
99 console.log('add-parm', param) 99 console.log('add-parm', param)
100 console.log('addcart===>res.data===>', res.data) 100 console.log('addcart===>res.data===>', res.data)
101 // commit('INIT', res.data.data) 101 // commit('INIT', res.data.data)
102 }, 102 },
103 fail: (res) => { 103 fail: (res) => {
104 console.log('fail status === > ', res) 104 console.log('fail status === > ', res)
105 }, 105 },
106 complete: (res) => { 106 complete: (res) => {
107 console.log('complete status === > ', res) 107 console.log('complete status === > ', res)
108 } 108 }
109 }) 109 })
110 } 110 }
111 111
112 } 112 }
113 113
114 export default { 114 export default {
115 namespaced: true, 115 namespaced: true,
116 state, 116 state,
117 mutations, 117 mutations,
118 actions 118 actions
119 } 119 }
120 120