吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 4 changed files   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @4cafd66
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 methods: { 124
126 125 methods: {
127 toGoods(id, type) { 126
128 uni.navigateTo({ 127 toGoods(id, type) {
129 url: '../frameDetail/frameDetail?oderId=' + id, 128 uni.navigateTo({
130 success: res => {}, 129 url: '../frameDetail/frameDetail?oderId=' + id,
131 fail: () => {}, 130 success: res => {},
132 complete: () => {} 131 fail: () => {},
133 }) 132 complete: () => {}
134 console.log('toGoods =====> id:' + id + '======>type:' + type) 133 })
135 switch (type) { 134 console.log('toGoods =====> id:' + id + '======>type:' + type)
136 case 1: 135 switch (type) {
137 uni.navigateTo({ 136 case 1:
138 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 137 uni.navigateTo({
139 success: res => {}, 138 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
140 fail: () => {}, 139 success: res => {},
141 complete: () => {} 140 fail: () => {},
142 }) 141 complete: () => {}
143 break 142 })
144 case 2: 143 break
145 uni.navigateTo({ 144 case 2:
146 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 145 uni.navigateTo({
147 success: res => {}, 146 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
148 fail: () => {}, 147 success: res => {},
149 complete: () => {} 148 fail: () => {},
150 }) 149 complete: () => {}
151 break 150 })
152 case 3: 151 break
153 uni.navigateTo({ 152 case 3:
154 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 153 uni.navigateTo({
155 success: res => {}, 154 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
156 fail: () => {}, 155 success: res => {},
157 complete: () => {} 156 fail: () => {},
158 }) 157 complete: () => {}
159 break 158 })
160 case 4: 159 break
161 uni.navigateTo({ 160 case 4:
162 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 161 uni.navigateTo({
163 success: res => {}, 162 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
164 fail: () => {}, 163 success: res => {},
165 complete: () => {} 164 fail: () => {},
166 }) 165 complete: () => {}
167 break 166 })
168 default : 167 break
169 break 168 default :
170 } 169 break
171 }, 170 }
172 171 },
173 counter(index, isadd, mp_id, sk_id, num, cart_id) { 172
174 // console.log('===>>counter ===>num',num) 173 counter(index, isadd, mp_id, sk_id, num, cart_id) {
175 // console.log('===>>counter ===>isadd',isadd) 174 // console.log('===>>counter ===>num',num)
176 num = parseInt(num) 175 // console.log('===>>counter ===>isadd',isadd)
177 if (isadd) { 176 num = parseInt(num)
178 if (num >= this.maxCount) { 177 if (isadd) {
179 this.addDisabled = true 178 if (num >= this.maxCount) {
180 } else { 179 this.addDisabled = true
181 this.addDisabled = true 180 } else {
182 // 修改num 181 this.addDisabled = true
183 if (this.childIsOpen[index]) { 182 // 修改num
184 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 183 if (this.childIsOpen[index]) {
185 } 184 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
186 store.dispatch('cart/modiCart', { 185 }
187 uid: this.$store.state.user.userInfo.uid, 186 store.dispatch('cart/modiCart', {
188 openid: this.$store.state.user.userInfo.openid, 187 uid: this.$store.state.user.userInfo.uid,
189 mp_id: mp_id, 188 openid: this.$store.state.user.userInfo.openid,
190 sk_id: sk_id, 189 mp_id: mp_id,
191 cart_id: cart_id, 190 sk_id: sk_id,
192 num: num + 1, 191 cart_id: cart_id,
193 args: { 192 num: num + 1,
194 index: index, 193 args: {
195 isadd: isadd 194 index: index,
196 } 195 isadd: isadd
197 }) 196 }
198 this.addDisabled = false 197 })
199 } 198 this.addDisabled = false
200 } else { 199 }
201 if (num <= 1) { 200 } else {
202 this.desDisabled = true 201 if (num <= 1) {
203 } else { 202 this.desDisabled = true
204 this.desDisabled = false 203 } else {
205 // post 请求修改相关参数 204 this.desDisabled = false
206 if (this.childIsOpen[index]) { 205 // post 请求修改相关参数
207 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 206 if (this.childIsOpen[index]) {
208 } 207 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
209 store.dispatch('cart/modiCart', { 208 }
210 uid: this.$store.state.user.userInfo.uid, 209 store.dispatch('cart/modiCart', {
211 openid: this.$store.state.user.userInfo.openid, 210 uid: this.$store.state.user.userInfo.uid,
212 mp_id: mp_id, 211 openid: this.$store.state.user.userInfo.openid,
213 sk_id: sk_id, 212 mp_id: mp_id,
214 cart_id: cart_id, 213 sk_id: sk_id,
215 num: num - 1, 214 cart_id: cart_id,
216 args: { 215 num: num - 1,
217 index: index, 216 args: {
218 isadd: isadd 217 index: index,
219 } 218 isadd: isadd
220 }) 219 }
221 this.desDisabled = true 220 })
222 } 221 this.desDisabled = true
223 } 222 }
224 // store.dispatch('cart/getCartList', { 223 }
225 // uid: this.$store.state.user.userInfo.uid // 用户id 224 // store.dispatch('cart/getCartList', {
226 // }) 225 // uid: this.$store.state.user.userInfo.uid // 用户id
227 }, 226 // })
228 227 },
229 Change(isopen, indexC) { 228
230 // console.log('lalla===>',isopen) 229 Change(isopen, indexC) {
231 this.childIsOpen[indexC] = !isopen 230 // console.log('lalla===>',isopen)
232 if (!isopen) { 231 this.childIsOpen[indexC] = !isopen
233 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 232 if (!isopen) {
234 } else { 233 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) 234 } else {
236 } 235 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
237 let m = true 236 }
238 for (let i = 0; i < this.childIsOpen.length; i++) { 237 let m = true
239 m = m & this.childIsOpen[i] 238 for (let i = 0; i < this.childIsOpen.length; i++) {
240 } 239 m = m & this.childIsOpen[i]
241 if (m == 1) { 240 }
242 this.pIsoPen = true 241 if (m == 1) {
243 } else { 242 this.pIsoPen = true
244 this.pIsoPen = false 243 } else {
245 } 244 this.pIsoPen = false
246 }, 245 }
247 pChange(isopen) { 246 },
248 this.pIsoPen = !isopen 247 pChange(isopen) {
249 for (let i = 0; i < this.childIsOpen.length; i++) { 248 this.pIsoPen = !isopen
250 this.childIsOpen[i] = !isopen 249 for (let i = 0; i < this.childIsOpen.length; i++) {
251 } 250 this.childIsOpen[i] = !isopen
252 if (this.pIsoPen) { 251 }
253 // 计算总价逻辑 252 if (this.pIsoPen) {
254 if (this.childIsOpen.length != 0) { 253 // 计算总价逻辑
255 for (let i = 0; i < this.childIsOpen.length; i++) { 254 if (this.childIsOpen.length != 0) {
256 if (this.childIsOpen[i]) { 255 for (let i = 0; i < this.childIsOpen.length; i++) {
257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 256 if (this.childIsOpen[i]) {
258 } 257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
259 } 258 }
260 } 259 }
261 } else { 260 }
262 this.totalPrice = 0 261 } else {
263 } 262 this.totalPrice = 0
264 }, 263 }
265 delCart(cart_id, index) { 264 },
266 // console.log('userInfo',this.$store.state.user.userInfo) 265 delCart(cart_id, index) {
267 cart_id = parseInt(cart_id) 266 // console.log('userInfo',this.$store.state.user.userInfo)
268 // console.log('delcart------>cart_id',cart_id) 267 cart_id = parseInt(cart_id)
269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 268 // console.log('delcart------>cart_id',cart_id)
270 // console.log('delcart======>index',index) 269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
271 uni.showModal({ 270 // console.log('delcart======>index',index)
272 title: '是否删除该商品', 271 uni.showModal({
273 // content: '是否删除该商品', 272 title: '是否删除该商品',
274 success: function (res) { 273 // content: '是否删除该商品',
275 if (res.confirm) { 274 success: function (res) {
276 // this.$store.state.cart.cartList.splice(index,1) 275 if (res.confirm) {
277 store.dispatch('cart/delCart', { 276 // this.$store.state.cart.cartList.splice(index,1)
278 uid: this.$store.state.user.userInfo.uid, 277 store.dispatch('cart/delCart', {
279 openid: this.$store.state.user.userInfo.openid, 278 uid: this.$store.state.user.userInfo.uid,
280 cart_id: cart_id, // 要修改的购物车id 279 openid: this.$store.state.user.userInfo.openid,
281 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 280 cart_id: cart_id, // 要修改的购物车id
282 }) 281 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
283 console.log('用户点击确定') 282 })
284 } 283 console.log('用户点击确定')
285 } 284 }
286 }) 285 }
287 } 286 })
288 } 287 }
289 } 288 }
290 </script> 289 }
291 290 </script>
292 <style lang="scss"> 291
293 .content { 292 <style lang="scss">
294 min-height: 100vh; 293 .content {
295 background-color: #f2f2f2; 294 min-height: 100vh;
296 display: flex; 295 background-color: #f2f2f2;
297 flex-direction: column; 296 display: flex;
298 align-items: center; 297 flex-direction: column;
299 justify-content: space-between; 298 align-items: center;
300 padding: 20rpx 40rpx; 299 justify-content: space-between;
301 box-sizing: border-box; 300 padding: 20rpx 40rpx;
302 301 box-sizing: border-box;
303 .partentCheck{ 302
304 width: 16px; 303 .partentCheck{
305 height: 16px; 304 width: 16px;
306 border-radius: 22px; 305 height: 16px;
307 border: 1px solid #CFCFCF; 306 border-radius: 22px;
308 background-color: #FFFFFF; 307 border: 1px solid #CFCFCF;
309 margin: 6px; 308 background-color: #FFFFFF;
310 } 309 margin: 6px;
311 .partentChecked{ 310 }
312 width: 18px; 311 .partentChecked{
313 height: 18px; 312 width: 18px;
314 border-radius: 22px; 313 height: 18px;
315 background-color: #FF6B4A; 314 border-radius: 22px;
316 margin: 6px; 315 background-color: #FF6B4A;
317 .correct { 316 margin: 6px;
318 display: inline-block; 317 .correct {
319 position: relative; 318 display: inline-block;
320 width: 10rpx; 319 position: relative;
321 height: 2rpx; 320 width: 10rpx;
322 background: #FFFFFF; 321 height: 2rpx;
323 line-height: 0; 322 background: #FFFFFF;
324 font-size: 0; 323 line-height: 0;
325 position: relative; 324 font-size: 0;
326 top: -7px; 325 position: relative;
327 left: 4px; 326 top: -7px;
328 -webkit-transform: rotate(45deg); 327 left: 4px;
329 } 328 -webkit-transform: rotate(45deg);
330 .correct:after { 329 }
331 content: '/'; 330 .correct:after {
332 display: block; 331 content: '/';
333 width: 16rpx; 332 display: block;
334 height: 2rpx; 333 width: 16rpx;
335 background: #FFFFFF; 334 height: 2rpx;
336 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 335 background: #FFFFFF;
337 } 336 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
338 } 337 }
339 338 }
340 .card{ 339
341 background-color: #FFFFFF; 340 .card{
342 border-radius: 16rpx; 341 background-color: #FFFFFF;
343 box-sizing: border-box; 342 border-radius: 16rpx;
344 padding: 36rpx 36rpx 36rpx 18rpx; 343 box-sizing: border-box;
345 display: flex; 344 padding: 36rpx 36rpx 36rpx 18rpx;
346 flex-direction: column; 345 display: flex;
347 align-items: center; 346 flex-direction: column;
348 justify-content: space-between; 347 align-items: center;
349 margin-bottom: 180rpx; 348 justify-content: space-between;
350 .cardHeader{ 349 margin-bottom: 180rpx;
351 width: 100%; 350 .cardHeader{
352 height: 36rpx; 351 width: 100%;
353 display: flex; 352 height: 36rpx;
354 align-items: center; 353 display: flex;
355 justify-content: flex-start; 354 align-items: center;
356 margin-bottom: 20rpx; 355 justify-content: flex-start;
357 image{ 356 margin-bottom: 20rpx;
358 height: 32rpx; 357 image{
359 width: 32rpx; 358 height: 32rpx;
360 padding-left: 6px; 359 width: 32rpx;
361 padding-right: 10px; 360 padding-left: 6px;
362 } 361 padding-right: 10px;
363 text{ 362 }
364 // font-family: PingFangSC-Regular; 363 text{
365 font-size: 14px; 364 // font-family: PingFangSC-Regular;
366 color: #333333; 365 font-size: 14px;
367 letter-spacing: -0.26px; 366 color: #333333;
368 } 367 letter-spacing: -0.26px;
369 } 368 }
370 .cardBody{ 369 }
371 width: 100%; 370 .cardBody{
372 min-height: 300rpx; 371 width: 100%;
373 display: flex; 372 min-height: 300rpx;
374 align-items: center; 373 display: flex;
375 justify-content: space-between; 374 align-items: center;
376 .goodInfo{ 375 justify-content: space-between;
377 width: 390rpx; 376 .goodInfo{
378 display: flex; 377 width: 390rpx;
379 flex-direction: row; 378 display: flex;
380 justify-content: flex-start; 379 flex-direction: row;
381 padding-left: 6px; 380 justify-content: flex-start;
382 381 padding-left: 6px;
383 .imageWrap{ 382
384 height: 188rpx; 383 .imageWrap{
385 width: 188rpx; 384 height: 188rpx;
386 margin-right: 28rpx; 385 width: 188rpx;
387 386 margin-right: 28rpx;
388 image{ 387
389 border-radius: 4px; 388 image{
390 height: 188rpx; 389 border-radius: 4px;
391 width: 188rpx; 390 height: 188rpx;
392 } 391 width: 188rpx;
393 } 392 }
394 .infoRight{ 393 }
395 display: flex; 394 .infoRight{
396 flex-direction: column; 395 display: flex;
397 align-items: flex-start; 396 flex-direction: column;
398 justify-content: space-between; 397 align-items: flex-start;
399 min-height: 240rpx; 398 justify-content: space-between;
400 .goodName{ 399 min-height: 240rpx;
401 display: -webkit-box; 400 .goodName{
402 -webkit-box-orient: vertical; 401 display: -webkit-box;
403 -webkit-line-clamp: 2; 402 -webkit-box-orient: vertical;
404 text-align: justify; 403 -webkit-line-clamp: 2;
405 overflow: hidden; 404 text-align: justify;
406 font-size: 28rpx; 405 overflow: hidden;
407 color: #333333; 406 font-size: 28rpx;
408 } 407 color: #333333;
409 .describ{ 408 }
410 width: 100%; 409 .describ{
411 // min-height: 80rpx; 410 width: 100%;
412 // box-sizing: border-box; 411 // min-height: 80rpx;
413 // padding: 10rpx; 412 // box-sizing: border-box;
414 font-size: 20rpx; 413 // padding: 10rpx;
415 letter-spacing: -0.23px; 414 font-size: 20rpx;
416 text-align: justify; 415 letter-spacing: -0.23px;
417 color: #999999; 416 text-align: justify;
418 // background: #F9F9F9; 417 color: #999999;
419 // display: flex; 418 // background: #F9F9F9;
420 // justify-content: center; 419 // display: flex;
421 // align-items: center; 420 // justify-content: center;
422 // text{ 421 // align-items: center;
423 // text-overflow: -o-ellipsis-lastline; 422 // text{
424 // overflow: hidden; 423 // text-overflow: -o-ellipsis-lastline;
425 // text-overflow: ellipsis; 424 // overflow: hidden;
426 // display: -webkit-box; 425 // text-overflow: ellipsis;
427 // -webkit-line-clamp: 2; 426 // display: -webkit-box;
428 // line-clamp: 2; 427 // -webkit-line-clamp: 2;
429 // -webkit-box-orient: vertical; 428 // line-clamp: 2;
430 // } 429 // -webkit-box-orient: vertical;
431 // .icon { 430 // }
432 // width: 0; 431 // .icon {
433 // height: 0; 432 // width: 0;
434 // border-left: 5px transparent; 433 // height: 0;
435 // border-right: 5px transparent; 434 // border-left: 5px transparent;
436 // border-top: 5px #979797; 435 // border-right: 5px transparent;
437 // border-bottom: 0 transparent; 436 // border-top: 5px #979797;
438 // border-style: solid; 437 // border-bottom: 0 transparent;
439 // position: relative; 438 // border-style: solid;
440 // margin-left: 10px; 439 // position: relative;
441 // // transform: scaleY(-1); 440 // margin-left: 10px;
442 // } 441 // // transform: scaleY(-1);
443 // .icon::after{ 442 // }
444 // content: ''; 443 // .icon::after{
445 // position: absolute; 444 // content: '';
446 // top: -6.5px; 445 // position: absolute;
447 // left: -5px; 446 // top: -6.5px;
448 // border-left: 5px transparent; 447 // left: -5px;
449 // border-right: 5px transparent; 448 // border-left: 5px transparent;
450 // border-top: 5px #FFFFFF; 449 // border-right: 5px transparent;
451 // border-bottom: 0 transparent; 450 // border-top: 5px #FFFFFF;
452 // border-style: solid; 451 // border-bottom: 0 transparent;
453 // } 452 // border-style: solid;
454 } 453 // }
455 .priceBox{ 454 }
456 display: flex; 455 .priceBox{
457 justify-content: space-between; 456 display: flex;
458 align-items: center; 457 justify-content: space-between;
459 // margin-top: 26px; 458 align-items: center;
460 width: 100%; 459 // margin-top: 26px;
461 font-size: 14px; 460 width: 100%;
462 color: #999999; 461 font-size: 14px;
463 .maxCount{ 462 color: #999999;
464 color: #999999; 463 .maxCount{
465 font-size: 24rpx; 464 color: #999999;
466 } 465 font-size: 24rpx;
467 .price{ 466 }
468 color: #FF6B4A; 467 .price{
469 font-size: 28rpx; 468 color: #FF6B4A;
470 } 469 font-size: 28rpx;
471 .counter{ 470 }
472 display: flex; 471 .counter{
473 flex-direction: row; 472 display: flex;
474 justify-content: space-between; 473 flex-direction: row;
475 align-items: center; 474 justify-content: space-between;
476 font-size: 28rpx; 475 align-items: center;
477 color: #333333; 476 font-size: 28rpx;
478 width: 122rpx; 477 color: #333333;
479 .btn{ 478 width: 122rpx;
480 display: flex; 479 .btn{
481 justify-content: center; 480 display: flex;
482 line-height: 32rpx; 481 justify-content: center;
483 height: 32rpx; 482 line-height: 32rpx;
484 width: 32rpx; 483 height: 32rpx;
485 background-color: #F2F2F2; 484 width: 32rpx;
486 color: #CFCFCF; 485 background-color: #F2F2F2;
487 } 486 color: #CFCFCF;
488 } 487 }
489 } 488 }
490 } 489 }
491 } 490 }
492 } 491 }
493 } 492 }
494 493 }
495 .footer{ 494
496 position: fixed; 495 .footer{
497 left: 0; 496 position: fixed;
498 bottom: 0px; 497 left: 0;
499 height: 112rpx; 498 bottom: 0px;
500 width: 100%; 499 height: 112rpx;
501 background-color: #FFFFFF; 500 width: 100%;
502 font-size: 16px; 501 background-color: #FFFFFF;
503 display: flex; 502 font-size: 16px;
504 justify-content: space-between; 503 display: flex;
505 align-items: center; 504 justify-content: space-between;
506 .footerLeft{ 505 align-items: center;
507 display: flex; 506 .footerLeft{
508 justify-content: center; 507 display: flex;
509 align-items: center; 508 justify-content: center;
510 width: 50%; 509 align-items: center;
511 color: #333333; 510 width: 50%;
512 text{ 511 color: #333333;
513 color: #FF6B4A; 512 text{
514 } 513 color: #FF6B4A;
515 } 514 }
516 .footerRight{ 515 }
517 display: flex; 516 .footerRight{
518 justify-content: flex-end; 517 display: flex;
519 align-items: center; 518 justify-content: flex-end;
520 width: 50%; 519 align-items: center;
521 margin-right: 26rpx; 520 width: 50%;
522 .paybtn{ 521 margin-right: 26rpx;
523 display: flex; 522 .paybtn{
524 justify-content: center; 523 display: flex;
525 align-items: center; 524 justify-content: center;
526 background: #FF6B4A; 525 align-items: center;
527 border-radius: 20px; 526 background: #FF6B4A;
528 border-radius: 20px; 527 border-radius: 20px;
529 color: #FFFFFF; 528 border-radius: 20px;
530 width: 204rpx; 529 color: #FFFFFF;
531 height: 80rpx; 530 width: 204rpx;
532 } 531 height: 80rpx;
533 } 532 }
534 533 }
535 } 534
536 } 535 }
537 536 }
538 </style> 537
539 538 </style>
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @4cafd66
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="addCart()" 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 // 购物车数据 344 screenItems: [
338 addCartList: { 345 { current: 0, text: '商品介绍' },
339 mp_id: 335, 346 { current: 1, text: '规格参数' },
340 sk_id: 0, 347 { current: 2, text: '售后保障' }
341 num: 1, 348 ],
342 price: '' 349 current: 0,
343 }, 350 starCount: 5,
344 screenItems: [ 351 parameter: [
345 { current: 0, text: '商品介绍' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
346 { current: 1, text: '规格参数' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
347 { current: 2, text: '售后保障' } 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
348 ], 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
349 current: 0, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
350 starCount: 5, 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }
351 parameter: [ 358 ],
352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 359 esvalue: '宝贝好评率',
353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 360 introduction: {
354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 361 material: '钛合金',
355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 362 func: '抗疲劳/防辐射',
356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 363 rate: '男/女'
357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } 364 },
358 ], 365 imgAll: '/static/img/detail/d8.png',
359 esvalue: '宝贝好评率', 366 photoes: [
360 introduction: { 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
361 material: '钛合金', 368 { value: '上网', img: '/static/img/detail/d10.png' },
362 func: '抗疲劳/防辐射', 369 { value: '追剧', img: '/static/img/detail/d11.png' },
363 rate: '男/女' 370 { value: '玩游戏', img: '/static/img/detail/d12.png' }
364 }, 371 ],
365 imgAll: '/static/img/detail/d8.png', 372 imgDetail: '/static/img/detail/d13.png',
366 photoes: [ 373 imgShop: {
367 { value: '日常办公', img: '/static/img/detail/d9.png' }, 374 img: '/static/tab-cart.png',
368 { value: '上网', img: '/static/img/detail/d10.png' }, 375 IsShown: false
369 { value: '追剧', img: '/static/img/detail/d11.png' }, 376 },
370 { value: '玩游戏', img: '/static/img/detail/d12.png' } 377 tag: {
371 ], 378 prod_tag_freesend: [{
372 imgDetail: '/static/img/detail/d13.png', 379 label: '眼镜盒',
373 imgShop: { 380 value: '262'
374 img: '/static/tab-cart.png', 381 }]
375 IsShown: false 382 }
376 }, 383 }
377 tag: { 384 },
378 prod_tag_freesend: [{ 385 onLoad: function ({ pid }) {
379 label: '眼镜盒', 386 this.pid = pid
380 value: '262' 387 store.dispatch('read/fetch', {
381 }] 388 pid
382 } 389 }).then(() => {
383 } 390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
384 }, 391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
385 onLoad: function ({ pid }) { 392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
386 this.pid = pid 393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
387 store.dispatch('read/fetch', { 394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
388 pid 395 this.parameter[5].slength = `${this.goodInfo.weight}mm`
389 }).then(() => { 396 this.tag = this.goodInfo.tag
397 this.addCartList.price = this.goodInfo.p_sale_price
390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 398 this.test = this.goodInfo.prodIntro1
391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 400 })
393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 401 },
394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 402 computed: {
395 this.parameter[5].slength = `${this.goodInfo.weight}mm` 403 updateGoodType () {
396 this.tag = this.goodInfo.tag 404 return this.goodType
397 this.addCartList.price = this.goodInfo.p_sale_price 405 },
398 this.test = this.goodInfo.prodIntro1 406 goodInfo () {
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 407 console.log(this.$store.state.read.goodInfo)
400 }) 408 return this.$store.state.read.goodInfo
401 }, 409 }
402 computed: { 410 },
403 updateGoodType () { 411 methods: {
404 return this.goodType 412 // 前往购物车
405 }, 413 toCart() {
406 goodInfo () { 414 uni.switchTab({
407 console.log(this.$store.state.read.goodInfo) 415 url: '/pages/cart/cart',
408 return this.$store.state.read.goodInfo 416 success: res => {},
409 } 417 fail: (error) => { console.log('跳转购物车失败======>', error) },
410 }, 418 complete: () => { console.log('toCart') }
411 methods: { 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 toCart() { 437 goPerchase () {
414 uni.switchTab({ 438 // switch (this.updateGoodType) {
415 url: '/pages/cart/cart', 439 // case '1':
416 success: res => {}, 440 console.log('goPerchase')
417 fail: (error) => { console.log('跳转购物车失败======>', error) }, 441 uni.navigateTo({
418 complete: () => { console.log('toCart') } 442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
419 }) 443 success: res => {},
420 }, 444 fail: (error) => { console.log('跳转参数选择失败======>', error) },
421 // 加入购物车 445 complete: () => { console.log('goPerchase') }
422 addCart () { 446 })
423 store.dispatch('cart/addCart', { 447 // break
424 uid: this.$store.state.user.userInfo.uid, 448 // case '2':
425 openid: this.$store.state.user.userInfo.openid, 449 // uni.navigateTo({
426 mp_id: this.addCartList.mp_id, 450 // url: '../detailStandard/detailStandard_k',
427 sk_id: this.addCartList.sk_id, 451 // success: res => {},
428 num: this.addCartList.num, 452 // fail: () => {},
429 pid: this.pid, 453 // complete: () => {}
430 price: this.addCartList.price, 454 // })
431 checkedSKU: {} 455 // break
432 }) 456 // case '3':
433 store.dispatch('cart/getCartList', { 457 // uni.navigateTo({
434 uid: this.$store.state.user.userInfo.uid // 用户id 458 // url: '../purchaseLenses/purchaseLenses',
435 }) 459 // success: res => {},
436 }, 460 // fail: () => {},
437 goPerchase () { 461 // complete: () => {}
438 // switch (this.updateGoodType) { 462 // })
439 // case '1': 463 // break
440 console.log('goPerchase') 464 // case '4':
441 uni.navigateTo({ 465 // uni.navigateTo({
442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 466 // url: '../detailStandard/detailStandard_sun',
443 success: res => {}, 467 // success: res => {},
444 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 468 // fail: () => {},
445 complete: () => { console.log('goPerchase') } 469 // complete: () => {}
446 }) 470 // })
447 // break 471 // break
448 // case '2': 472 // default :
449 // uni.navigateTo({ 473 // break
450 // url: '../detailStandard/detailStandard_k', 474 // }
451 // success: res => {}, 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 // fail: () => {}, 488 tabChange (e) {
453 // complete: () => {} 489 if (this.current !== e) {
454 // }) 490 this.current = e
455 // break 491 }
456 // case '3': 492 }
457 // uni.navigateTo({ 493 }
458 // url: '../purchaseLenses/purchaseLenses', 494 }
459 // success: res => {}, 495 </script>
460 // fail: () => {}, 496 <style lang='scss'>
461 // complete: () => {} 497 .container {
462 // }) 498 background-color: #f8f8f8;
463 // break 499 }
464 // case '4': 500 .D1,
465 // uni.navigateTo({ 501 .D2,
466 // url: '../detailStandard/detailStandard_sun', 502 .D3,
467 // success: res => {}, 503 .D4,
468 // fail: () => {}, 504 .D6 {
469 // complete: () => {} 505 background: #ffffff;
470 // }) 506 margin-bottom: 10px;
471 // break 507 padding: 8px 20px 8px 20px;
472 // default : 508 box-sizing: border-box;
473 // break 509 .swiperImage {
474 // } 510 width: 684rpx;
475 }, 511 height: 480rpx;
476 // 加入购物车 512 image {
477 addCart () { 513 max-width: 100%;
478 store.dispatch('cart/addCart', { 514 max-height: 100%;
479 uid: this.$store.state.user.userInfo.uid, 515 border-radius: 16rpx;
480 openid: this.$store.state.user.userInfo.openid, 516 }
481 pid: this.pid, 517 }
482 checkedSKU: {} 518 }
483 }) 519 .D5 {
484 store.dispatch('cart/getCartList', { 520 background: #ffffff;
485 uid: this.$store.state.user.userInfo.uid // 用户id 521 padding: 8px 20px 8px 20px;
486 }) 522 box-sizing: border-box;
487 }, 523 }
488 tabChange (e) { 524 .swiperImage {
489 if (this.current !== e) { 525 width: 100%;
490 this.current = e 526 height: 560rpx;
491 } 527 .swiper-item {
492 } 528 width: 100%;
493 } 529 image {
494 } 530 width: 100%;
495 </script> 531 }
496 <style lang='scss'> 532 }
497 .container { 533 }
498 background-color: #f8f8f8; 534 .D1 {
499 } 535 .D1_price {
500 .D1, 536 color: #eb5d3b;
501 .D2, 537 font-size: 18px;
502 .D3, 538 margin-top: 5px;
503 .D4, 539 font-family: "PingFangSC-Semibold";
504 .D6 { 540 display: flex;
505 background: #ffffff; 541 justify-content: space-between;
506 margin-bottom: 10px; 542 .D1_number {
507 padding: 8px 20px 8px 20px; 543 color: #999999;
508 box-sizing: border-box; 544 font-size: 14px;
509 .swiperImage { 545 font-family: "PingFangSC-Regular";
510 width: 684rpx; 546 }
511 height: 480rpx; 547 }
512 image { 548 .D1_name {
513 max-width: 100%; 549 font-size: 16px;
514 max-height: 100%; 550 font-family: "PingFangSC-Semibold";
515 border-radius: 16rpx; 551 margin-top: 5px;
516 } 552 .D1_name1 {
517 } 553 font-weight: bold;
518 } 554 font-size: 16px;
519 .D5 { 555 color: #333333;
520 background: #ffffff; 556 }
521 padding: 8px 20px 8px 20px; 557 }
522 box-sizing: border-box; 558 .D1_spans {
523 } 559 font-size: 10px;
524 .swiperImage { 560 color: #999999;
525 width: 100%; 561 margin-top: 5px;
526 height: 560rpx; 562 span {
527 .swiper-item { 563 height: 14px;
528 width: 100%; 564 margin-right: 10px;
529 image { 565 }
530 width: 100%; 566 }
531 } 567 }
532 } 568 .D2 {
533 } 569 font-size: 14px;
534 .D1 { 570 font-family: "PingFangSC-Regular";
535 .D1_price { 571 view {
536 color: #eb5d3b; 572 height: 24px;
537 font-size: 18px; 573 }
538 margin-top: 5px; 574 .D2_span1 {
539 font-family: "PingFangSC-Semibold"; 575 color: #999999;
540 display: flex; 576 }
541 justify-content: space-between; 577 .D2_span2 {
542 .D1_number { 578 color: #333333;
543 color: #999999; 579 }
544 font-size: 14px; 580 }
545 font-family: "PingFangSC-Regular"; 581 .D3 {
546 } 582 .screenBar {
547 } 583 width: 670rpx;
548 .D1_name { 584 margin-top: 20rpx;
549 font-size: 16px; 585 margin-bottom: 24rpx;
550 font-family: "PingFangSC-Semibold"; 586 display: flex;
551 margin-top: 5px; 587 flex-direction: row;
552 .D1_name1 { 588 justify-content: space-between;
553 font-weight: bold; 589 align-items: center;
554 font-size: 16px; 590 font-size: 14px;
555 color: #333333; 591 color: #333333;
556 } 592 transition: all 0.2s;
557 } 593 }
558 .D1_spans { 594 .screen-item {
559 font-size: 10px; 595 font-size: 32rpx;
560 color: #999999; 596 color: #333333;
561 margin-top: 5px; 597 display: flex;
562 span { 598 transition: all 0.2s;
563 height: 14px; 599 .D3_list {
564 margin-right: 10px; 600 margin-bottom: 4px;
565 } 601 }
566 } 602 .D3_list view {
567 } 603 display: flex;
568 .D2 { 604 align-content: center;
569 font-size: 14px; 605 font-size: 14px;
570 font-family: "PingFangSC-Regular"; 606 color: #333333;
571 view { 607 }
572 height: 24px; 608 .D3_list image {
573 } 609 width: 50px;
574 .D2_span1 { 610 height: 25px;
575 color: #999999; 611 margin-right: 6px;
576 } 612 }
577 .D2_span2 { 613 .D3_list span {
578 color: #333333; 614 margin-left: 6px;
579 } 615 margin-right: 5px;
580 } 616 font-family: "PingFangSC-Regular";
581 .D3 { 617 }
582 .screenBar { 618 }
583 width: 670rpx; 619 .active {
584 margin-top: 20rpx; 620 border-bottom: 4rpx solid #ff6b4a;
585 margin-bottom: 24rpx; 621 }
586 display: flex; 622 .customerService {
587 flex-direction: row; 623 margin-bottom: 90rpx;
588 justify-content: space-between; 624 .serviceItem {
589 align-items: center; 625 margin-bottom: 32rpx;
590 font-size: 14px; 626 .title {
591 color: #333333; 627 display: flex;
592 transition: all 0.2s; 628 flex-direction: row;
593 } 629 align-items: center;
594 .screen-item { 630 .titleText {
595 font-size: 32rpx; 631 font-size: 14px;
596 color: #333333; 632 color: #333333;
597 display: flex; 633 margin-bottom: 12rpx;
598 transition: all 0.2s; 634 }
599 .D3_list { 635 }
600 margin-bottom: 4px; 636 .itemContent {
601 } 637 font-size: 14px;
602 .D3_list view { 638 color: #999999;
603 display: flex; 639 margin-left: 18rpx;
604 align-content: center; 640 }
605 font-size: 14px; 641 }
606 color: #333333; 642 .serviceItem2 {
607 } 643 margin-left: 18rpx;
608 .D3_list image { 644 margin-bottom: 32rpx;
609 width: 50px; 645 .titleText {
610 height: 25px; 646 font-size: 14px;
611 margin-right: 6px; 647 color: #ff6b4a;
612 } 648 }
613 .D3_list span { 649 .itemContent {
614 margin-left: 6px; 650 font-size: 14px;
615 margin-right: 5px; 651 color: #999999;
616 font-family: "PingFangSC-Regular"; 652 .itemContent-child {
617 } 653 margin-bottom: 40rpx;
618 } 654 .contentTitle {
619 .active { 655 border-bottom: 1px solid #ff6b4a;
620 border-bottom: 4rpx solid #ff6b4a; 656 }
621 } 657 }
622 .customerService { 658 }
623 margin-bottom: 90rpx; 659 }
624 .serviceItem { 660 }
625 margin-bottom: 32rpx; 661 }
626 .title { 662 .D4 {
627 display: flex; 663 .D4_esvalue {
628 flex-direction: row; 664 font-size: 14px;
629 align-items: center; 665 color: #333333;
630 .titleText { 666 display: flex;
631 font-size: 14px; 667 justify-content: space-between;
632 color: #333333; 668 margin-bottom: 10px;
633 margin-bottom: 12rpx; 669 .D4_2 {
634 } 670 width: 90px;
635 } 671 display: flex;
636 .itemContent { 672 align-items: center;
637 font-size: 14px; 673 justify-content: space-between;
638 color: #999999; 674 }
639 margin-left: 18rpx; 675 }
640 } 676 .D4_esvalue view {
641 } 677 font-size: 14px;
642 .serviceItem2 { 678 color: #333333;
643 margin-left: 18rpx; 679 font-weight: bold;
644 margin-bottom: 32rpx; 680 }
645 .titleText { 681 .D4_list{
646 font-size: 14px; 682 display: grid;
647 color: #ff6b4a; 683 grid-row-gap: 10px;
648 } 684 grid-column-gap: 4px;
649 .itemContent { 685 }
650 font-size: 14px; 686 .D4_list view {
651 color: #999999; 687 display: flex;
652 .itemContent-child { 688 justify-content: center;
653 margin-bottom: 40rpx; 689 align-items: center;
654 .contentTitle { 690 font-size: 12px;
655 border-bottom: 1px solid #ff6b4a; 691 width: 118px;
656 } 692 height: 24px;
657 } 693 border-radius: 2px;
658 } 694 background: #f2f2f2;
659 } 695 color: #666666;
660 } 696 // letter-spacing: 1px;
661 } 697 }
662 .D4 { 698 }
663 .D4_esvalue { 699 .D5 {
664 font-size: 14px; 700 .D5_fixed1 {
665 color: #333333; 701 display: flex;
666 display: flex; 702 justify-content: space-between;
667 justify-content: space-between; 703 align-content: center;
668 margin-bottom: 10px; 704 margin-bottom: 12px;
669 .D4_2 { 705 view {
670 width: 90px; 706 font-size: 14px;
671 display: flex; 707 color: #333333;
672 align-items: center; 708 font-weight: bold;
673 justify-content: space-between; 709 font-family: "PingFangSC-Medium";
674 } 710 line-height: 24px;
675 } 711 }
676 .D4_esvalue view { 712 image {
677 font-size: 14px; 713 width: 240rpx;
678 color: #333333; 714 height: 3px;
679 font-weight: bold; 715 margin-top: 10px;
680 } 716 }
681 .D4_list{ 717 }
682 display: grid; 718 .D5_all {
683 grid-row-gap: 10px; 719 width: 100%;
684 grid-column-gap: 4px; 720 margin-top: 30rpx;
685 } 721 margin-right: 30rpx;
686 .D4_list view { 722 margin-bottom: 180rpx;
687 display: flex; 723 font-family: "PingFangSC-Regular";
688 justify-content: center; 724 // border: #999999 solid 1.5px;
689 align-items: center; 725 }
690 font-size: 12px; 726 }
691 width: 118px; 727 .D6 {
692 height: 24px; 728 width: 100%;
693 border-radius: 2px; 729 height: 430px;
694 background: #f2f2f2; 730 background: #f9f6ed;
695 color: #666666; 731 margin-bottom: 74px;
696 // letter-spacing: 1px; 732 view {
697 } 733 text-align: center;
698 } 734 }
699 .D5 { 735 .D6_v1 {
700 .D5_fixed1 { 736 font-weight: bold;
701 display: flex; 737 }
702 justify-content: space-between; 738 .D6_v2 {
703 align-content: center; 739 font-size: 14px;
704 margin-bottom: 12px; 740 margin-bottom: 30px;
705 view { 741 }
706 font-size: 14px; 742 .D6_v5 {
707 color: #333333; 743 .D6_v5_s1 {
708 font-weight: bold; 744 font-weight: bold;
709 font-family: "PingFangSC-Medium"; 745 }
710 line-height: 24px; 746 .D6_v5_s2 {
711 } 747 font-size: 14px;
712 image { 748 }
713 width: 240rpx; 749 }
714 height: 3px; 750 }
715 margin-top: 10px; 751 .botton {
716 } 752 position: fixed;
717 } 753 bottom: 0;
718 .D5_all { 754 height: 74px;
719 width: 100%; 755 width: 100%;
720 margin-top: 30rpx; 756 background: #ffffff;
721 margin-right: 30rpx; 757 padding: 20px 20px 8px 20px;
722 margin-bottom: 180rpx; 758 font-family: "PingFangSC-Regular";
723 font-family: "PingFangSC-Regular"; 759 box-sizing: border-box;
724 // border: #999999 solid 1.5px; 760 display: flex;
725 } 761 justify-content: space-between;
726 } 762 align-content: center;
727 .D6 { 763 .botton_1 {
728 width: 100%; 764 width: 20%;
729 height: 430px; 765 height: 100%;
730 background: #f9f6ed; 766 text-align: center;
731 margin-bottom: 74px; 767 color: #989898;
732 view { 768 }
733 text-align: center; 769 image {
734 } 770 width: 60%;
735 .D6_v1 { 771 height: 30px;
736 font-weight: bold; 772 }
737 } 773 .botton_image {
738 .D6_v2 { 774 font-size: 12px;
739 font-size: 14px; 775 text-align: center;
740 margin-bottom: 30px; 776 }
741 } 777 .botton_2 {
742 .D6_v5 { 778 width: 74%;
743 .D6_v5_s1 { 779 height: 86%;
744 font-weight: bold; 780 display: grid;
745 } 781 grid-template-columns: 50% 50%;
746 .D6_v5_s2 { 782 }
747 font-size: 14px; 783 .botton_input {
748 } 784 display: inline-flex;
749 } 785 align-items: center;
750 } 786 justify-content: space-around;
751 .botton { 787 background: #fff0ec;
752 position: fixed; 788 font-size: 16px;
753 bottom: 0; 789 color: #ff6b4a;
754 height: 74px; 790 border-radius: 20px 0 0 20px;
755 width: 100%; 791 }
756 background: #ffffff; 792 .botton_now {
757 padding: 20px 20px 8px 20px; 793 display: inline-flex;
758 font-family: "PingFangSC-Regular"; 794 align-items: center;
759 box-sizing: border-box; 795 justify-content: space-around;
760 display: flex; 796 background: #ff6b4a;
761 justify-content: space-between; 797 font-size: 16px;
762 align-content: center; 798 color: #ffffff;
763 .botton_1 { 799 border-radius: 0 20px 20px 0;
764 width: 20%; 800 }
765 height: 100%; 801 }
766 text-align: center; 802 </style>
767 color: #989898; 803
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @4cafd66
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 payId: '',
135 payId: '', 135 payTime: '',
136 payTime: '', 136 status: '',
137 status: '', 137 uid: '',
138 uid: '', 138 openid: '',
139 openid: '', 139 lefttime: 0
140 lefttime: 0 140 }
141 141 },
142 } 142 onLoad: function (option) {
143 }, 143 console.log(option)
144 onLoad: function (option) { 144 this.payId = option.payId
145 console.log(option) 145 this.status = option.status
146 this.payId = option.payId 146 const openid = uni.getStorageSync('openid')
147 this.status = option.status 147 const uid = this.$store.state.user.uid
148 const openid = uni.getStorageSync('openid') 148 this.uid = uid
149 const uid = this.$store.state.user.uid 149 this.openid = openid
150 this.uid = uid 150 store.dispatch('orderRead/getOrderInfo', {
151 this.openid = openid 151 pay_id: this.payId,
152 store.dispatch('orderRead/getOrderInfo', { 152 uid: '1',
153 pay_id: this.payId, 153 openid: openid
154 uid: '1', 154 })
155 openid: openid 155
156 }) 156 // this.orderInfo = this.$store.state.orderRead.orderInfo
157 157 },
158 // this.orderInfo = this.$store.state.orderRead.orderInfo 158 computed: {
159 }, 159 // 获取订单详细信息
160 computed: { 160 orderInfo () {
161 // 获取订单详细信息 161 console.log('orderInfo', this.$store.state.orderRead.orderInfo)
162 orderInfo () { 162 return this.$store.state.orderRead.orderInfo || {}
163 console.log(this.$store.state.orderRead.orderInfo) 163 },
164 return this.$store.state.orderRead.orderInfo || {} 164 orderInfoList () {
165 }, 165 const orderInfoList = this.orderInfo.order_info[0].list
166 orderInfoList () { 166 return orderInfoList
167 const orderInfoList = this.orderInfo.order_info[0].list 167 },
168 return orderInfoList 168 // 获取订单地址信息
169 }, 169 orderAddressInfo () {
170 // 获取订单地址信息 170 return this.orderInfo.order_info[0].address
171 orderAddressInfo () { 171 },
172 return this.orderInfo.order_info[0].address 172 // 订单付款时间
173 }, 173 getTime () {
174 // 订单付款时间 174 return this.orderInfo.order_info[0].lefttime
175 getTime () { 175 },
176 return this.orderInfo.order_info[0].lefttime 176 // 计算总优惠额
177 }, 177 totalDiscount () {
178 // 计算总优惠额 178 const discountInfoList = this.orderInfo.discount_info
179 totalDiscount () { 179 let totalDiscount = 0
180 const discountInfoList = this.orderInfo.discount_info 180 if (discountInfoList) {
181 let totalDiscount = 0 181 discountInfoList.map((discountItem, index) => {
182 if (discountInfoList) { 182 totalDiscount += Number(discountItem.value)
183 discountInfoList.map((discountItem, index) => { 183 })
184 totalDiscount += Number(discountItem.value) 184 }
185 }) 185 // console.log(totalDiscount)
186 } 186 return totalDiscount
187 // console.log(totalDiscount) 187 }
188 return totalDiscount 188 },
189 } 189 methods: {
190 }, 190 // 取消订单
191 methods: { 191 timeup () {
192 // 取消订单 192 this.cancleOrder()
193 timeup () { 193 },
194 this.cancleOrder() 194 cancleOrder () {
195 }, 195 const uid = this.uid
196 cancleOrder () { 196 const openid = this.openid
197 const uid = this.uid 197 uni.showModal({
198 const openid = this.openid 198 title: '提示',
199 uni.showModal({ 199 content: '现在取消，订单不可恢复哦，确认取消吗？',
200 title: '提示', 200 success: function (res) {
201 content: '现在取消，订单不可恢复哦，确认取消吗？', 201 if (res.confirm) {
202 success: function (res) { 202 store.dispatch('cancelOrder/cancel', {
203 if (res.confirm) { 203 keyname: '1',
204 store.dispatch('cancelOrder/cancel', { 204 uid: uid,
205 keyname: '1', 205 openid: openid
206 uid: uid, 206 })
207 openid: openid 207 } else if (res.cancel) {
208 }) 208 console.log('用户点击取消')
209 } else if (res.cancel) { 209 }
210 console.log('用户点击取消') 210 }
211 } 211 })
212 } 212 },
213 }) 213 paylog () {
214 }, 214
215 paylog () { 215 },
216 216 confirmOrder () {
217 }, 217 store.dispatch('statusConfirm/confirm', {
218 confirmOrder () { 218 uid: this.uid,
219 store.dispatch('statusConfirm/confirm', { 219 openid: this.openid,
220 uid: this.uid, 220 oldway: '1',
221 openid: this.openid, 221 way: '2',
222 oldway: '1', 222 pay_id: this.payId,
223 way: '2', 223 judgeContent: '',
224 pay_id: this.payId, 224 orderInfo: this.orderInfo.order_info
225 judgeContent: '', 225 }).then(
226 orderInfo: this.orderInfo.order_info 226 setTimeout(() => {
227 }).then( 227 uni.navigateBack()
228 setTimeout(() => { 228 }, 1500)
229 uni.navigateBack() 229 )
230 }, 1500) 230 }
231 ) 231 },
232 } 232 filters: {
233 }, 233 timerChange: function(value) {
234 filters: { 234 var newDate = new Date()
235 timerChange: function(value) { 235 newDate.setTime(value * 1000)
236 var newDate = new Date()
237 newDate.setTime(value * 1000) 236 return newDate.toLocaleString()
238 return newDate.toLocaleString() 237 }
239 } 238 }
240 } 239 }
241 } 240 </script>
242 </script> 241
243 242 <style lang="scss" scoped>
244 <style lang="scss" scoped> 243 .content {
245 .content { 244 min-height: 100vh;
246 min-height: 100vh; 245 display: flex;
247 display: flex; 246 flex-direction: column;
248 flex-direction: column; 247 justify-content: flex-start;
249 justify-content: flex-start; 248 align-items: center;
250 align-items: center; 249 background-color: #f2f2f2;
251 background-color: #f2f2f2; 250 }
252 } 251
253 252 .order {
254 .order { 253 margin-bottom: 112rpx;
255 margin-bottom: 112rpx; 254 background: #f2f2f2;
256 background: #f2f2f2; 255 margin-top: 140rpx;
257 margin-top: 140rpx; 256 width: 670rpx;
258 width: 670rpx; 257 }
259 } 258
260 259 .order-time {
261 .order-time { 260 width: 100%;
262 width: 100%; 261 height: 140rpx;
263 height: 140rpx; 262 background-color: #fff;
264 background-color: #fff; 263 display: flex;
265 display: flex; 264 justify-content: center;
266 justify-content: center; 265 align-items: center;
267 align-items: center; 266 position: fixed;
268 position: fixed; 267 top: 0;
269 top: 0; 268 left: 0;
270 left: 0; 269 text {
271 text { 270 // font-family: PingFangSC-Regular;
272 // font-family: PingFangSC-Regular; 271 // margin-top: 48rpx;
273 // margin-top: 48rpx; 272 font-size: 14px;
274 font-size: 14px; 273 color: #333333;
275 color: #333333; 274 letter-spacing: -0.26px;
276 letter-spacing: -0.26px; 275 }
277 } 276 .p2 {
278 .p2 { 277 // font-family: DINAlternate-Bold;
279 // font-family: DINAlternate-Bold; 278 margin: 42rpx 20rpx 0 20rpx;
280 margin: 42rpx 20rpx 0 20rpx; 279 font-size: 18px;
281 font-size: 18px; 280 color: #ec5d3b;
282 color: #ec5d3b; 281 letter-spacing: -0.34px;
283 letter-spacing: -0.34px; 282 }
284 } 283 }
285 } 284 .headerBanner {
286 .headerBanner { 285 width: 100%;
287 width: 100%; 286 height: 140rpx;
288 height: 140rpx; 287 background: #4a90e2;
289 background: #4a90e2; 288 padding: 26rpx 60rpx 24rpx 60rpx;
290 padding: 26rpx 60rpx 24rpx 60rpx; 289 box-sizing: border-box;
291 box-sizing: border-box; 290 color: #ffffff;
292 color: #ffffff; 291 display: flex;
293 display: flex; 292 justify-content: space-between;
294 justify-content: space-between; 293 align-items: center;
295 align-items: center; 294 position: fixed;
296 position: fixed; 295 top: 0;
297 top: 0; 296 left: 0;
298 left: 0; 297 .bannerLeft {
299 .bannerLeft { 298 font-size: 36rpx;
300 font-size: 36rpx; 299 display: flex;
301 display: flex; 300 flex-direction: column;
302 flex-direction: column; 301 justify-content: center;
303 justify-content: center; 302 align-items: center;
304 align-items: center; 303 .T2 {
305 .T2 { 304 font-size: 24rpx;
306 font-size: 24rpx; 305 }
307 } 306 }
308 } 307 image {
309 image { 308 height: 56rpx;
310 height: 56rpx; 309 width: 72rpx;
311 width: 72rpx; 310 }
312 } 311 }
313 } 312
314 313 .order-user {
315 .order-user { 314 height: 228rpx;
316 height: 228rpx; 315 background: #ffffff;
317 background: #ffffff; 316 border-radius: 14rpx;
318 border-radius: 14rpx; 317 margin: 0 auto;
319 margin: 0 auto; 318 margin-top: 20rpx;
320 margin-top: 20rpx; 319 margin-bottom: 20rpx;
321 margin-bottom: 20rpx; 320 .order-user-head {
322 .order-user-head { 321 display: flex;
323 display: flex; 322 height: 108rpx;
324 height: 108rpx; 323 align-items: center;
325 align-items: center; 324 margin-left: 126rpx;
326 margin-left: 126rpx; 325 .p1 {
327 .p1 { 326 // font-family: PingFangSC-Regular;
328 // font-family: PingFangSC-Regular; 327 font-size: 14px;
329 font-size: 14px; 328 color: #333333;
330 color: #333333; 329 letter-spacing: -0.26px;
331 letter-spacing: -0.26px; 330 margin-right: 20rpx;
332 margin-right: 20rpx; 331 }
333 } 332 .p2 {
334 .p2 { 333 // font-family: PingFangSC-Regular;
335 // font-family: PingFangSC-Regular; 334 font-size: 14px;
336 font-size: 14px; 335 color: #999999;
337 color: #999999; 336 letter-spacing: -0.26px;
338 letter-spacing: -0.26px; 337 }
339 } 338 }
340 } 339 .order-user-body {
341 .order-user-body { 340 display: flex;
342 display: flex; 341 width: 100%;
343 width: 100%; 342 image {
344 image { 343 width: 24px;
345 width: 24px; 344 height: 26px;
346 height: 26px; 345 margin: 12rpx 32rpx 0 40rpx;
347 margin: 12rpx 32rpx 0 40rpx; 346 }
348 } 347 .p3 {
349 .p3 { 348 // font-family: PingFangSC-Semibold;
350 // font-family: PingFangSC-Semibold; 349 font-size: 14px;
351 font-size: 14px; 350 color: #333333;
352 color: #333333; 351 letter-spacing: -0.26px;
353 letter-spacing: -0.26px; 352 }
354 } 353 }
355 } 354 }
356 } 355
357 356 .order-info {
358 .order-info { 357 background-color: #fff;
359 background-color: #fff; 358 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); 359 border-radius: 16rpx;
361 border-radius: 16rpx; 360 margin: 0 auto;
362 margin: 0 auto; 361 view {
363 view { 362 margin-left: 40rpx;
364 margin-left: 40rpx; 363 }
365 } 364 text {
366 text { 365 font-size: 14px;
367 font-size: 14px; 366 }
368 } 367 .order-info-head {
369 .order-info-head { 368 display: flex;
370 display: flex; 369 padding-top: 40rpx;
371 padding-top: 40rpx; 370 image {
372 image { 371 height: 188rpx;
373 height: 188rpx; 372 width: 188rpx;
374 width: 188rpx; 373 }
375 } 374 .order-info-head-r {
376 .order-info-head-r { 375 margin: 0;
377 margin: 0; 376 width: 368rpx;
378 width: 368rpx; 377 margin-left: 24rpx;
379 margin-left: 24rpx; 378 // margin-top: 40rpx;
380 // margin-top: 40rpx; 379 text {
381 text { 380 display: block;
382 display: block; 381 }
383 } 382 // .arrow{
384 // .arrow{ 383 // width: 0;
385 // width: 0; 384 // height: 0;
386 // height: 0; 385 // border-left: 5px transparent;
387 // border-left: 5px transparent; 386 // border-right: 5px transparent;
388 // border-right: 5px transparent; 387 // border-top: 5px #979797;
389 // border-top: 5px #979797; 388 // border-bottom: 0 transparent;
390 // border-bottom: 0 transparent; 389 // border-style: solid;
391 // border-style: solid; 390 // position: relative;
392 // position: relative; 391 // // transform: scaleY(-1);
393 // // transform: scaleY(-1); 392 // }
394 // } 393 // .arrow::after{
395 // .arrow::after{ 394 // content: '';
396 // content: ''; 395 // position: absolute;
397 // position: absolute; 396 // top: -6.5px;
398 // top: -6.5px; 397 // left: -5px;
399 // left: -5px; 398 // border-left: 5px transparent;
400 // border-left: 5px transparent; 399 // border-right: 5px transparent;
401 // border-right: 5px transparent; 400 // border-top: 5px #FFFFFF;
402 // border-top: 5px #FFFFFF; 401 // border-bottom: 0 transparent;
403 // border-bottom: 0 transparent; 402 // border-style: solid;
404 // border-style: solid; 403 // }
405 // } 404 .p1 {
406 .p1 { 405 min-height: 40px;
407 min-height: 40px; 406 // font-family: PingFangSC-Regular;
408 // font-family: PingFangSC-Regular; 407 font-size: 14px;
409 font-size: 14px; 408 color: #333333;
410 color: #333333; 409 letter-spacing: -0.26px;
411 letter-spacing: -0.26px; 410 line-height: 18px;
412 line-height: 18px; 411 // line-height: 20px;
413 // line-height: 20px; 412 }
414 } 413 .p2 {
415 .p2 { 414 height: 34px;
416 height: 34px; 415 padding: 1px 0 3px 0;
417 padding: 1px 0 3px 0; 416 // font-family: PingFangSC-Regular;
418 // font-family: PingFangSC-Regular; 417 font-size: 12px;
419 font-size: 12px; 418 color: #999999;
420 color: #999999; 419 letter-spacing: -0.23px;
421 letter-spacing: -0.23px; 420 }
422 } 421 .infoText-bottom {
423 .infoText-bottom { 422 display: flex;
424 display: flex; 423 flex-direction: row;
425 flex-direction: row; 424 justify-content: flex-start;
426 justify-content: flex-start; 425 align-items: center;
427 align-items: center; 426 width: 100%;
428 width: 100%; 427 margin-left: 0;
429 margin-left: 0; 428 .markPrice {
430 .markPrice { 429 font-size: 14px;
431 font-size: 14px; 430 color: #ff6b4a;
432 color: #ff6b4a; 431 margin-right: 20rpx;
433 margin-right: 20rpx; 432 margin-left: 0rpx;
434 margin-left: 0rpx; 433 }
435 } 434 .buy-num {
436 .buy-num { 435 font-size: 12px;
437 font-size: 12px; 436 color: #999999;
438 color: #999999; 437 }
439 } 438 }
440 } 439 }
441 } 440 }
442 } 441 // .order-info-goodsnum {
443 // .order-info-goodsnum { 442 // display: flex;
444 // display: flex; 443 // align-items: center;
445 // align-items: center; 444 // justify-content: flex-end;
446 // justify-content: flex-end; 445 // text {
447 // text { 446 // margin-right: 44rpx;
448 // margin-right: 44rpx; 447 // // ont-family: PingFangSC-Regular;
449 // // ont-family: PingFangSC-Regular; 448 // font-size: 12px;
450 // font-size: 12px; 449 // color: #999999;
451 // color: #999999; 450 // letter-spacing: -0.23px;
452 // letter-spacing: -0.23px; 451 // }
453 // } 452 // }
454 // } 453 .order-info-freight {
455 .order-info-freight { 454 display: block;
456 display: block; 455 margin-left: 40rpx;
457 margin-left: 40rpx; 456 margin-top: 22rpx;
458 margin-top: 22rpx; 457 .p1 {
459 .p1 { 458 // font-family: PingFangSC-Regular;
460 // font-family: PingFangSC-Regular; 459 font-size: 14px;
461 font-size: 14px; 460 color: #333333;
462 color: #333333; 461 letter-spacing: -0.26px;
463 letter-spacing: -0.26px; 462 line-height: 18px;
464 line-height: 18px; 463 margin-right: 24px;
465 margin-right: 24px; 464 }
466 } 465 .p2 {
467 .p2 { 466 // font-family: PingFangSC-Regular;
468 // font-family: PingFangSC-Regular; 467 font-size: 14px;
469 font-size: 14px; 468 color: #ff6b4a;
470 color: #ff6b4a; 469 letter-spacing: -0.26px;
471 letter-spacing: -0.26px; 470 }
472 } 471 }
473 } 472 .order-info-discount {
474 .order-info-discount { 473 display: block;
475 display: block; 474 margin-left: 40rpx;
476 margin-left: 40rpx; 475 margin-top: 24rpx;
477 margin-top: 24rpx; 476 .p1 {
478 .p1 { 477 // font-family: PingFangSC-Regular;
479 // font-family: PingFangSC-Regular; 478 font-size: 14px;
480 font-size: 14px; 479 color: #333333;
481 color: #333333; 480 letter-spacing: -0.26px;
482 letter-spacing: -0.26px; 481 line-height: 18px;
483 line-height: 18px; 482 margin-right: 24px;
484 margin-right: 24px; 483 }
485 } 484 .p2 {
486 .p2 { 485 // font-family: PingFangSC-Regular;
487 // font-family: PingFangSC-Regular; 486 font-size: 14px;
488 font-size: 14px; 487 color: #ff6b4a;
489 color: #ff6b4a; 488 letter-spacing: -0.26px;
490 letter-spacing: -0.26px; 489 }
491 } 490 }
492 } 491 .order-info-price {
493 .order-info-price { 492 display: block;
494 display: block; 493 margin-left: 40rpx;
495 margin-left: 40rpx; 494 margin-top: 24rpx;
496 margin-top: 24rpx; 495 .p1 {
497 .p1 { 496 // font-family: PingFangSC-Semibold;
498 // font-family: PingFangSC-Semibold; 497 font-size: 14px;
499 font-size: 14px; 498 color: #333333;
500 color: #333333; 499 letter-spacing: -0.26px;
501 letter-spacing: -0.26px; 500 line-height: 18px;
502 line-height: 18px; 501 margin-right: 24px;
503 margin-right: 24px; 502 }
504 } 503 .p2 {
505 .p2 { 504 // font-family: PingFangSC-Semibold;
506 // font-family: PingFangSC-Semibold; 505 font-size: 14px;
507 font-size: 14px; 506 color: #ff6b4a;
508 color: #ff6b4a; 507 letter-spacing: -0.26px;
509 letter-spacing: -0.26px; 508 }
510 } 509 }
511 } 510 .order-info-num {
512 .order-info-num { 511 display: block;
513 display: block; 512 margin-left: 40rpx;
514 margin-left: 40rpx; 513 margin-top: 44rpx;
515 margin-top: 44rpx; 514 text {
516 text { 515 // font-family: PingFangSC-Regular;
517 // font-family: PingFangSC-Regular; 516 font-size: 12px;
518 font-size: 12px; 517 color: #999999;
519 color: #999999; 518 letter-spacing: -0.23px;
520 letter-spacing: -0.23px; 519 }
521 } 520 }
522 } 521 .order-info-time {
523 .order-info-time { 522 display: block;
524 display: block; 523 margin: 8rpx 0 48rpx 40rpx;
525 margin: 8rpx 0 48rpx 40rpx; 524 text {
526 text { 525 // font-family: PingFangSC-Regular;
527 // font-family: PingFangSC-Regular; 526 font-size: 12px;
528 font-size: 12px; 527 color: #999999;
529 color: #999999; 528 letter-spacing: -0.23px;
530 letter-spacing: -0.23px; 529 }
531 } 530 }
532 } 531 .order-info-hr {
533 .order-info-hr { 532 width: 520rpx;
534 width: 520rpx; 533 height: 1px;
535 height: 1px; 534 background-color: #e9e9e9;
536 background-color: #e9e9e9; 535 margin-bottom: 20rpx;
537 margin-bottom: 20rpx; 536 }
538 } 537 .order-info-contact {
539 .order-info-contact { 538 display: flex;
540 display: flex; 539 padding-bottom: 28rpx;
541 padding-bottom: 28rpx; 540 image {
542 image { 541 width: 19px;
543 width: 19px; 542 height: 16px;
544 height: 16px; 543 }
545 } 544 text {
546 text { 545 // font-family: PingFangSC-Regular;
547 // font-family: PingFangSC-Regular; 546 margin-left: 20rpx;
548 margin-left: 20rpx; 547 font-size: 14px;
549 font-size: 14px; 548 color: #333333;
550 color: #333333; 549 letter-spacing: -0.26px;
551 letter-spacing: -0.26px; 550 line-height: 18px;
552 line-height: 18px; 551 }
553 } 552 }
554 } 553 }
555 } 554
556 555 .order-confim {
557 .order-confim { 556 display: flex;
558 display: flex; 557 align-items: center;
559 align-items: center; 558 justify-content: flex-end;
560 justify-content: flex-end; 559 // z-index: 999;
561 // z-index: 999; 560 width: 100%;
562 width: 100%; 561 height: 112rpx;
563 height: 112rpx; 562 position: fixed;
564 position: fixed; 563 bottom: 0;
565 bottom: 0; 564 background: #ffffff;
566 background: #ffffff; 565 button {
567 button { 566 width: 204rpx;
568 width: 204rpx; 567 height: 80rpx;
569 height: 80rpx; 568 border: 1px solid #ff6b4a;
570 border: 1px solid #ff6b4a; 569 border-radius: 40rpx;
571 border-radius: 40rpx; 570 font-size: 32rpx;
572 font-size: 32rpx; 571 letter-spacing: -0.3px;
573 letter-spacing: -0.3px; 572 margin-right: 0;
574 margin-right: 0; 573 }
575 } 574 .b1 {
576 .b1 { 575 // font-family: PingFangSC-Regular;
577 // font-family: PingFangSC-Regular; 576 color: #ff6b4a;
578 color: #ff6b4a; 577 background-color: #ffffff;
579 background-color: #ffffff; 578 }
580 } 579 .b2 {
581 .b2 { 580 // font-family: PingFangSC-Regular;
582 // font-family: PingFangSC-Regular; 581 background-color: #ff6b4a;
583 background-color: #ff6b4a; 582 color: #ffffff;
584 color: #ffffff; 583 margin: 0 26rpx 0 20rpx;
585 margin: 0 26rpx 0 20rpx; 584 }
586 } 585 }
587 } 586 </style>
588 </style> 587
589
src/store/modules/cart.js
Diff comments   View file @4cafd66
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