刘文博 / gulu-vue

Download as
Browse Code »

Commit 3a0878cc773855146d390a935b133980a5c0ee88

Authored by 范牧
2 parents 7fed8e81e2 4cafd66026
Exists in master

冲突修改

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