Commit f8698caa3110a94a7058392329b6bad7fff7be5c
Exists in
master
s
Showing
46 changed files
Show diff stats
src/App.vue
... | ... | @@ -7,13 +7,13 @@ |
7 | 7 | onLaunch(options) { |
8 | 8 | const option = options || {}; |
9 | 9 | // 获取用户来源 |
10 | - console.log('软件启动,输出转来的参数:', option); | |
11 | - console.log('场景值------------------:', option.scene); | |
10 | + // console.log('软件启动,输出转来的参数:', option); | |
11 | + // console.log('场景值------------------:', option.scene); | |
12 | 12 | let loginQueryInfo = option ? option.query : {}; |
13 | 13 | loginQueryInfo = loginQueryInfo || {}; |
14 | - console.log('loginQueryInfo onShow===>', loginQueryInfo); | |
14 | + // console.log('loginQueryInfo onShow===>', loginQueryInfo); | |
15 | 15 | const scene = decodeURIComponent(loginQueryInfo.scene); |
16 | - console.log('decodeURIComponent scense====>', scene); | |
16 | + // console.log('decodeURIComponent scense====>', scene); | |
17 | 17 | let fromInfo = {}; |
18 | 18 | |
19 | 19 | if(scene.length > 0 ) { |
... | ... | @@ -35,9 +35,9 @@ |
35 | 35 | scene: option.scene, |
36 | 36 | } |
37 | 37 | store.dispatch('user/setFrom', fromInfo); |
38 | - console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); | |
38 | + // console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); | |
39 | 39 | } else { |
40 | - console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); | |
40 | + // console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); | |
41 | 41 | if (loginQueryInfo.hasOwnProperty('sid') == false) { |
42 | 42 | loginQueryInfo.sid = 0; |
43 | 43 | } |
... | ... | @@ -67,11 +67,10 @@ |
67 | 67 | } |
68 | 68 | }, |
69 | 69 | onShow() { |
70 | - | |
71 | - console.log('App Show') | |
70 | + // console.log('App Show') | |
72 | 71 | }, |
73 | 72 | onHide() { |
74 | - console.log('App Hide') | |
73 | + // console.log('App Hide') | |
75 | 74 | }, |
76 | 75 | methods: { |
77 | 76 | } | ... | ... |
src/components/CommodityCard/CommodityCard.vue
1 | 1 | <template> |
2 | - <view class="card" @tap="toGoods(goods.id,goods.goodType)"> | |
3 | - <image mode="widthFix" :src="goods.imgurl" ></image> | |
4 | - <view class="name">{{goods.name}}</view> | |
2 | + <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)"> | |
3 | + <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image> | |
4 | + <view class="name">{{goods.name?goods.name:goods.p_name}}</view> | |
5 | 5 | <view class="info"> |
6 | 6 | <view class="priceBox"> |
7 | - <view class="price">{{goods.price}}</view> | |
7 | + <view class="price">{{goods.price?goods.price:goods.real_price}}</view> | |
8 | 8 | <view class="originCost"> |
9 | - {{goods.rsSon.Max_Price}} | |
9 | + {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}} | |
10 | 10 | </view> |
11 | 11 | </view> |
12 | 12 | <view class="trade_num">{{goods.trade_num}}人购买</view> | ... | ... |
src/components/HMFilterDropdown/HMFilterDropdown.vue
... | ... | @@ -2,9 +2,25 @@ |
2 | 2 | <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard"> |
3 | 3 | <view class="nav"> |
4 | 4 | <block v-for="(item,index) in menu" :key="index"> |
5 | - <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)"> | |
5 | + <view | |
6 | + class="first-menu" | |
7 | + :class="{'on':showPage==index || on[index] === 1}" | |
8 | + @tap="togglePage(index)" | |
9 | + v-if="!item.isNoPull" | |
10 | + > | |
11 | + <text class="name">{{item.name}}</text> | |
12 | + <text | |
13 | + class="iconfont triangle" | |
14 | + :style="'transform:rotate('+triangleDeg[index]+'deg);'" | |
15 | + ></text> | |
16 | + </view> | |
17 | + <view | |
18 | + class="first-menu" | |
19 | + :class="{'on':showPage==index || on[index] === 1}" | |
20 | + @tap="showAll()" | |
21 | + v-else | |
22 | + > | |
6 | 23 | <text class="name">{{item.name}}</text> |
7 | - <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text> | |
8 | 24 | </view> |
9 | 25 | </block> |
10 | 26 | </view> |
... | ... | @@ -101,7 +117,8 @@ |
101 | 117 | firstScrollInto: 0, |
102 | 118 | secondScrollInto: 0, |
103 | 119 | componentTop:0 ,//组件top |
104 | - isReadNewSelect:false | |
120 | + isReadNewSelect:false, | |
121 | + on: [1,0,0,0,0], | |
105 | 122 | } |
106 | 123 | }, |
107 | 124 | props: { |
... | ... | @@ -136,9 +153,9 @@ |
136 | 153 | this.defaultActive = JSON.parse(JSON.stringify(newVal)); |
137 | 154 | this.activeMenuArr = JSON.parse(JSON.stringify(newVal)); |
138 | 155 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)); |
139 | - if(this.updateMenuName){ | |
140 | - this.setMenuName(); | |
141 | - } | |
156 | + // if(this.updateMenuName){ | |
157 | + // this.setMenuName(); | |
158 | + // } | |
142 | 159 | } |
143 | 160 | }, |
144 | 161 | methods: { |
... | ... | @@ -150,53 +167,54 @@ |
150 | 167 | tmpMenu.push({ |
151 | 168 | //如果没有设置name,则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name |
152 | 169 | name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name), |
153 | - type: tmpitem.type | |
170 | + type: tmpitem.type, | |
171 | + isNoPull: tmpitem.isNoPull, | |
154 | 172 | }); |
155 | - //初始化选中项数组-ui状态 | |
173 | + // 初始化选中项数组-ui状态 | |
156 | 174 | tmpMenuActiveArr.push(this.processActive(tmpitem)); |
157 | - //初始化角度数组 | |
175 | + // 初始化角度数组 | |
158 | 176 | this.triangleDeg.push(0); |
159 | - //初始化控制显示状态数组 | |
177 | + // 初始化控制显示状态数组 | |
160 | 178 | this.pageState.push(false); |
161 | - //递归处理子菜单数据 | |
179 | + // 递归处理子菜单数据 | |
162 | 180 | tmpitem = this.processSubMenu(tmpitem); |
163 | 181 | this.filterData[i] = tmpitem; |
164 | 182 | } |
165 | 183 | this.menu = tmpMenu; |
166 | - //初始化选中项数组 | |
184 | + // 初始化选中项数组 | |
167 | 185 | tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr; |
168 | 186 | this.defaultActive = []; |
169 | 187 | this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); |
170 | 188 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); |
171 | - //加载菜单数据 | |
189 | + // 加载菜单数据 | |
172 | 190 | this.subData = this.filterData; |
173 | - //设定顶部菜单名字 | |
174 | - if(this.updateMenuName){ | |
175 | - this.setMenuName(); | |
176 | - } | |
177 | - }, | |
178 | - setMenuName(){ | |
179 | - for(var i=0;i<this.activeMenuArr.length;i++){ | |
180 | - let row = this.activeMenuArr[i]; | |
181 | - if (typeof(row[0]) != 'object'){ | |
182 | - var tmpsub = false; | |
183 | - if(row.length>0 && row[0]!=null){ | |
184 | - tmpsub = this.subData[i].submenu[row[0]]; | |
185 | - if(row.length>1 && row[1]!=null){ | |
186 | - tmpsub = tmpsub.submenu[row[1]]; | |
187 | - if(row.length>2 && row[2]!=null){ | |
188 | - tmpsub = tmpsub.submenu[row[2]]; | |
189 | - } | |
190 | - } | |
191 | - }else{ | |
192 | - tmpsub = false; | |
193 | - } | |
194 | - if(tmpsub){ | |
195 | - this.menu[i].name = tmpsub.name; | |
196 | - } | |
197 | - } | |
198 | - } | |
191 | + // 设定顶部菜单名字 | |
192 | + // if(this.updateMenuName){ | |
193 | + // this.setMenuName(); | |
194 | + // } | |
199 | 195 | }, |
196 | + // setMenuName(){ | |
197 | + // for(var i=0;i<this.activeMenuArr.length;i++){ | |
198 | + // let row = this.activeMenuArr[i]; | |
199 | + // if (typeof(row[0]) != 'object'){ | |
200 | + // var tmpsub = false; | |
201 | + // if(row.length>0 && row[0]!=null){ | |
202 | + // tmpsub = this.subData[i].submenu[row[0]]; | |
203 | + // if(row.length>1 && row[1]!=null){ | |
204 | + // tmpsub = tmpsub.submenu[row[1]]; | |
205 | + // if(row.length>2 && row[2]!=null){ | |
206 | + // tmpsub = tmpsub.submenu[row[2]]; | |
207 | + // } | |
208 | + // } | |
209 | + // }else{ | |
210 | + // tmpsub = false; | |
211 | + // } | |
212 | + // if(tmpsub){ | |
213 | + // this.menu[i].name = tmpsub.name; | |
214 | + // } | |
215 | + // } | |
216 | + // } | |
217 | + // }, | |
200 | 218 | //展开更多 |
201 | 219 | showMoreSub(index) { |
202 | 220 | this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true; |
... | ... | @@ -217,9 +235,9 @@ |
217 | 235 | if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) |
218 | 236 | ) { |
219 | 237 | let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]; |
220 | - if(this.updateMenuName){ | |
221 | - this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name; | |
222 | - } | |
238 | + // if(this.updateMenuName){ | |
239 | + // this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name; | |
240 | + // } | |
223 | 241 | this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); |
224 | 242 | this.togglePage(this.showPage); |
225 | 243 | } |
... | ... | @@ -286,6 +304,19 @@ |
286 | 304 | this.showPageLayer(index); |
287 | 305 | this.showMask(); |
288 | 306 | } |
307 | + if(this.on[0] === 1) { | |
308 | + this.on[0] = 0; | |
309 | + } | |
310 | + this.on[index] = 1; | |
311 | + }, | |
312 | + showAll() { | |
313 | + this.on = [1,0,0,0,0] | |
314 | + // 输出 | |
315 | + this.$emit('search', { | |
316 | + index: {}, | |
317 | + value: {}, | |
318 | + on: this.on, | |
319 | + }); | |
289 | 320 | }, |
290 | 321 | //hide遮罩层 |
291 | 322 | hideMask() { |
... | ... | @@ -343,8 +374,7 @@ |
343 | 374 | }); |
344 | 375 | }else{ |
345 | 376 | let submenu = this.subData[i].submenu[item[0]]; |
346 | - // console.log(this.subData[i]) | |
347 | - value[i][0] = submenu.value; | |
377 | + value[i][0] = submenu && submenu.value; | |
348 | 378 | if(value[i].length>=2 && item[1]!=null){ |
349 | 379 | if(submenu.submenu.length>0){ |
350 | 380 | submenu = submenu.submenu[item[1]]; |
... | ... | @@ -366,9 +396,10 @@ |
366 | 396 | |
367 | 397 | }); |
368 | 398 | // 输出 |
369 | - this.$emit('confirm', { | |
399 | + this.$emit('search', { | |
370 | 400 | index: index, |
371 | - value: value | |
401 | + value: value, | |
402 | + on: this.on, | |
372 | 403 | }); |
373 | 404 | }, |
374 | 405 | //show菜单页 |
... | ... | @@ -515,13 +546,12 @@ |
515 | 546 | .nav { |
516 | 547 | width: 100%; |
517 | 548 | height: 44px; |
518 | - border-bottom: solid 1rpx #eee; | |
519 | 549 | z-index: 12; |
520 | 550 | background-color: #ffffff; |
521 | 551 | flex-direction: row; |
522 | 552 | .first-menu { |
523 | 553 | width: 100%; |
524 | - font-size: 13px; | |
554 | + font-size: 16px; | |
525 | 555 | color: #333333; |
526 | 556 | flex-direction: row; |
527 | 557 | align-items: center; |
... | ... | @@ -537,6 +567,7 @@ |
537 | 567 | } |
538 | 568 | .name { |
539 | 569 | height: 20px; |
570 | + // font-size: 16px; | |
540 | 571 | text-align: center; |
541 | 572 | text-overflow: clip; |
542 | 573 | overflow: hidden; |
... | ... | @@ -544,6 +575,7 @@ |
544 | 575 | .iconfont { |
545 | 576 | width: 13px; |
546 | 577 | height: 13px; |
578 | + line-height: 16px; | |
547 | 579 | align-items: center; |
548 | 580 | justify-content: center; |
549 | 581 | transition: transform .2s linear, color .2s linear; |
... | ... | @@ -605,7 +637,7 @@ |
605 | 637 | } |
606 | 638 | &.alone { |
607 | 639 | max-height: 345px; |
608 | - min-height: 170px; | |
640 | + min-height: 60rpx; | |
609 | 641 | height: auto; |
610 | 642 | .sub-menu { |
611 | 643 | min-height: calc(44px - 1rpx); |
... | ... | @@ -788,4 +820,4 @@ |
788 | 820 | } |
789 | 821 | } |
790 | 822 | } |
791 | -</style> | |
823 | +</style> | ... | ... |
src/components/UniSliper/UniSliper.vue
1 | 1 | <template> |
2 | 2 | <div class="c-progress"> |
3 | 3 | <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> |
4 | - <div class="c-progress-inner" :style="setProgressStyle"></div> | |
5 | - <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> | |
4 | + <div class="c-progress-inner" | |
5 | + v-bind:style="{width: inner_width+'rpx'}" | |
6 | + ></div> | |
7 | + <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> --> | |
6 | 8 | </div> |
7 | - <span v-if="showPerText">{{stand_width}}mm</span> | |
9 | + <span v-if="showPerText">{{content}}mm</span> | |
8 | 10 | </div> |
9 | 11 | </template> |
10 | 12 | |
... | ... | @@ -19,57 +21,15 @@ |
19 | 21 | export default { |
20 | 22 | name: 'CProgress', |
21 | 23 | props: { |
22 | - percent: { | |
23 | - type: Number, | |
24 | - default: 60 | |
25 | - }, | |
26 | - showSlider: { | |
27 | - type: Boolean, | |
28 | - default: true | |
29 | - }, | |
30 | - showPerText: { | |
31 | - type: Boolean, | |
32 | - default: true | |
33 | - }, | |
34 | - // 进度条的宽度 | |
35 | - width: { | |
36 | - type: Number, | |
37 | - default: 300 | |
38 | - }, | |
39 | - bgColor: { | |
40 | - type: String, | |
41 | - default: '#ebeef5' | |
42 | - }, | |
43 | - progressColor: { | |
44 | - type: String, | |
45 | - default: '#409EFF' | |
46 | - }, | |
47 | - // 滑块的宽度 | |
48 | - sliderWidth: { | |
49 | - type: Number, | |
50 | - default: 20 | |
51 | - }, | |
52 | - // 颜色的类型 | |
53 | - type: { | |
54 | - type: String, | |
55 | - default: colorTable.default | |
56 | - }, | |
57 | - //规格长度 | |
58 | - standard:{ | |
59 | - type: Number, | |
60 | - default: 1.4 | |
61 | - }, | |
62 | - //初始长度 | |
63 | - stand_width:{ | |
64 | - type: Number, | |
65 | - default: 0 | |
66 | - } | |
24 | + //inner的长度 | |
25 | + inner_widthProp: Number, | |
26 | + //调用接口的值 | |
27 | + contentProp: String | |
67 | 28 | }, |
68 | 29 | data () { |
69 | 30 | return { |
70 | - sliderLeft: 0, // 滑块相对父元素发x坐标 | |
71 | - progressWidth: 0, // 进度条当前的的宽度 | |
72 | - tempPercent: 0, | |
31 | + inner_width: this.inner_widthProp, | |
32 | + content: this.contentProp | |
73 | 33 | } |
74 | 34 | }, |
75 | 35 | computed: { |
... | ... | @@ -103,71 +63,71 @@ |
103 | 63 | this.sliderLeft = this.width / 100 * this.percent |
104 | 64 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 |
105 | 65 | this.tempPercent = this.percent |
106 | - this.addListener() | |
66 | + // this.addListener() | |
107 | 67 | }, |
108 | - methods: { | |
109 | - addListener () { | |
110 | - const slider = this.$refs.slider | |
111 | - const progress = this.$refs.progress | |
112 | - let isClickSlider = false | |
113 | - let distance = 0 // 滑块与点击坐标的绝对距离 | |
114 | - progress.onclick = (e) => { | |
115 | - // 阻止事件冒泡 | |
116 | - if (e.target == slider) { | |
117 | - return | |
118 | - } | |
119 | - let curX = progress.offsetLeft | |
120 | - this.sliderLeft = e.pageX - curX | |
121 | - if (this.sliderLeft <= 0) { | |
122 | - this.sliderLeft = 0 | |
123 | - } | |
124 | - if (this.sliderLeft >= this.width) { | |
125 | - this.sliderLeft = this.width | |
126 | - } | |
127 | - this._countCurPercent() | |
128 | - } | |
129 | - // slider.onmousedown = (e) => { | |
130 | - // isClickSlider = true | |
131 | - // let curX = slider.offsetLeft | |
132 | - // distance = e.pageX - curX // 得出绝对距离 | |
133 | - // } | |
134 | - progress.onmousemove = (e) => { | |
135 | - if (isClickSlider) { | |
136 | - // 判断是否已经超出进度条的长度 | |
137 | - if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | |
138 | - this.sliderLeft = e.pageX - distance | |
139 | - this._countCurPercent() | |
140 | - } | |
141 | - } | |
142 | - } | |
143 | - progress.onmouseup = () => { | |
144 | - isClickSlider = false | |
145 | - } | |
146 | - }, | |
147 | - // 算出百分比 | |
148 | - _countCurPercent () { | |
149 | - this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | |
150 | - this.progressWidth = this.sliderLeft + 20 | |
151 | - // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整 | |
152 | - if (this.tempPercent <= 0) { | |
153 | - this.progressWidth = 0 | |
154 | - this.sliderLeft = 0 | |
155 | - } | |
156 | - if (this.tempPercent >= 100) { | |
157 | - this.progressWidth = this.width + 20 | |
158 | - this.sliderLeft = this.width | |
159 | - } | |
160 | - this.stand_width = this.tempPercent*this.standard | |
161 | - this.stand_width = parseInt(this.stand_width/1) //取整 | |
162 | - this.$emit('percentChange', this.tempPercent) | |
163 | - } | |
164 | - } | |
68 | + // methods: { | |
69 | + // addListener () { | |
70 | + // const slider = this.$refs.slider | |
71 | + // const progress = this.$refs.progress | |
72 | + // let isClickSlider = false | |
73 | + // let distance = 0 // 滑块与点击坐标的绝对距离 | |
74 | + // progress.onclick = (e) => { | |
75 | + // // 阻止事件冒泡 | |
76 | + // if (e.target == slider) { | |
77 | + // return | |
78 | + // } | |
79 | + // let curX = progress.offsetLeft | |
80 | + // this.sliderLeft = e.pageX - curX | |
81 | + // if (this.sliderLeft <= 0) { | |
82 | + // this.sliderLeft = 0 | |
83 | + // } | |
84 | + // if (this.sliderLeft >= this.width) { | |
85 | + // this.sliderLeft = this.width | |
86 | + // } | |
87 | + // this._countCurPercent() | |
88 | + // } | |
89 | + // // slider.onmousedown = (e) => { | |
90 | + // // isClickSlider = true | |
91 | + // // let curX = slider.offsetLeft | |
92 | + // // distance = e.pageX - curX // 得出绝对距离 | |
93 | + // // } | |
94 | + // progress.onmousemove = (e) => { | |
95 | + // if (isClickSlider) { | |
96 | + // // 判断是否已经超出进度条的长度 | |
97 | + // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | |
98 | + // this.sliderLeft = e.pageX - distance | |
99 | + // this._countCurPercent() | |
100 | + // } | |
101 | + // } | |
102 | + // } | |
103 | + // progress.onmouseup = () => { | |
104 | + // isClickSlider = false | |
105 | + // } | |
106 | + // }, | |
107 | + // // 算出百分比 | |
108 | + // _countCurPercent () { | |
109 | + // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | |
110 | + // this.progressWidth = this.sliderLeft + 20 | |
111 | + // // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整 | |
112 | + // if (this.tempPercent <= 0) { | |
113 | + // this.progressWidth = 0 | |
114 | + // this.sliderLeft = 0 | |
115 | + // } | |
116 | + // if (this.tempPercent >= 100) { | |
117 | + // this.progressWidth = this.width + 20 | |
118 | + // this.sliderLeft = this.width | |
119 | + // } | |
120 | + // this.stand_width = this.tempPercent*this.standard | |
121 | + // this.stand_width = parseInt(this.stand_width/1) //取整 | |
122 | + // this.$emit('percentChange', this.tempPercent) | |
123 | + // } | |
124 | + // } | |
165 | 125 | } |
166 | 126 | </script> |
167 | 127 | |
168 | 128 | <style scoped lang="scss"> |
169 | 129 | .c-progress { |
170 | - $width: 400rpx; | |
130 | + $width: 300px; | |
171 | 131 | $radius: 5px; |
172 | 132 | display: flex; |
173 | 133 | align-items: center; |
... | ... | @@ -179,7 +139,7 @@ |
179 | 139 | } |
180 | 140 | |
181 | 141 | .c-progress-outer { |
182 | - width: $width; | |
142 | + width: 420rpx; | |
183 | 143 | height: 10px; |
184 | 144 | background: #ebeef5; |
185 | 145 | position: relative; |
... | ... | @@ -187,7 +147,7 @@ |
187 | 147 | align-items: center; |
188 | 148 | |
189 | 149 | .c-progress-inner { |
190 | - width: 100rpx; | |
150 | + width: 300rpx; | |
191 | 151 | height: 10px; |
192 | 152 | background: #FF6B4A ; |
193 | 153 | } | ... | ... |
src/pages.json
... | ... | @@ -7,21 +7,21 @@ |
7 | 7 | } |
8 | 8 | }, |
9 | 9 | { |
10 | - "path" : "pages/myOrder/myOrder", | |
10 | + "path" : "pages/user/user", | |
11 | 11 | "style" : { |
12 | - "navigationBarTitleText" : "我的订单" | |
12 | + "navigationBarTitleText" : "我的" | |
13 | 13 | } |
14 | 14 | }, |
15 | 15 | { |
16 | - "path" : "pages/cart/cart", | |
16 | + "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", | |
17 | 17 | "style" : { |
18 | - "navigationBarTitleText" : "购物车" | |
18 | + "navigationBarTitleText" : "镜片名称名称" | |
19 | 19 | } |
20 | 20 | }, |
21 | 21 | { |
22 | - "path" : "pages/frameDetail/frameDetail", | |
22 | + "path" : "pages/purchaseLenses/purchaseLenses", | |
23 | 23 | "style" : { |
24 | - "navigationBarTitleText" : "产品详情" | |
24 | + "navigationBarTitleText" : "产品选购" | |
25 | 25 | } |
26 | 26 | }, |
27 | 27 | { |
... | ... | @@ -31,60 +31,69 @@ |
31 | 31 | } |
32 | 32 | }, |
33 | 33 | { |
34 | - "path" : "pages/purchaseLenses/purchaseLenses", | |
34 | + "path" : "pages/myOrderPaying/myOrderPaying", | |
35 | 35 | "style" : { |
36 | - "navigationBarTitleText" : "产品选购" | |
36 | + "navigationBarTitleText" : "我的订单" | |
37 | 37 | } |
38 | 38 | }, |
39 | 39 | { |
40 | - "path" : "pages/refundProgress/refundProgress", | |
40 | + "path" : "pages/myOrder/myOrder", | |
41 | 41 | "style" : { |
42 | - "navigationBarTitleText" : "申请退款" | |
42 | + "navigationBarTitleText" : "我的订单" | |
43 | 43 | } |
44 | 44 | }, |
45 | 45 | { |
46 | - "path" : "pages/addAddress/addAddress", | |
46 | + "path" : "pages/cart/cart", | |
47 | 47 | "style" : { |
48 | - "navigationBarTitleText" : "新增地址" | |
48 | + "navigationBarTitleText" : "购物车" | |
49 | 49 | } |
50 | 50 | }, |
51 | 51 | { |
52 | - "path" : "pages/confirmOrder/confirmOrder", | |
52 | + "path" : "pages/frameDetail/frameDetail", | |
53 | 53 | "style" : { |
54 | - "navigationBarTitleText" : "确认订单" | |
54 | + "navigationBarTitleText" : "产品详情" | |
55 | 55 | } |
56 | 56 | }, |
57 | 57 | { |
58 | - "path" : "pages/user/user", | |
58 | + "path" : "pages/refundProgress/refundProgress", | |
59 | 59 | "style" : { |
60 | - "navigationBarTitleText" : "我的" | |
60 | + "navigationBarTitleText" : "申请退款" | |
61 | 61 | } |
62 | 62 | }, |
63 | 63 | { |
64 | - "path" : "pages/refundment/refundWays" | |
64 | + "path" : "pages/addAddress/addAddress", | |
65 | + "style" : { | |
66 | + "navigationBarTitleText" : "新增地址" | |
67 | + } | |
65 | 68 | }, |
66 | 69 | { |
67 | - "path" : "pages/refundment/refundment" | |
70 | + "path" : "pages/confirmOrder/confirmOrder", | |
71 | + "style" : { | |
72 | + "navigationBarTitleText" : "确认订单" | |
73 | + } | |
68 | 74 | }, |
69 | 75 | { |
70 | - "path" : "pages/predelivery/predelivery" | |
76 | + "path" : "pages/refundment/refundWays", | |
77 | + "style" : { | |
78 | + "navigationBarTitleText" : "退款方式" | |
79 | + } | |
71 | 80 | }, |
72 | 81 | { |
73 | - "path" : "pages/customerService/customerService", | |
82 | + "path" : "pages/refundment/refundment", | |
74 | 83 | "style" : { |
75 | - "navigationBarTitleText" : "在线客服" | |
84 | + "navigationBarTitleText" : "申请退款" | |
76 | 85 | } |
77 | 86 | }, |
78 | 87 | { |
79 | - "path" : "pages/myOrderPaying/myOrderPaying", | |
88 | + "path" : "pages/predelivery/predelivery", | |
80 | 89 | "style" : { |
81 | - "navigationBarTitleText" : "我的订单" | |
90 | + "navigationBarTitleText" : "待发货" | |
82 | 91 | } |
83 | 92 | }, |
84 | 93 | { |
85 | - "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", | |
94 | + "path" : "pages/customerService/customerService", | |
86 | 95 | "style" : { |
87 | - "navigationBarTitleText" : "镜片名称名称" | |
96 | + "navigationBarTitleText" : "在线客服" | |
88 | 97 | } |
89 | 98 | }, |
90 | 99 | { |
... | ... | @@ -99,6 +108,11 @@ |
99 | 108 | "navigationBarTitleText" : "镜框选购页" |
100 | 109 | } |
101 | 110 | } |
111 | + ,{ | |
112 | + "path" : "pages/addOpticsData/addOpticsData", | |
113 | + "style" : { | |
114 | + "navigationBarTitleText" : "验光数据"} | |
115 | + } | |
102 | 116 | ], |
103 | 117 | "globalStyle" : { |
104 | 118 | "navigationBarTextStyle" : "black", |
... | ... | @@ -143,4 +157,4 @@ |
143 | 157 | } |
144 | 158 | ] |
145 | 159 | } |
146 | 160 | -} |
161 | +} | |
147 | 162 | \ No newline at end of file | ... | ... |
src/pages/addOpticsData/addOpticsData.vue
src/pages/cart/cart.vue
1 | 1 | <template> |
2 | 2 | <view class="content"> |
3 | - | |
4 | - <view class="card"> | |
5 | - <view class="cardHeader"> | |
6 | - <block v-if="pIsoPen"> | |
7 | - <view class="partentChecked" @click="pChange(pIsoPen)"> | |
8 | - <span class="status correct"></span> | |
9 | - </view> | |
10 | - </block> | |
11 | - <block v-else> | |
12 | - <view class="partentCheck" @click="pChange(pIsoPen)"></view> | |
13 | - </block> | |
14 | - <image src="../../static/store.png" mode="aspectFill"></image> | |
15 | - <text>非常戴镜</text> | |
16 | - </view> | |
3 | + <block v-if="cartList.length==0"> | |
17 | 4 | |
18 | - <view class="cardBody"> | |
19 | - <template v-if="childIsOpen.child1"> | |
20 | - <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> | |
21 | - <span class="status correct"></span> | |
5 | + </block> | |
6 | + <block v-else> | |
7 | + <view class="card"> | |
8 | + <view class="cardHeader"> | |
9 | + <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" | |
10 | + @click="pChange(pIsoPen)"> | |
11 | + <span class="correct"></span> | |
22 | 12 | </view> |
23 | - </template> | |
24 | - <template v-else> | |
25 | - <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> | |
26 | - </template> | |
27 | - <view class="goodInfo"> | |
28 | - <view class="imageWrap"> | |
29 | - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | |
13 | + <image src="../../static/store.png" mode="aspectFill"></image> | |
14 | + <text>非常戴镜</text> | |
15 | + </view> | |
16 | + | |
17 | + <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" | |
18 | + @longpress="delCart(item.cart_id,index)"> | |
19 | + <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" | |
20 | + @click="Change(childIsOpen[index],index)"> | |
21 | + <span class="correct"></span> | |
30 | 22 | </view> |
31 | - <view class="infoRight"> | |
32 | - <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | |
33 | - <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | |
34 | - <view class="icon"></view> | |
23 | + <view class="goodInfo"> | |
24 | + <view class="imageWrap"> | |
25 | + <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | |
35 | 26 | </view> |
36 | - <view class="priceBox"> | |
37 | - <view class="price">¥{{198}}</view> | |
38 | - <text>(限购{{maxCount}}副)</text> | |
39 | - <view class="counter"> | |
40 | - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | |
41 | - <text>{{count}}</text> | |
42 | - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | |
27 | + <view class="infoRight"> | |
28 | + <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> | |
29 | + <view class="describ" @tap="toshop(item.pid,item.p_root_index)"> | |
30 | + <text> | |
31 | + <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> | |
32 | + {{tag.label+` `}} | |
33 | + </block> | |
34 | + </text> | |
35 | + <view class="icon"></view> | |
36 | + </view> | |
37 | + <view class="priceBox"> | |
38 | + <view class="price">¥{{item.nowPrice*item.num}}</view> | |
39 | + <text>(限购{{maxCount}}副)</text> | |
40 | + <view class="counter"> | |
41 | + <view class="btn" disabled="this.addDisabled" type="default" | |
42 | + @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> | |
43 | + <text>{{item.num}}</text> | |
44 | + <view class="btn" disabled="this.desDisabled" type="default" | |
45 | + @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> | |
46 | + </view> | |
43 | 47 | </view> |
44 | 48 | </view> |
45 | 49 | </view> |
46 | 50 | </view> |
47 | 51 | </view> |
48 | - <view class="cardBody"> | |
49 | - <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> | |
50 | - <template v-if="childIsOpen.child2"> | |
51 | - <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> | |
52 | - <span class="status correct"></span> | |
53 | - </view> | |
54 | - </template> | |
55 | - <template v-else> | |
56 | - <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> | |
57 | - </template> | |
58 | - <view class="goodInfo"> | |
59 | - <view class="imageWrap"> | |
60 | - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | |
61 | - </view> | |
62 | - <view class="infoRight"> | |
63 | - <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | |
64 | - <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | |
65 | - <view class="icon"></view> | |
66 | - </view> | |
67 | - <view class="priceBox"> | |
68 | - <view class="price">¥198</view> | |
69 | - <text>(限购{{maxCount}}副)</text> | |
70 | - <view class="counter"> | |
71 | - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | |
72 | - <text>{{count}}</text> | |
73 | - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | |
74 | - </view> | |
75 | - </view> | |
76 | - </view> | |
77 | - </view> | |
78 | - </view> | |
79 | - </view> | |
80 | - | |
52 | + </block> | |
81 | 53 | <view class="footer"> |
82 | 54 | <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> |
83 | 55 | <view class="footerRight"> |
84 | - <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> | |
85 | - <view class="paybtn">立即支付</view> | |
56 | + <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> | |
57 | + <view class="paybtn" >立即结算</view> | |
86 | 58 | </navigator> |
87 | 59 | </view> |
88 | 60 | </view> |
... | ... | @@ -97,50 +69,273 @@ |
97 | 69 | |
98 | 70 | data() { |
99 | 71 | return { |
100 | - totalPrice: 360, | |
101 | - count:1, | |
72 | + totalPrice: 0, | |
73 | + pIsoPen:false, | |
74 | + // childIsOpen:[], | |
102 | 75 | maxCount:20, |
103 | - pIsoPen: false, | |
104 | - childIsOpen:{ | |
105 | - "child1":true, | |
106 | - "child2":true | |
107 | - }, | |
108 | 76 | } |
109 | 77 | }, |
110 | 78 | computed:{ |
79 | + | |
111 | 80 | cartList() { |
112 | - // 也可以从 getters 获取 | |
113 | - console.log('cart-list', this.$store.state.cart.cartList); | |
81 | + // console.log('cart-list', this.$store.state.cart.cartList); | |
114 | 82 | return this.$store.state.cart.cartList; |
83 | + }, | |
84 | + childIsOpen(){ | |
85 | + let temp=[]; | |
86 | + temp.length=this.$store.state.cart.cartList.length; | |
87 | + for (let i = 0; i < temp.length; i++) { | |
88 | + temp[i]= false | |
89 | + } | |
90 | + console.log('this.childisOPne===>',temp) | |
91 | + return temp | |
115 | 92 | } |
116 | 93 | }, |
117 | 94 | onLoad: function() { |
95 | + // 判断是否授权 | |
96 | + // uni.getSetting({ | |
97 | + // success(res) { | |
98 | + // console.log('authSetting',res.authSetting) | |
99 | + // if(res.authSetting['scope.userInfo'] !== true) { | |
100 | + | |
101 | + // uni.switchTab({ | |
102 | + // url:'/pages/user/user' | |
103 | + // }) | |
104 | + // }else { | |
105 | + // } | |
106 | + // } | |
107 | + // }) | |
108 | + | |
109 | + // console.log('usr-my',this.$store.state.user.userInfo) | |
110 | + // store.dispatch('cart/addCart',{ | |
111 | + // "num":1, | |
112 | + // "pid": 7,//产品id | |
113 | + // "uid":1, | |
114 | + // "sk_id": 72, | |
115 | + // "price": 120, | |
116 | + // "mp_id":1, | |
117 | + // "checkedSKU":{ | |
118 | + // "discount": "45", | |
119 | + // "in_price": "6000", | |
120 | + // "kc": "0", | |
121 | + // "model_pic": null, | |
122 | + // "out_price": 191.8, | |
123 | + // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg", | |
124 | + // "pid": "7", | |
125 | + // "real_price": 99, | |
126 | + // "sk_id": "89", | |
127 | + // "sku_name": "1.56非球面防蓝光_黑", | |
128 | + // "sku_shop_value": "", | |
129 | + // "sku_value": "58_61", | |
130 | + // "status": "1", | |
131 | + // }, | |
132 | + // }); | |
118 | 133 | store.dispatch('cart/getCartList',{ |
119 | 134 | uid: 1, //用户id |
120 | 135 | }); |
121 | 136 | }, |
137 | + | |
122 | 138 | methods: { |
123 | - counter(isadd){ | |
139 | + // 跳转到对应的选购页面 | |
140 | + toshop(id,type){ | |
141 | + console.log('===',id,type) | |
142 | + switch(type){ | |
143 | + case 1: | |
144 | + uni.navigateTo({ | |
145 | + url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type, | |
146 | + success: res => {}, | |
147 | + fail: () => {}, | |
148 | + complete: () => {} | |
149 | + }); | |
150 | + break; | |
151 | + case 2: | |
152 | + uni.navigateTo({ | |
153 | + url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type, | |
154 | + success: res => {}, | |
155 | + fail: () => {}, | |
156 | + complete: () => {} | |
157 | + }); | |
158 | + break; | |
159 | + case 3||4: | |
160 | + uni.navigateTo({ | |
161 | + url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, | |
162 | + success: res => {}, | |
163 | + fail: () => {}, | |
164 | + complete: () => {} | |
165 | + }); | |
166 | + break; | |
167 | + // case 4: | |
168 | + // uni.navigateTo({ | |
169 | + // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, | |
170 | + // success: res => {}, | |
171 | + // fail: () => {}, | |
172 | + // complete: () => {} | |
173 | + // }); | |
174 | + case 5: | |
175 | + uni.navigateTo({ | |
176 | + url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type, | |
177 | + success: res => {}, | |
178 | + fail: () => {}, | |
179 | + complete: () => {} | |
180 | + }); | |
181 | + break; | |
182 | + default : | |
183 | + break | |
184 | + } | |
185 | + }, | |
186 | + toGoods(id,type){ | |
187 | + uni.navigateTo({ | |
188 | + url: `../frameDetail/frameDetail?oderId=`+id, | |
189 | + success: res => {}, | |
190 | + fail: () => {}, | |
191 | + complete: () => {} | |
192 | + }); | |
193 | + console.log('toGoods =====> id:'+id +"======>type:"+type) | |
194 | + switch(type){ | |
195 | + case 1: | |
196 | + uni.navigateTo({ | |
197 | + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | |
198 | + success: res => {}, | |
199 | + fail: () => {}, | |
200 | + complete: () => {} | |
201 | + }); | |
202 | + break; | |
203 | + case 2: | |
204 | + uni.navigateTo({ | |
205 | + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | |
206 | + success: res => {}, | |
207 | + fail: () => {}, | |
208 | + complete: () => {} | |
209 | + }); | |
210 | + break; | |
211 | + case 3: | |
212 | + uni.navigateTo({ | |
213 | + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | |
214 | + success: res => {}, | |
215 | + fail: () => {}, | |
216 | + complete: () => {} | |
217 | + }); | |
218 | + break; | |
219 | + case 4: | |
220 | + uni.navigateTo({ | |
221 | + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | |
222 | + success: res => {}, | |
223 | + fail: () => {}, | |
224 | + complete: () => {} | |
225 | + }); | |
226 | + break; | |
227 | + default : | |
228 | + break | |
229 | + } | |
230 | + }, | |
231 | + | |
232 | + counter(index,isadd,mp_id,sk_id,num,cart_id){ | |
233 | + // console.log('===>>counter ===>num',num) | |
234 | + // console.log('===>>counter ===>isadd',isadd) | |
235 | + num=parseInt(num); | |
124 | 236 | if(isadd){ |
125 | - this.count >= this.maxCount? this.addDisabled = true:this.count++; | |
237 | + if(num>=this.maxCount){ | |
238 | + this.addDisabled = true | |
239 | + } else{ | |
240 | + this.addDisabled= true | |
241 | + // 修改num | |
242 | + store.dispatch('cart/modiCart',{ | |
243 | + uid: 1, | |
244 | + // openid: '', | |
245 | + mp_id: mp_id, | |
246 | + sk_id: sk_id, | |
247 | + cart_id:cart_id, | |
248 | + num:num+1, | |
249 | + args:{ | |
250 | + index:index, | |
251 | + isadd:isadd, | |
252 | + } | |
253 | + }) | |
254 | + this.addDisabled= false | |
255 | + } | |
256 | + }else{ | |
257 | + if(num<=1){ | |
258 | + this.desDisabled = true | |
259 | + } else{ | |
260 | + this.desDisabled = false | |
261 | + // post 请求修改相关参数 | |
262 | + store.dispatch('cart/modiCart',{ | |
263 | + uid: 1, | |
264 | + // openid: '', | |
265 | + mp_id: mp_id, | |
266 | + sk_id: sk_id, | |
267 | + cart_id:cart_id, | |
268 | + num:num-1, | |
269 | + args:{ | |
270 | + index:index, | |
271 | + isadd:isadd, | |
272 | + } | |
273 | + }) | |
274 | + this.desDisabled = true | |
275 | + } | |
276 | + } | |
277 | + }, | |
278 | + | |
279 | + Change(isopen,indexC){ | |
280 | + // console.log('lalla===>',isopen) | |
281 | + this.childIsOpen[indexC]=!isopen | |
282 | + if(!isopen){ | |
283 | + this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) | |
126 | 284 | }else{ |
127 | - this.count <= 1? this.desDisabled = true:this.count--; | |
285 | + this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) | |
286 | + } | |
287 | + let m=true; | |
288 | + for (let i = 0; i < this.childIsOpen.length; i++) { | |
289 | + m=m&this.childIsOpen[i] | |
290 | + } | |
291 | + if(m==1){ | |
292 | + this.pIsoPen=true | |
293 | + } else{ | |
294 | + this.pIsoPen=false | |
128 | 295 | } |
129 | 296 | }, |
130 | 297 | pChange(isopen){ |
131 | - // console.log(isopen) | |
132 | 298 | this.pIsoPen=!isopen |
133 | - this.childIsOpen.child1=!isopen | |
134 | - this.childIsOpen.child2=!isopen | |
135 | - }, | |
136 | - cChange(isopen,child){ | |
137 | - // console.log(child) | |
138 | - if(child==='child1'){ | |
139 | - this.childIsOpen.child1=!isopen | |
299 | + for (let i = 0; i < this.childIsOpen.length; i++) { | |
300 | + this.childIsOpen[i]=!isopen | |
140 | 301 | } |
141 | - if(child==='child2'){ | |
142 | - this.childIsOpen.child2=!isopen | |
302 | + if(this.pIsoPen){ | |
303 | + // 计算总价逻辑 | |
304 | + if(this.childIsOpen.length!=0){ | |
305 | + for (let i = 0; i < this.childIsOpen.length; i++) { | |
306 | + if(this.childIsOpen[i]){ | |
307 | + this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice) | |
308 | + } | |
309 | + } | |
310 | + } | |
311 | + } else{ | |
312 | + this.totalPrice=0 | |
143 | 313 | } |
314 | + | |
315 | + }, | |
316 | + delCart(cart_id,index){ | |
317 | + // console.log('userInfo',this.$store.state.user.userInfo) | |
318 | + cart_id=parseInt(cart_id) | |
319 | + // console.log('delcart------>cart_id',cart_id) | |
320 | + // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | |
321 | + // console.log('delcart======>index',index) | |
322 | + uni.showModal({ | |
323 | + title: "是否删除该商品", | |
324 | + // content: '是否删除该商品', | |
325 | + success: function (res) { | |
326 | + if (res.confirm) { | |
327 | + // this.$store.state.cart.cartList.splice(index,1) | |
328 | + store.dispatch('cart/delCart',{ | |
329 | + uid: 1, //用户id | |
330 | + openid: "", | |
331 | + cart_id: cart_id, // 要修改的购物车id | |
332 | + arg:index, // 由于action 传参是能接收两参数,因此将index放入对象 | |
333 | + }); | |
334 | + console.log('用户点击确定'); | |
335 | + } | |
336 | + } | |
337 | + }); | |
338 | + | |
144 | 339 | } |
145 | 340 | } |
146 | 341 | } |
... | ... | @@ -171,21 +366,22 @@ |
171 | 366 | background-color: #FF6B4A; |
172 | 367 | .correct { |
173 | 368 | display: inline-block; |
174 | - width: 5px; | |
175 | - height: 1px; | |
369 | + position: relative; | |
370 | + width: 10rpx; | |
371 | + height: 2rpx; | |
176 | 372 | background: #FFFFFF; |
177 | 373 | line-height: 0; |
178 | 374 | font-size: 0; |
179 | 375 | position: relative; |
180 | - top: -6px; | |
376 | + top: -7px; | |
181 | 377 | left: 4px; |
182 | 378 | -webkit-transform: rotate(45deg); |
183 | 379 | } |
184 | 380 | .correct:after { |
185 | 381 | content: '/'; |
186 | 382 | display: block; |
187 | - width: 8px; | |
188 | - height: 1px; | |
383 | + width: 16rpx; | |
384 | + height: 2rpx; | |
189 | 385 | background: #FFFFFF; |
190 | 386 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
191 | 387 | } |
... | ... | @@ -200,6 +396,7 @@ |
200 | 396 | flex-direction: column; |
201 | 397 | align-items: center; |
202 | 398 | justify-content: space-between; |
399 | + margin-bottom: 180rpx; | |
203 | 400 | .cardHeader{ |
204 | 401 | width: 100%; |
205 | 402 | height: 36rpx; |
... | ... | @@ -248,6 +445,11 @@ |
248 | 445 | justify-content: space-between; |
249 | 446 | height: 240rpx; |
250 | 447 | .goodName{ |
448 | + display: -webkit-box; | |
449 | + -webkit-box-orient: vertical; | |
450 | + -webkit-line-clamp: 2; | |
451 | + text-align: justify; | |
452 | + overflow: hidden; | |
251 | 453 | font-size: 28rpx; |
252 | 454 | color: #333333; |
253 | 455 | } |
... | ... | @@ -257,8 +459,10 @@ |
257 | 459 | box-sizing: border-box; |
258 | 460 | padding: 10rpx; |
259 | 461 | font-size: 20rpx; |
462 | + letter-spacing: -0.23px; | |
463 | + text-align: justify; | |
260 | 464 | color: #999999; |
261 | - background: #F2F2F2; | |
465 | + background: #F9F9F9; | |
262 | 466 | display: flex; |
263 | 467 | justify-content: center; |
264 | 468 | align-items: center; | ... | ... |
src/pages/detailStandard/detailStandard_k.vue
1 | 1 | <template> |
2 | 2 | <view class="container"> |
3 | 3 | <view class="detail"> |
4 | - <view class="detail1"><image v-bind:src="detail.image"></image></view> | |
4 | + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | |
5 | 5 | <view class="detail2"> |
6 | - <view class="detail2_name">{{detail.name}}</view> | |
6 | + <view class="detail2_name">{{details.data.p_name}}</view> | |
7 | 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> |
8 | - <view class="detail2_price"><span>¥{{detail.price}}</span></view> | |
8 | + <view class="detail2_price"> | |
9 | + <span>¥{{details.data.p_sale_price*count}}</span> | |
10 | + <view class="counter"> | |
11 | + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | |
12 | + <text>{{count}}</text> | |
13 | + <view class="btn" @click="counter(true)">+</view> | |
14 | + </view> | |
15 | + </view> | |
9 | 16 | </view> |
10 | 17 | </view> |
11 | 18 | <view class="choose"> |
12 | 19 | <view class="colour"> |
13 | 20 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> |
14 | - <view class="colour_exp">*黑色 BHL192345</view> | |
21 | + <view class="colour_exp">*{{colour}}</view> | |
22 | + <view> | |
15 | 23 | <view class="colour2"> |
16 | - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
24 | + <view | |
25 | + v-for="(items,index) in details.data.skuList" | |
26 | + :key="index" | |
27 | + @click="viewChoose(index)" | |
28 | + class="colour2_view" | |
29 | + v-bind:class="{'colour2_viewed': chooseNum == index}" | |
30 | + > | |
31 | + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | |
32 | + </view> | |
33 | + </view> | |
17 | 34 | </view> |
18 | 35 | <hr/> |
19 | 36 | </view> |
... | ... | @@ -22,23 +39,59 @@ |
22 | 39 | <view class="size1_1">框架尺寸</view> |
23 | 40 | <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> |
24 | 41 | </view> |
25 | - <view class="size2"> | |
26 | - <view>通用</view> | |
27 | - <view>定制</view> | |
42 | + <view class="colour"> | |
43 | + <view class="colour_exp">*{{colour}}</view> | |
28 | 44 | </view> |
29 | 45 | <view class="D3_list"> |
30 | - <view v-for="(item) in parameter" :key="item.key"> | |
31 | - <view><image class="D3_image" v-bind:src = "item.img"></image></view> | |
46 | + <view> | |
47 | + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | |
48 | + <view class="D3_list_jDu"> | |
49 | + <view class="D3_list1"> | |
50 | + <c-progress class="c-progress" :inner_widthProp="300"/> | |
51 | + <text>{{details.data.frame_width}}mm</text> | |
52 | + </view> | |
53 | + <view>{{parameter[0].standard}}</view> | |
54 | + </view> | |
55 | + </view> | |
56 | + <view> | |
57 | + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | |
32 | 58 | <view class="D3_list_jDu"> |
33 | - <!-- uni-sliper插件 --> | |
34 | - <!-- <c-progress class="c-progress" | |
35 | - :percent="item.percent" | |
36 | - :show-slider="false" :width="190" | |
37 | - :standard="item.standard_l" | |
38 | - :stand_width="item.slength" | |
39 | - progressColor="#FF6B4A" | |
40 | - /> --> | |
41 | - <view>{{item.standard}}</view> | |
59 | + <view class="D3_list1"> | |
60 | + <c-progress class="c-progress" :inner_widthProp="190"/> | |
61 | + <view>{{details.data.glass_width}}mm</view> | |
62 | + </view> | |
63 | + <view>{{parameter[1].standard}}</view> | |
64 | + </view> | |
65 | + </view> | |
66 | + <view> | |
67 | + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | |
68 | + <view class="D3_list_jDu"> | |
69 | + <view class="D3_list1"> | |
70 | + <c-progress class="c-progress" :inner_widthProp="210"/> | |
71 | + <view>{{details.data.glass_height}}mm</view> | |
72 | + </view> | |
73 | + <view>{{parameter[2].standard}}</view> | |
74 | + </view> | |
75 | + </view> | |
76 | + <view> | |
77 | + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | |
78 | + <view class="D3_list_jDu"> | |
79 | + | |
80 | + <view class="D3_list1"> | |
81 | + <c-progress class="c-progress" :inner_widthProp="160"/> | |
82 | + <view>{{details.data.nose_width}}mm</view> | |
83 | + </view> | |
84 | + <view>{{parameter[3].standard}}</view> | |
85 | + </view> | |
86 | + </view> | |
87 | + <view> | |
88 | + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | |
89 | + <view class="D3_list_jDu"> | |
90 | + <view class="D3_list1"> | |
91 | + <c-progress class="c-progress" :inner_widthProp="260"/> | |
92 | + <view>{{details.data.leg_long}}mm</view> | |
93 | + </view> | |
94 | + <view>{{parameter[4].standard}}</view> | |
42 | 95 | </view> |
43 | 96 | </view> |
44 | 97 | <hr/> |
... | ... | @@ -51,7 +104,13 @@ |
51 | 104 | </view> |
52 | 105 | <view class="colour_exp">*0290</view> |
53 | 106 | <view class="part_som"> |
54 | - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | |
107 | + <view | |
108 | + v-for="(part) in part" | |
109 | + :key="part.key" | |
110 | + v-bind:class="{'size_viewed': part.is_actived}" | |
111 | + > | |
112 | + <image v-bind:src="part.img"></image> | |
113 | + </view> | |
55 | 114 | </view> |
56 | 115 | </view> |
57 | 116 | </view> |
... | ... | @@ -60,7 +119,7 @@ |
60 | 119 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
61 | 120 | <view class="buy3"> |
62 | 121 | <view class="buy3_1">暂时不选</view> |
63 | - <view class="buy3_2">立即去选</view> | |
122 | + <view class="buy3_2" @click="popArgs">立即去选</view> | |
64 | 123 | </view> |
65 | 124 | </view> |
66 | 125 | <view class="zhanwei"></view> |
... | ... | @@ -72,55 +131,73 @@ import CProgress from '../../components/UniSliper/UniSliper' |
72 | 131 | import store from '@/store' |
73 | 132 | |
74 | 133 | export default { |
134 | + components: { | |
135 | + CProgress | |
136 | + }, | |
75 | 137 | data(){ |
76 | 138 | return{ |
77 | - detail:{ | |
78 | - image:'/static/img/detail/d1.png', | |
79 | - name:'商品名称商品名称商品名称商品名称商品名称', | |
80 | - price: 180, | |
81 | - number: 1, | |
82 | - }, | |
83 | - //框架颜色 | |
84 | - colour:[ | |
85 | - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | |
86 | - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | |
87 | - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | |
88 | - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | |
89 | - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | |
90 | - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | |
91 | - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | |
92 | - ], | |
93 | - //规格 | |
139 | + count: 1, | |
140 | + colour: '1.56非球面防蓝光_亚黑色', | |
141 | + chooseNum : '', | |
94 | 142 | parameter:[ |
95 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | |
96 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | |
97 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | |
98 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | |
99 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | |
143 | + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | |
144 | + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | |
145 | + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | |
146 | + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | |
147 | + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | |
100 | 148 | ], |
101 | 149 | //配饰 |
102 | 150 | part:[ |
103 | - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | |
104 | - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | |
105 | - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | |
106 | - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | |
107 | - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | |
108 | - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | |
109 | - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | |
110 | - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | |
151 | + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | |
152 | + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
153 | + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
154 | + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
155 | + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
156 | + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
157 | + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
158 | + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
111 | 159 | ], |
112 | 160 | } |
113 | 161 | }, |
114 | 162 | |
115 | - components: { | |
116 | - detailStandard_k(){ | |
117 | - console.log(detailStandard_k) | |
118 | - return this.$store.state.detailStandard_k.detailStandardList | |
119 | - } | |
163 | + computed: { | |
164 | + details(){ | |
165 | + return this.$store.state.detailStandard_k.list | |
166 | + }, | |
120 | 167 | }, |
121 | 168 | onLoad:function(){ |
122 | - store.dispatch('detailStandard_k/getList') | |
169 | + store.dispatch('detailStandard_k/fetch', { | |
170 | + uid: "1", | |
171 | + pid: "26", | |
172 | + }); | |
173 | + // console.log(this.$store.state.detailStandard_k.list+'ssss'); | |
123 | 174 | }, |
175 | + methods: { | |
176 | + counter(isadd){ | |
177 | + if(isadd){ | |
178 | + this.count++ | |
179 | + }else{ | |
180 | + this.count <= 1? this.disabled = true:this.count-- | |
181 | + } | |
182 | + }, | |
183 | + colourChange(index,e){ | |
184 | + this.colour = e ; //颜色选择 | |
185 | + // console.log(index,e); | |
186 | + | |
187 | + }, | |
188 | + viewChoose(index){ | |
189 | + this.chooseNum = index | |
190 | + }, | |
191 | + popArgs(){ | |
192 | + uni.navigateTo({ | |
193 | + url: '../detailsChoiceArgs/detailsChoiceArgs', | |
194 | + success: res => {}, | |
195 | + fail: () => {}, | |
196 | + complete: () => {} | |
197 | + }); | |
198 | + } | |
199 | + } | |
200 | + | |
124 | 201 | } |
125 | 202 | </script> |
126 | 203 | |
... | ... | @@ -148,7 +225,7 @@ hr{ |
148 | 225 | align-items: center; |
149 | 226 | } |
150 | 227 | .detail1{ |
151 | - height: 188rpx; | |
228 | + height: 178rpx; | |
152 | 229 | width: 188rpx; |
153 | 230 | image{ |
154 | 231 | width: 100%; |
... | ... | @@ -159,7 +236,7 @@ hr{ |
159 | 236 | .detail2{ |
160 | 237 | width: 68%; |
161 | 238 | view{ |
162 | - margin-bottom: 8px; | |
239 | + margin-bottom: 6px; | |
163 | 240 | font-family: PingFangSC-Regular; |
164 | 241 | } |
165 | 242 | .detail2_name{ |
... | ... | @@ -167,6 +244,11 @@ hr{ |
167 | 244 | color: #333333; |
168 | 245 | letter-spacing: -0.26px; |
169 | 246 | line-height: 18px; |
247 | + overflow:hidden; | |
248 | + text-overflow:ellipsis; | |
249 | + display:-webkit-box; | |
250 | + -webkit-box-orient:vertical; | |
251 | + -webkit-line-clamp:2; | |
170 | 252 | } |
171 | 253 | .detail2_tui{ |
172 | 254 | font-size: 10px; |
... | ... | @@ -182,6 +264,24 @@ hr{ |
182 | 264 | letter-spacing: -0.26px; |
183 | 265 | } |
184 | 266 | } |
267 | +.counter{ | |
268 | + display: flex; | |
269 | + flex-direction: row; | |
270 | + justify-content: space-between; | |
271 | + font-size: 28rpx; | |
272 | + color: #333333; | |
273 | + width: 122rpx; | |
274 | + float: right; | |
275 | + .btn{ | |
276 | + display: flex; | |
277 | + justify-content: center; | |
278 | + line-height: 32rpx; | |
279 | + height: 32rpx; | |
280 | + width: 32rpx; | |
281 | + background-color: #F2F2F2; | |
282 | + color: #CFCFCF; | |
283 | + } | |
284 | +} | |
185 | 285 | .choose{ |
186 | 286 | background: #FFFFFF; |
187 | 287 | padding: 16px; |
... | ... | @@ -218,15 +318,19 @@ hr{ |
218 | 318 | justify-content: space-between ; |
219 | 319 | grid-row-gap: 10px; |
220 | 320 | margin-bottom: 14px; |
221 | - view{ | |
321 | + .colour2_view{ | |
222 | 322 | border: 1px solid #F2F2F2; |
223 | 323 | image{ |
224 | - width: 100%; | |
225 | - height: 100%; | |
324 | + width: 100rpx; | |
325 | + height: 60rpx; | |
226 | 326 | } |
227 | 327 | } |
228 | - view:hover{ | |
328 | + .colour2_viewed{ | |
229 | 329 | border: 1px solid #FF6B4A; |
330 | + image{ | |
331 | + width: 100rpx; | |
332 | + height: 60rpx; | |
333 | + } | |
230 | 334 | } |
231 | 335 | } |
232 | 336 | } |
... | ... | @@ -306,6 +410,9 @@ hr{ |
306 | 410 | color: #999999; |
307 | 411 | letter-spacing: -0.19px; |
308 | 412 | } |
413 | + .D3_list1{ | |
414 | + display: flex; | |
415 | + } | |
309 | 416 | } |
310 | 417 | } |
311 | 418 | .part{ |
... | ... | @@ -323,13 +430,19 @@ hr{ |
323 | 430 | height: 100%; |
324 | 431 | } |
325 | 432 | } |
326 | - view:hover{ | |
433 | + .size_viewed{ | |
327 | 434 | border: 1px solid #FF6B4A; |
435 | + height: 72rpx; | |
436 | + image{ | |
437 | + width: 100%; | |
438 | + height: 100%; | |
439 | + } | |
328 | 440 | } |
329 | 441 | } |
330 | 442 | } |
443 | + | |
331 | 444 | .buy{ |
332 | - height: 280rpx; | |
445 | + height: 300rpx; | |
333 | 446 | background: #FFFFFF ; |
334 | 447 | margin-top: 10px; |
335 | 448 | border-radius: 8px; | ... | ... |
src/pages/detailStandard/detailStandard_sun.vue
1 | 1 | <template> |
2 | 2 | <view class="container"> |
3 | 3 | <view class="detail"> |
4 | - <view class="detail1"><image v-bind:src="detail.image"></image></view> | |
4 | + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | |
5 | 5 | <view class="detail2"> |
6 | - <view class="detail2_name">{{detail.name}}</view> | |
7 | - <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | |
8 | - <view class="detail2_price"><span>¥{{detail.price}}</span></view> | |
6 | + <view class="detail2_name">{{details.data.p_name}}</view> | |
7 | + <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> | |
8 | + <view class="detail2_price"> | |
9 | + <text>¥{{details.data.p_sale_price*count}}</text> | |
10 | + <view class="counter"> | |
11 | + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | |
12 | + <text>{{count}}</text> | |
13 | + <view class="btn" @click="counter(true)">+</view> | |
14 | + </view> | |
15 | + </view> | |
9 | 16 | </view> |
10 | 17 | </view> |
11 | 18 | <view class="choose"> |
12 | 19 | <view class="colour"> |
13 | - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | |
14 | - <view class="colour_exp">*黑色 BHL192345</view> | |
20 | + <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> | |
21 | + <view class="colour_exp">*{{colour}}</view> | |
22 | + <view> | |
15 | 23 | <view class="colour2"> |
16 | - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
24 | + <view | |
25 | + v-for="(items,index) in details.data.skuList" | |
26 | + :key="index" | |
27 | + @click="viewChoose(index)" | |
28 | + class="colour2_view" | |
29 | + v-bind:class="{'colour2_viewed': chooseNum == index}" | |
30 | + > | |
31 | + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | |
32 | + </view> | |
33 | + </view> | |
17 | 34 | </view> |
18 | 35 | <hr/> |
19 | 36 | </view> |
20 | 37 | <view class="colour"> |
21 | - <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | |
38 | + <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view> | |
22 | 39 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
40 | + <view> | |
23 | 41 | <view class="jp_colour2"> |
24 | - <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
42 | + <view | |
43 | + v-for="(items,index) in jp_colour" | |
44 | + :key="index" | |
45 | + class="jp_colour2_view" | |
46 | + > | |
47 | + <image v-bind:src="items.img"></image> | |
48 | + </view> | |
49 | + </view> | |
25 | 50 | </view> |
26 | 51 | <hr/> |
27 | 52 | </view> |
28 | - <view class="split"> | |
29 | - <view class="split1"> | |
30 | - <span>折射率</span> | |
31 | - <span class="split1_span">注:折射率越高,镜片越薄,看起来更美观。</span> | |
32 | - <image src="/static/img/detail/xiala2.png"></image> | |
53 | + <view class="colour"> | |
54 | + <view class="colour1"> | |
55 | + <text>{{details.data.attrList[0].meta_name}}</text> | |
56 | + <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> | |
57 | + <image src="/static/img/detail/xiala.png"></image> | |
33 | 58 | </view> |
34 | - <view class="split2"> | |
35 | - <view class="split2_number">0-300度</view> | |
36 | - <view class="split2_choose"><view class="split2_tui">1.56(推荐)</view><view>1.60</view></view> | |
59 | + <view> | |
60 | + <view class="split"> | |
61 | + <view | |
62 | + v-for="(items,index) in details.data.attrList[0].attr" | |
63 | + :key="index" | |
64 | + > | |
65 | + <view | |
66 | + class="split_colour2" | |
67 | + @click="splitChoose(index)" | |
68 | + v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" | |
69 | + >{{items.name}}</view> | |
70 | + </view> | |
37 | 71 | </view> |
38 | - <view class="split2"> | |
39 | - <view class="split2_number">300-1000度</view> | |
40 | - <view class="split2_choose"><view class="split2_tui">1.71(推荐)</view> | |
41 | - <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view> | |
42 | 72 | </view> |
43 | 73 | <hr/> |
44 | 74 | </view> |
45 | 75 | <view class="size"> |
46 | 76 | <view class="size1"> |
47 | 77 | <view class="size1_1">框架尺寸</view> |
48 | - <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view> | |
78 | + <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> | |
49 | 79 | </view> |
50 | - <view class="size2"> | |
51 | - <view>通用</view> | |
52 | - <view>定制</view> | |
80 | + <view class="colour"> | |
81 | + <view class="colour_exp">*{{colour}}</view> | |
53 | 82 | </view> |
54 | - <!-- uni-sliper插件 --> | |
55 | 83 | <view class="D3_list"> |
56 | - <view v-for="(item) in parameter" :key="item.key"> | |
57 | - <view><image class="D3_image" v-bind:src = "item.img"></image></view> | |
84 | + <view> | |
85 | + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | |
86 | + <view class="D3_list_jDu"> | |
87 | + <view class="D3_list1"> | |
88 | + <c-progress class="c-progress" :inner_widthProp="300"/> | |
89 | + <text>{{details.data.frame_width}}mm</text> | |
90 | + </view> | |
91 | + <view>{{parameter[0].standard}}</view> | |
92 | + </view> | |
93 | + </view> | |
94 | + <view> | |
95 | + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | |
96 | + <view class="D3_list_jDu"> | |
97 | + <view class="D3_list1"> | |
98 | + <c-progress class="c-progress" :inner_widthProp="190"/> | |
99 | + <view>{{details.data.glass_width}}mm</view> | |
100 | + </view> | |
101 | + <view>{{parameter[1].standard}}</view> | |
102 | + </view> | |
103 | + </view> | |
104 | + <view> | |
105 | + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | |
58 | 106 | <view class="D3_list_jDu"> |
59 | - <c-progress class="c-progress" | |
60 | - :percent="item.percent" | |
61 | - :show-slider="false" :width="190" | |
62 | - :standard="item.standard_l" | |
63 | - :stand_width="item.slength" | |
64 | - progressColor="#FF6B4A" | |
65 | - /> | |
66 | - <view>{{item.standard}}</view> | |
107 | + <view class="D3_list1"> | |
108 | + <c-progress class="c-progress" :inner_widthProp="210"/> | |
109 | + <view>{{details.data.glass_height}}mm</view> | |
110 | + </view> | |
111 | + <view>{{parameter[2].standard}}</view> | |
112 | + </view> | |
113 | + </view> | |
114 | + <view> | |
115 | + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | |
116 | + <view class="D3_list_jDu"> | |
117 | + | |
118 | + <view class="D3_list1"> | |
119 | + <c-progress class="c-progress" :inner_widthProp="160"/> | |
120 | + <view>{{details.data.nose_width}}mm</view> | |
121 | + </view> | |
122 | + <view>{{parameter[3].standard}}</view> | |
123 | + </view> | |
124 | + </view> | |
125 | + <view> | |
126 | + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | |
127 | + <view class="D3_list_jDu"> | |
128 | + <view class="D3_list1"> | |
129 | + <c-progress class="c-progress" :inner_widthProp="260"/> | |
130 | + <view>{{details.data.leg_long}}mm</view> | |
131 | + </view> | |
132 | + <view>{{parameter[4].standard}}</view> | |
67 | 133 | </view> |
68 | 134 | </view> |
69 | 135 | <hr/> |
... | ... | @@ -72,11 +138,17 @@ |
72 | 138 | <view class="part"> |
73 | 139 | <view class="size1"> |
74 | 140 | <view class="size1_1">配件</view> |
75 | - <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | |
141 | + <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | |
76 | 142 | </view> |
77 | 143 | <view class="colour_exp">*0290</view> |
78 | 144 | <view class="part_som"> |
79 | - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | |
145 | + <view | |
146 | + v-for="(part) in part" | |
147 | + :key="part.key" | |
148 | + v-bind:class="{'size_viewed': part.is_actived}" | |
149 | + > | |
150 | + <image v-bind:src="part.img"></image> | |
151 | + </view> | |
80 | 152 | </view> |
81 | 153 | </view> |
82 | 154 | </view> |
... | ... | @@ -85,7 +157,7 @@ |
85 | 157 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
86 | 158 | <view class="buy3"> |
87 | 159 | <view class="buy3_1">暂时不选</view> |
88 | - <view class="buy3_2">立即去选</view> | |
160 | + <view class="buy3_2" @click="popArgs">立即去选</view> | |
89 | 161 | </view> |
90 | 162 | </view> |
91 | 163 | <view class="zhanwei"></view> |
... | ... | @@ -94,6 +166,7 @@ |
94 | 166 | </template> |
95 | 167 | <script> |
96 | 168 | import CProgress from '../../components/UniSliper/UniSliper' |
169 | +import store from '@/store' | |
97 | 170 | |
98 | 171 | export default { |
99 | 172 | components: { |
... | ... | @@ -101,56 +174,91 @@ export default { |
101 | 174 | }, |
102 | 175 | data(){ |
103 | 176 | return{ |
104 | - detail:{ | |
105 | - image:'/static/img/detail/sun_glass.png', | |
106 | - name:'商品名称商品名称商品名称商品名称商品名称', | |
107 | - price: 180, | |
108 | - number: 1, | |
109 | - }, | |
110 | - //框架颜色 | |
111 | - colour:[ | |
112 | - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | |
113 | - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | |
114 | - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | |
115 | - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | |
116 | - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | |
117 | - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | |
118 | - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | |
177 | + count: 1, | |
178 | + colour: '1.56非球面防蓝光_亚黑色', | |
179 | + chooseNum : '', | |
180 | + isSplit: '' , | |
181 | + parameter:[ | |
182 | + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | |
183 | + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | |
184 | + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | |
185 | + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | |
186 | + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | |
119 | 187 | ], |
120 | 188 | //镜片颜色 |
121 | - jp:[ | |
122 | - {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
123 | - {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
124 | - {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
125 | - {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
126 | - {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
127 | - {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
128 | - {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
129 | - {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
130 | - {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'} | |
131 | - ], | |
132 | - //规格参数 | |
133 | - parameter:[ | |
134 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | |
135 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | |
136 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | |
137 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | |
138 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | |
189 | + jp_colour:[ | |
190 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
191 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
192 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
193 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
194 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
195 | + {img:'/static/img/detail/Kuang/sun_jp.png'} | |
139 | 196 | ], |
140 | 197 | //配饰 |
141 | 198 | part:[ |
142 | - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | |
143 | - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | |
144 | - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | |
145 | - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | |
146 | - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | |
147 | - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | |
148 | - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | |
149 | - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | |
150 | - | |
199 | + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | |
200 | + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
201 | + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
202 | + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
203 | + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
204 | + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
205 | + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
206 | + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
151 | 207 | ], |
208 | + //折射率 | |
209 | + split:[ | |
210 | + {number: 1.56}, | |
211 | + {number: 1.60}, | |
212 | + {number: 1.67}, | |
213 | + {number: 1.71}, | |
214 | + {number: 1.74} | |
215 | + | |
216 | + ] | |
217 | + } | |
218 | + }, | |
219 | + | |
220 | + computed: { | |
221 | + details(){ | |
222 | + return this.$store.state.detailStandard_k.list | |
223 | + }, | |
224 | + }, | |
225 | + onLoad:function(){ | |
226 | + store.dispatch('detailStandard_k/fetch', { | |
227 | + uid: "1", | |
228 | + pid: "26", | |
229 | + }); | |
230 | + console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); | |
231 | + console.log("ssssssssssssssssssssssssssss") | |
232 | + }, | |
233 | + methods: { | |
234 | + counter(isadd){ | |
235 | + if(isadd){ | |
236 | + this.count++ | |
237 | + }else{ | |
238 | + this.count <= 1? this.disabled = true:this.count-- | |
239 | + } | |
240 | + }, | |
241 | + colourChange(index,e){ | |
242 | + this.colour = e ; //颜色选择 | |
243 | + // console.log(index,e); | |
244 | + | |
245 | + }, | |
246 | + viewChoose(index){ | |
247 | + this.chooseNum = index | |
248 | + }, | |
249 | + splitChoose(index){ | |
250 | + this.isSplit = index | |
251 | + }, | |
252 | + popArgs(){ | |
253 | + uni.navigateTo({ | |
254 | + url: '../detailsChoiceArgs/detailsChoiceArgs', | |
255 | + success: res => {}, | |
256 | + fail: () => {}, | |
257 | + complete: () => {} | |
258 | + }); | |
152 | 259 | } |
153 | 260 | } |
261 | + | |
154 | 262 | } |
155 | 263 | </script> |
156 | 264 | |
... | ... | @@ -166,6 +274,7 @@ hr{ |
166 | 274 | height: 1px; |
167 | 275 | background: #F2F2F2; |
168 | 276 | margin-top: 18px; |
277 | + margin-bottom: 10px; | |
169 | 278 | } |
170 | 279 | .detail{ |
171 | 280 | height: 272rpx; |
... | ... | @@ -178,7 +287,7 @@ hr{ |
178 | 287 | align-items: center; |
179 | 288 | } |
180 | 289 | .detail1{ |
181 | - height: 188rpx; | |
290 | + height: 178rpx; | |
182 | 291 | width: 188rpx; |
183 | 292 | image{ |
184 | 293 | width: 100%; |
... | ... | @@ -189,7 +298,7 @@ hr{ |
189 | 298 | .detail2{ |
190 | 299 | width: 68%; |
191 | 300 | view{ |
192 | - margin-bottom: 8px; | |
301 | + margin-bottom: 6px; | |
193 | 302 | font-family: PingFangSC-Regular; |
194 | 303 | } |
195 | 304 | .detail2_name{ |
... | ... | @@ -197,6 +306,11 @@ hr{ |
197 | 306 | color: #333333; |
198 | 307 | letter-spacing: -0.26px; |
199 | 308 | line-height: 18px; |
309 | + overflow:hidden; | |
310 | + text-overflow:ellipsis; | |
311 | + display:-webkit-box; | |
312 | + -webkit-box-orient:vertical; | |
313 | + -webkit-line-clamp:2; | |
200 | 314 | } |
201 | 315 | .detail2_tui{ |
202 | 316 | font-size: 10px; |
... | ... | @@ -212,6 +326,24 @@ hr{ |
212 | 326 | letter-spacing: -0.26px; |
213 | 327 | } |
214 | 328 | } |
329 | +.counter{ | |
330 | + display: flex; | |
331 | + flex-direction: row; | |
332 | + justify-content: space-between; | |
333 | + font-size: 28rpx; | |
334 | + color: #333333; | |
335 | + width: 122rpx; | |
336 | + float: right; | |
337 | + .btn{ | |
338 | + display: flex; | |
339 | + justify-content: center; | |
340 | + line-height: 32rpx; | |
341 | + height: 32rpx; | |
342 | + width: 32rpx; | |
343 | + background-color: #F2F2F2; | |
344 | + color: #CFCFCF; | |
345 | + } | |
346 | +} | |
215 | 347 | .choose{ |
216 | 348 | background: #FFFFFF; |
217 | 349 | padding: 16px; |
... | ... | @@ -233,6 +365,13 @@ hr{ |
233 | 365 | width: 40rpx; |
234 | 366 | height: 36rpx; |
235 | 367 | } |
368 | + .colour1_span2{ | |
369 | + font-family: PingFangSC-Regular; | |
370 | + font-size: 12px; | |
371 | + color: #666666; | |
372 | + margin-left: 10px; | |
373 | + font-weight: normal | |
374 | + } | |
236 | 375 | } |
237 | 376 | .colour_exp{ |
238 | 377 | font-family: PingFangSC-Regular; |
... | ... | @@ -248,94 +387,61 @@ hr{ |
248 | 387 | justify-content: space-between ; |
249 | 388 | grid-row-gap: 10px; |
250 | 389 | margin-bottom: 14px; |
251 | - view{ | |
390 | + .colour2_view{ | |
252 | 391 | border: 1px solid #F2F2F2; |
253 | 392 | image{ |
254 | - width: 100%; | |
255 | - height: 100%; | |
393 | + width: 100rpx; | |
394 | + height: 60rpx; | |
256 | 395 | } |
257 | 396 | } |
258 | - view:hover{ | |
397 | + .colour2_viewed{ | |
259 | 398 | border: 1px solid #FF6B4A; |
399 | + image{ | |
400 | + width: 100rpx; | |
401 | + height: 60rpx; | |
402 | + } | |
260 | 403 | } |
261 | 404 | } |
262 | 405 | } |
263 | 406 | .jp_colour2{ |
264 | - display: grid; | |
265 | - grid-template-columns: repeat(6, 12%); | |
266 | - grid-row-gap: 10px; | |
267 | - grid-column-gap: 6px; | |
268 | - margin-bottom: 14px; | |
269 | - view{ | |
407 | + display: grid; | |
408 | + grid-template-columns: repeat(5, 13%); | |
409 | + justify-content: start ; | |
410 | + grid-column-gap: 10px; | |
411 | + grid-row-gap: 10px; | |
412 | + margin-bottom: 14px; | |
413 | + .jp_colour2_view{ | |
270 | 414 | border: 1px solid #F2F2F2; |
271 | - height: 80rpx; | |
272 | 415 | image{ |
273 | - width: 100%; | |
274 | - height: 100%; | |
416 | + width: 80rpx; | |
417 | + height: 80rpx; | |
275 | 418 | } |
276 | 419 | } |
277 | - view:hover{ | |
278 | - border: 1px solid #FF6B4A; | |
279 | - } | |
280 | -} | |
281 | -.split1{ | |
282 | - span{ | |
283 | - font-family: PingFangSC-Medium; | |
284 | - font-size: 16px; | |
285 | - color: #333333; | |
286 | - letter-spacing: -0.3px; | |
287 | - text-align: justify; | |
288 | - line-height: 24px; | |
289 | - font-weight: bold; | |
290 | - margin-right:8px; | |
291 | - } | |
292 | - .split1_span{ | |
293 | - font-family: PingFangSC-Regular; | |
294 | - font-size: 10px; | |
295 | - color: #999999; | |
296 | - letter-spacing: -0.3px; | |
297 | - font-weight:normal; | |
298 | - } | |
299 | - image{ | |
300 | - float: right; | |
301 | - width: 40rpx; | |
302 | - height: 36rpx; | |
303 | - } | |
304 | 420 | } |
305 | -.split2{ | |
306 | - margin-bottom: 12px; | |
307 | - .split2_number{ | |
421 | +.split{ | |
422 | + display: grid; | |
423 | + grid-template-columns: repeat(2, 45%); | |
424 | + grid-column-gap: 10px; | |
425 | + grid-row-gap: 10px; | |
426 | + margin-top: 10px ; | |
427 | + .split_colour2{ | |
428 | + display: flex; | |
429 | + justify-content: center; | |
430 | + align-items: center; | |
431 | + width: 300rpx; | |
432 | + height: 60rpx; | |
433 | + background: #F2F2F2; | |
434 | + border-radius: 2px; | |
308 | 435 | font-family: PingFangSC-Regular; |
309 | - font-size: 10px; | |
310 | - color: #999999; | |
311 | - letter-spacing: -0.19px; | |
312 | - margin-bottom: 6px; | |
436 | + font-size: 12px; | |
437 | + color: #666666; | |
438 | + letter-spacing: 0; | |
439 | + text-align: center; | |
313 | 440 | } |
314 | - .split2_choose{ | |
315 | - display: flex; | |
316 | - view{ | |
317 | - display: flex; | |
318 | - justify-content: center; | |
319 | - align-items: center; | |
320 | - font-family: PingFangSC-Regular; | |
321 | - font-size: 12px; | |
322 | - color: #666666; | |
323 | - background: #F2F2F2; | |
324 | - width: 100rpx; | |
325 | - height: 60rpx; | |
326 | - border-radius: 2px; | |
327 | - margin-right: 10px; | |
328 | - } | |
329 | - view:hover{ | |
330 | - color: #FF6B4A; | |
331 | - background: rgba(255,107,74,0.15); | |
332 | - } | |
333 | - .split2_tui{ | |
334 | - width: 186rpx; | |
335 | - height: 60rpx; | |
336 | - } | |
441 | + .split_colour2_actived{ | |
442 | + background: rgba(255,107,74,0.15); | |
443 | + color: #FF6B4A; | |
337 | 444 | } |
338 | - | |
339 | 445 | } |
340 | 446 | .size,.part{ |
341 | 447 | margin-top:14px; |
... | ... | @@ -413,6 +519,9 @@ hr{ |
413 | 519 | color: #999999; |
414 | 520 | letter-spacing: -0.19px; |
415 | 521 | } |
522 | + .D3_list1{ | |
523 | + display: flex; | |
524 | + } | |
416 | 525 | } |
417 | 526 | } |
418 | 527 | .part{ |
... | ... | @@ -430,13 +539,19 @@ hr{ |
430 | 539 | height: 100%; |
431 | 540 | } |
432 | 541 | } |
433 | - view:hover{ | |
542 | + .size_viewed{ | |
434 | 543 | border: 1px solid #FF6B4A; |
544 | + height: 72rpx; | |
545 | + image{ | |
546 | + width: 100%; | |
547 | + height: 100%; | |
548 | + } | |
435 | 549 | } |
436 | 550 | } |
437 | 551 | } |
552 | + | |
438 | 553 | .buy{ |
439 | - height: 280rpx; | |
554 | + height: 300rpx; | |
440 | 555 | background: #FFFFFF ; |
441 | 556 | margin-top: 10px; |
442 | 557 | border-radius: 8px; |
... | ... | @@ -502,5 +617,4 @@ hr{ |
502 | 617 | font-size: 16px; |
503 | 618 | } |
504 | 619 | } |
505 | - | |
506 | 620 | </style> |
507 | 621 | \ No newline at end of file | ... | ... |
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
... | ... | @@ -16,12 +16,6 @@ |
16 | 16 | </view> |
17 | 17 | </view> |
18 | 18 | <view class="goods-data"> |
19 | - <!-- 实用功能折叠框 --> | |
20 | - <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> | |
21 | - <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> | |
22 | - <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> | |
23 | - <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> | |
24 | - | |
25 | 19 | <view class="opCollapse"> |
26 | 20 | <view class="head"> |
27 | 21 | <view v-if="!opIsOpen">填写验光数据</view> |
... | ... | @@ -157,7 +151,11 @@ |
157 | 151 | </template> |
158 | 152 | </view> |
159 | 153 | </view> |
160 | - | |
154 | + <!-- 实用功能折叠框 --> | |
155 | + <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> | |
156 | + <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> | |
157 | + <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> | |
158 | + <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> | |
161 | 159 | </view> |
162 | 160 | <view class="submit">立即结算</view> |
163 | 161 | </view> | ... | ... |
src/pages/frameDetail/frameDetail.vue
... | ... | @@ -1,617 +0,0 @@ |
1 | -<template> | |
2 | - <view class="container"> | |
3 | - <view class="D1"> | |
4 | - <!-- 轮播图 --> | |
5 | - <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > | |
6 | - <swiper-item v-for="(item) in infos" :key="item.goods_id"> | |
7 | - <image :src="item.img" mode="scaleToFill"></image> | |
8 | - </swiper-item> | |
9 | - </swiper> | |
10 | - <view class="D1_price">¥{{price}}</view> | |
11 | - <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> | |
12 | - <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> | |
13 | - </view> | |
14 | - <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4"> | |
15 | - <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view> | |
16 | - <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view> | |
17 | - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
18 | - </view> | |
19 | - <view class="D2" v-if="updateGoodType == 1"> | |
20 | - <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view> | |
21 | - <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view> | |
22 | - <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
23 | - </view> | |
24 | - <view class="D2" v-if="updateGoodType == 3"> | |
25 | - <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view> | |
26 | - <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view> | |
27 | - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
28 | - </view> | |
29 | - | |
30 | - <view class="D3"> | |
31 | - <view class="screenBar"> | |
32 | - <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > | |
33 | - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | |
34 | - </view> | |
35 | - </view> | |
36 | - <view class="screen-item " v-if="current ===0"> | |
37 | - <view class="D3_list"> | |
38 | - <view v-for="(item) in parameter" :key="item.key"> | |
39 | - <image class="D3_image" v-bind:src = "item.img"></image> | |
40 | - <span>{{item.standard}}</span> | |
41 | - <span>{{item.slength}}</span> | |
42 | - </view> | |
43 | - </view> | |
44 | - </view > | |
45 | - <view class="screen-item " v-if="current ===1"> | |
46 | - <view class="D3_list"> | |
47 | - <view>主体</view> | |
48 | - <view>商品产地:韩国</view> | |
49 | - <view>包装清单:彩色隐形 * 1</view> | |
50 | - </view> | |
51 | - </view > | |
52 | - <view class="screen-item " v-if="current ===2"> | |
53 | - <view class="customerService"> | |
54 | - <view class="serviceItem" > | |
55 | - <view class="title"> | |
56 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
57 | - <text class="titleText">卖家服务</text> | |
58 | - </view> | |
59 | - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> | |
60 | - </view> | |
61 | - <view class="serviceItem" > | |
62 | - <view class="title"> | |
63 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
64 | - <text class="titleText">平台承诺</text> | |
65 | - </view> | |
66 | - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> | |
67 | - </view> | |
68 | - <view class="serviceItem"> | |
69 | - <view class="title"> | |
70 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
71 | - <text class="titleText">正品保证</text> | |
72 | - </view> | |
73 | - <view class="itemContent">向您保证所售商品均为正品行货</view> | |
74 | - </view> | |
75 | - <view class="serviceItem2"> | |
76 | - <view class="title"> | |
77 | - <text class="titleText">权利申明</text> | |
78 | - </view> | |
79 | - <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> | |
80 | - </view> | |
81 | - <view class="serviceItem2"> | |
82 | - <view class="title"> | |
83 | - <text class="titleText">价格保证</text> | |
84 | - </view> | |
85 | - <view class="itemContent"> | |
86 | - <view class="itemContent-child"> | |
87 | - <text class="contentTitle">平台价:</text> | |
88 | - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
89 | - </view> | |
90 | - <view class="itemContent-child"> | |
91 | - <text class="contentTitle">划线价:</text> | |
92 | - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
93 | - </view> | |
94 | - <view class="itemContent-child"> | |
95 | - <text class="contentTitle">平折扣:</text> | |
96 | - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
97 | - </view> | |
98 | - <view class="itemContent-child"> | |
99 | - <text class="contentTitle">异常问题:</text> | |
100 | - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
101 | - </view> | |
102 | - | |
103 | - </view> | |
104 | - </view> | |
105 | - </view> | |
106 | - </view > | |
107 | - </view> | |
108 | - <view class="D4" v-if="current !==2"> | |
109 | - <view class="D4_esvalue"> | |
110 | - <view>{{esvalue}}</view> | |
111 | - <view class="D4_2"> | |
112 | - <view class="star" v-for="o in starCount" :key="o"> | |
113 | - <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> | |
114 | - </view> | |
115 | - </view> | |
116 | - </view> | |
117 | - <view class="D4_list"> | |
118 | - <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> | |
119 | - </view> | |
120 | - </view> | |
121 | - <view class="D5" v-if="current !==2"> | |
122 | - <view class="D5_fixed1"> | |
123 | - <image src="/static/img/detail/hr.png"></image> | |
124 | - <view>商品详细</view> | |
125 | - <image src="/static/img/detail/hr.png"></image> | |
126 | - </view> | |
127 | - <view class="D5_all"> | |
128 | - <image v-bind:src="imgAll"></image> | |
129 | - </view> | |
130 | - <view class="D5_photoes"> | |
131 | - <view class="D5_photoes1"> | |
132 | - <view v-for="(photoes) in photoes" :key="photoes.value"> | |
133 | - <image v-bind:src = "photoes.img"></image> | |
134 | - <view>{{photoes.value}}</view> | |
135 | - </view> | |
136 | - </view> | |
137 | - <view class="D5_logo1">帕森防蓝光镜片</view> | |
138 | - <view class="D5_logo2">健康护眼,我们是认真的!</view> | |
139 | - <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> | |
140 | - </view> | |
141 | - </view> | |
142 | - <view class="D6" v-if="current !==2"> | |
143 | - <view class="D6_v1">CHARM DETAIL</view> | |
144 | - <view class="D6_v2">细节展示</view> | |
145 | - <view ><image v-bind:src="imgDetail"></image></view> | |
146 | - <view>........................................................................</view> | |
147 | - <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> | |
148 | - </view> | |
149 | - | |
150 | - <!-- 底部菜单 --> | |
151 | - <view class="botton"> | |
152 | - <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> | |
153 | - <view class="botton_2"> | |
154 | - <view class="botton_input">加入购物车</view> | |
155 | - <view class="botton_now" @click="goPerchase">立即购买</view> | |
156 | - </view> | |
157 | - </view> | |
158 | - </view> | |
159 | -</template> | |
160 | - | |
161 | -<script> | |
162 | -import store from '@/store'; | |
163 | -export default { | |
164 | - data(){ | |
165 | - return { | |
166 | - name:'商品名称', | |
167 | - goodType:2, | |
168 | - price: 120, | |
169 | - number: 391, | |
170 | - screenItems: [ | |
171 | - {current:0,text:'商品保障'}, | |
172 | - {current:1,text:'规格参数'}, | |
173 | - {current:2,text:'售后保障'}, | |
174 | - ], | |
175 | - current: 0, | |
176 | - starCount:5, | |
177 | - infos: [ | |
178 | - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | |
179 | - { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | |
180 | - { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | |
181 | - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | |
182 | - ], | |
183 | - parameter:[ | |
184 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, | |
185 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, | |
186 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, | |
187 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, | |
188 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, | |
189 | - {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} | |
190 | - ], | |
191 | - assess:[ | |
192 | - {key: 0, Iassess: '价格实惠'}, | |
193 | - {key: 1, Iassess: '美观大方'}, | |
194 | - {key: 2, Iassess: '易搭配'} | |
195 | - ], | |
196 | - esvalue:'宝贝好评率 100%', | |
197 | - introduction:{ | |
198 | - material:'钛合金', | |
199 | - func:'抗疲劳/防辐射', | |
200 | - rate: 1.6 | |
201 | - }, | |
202 | - imgAll:'/static/img/detail/d8.png' , | |
203 | - photoes:[ | |
204 | - {value:'日常办公', img:'/static/img/detail/d9.png'}, | |
205 | - {value:'上网', img:'/static/img/detail/d10.png'}, | |
206 | - {value:'追剧', img:'/static/img/detail/d11.png'}, | |
207 | - {value:'玩游戏', img:'/static/img/detail/d12.png'}, | |
208 | - ], | |
209 | - imgDetail:'/static/img/detail/d13.png', | |
210 | - imgShop:{ | |
211 | - img:'/static/tab-cart.png', | |
212 | - IsShown: false | |
213 | - } | |
214 | - } | |
215 | - }, | |
216 | - onLoad:function(option){ | |
217 | - this.goodType = option.goodType | |
218 | - // console.log(this.updateGoodType) | |
219 | - store.dispatch('read/fetch'); | |
220 | - }, | |
221 | - computed:{ | |
222 | - updateGoodType(){ | |
223 | - return this.goodType | |
224 | - }, | |
225 | - goodInfo() { | |
226 | - console.log(this.$store.state.read.goodInfo) | |
227 | - return this.$store.state.read.goodInfo; | |
228 | - }, | |
229 | - }, | |
230 | - methods:{ | |
231 | - goPerchase(){ | |
232 | - switch(this.updateGoodType){ | |
233 | - case '1': | |
234 | - uni.navigateTo({ | |
235 | - url: '../detailsChoiceArgs/detailsChoiceArgs', | |
236 | - success: res => {}, | |
237 | - fail: () => {}, | |
238 | - complete: () => {} | |
239 | - }); | |
240 | - break; | |
241 | - case '2': | |
242 | - uni.navigateTo({ | |
243 | - url: `../detailStandard/detailStandard_k`, | |
244 | - success: res => {}, | |
245 | - fail: () => {}, | |
246 | - complete: () => {} | |
247 | - }); | |
248 | - break; | |
249 | - case '3': | |
250 | - uni.navigateTo({ | |
251 | - url: `../purchaseLenses/purchaseLenses`, | |
252 | - success: res => {}, | |
253 | - fail: () => {}, | |
254 | - complete: () => {} | |
255 | - }); | |
256 | - break; | |
257 | - case '4': | |
258 | - uni.navigateTo({ | |
259 | - url: `../detailStandard/detailStandard_sun`, | |
260 | - success: res => {}, | |
261 | - fail: () => {}, | |
262 | - complete: () => {} | |
263 | - }); | |
264 | - break; | |
265 | - default : | |
266 | - break | |
267 | - } | |
268 | - }, | |
269 | - tabChange(e) { | |
270 | - if (this.current !== e) { | |
271 | - this.current = e; | |
272 | - } | |
273 | - } | |
274 | - } | |
275 | -} | |
276 | -</script> | |
277 | -<style lang='scss'> | |
278 | - .container{ | |
279 | - background-color:#f8f8f8 ; | |
280 | - } | |
281 | - .D1,.D2,.D3,.D4,.D6{ | |
282 | - background: #ffffff; | |
283 | - margin-bottom: 10px; | |
284 | - padding:8px 20px 8px 20px; | |
285 | - box-sizing: border-box; | |
286 | - .swiperImage { | |
287 | - width: 684rpx; | |
288 | - height: 512rpx; | |
289 | - image { | |
290 | - width: 100%; | |
291 | - height: 100%; | |
292 | - border-radius: 16rpx; | |
293 | - } | |
294 | - } | |
295 | - } | |
296 | - .D5{ | |
297 | - background: #ffffff; | |
298 | - padding:8px 20px 8px 20px; | |
299 | - box-sizing: border-box; | |
300 | - } | |
301 | - .swiperImage{ | |
302 | - width: 100%; | |
303 | - height: 560rpx; | |
304 | - .swiper-item{ | |
305 | - width: 100%; | |
306 | - image{ | |
307 | - width: 100%; | |
308 | - } | |
309 | - } | |
310 | - } | |
311 | - .D1{ | |
312 | - .D1_price{ | |
313 | - color: #EB5D3B; | |
314 | - font-size: 18px; | |
315 | - margin-top: 5px; | |
316 | - font-family: 'PingFangSC-Semibold'; | |
317 | - } | |
318 | - .D1_name{ | |
319 | - font-size: 16px; | |
320 | - font-family: 'PingFangSC-Semibold'; | |
321 | - margin-top: 5px; | |
322 | - display: flex; | |
323 | - justify-content: space-between; | |
324 | - .D1_name1{ | |
325 | - font-weight: bold; | |
326 | - font-size: 16px; | |
327 | - color: #333333; | |
328 | - } | |
329 | - .D1_number{ | |
330 | - color: #999999 ; | |
331 | - font-size: 14px; | |
332 | - font-family: 'PingFangSC-Regular'; | |
333 | - } | |
334 | - } | |
335 | - .D1_spans{ | |
336 | - font-size: 10px; | |
337 | - color:#999999; | |
338 | - margin-top: 5px; | |
339 | - span{ | |
340 | - height: 14px; | |
341 | - margin-right: 10px; | |
342 | - } | |
343 | - } | |
344 | - | |
345 | - } | |
346 | - .D2{ | |
347 | - font-size: 14px; | |
348 | - font-family: 'PingFangSC-Regular'; | |
349 | - view{ | |
350 | - height: 24px; | |
351 | - } | |
352 | - .D2_span1{ | |
353 | - color: #999999; | |
354 | - } | |
355 | - .D2_span2{ | |
356 | - color: #333333; | |
357 | - } | |
358 | - } | |
359 | - .D3{ | |
360 | - .screenBar{ | |
361 | - width: 670rpx; | |
362 | - margin-top: 20rpx; | |
363 | - margin-bottom: 24rpx; | |
364 | - display: flex; | |
365 | - flex-direction: row; | |
366 | - justify-content: space-between; | |
367 | - align-items: center; | |
368 | - font-size: 14px; | |
369 | - color: #333333; | |
370 | - transition:all 0.2s; | |
371 | - } | |
372 | - .screen-item{ | |
373 | - font-size: 32rpx; | |
374 | - color: #333333; | |
375 | - display: flex; | |
376 | - transition:all 0.2s; | |
377 | - .D3_list{ | |
378 | - margin-bottom: 4px; | |
379 | - } | |
380 | - .D3_list view{ | |
381 | - display: flex; | |
382 | - align-content: center; | |
383 | - font-size: 14px; | |
384 | - color: #333333; | |
385 | - } | |
386 | - .D3_list image{ | |
387 | - width: 50px; | |
388 | - height: 25px; | |
389 | - margin-right: 6px; | |
390 | - } | |
391 | - .D3_list span{ | |
392 | - margin-left: 6px; | |
393 | - margin-right: 5px; | |
394 | - font-family: 'PingFangSC-Regular'; | |
395 | - } | |
396 | - } | |
397 | - .active{ | |
398 | - border-bottom: 4rpx solid #FF6B4A; | |
399 | - } | |
400 | - .customerService{ | |
401 | - margin-bottom: 90rpx; | |
402 | - .serviceItem{ | |
403 | - margin-bottom: 32rpx; | |
404 | - .title{ | |
405 | - display: flex;flex-direction: row; | |
406 | - align-items: center; | |
407 | - .titleText{ | |
408 | - font-size: 14px; | |
409 | - color: #333333; | |
410 | - margin-bottom: 12rpx; | |
411 | - } | |
412 | - } | |
413 | - .itemContent{ | |
414 | - font-size: 14px; | |
415 | - color: #999999; | |
416 | - margin-left: 18rpx; | |
417 | - } | |
418 | - } | |
419 | - .serviceItem2{ | |
420 | - margin-left: 18rpx; | |
421 | - margin-bottom: 32rpx; | |
422 | - .titleText{ | |
423 | - font-size: 14px; | |
424 | - color: #FF6B4A; | |
425 | - } | |
426 | - .itemContent{ | |
427 | - font-size: 14px; | |
428 | - color: #999999; | |
429 | - .itemContent-child{ | |
430 | - margin-bottom: 40rpx; | |
431 | - .contentTitle{ | |
432 | - border-bottom: 1px solid #FF6B4A; | |
433 | - } | |
434 | - } | |
435 | - } | |
436 | - } | |
437 | - } | |
438 | - } | |
439 | - .D4{ | |
440 | - .D4_esvalue{ | |
441 | - font-size: 14px; | |
442 | - color: #333333; | |
443 | - display: flex; | |
444 | - justify-content: space-between; | |
445 | - margin-bottom: 10px; | |
446 | - .D4_2{ | |
447 | - width: 90px; | |
448 | - display: flex; | |
449 | - align-items: center; | |
450 | - justify-content: space-between; | |
451 | - } | |
452 | - } | |
453 | - .D4_esvalue view{ | |
454 | - font-size: 14px; | |
455 | - color: #333333; | |
456 | - font-weight: bold; | |
457 | - } | |
458 | - .D4_list view{ | |
459 | - display: inline-block; | |
460 | - font-size: 12px; | |
461 | - text-align: center; | |
462 | - margin-right: 12px; | |
463 | - width: 90px; | |
464 | - height: 24px; | |
465 | - line-height: 24px; | |
466 | - background: #F2F2F2; | |
467 | - color: #666666 ; | |
468 | - } | |
469 | - } | |
470 | - .D5{ | |
471 | - .D5_fixed1{ | |
472 | - display: flex; | |
473 | - justify-content: space-between; | |
474 | - align-content: center; | |
475 | - margin-bottom: 12px; | |
476 | - view{ | |
477 | - font-size: 14px; | |
478 | - color: #333333; | |
479 | - font-weight: bold; | |
480 | - font-family: 'PingFangSC-Medium'; | |
481 | - line-height: 24px; | |
482 | - } | |
483 | - image{ | |
484 | - width: 240rpx; | |
485 | - height: 3px; | |
486 | - margin-top: 10px; | |
487 | - } | |
488 | - } | |
489 | - .D5_all { | |
490 | - width: 100%; | |
491 | - height: 380px; | |
492 | - margin-bottom: 30px; | |
493 | - font-family: 'PingFangSC-Regular'; | |
494 | - border: #999999 solid 1.5px; | |
495 | - image{ | |
496 | - width: 100%; | |
497 | - height: 380px; | |
498 | - }} | |
499 | - .D5_photoes1{ | |
500 | - display: grid; | |
501 | - grid-template-columns: 48% 48%; | |
502 | - grid-row-gap: 10px; | |
503 | - grid-column-gap: 4%; | |
504 | - image{ | |
505 | - width: 100%; | |
506 | - height: 70px; | |
507 | - } | |
508 | - view{ | |
509 | - width: 100%; | |
510 | - font-size: 14px; | |
511 | - text-align: center; | |
512 | - background: #949494; | |
513 | - font-family: 'PingFangSC-Regular'; | |
514 | - color: #ffffff; | |
515 | - view{ | |
516 | - height: 24px; | |
517 | - line-height: 24px; | |
518 | - } | |
519 | - } | |
520 | - } | |
521 | - .D5_logo1,.D5_logo2{ | |
522 | - text-align: center; | |
523 | - } | |
524 | - .D5_logo1{ | |
525 | - margin-top: 40px; | |
526 | - font-size: 24px; | |
527 | - font-weight: bold; | |
528 | - font-family: 'PingFangSC-Semibold'; | |
529 | - } | |
530 | - .D5_logo2{ | |
531 | - font-size: 12px; | |
532 | - } | |
533 | - .D5_logo3{ | |
534 | - width: 100%; | |
535 | - text-align: center; | |
536 | - image{ | |
537 | - width: 50px; | |
538 | - height: 24px; | |
539 | - } | |
540 | - } | |
541 | - } | |
542 | - .D6{ | |
543 | - width: 100%; | |
544 | - height: 430px; | |
545 | - background: #F9F6ED; | |
546 | - margin-bottom: 74px; | |
547 | - view{ | |
548 | - text-align: center; | |
549 | - } | |
550 | - .D6_v1{ | |
551 | - font-weight: bold; | |
552 | - } | |
553 | - .D6_v2{ | |
554 | - font-size: 14px; | |
555 | - margin-bottom: 30px; | |
556 | - } | |
557 | - .D6_v5{ | |
558 | - .D6_v5_s1{ | |
559 | - font-weight: bold; | |
560 | - } | |
561 | - .D6_v5_s2{ | |
562 | - font-size: 14px; | |
563 | - } | |
564 | - } | |
565 | - } | |
566 | - .botton{ | |
567 | - position: fixed; | |
568 | - bottom: 0; | |
569 | - height: 74px; | |
570 | - width: 100%; | |
571 | - background: #FFFFFF; | |
572 | - padding: 20px 20px 8px 20px; | |
573 | - font-family: 'PingFangSC-Regular'; | |
574 | - box-sizing: border-box; | |
575 | - display: flex; | |
576 | - justify-content: space-between; | |
577 | - align-content: center; | |
578 | - .botton_1{ | |
579 | - width: 20%; | |
580 | - height: 100%; | |
581 | - text-align: center; | |
582 | - color: #989898; | |
583 | - } | |
584 | - image{ | |
585 | - width: 60%; | |
586 | - height: 30px; | |
587 | - } | |
588 | - .botton_image{ | |
589 | - font-size: 12px; | |
590 | - text-align: center; | |
591 | - } | |
592 | - .botton_2{ | |
593 | - width: 74%; | |
594 | - height: 86%; | |
595 | - display: grid; | |
596 | - grid-template-columns: 50% 50%; | |
597 | - } | |
598 | - .botton_input{ | |
599 | - display: inline-flex; | |
600 | - align-items: center; | |
601 | - justify-content: space-around; | |
602 | - background: #FFF0EC; | |
603 | - font-size: 16px; | |
604 | - color: #FF6B4A; | |
605 | - border-radius: 20px 0 0 20px; | |
606 | - } | |
607 | - .botton_now{ | |
608 | - display: inline-flex; | |
609 | - align-items: center; | |
610 | - justify-content: space-around; | |
611 | - background: #FF6B4A; | |
612 | - font-size: 16px; | |
613 | - color: #FFFFFF; | |
614 | - border-radius:0 20px 20px 0; | |
615 | - } | |
616 | - } | |
617 | -</style> | |
618 | 0 | \ No newline at end of file |
src/pages/index/index.vue
... | ... | @@ -4,11 +4,17 @@ |
4 | 4 | <!-- 搜索--> |
5 | 5 | <view class="searchBar"> |
6 | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
7 | - <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> | |
7 | + <input | |
8 | + v-model="searchText" | |
9 | + class="searchIpt" | |
10 | + placeholder="老花镜" | |
11 | + confirm-type="search" | |
12 | + @blur="searchKey" | |
13 | + /> | |
8 | 14 | </view> |
9 | 15 | |
10 | 16 | <!-- 筛选栏--> |
11 | - <view class="screenBar"> | |
17 | + <!-- <view class="screenBar"> | |
12 | 18 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> |
13 | 19 | <view |
14 | 20 | class="screenItem" |
... | ... | @@ -35,7 +41,7 @@ |
35 | 41 | >{{ item.text }}</view> |
36 | 42 | </view> |
37 | 43 | </view> |
38 | - </view> | |
44 | + </view>--> | |
39 | 45 | </view> |
40 | 46 | <Uni-drawer |
41 | 47 | ref="showRight" |
... | ... | @@ -55,11 +61,12 @@ |
55 | 61 | <!-- 筛选菜单--> |
56 | 62 | <view class="content-wrap"> |
57 | 63 | <view> |
58 | - <HMfilterDropdown | |
59 | - :filterData="filterData" | |
64 | + <HMfilterDropdown | |
65 | + :filterData="categoryList" | |
60 | 66 | :defaultSelected="filterDropdownValue" |
61 | 67 | :updateMenuName="true" |
62 | - @confirm="confirm" | |
68 | + @search="search" | |
69 | + @getList="getList" | |
63 | 70 | data-format="Object" |
64 | 71 | ></HMfilterDropdown> |
65 | 72 | <!-- 商品列表 --> |
... | ... | @@ -91,20 +98,21 @@ export default { |
91 | 98 | }, |
92 | 99 | data() { |
93 | 100 | return { |
94 | - screenItems: [ | |
95 | - { current: 0, text: "全部", hasIcon: false }, | |
96 | - { current: 1, text: "销量", hasIcon: false }, | |
97 | - { current: 2, text: "价格", hasIcon: true }, | |
98 | - { current: 3, text: "折扣", hasIcon: false }, | |
99 | - { current: 4, text: "筛选", hasIcon: true } | |
100 | - ], | |
101 | - current: 0, | |
102 | - showRight: false, | |
101 | + // screenItems: [ | |
102 | + // { current: 0, text: "全部", hasIcon: false }, | |
103 | + // { current: 1, text: "销量", hasIcon: false }, | |
104 | + // { current: 2, text: "价格", hasIcon: true }, | |
105 | + // { current: 3, text: "折扣", hasIcon: false }, | |
106 | + // { current: 4, text: "筛选", hasIcon: true } | |
107 | + // ], | |
108 | + // current: 0, | |
109 | + // showRight: false, | |
103 | 110 | indexArr: "", |
104 | 111 | valueArr: "", |
105 | 112 | loadingText: "~~到底了~~", |
106 | 113 | filterDropdownValue: [], |
107 | 114 | filterData: [], |
115 | + searchText: '', | |
108 | 116 | // goodsList:[ |
109 | 117 | // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, |
110 | 118 | // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, |
... | ... | @@ -120,62 +128,12 @@ export default { |
120 | 128 | }; |
121 | 129 | }, |
122 | 130 | computed: { |
123 | - goodsList() { | |
124 | - // 也可以从 getters 获取 | |
125 | - return this.$store.state.test.list; | |
126 | - }, | |
131 | + goodsList() { | |
132 | + // 也可以从 getters 获取 | |
133 | + return this.$store.state.index.list; | |
134 | + }, | |
127 | 135 | categoryList(){ |
128 | - // console.log(this.$store.state.categoryOrder.categoryList); | |
129 | - const categoryList = this.$store.state.categoryOrder.categoryList | |
130 | - let newData = [ | |
131 | - { | |
132 | - "name":'产品', | |
133 | - "type": 'filter', | |
134 | - "submenu": [{ | |
135 | - "submenu": [ | |
136 | - | |
137 | - ] | |
138 | - }, | |
139 | - ], | |
140 | - }, | |
141 | - { | |
142 | - "name":'品牌', | |
143 | - "type": 'filter', | |
144 | - "submenu": [{ | |
145 | - "submenu": [ | |
146 | - ] | |
147 | - }, | |
148 | - ] | |
149 | - }, | |
150 | - { | |
151 | - "name":'使用场景', | |
152 | - "type": 'filter', | |
153 | - "submenu": [{ | |
154 | - "submenu": [ | |
155 | - ] | |
156 | - } | |
157 | - ] | |
158 | - }, | |
159 | - { | |
160 | - "name":'材质', | |
161 | - "type": 'filter', | |
162 | - "submenu": [{ | |
163 | - "submenu": [ | |
164 | - ] | |
165 | - } | |
166 | - ] | |
167 | - }, | |
168 | - { | |
169 | - "name":'筛选', | |
170 | - "type": 'filter', | |
171 | - "submenu": [{ | |
172 | - // "name": "折扣(多选)", | |
173 | - "submenu": [ | |
174 | - ] | |
175 | - } | |
176 | - ] | |
177 | - } | |
178 | - ] | |
136 | + return this.$store.state.index.categoryList; | |
179 | 137 | // newData[0].submenu[0].submenu = categoryList[0].submenu |
180 | 138 | // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu |
181 | 139 | // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu |
... | ... | @@ -183,26 +141,29 @@ export default { |
183 | 141 | // newData[4].submenu[0] = categoryList[3] |
184 | 142 | this.filterData = newData; |
185 | 143 | // this.filterData = categoryList; |
186 | - } | |
187 | - | |
144 | + }, | |
188 | 145 | }, |
189 | 146 | filters: { |
190 | 147 | outData(value) { |
191 | 148 | return JSON.stringify(value); |
192 | 149 | } |
193 | 150 | }, |
194 | - onLoad: function() { | |
195 | - store.dispatch('test/fetch'); | |
196 | - store.dispatch('categoryOrder/fetch') | |
197 | - | |
198 | - // 登陆 | |
199 | - // store.dispatch('user/login') | |
200 | - | |
151 | + onLoad() { | |
152 | + console.log('onload') | |
153 | + store.dispatch('index/category'); | |
154 | + // this.getList(); | |
155 | + store.dispatch('index/list'); | |
201 | 156 | }, |
202 | 157 | methods: { |
203 | 158 | showDrawer(e) { |
204 | 159 | this.$refs[e].open(); |
205 | 160 | }, |
161 | + getList() { | |
162 | + store.dispatch('index/list'); | |
163 | + }, | |
164 | + // search(params) { | |
165 | + // this.$store.index. | |
166 | + // }, | |
206 | 167 | closeDrawer(e) { |
207 | 168 | this.$refs[e].close(); |
208 | 169 | }, |
... | ... | @@ -217,16 +178,35 @@ export default { |
217 | 178 | dropDown() { |
218 | 179 | console.log("下拉"); |
219 | 180 | }, |
181 | + searchKey(e) { | |
182 | + const { value: keyword } = e.detail; | |
183 | + this.keyWords = keyword; | |
184 | + console.log('e', e, keyword); | |
185 | + store.dispatch('index/search', { | |
186 | + params: {}, | |
187 | + keyword, | |
188 | + }); | |
189 | + }, | |
220 | 190 | //接收菜单结果 |
221 | - confirm(e) { | |
222 | - this.indexArr = e.index; | |
223 | - this.valueArr = e.value; | |
224 | - return; | |
225 | - console.log("修改菜单"); | |
226 | - this.filterData[4].submenu[1] = { | |
227 | - name: "项目2", | |
228 | - submenu: [] | |
229 | - }; | |
191 | + search(e) { | |
192 | + console.log("修改菜单-----", e, this.categoryList); | |
193 | + const { on, value, index } = e; | |
194 | + let params = {} | |
195 | + if(on[0] === 1) { | |
196 | + this.searchText = ''; | |
197 | + store.dispatch('index/list'); | |
198 | + } else { | |
199 | + for(let i = 1; i<=on.length; i++){ // on[0]是全部 | |
200 | + if(on[i] === 1) { // 若该选项被选中 | |
201 | + console.log('---', `${this.categoryList[i].value}`); | |
202 | + params[`${this.categoryList[i].value}`] = value[i][0]; | |
203 | + } | |
204 | + } | |
205 | + store.dispatch('index/search', { | |
206 | + params, | |
207 | + keyword: this.keyWords | |
208 | + }); | |
209 | + } | |
230 | 210 | } |
231 | 211 | }, |
232 | 212 | ... | ... |
src/pages/myOrder/components/OrderCard.vue
1 | 1 | <template> |
2 | 2 | <view> |
3 | - <view class="card" v-if="current === order.orderType" > | |
3 | + <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> | |
4 | 4 | <view class="cardHeader"> |
5 | - <text class="orderId">订单号:{{order.orderId}}</text> | |
6 | - <text class="orderType" v-if="order.orderType===1">待付款</text> | |
7 | - <text class="orderType" v-if="order.orderType===2">待发货</text> | |
8 | - <text class="orderType" v-if="order.orderType === 3">待收货</text> | |
9 | - <text class="orderType" v-if="order.orderType === 4">退款售后</text> | |
10 | - <text class="orderType" v-if="order.orderType === 5">已完成</text> | |
5 | + <text class="orderId" v-if="status == '0'||status == '1'">订单号:{{order.mch_id}}</text> | |
6 | + <text class="orderId" v-if="status == '2'||status == '3'">下单时间:{{order.pay_time}}</text> | |
7 | + <text class="orderType" v-if="status=='0'">待付款</text> | |
8 | + <text class="orderType" v-if="status=='1'">待收货</text> | |
9 | + <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> | |
10 | + <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> | |
11 | 11 | </view> |
12 | - <view class="orderCardInfo"> | |
13 | - <image :src="order.img" mode="aspectFill"></image> | |
12 | + <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> | |
13 | + <image :src="orderInfo.imgUrl" mode="aspectFill"></image> | |
14 | 14 | <view class="infoText"> |
15 | - <view class="orderName">{{order.name}}</view> | |
16 | - <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> | |
15 | + <view class="orderName">{{orderInfo.p_name}}</view> | |
16 | + <view class="orderDescrib">{{orderInfo.p_name}}</view> | |
17 | 17 | <view class="infoText-bottom"> |
18 | - <view class="markPrice">{{order.price}}</view> | |
19 | - <view class="buy-num">X{{order.buyNum}}</view> | |
18 | + <view class="markPrice">{{orderInfo.nowPrice}}</view> | |
19 | + <view class="buy-num">X {{orderInfo.num}}</view> | |
20 | 20 | </view> |
21 | 21 | </view> |
22 | 22 | </view> |
23 | - <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> | |
24 | - <view class="btns" v-if="order.orderType === 1"> | |
25 | - <view class="btn-type1">申请退款</view> | |
23 | + <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view> | |
24 | + <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> | |
25 | + <view class="btns" v-if="status == '0'"> | |
26 | + <view class="btn-type1" >取消订单</view> | |
26 | 27 | <view class="btn-type2">去支付</view> |
27 | 28 | </view> |
28 | - <view class="btns" v-if="order.orderType === 0"> | |
29 | - <view class="btn-type1">再次购买</view> | |
29 | + <view class="btns" v-if="status == '1'"> | |
30 | + <view class="btn-type2">确认收货</view> | |
30 | 31 | </view> |
32 | + <view class="btns" v-if="status == '2'"> | |
33 | + <view class="btn-type2">再次购买</view> | |
34 | + </view> | |
35 | + <!-- <view class="btns" v-if="status == '3'"> | |
36 | + <view class="btn-type2">再次购买</view> | |
37 | + </view> --> | |
31 | 38 | </view> |
32 | - <view class="card" v-if="current === 0" > | |
39 | + <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> | |
33 | 40 | <view class="cardHeader"> |
34 | - <text class="orderId">订单号:{{order.orderId}}</text> | |
35 | - <text class="orderType" v-if="order.orderType===1">待付款</text> | |
36 | - <text class="orderType" v-if="order.orderType===2">待发货</text> | |
37 | - <text class="orderType" v-if="order.orderType === 3">待收货</text> | |
38 | - <text class="orderType" v-if="order.orderType === 4">退款售后</text> | |
41 | + <text class="orderId" v-if="status == '0'||status == '1'">订单号:{{order.mch_id}}</text> | |
42 | + <text class="orderId" v-if="status == '2'||status == '3'">下单时间:{{order.pay_time}}</text> | |
43 | + <text class="orderType" v-if="status=='0'">待付款</text> | |
44 | + <text class="orderType" v-if="status=='1'">待收货</text> | |
45 | + <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> | |
46 | + <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> | |
39 | 47 | </view> |
40 | - <view class="orderCardInfo"> | |
41 | - <image :src="order.img" mode="aspectFill"></image> | |
48 | + <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> | |
49 | + <image :src="orderInfo.imgUrl" mode="aspectFill"></image> | |
42 | 50 | <view class="infoText"> |
43 | - <view class="orderName">{{order.name}}</view> | |
44 | - <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> | |
51 | + <view class="orderName">{{orderInfo.p_name}}</view> | |
52 | + <view class="orderDescrib">{{orderInfo.p_name}}</view> | |
45 | 53 | <view class="infoText-bottom"> |
46 | - <view class="markPrice">{{order.price}}</view> | |
47 | - <view class="buy-num">X{{order.buyNum}}</view> | |
54 | + <view class="markPrice">{{orderInfo.nowPrice}}</view> | |
55 | + <view class="buy-num">X {{orderInfo.num}}</view> | |
48 | 56 | </view> |
49 | 57 | </view> |
50 | 58 | </view> |
51 | - <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> | |
52 | - <view class="btns" v-if="order.orderType === 1"> | |
53 | - <view class="btn-type1" @click="toRefundment">申请退款</view> | |
59 | + <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view> | |
60 | + <view class="btns" v-if="status == '0'"> | |
61 | + <view class="btn-type1" >取消订单</view> | |
54 | 62 | <view class="btn-type2">去支付</view> |
55 | 63 | </view> |
56 | - <view class="btns" v-if="order.orderType === 0"> | |
57 | - <view class="btn-type1">再次购买</view> | |
64 | + <view class="btns" v-if="status == '1'"> | |
65 | + <view class="btn-type2">确认收货</view> | |
66 | + </view> | |
67 | + <view class="btns" v-if="status == '2'"> | |
68 | + <view class="btn-type2">再次购买</view> | |
58 | 69 | </view> |
70 | + <!-- <view class="btns" v-if="status == '3'"> | |
71 | + <view class="btn-type2">再次购买</view> | |
72 | + </view> --> | |
59 | 73 | </view> |
60 | 74 | </view> |
61 | 75 | </template> |
... | ... | @@ -67,13 +81,72 @@ |
67 | 81 | * 订单数据 |
68 | 82 | */ |
69 | 83 | order: { |
70 | - orderId: Number, | |
71 | - img: String, | |
72 | - name: String, | |
73 | - originCost:String, | |
74 | - price: String, | |
75 | - orderType:Number, | |
76 | - buyNum:Number | |
84 | + // orderId: Number, | |
85 | + // img: String, | |
86 | + // name: String, | |
87 | + // originCost:String, | |
88 | + // price: String, | |
89 | + // orderType:Number, | |
90 | + // buyNum:Number, | |
91 | + finished_time: null, | |
92 | + is_refound: String, | |
93 | + mch_id: String, | |
94 | + money_of_dcw: String, | |
95 | + money_of_partner: String, | |
96 | + money_of_shop: String, | |
97 | + orderJudge: Boolean, | |
98 | + order_info: { | |
99 | + address:{ | |
100 | + cityName: String, | |
101 | + countyName: String, | |
102 | + detailInfo: String, | |
103 | + errMsg: String, | |
104 | + nationalCode: String, | |
105 | + postalCode: String, | |
106 | + provinceName: String, | |
107 | + telNumber: String, | |
108 | + userName: String, | |
109 | + }, | |
110 | + cartinfo: ["127"], | |
111 | + keyname: "330_1588911391", | |
112 | + lefttime: Number, | |
113 | + list:[ | |
114 | + { | |
115 | + cart_id: "127", | |
116 | + imgUrl: String, | |
117 | + img_index_url: null, | |
118 | + memo: String, | |
119 | + mp_id: String, | |
120 | + nowPrice: String, | |
121 | + num: String, | |
122 | + oldPrice: Number, | |
123 | + p_discount: String, | |
124 | + p_name: String, | |
125 | + p_root_index: String, | |
126 | + p_sale_price: String, | |
127 | + peopleName: String, | |
128 | + pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], | |
129 | + pid: String, | |
130 | + sk_id: String, | |
131 | + } | |
132 | + ], | |
133 | + orderDesc: String, | |
134 | + total_fee: Number, | |
135 | + }, | |
136 | + partner_uid: String, | |
137 | + pay_cate: String, | |
138 | + pay_id: String, | |
139 | + pay_time: String, | |
140 | + pay_wood_desc: String, | |
141 | + pay_wood_id: String, | |
142 | + prepay_id: String, | |
143 | + re_check_staus: String, | |
144 | + shopid: String, | |
145 | + split_userid: String, | |
146 | + status: String, | |
147 | + // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 | |
148 | + total_fee: String, | |
149 | + uid: String, | |
77 | 150 | }, |
78 | 151 | /** |
79 | 152 | * 当前选择 |
... | ... | @@ -81,9 +154,18 @@ |
81 | 154 | current:Number |
82 | 155 | |
83 | 156 | }, |
84 | - onLoad() { | |
85 | - // console.log('dd'); | |
86 | - console.log('order', this.props.order); | |
157 | + created() { | |
158 | + console.log(this.order); | |
159 | + // console.log(this.order.status ); | |
160 | + // console.log(this.current); | |
161 | + }, | |
162 | + computed:{ | |
163 | + status(){ | |
164 | + return this.order.status | |
165 | + }, | |
166 | + orderInfoList(){ | |
167 | + return this.order.order_info[0] | |
168 | + } | |
87 | 169 | }, |
88 | 170 | data() { |
89 | 171 | return { |
... | ... | @@ -97,6 +179,43 @@ |
97 | 179 | fail: () => {}, |
98 | 180 | complete: () => {} |
99 | 181 | }); |
182 | + }, | |
183 | + toOrderInfo(status,payId){ | |
184 | + console.log(status,payId) | |
185 | + switch(status){ | |
186 | + // 0待付款 1待收货 2已收货 3 已评价 | |
187 | + case '0': | |
188 | + uni.navigateTo({ | |
189 | + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | |
190 | + fail(errMsg) { | |
191 | + console.log(errMsg) | |
192 | + } | |
193 | + }) | |
194 | + break; | |
195 | + case '1': | |
196 | + uni.navigateTo({ | |
197 | + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | |
198 | + fail(errMsg) { | |
199 | + console.log(errMsg) | |
200 | + } | |
201 | + }) | |
202 | + | |
203 | + break; | |
204 | + case '2 || 3': | |
205 | + uni.navigateTo({ | |
206 | + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | |
207 | + fail(errMsg) { | |
208 | + console.log(errMsg) | |
209 | + } | |
210 | + }) | |
211 | + | |
212 | + break; | |
213 | + | |
214 | + | |
215 | + default: | |
216 | + break; | |
217 | + | |
218 | + } | |
100 | 219 | } |
101 | 220 | } |
102 | 221 | } |
... | ... | @@ -147,24 +266,34 @@ |
147 | 266 | justify-content: space-between; |
148 | 267 | align-items: flex-start; |
149 | 268 | height: 188rpx; |
269 | + width: 368rpx; | |
150 | 270 | } |
151 | 271 | .orderName{ |
152 | 272 | font-size: 14px; |
153 | 273 | color: #333333; |
274 | + display: -webkit-box; | |
275 | + overflow: hidden; | |
276 | + -webkit-box-orient: vertical; | |
277 | + -webkit-line-clamp: 2; | |
154 | 278 | } |
155 | 279 | .orderDescrib{ |
156 | 280 | font-size: 12px; |
157 | 281 | color: #999999; |
282 | + display: -webkit-box; | |
283 | + overflow: hidden; | |
284 | + -webkit-box-orient: vertical; | |
285 | + -webkit-line-clamp: 2; | |
158 | 286 | } |
159 | 287 | .infoText-bottom{ |
160 | 288 | display: flex; |
161 | 289 | flex-direction: row; |
162 | - justify-content: space-between; | |
290 | + justify-content: flex-start; | |
163 | 291 | align-items: center; |
164 | 292 | width: 100%; |
165 | 293 | .markPrice{ |
166 | 294 | font-size: 14px; |
167 | 295 | color: #FF6B4A; |
296 | + margin-right: 20rpx; | |
168 | 297 | } |
169 | 298 | .buy-num{ |
170 | 299 | font-size: 12px; | ... | ... |
src/pages/myOrder/myOrder.vue
... | ... | @@ -2,10 +2,10 @@ |
2 | 2 | <view class="content"> |
3 | 3 | <view class="header"> |
4 | 4 | <!-- 搜索--> |
5 | - <view class="searchBar"> | |
5 | + <!-- <view class="searchBar"> | |
6 | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
7 | 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> |
8 | - </view> | |
8 | + </view> --> | |
9 | 9 | <view class="screenBar"> |
10 | 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
11 | 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
... | ... | @@ -20,7 +20,7 @@ |
20 | 20 | <OrderCard :order = "order" :current="current"></OrderCard> |
21 | 21 | </view> |
22 | 22 | </view> |
23 | - <view class="footer">已显示全部</view> | |
23 | + <view class="footer" >没有更多订单了,去商城看看吧~</view> | |
24 | 24 | </view> |
25 | 25 | </template> |
26 | 26 | <script> |
... | ... | @@ -33,47 +33,43 @@ |
33 | 33 | }, |
34 | 34 | data() { |
35 | 35 | return { |
36 | + //顶部筛选项 | |
36 | 37 | screenItems: [ |
37 | - {current:0,text:'全部'}, | |
38 | - {current:1,text:'待付款'}, | |
39 | - {current:2,text:'待发货'}, | |
40 | - {current:3,text:'待收货'}, | |
41 | - {current:4,text:'退款售后'}, | |
38 | + {current:"10",text:'全部'}, | |
39 | + {current:"0",text:'待付款'}, | |
40 | + {current:"1",text:'待收货'}, | |
41 | + {current:"2",text:'已完成'}, | |
42 | + // {current:"3",text:'已评价'}, | |
43 | + // {current:"4",text:'退款'}, | |
42 | 44 | ], |
43 | - current: 0, | |
44 | - //订单数据 | |
45 | - // orderList:[ | |
46 | - // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, | |
47 | - // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, | |
48 | - // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1}, | |
49 | - // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, | |
50 | - // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, | |
51 | - // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, | |
52 | - // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, | |
53 | - // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}, | |
54 | - // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1} | |
55 | - // ], | |
45 | + //当前所在item 默认10-->全部 | |
46 | + current: "10", | |
56 | 47 | }; |
57 | 48 | }, |
58 | 49 | |
59 | - onLoad: function() { | |
50 | + onLoad: function(option) { | |
51 | + //获取订单列表 | |
60 | 52 | store.dispatch('myOrder/getList', { |
61 | 53 | uid: "1", |
62 | - way: "0", | |
63 | - }); | |
54 | + way: "", | |
55 | + }); | |
56 | + //从user过来传的status,给current,以显示对应item | |
57 | + this.current = option.status | |
64 | 58 | }, |
65 | 59 | computed: { |
66 | 60 | orderList() { |
67 | - console.log('orderList', this.$store.state.myOrder.orderlist); | |
68 | - return this.$store.state.myOrder.orderlist; | |
61 | + // console.log('orderList', this.$store.state.myOrder.orderList); | |
62 | + return this.$store.state.myOrder.orderList; | |
69 | 63 | } |
70 | 64 | }, |
71 | 65 | methods:{ |
66 | + //tab点击事件 | |
72 | 67 | onClickItem(e) { |
73 | 68 | if (this.current !== e) { |
74 | 69 | this.current = e; |
75 | 70 | } |
76 | 71 | } |
72 | + | |
77 | 73 | } |
78 | 74 | } |
79 | 75 | </script> |
... | ... | @@ -88,27 +84,28 @@ |
88 | 84 | .header{ |
89 | 85 | background-color: #ffffff; |
90 | 86 | width: 100%; |
91 | - height: 232rpx; | |
92 | - padding: 40rpx 40rpx 36rpx 40rpx; | |
87 | + // height: 232rpx; | |
88 | + padding: 20rpx 40rpx 16rpx 40rpx; | |
93 | 89 | box-sizing: border-box; |
94 | 90 | position: fixed; |
95 | 91 | top: 0; |
96 | 92 | left: 0; |
97 | - .searchBar { | |
98 | - width: 670rpx; | |
99 | - display: flex; | |
100 | - justify-content: center; | |
101 | - align-items: center; | |
102 | - box-sizing: border-box; | |
103 | - padding: 0rpx 16rpx; | |
104 | - border: 1px solid #FF6B4A; | |
105 | - border-radius: 8rpx; | |
106 | - background-color: #ffffff; | |
107 | - } | |
93 | + // .searchBar { | |
94 | + // width: 670rpx; | |
95 | + // display: flex; | |
96 | + // justify-content: center; | |
97 | + // align-items: center; | |
98 | + // box-sizing: border-box; | |
99 | + // padding: 0rpx 16rpx; | |
100 | + // border: 1px solid #FF6B4A; | |
101 | + // border-radius: 8rpx; | |
102 | + // background-color: #ffffff; | |
103 | + // } | |
108 | 104 | |
109 | 105 | .screenBar{ |
110 | 106 | width: 670rpx; |
111 | - height: 110rpx; | |
107 | + // height: 110rpx; | |
108 | + height: 70rpx; | |
112 | 109 | display: flex; |
113 | 110 | flex-direction: row; |
114 | 111 | justify-content: space-between; |
... | ... | @@ -138,7 +135,8 @@ |
138 | 135 | } |
139 | 136 | } |
140 | 137 | .orderList{ |
141 | - margin-top: 232rpx; | |
138 | + // margin-top: 232rpx; | |
139 | + margin-top: 132rpx; | |
142 | 140 | } |
143 | 141 | .footer{ |
144 | 142 | font-size: 14px; | ... | ... |
src/pages/myOrderPaying/myOrderPaying.vue
1 | +<!-- 订单待付款 待收货 --> | |
1 | 2 | <template> |
2 | - | |
3 | - <view class="content"> | |
4 | - <view class="order-hr"></view> | |
5 | - <view class="order-time"> | |
3 | + <view class="content"> | |
4 | + <!-- 待付款 --> | |
5 | + <view class="order-time" v-if="status == '0'"> | |
6 | 6 | <text>请在</text> |
7 | - <!-- <text class="p2"></text> --> | |
8 | 7 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" |
9 | - :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> | |
8 | + :hour="0" :second="getTime" @timeup=timeup ></uni-countdown> | |
10 | 9 | <text>内完成付款</text> |
10 | + </view> | |
11 | + <!-- 待收货 --> | |
12 | + <view class="headerBanner" v-if="status == '1'"> | |
13 | + <view class="bannerLeft"> | |
14 | + <view class="T1">卖家已发货</view> | |
15 | + <view class="T2">还剩 确认收货</view> | |
16 | + </view> | |
17 | + <image src="../../static/car.png" mode="aspectFill"></image> | |
11 | 18 | </view> |
12 | 19 | <view class="order"> |
13 | 20 | <view class="order-user"> |
14 | 21 | <view class="order-user-head"> |
15 | - <text class="p1">钱大大</text> | |
16 | - <text class="p2">18823749843</text> | |
22 | + <text class="p1">{{orderAddressInfo.userName}}</text> | |
23 | + <text class="p2">{{orderAddressInfo.telNumber}}</text> | |
17 | 24 | </view> |
18 | 25 | <view class="order-user-body"> |
19 | 26 | <image src="../../static/myorder-paying-location.png"></image> |
20 | - <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> | |
27 | + <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> | |
21 | 28 | </view> |
22 | 29 | </view> |
23 | 30 | <view class="order-info"> |
24 | - <view class="order-info-head"> | |
25 | - <image src="../../static/myorder-paying-pic.png"></image> | |
31 | + <view class="order-info-head" v-for="(orderInfoListItem,index) in orderInfoList" :key="index" > | |
32 | + <image :src="orderInfoListItem.imgUrl" mode="aspectFill"></image> | |
26 | 33 | <view class="order-info-head-r"> |
27 | - <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> | |
34 | + <text class="p1">{{orderInfoListItem.p_name}}</text> | |
28 | 35 | <view class="p2" style="margin: 0;"> |
29 | 36 | 规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 |
30 | 37 | <!-- <view class="arrow"></view> --> |
38 | + </view> | |
39 | + <view class="infoText-bottom"> | |
40 | + <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> | |
41 | + <view class="buy-num">X {{orderInfoListItem.num}}</view> | |
31 | 42 | </view> |
32 | - <text class="p3"><span>¥180</span><span class="p4">X1</span></text> | |
33 | 43 | </view> |
34 | 44 | </view> |
35 | 45 | <!-- <view class="order-info-goodsnum"> |
... | ... | @@ -37,21 +47,21 @@ |
37 | 47 | </view> --> |
38 | 48 | <text class="order-info-freight"> |
39 | 49 | <text class="p1">运费</text> |
40 | - <text class="p2">0.00</text> | |
50 | + <text class="p2">{{orderInfo.trans_price}}</text> | |
41 | 51 | </text> |
42 | 52 | <text class="order-info-discount"> |
43 | 53 | <text class="p1">优惠</text> |
44 | - <text class="p2">-¥70.00</text> | |
54 | + <text class="p2">-¥{{totalDiscount}}</text> | |
45 | 55 | </text> |
46 | 56 | <text class="order-info-price"> |
47 | 57 | <text class="p1">实付</text> |
48 | - <text class="p2">¥110</text> | |
58 | + <text class="p2">¥{{orderInfo.order_info.total_fee}}</text> | |
49 | 59 | </text> |
50 | 60 | <text class="order-info-num"> |
51 | - <text>订单号:203486795859605849</text> | |
61 | + <text>订单号:{{orderInfo.prepay_id}}</text> | |
52 | 62 | </text> |
53 | 63 | <text class="order-info-time"> |
54 | - <text>下单时间:2020-10-22 14:32:42</text> | |
64 | + <text>下单时间:{{orderInfo.pay_time}}</text> | |
55 | 65 | </text> |
56 | 66 | <view class="order-info-hr"></view> |
57 | 67 | <view class="order-info-contact"> |
... | ... | @@ -60,59 +70,158 @@ |
60 | 70 | </view> |
61 | 71 | </view> |
62 | 72 | </view> |
63 | - <view class="order-confim"> | |
64 | - <button class="b1">取消订单</button> | |
65 | - <button class="b2">立即支付</button> | |
73 | + <view class="order-confim" v-if="status == '0'"> | |
74 | + <button class="b1" @click="cancleOrder">取消订单</button> | |
75 | + <button class="b2" @click="paylog">立即支付</button> | |
76 | + </view> | |
77 | + | |
78 | + <view class="order-confim" v-if="status == '1'"> | |
79 | + <!-- <button class="b1">取消订单</button> --> | |
80 | + <button class="b2" @click="confirmOrder">确认收货</button> | |
66 | 81 | </view> |
67 | 82 | </view> |
68 | 83 | </template> |
69 | 84 | |
70 | -<script> | |
85 | +<script> | |
86 | + import store from '@/store'; | |
71 | 87 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' |
72 | 88 | export default { |
73 | 89 | components: { |
74 | 90 | UniCountdown |
75 | 91 | }, |
76 | 92 | data() { |
77 | - return { | |
78 | - scrollHeight: false, | |
93 | + return { | |
94 | + // orderInfo:{}, | |
95 | + payId:'', | |
96 | + status:'', | |
97 | + uid:'', | |
98 | + openid:'', | |
99 | + lefttime:0, | |
100 | + | |
79 | 101 | } |
102 | + }, | |
103 | + onLoad: function(option) { | |
104 | + console.log(option); | |
105 | + this.payId = option.payId; | |
106 | + this.status = option.status | |
107 | + const openid = uni.getStorageSync('openid'); | |
108 | + const uid = this.$store.state.user.uid | |
109 | + this.uid = uid | |
110 | + this.openid = openid | |
111 | + store.dispatch('orderRead/getOrderInfo',{ | |
112 | + pay_id:this.payId, | |
113 | + uid:'1', | |
114 | + openid:openid | |
115 | + }) | |
116 | + | |
117 | + | |
118 | + | |
119 | + // this.orderInfo = this.$store.state.orderRead.orderInfo | |
120 | + }, | |
121 | + computed: { | |
122 | + //获取订单详细信息 | |
123 | + orderInfo() { | |
124 | + console.log(this.$store.state.orderRead.orderInfo) | |
125 | + return this.$store.state.orderRead.orderInfo || {} | |
126 | + }, | |
127 | + orderInfoList(){ | |
128 | + const orderInfoList =this.orderInfo.order_info[0].list | |
129 | + return orderInfoList | |
130 | + }, | |
131 | + //获取订单地址信息 | |
132 | + orderAddressInfo(){ | |
133 | + return this.orderInfo.order_info[0].address | |
134 | + }, | |
135 | + //订单付款时间 | |
136 | + getTime(){ | |
137 | + return this.orderInfo.order_info[0].lefttime | |
138 | + }, | |
139 | + // 计算总优惠额 | |
140 | + totalDiscount(){ | |
141 | + const discountInfoList = this.orderInfo.discount_info | |
142 | + let totalDiscount = 0; | |
143 | + if(discountInfoList){ | |
144 | + discountInfoList.map((discountItem,index)=>{ | |
145 | + totalDiscount += Number(discountItem.value) | |
146 | + }) | |
147 | + } | |
148 | + // console.log(totalDiscount) | |
149 | + return totalDiscount | |
150 | + }, | |
80 | 151 | }, |
81 | - methods: { | |
82 | - | |
152 | + methods: { | |
153 | + //取消订单 | |
154 | + timeup(){ | |
155 | + this.cancleOrder() | |
156 | + }, | |
157 | + cancleOrder(){ | |
158 | + const uid = this.uid | |
159 | + const openid = this.openid | |
160 | + uni.showModal({ | |
161 | + title: '提示', | |
162 | + content: '现在取消,订单不可恢复哦,确认取消吗?', | |
163 | + success: function (res) { | |
164 | + if (res.confirm) { | |
165 | + store.dispatch('cancelOrder/cancel',{ | |
166 | + keyname:'1', | |
167 | + uid:uid, | |
168 | + openid:openid | |
169 | + }) | |
170 | + } else if (res.cancel) { | |
171 | + console.log('用户点击取消'); | |
172 | + } | |
173 | + } | |
174 | + }) | |
175 | + }, | |
176 | + paylog(){ | |
177 | + | |
178 | + }, | |
179 | + confirmOrder(){ | |
180 | + store.dispatch('statusConfirm/confirm',{ | |
181 | + uid:this.uid, | |
182 | + openid:this.openid, | |
183 | + oldway:'1', | |
184 | + way:'2', | |
185 | + pay_id:this.payId, | |
186 | + judgeContent:'', | |
187 | + orderInfo:this.orderInfo.order_info, | |
188 | + }) | |
189 | + } | |
83 | 190 | } |
84 | 191 | } |
85 | 192 | </script> |
86 | 193 | |
87 | 194 | <style lang="scss" scoped> |
88 | - .content{ | |
195 | + .content{ | |
196 | + min-height: 100vh; | |
89 | 197 | display: flex; |
90 | 198 | flex-direction: column; |
91 | - justify-content: center; | |
199 | + justify-content: flex-start; | |
92 | 200 | align-items: center; |
93 | 201 | background-color: #f2f2f2; |
94 | 202 | } |
95 | 203 | |
96 | 204 | |
97 | 205 | .order { |
98 | - min-height: 1196rpx; | |
99 | 206 | margin-bottom: 112rpx; |
100 | - background: #F2F2F2; | |
101 | - } | |
102 | - .order-hr { | |
103 | - width: 100%; | |
104 | - height: 1px; | |
105 | - background-color: #E9E9E9; | |
207 | + background: #F2F2F2; | |
208 | + margin-top: 140rpx; | |
209 | + width: 670rpx; | |
106 | 210 | } |
211 | + | |
107 | 212 | .order-time { |
108 | 213 | width: 100%; |
109 | 214 | height: 140rpx; |
110 | 215 | background-color: #fff; |
111 | 216 | display: flex; |
112 | - justify-content: center; | |
217 | + justify-content: center; | |
218 | + align-items: center; | |
219 | + position: fixed; | |
220 | + top: 0 ; | |
221 | + left: 0; | |
113 | 222 | text { |
114 | 223 | // font-family: PingFangSC-Regular; |
115 | - margin-top: 48rpx; | |
224 | + // margin-top: 48rpx; | |
116 | 225 | font-size: 14px; |
117 | 226 | color: #333333; |
118 | 227 | letter-spacing: -0.26px; |
... | ... | @@ -125,9 +234,36 @@ |
125 | 234 | letter-spacing: -0.34px; |
126 | 235 | } |
127 | 236 | } |
128 | - | |
237 | + .headerBanner{ | |
238 | + width: 100%; | |
239 | + height: 140rpx; | |
240 | + background: #4A90E2; | |
241 | + padding: 26rpx 60rpx 24rpx 60rpx; | |
242 | + box-sizing: border-box; | |
243 | + color: #FFFFFF; | |
244 | + display: flex; | |
245 | + justify-content: space-between; | |
246 | + align-items: center; | |
247 | + position: fixed; | |
248 | + top: 0 ; | |
249 | + left: 0; | |
250 | + .bannerLeft{ | |
251 | + font-size: 36rpx; | |
252 | + display: flex; | |
253 | + flex-direction: column; | |
254 | + justify-content: center; | |
255 | + align-items: center; | |
256 | + .T2{ | |
257 | + font-size: 24rpx; | |
258 | + } | |
259 | + } | |
260 | + image{ | |
261 | + height: 56rpx; | |
262 | + width: 72rpx; | |
263 | + } | |
264 | + } | |
265 | + | |
129 | 266 | .order-user { |
130 | - width: 670rpx; | |
131 | 267 | height: 228rpx; |
132 | 268 | background: #FFFFFF; |
133 | 269 | border-radius: 14rpx; |
... | ... | @@ -137,7 +273,6 @@ |
137 | 273 | .order-user-head { |
138 | 274 | display: flex; |
139 | 275 | height: 108rpx; |
140 | - width: 100%; | |
141 | 276 | align-items: center; |
142 | 277 | margin-left: 126rpx; |
143 | 278 | .p1 { |
... | ... | @@ -172,7 +307,6 @@ |
172 | 307 | } |
173 | 308 | |
174 | 309 | .order-info { |
175 | - width: 670rpx; | |
176 | 310 | background-color: #fff; |
177 | 311 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); |
178 | 312 | border-radius: 16rpx; |
... | ... | @@ -236,19 +370,24 @@ |
236 | 370 | font-size: 12px; |
237 | 371 | color: #999999; |
238 | 372 | letter-spacing: -0.23px; |
239 | - } | |
240 | - .p3 { | |
241 | - height: 20px; | |
242 | - // font-family: PingFangSC-Regular; | |
243 | - font-size: 14px; | |
244 | - color: #FF6B4A; | |
245 | - letter-spacing: -0.26px; | |
246 | - } | |
247 | - .p4{ | |
248 | - font-size: 12px; | |
249 | - color: #999999; | |
250 | - letter-spacing: -0.23px; | |
251 | - margin-left: 10px; | |
373 | + } | |
374 | + .infoText-bottom{ | |
375 | + display: flex; | |
376 | + flex-direction: row; | |
377 | + justify-content: flex-start; | |
378 | + align-items: center; | |
379 | + width: 100%; | |
380 | + margin-left: 0; | |
381 | + .markPrice{ | |
382 | + font-size: 14px; | |
383 | + color: #FF6B4A; | |
384 | + margin-right: 20rpx; | |
385 | + margin-left: 0rpx; | |
386 | + } | |
387 | + .buy-num{ | |
388 | + font-size: 12px; | |
389 | + color: #999999; | |
390 | + } | |
252 | 391 | } |
253 | 392 | } |
254 | 393 | |
... | ... | @@ -369,8 +508,9 @@ |
369 | 508 | |
370 | 509 | .order-confim { |
371 | 510 | display: flex; |
372 | - align-items: center; | |
373 | - z-index: 999; | |
511 | + align-items: center; | |
512 | + justify-content: flex-end; | |
513 | + // z-index: 999; | |
374 | 514 | width: 100%; |
375 | 515 | height: 112rpx; |
376 | 516 | position: fixed; |
... | ... | @@ -388,7 +528,7 @@ |
388 | 528 | .b1 { |
389 | 529 | // font-family: PingFangSC-Regular; |
390 | 530 | color: #FF6B4A; |
391 | - | |
531 | + background-color: #FFFFFF; | |
392 | 532 | } |
393 | 533 | .b2 { |
394 | 534 | // font-family: PingFangSC-Regular; | ... | ... |
src/pages/predelivery/predelivery.vue
src/pages/user/user.vue
... | ... | @@ -8,35 +8,72 @@ |
8 | 8 | <text class="userName">{{nickName}}</text> |
9 | 9 | </view> |
10 | 10 | </view> |
11 | - <view class="service"> | |
11 | + <!-- <view class="service"> | |
12 | 12 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
13 | + </view> --> | |
14 | + </view> | |
15 | + <view class="myOpticsData"> | |
16 | + <view class="left"> | |
17 | + <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image> | |
18 | + <text>验光数据</text> | |
13 | 19 | </view> |
20 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
14 | 21 | </view> |
15 | 22 | <view class="myOrder"> |
16 | 23 | <view class="orderHeader"> |
17 | 24 | <text>全部订单</text> |
18 | - <view class="btn" @click="toMyOrder"> | |
25 | + <view class="btn" @click="toMyOrder('10')"> | |
19 | 26 | 全部 |
20 | - <image src="../../static/right.png" mode="aspectFill"></image> | |
27 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
21 | 28 | </view> |
22 | 29 | </view> |
23 | 30 | <view class="orderBody"> |
24 | - <view class="item waitPay" @click="toMyOrderPaying"> | |
25 | - <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | |
31 | + <view class="item waitPay" @click="toMyOrder('0')"> | |
32 | + <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image> | |
26 | 33 | <text>待付款</text> |
27 | 34 | </view> |
28 | - <view class="item waitDeliver" @click="toPredelivery" > | |
29 | - <image src="../../static/waitPay.png" mode="aspectFill"></image> | |
30 | - <text>待发货</text> | |
31 | - </view> | |
32 | - <view class="item waitReceive" @click="torefunProgress"> | |
33 | - <image src="../../static/waitReceive.png" mode="aspectFill"></image> | |
35 | + <view class="item waitDeliver" @click="toMyOrder('1')" > | |
36 | + <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image> | |
34 | 37 | <text>待收货</text> |
35 | 38 | </view> |
36 | - <view class="item service" @click="torefundment"> | |
37 | - <image src="../../static/service.png" mode="aspectFill"></image> | |
38 | - <text>退换/售后</text> | |
39 | + <view class="item waitReceive" @click="toMyOrder('2')"> | |
40 | + <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image> | |
41 | + <text>已完成</text> | |
39 | 42 | </view> |
43 | + <!-- <view class="item service" @click="toMyOrder('3')"> | |
44 | + <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | |
45 | + <text>已评价</text> | |
46 | + </view> --> | |
47 | + </view> | |
48 | + </view> | |
49 | + <view class="someItem"> | |
50 | + <!-- <view class="item"> | |
51 | + <view class="left"> | |
52 | + <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | |
53 | + <text>推广记录与收益</text> | |
54 | + </view> | |
55 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
56 | + </view> --> | |
57 | + <view class="item"> | |
58 | + <view class="left"> | |
59 | + <image src="../../static/img/user/introduce.png" mode="aspectFit"></image> | |
60 | + <text>系统介绍</text> | |
61 | + </view> | |
62 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
63 | + </view> | |
64 | + <view class="item"> | |
65 | + <view class="left"> | |
66 | + <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image> | |
67 | + <text>加入我们</text> | |
68 | + </view> | |
69 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
70 | + </view> | |
71 | + <view class="item"> | |
72 | + <view class="left"> | |
73 | + <image src="../../static/img/user/service.png" mode="aspectFit"></image> | |
74 | + <text>联系客服</text> | |
75 | + </view> | |
76 | + <image src="../../static/right.png" mode="aspectFit"></image> | |
40 | 77 | </view> |
41 | 78 | </view> |
42 | 79 | <view class="recommend"> |
... | ... | @@ -47,11 +84,13 @@ |
47 | 84 | </view> |
48 | 85 | <!-- 商品列表 --> |
49 | 86 | <view class="goods-list"> |
50 | - <view class="product-list"> | |
51 | - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > | |
52 | - <Card :goods = "goods"></Card> | |
53 | - </view> | |
54 | - </view> | |
87 | + <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list"> | |
88 | + <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id"> | |
89 | + <view class="product" v-for="(item) in goods.list" :key="item.sk_id"> | |
90 | + <Card :goods="item" ></Card> | |
91 | + </view> | |
92 | + </block> | |
93 | + </scroll-view> | |
55 | 94 | <view class="loading-text">{{loadingText}}</view> |
56 | 95 | </view> |
57 | 96 | </view> |
... | ... | @@ -80,20 +119,8 @@ |
80 | 119 | }, |
81 | 120 | data() { |
82 | 121 | return { |
83 | - //商品数据 | |
84 | - goodsList:[ | |
85 | - { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
86 | - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
87 | - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
88 | - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
89 | - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
90 | - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
91 | - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
92 | - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
93 | - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | |
94 | - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' } | |
95 | - ], | |
96 | - isAuth: true, // 是否显示授权页面 | |
122 | + isAuth: true, // 是否显示授权页面, | |
123 | + pagesnum:1 // 分页请求初始值 | |
97 | 124 | } |
98 | 125 | }, |
99 | 126 | onLoad() { |
... | ... | @@ -108,6 +135,7 @@ |
108 | 135 | } |
109 | 136 | } |
110 | 137 | }) |
138 | + | |
111 | 139 | }, |
112 | 140 | computed: { |
113 | 141 | nickName() { |
... | ... | @@ -122,11 +150,18 @@ |
122 | 150 | return this.$store.state.userRecommand.recommandList; |
123 | 151 | } |
124 | 152 | }, |
125 | - onLoad: function() { | |
153 | + onLoad:function(){ | |
154 | + console.log('usr-my',this.$store.state.user.userInfo) | |
155 | + | |
126 | 156 | store.dispatch('userRecommand/getRecommandList', { |
127 | - uid: 2, | |
157 | + // uid:468, | |
158 | + uid: this.$store.state.user.userInfo.uid, | |
159 | + // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4", | |
160 | + openid:this.$store.state.user.userInfo.openid, | |
161 | + page: this.pagesnum | |
128 | 162 | }); |
129 | 163 | }, |
164 | + | |
130 | 165 | methods: { |
131 | 166 | // 授权 |
132 | 167 | onGotUserInfo(e) { |
... | ... | @@ -139,39 +174,22 @@ |
139 | 174 | this.isAuth = true |
140 | 175 | } |
141 | 176 | }, |
142 | - toMyOrder(){ | |
177 | + toMyOrder(status){ | |
143 | 178 | uni.navigateTo({ |
144 | - url: '../myOrder/myOrder?current=0', | |
179 | + url: `../myOrder/myOrder?status=`+status, | |
145 | 180 | success: res => {}, |
146 | 181 | fail: () => {}, |
147 | 182 | complete: () => {} |
148 | 183 | }); |
149 | 184 | }, |
150 | - toPredelivery(){ | |
151 | - uni.navigateTo({ | |
152 | - url: '../myOrder/myOrder?current=2', | |
153 | - success: res => {}, | |
154 | - fail: () => {}, | |
155 | - complete: () => {} | |
185 | + handleScrolltolower(){ | |
186 | + // console.log('usr-my',this.$store.state.user.userInfo) | |
187 | + this.pagesnum++; | |
188 | + store.dispatch('userRecommand/getRecommandList', { | |
189 | + uid: this.$store.state.user.userInfo.uid, | |
190 | + openid:this.$store.state.user.userInfo.openid, | |
191 | + page: this.pagesnum | |
156 | 192 | }); |
157 | - }, | |
158 | - toMyOrderPaying(){ | |
159 | - uni.navigateTo({ | |
160 | - url: '../myOrder/myOrder?current=1', | |
161 | - success: res => {}, | |
162 | - fail: () => {}, | |
163 | - complete: () => {} | |
164 | - }); | |
165 | - }, | |
166 | - torefundment(){ | |
167 | - uni.navigateTo({ | |
168 | - url:'../refundment/refundment', | |
169 | - }) | |
170 | - }, | |
171 | - torefunProgress(){ | |
172 | - uni.navigateTo({ | |
173 | - url:'../refundProgress/refundProgress' | |
174 | - }) | |
175 | 193 | } |
176 | 194 | } |
177 | 195 | } |
... | ... | @@ -228,18 +246,47 @@ |
228 | 246 | } |
229 | 247 | } |
230 | 248 | } |
231 | - .service{ | |
232 | - margin-top: 20rpx; | |
249 | + // .service{ | |
250 | + // margin-top: 20rpx; | |
251 | + // image{ | |
252 | + // height: 36rpx; | |
253 | + // width: 36rpx; | |
254 | + // } | |
255 | + // } | |
256 | + } | |
257 | + .myOpticsData{ | |
258 | + width: 670rpx; | |
259 | + height: 120rpx; | |
260 | + background-color: #FFFFFF; | |
261 | + border-radius: 6px; | |
262 | + box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10); | |
263 | + position: relative; | |
264 | + bottom: 44rpx; | |
265 | + padding: 40rpx; | |
266 | + box-sizing: border-box; | |
267 | + display: flex; | |
268 | + justify-content: space-between; | |
269 | + align-items: center; | |
270 | + .left{ | |
271 | + font-size: 14px; | |
272 | + color: #333333; | |
273 | + display: flex; | |
274 | + align-items: center; | |
233 | 275 | image{ |
234 | - height: 36rpx; | |
235 | - width: 36rpx; | |
276 | + margin-right: 32rpx; | |
277 | + width: 30rpx; | |
278 | + height: 34rpx; | |
236 | 279 | } |
237 | 280 | } |
281 | + image{ | |
282 | + height: 16px; | |
283 | + width: 8px; | |
284 | + } | |
238 | 285 | } |
239 | 286 | .myOrder{ |
240 | 287 | width: 100%; |
241 | 288 | height: 296rpx; |
242 | - margin-top: 20rpx; | |
289 | + // margin-top: 116rpx; | |
243 | 290 | margin-bottom: 20rpx; |
244 | 291 | padding: 0 40rpx; |
245 | 292 | box-sizing: border-box; |
... | ... | @@ -265,10 +312,12 @@ |
265 | 312 | .btn{ |
266 | 313 | font-size: 12px; |
267 | 314 | color: #999999; |
315 | + display: flex; | |
316 | + align-items: center; | |
268 | 317 | image{ |
269 | 318 | margin-left: 20rpx; |
270 | - height: 16rpx; | |
271 | - width: 8rpx; | |
319 | + height: 32rpx; | |
320 | + width: 16rpx; | |
272 | 321 | } |
273 | 322 | } |
274 | 323 | } |
... | ... | @@ -276,14 +325,14 @@ |
276 | 325 | width: 100%; |
277 | 326 | display: flex; |
278 | 327 | flex-direction: row; |
279 | - justify-content: space-between; | |
328 | + justify-content: space-around; | |
280 | 329 | align-items: center; |
281 | 330 | .item{ |
282 | 331 | display: flex; |
283 | 332 | flex-direction: column; |
284 | 333 | align-items: center; |
285 | 334 | image{ |
286 | - width: 46rpx; | |
335 | + width: 62rpx; | |
287 | 336 | height: 46rpx; |
288 | 337 | } |
289 | 338 | text{ |
... | ... | @@ -294,6 +343,46 @@ |
294 | 343 | } |
295 | 344 | } |
296 | 345 | } |
346 | + .someItem{ | |
347 | + width: 100%; | |
348 | + height: 336rpx; | |
349 | + background: #FFFFFF; | |
350 | + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | |
351 | + border-radius: 6px; | |
352 | + border-radius: 6px; | |
353 | + margin-bottom: 18rpx; | |
354 | + box-sizing: border-box; | |
355 | + padding: 21rpx 48rpx 21rpx 42rpx; | |
356 | + box-sizing: border-box; | |
357 | + display: flex; | |
358 | + flex-direction: column; | |
359 | + justify-content: space-between; | |
360 | + align-items: center; | |
361 | + .item{ | |
362 | + display: flex; | |
363 | + justify-content: space-between; | |
364 | + border-bottom: 1px solid #F2F2F2;; | |
365 | + align-items: center; | |
366 | + height: 72rpx; | |
367 | + width: 100%; | |
368 | + .left{ | |
369 | + font-size: 14px; | |
370 | + color: #333333; | |
371 | + display: flex; | |
372 | + align-items: center; | |
373 | + image{ | |
374 | + margin-right: 32rpx; | |
375 | + width: 30rpx; | |
376 | + height: 34rpx; | |
377 | + } | |
378 | + } | |
379 | + image{ | |
380 | + height: 16px; | |
381 | + width: 8px; | |
382 | + } | |
383 | + } | |
384 | + | |
385 | + } | |
297 | 386 | .recommend{ |
298 | 387 | background: #FFFFFF; |
299 | 388 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
... | ... | @@ -334,6 +423,7 @@ |
334 | 423 | width: 92%; |
335 | 424 | padding: 0 4% 3vw 4%; |
336 | 425 | display: flex; |
426 | + height: 200px; | |
337 | 427 | justify-content: space-between; |
338 | 428 | flex-wrap: wrap; |
339 | 429 | .product{ | ... | ... |
src/static/car.png
1.56 KB
src/static/img/user/dataWrite.png
382 Bytes
src/static/img/user/introduce.png
488 Bytes
src/static/img/user/joinUs.png
1.97 KB
src/static/img/user/refound.png
3.38 KB
src/static/img/user/service.png
1.17 KB
src/static/img/user/shouyi.png
1.51 KB
src/static/img/user/waitDeliver.png
1.91 KB
src/static/img/user/waitPay.png
2.19 KB
src/static/img/user/waitReceive.png
2.01 KB
src/static/joinUs (2).png
488 Bytes
src/static/joinUs (3).png
1.17 KB
src/static/joinUs.png
1.97 KB
src/static/shouyi.png
1.51 KB
src/static/waitReceive.png
src/store/modules/cancelOrder.js
... | ... | @@ -0,0 +1,36 @@ |
1 | +import urlAlias from '../url'; | |
2 | +import request from '../request'; | |
3 | + | |
4 | +const { | |
5 | + cancelOrder | |
6 | +} = urlAlias; | |
7 | + | |
8 | +const state = { | |
9 | + orderList: [], | |
10 | +}; | |
11 | + | |
12 | +const mutations = { | |
13 | + INIT: (state, data) => { | |
14 | + state.orderList = data; | |
15 | + }, | |
16 | +}; | |
17 | + | |
18 | +const actions = { | |
19 | + cancel({ commit }, param) { | |
20 | + request({ | |
21 | + url: cancelOrder, | |
22 | + data: param, | |
23 | + success: (res) => { | |
24 | + console.log(res.data); | |
25 | + // commit("INIT", res.data.data); | |
26 | + }, | |
27 | + }) | |
28 | + } | |
29 | +} | |
30 | + | |
31 | +export default { | |
32 | + namespaced: true, | |
33 | + state, | |
34 | + mutations, | |
35 | + actions, | |
36 | +} | |
0 | 37 | \ No newline at end of file | ... | ... |
src/store/modules/cart.js
1 | 1 | import urlAlias from '../url'; |
2 | 2 | import request from '../request'; |
3 | 3 | |
4 | -const { cartList } = urlAlias; | |
4 | +const { cartList , cartModi, cartDel, cartAdd } = urlAlias; | |
5 | 5 | |
6 | 6 | const state = { |
7 | 7 | cartList: [], |
8 | 8 | }; |
9 | 9 | |
10 | + | |
11 | +const data = { | |
12 | + data:{ | |
13 | + // list 购物车列表 | |
14 | + list:[ | |
15 | + { | |
16 | + goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", //商品名称 | |
17 | + pid: "6",//产品id | |
18 | + real_price: 99, | |
19 | + checked: true,//是否选中 | |
20 | + name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … | |
21 | + cart_id: "39", //购物车唯一序列号 | |
22 | + num: "1", //此购物 | |
23 | + pics: "/static/myorder-paying-pic.png", //商品图片 | |
24 | + goodsType:2,// 商品种类 | |
25 | + }, | |
26 | + { | |
27 | + goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", //商品名称 | |
28 | + pid: "4",//产品id | |
29 | + real_price: 189, | |
30 | + checked: false,//是否选中 | |
31 | + name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … | |
32 | + cart_id: "38", //购物车唯一序列号 | |
33 | + num: "2", //此购物 | |
34 | + pics: "/static/myorder-paying-pic.png", //商品图片 | |
35 | + goodsType:3,// 商品种类 | |
36 | + }, | |
37 | + ], | |
38 | + mp_id: "1", | |
39 | + mp_list://使用人,一个产品只有一个使用人 | |
40 | + [ | |
41 | + { | |
42 | + glassWidth: "54",//镜宽 | |
43 | + img_url2: "http://localhost:8087/images/shop_1/1/",//使用人的头像,根据此头像,AI识别出数据。 | |
44 | + in_time: "2020-02-22 03:19:38",//使用人加入的时间 | |
45 | + leftAxi: "124",//左眼数据 | |
46 | + leftCyl: "-2",//左眼数据 | |
47 | + leftSph: "-1",//左眼数据 | |
48 | + leftVis: "5",//左眼数据 | |
49 | + legWidth: "158",//镜腿长 | |
50 | + metal: null,//使用人的其它定义(材质过敏之类的) | |
51 | + mp_id: "1",//使用的id | |
52 | + name: "me",//使用人的名字 | |
53 | + norseWidth: "18",//鼻宽 | |
54 | + pd: "89.6",//瞳距 | |
55 | + price: "0",//此人偏好的价格 | |
56 | + rightAxi: "123",//右眼数据 | |
57 | + rightCyl: "24",//右眼数据 | |
58 | + rightSph: "-4",//右眼数据 | |
59 | + rightVis: "5.1",//右眼数据 | |
60 | + uid: "1",//购买人的uid | |
61 | + } | |
62 | + ], | |
63 | + sk_id: "80",//此产品下的sku的唯一id | |
64 | + skuList:[//sku清单 | |
65 | + { | |
66 | + discount: "45",//折扣,数据库中以int型存储,所以要除100 | |
67 | + in_price: "6000",//进货价格,数据库中以int型存储,单位是分,所以显示时要除以100 | |
68 | + kc: "0",//库存 | |
69 | + model_pic: null,//模型试戴图 | |
70 | + out_price: 191.8,//销售价格,元 | |
71 | + pic: "https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg",//可供查看图 | |
72 | + pid: "6",//索引产品id | |
73 | + real_price: 99,//真实可成交价格 | |
74 | + sk_id: "74",//成交时的sku_id | |
75 | + sku_name: "1.56非球面防蓝光_黑色",//sku名称 | |
76 | + sku_shop_value: "",//sku商家定义值 | |
77 | + sku_value: "47_51",//sku系统生成值 | |
78 | + status: "1",//此产品下的sku状态 | |
79 | + } | |
80 | + ] | |
81 | + }, // 一个产品下,会有多个sku,都在这个skuList数组下 | |
82 | + msg: "ok", | |
83 | + status: 1, | |
84 | +} | |
85 | + | |
10 | 86 | const mutations = { |
11 | 87 | INIT: (state, cartList) => { |
12 | 88 | state.cartList = cartList; |
13 | 89 | }, |
90 | + DEL:(state,index)=>{ | |
91 | + console.log('mutations====>',state.cartList) | |
92 | + state.cartList.splice(index,1) | |
93 | + console.log('mutations====>index',index) | |
94 | + // state.cartList=delList | |
95 | + }, | |
96 | + MODI:(state,args) => { | |
97 | + console.log('the num',state.cartList[args.index].num) | |
98 | + console.log('mutations====>isadd',args) | |
99 | + if(args.isadd) | |
100 | + { | |
101 | + state.cartList[args.index].num=args.num | |
102 | + } else{ | |
103 | + state.cartList[args.index].num=args.num | |
104 | + } | |
105 | + console.log('the num',state.cartList[args.index].num) | |
106 | + }, | |
107 | + | |
14 | 108 | }; |
15 | 109 | |
16 | - | |
17 | - | |
18 | 110 | const actions = { |
19 | 111 | |
20 | - getCartList({ commit }, param) { | |
21 | - request({ | |
22 | - url: cartList, | |
23 | - success: (res) => { | |
24 | - | |
25 | - commit('INIT', res.data.data) | |
26 | - }, | |
27 | - fail: (res) => { | |
28 | - console.log("fail status === > ", res); | |
29 | - }, | |
30 | - complete: (res) => { | |
31 | - console.log("complete status === > ", res); | |
32 | - }, | |
33 | - }) | |
34 | - } | |
35 | - | |
112 | + getCartList({ commit }, param) { | |
113 | + request({ | |
114 | + url: cartList, | |
115 | + data:param, | |
116 | + success: (res) => { | |
117 | + console.log('cart===>接口数据',res.data.data) | |
118 | + // const resData = { | |
119 | + // ...res, | |
120 | + // data, | |
121 | + // } | |
122 | + commit('INIT', res.data.data) | |
123 | + }, | |
124 | + fail: (res) => { | |
125 | + console.log("fail status === > ", res); | |
126 | + }, | |
127 | + complete: (res) => { | |
128 | + console.log("complete status === > ", res); | |
129 | + }, | |
130 | + }) | |
131 | + }, | |
132 | + | |
133 | + modiCart({ commit }, param) { | |
134 | + const args=Object.assign({num:param.num},param.args) | |
135 | + delete param.args | |
136 | + request({ | |
137 | + url: cartModi, | |
138 | + data: param, | |
139 | + success: (res) => { | |
140 | + console.log('modi-parm',param) | |
141 | + commit('MODI',args) | |
142 | + }, | |
143 | + fail: (res) => { | |
144 | + console.log("fail status === > ", res); | |
145 | + }, | |
146 | + complete: (res) => { | |
147 | + console.log("complete status === > ", res); | |
148 | + }, | |
149 | + }) | |
150 | + }, | |
151 | + | |
152 | + delCart({ commit },param ) { | |
153 | + let arg = param.arg; | |
154 | + delete param.arg | |
155 | + request({ | |
156 | + url: cartDel, | |
157 | + data: param, | |
158 | + success: (res) => { | |
159 | + console.log('del-parm',param) | |
160 | + console.log('del-myparms==>',arg) | |
161 | + // console.log('deacart====>cartList',this.$store.state.cart.cartList) | |
162 | + | |
163 | + commit('DEL',arg) | |
164 | + }, | |
165 | + fail: (res) => { | |
166 | + console.log("fail status === > ", res); | |
167 | + }, | |
168 | + complete: (res) => { | |
169 | + console.log("complete status === > ", res); | |
170 | + }, | |
171 | + }) | |
172 | + }, | |
173 | + | |
174 | + addCart({ commit }, param) { | |
175 | + console.log('请求接口开始') | |
176 | + request({ | |
177 | + url: cartAdd, | |
178 | + data:param, | |
179 | + success: (res) => { | |
180 | + console.log('add-parm',param) | |
181 | + console.log('addcart===>res.data===>',res.data) | |
182 | + // commit('INIT', res.data.data) | |
183 | + }, | |
184 | + fail: (res) => { | |
185 | + console.log("fail status === > ", res); | |
186 | + }, | |
187 | + complete: (res) => { | |
188 | + console.log("complete status === > ", res); | |
189 | + }, | |
190 | + }) | |
191 | + }, | |
192 | + | |
36 | 193 | } |
37 | 194 | |
38 | 195 | export default { | ... | ... |
src/store/modules/categoryOrder.js
... | ... | @@ -1,40 +0,0 @@ |
1 | - import urlAlias from '../url'; | |
2 | - import request from '../request'; | |
3 | - | |
4 | - const { | |
5 | - category | |
6 | - } = urlAlias; | |
7 | - | |
8 | -const state = { | |
9 | - categoryList: [], | |
10 | -}; | |
11 | - | |
12 | -const mutations = { | |
13 | - INIT: (state, categoryList) => { | |
14 | - state.categoryList = categoryList; | |
15 | - }, | |
16 | -}; | |
17 | - | |
18 | -const actions = { | |
19 | - fetch({ commit }, param) { | |
20 | - request({ | |
21 | - url: category, | |
22 | - success: (res) => { | |
23 | - commit('INIT', res.data.data) | |
24 | - }, | |
25 | - fail: (res) => { | |
26 | - console.log("fail status === > ", res); | |
27 | - }, | |
28 | - complete: (res) => { | |
29 | - console.log("complete status === > ", res); | |
30 | - }, | |
31 | - }) | |
32 | - }, | |
33 | -}; | |
34 | - | |
35 | -export default { | |
36 | - namespaced: true, | |
37 | - state, | |
38 | - mutations, | |
39 | - actions, | |
40 | -}; |
src/store/modules/detailStandard_k.js
... | ... | @@ -2,7 +2,7 @@ import urlAlias from '../url'; |
2 | 2 | import request from '../request'; |
3 | 3 | |
4 | 4 | const { |
5 | - detailStandardList | |
5 | + detailStandardUrl | |
6 | 6 | } = urlAlias |
7 | 7 | |
8 | 8 | const state = { |
... | ... | @@ -10,29 +10,28 @@ const state = { |
10 | 10 | }; |
11 | 11 | |
12 | 12 | const mutations = { |
13 | - INIT: (state, detailStandardList) => { | |
14 | - state.detailStandardList = detailStandardList; | |
13 | + INIT: (state, data) => { | |
14 | + state.list = data; | |
15 | 15 | }, |
16 | 16 | }; |
17 | 17 | |
18 | 18 | const actions = { |
19 | - getList({ commit }, param){ | |
19 | + fetch({ commit }, param) { | |
20 | 20 | request({ |
21 | - detailStandardList, | |
22 | - success: (res) => { | |
23 | - | |
24 | - commit('INIT', res.data.data) | |
25 | - console,log('success') | |
26 | - }, | |
27 | - fail: (res) => { | |
28 | - console.log("detail status === > ", res); | |
29 | - }, | |
30 | - complete: (res) => { | |
31 | - console.log("detail compete status === > ", res); | |
32 | - }, | |
33 | - }) | |
21 | + url: detailStandardUrl, | |
22 | + data: param, | |
23 | + success: (res) => { | |
24 | + commit('INIT', res.data); | |
25 | + }, | |
26 | + fail: (res) => { | |
27 | + console.log(" detail fail status === > ", res); | |
28 | + }, | |
29 | + complete: (res) => { | |
30 | + console.log(" detail complete status === > ", res); | |
31 | + }, | |
32 | + }) | |
34 | 33 | } |
35 | -} | |
34 | + } | |
36 | 35 | |
37 | 36 | export default { |
38 | 37 | namespaced: true, | ... | ... |
src/store/modules/index.js
... | ... | @@ -0,0 +1,95 @@ |
1 | + import urlAlias from '../url'; | |
2 | + import request from '../request'; | |
3 | + | |
4 | + const { | |
5 | + category, | |
6 | + shopList, | |
7 | + search, | |
8 | + } = urlAlias; | |
9 | + | |
10 | +const state = { | |
11 | + categoryList: [], | |
12 | + list: [], | |
13 | +}; | |
14 | + | |
15 | +const mutations = { | |
16 | + LIST: (state, list) => { | |
17 | + state.list = list; | |
18 | + }, | |
19 | + CATEGORY: (state, categoryList) => { | |
20 | + state.categoryList = categoryList; | |
21 | + }, | |
22 | +}; | |
23 | + | |
24 | +const actions = { | |
25 | + category({ commit }, param) { | |
26 | + request({ | |
27 | + url: category, | |
28 | + success: (res) => { | |
29 | + console.log('category', res); | |
30 | + let data = res.data.data; | |
31 | + for(let i = 0; i<=data.length; i++) { | |
32 | + if(data[i] && data[i].type !== 'filter'){ | |
33 | + data[i].type = 'hierarchy'; | |
34 | + } | |
35 | + } | |
36 | + data.unshift({ | |
37 | + type: "hierarchy", | |
38 | + name: "全部", | |
39 | + value: "all", | |
40 | + isNoPull: true, | |
41 | + }); | |
42 | + commit('CATEGORY', data); | |
43 | + }, | |
44 | + fail: (res) => { | |
45 | + console.log("fail status === > ", res); | |
46 | + }, | |
47 | + complete: (res) => { | |
48 | + console.log("complete status === > ", res); | |
49 | + }, | |
50 | + }) | |
51 | + }, | |
52 | + list({ commit }, param) { | |
53 | + request({ | |
54 | + url: shopList, | |
55 | + success: (res) => { | |
56 | + commit('LIST', res.data.data) | |
57 | + }, | |
58 | + fail: (res) => { | |
59 | + console.log("fail status === > ", res); | |
60 | + }, | |
61 | + complete: (res) => { | |
62 | + console.log("complete status === > ", res); | |
63 | + }, | |
64 | + }) | |
65 | + }, | |
66 | + search({ commit }, { params, keyword }) { | |
67 | + const uid = uni.getStorageSync('uid'); | |
68 | + console.log("params",params, keyword); | |
69 | + request({ | |
70 | + url: search, | |
71 | + data: { | |
72 | + params: JSON.stringify(params), | |
73 | + uid, | |
74 | + way: 1, | |
75 | + keyword, | |
76 | + }, | |
77 | + success: (res) => { | |
78 | + commit('LIST', res.data.data); | |
79 | + }, | |
80 | + fail: (res) => { | |
81 | + console.log("fail status === > ", res); | |
82 | + }, | |
83 | + complete: (res) => { | |
84 | + console.log("complete status === > ", res); | |
85 | + }, | |
86 | + }) | |
87 | + } | |
88 | +}; | |
89 | + | |
90 | +export default { | |
91 | + namespaced: true, | |
92 | + state, | |
93 | + mutations, | |
94 | + actions, | |
95 | +}; | ... | ... |
src/store/modules/myOrder.js
... | ... | @@ -2,75 +2,75 @@ import urlAlias from '../url'; |
2 | 2 | import request from '../request'; |
3 | 3 | |
4 | 4 | const { |
5 | - orderList | |
5 | + myOrderList | |
6 | 6 | } = urlAlias; |
7 | 7 | |
8 | -const data = { | |
9 | - data: [ | |
10 | - { | |
11 | - finished_time: null, | |
12 | - is_refound: "0", | |
13 | - mch_id: "1436019502", | |
14 | - money_of_dcw: "0", | |
15 | - money_of_partner: "0", | |
16 | - money_of_shop: "0", | |
17 | - orderJudge: false, | |
18 | - order_info: { | |
19 | - address:{ | |
20 | - cityName: "镇江市", | |
21 | - countyName: "丹阳市", | |
22 | - detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", | |
23 | - errMsg: "chooseAddress:ok", | |
24 | - nationalCode: "321181", | |
25 | - postalCode: "212300", | |
26 | - provinceName: "江苏省", | |
27 | - telNumber: "15896379277", | |
28 | - userName: "点餐汪客服", | |
29 | - }, | |
30 | - cartinfo:['11', '12'], | |
31 | - keyname: "1_1587129366", | |
32 | - lefttime: 179995, | |
33 | - list:[ | |
34 | - { | |
35 | - cart_id: "11", | |
36 | - imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", | |
37 | - img_index_url: null, | |
38 | - memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701", | |
39 | - mp_id: "1", | |
40 | - nowPrice: 100, | |
41 | - num: "2", | |
42 | - oldPrice: "0", | |
43 | - p_discount: "1", | |
44 | - p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", | |
45 | - p_root_index: "1", | |
46 | - p_sale_price: "0", | |
47 | - peopleName: "me", | |
48 | - pics: '', | |
49 | - pid: "4", | |
50 | - sk_id: "38", | |
51 | - }, | |
52 | - ], | |
53 | - orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品", | |
54 | - total_fee: 100 | |
55 | - }, | |
56 | - partner_uid: "0", | |
57 | - pay_cate: "2020", | |
58 | - pay_id: "3", | |
59 | - pay_time: "2020-04-17 21:16:12", | |
60 | - pay_wood_desc: "在【非常戴镜】的微信付款凭证", | |
61 | - pay_wood_id: "fcdj-1-1_1587129366", | |
62 | - prepay_id: "wx172116124528226bf1a8adad1662456500", | |
63 | - re_check_staus: "0", | |
64 | - shopid: "0", | |
65 | - split_userid: "0", | |
66 | - status: "1", | |
67 | - total_fee: "100", | |
68 | - uid: "1", | |
69 | - } | |
70 | - ], | |
71 | - msg: "订单列表", | |
72 | - status: 0, | |
73 | -} | |
8 | +// const data = { | |
9 | +// data: [ | |
10 | +// { | |
11 | +// finished_time: null, | |
12 | +// is_refound: "0", | |
13 | +// mch_id: "1436019502", | |
14 | +// money_of_dcw: "0", | |
15 | +// money_of_partner: "0", | |
16 | +// money_of_shop: "0", | |
17 | +// orderJudge: false, | |
18 | +// order_info: { | |
19 | +// address:{ | |
20 | +// cityName: "镇江市", | |
21 | +// countyName: "丹阳市", | |
22 | +// detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", | |
23 | +// errMsg: "chooseAddress:ok", | |
24 | +// nationalCode: "321181", | |
25 | +// postalCode: "212300", | |
26 | +// provinceName: "江苏省", | |
27 | +// telNumber: "15896379277", | |
28 | +// userName: "点餐汪客服", | |
29 | +// }, | |
30 | +// cartinfo:['11', '12'], | |
31 | +// keyname: "1_1587129366", | |
32 | +// lefttime: 179995, | |
33 | +// list:[ | |
34 | +// { | |
35 | +// cart_id: "11", | |
36 | +// imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", | |
37 | +// img_index_url: null, | |
38 | +// memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701", | |
39 | +// mp_id: "1", | |
40 | +// nowPrice: 100, | |
41 | +// num: "2", | |
42 | +// oldPrice: "0", | |
43 | +// p_discount: "1", | |
44 | +// p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", | |
45 | +// p_root_index: "1", | |
46 | +// p_sale_price: "0", | |
47 | +// peopleName: "me", | |
48 | +// pics: '', | |
49 | +// pid: "4", | |
50 | +// sk_id: "38", | |
51 | +// }, | |
52 | +// ], | |
53 | +// orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品", | |
54 | +// total_fee: 100 | |
55 | +// }, | |
56 | +// partner_uid: "0", | |
57 | +// pay_cate: "2020", | |
58 | +// pay_id: "3", | |
59 | +// pay_time: "2020-04-17 21:16:12", | |
60 | +// pay_wood_desc: "在【非常戴镜】的微信付款凭证", | |
61 | +// pay_wood_id: "fcdj-1-1_1587129366", | |
62 | +// prepay_id: "wx172116124528226bf1a8adad1662456500", | |
63 | +// re_check_staus: "0", | |
64 | +// shopid: "0", | |
65 | +// split_userid: "0", | |
66 | +// status: "1", | |
67 | +// total_fee: "100", | |
68 | +// uid: "1", | |
69 | +// } | |
70 | +// ], | |
71 | +// msg: "订单列表", | |
72 | +// status: 0, | |
73 | +// } | |
74 | 74 | |
75 | 75 | const state = { |
76 | 76 | orderList: [], |
... | ... | @@ -85,15 +85,11 @@ const mutations = { |
85 | 85 | const actions = { |
86 | 86 | getList({ commit }, param) { |
87 | 87 | request({ |
88 | - url: orderList, | |
88 | + url: myOrderList, | |
89 | 89 | data: param, |
90 | 90 | success: (res) => { |
91 | - const resData = { | |
92 | - ...res, | |
93 | - data, | |
94 | - } | |
95 | - console.log('data.data', resData.data.data); | |
96 | - commit("INIT", resData.data.data); | |
91 | + // console.log(res.data); | |
92 | + commit("INIT", res.data.data); | |
97 | 93 | }, |
98 | 94 | }) |
99 | 95 | } | ... | ... |
src/store/modules/orderRead.js
... | ... | @@ -0,0 +1,35 @@ |
1 | + import urlAlias from '../url'; | |
2 | + import request from '../request'; | |
3 | + | |
4 | + const { | |
5 | + orderRead | |
6 | + } = urlAlias; | |
7 | + | |
8 | +const state = { | |
9 | + orderInfo: {}, | |
10 | +}; | |
11 | + | |
12 | +const mutations = { | |
13 | + INIT: (state, orderInfo) => { | |
14 | + state.orderInfo = orderInfo; | |
15 | + }, | |
16 | +}; | |
17 | + | |
18 | +const actions = { | |
19 | + getOrderInfo({ commit }, param) { | |
20 | + request({ | |
21 | + url: orderRead, | |
22 | + data: param, | |
23 | + success: (res) => { | |
24 | + commit("INIT", res.data.data); | |
25 | + }, | |
26 | + }) | |
27 | + }, | |
28 | +}; | |
29 | + | |
30 | +export default { | |
31 | + namespaced: true, | |
32 | + state, | |
33 | + mutations, | |
34 | + actions, | |
35 | +}; | ... | ... |
src/store/modules/payLog.js
... | ... | @@ -0,0 +1,27 @@ |
1 | +import urlAlias from '../url'; | |
2 | +import request from '../request'; | |
3 | + | |
4 | +const { | |
5 | + payLog | |
6 | +} = urlAlias; | |
7 | + | |
8 | + | |
9 | +const actions = { | |
10 | + payLog({ commit }, param) { | |
11 | + request({ | |
12 | + url: payLog, | |
13 | + data: param, | |
14 | + success: (res) => { | |
15 | + // console.log(res.data); | |
16 | + commit("INIT", res.data.data); | |
17 | + }, | |
18 | + }) | |
19 | + } | |
20 | +} | |
21 | + | |
22 | +export default { | |
23 | + namespaced: true, | |
24 | + // state, | |
25 | + // mutations, | |
26 | + actions, | |
27 | +} | |
0 | 28 | \ No newline at end of file | ... | ... |
src/store/modules/statusConfirm.js
... | ... | @@ -0,0 +1,37 @@ |
1 | +import urlAlias from '../url'; | |
2 | +import request from '../request'; | |
3 | + | |
4 | +const { | |
5 | + statusConfirm | |
6 | +} = urlAlias; | |
7 | + | |
8 | +// const openid = uni.getStorageSync('openid'); | |
9 | +const actions = { | |
10 | + confirm({ commit }, param) { | |
11 | + request({ | |
12 | + url: statusConfirm, | |
13 | + data: param|| { }, | |
14 | + success: (res) => { | |
15 | + console.log(res.data); | |
16 | + if(res.data.code === 1){ | |
17 | + uni.showToast({ | |
18 | + title:'已确认', | |
19 | + mask:true, | |
20 | + duration:1500, | |
21 | + icon:'success' | |
22 | + }) | |
23 | + }else{ | |
24 | + uni-uni.showToast({ | |
25 | + title: '服务器错误,确认失败!', | |
26 | + mask:true | |
27 | + }); | |
28 | + } | |
29 | + }, | |
30 | + }) | |
31 | + } | |
32 | +} | |
33 | + | |
34 | +export default { | |
35 | + namespaced: true, | |
36 | + actions, | |
37 | +} | |
0 | 38 | \ No newline at end of file | ... | ... |
src/store/modules/test.js
src/store/modules/user.js
... | ... | @@ -73,6 +73,7 @@ const actions = { |
73 | 73 | success: (res) => { |
74 | 74 | console.log('userInfo=====', res); |
75 | 75 | const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; |
76 | + uni.setStorageSync('uid', uid); | |
76 | 77 | const userInfo = { |
77 | 78 | uid, |
78 | 79 | openid, |
... | ... | @@ -112,6 +113,7 @@ const actions = { |
112 | 113 | success: (res) => { |
113 | 114 | console.log('userInfo=====', res); |
114 | 115 | const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res; |
116 | + uni.setStorageSync('uid', uid); | |
115 | 117 | const userInfo = { |
116 | 118 | uid, |
117 | 119 | openid, | ... | ... |
src/store/modules/userRecommand.js
... | ... | @@ -9,21 +9,65 @@ const state = { |
9 | 9 | recommandList: [], |
10 | 10 | }; |
11 | 11 | |
12 | +const data = { | |
13 | + "code": 1, | |
14 | + "msg": "请求成功", | |
15 | + "data": { | |
16 | + // list 表示商品数据列表 | |
17 | + "list": [ | |
18 | + { | |
19 | + model_pic: null, | |
20 | + p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜", | |
21 | + p_root_index: "1", //对应goodType | |
22 | + pic: "http://localhost/sys-glass/image/picture.png", | |
23 | + pid: "96", | |
24 | + real_price: "17800", | |
25 | + sk_id: "1448", | |
26 | + sku_name: "1.61防蓝光镜片 非球面_枪色款镜架", | |
27 | + trade_num: "0", | |
28 | + }, | |
29 | + { | |
30 | + "sk_id": "39", | |
31 | + "pic": "/static/img/goods/p1.jpg", | |
32 | + "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻", | |
33 | + "old_price": "18000", | |
34 | + "real_price": "9900", | |
35 | + "trade_num": 123, // 对应购买人数 | |
36 | + "p_root_index": 2, // 对应跳转的详情页 | |
37 | + "pid":4, // 产品id | |
38 | + }, | |
39 | + ], | |
40 | + pagesnum:1, // 懒加载要用到的页数 | |
41 | + pagessize:10,// 每次请求返回的list长度 | |
42 | + } | |
43 | + | |
44 | +} | |
45 | + | |
12 | 46 | const mutations = { |
13 | 47 | INIT: (state, list) => { |
14 | 48 | state.recommandList = list; |
15 | 49 | }, |
16 | 50 | }; |
17 | 51 | |
52 | +let goodsList=[]; | |
53 | + | |
18 | 54 | const actions = { |
19 | 55 | getRecommandList({ commit }, param) { |
20 | 56 | request({ |
21 | 57 | url: recommandList, |
22 | 58 | success: (res) => { |
23 | - console.log(res.data) | |
24 | - commit('INIT', res.data.data) | |
59 | + console.log('userRecommand-parm',param) | |
60 | + console.log(res.data.data) | |
61 | + // const Res={...res.data.data.list,...data.data.list} | |
62 | + goodsList=[...goodsList,...res.data.data] | |
63 | + // console.log(res.data) | |
64 | + commit('INIT', goodsList) | |
25 | 65 | }, |
26 | 66 | fail: (res) => { |
67 | + uni.showToast({ | |
68 | + title:"数据加载完了", | |
69 | + icon:"none" | |
70 | + }) | |
27 | 71 | console.log("fail status === > ", res); |
28 | 72 | }, |
29 | 73 | complete: (res) => { | ... | ... |
src/store/request.js
src/store/url.js
1 | 1 | const urlAlias = { |
2 | - // 获取首页商品列表 | |
3 | - shopList: '/app/prod/list', | |
4 | - | |
5 | - // 获取首页商品列表 | |
6 | - category: '/app/prod/category2', | |
7 | - // 获取商品信息 | |
8 | - read: '/app/prod/read', | |
2 | + // 获取商品信息 | |
3 | + read: '/app/prod/read', | |
9 | 4 | |
10 | 5 | // 首页 |
11 | 6 | shopList: '/app/prod/list', // 获取首页商品列表 |
12 | - category: '/app/prod/category', // 获取首页商品分类 | |
7 | + category: '/app/prod/category2', // 获取首页商品分类 | |
8 | + search: '/app/prod/search', // 首页搜索商品 | |
13 | 9 | |
14 | 10 | // 登陆 |
15 | 11 | login: '/app/glass/getOpenId', // 登陆 |
16 | 12 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 |
17 | 13 | |
18 | - // 我的订单 | |
19 | - orderList: '/app/order/list', // 获取订单列表 | |
14 | + // 我的订单 | |
15 | + myOrderList: '/app/order/list3', // 获取订单列表 | |
16 | + orderRead: '/app/order/read', // 获取订单详情 | |
17 | + cancelOrder: '/app/order/wait/del',//取消订单 | |
18 | + statusConfirm: '/app/order/statusConfirm',//订单操作 | |
19 | + payLog:'/app/pay/log',//调起支付 | |
20 | 20 | |
21 | 21 | // 购物车 |
22 | 22 | cartList: '/app/cart/list', // 获取购物车列表 |
23 | + cartModi: '/app/cart/modi', // 修改购物车 | |
24 | + cartDel: '/app/cart/del', // 删除购物车 | |
25 | + cartAdd: '/app/cart/add',// 添加购物车 | |
23 | 26 | |
24 | 27 | // 我的 |
25 | 28 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 |
26 | 29 | |
27 | - // 镜框选购页 | |
28 | - detailStandardList: '/app/prod/read', //获取商品的详细信息 | |
30 | + // 选购页 | |
31 | + detailStandardUrl: '/app/prod/read', //获取商品的详细信息 | |
29 | 32 | |
30 | 33 | } |
31 | 34 | ... | ... |