Commit f1da24fb30607b6d39e18bac713e45778b577462
Exists in
master
s
Showing
36 changed files
Show diff stats
src/components/CommodityCard/CommodityCard.vue
1 | <template> | 1 | <template> |
2 | <view class="card" @tap="toGoods(goods.id)"> | 2 | <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> |
3 | <image mode="widthFix" :src="goods.imgurl" ></image> | 3 | <image mode="widthFix" :src="goods.img" ></image> |
4 | <view class="name">{{goods.name}}</view> | 4 | <view class="name">{{goods.name}}</view> |
5 | <view class="info"> | 5 | <view class="info"> |
6 | <view class="priceBox"> | 6 | <view class="priceBox"> |
7 | <view class="price">{{goods.rsSon.Min_Price}}</view> | 7 | <view class="price">{{goods.price}}</view> |
8 | <view class="originCost"> | 8 | <view class="originCost"> |
9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} | 9 | {{goods.originCost}} |
10 | <!-- {{goods.oldPrice}} --> | ||
11 | </view> | 10 | </view> |
12 | </view> | 11 | </view> |
13 | <view class="slogan">{{goods.trade_num}}</view> | 12 | <view class="slogan">{{goods.slogan}}</view> |
14 | </view> | 13 | </view> |
15 | </view> | 14 | </view> |
16 | </template> | 15 | </template> |
17 | 16 | ||
18 | <script> | 17 | <script> |
19 | export default { | 18 | export default { |
20 | props: { | 19 | props: { |
21 | /** | 20 | /** |
22 | * 商品数据 | 21 | * 商品数据 |
23 | */ | 22 | */ |
24 | goods: { | 23 | goods: { |
25 | id: Number, | 24 | goods_id: Number, |
26 | imgurl: String, | 25 | img: String, |
27 | name: String, | 26 | name: String, |
28 | oldPrice:String, | 27 | originCost:String, |
29 | price: String, | 28 | price: String, |
30 | memo:String | 29 | slogan:String, |
30 | goodType:String, | ||
31 | } | 31 | } |
32 | 32 | ||
33 | }, | 33 | }, |
34 | created() { | 34 | created() { |
35 | console.log(this.goods) | ||
35 | }, | 36 | }, |
36 | data() { | 37 | data() { |
37 | return { | 38 | return { |
38 | 39 | ||
39 | }; | 40 | }; |
40 | }, | 41 | }, |
41 | methods:{ | 42 | methods:{ |
42 | toGoods(id){ | 43 | toGoods(id,type){ |
43 | console.log('toGoods =====> id======>', id) | 44 | // console.log('toGoods =====> id======>', id) |
44 | uni.navigateTo({ | 45 | // console.log(type) |
45 | url: `../detail/detail?oderId=1`, | 46 | switch(type){ |
46 | success: res => {}, | 47 | case 1: |
47 | fail: () => {}, | 48 | uni.navigateTo({ |
48 | complete: () => {} | 49 | url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, |
49 | }); | 50 | success: res => {}, |
51 | fail: () => {}, | ||
52 | complete: () => {} | ||
53 | }); | ||
54 | break; | ||
55 | case 2: | ||
56 | uni.navigateTo({ | ||
57 | url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | ||
58 | success: res => {}, | ||
59 | fail: () => {}, | ||
60 | complete: () => {} | ||
61 | }); | ||
62 | break; | ||
63 | case 3: | ||
64 | uni.navigateTo({ | ||
65 | url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | ||
66 | success: res => {}, | ||
67 | fail: () => {}, | ||
68 | complete: () => {} | ||
69 | }); | ||
70 | break; | ||
71 | case 4: | ||
72 | uni.navigateTo({ | ||
73 | url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, | ||
74 | success: res => {}, | ||
75 | fail: () => {}, | ||
76 | complete: () => {} | ||
77 | }); | ||
78 | break; | ||
79 | default : | ||
80 | break | ||
81 | } | ||
50 | } | 82 | } |
51 | } | 83 | } |
52 | } | 84 | } |
53 | </script> | 85 | </script> |
54 | 86 | ||
55 | <style lang="scss"> | 87 | <style lang="scss"> |
56 | image{ | 88 | image{ |
57 | width: 100%; | 89 | width: 100%; |
58 | height: 120rpx; | 90 | height: 120rpx; |
59 | } | 91 | } |
60 | .name{ | 92 | .name{ |
61 | width: 92%; | 93 | width: 92%; |
62 | height: 54rpx; | 94 | height: 54rpx; |
63 | padding: 5px 4%; | 95 | padding: 5px 4%; |
64 | display: -webkit-box; | 96 | display: -webkit-box; |
65 | -webkit-box-orient: vertical; | 97 | -webkit-box-orient: vertical; |
66 | -webkit-line-clamp: 2; | 98 | -webkit-line-clamp: 2; |
67 | text-align: justify; | 99 | text-align: justify; |
68 | overflow: hidden; | 100 | overflow: hidden; |
69 | font-size: 24rpx; | 101 | font-size: 24rpx; |
70 | color: #333333; | 102 | color: #333333; |
71 | } | 103 | } |
72 | .info{ | 104 | .info{ |
73 | display: flex; | 105 | display: flex; |
74 | justify-content: space-between; | 106 | justify-content: space-between; |
75 | align-items: center; | 107 | align-items: center; |
76 | width: 92%; | 108 | width: 92%; |
77 | padding: 5px 4% 5px 4%; | 109 | padding: 5px 4% 5px 4%; |
78 | .priceBox{ | 110 | .priceBox{ |
79 | display: flex; | 111 | display: flex; |
80 | justify-content: space-between; | 112 | justify-content: space-between; |
81 | align-items: center; | 113 | align-items: center; |
82 | .price{ | 114 | .price{ |
83 | color: #EB5D3B; | 115 | color: #EB5D3B; |
84 | font-size: 28rpx; | 116 | font-size: 28rpx; |
85 | font-weight: 600; | 117 | font-weight: 600; |
86 | margin-right: 10rpx; | 118 | margin-right: 10rpx; |
87 | } | 119 | } |
88 | .originCost{ | 120 | .originCost{ |
89 | text-decoration:line-through; | 121 | text-decoration:line-through; |
90 | color: #999999; | 122 | color: #999999; |
91 | font-size: 20rpx; | 123 | font-size: 20rpx; |
92 | } | 124 | } |
93 | 125 | ||
94 | } | 126 | } |
95 | .slogan{ | 127 | .slogan{ |
96 | color: #999999; | 128 | color: #999999; |
97 | font-size: 20rpx; | 129 | font-size: 20rpx; |
98 | } | 130 | } |
99 | } | 131 | } |
100 | </style> | 132 | </style> |
src/components/UniCollapseItem/UniCollapseItem.vue
1 | <template> | 1 | <template> |
2 | <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" | 2 | <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" |
3 | class="uni-collapse-cell"> | 3 | class="uni-collapse-cell"> |
4 | <view class="uni-collapse-cell__title" @click="onClick"> | 4 | <view class="uni-collapse-cell__title" @click="onClick"> |
5 | <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> | 5 | <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> |
6 | <text class="uni-collapse-cell__title-text">{{ title }}</text> | 6 | <text class="uni-collapse-cell__title-text">{{ title }}</text> |
7 | <!-- #ifdef MP-ALIPAY --> | 7 | <!-- #ifdef MP-ALIPAY --> |
8 | <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" | 8 | <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" |
9 | class="uni-collapse-cell__title-arrow"> | 9 | class="uni-collapse-cell__title-arrow"> |
10 | <uni-icons color="#bbb" size="20" type="arrowdown" /> | 10 | <uni-icons color="#bbb" size="20" type="arrowdown" /> |
11 | </view> | 11 | </view> |
12 | <!-- #endif --> | 12 | <!-- #endif --> |
13 | <!-- #ifndef MP-ALIPAY --> | 13 | <!-- #ifndef MP-ALIPAY --> |
14 | <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" | 14 | <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" |
15 | class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> | 15 | class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> |
16 | <!-- #endif --> | 16 | <!-- #endif --> |
17 | </view> | 17 | </view> |
18 | <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> | 18 | <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> |
19 | <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"> | 19 | <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" |
20 | :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}" | ||
21 | > | ||
20 | <slot /> | 22 | <slot /> |
21 | </view> | 23 | </view> |
22 | </view> | 24 | </view> |
23 | </view> | 25 | </view> |
24 | </template> | 26 | </template> |
25 | 27 | ||
26 | <script> | 28 | <script> |
27 | import UniIcons from '../UniIcons/UniIcons.vue' | 29 | import UniIcons from '../UniIcons/UniIcons.vue' |
28 | export default { | 30 | export default { |
29 | name: 'UniCollapseItem', | 31 | name: 'UniCollapseItem', |
30 | components: { | 32 | components: { |
31 | UniIcons | 33 | UniIcons |
32 | }, | 34 | }, |
33 | props: { | 35 | props: { |
34 | title: { | 36 | title: { |
35 | // 列表标题 | 37 | // 列表标题 |
36 | type: String, | 38 | type: String, |
37 | default: '' | 39 | default: '' |
38 | }, | 40 | }, |
39 | name: { | 41 | name: { |
40 | // 唯一标识符 | 42 | // 唯一标识符 |
41 | type: [Number, String], | 43 | type: [Number, String], |
42 | default: 0 | 44 | default: 0 |
43 | }, | 45 | }, |
44 | disabled: { | 46 | disabled: { |
45 | // 是否禁用 | 47 | // 是否禁用 |
46 | type: Boolean, | 48 | type: Boolean, |
47 | default: false | 49 | default: false |
48 | }, | 50 | }, |
49 | showAnimation: { | 51 | showAnimation: { |
50 | // 是否显示动画 | 52 | // 是否显示动画 |
51 | type: Boolean, | 53 | type: Boolean, |
52 | default: false | 54 | default: false |
53 | }, | 55 | }, |
54 | open: { | 56 | open: { |
55 | // 是否展开 | 57 | // 是否展开 |
56 | type: Boolean, | 58 | type: Boolean, |
57 | default: false | 59 | default: false |
58 | }, | 60 | }, |
59 | thumb: { | 61 | thumb: { |
60 | // 缩略图 | 62 | // 缩略图 |
61 | type: String, | 63 | type: String, |
62 | default: '' | 64 | default: '' |
63 | } | 65 | } |
64 | }, | 66 | }, |
65 | data() { | 67 | data() { |
66 | return { | 68 | return { |
67 | isOpen: false | 69 | isOpen: false |
68 | } | 70 | } |
69 | }, | 71 | }, |
70 | watch: { | 72 | watch: { |
71 | open(val) { | 73 | open(val) { |
72 | this.isOpen = val | 74 | this.isOpen = val |
73 | } | 75 | } |
74 | }, | 76 | }, |
75 | inject: ['collapse'], | 77 | inject: ['collapse'], |
76 | created() { | 78 | created() { |
77 | this.isOpen = this.open | 79 | this.isOpen = this.open |
78 | this.nameSync = this.name ? this.name : this.collapse.childrens.length | 80 | this.nameSync = this.name ? this.name : this.collapse.childrens.length |
79 | this.collapse.childrens.push(this) | 81 | this.collapse.childrens.push(this) |
80 | if (String(this.collapse.accordion) === 'true') { | 82 | if (String(this.collapse.accordion) === 'true') { |
81 | if (this.isOpen) { | 83 | if (this.isOpen) { |
82 | let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] | 84 | let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] |
83 | if (lastEl) { | 85 | if (lastEl) { |
84 | this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false | 86 | this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false |
85 | } | 87 | } |
86 | } | 88 | } |
87 | } | 89 | } |
88 | }, | 90 | }, |
89 | methods: { | 91 | methods: { |
90 | onClick() { | 92 | onClick() { |
91 | if (this.disabled) { | 93 | if (this.disabled) { |
92 | return | 94 | return |
93 | } | 95 | } |
94 | if (String(this.collapse.accordion) === 'true') { | 96 | if (String(this.collapse.accordion) === 'true') { |
95 | this.collapse.childrens.forEach(vm => { | 97 | this.collapse.childrens.forEach(vm => { |
96 | if (vm === this) { | 98 | if (vm === this) { |
97 | return | 99 | return |
98 | } | 100 | } |
99 | vm.isOpen = false | 101 | vm.isOpen = false |
100 | }) | 102 | }) |
101 | } | 103 | } |
102 | this.isOpen = !this.isOpen | 104 | this.isOpen = !this.isOpen |
103 | this.collapse.onChange && this.collapse.onChange() | 105 | this.collapse.onChange && this.collapse.onChange() |
104 | this.$forceUpdate() | 106 | this.$forceUpdate() |
105 | console.log(this.isOpen) | 107 | console.log(this.isOpen) |
106 | } | 108 | } |
107 | } | 109 | } |
108 | } | 110 | } |
109 | </script> | 111 | </script> |
110 | 112 | ||
111 | <style lang="scss" scoped> | 113 | <style lang="scss" scoped> |
112 | @import '@/uni.scss'; | 114 | @import '@/uni.scss'; |
113 | 115 | ||
114 | .uni-collapse-cell { | 116 | .uni-collapse-cell { |
115 | flex-direction: column; | 117 | flex-direction: column; |
116 | border-color: #FFFFFF; | 118 | border-color: #FFFFFF; |
117 | border-bottom-width: 1px; | 119 | border-bottom-width: 1px; |
118 | border-bottom-style: solid; | 120 | border-bottom-style: solid; |
119 | } | 121 | } |
120 | 122 | ||
121 | 123 | ||
122 | .uni-collapse-cell--hover { | 124 | .uni-collapse-cell--hover { |
123 | background-color: #FFFFFF; | 125 | background-color: #FFFFFF; |
124 | } | 126 | } |
125 | 127 | ||
126 | .uni-collapse-cell--open { | 128 | .uni-collapse-cell--open { |
127 | background-color: #FFFFFF; | 129 | background-color: #FFFFFF; |
128 | } | 130 | } |
129 | 131 | ||
130 | .uni-collapse-cell--disabled { | 132 | .uni-collapse-cell--disabled { |
131 | background-color: #FFFFFF; | 133 | background-color: #FFFFFF; |
132 | // opacity: 0.3; | 134 | // opacity: 0.3; |
133 | } | 135 | } |
134 | 136 | ||
135 | 137 | ||
136 | .uni-collapse-cell--hide { | 138 | .uni-collapse-cell--hide { |
137 | height: 48px; | 139 | height: 48px; |
138 | } | 140 | } |
139 | 141 | ||
140 | .uni-collapse-cell--animation { | 142 | .uni-collapse-cell--animation { |
141 | transition: transform 0.5s ease; | 143 | transition: transform 0s ease; |
142 | transition-property: transform; | 144 | transition-property: transform; |
143 | transition-duration: 0.5s; | 145 | transition-duration: 0s; |
144 | transition-timing-function: ease; | 146 | transition-timing-function: ease; |
145 | } | 147 | } |
146 | 148 | ||
147 | .uni-collapse-cell__title { | 149 | .uni-collapse-cell__title { |
148 | // padding: 12px 12px; | 150 | // padding: 12px 12px; |
149 | font-size: 16px; | 151 | font-size: 16px; |
150 | color: #333333; | 152 | color: #333333; |
151 | position: relative; | 153 | position: relative; |
152 | /* #ifndef APP-NVUE */ | 154 | /* #ifndef APP-NVUE */ |
153 | display: flex; | 155 | display: flex; |
154 | width: 100%; | 156 | width: 100%; |
155 | box-sizing: border-box; | 157 | box-sizing: border-box; |
156 | /* #endif */ | 158 | /* #endif */ |
157 | height: 48px; | 159 | height: 48px; |
158 | line-height: 24px; | 160 | line-height: 24px; |
159 | flex-direction: row; | 161 | flex-direction: row; |
160 | justify-content: space-between; | 162 | justify-content: space-between; |
161 | align-items: center; | 163 | align-items: center; |
162 | } | 164 | } |
163 | 165 | ||
164 | .uni-collapse-cell__title:active { | 166 | .uni-collapse-cell__title:active { |
165 | background-color: #FFFFFF; | 167 | background-color: #FFFFFF; |
166 | } | 168 | } |
167 | 169 | ||
168 | .uni-collapse-cell__title-img { | 170 | .uni-collapse-cell__title-img { |
169 | height: $uni-img-size-base; | 171 | height: $uni-img-size-base; |
170 | width: $uni-img-size-base; | 172 | width: $uni-img-size-base; |
171 | margin-right: 10px; | 173 | margin-right: 10px; |
172 | } | 174 | } |
173 | 175 | ||
174 | .uni-collapse-cell__title-arrow { | 176 | .uni-collapse-cell__title-arrow { |
175 | width: 20px; | 177 | width: 20px; |
176 | height: 20px; | 178 | height: 20px; |
177 | transform: rotate(0deg); | 179 | transform: rotate(0deg); |
178 | transform-origin: center center; | 180 | transform-origin: center center; |
179 | 181 | ||
180 | } | 182 | } |
181 | 183 | ||
182 | .uni-collapse-cell__title-arrow-active { | 184 | .uni-collapse-cell__title-arrow-active { |
183 | transform: rotate(180deg); | 185 | transform: rotate(180deg); |
184 | } | 186 | } |
185 | 187 | ||
186 | .uni-collapse-cell__title-text { | 188 | .uni-collapse-cell__title-text { |
187 | flex: 1; | 189 | flex: 1; |
188 | font-size: $uni-font-size-base; | 190 | font-size: $uni-font-size-base; |
189 | /* #ifndef APP-NVUE */ | 191 | /* #ifndef APP-NVUE */ |
190 | white-space: nowrap; | 192 | white-space: nowrap; |
191 | color: inherit; | 193 | color: inherit; |
192 | /* #endif */ | 194 | /* #endif */ |
193 | /* #ifdef APP-NVUE */ | 195 | /* #ifdef APP-NVUE */ |
194 | lines: 1; | 196 | lines: 1; |
195 | /* #endif */ | 197 | /* #endif */ |
196 | overflow: hidden; | 198 | overflow: hidden; |
197 | text-overflow: ellipsis; | 199 | text-overflow: ellipsis; |
198 | } | 200 | } |
199 | 201 | ||
200 | .uni-collapse-cell__content { | 202 | .uni-collapse-cell__content { |
201 | overflow: hidden; | 203 | overflow: hidden; |
202 | } | 204 | } |
203 | 205 | ||
204 | .uni-collapse-cell__wrapper { | 206 | .uni-collapse-cell__wrapper { |
205 | /* #ifndef APP-NVUE */ | 207 | /* #ifndef APP-NVUE */ |
206 | display: flex; | 208 | display: flex; |
207 | /* #endif */ | 209 | /* #endif */ |
208 | flex-direction: column; | 210 | flex-direction: column; |
209 | } | 211 | } |
210 | 212 | ||
211 | .uni-collapse-cell__content--hide { | 213 | .uni-collapse-cell__content--hide { |
212 | // height: 0px; | 214 | // height: 0px; |
213 | // line-height: 0px; | 215 | // line-height: 0px; |
214 | } | 216 | } |
215 | </style> | 217 | </style> |
216 | 218 |
src/components/UniCountdown/UniCountdown.vue
File was created | 1 | <template> | |
2 | <view class="uni-countdown"> | ||
3 | <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text> | ||
4 | <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text> | ||
5 | <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text> | ||
6 | <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text> | ||
7 | <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text> | ||
8 | <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text> | ||
9 | <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text> | ||
10 | <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text> | ||
11 | </view> | ||
12 | </template> | ||
13 | <script> | ||
14 | export default { | ||
15 | name: 'UniCountdown', | ||
16 | props: { | ||
17 | |||
18 | showDay: { | ||
19 | type: Boolean, | ||
20 | default: true | ||
21 | }, | ||
22 | showColon: { | ||
23 | type: Boolean, | ||
24 | default: true | ||
25 | }, | ||
26 | backgroundColor: { | ||
27 | type: String, | ||
28 | default: '#FFFFFF' | ||
29 | }, | ||
30 | borderColor: { | ||
31 | type: String, | ||
32 | default: '#000000' | ||
33 | }, | ||
34 | color: { | ||
35 | type: String, | ||
36 | default: '#000000' | ||
37 | }, | ||
38 | splitorColor: { | ||
39 | type: String, | ||
40 | default: '#000000' | ||
41 | }, | ||
42 | day: { | ||
43 | type: Number, | ||
44 | default: 0 | ||
45 | }, | ||
46 | hour: { | ||
47 | type: Number, | ||
48 | default: 0 | ||
49 | }, | ||
50 | minute: { | ||
51 | type: Number, | ||
52 | default: 0 | ||
53 | }, | ||
54 | second: { | ||
55 | type: Number, | ||
56 | default: 0 | ||
57 | } | ||
58 | }, | ||
59 | data() { | ||
60 | return { | ||
61 | timer: null, | ||
62 | syncFlag: false, | ||
63 | d: '00', | ||
64 | h: '00', | ||
65 | i: '00', | ||
66 | s: '00', | ||
67 | leftTime: 0, | ||
68 | seconds: 0 | ||
69 | } | ||
70 | }, | ||
71 | watch: { | ||
72 | day(val) { | ||
73 | this.changeFlag() | ||
74 | }, | ||
75 | hour(val) { | ||
76 | this.changeFlag() | ||
77 | }, | ||
78 | minute(val) { | ||
79 | this.changeFlag() | ||
80 | }, | ||
81 | second(val) { | ||
82 | this.changeFlag() | ||
83 | } | ||
84 | }, | ||
85 | created: function(e) { | ||
86 | this.startData(); | ||
87 | }, | ||
88 | beforeDestroy() { | ||
89 | clearInterval(this.timer) | ||
90 | }, | ||
91 | methods: { | ||
92 | toSeconds(day, hours, minutes, seconds) { | ||
93 | return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds | ||
94 | }, | ||
95 | timeUp() { | ||
96 | clearInterval(this.timer) | ||
97 | this.$emit('timeup') | ||
98 | }, | ||
99 | countDown() { | ||
100 | let seconds = this.seconds | ||
101 | let [day, hour, minute, second] = [0, 0, 0, 0] | ||
102 | if (seconds > 0) { | ||
103 | day = Math.floor(seconds / (60 * 60 * 24)) | ||
104 | hour = Math.floor(seconds / (60 * 60)) - (day * 24) | ||
105 | minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60) | ||
106 | second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) | ||
107 | } else { | ||
108 | this.timeUp() | ||
109 | } | ||
110 | if (day < 10) { | ||
111 | day = '0' + day | ||
112 | } | ||
113 | if (hour < 10) { | ||
114 | hour = '0' + hour | ||
115 | } | ||
116 | if (minute < 10) { | ||
117 | minute = '0' + minute | ||
118 | } | ||
119 | if (second < 10) { | ||
120 | second = '0' + second | ||
121 | } | ||
122 | this.d = day | ||
123 | this.h = hour | ||
124 | this.i = minute | ||
125 | this.s = second | ||
126 | }, | ||
127 | startData() { | ||
128 | this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second) | ||
129 | if (this.seconds <= 0) { | ||
130 | return | ||
131 | } | ||
132 | this.countDown() | ||
133 | this.timer = setInterval(() => { | ||
134 | this.seconds-- | ||
135 | if (this.seconds < 0) { | ||
136 | this.timeUp() | ||
137 | return | ||
138 | } | ||
139 | this.countDown() | ||
140 | }, 1000) | ||
141 | }, | ||
142 | changeFlag() { | ||
143 | if (!this.syncFlag) { | ||
144 | this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second) | ||
145 | this.startData(); | ||
146 | this.syncFlag = true; | ||
147 | } | ||
148 | clearInterval(this.timer) | ||
149 | } | ||
150 | } | ||
151 | } | ||
152 | </script> | ||
153 | <style lang="scss" scoped> | ||
154 | @import '~@/uni.scss'; | ||
155 | $countdown-height: 48rpx; | ||
156 | $countdown-width: 52rpx; | ||
157 | |||
158 | .uni-countdown { | ||
159 | /* #ifndef APP-NVUE */ | ||
160 | display: flex; | ||
161 | /* #endif */ | ||
162 | flex-direction: row; | ||
163 | justify-content: flex-start; | ||
164 | padding: 2rpx 0; | ||
165 | } | ||
166 | |||
167 | .uni-countdown__splitor { | ||
168 | /* #ifndef APP-NVUE */ | ||
169 | display: flex; | ||
170 | /* #endif */ | ||
171 | justify-content: center; | ||
172 | line-height: $countdown-height; | ||
173 | padding: 5rpx; | ||
174 | font-size: 18px; | ||
175 | } | ||
176 | |||
177 | .uni-countdown__number { | ||
178 | /* #ifndef APP-NVUE */ | ||
179 | display: flex; | ||
180 | /* #endif */ | ||
181 | justify-content: center; | ||
182 | align-items: center; | ||
183 | width: $countdown-width; | ||
184 | height: $countdown-height; | ||
185 | line-height: $countdown-height; | ||
186 | margin: 5rpx; | ||
187 | text-align: center; | ||
188 | font-size: 18px; | ||
189 | } | ||
190 | </style> | ||
191 |
src/components/UniSliper/UniSliper.vue
File was created | 1 | <template> | |
2 | <div class="c-progress"> | ||
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> | ||
6 | </div> | ||
7 | <span v-if="showPerText">{{stand_width}}mm</span> | ||
8 | </div> | ||
9 | </template> | ||
10 | |||
11 | <script> | ||
12 | // 使用了element的颜色 | ||
13 | const colorTable = { | ||
14 | success: '#13ce66', | ||
15 | fail: '#ff4949', | ||
16 | warning: '#e6a23c', | ||
17 | default: '#409EFF' | ||
18 | } | ||
19 | export default { | ||
20 | name: 'CProgress', | ||
21 | 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 | } | ||
67 | }, | ||
68 | data () { | ||
69 | return { | ||
70 | sliderLeft: 0, // 滑块相对父元素发x坐标 | ||
71 | progressWidth: 0, // 进度条当前的的宽度 | ||
72 | tempPercent: 0, | ||
73 | } | ||
74 | }, | ||
75 | computed: { | ||
76 | // 设置进度条的背景样式 | ||
77 | setProgressBgStyle () { | ||
78 | return { | ||
79 | // 加上滑块的宽度 | ||
80 | width: `${this.width + this.sliderWidth}px` | ||
81 | } | ||
82 | }, | ||
83 | // 设置进度条的样式 | ||
84 | setProgressStyle () { | ||
85 | const color = colorTable[this.type] || this.progressColor | ||
86 | return { | ||
87 | width: `${this.progressWidth}px`, | ||
88 | background: color | ||
89 | } | ||
90 | }, | ||
91 | // 设置滑块的样式 | ||
92 | setSliderStyle () { | ||
93 | const color = colorTable[this.type] || this.progressColor | ||
94 | return { | ||
95 | border: `1px solid ${color}`, | ||
96 | width: `${this.sliderWidth}px`, | ||
97 | height: `${this.sliderWidth}px`, | ||
98 | left: `${this.sliderLeft}px` | ||
99 | } | ||
100 | } | ||
101 | }, | ||
102 | mounted () { | ||
103 | this.sliderLeft = this.width / 100 * this.percent | ||
104 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 | ||
105 | this.tempPercent = this.percent | ||
106 | this.addListener() | ||
107 | }, | ||
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 | } | ||
165 | } | ||
166 | </script> | ||
167 | |||
168 | <style scoped lang="scss"> | ||
169 | .c-progress { | ||
170 | $width: 300px; | ||
171 | $radius: 5px; | ||
172 | display: flex; | ||
173 | align-items: center; | ||
174 | |||
175 | span { | ||
176 | margin-left: 5px; | ||
177 | font-size: 14px; | ||
178 | color: #666; | ||
179 | } | ||
180 | |||
181 | .c-progress-outer { | ||
182 | width: $width; | ||
183 | height: 10px; | ||
184 | background: #ebeef5; | ||
185 | position: relative; | ||
186 | display: flex; | ||
187 | align-items: center; | ||
188 | |||
189 | .c-progress-inner { | ||
190 | width: 100px; | ||
191 | height: 10px; | ||
192 | background: #409EFF; | ||
193 | } | ||
194 | |||
195 | .c-progress-slider { | ||
196 | width: 20px; | ||
197 | height: 20px; | ||
198 | border-radius: 50%; | ||
199 | background: #fff; | ||
200 | border: 1px solid #409EFF; | ||
201 | position: absolute; | ||
202 | z-index: 10; | ||
203 | left: 10px; | ||
204 | } | ||
205 | } | ||
206 | } | ||
207 | </style> |
src/pages.json
1 | { | 1 | { |
2 | "pages": [ | 2 | "pages": [ |
3 | { | 3 | { |
4 | "path": "pages/cart/cart", | ||
5 | "style": { | ||
6 | "navigationBarTitleText": "购物车" | ||
7 | } | ||
8 | }, | ||
9 | { | ||
10 | "path": "pages/index/index", | 4 | "path": "pages/index/index", |
11 | "style": { | 5 | "style": { |
12 | "navigationBarTitleText": "商城一览" | 6 | "navigationBarTitleText": "商城一览" |
13 | } | 7 | } |
14 | }, | 8 | }, |
9 | { | ||
10 | "path": "pages/myOrder/myOrder", | ||
11 | "style": { | ||
12 | "navigationBarTitleText": "我的订单" | ||
13 | } | ||
15 | { | 14 | }, |
16 | "path": "pages/frameDetail/frameDetail", | 15 | { |
17 | "style": { | 16 | "path": "pages/frameDetail/frameDetail", |
18 | "navigationBarTitleText": "产品详情" | 17 | "style": { |
19 | } | 18 | "navigationBarTitleText": "产品详情" |
20 | }, | 19 | } |
21 | { | 20 | }, |
22 | "path": "pages/lensDetails/lensDetails", | 21 | { |
23 | "style": { | 22 | "path": "pages/lensDetails/lensDetails", |
24 | "navigationBarTitleText": "产品详情" | 23 | "style": { |
25 | } | 24 | "navigationBarTitleText": "产品详情" |
26 | }, | 25 | } |
26 | }, | ||
27 | { | ||
28 | "path": "pages/cart/cart", | ||
29 | "style": { | ||
30 | "navigationBarTitleText": "购物车" | ||
31 | } | ||
27 | { | 32 | }, |
28 | "path": "pages/purchaseLenses/purchaseLenses", | 33 | { |
29 | "style": { | 34 | "path": "pages/purchaseLenses/purchaseLenses", |
30 | "navigationBarTitleText": "产品选购" | 35 | "style": { |
31 | } | 36 | "navigationBarTitleText": "产品选购" |
32 | }, | 37 | } |
33 | { | 38 | }, |
34 | "path": "pages/refundProgress/refundProgress", | 39 | { |
35 | "style": { | 40 | "path": "pages/refundProgress/refundProgress", |
36 | "navigationBarTitleText": "申请退款" | 41 | "style": { |
37 | } | 42 | "navigationBarTitleText": "申请退款" |
38 | }, | 43 | } |
39 | { | ||
40 | "path": "pages/myOrder/myOrder", | ||
41 | "style": { | ||
42 | "navigationBarTitleText": "我的订单" | ||
43 | } | ||
44 | }, | 44 | }, |
45 | { | 45 | { |
46 | "path": "pages/addAddress/addAddress", | 46 | "path": "pages/addAddress/addAddress", |
47 | "style": { | 47 | "style": { |
48 | "navigationBarTitleText": "新增地址" | 48 | "navigationBarTitleText": "新增地址" |
49 | } | 49 | } |
50 | }, | 50 | }, |
51 | { | 51 | { |
52 | "path": "pages/confirmOrder/confirmOrder", | 52 | "path": "pages/confirmOrder/confirmOrder", |
53 | "style": { | 53 | "style": { |
54 | "navigationBarTitleText": "确认订单" | ||
55 | } | ||
56 | }, | ||
57 | { | ||
58 | "path": "pages/user/user", | ||
59 | "style": { | 54 | "navigationBarTitleText": "确认订单" |
60 | "navigationBarTitleText": "我的" | 55 | } |
56 | }, | ||
57 | { | ||
58 | "path": "pages/user/user", | ||
59 | "style": { | ||
60 | "navigationBarTitleText": "我的" | ||
61 | } | ||
61 | } | 62 | }, |
62 | }, | 63 | { |
63 | { | 64 | "path": "pages/refundment/refundWays" |
64 | "path": "pages/refundment/refundWays" | 65 | }, |
65 | }, | 66 | { |
66 | { | 67 | "path": "pages/refundment/refundment" |
67 | "path": "pages/refundment/refundment" | 68 | }, |
68 | }, | 69 | { |
69 | { | 70 | "path": "pages/predelivery/predelivery" |
70 | "path": "pages/Predelivery/Predelivery" | 71 | }, |
71 | }, | 72 | { |
73 | "path": "pages/customerService/customerService", | ||
74 | "style": { | ||
75 | "navigationBarTitleText": "在线客服" | ||
76 | } | ||
77 | }, | ||
78 | { | ||
79 | "path": "pages/myOrderPaying/myOrderPaying", | ||
80 | "style": { | ||
81 | "navigationBarTitleText": "我的订单" | ||
82 | } | ||
83 | }, | ||
84 | { | ||
85 | "path": "pages/detailsChoiceArgs/detailsChoiceArgs", | ||
86 | "style": { | ||
87 | "navigationBarTitleText": "镜片名称名称" | ||
88 | } | ||
89 | }, | ||
90 | { | ||
91 | "path": "pages/detailStandard/detailStandard_sun", | ||
92 | "style": { | ||
93 | "navigationBarTitleText": "太阳镜选购页" | ||
72 | { | 94 | } |
73 | "path": "pages/customerService/customerService" | 95 | }, |
74 | }, | 96 | { |
75 | { | 97 | "path": "pages/detailStandard/detailStandard_k", |
98 | "style": { | ||
99 | "navigationBarTitleText": "镜框选购页" | ||
100 | } | ||
76 | "path": "pages/myOrderPaying/myOrderPaying" | 101 | } |
77 | } | 102 | ], |
78 | ], | 103 | "globalStyle": { |
79 | "globalStyle": { | 104 | "navigationBarTextStyle": "black", |
80 | "navigationBarTextStyle": "black", | 105 | "navigationBarTitleText": "uni-app", |
81 | "navigationBarTitleText": "uni-app", | 106 | "navigationBarBackgroundColor": "#F8F8F8", |
82 | "navigationBarBackgroundColor": "#F8F8F8", | 107 | "backgroundColor": "#F8F8F8" |
83 | "backgroundColor": "#F8F8F8" | 108 | }, |
84 | }, | 109 | "tabBar": { |
85 | "tabBar": { | 110 | "color": "#C0C4CC", |
86 | "color": "#C0C4CC", | 111 | "selectedColor": "#fa436a", |
87 | "selectedColor": "#fa436a", | 112 | "borderStyle": "black", |
88 | "borderStyle": "black", | 113 | "backgroundColor": "#ffffff", |
89 | "backgroundColor": "#ffffff", | 114 | "list": [ |
90 | "list": [ | 115 | { |
91 | { | 116 | "pagePath": "pages/index/index", |
92 | "pagePath": "pages/index/index", | 117 | "iconPath": "static/tab-home.png", |
93 | "iconPath": "static/tab-home.png", | 118 | "selectedIconPath": "static/tab-home-current.png", |
94 | "selectedIconPath": "static/tab-home-current.png", | 119 | "text": "首页" |
95 | "text": "首页" | 120 | }, |
96 | }, | 121 | { |
97 | { | 122 | "pagePath": "pages/cart/cart", |
98 | "pagePath": "pages/cart/cart", | 123 | "iconPath": "static/tab-cart.png", |
99 | "iconPath": "static/tab-cart.png", | 124 | "selectedIconPath": "static/tab-cart-current.png", |
100 | "selectedIconPath": "static/tab-cart-current.png", | 125 | "text": "购物车" |
101 | "text": "购物车" | 126 | }, |
102 | }, | 127 | { |
103 | { | 128 | "pagePath": "pages/user/user", |
104 | "pagePath": "pages/user/user", | 129 | "iconPath": "static/tab-my.png", |
src/pages/Predelivery/Predelivery.vue
1 | <template> | File was deleted | |
2 | <view class="container"> | ||
3 | <view v-for="(items) in form" :key="items.key" class="order"> | ||
4 | <view class="order_number">订单号:{{items.orderNum}}<span>待发货</span></view> | ||
5 | <view class="order_detail"> | ||
6 | <view class="detail_img"><image v-bind:src="items.img"></image></view> | ||
7 | <view class="detail_zi"> | ||
8 | <view class="zi_name">{{items.name}}</view> | ||
9 | <view class="zi_standard">规格:{{items.standard}}</view> | ||
10 | <view class="zi_preprice">¥{{items.preprice}}<span>X{{items.number}}</span></view> | ||
11 | </view> | ||
12 | </view> | ||
13 | <view class="now_price">实付:<span>¥{{items.nowprice}}</span></view> | ||
14 | <view class="clear"></view> | ||
15 | <view class="button"> | ||
16 | <view class="button1">申请退款</view> | ||
17 | <view class="button2">提醒发货</view> | ||
18 | </view> | ||
19 | </view> | ||
20 | </view> | ||
21 | </template> | ||
22 | |||
23 | <script> | ||
24 | export default { | ||
25 | data(){ | ||
26 | return{ | ||
27 | form:[ | ||
28 | { | ||
29 | key: 0, | ||
30 | name:'商品名称', | ||
31 | standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻', | ||
32 | img: '/static/img/detail/delivery.png', | ||
33 | preprice: 180, | ||
34 | number:1, | ||
35 | orderNum: 2034867958596334, | ||
36 | nowprice: 110, | ||
37 | } | ||
38 | ] | ||
39 | |||
40 | } | ||
41 | } | ||
42 | } | ||
43 | </script> | ||
44 | |||
45 | <style lang="scss"> | ||
46 | .container{ | ||
47 | width: 100%; | ||
48 | height: 100%; | ||
49 | background: #F2F2F2; | ||
50 | height: 700px; | ||
51 | //要获取屏幕大小 | ||
52 | } | ||
53 | .order{ | ||
54 | background: #FFFFFF; | ||
55 | width: 90%; | ||
56 | height: 450rpx; | ||
57 | margin: 0 auto; | ||
58 | padding: 40rpx; | ||
59 | box-sizing: border-box; | ||
60 | border-radius: 5px; | ||
61 | } | ||
62 | .order_number{ | ||
63 | color: #999999; | ||
64 | font-size: 12px; | ||
65 | font-family: "PingFangSC-Regular"; | ||
66 | span{ | ||
67 | font-family: PingFangSC-Regular; | ||
68 | font-size: 14px; | ||
69 | color: #FF6B4A; | ||
70 | letter-spacing: -0.26px; | ||
71 | line-height: 18px; | ||
72 | float: right; | ||
73 | } | ||
74 | } | ||
75 | .order_detail{ | ||
76 | display: flex; | ||
77 | justify-content: space-around; | ||
78 | margin-top: 12px; | ||
79 | } | ||
80 | .detail_img image{ | ||
81 | width: 188rpx; | ||
82 | height: 188rpx; | ||
83 | } | ||
84 | .detail_zi{ | ||
85 | font-family: PingFangSC-Regular; | ||
86 | width: 55%; | ||
87 | height: 100%; | ||
88 | view{ | ||
89 | margin-bottom: 20rpx; | ||
90 | } | ||
91 | .zi_name{ | ||
92 | font-size: 14px; | ||
93 | color: #333333; | ||
94 | letter-spacing: -0.26px; | ||
95 | line-height: 18px; | ||
96 | } | ||
97 | .zi_standard{ | ||
98 | font-size: 12px; | ||
99 | color: #999999 ; | ||
100 | } | ||
101 | .zi_preprice{ | ||
102 | font-size: 14px; | ||
103 | color: #FF6B4A; | ||
104 | span{ | ||
105 | float: right; | ||
106 | font-size: 12px; | ||
107 | color: #999999; | ||
108 | } | ||
109 | } | ||
110 | } | ||
111 | .now_price{ | ||
112 | font-size: 14px; | ||
113 | color: #333333; | ||
114 | float: right; | ||
115 | span{ | ||
116 | font-size: 14px; | ||
117 | color: #FF6B4A ; | ||
118 | } | ||
119 | } | ||
120 | .clear{ | ||
121 | clear: both; | ||
122 | } | ||
123 | .button{ | ||
124 | display: flex; | ||
125 | justify-content: flex-end; | ||
126 | margin-top: 14px; | ||
127 | view{ | ||
128 | width: 156rpx; | ||
129 | height: 48rpx; | ||
130 | border-radius: 12px; | ||
131 | font-size: 12px; | ||
132 | text-align: center; | ||
133 | line-height: 20px; | ||
134 | } | ||
135 | .button1{ | ||
136 | border: 1px solid #FF6B4A; | ||
137 | font-family: PingFangSC-Regular; | ||
138 | color: #FF6B4A; | ||
139 | letter-spacing: -0.23px; | ||
140 | margin-right: 30rpx; | ||
141 | } | ||
142 | .button2{ | ||
143 | border: 1px solid #FF6B4A; | ||
144 | background: #FF6B4A; | ||
145 | font-family: PingFangSC-Regular; | ||
146 | color: #FFFFFF; | ||
147 | letter-spacing: -0.23px; | ||
148 | |||
149 | } | ||
150 | } | ||
151 | </style> |
src/pages/cart/cart.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | <view class="content"> |
3 | <checkbox-group name=""> | 3 | |
4 | <label> | 4 | <view class="card"> |
5 | <view class="card"> | 5 | <view class="cardHeader"> |
6 | <view class="cardHeader"> | 6 | <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> --> |
7 | <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/> | 7 | <block v-if="pIsoPen"> |
8 | <image src="../../static/customerService-btn.png" mode="aspectFill"></image> | 8 | <view class="partentChecked" @click="pChange(pIsoPen)"> |
9 | <text>非常戴镜</text> | 9 | <span class="status correct"></span> |
10 | </view> | 10 | </view> |
11 | <view class="cardBody"> | 11 | </block> |
12 | <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" /> | 12 | <block v-else> |
13 | <view class="goodInfo"> | 13 | <view class="partentCheck" @click="pChange(pIsoPen)"></view> |
14 | <view class="imageWrap"> | 14 | </block> |
15 | <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | 15 | <image src="../../static/store.png" mode="aspectFill"></image> |
16 | </view> | 16 | <text>非常戴镜</text> |
17 | <view class="infoRight"> | 17 | </view> |
18 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | 18 | |
19 | <view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text> | 19 | <view class="cardBody"> |
20 | <!-- <text class="icon">></text> --> | 20 | <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> |
21 | </view> | 21 | <template v-if="childIsOpen.child1"> |
22 | <view class="priceBox"> | 22 | <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> |
23 | <view class="price">¥198</view> | 23 | <span class="status correct"></span> |
24 | <text>(限购{{maxCount}}副)</text> | 24 | </view> |
25 | <view class="counter"> | 25 | </template> |
26 | <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | 26 | <template v-else> |
27 | <text>{{count}}</text> | 27 | <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> |
28 | <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | 28 | </template> |
29 | </view> | 29 | <view class="goodInfo"> |
30 | </view> | 30 | <view class="imageWrap"> |
31 | <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | ||
32 | </view> | ||
33 | <view class="infoRight"> | ||
34 | <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | ||
35 | <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | ||
36 | <!-- <text class="icon">></text> --> | ||
37 | </view> | ||
38 | <view class="priceBox"> | ||
39 | <view class="price">¥{{198}}</view> | ||
40 | <text>(限购{{maxCount}}副)</text> | ||
41 | <view class="counter"> | ||
42 | <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | ||
43 | <text>{{count}}</text> | ||
44 | <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | ||
31 | </view> | 45 | </view> |
32 | </view> | 46 | </view> |
33 | </view> | 47 | </view> |
34 | </view> | 48 | </view> |
35 | </label> | 49 | </view> |
36 | </checkbox-group> | 50 | <view class="cardBody"> |
37 | 51 | <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> | |
52 | <template v-if="childIsOpen.child2"> | ||
53 | <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> | ||
54 | <span class="status correct"></span> | ||
55 | </view> | ||
56 | </template> | ||
57 | <template v-else> | ||
58 | <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> | ||
59 | </template> | ||
60 | <view class="goodInfo"> | ||
61 | <view class="imageWrap"> | ||
62 | <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | ||
63 | </view> | ||
64 | <view class="infoRight"> | ||
65 | <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | ||
66 | <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | ||
67 | <!-- <text class="icon">></text> --> | ||
68 | </view> | ||
69 | <view class="priceBox"> | ||
70 | <view class="price">¥198</view> | ||
71 | <text>(限购{{maxCount}}副)</text> | ||
72 | <view class="counter"> | ||
73 | <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | ||
74 | <text>{{count}}</text> | ||
75 | <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | ||
76 | </view> | ||
77 | </view> | ||
78 | </view> | ||
79 | </view> | ||
80 | </view> | ||
81 | </view> | ||
38 | 82 | ||
39 | <view class="footer"> | 83 | <view class="footer"> |
40 | <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> | 84 | <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> |
41 | <view class="footerRight"> | 85 | <view class="footerRight"> |
42 | <view class="paybtn">立即支付</view> | 86 | <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> |
87 | <view class="paybtn">立即支付</view> | ||
88 | </navigator> | ||
43 | </view> | 89 | </view> |
44 | </view> | 90 | </view> |
91 | |||
45 | </view> | 92 | </view> |
46 | </template> | 93 | </template> |
47 | 94 | ||
48 | <script> | 95 | <script> |
49 | export default { | 96 | export default { |
97 | |||
50 | data() { | 98 | data() { |
51 | return { | 99 | return { |
52 | totalPrice: 360, | 100 | totalPrice: 360, |
53 | count:1, | 101 | count:1, |
54 | maxCount:20, | 102 | maxCount:20, |
103 | pIsoPen: false, | ||
104 | childIsOpen:{ | ||
105 | "child1":true, | ||
106 | "child2":true | ||
107 | }, | ||
55 | } | 108 | } |
56 | }, | 109 | }, |
57 | onLoad() { | 110 | onLoad() { |
58 | 111 | ||
59 | }, | 112 | } |
113 | , | ||
60 | methods: { | 114 | methods: { |
61 | counter(isadd){ | 115 | counter(isadd){ |
62 | if(isadd){ | 116 | if(isadd){ |
63 | this.count >= this.maxCount? this.addDisabled = true:this.count++; | 117 | this.count >= this.maxCount? this.addDisabled = true:this.count++; |
64 | }else{ | 118 | }else{ |
65 | this.count <= 1? this.desDisabled = true:this.count--; | 119 | this.count <= 1? this.desDisabled = true:this.count--; |
66 | } | 120 | } |
67 | }, | 121 | }, |
122 | pChange(isopen){ | ||
123 | // console.log(isopen) | ||
124 | this.pIsoPen=!isopen | ||
125 | this.childIsOpen.child1=!isopen | ||
126 | this.childIsOpen.child2=!isopen | ||
127 | }, | ||
128 | cChange(isopen,child){ | ||
129 | // console.log(child) | ||
130 | if(child==='child1'){ | ||
131 | this.childIsOpen.child1=!isopen | ||
132 | } | ||
133 | if(child==='child2'){ | ||
134 | this.childIsOpen.child2=!isopen | ||
135 | } | ||
136 | } | ||
68 | } | 137 | } |
69 | } | 138 | } |
70 | </script> | 139 | </script> |
71 | 140 | ||
72 | <style lang="scss"> | 141 | <style lang="scss"> |
73 | .content { | 142 | .content { |
74 | min-height: 100vh; | 143 | min-height: 100vh; |
75 | background-color: #F7F6F6; | 144 | background-color: #f2f2f2; |
76 | display: flex; | 145 | display: flex; |
77 | flex-direction: column; | 146 | flex-direction: column; |
78 | align-items: center; | 147 | align-items: center; |
79 | justify-content: space-between; | 148 | justify-content: space-between; |
80 | padding: 20rpx 40rpx; | 149 | padding: 20rpx 40rpx; |
81 | box-sizing: border-box; | 150 | box-sizing: border-box; |
82 | 151 | ||
152 | .partentCheck{ | ||
153 | width: 16px; | ||
154 | height: 16px; | ||
155 | border-radius: 18px; | ||
156 | border: 1px solid #CFCFCF; | ||
157 | background-color: #FFFFFF; | ||
158 | } | ||
159 | .partentChecked{ | ||
160 | width: 18px; | ||
161 | height: 18px; | ||
162 | border-radius: 18px; | ||
163 | background-color: #FF6B4A; | ||
164 | .correct { | ||
165 | display: inline-block; | ||
166 | width: 5px; | ||
167 | height: 1px; | ||
168 | background: #FFFFFF; | ||
169 | line-height: 0; | ||
170 | font-size: 0; | ||
171 | position: relative; | ||
172 | top: -6px; | ||
173 | left: 4px; | ||
174 | -webkit-transform: rotate(45deg); | ||
175 | } | ||
176 | .correct:after { | ||
177 | content: '/'; | ||
178 | display: block; | ||
179 | width: 8px; | ||
180 | height: 1px; | ||
181 | background: #FFFFFF; | ||
182 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | ||
183 | } | ||
184 | } | ||
185 | |||
83 | .card{ | 186 | .card{ |
84 | background-color: #FFFFFF; | 187 | background-color: #FFFFFF; |
85 | border-radius: 16rpx; | 188 | border-radius: 16rpx; |
86 | box-sizing: border-box; | 189 | box-sizing: border-box; |
87 | padding: 36rpx 36rpx 36rpx 18rpx; | 190 | padding: 36rpx 36rpx 36rpx 18rpx; |
88 | display: flex; | 191 | display: flex; |
89 | flex-direction: column; | 192 | flex-direction: column; |
90 | align-items: center; | 193 | align-items: center; |
91 | justify-content: space-between; | 194 | justify-content: space-between; |
92 | .cardHeader{ | 195 | .cardHeader{ |
93 | width: 100%; | 196 | width: 100%; |
94 | height: 36rpx; | 197 | height: 36rpx; |
95 | display: flex; | 198 | display: flex; |
96 | align-items: center; | 199 | align-items: center; |
97 | justify-content: flex-start; | 200 | justify-content: flex-start; |
98 | image{ | 201 | image{ |
99 | height: 32rpx; | 202 | height: 32rpx; |
100 | width: 32rpx; | 203 | width: 32rpx; |
204 | padding-left: 6px; | ||
205 | padding-right: 10px; | ||
206 | } | ||
207 | text{ | ||
208 | // font-family: PingFangSC-Regular; | ||
209 | font-size: 14px; | ||
210 | color: #333333; | ||
211 | letter-spacing: -0.26px; | ||
101 | } | 212 | } |
102 | } | 213 | } |
103 | .cardBody{ | 214 | .cardBody{ |
104 | width: 100%; | 215 | width: 100%; |
105 | height: 300rpx; | 216 | height: 300rpx; |
106 | display: flex; | 217 | display: flex; |
107 | align-items: center; | 218 | align-items: center; |
108 | justify-content: space-between; | 219 | justify-content: space-between; |
109 | .goodInfo{ | 220 | .goodInfo{ |
110 | width: 95%; | 221 | width: 95%; |
111 | display: flex; | 222 | display: flex; |
112 | flex-direction: row; | 223 | flex-direction: row; |
113 | justify-content: flex-start; | 224 | justify-content: flex-start; |
225 | padding-left: 6px; | ||
114 | .imageWrap{ | 226 | .imageWrap{ |
115 | height: 188rpx; | 227 | height: 188rpx; |
116 | width: 188rpx; | 228 | width: 188rpx; |
117 | margin-right: 28rpx; | 229 | margin-right: 28rpx; |
118 | image{ | 230 | image{ |
231 | border-radius: 4px; | ||
119 | height: 188rpx; | 232 | height: 188rpx; |
120 | width: 188rpx; | 233 | width: 188rpx; |
121 | } | 234 | } |
122 | } | 235 | } |
123 | .infoRight{ | 236 | .infoRight{ |
124 | display: flex; | 237 | display: flex; |
125 | flex-direction: column; | 238 | flex-direction: column; |
126 | align-items: flex-start; | 239 | align-items: flex-start; |
127 | justify-content: space-between; | 240 | justify-content: space-between; |
128 | height: 220rpx; | 241 | height: 240rpx; |
129 | .goodName{ | 242 | .goodName{ |
130 | font-size: 28rpx; | 243 | font-size: 28rpx; |
131 | color: #333333; | 244 | color: #333333; |
132 | } | 245 | } |
133 | .describ{ | 246 | .describ{ |
134 | width: 100%; | 247 | width: 100%; |
135 | height: 80rpx; | 248 | height: 80rpx; |
136 | box-sizing: border-box; | 249 | box-sizing: border-box; |
137 | padding: 10rpx; | 250 | padding: 10rpx; |
138 | font-size: 20rpx; | 251 | font-size: 20rpx; |
139 | color: #999999; | 252 | color: #999999; |
140 | background: #F2F2F2; | 253 | background: #F2F2F2; |
141 | text{ | 254 | text{ |
142 | text-overflow: -o-ellipsis-lastline; | 255 | text-overflow: -o-ellipsis-lastline; |
143 | overflow: hidden; | 256 | overflow: hidden; |
144 | text-overflow: ellipsis; | 257 | text-overflow: ellipsis; |
145 | display: -webkit-box; | 258 | display: -webkit-box; |
146 | -webkit-line-clamp: 2; | 259 | -webkit-line-clamp: 2; |
147 | line-clamp: 2; | 260 | line-clamp: 2; |
148 | -webkit-box-orient: vertical; | 261 | -webkit-box-orient: vertical; |
149 | } | 262 | } |
150 | // .icon{ | 263 | // .icon{ |
151 | // transform: rotate(90deg); | 264 | // transform: rotate(90deg); |
152 | // } | 265 | // } |
153 | } | 266 | } |
154 | .priceBox{ | 267 | .priceBox{ |
155 | display: flex; | 268 | display: flex; |
156 | justify-content: space-between; | 269 | justify-content: space-between; |
157 | align-items: center; | 270 | align-items: center; |
271 | // margin-top: 26px; | ||
158 | width: 100%; | 272 | width: 100%; |
159 | font-size: 14px; | 273 | font-size: 14px; |
160 | color: #999999; | 274 | color: #999999; |
161 | .price{ | 275 | .price{ |
162 | color: #FF6B4A; | 276 | color: #FF6B4A; |
163 | font-size: 28rpx; | 277 | font-size: 28rpx; |
164 | } | 278 | } |
165 | .counter{ | 279 | .counter{ |
166 | display: flex; | 280 | display: flex; |
167 | flex-direction: row; | 281 | flex-direction: row; |
168 | justify-content: space-between; | 282 | justify-content: space-between; |
169 | align-items: center; | 283 | align-items: center; |
170 | font-size: 28rpx; | 284 | font-size: 28rpx; |
171 | color: #333333; | 285 | color: #333333; |
172 | width: 122rpx; | 286 | width: 122rpx; |
173 | .btn{ | 287 | .btn{ |
174 | display: flex; | 288 | display: flex; |
175 | justify-content: center; | 289 | justify-content: center; |
176 | line-height: 32rpx; | 290 | line-height: 32rpx; |
177 | height: 32rpx; | 291 | height: 32rpx; |
178 | width: 32rpx; | 292 | width: 32rpx; |
179 | background-color: #F2F2F2; | 293 | background-color: #F2F2F2; |
180 | color: #CFCFCF; | 294 | color: #CFCFCF; |
181 | } | 295 | } |
182 | } | 296 | } |
183 | } | 297 | } |
184 | } | 298 | } |
185 | } | 299 | } |
186 | } | 300 | } |
187 | } | 301 | } |
188 | 302 | ||
189 | .footer{ | 303 | .footer{ |
190 | position: fixed; | 304 | position: fixed; |
191 | left: 0; | 305 | left: 0; |
192 | bottom: 0; | 306 | bottom: 0px; |
193 | height: 112rpx; | 307 | height: 112rpx; |
194 | width: 100%; | 308 | width: 100%; |
195 | background-color: #FFFFFF; | 309 | background-color: #FFFFFF; |
196 | font-size: 16px; | 310 | font-size: 16px; |
197 | display: flex; | 311 | display: flex; |
198 | justify-content: space-between; | 312 | justify-content: space-between; |
199 | align-items: center; | 313 | align-items: center; |
200 | .footerLeft{ | 314 | .footerLeft{ |
201 | display: flex; | 315 | display: flex; |
202 | justify-content: center; | 316 | justify-content: center; |
203 | align-items: center; | 317 | align-items: center; |
204 | width: 50%; | 318 | width: 50%; |
205 | color: #333333; | 319 | color: #333333; |
206 | text{ | 320 | text{ |
207 | color: #FF6B4A; | 321 | color: #FF6B4A; |
208 | } | 322 | } |
209 | } | 323 | } |
210 | .footerRight{ | 324 | .footerRight{ |
211 | display: flex; | 325 | display: flex; |
212 | justify-content: flex-end; | 326 | justify-content: flex-end; |
213 | align-items: center; | 327 | align-items: center; |
214 | width: 50%; | 328 | width: 50%; |
215 | margin-right: 26rpx; | 329 | margin-right: 26rpx; |
216 | .paybtn{ | 330 | .paybtn{ |
217 | display: flex; | 331 | display: flex; |
218 | justify-content: center; | 332 | justify-content: center; |
219 | align-items: center; | 333 | align-items: center; |
220 | background: #FF6B4A; | 334 | background: #FF6B4A; |
221 | border-radius: 20px; | 335 | border-radius: 20px; |
222 | border-radius: 20px; | 336 | border-radius: 20px; |
223 | color: #FFFFFF; | 337 | color: #FFFFFF; |
224 | width: 204rpx; | 338 | width: 204rpx; |
225 | height: 80rpx; | 339 | height: 80rpx; |
226 | } | 340 | } |
227 | } | 341 | } |
228 | 342 | ||
229 | } | 343 | } |
230 | } | 344 | } |
231 | 345 | ||
346 | |||
347 | |||
232 | </style> | 348 | </style> |
233 | 349 |
src/pages/detailStandard/detailStandard_k.vue
File was created | 1 | <template> | |
2 | <view class="container"> | ||
3 | <view class="detail"> | ||
4 | <view class="detail1"><image v-bind:src="detail.image"></image></view> | ||
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> | ||
9 | </view> | ||
10 | </view> | ||
11 | <view class="choose"> | ||
12 | <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> | ||
15 | <view class="colour2"> | ||
16 | <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | ||
17 | </view> | ||
18 | <hr/> | ||
19 | </view> | ||
20 | <view class="size"> | ||
21 | <view class="size1"> | ||
22 | <view class="size1_1">框架尺寸</view> | ||
23 | <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
24 | </view> | ||
25 | <view class="size2"> | ||
26 | <view>通用</view> | ||
27 | <view>定制</view> | ||
28 | </view> | ||
29 | <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> | ||
32 | <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> | ||
42 | </view> | ||
43 | </view> | ||
44 | <hr/> | ||
45 | </view> | ||
46 | </view> | ||
47 | <view class="part"> | ||
48 | <view class="size1"> | ||
49 | <view class="size1_1">配件</view> | ||
50 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
51 | </view> | ||
52 | <view class="colour_exp">*0290</view> | ||
53 | <view class="part_som"> | ||
54 | <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | ||
55 | </view> | ||
56 | </view> | ||
57 | </view> | ||
58 | <view class="buy"> | ||
59 | <view class="buy1">选了镜框,想选镜片?</view> | ||
60 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | ||
61 | <view class="buy3"> | ||
62 | <view class="buy3_1">暂时不选</view> | ||
63 | <view class="buy3_2">立即去选</view> | ||
64 | </view> | ||
65 | </view> | ||
66 | <view class="zhanwei"></view> | ||
67 | <view class="button"><view>立即结算</view></view> | ||
68 | </view> | ||
69 | </template> | ||
70 | <script> | ||
71 | import CProgress from '../../components/UniSliper/UniSliper' | ||
72 | |||
73 | export default { | ||
74 | components: { | ||
75 | CProgress | ||
76 | }, | ||
77 | data(){ | ||
78 | return{ | ||
79 | detail:{ | ||
80 | image:'/static/img/detail/d1.png', | ||
81 | name:'商品名称商品名称商品名称商品名称商品名称', | ||
82 | price: 180, | ||
83 | number: 1, | ||
84 | }, | ||
85 | //框架颜色 | ||
86 | colour:[ | ||
87 | {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | ||
88 | {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | ||
89 | {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | ||
90 | {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | ||
91 | {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | ||
92 | {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | ||
93 | {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | ||
94 | ], | ||
95 | //规格 | ||
96 | parameter:[ | ||
97 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | ||
98 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | ||
99 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | ||
100 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | ||
101 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | ||
102 | ], | ||
103 | //配饰 | ||
104 | part:[ | ||
105 | {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | ||
106 | {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | ||
107 | {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | ||
108 | {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | ||
109 | {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | ||
110 | {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | ||
111 | {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | ||
112 | {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | ||
113 | ], | ||
114 | } | ||
115 | } | ||
116 | } | ||
117 | </script> | ||
118 | |||
119 | <style lang="scss"> | ||
120 | .container{ | ||
121 | min-height: 100vh; | ||
122 | background: #F2F2F2; | ||
123 | padding-top: 10px; | ||
124 | box-sizing: border-box; | ||
125 | } | ||
126 | hr{ | ||
127 | border: none; | ||
128 | height: 1px; | ||
129 | background: #F2F2F2; | ||
130 | margin-top: 18px; | ||
131 | } | ||
132 | .detail{ | ||
133 | height: 272rpx; | ||
134 | background: #FFFFFF; | ||
135 | border-radius: 8px; | ||
136 | padding: 16px; | ||
137 | box-sizing: border-box; | ||
138 | display: flex; | ||
139 | justify-content: space-between; | ||
140 | align-items: center; | ||
141 | } | ||
142 | .detail1{ | ||
143 | height: 188rpx; | ||
144 | width: 188rpx; | ||
145 | image{ | ||
146 | width: 100%; | ||
147 | height: 100%; | ||
148 | border-radius: 8px; | ||
149 | } | ||
150 | } | ||
151 | .detail2{ | ||
152 | width: 68%; | ||
153 | view{ | ||
154 | margin-bottom: 8px; | ||
155 | font-family: PingFangSC-Regular; | ||
156 | } | ||
157 | .detail2_name{ | ||
158 | font-size: 14px; | ||
159 | color: #333333; | ||
160 | letter-spacing: -0.26px; | ||
161 | line-height: 18px; | ||
162 | } | ||
163 | .detail2_tui{ | ||
164 | font-size: 10px; | ||
165 | color: #999999; | ||
166 | letter-spacing: -0.19px; | ||
167 | span{ | ||
168 | margin-right: 10px; | ||
169 | } | ||
170 | } | ||
171 | .detail2_price{ | ||
172 | font-size: 14px; | ||
173 | color: #FF6B4A; | ||
174 | letter-spacing: -0.26px; | ||
175 | } | ||
176 | } | ||
177 | .choose{ | ||
178 | background: #FFFFFF; | ||
179 | padding: 16px; | ||
180 | box-sizing: border-box; | ||
181 | margin-top: 10px; | ||
182 | border-radius: 8px; | ||
183 | .colour1{ | ||
184 | span{ | ||
185 | font-family: PingFangSC-Medium; | ||
186 | font-size: 16px; | ||
187 | color: #333333; | ||
188 | letter-spacing: -0.3px; | ||
189 | text-align: justify; | ||
190 | line-height: 24px; | ||
191 | font-weight: bold; | ||
192 | } | ||
193 | image{ | ||
194 | float: right; | ||
195 | width: 40rpx; | ||
196 | height: 36rpx; | ||
197 | } | ||
198 | } | ||
199 | .colour_exp{ | ||
200 | font-family: PingFangSC-Regular; | ||
201 | font-size: 12px; | ||
202 | color: #666666; | ||
203 | letter-spacing: 0; | ||
204 | margin-top: 10px; | ||
205 | margin-bottom: 10px; | ||
206 | } | ||
207 | .colour2{ | ||
208 | display: grid; | ||
209 | grid-template-columns: repeat(5, 17%); | ||
210 | justify-content: space-between ; | ||
211 | grid-row-gap: 10px; | ||
212 | margin-bottom: 14px; | ||
213 | view{ | ||
214 | border: 1px solid #F2F2F2; | ||
215 | image{ | ||
216 | width: 100%; | ||
217 | height: 100%; | ||
218 | } | ||
219 | } | ||
220 | view:hover{ | ||
221 | border: 1px solid #FF6B4A; | ||
222 | } | ||
223 | } | ||
224 | } | ||
225 | .size,.part{ | ||
226 | margin-top:14px; | ||
227 | .size1{ | ||
228 | display: flex; | ||
229 | justify-content: space-between; | ||
230 | margin-bottom: 10px; | ||
231 | .size1_1{ | ||
232 | font-weight: bold; | ||
233 | font-family: PingFangSC-Medium; | ||
234 | font-size: 16px; | ||
235 | color: #333333; | ||
236 | letter-spacing: -0.3px; | ||
237 | line-height: 24px; | ||
238 | } | ||
239 | view{ | ||
240 | span{ | ||
241 | font-family: PingFangSC-Regular; | ||
242 | font-size: 14px; | ||
243 | color: #FF6B4A; | ||
244 | letter-spacing: -0.26px; | ||
245 | margin-right: 12px; | ||
246 | } | ||
247 | image{ | ||
248 | width: 40rpx; | ||
249 | height: 36rpx; | ||
250 | } | ||
251 | } | ||
252 | } | ||
253 | .size2{ | ||
254 | view{ | ||
255 | display: inline-flex; | ||
256 | align-items: center; | ||
257 | justify-content: center; //字体居中 | ||
258 | margin-right: 12px; | ||
259 | margin-bottom: 20px; | ||
260 | width: 136rpx; | ||
261 | height: 60rpx; | ||
262 | background: #F2F2F2; | ||
263 | border-radius: 2px; | ||
264 | font-family: PingFangSC-Regular; | ||
265 | font-size: 12px; | ||
266 | color: #666666; | ||
267 | } | ||
268 | view:hover{ | ||
269 | color: #FF6B4A; | ||
270 | background: rgba(255,107,74,0.15); | ||
271 | } | ||
272 | } | ||
273 | .D3_list{ | ||
274 | margin-bottom: 4px; | ||
275 | } | ||
276 | .D3_list>view{ | ||
277 | display: flex; | ||
278 | align-content: center; | ||
279 | margin-bottom: 10px; | ||
280 | view{ | ||
281 | margin-right: 10px; | ||
282 | } | ||
283 | } | ||
284 | .D3_list image{ | ||
285 | width: 50px; | ||
286 | height: 25px; | ||
287 | margin-right: 6px; | ||
288 | } | ||
289 | .D3_list span{ | ||
290 | margin-left: 6px; | ||
291 | margin-right: 5px; | ||
292 | font-family: 'PingFangSC-Regular'; | ||
293 | } | ||
294 | .D3_list_jDu{ | ||
295 | view{ | ||
296 | font-family: PingFangSC-Regular; | ||
297 | font-size: 10px; | ||
298 | color: #999999; | ||
299 | letter-spacing: -0.19px; | ||
300 | } | ||
301 | } | ||
302 | } | ||
303 | .part{ | ||
304 | .part_som{ | ||
305 | display: grid; | ||
306 | justify-content: space-between; | ||
307 | grid-template-columns: repeat(4, 22%); | ||
308 | grid-row-gap: 12px; | ||
309 | margin-bottom: 14px; | ||
310 | view{ | ||
311 | border: 1px solid #F2F2F2; | ||
312 | height: 72rpx; | ||
313 | image{ | ||
314 | width: 100%; | ||
315 | height: 100%; | ||
316 | } | ||
317 | } | ||
318 | view:hover{ | ||
319 | border: 1px solid #FF6B4A; | ||
320 | } | ||
321 | } | ||
322 | } | ||
323 | .buy{ | ||
324 | height: 280rpx; | ||
325 | background: #FFFFFF ; | ||
326 | margin-top: 10px; | ||
327 | border-radius: 8px; | ||
328 | padding-top: 20px; | ||
329 | box-sizing: border-box; | ||
330 | margin-bottom: 20px; | ||
331 | } | ||
332 | .buy1{ | ||
333 | font-family: PingFangSC-Medium; | ||
334 | font-size: 16px; | ||
335 | font-weight: bold; | ||
336 | color: #333333; | ||
337 | text-align: center; | ||
338 | } | ||
339 | .buy2{ | ||
340 | font-family: PingFangSC-Regular; | ||
341 | font-size: 12px; | ||
342 | color: #999999; | ||
343 | text-align: center; | ||
344 | margin: 10px; | ||
345 | } | ||
346 | .buy3{ | ||
347 | font-family: PingFangSC-Regular; | ||
348 | font-size: 16px; | ||
349 | display: flex; | ||
350 | justify-content: center; | ||
351 | margin-top: 14px; | ||
352 | view{ | ||
353 | border-radius: 20px; | ||
354 | width: 240rpx; | ||
355 | height: 80rpx; | ||
356 | display: flex; | ||
357 | justify-content: center; | ||
358 | align-items: center; | ||
359 | } | ||
360 | .buy3_1{ | ||
361 | margin-right: 20px; | ||
362 | background: rgba(255,107,74,0.15); | ||
363 | color: #FF6B4A ; | ||
364 | } | ||
365 | .buy3_2{ | ||
366 | background: #FF6B4A; | ||
367 | color: #FFFFFF ; | ||
368 | } | ||
369 | } | ||
370 | .zhanwei{ | ||
371 | background: #F2F2F2; | ||
372 | height: 120rpx; | ||
373 | } | ||
374 | .button{ | ||
375 | position: fixed; | ||
376 | bottom: 0; | ||
377 | width:100%; | ||
378 | height: 112rpx; | ||
379 | background: #FF6B4A 100%; | ||
380 | view{ | ||
381 | color: #FFFFFF; | ||
382 | height: 100%; | ||
383 | display: flex; | ||
384 | justify-content: center; | ||
385 | align-items: center; | ||
386 | font-family: PingFangSC-Regular; | ||
387 | font-size: 16px; | ||
388 | } | ||
389 | } | ||
390 | </style> |
src/pages/detailStandard/detailStandard_sun.vue
File was created | 1 | <template> | |
2 | <view class="container"> | ||
3 | <view class="detail"> | ||
4 | <view class="detail1"><image v-bind:src="detail.image"></image></view> | ||
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> | ||
9 | </view> | ||
10 | </view> | ||
11 | <view class="choose"> | ||
12 | <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> | ||
15 | <view class="colour2"> | ||
16 | <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | ||
17 | </view> | ||
18 | <hr/> | ||
19 | </view> | ||
20 | <view class="colour"> | ||
21 | <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
22 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | ||
23 | <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> | ||
25 | </view> | ||
26 | <hr/> | ||
27 | </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> | ||
33 | </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> | ||
37 | </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 | </view> | ||
43 | <hr/> | ||
44 | </view> | ||
45 | <view class="size"> | ||
46 | <view class="size1"> | ||
47 | <view class="size1_1">框架尺寸</view> | ||
48 | <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
49 | </view> | ||
50 | <view class="size2"> | ||
51 | <view>通用</view> | ||
52 | <view>定制</view> | ||
53 | </view> | ||
54 | <!-- uni-sliper插件 --> | ||
55 | <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> | ||
58 | <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> | ||
67 | </view> | ||
68 | </view> | ||
69 | <hr/> | ||
70 | </view> | ||
71 | </view> | ||
72 | <view class="part"> | ||
73 | <view class="size1"> | ||
74 | <view class="size1_1">配件</view> | ||
75 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
76 | </view> | ||
77 | <view class="colour_exp">*0290</view> | ||
78 | <view class="part_som"> | ||
79 | <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | ||
80 | </view> | ||
81 | </view> | ||
82 | </view> | ||
83 | <view class="buy"> | ||
84 | <view class="buy1">选了镜框,想选镜片?</view> | ||
85 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | ||
86 | <view class="buy3"> | ||
87 | <view class="buy3_1">暂时不选</view> | ||
88 | <view class="buy3_2">立即去选</view> | ||
89 | </view> | ||
90 | </view> | ||
91 | <view class="zhanwei"></view> | ||
92 | <view class="button"><view>立即结算</view></view> | ||
93 | </view> | ||
94 | </template> | ||
95 | <script> | ||
96 | import CProgress from '../../components/UniSliper/UniSliper' | ||
97 | |||
98 | export default { | ||
99 | components: { | ||
100 | CProgress | ||
101 | }, | ||
102 | data(){ | ||
103 | 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'} | ||
119 | ], | ||
120 | //镜片颜色 | ||
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}, | ||
139 | ], | ||
140 | //配饰 | ||
141 | 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 | |||
151 | ], | ||
152 | } | ||
153 | } | ||
154 | } | ||
155 | </script> | ||
156 | |||
157 | <style lang="scss"> | ||
158 | .container{ | ||
159 | min-height: 100vh; | ||
160 | background: #F2F2F2; | ||
161 | padding-top: 10px; | ||
162 | box-sizing: border-box; | ||
163 | } | ||
164 | hr{ | ||
165 | border: none; | ||
166 | height: 1px; | ||
167 | background: #F2F2F2; | ||
168 | margin-top: 18px; | ||
169 | } | ||
170 | .detail{ | ||
171 | height: 272rpx; | ||
172 | background: #FFFFFF; | ||
173 | border-radius: 8px; | ||
174 | padding: 16px; | ||
175 | box-sizing: border-box; | ||
176 | display: flex; | ||
177 | justify-content: space-between; | ||
178 | align-items: center; | ||
179 | } | ||
180 | .detail1{ | ||
181 | height: 188rpx; | ||
182 | width: 188rpx; | ||
183 | image{ | ||
184 | width: 100%; | ||
185 | height: 100%; | ||
186 | border-radius: 8px; | ||
187 | } | ||
188 | } | ||
189 | .detail2{ | ||
190 | width: 68%; | ||
191 | view{ | ||
192 | margin-bottom: 8px; | ||
193 | font-family: PingFangSC-Regular; | ||
194 | } | ||
195 | .detail2_name{ | ||
196 | font-size: 14px; | ||
197 | color: #333333; | ||
198 | letter-spacing: -0.26px; | ||
199 | line-height: 18px; | ||
200 | } | ||
201 | .detail2_tui{ | ||
202 | font-size: 10px; | ||
203 | color: #999999; | ||
204 | letter-spacing: -0.19px; | ||
205 | span{ | ||
206 | margin-right: 10px; | ||
207 | } | ||
208 | } | ||
209 | .detail2_price{ | ||
210 | font-size: 14px; | ||
211 | color: #FF6B4A; | ||
212 | letter-spacing: -0.26px; | ||
213 | } | ||
214 | } | ||
215 | .choose{ | ||
216 | background: #FFFFFF; | ||
217 | padding: 16px; | ||
218 | box-sizing: border-box; | ||
219 | margin-top: 10px; | ||
220 | border-radius: 8px; | ||
221 | .colour1{ | ||
222 | span{ | ||
223 | font-family: PingFangSC-Medium; | ||
224 | font-size: 16px; | ||
225 | color: #333333; | ||
226 | letter-spacing: -0.3px; | ||
227 | text-align: justify; | ||
228 | line-height: 24px; | ||
229 | font-weight: bold; | ||
230 | } | ||
231 | image{ | ||
232 | float: right; | ||
233 | width: 40rpx; | ||
234 | height: 36rpx; | ||
235 | } | ||
236 | } | ||
237 | .colour_exp{ | ||
238 | font-family: PingFangSC-Regular; | ||
239 | font-size: 12px; | ||
240 | color: #666666; | ||
241 | letter-spacing: 0; | ||
242 | margin-top: 10px; | ||
243 | margin-bottom: 10px; | ||
244 | } | ||
245 | .colour2{ | ||
246 | display: grid; | ||
247 | grid-template-columns: repeat(5, 17%); | ||
248 | justify-content: space-between ; | ||
249 | grid-row-gap: 10px; | ||
250 | margin-bottom: 14px; | ||
251 | view{ | ||
252 | border: 1px solid #F2F2F2; | ||
253 | image{ | ||
254 | width: 100%; | ||
255 | height: 100%; | ||
256 | } | ||
257 | } | ||
258 | view:hover{ | ||
259 | border: 1px solid #FF6B4A; | ||
260 | } | ||
261 | } | ||
262 | } | ||
263 | .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{ | ||
270 | border: 1px solid #F2F2F2; | ||
271 | height: 80rpx; | ||
272 | image{ | ||
273 | width: 100%; | ||
274 | height: 100%; | ||
275 | } | ||
276 | } | ||
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 | } | ||
305 | .split2{ | ||
306 | margin-bottom: 12px; | ||
307 | .split2_number{ | ||
308 | font-family: PingFangSC-Regular; | ||
309 | font-size: 10px; | ||
310 | color: #999999; | ||
311 | letter-spacing: -0.19px; | ||
312 | margin-bottom: 6px; | ||
313 | } | ||
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 | } | ||
337 | } | ||
338 | |||
339 | } | ||
340 | .size,.part{ | ||
341 | margin-top:14px; | ||
342 | .size1{ | ||
343 | display: flex; | ||
344 | justify-content: space-between; | ||
345 | margin-bottom: 10px; | ||
346 | .size1_1{ | ||
347 | font-weight: bold; | ||
348 | font-family: PingFangSC-Medium; | ||
349 | font-size: 16px; | ||
350 | color: #333333; | ||
351 | letter-spacing: -0.3px; | ||
352 | line-height: 24px; | ||
353 | } | ||
354 | view{ | ||
355 | span{ | ||
356 | font-family: PingFangSC-Regular; | ||
357 | font-size: 14px; | ||
358 | color: #FF6B4A; | ||
359 | letter-spacing: -0.26px; | ||
360 | margin-right: 12px; | ||
361 | } | ||
362 | image{ | ||
363 | width: 40rpx; | ||
364 | height: 36rpx; | ||
365 | } | ||
366 | } | ||
367 | } | ||
368 | .size2{ | ||
369 | view{ | ||
370 | display: inline-flex; | ||
371 | align-items: center; | ||
372 | justify-content: center; //字体居中 | ||
373 | margin-right: 12px; | ||
374 | margin-bottom: 20px; | ||
375 | width: 136rpx; | ||
376 | height: 60rpx; | ||
377 | background: #F2F2F2; | ||
378 | border-radius: 2px; | ||
379 | font-family: PingFangSC-Regular; | ||
380 | font-size: 12px; | ||
381 | color: #666666; | ||
382 | } | ||
383 | view:hover{ | ||
384 | color: #FF6B4A; | ||
385 | background: rgba(255,107,74,0.15); | ||
386 | } | ||
387 | } | ||
388 | .D3_list{ | ||
389 | margin-bottom: 4px; | ||
390 | } | ||
391 | .D3_list>view{ | ||
392 | display: flex; | ||
393 | align-content: center; | ||
394 | margin-bottom: 10px; | ||
395 | view{ | ||
396 | margin-right: 10px; | ||
397 | } | ||
398 | } | ||
399 | .D3_list image{ | ||
400 | width: 50px; | ||
401 | height: 25px; | ||
402 | margin-right: 6px; | ||
403 | } | ||
404 | .D3_list span{ | ||
405 | margin-left: 6px; | ||
406 | margin-right: 5px; | ||
407 | font-family: 'PingFangSC-Regular'; | ||
408 | } | ||
409 | .D3_list_jDu{ | ||
410 | view{ | ||
411 | font-family: PingFangSC-Regular; | ||
412 | font-size: 10px; | ||
413 | color: #999999; | ||
414 | letter-spacing: -0.19px; | ||
415 | } | ||
416 | } | ||
417 | } | ||
418 | .part{ | ||
419 | .part_som{ | ||
420 | display: grid; | ||
421 | justify-content: space-between; | ||
422 | grid-template-columns: repeat(4, 22%); | ||
423 | grid-row-gap: 12px; | ||
424 | margin-bottom: 14px; | ||
425 | view{ | ||
426 | border: 1px solid #F2F2F2; | ||
427 | height: 72rpx; | ||
428 | image{ | ||
429 | width: 100%; | ||
430 | height: 100%; | ||
431 | } | ||
432 | } | ||
433 | view:hover{ | ||
434 | border: 1px solid #FF6B4A; | ||
435 | } | ||
436 | } | ||
437 | } | ||
438 | .buy{ | ||
439 | height: 280rpx; | ||
440 | background: #FFFFFF ; | ||
441 | margin-top: 10px; | ||
442 | border-radius: 8px; | ||
443 | padding-top: 20px; | ||
444 | box-sizing: border-box; | ||
445 | margin-bottom: 20px; | ||
446 | } | ||
447 | .buy1{ | ||
448 | font-family: PingFangSC-Medium; | ||
449 | font-size: 16px; | ||
450 | font-weight: bold; | ||
451 | color: #333333; | ||
452 | text-align: center; | ||
453 | } | ||
454 | .buy2{ | ||
455 | font-family: PingFangSC-Regular; | ||
456 | font-size: 12px; | ||
457 | color: #999999; | ||
458 | text-align: center; | ||
459 | margin: 10px; | ||
460 | } | ||
461 | .buy3{ | ||
462 | font-family: PingFangSC-Regular; | ||
463 | font-size: 16px; | ||
464 | display: flex; | ||
465 | justify-content: center; | ||
466 | margin-top: 14px; | ||
467 | view{ | ||
468 | border-radius: 20px; | ||
469 | width: 240rpx; | ||
470 | height: 80rpx; | ||
471 | display: flex; | ||
472 | justify-content: center; | ||
473 | align-items: center; | ||
474 | } | ||
475 | .buy3_1{ | ||
476 | margin-right: 20px; | ||
477 | background: rgba(255,107,74,0.15); | ||
478 | color: #FF6B4A ; | ||
479 | } | ||
480 | .buy3_2{ | ||
481 | background: #FF6B4A; | ||
482 | color: #FFFFFF ; | ||
483 | } | ||
484 | } | ||
485 | .zhanwei{ | ||
486 | background: #F2F2F2; | ||
487 | height: 120rpx; | ||
488 | } | ||
489 | .button{ | ||
490 | position: fixed; | ||
491 | bottom: 0; | ||
492 | width:100%; | ||
493 | height: 112rpx; | ||
494 | background: #FF6B4A 100%; | ||
495 | view{ | ||
496 | color: #FFFFFF; | ||
497 | height: 100%; | ||
498 | display: flex; | ||
499 | justify-content: center; | ||
500 | align-items: center; | ||
501 | font-family: PingFangSC-Regular; | ||
502 | font-size: 16px; | ||
503 | } | ||
504 | } | ||
505 | |||
506 | </style> |
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
File was created | 1 | <template> | |
2 | <!-- 折叠框 --> | ||
3 | <view class="myCollapse"> | ||
4 | <view class="head"> | ||
5 | <view>{{title}}</view> | ||
6 | <view v-if="title==='折射率'" class="headMid">注:折射率越高,镜片越薄,看着更美观。</view> | ||
7 | <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view> | ||
8 | <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> | ||
9 | </view> | ||
10 | <view class="body"> | ||
11 | |||
12 | <block v-if="isOpen"> | ||
13 | |||
14 | <view style="background-color: #FFFFFF;" class="funBox"> | ||
15 | <block v-if="title==='镜片种类'"> | ||
16 | <view class="noRange"> | ||
17 | <block v-for="(item) in funList" :key="item.key"> | ||
18 | <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" | ||
19 | @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> | ||
20 | </block> | ||
21 | </view> | ||
22 | <view class="noRange"> | ||
23 | <block v-for="(item,index) in funList2" :key="item.key"> | ||
24 | <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" | ||
25 | :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view> | ||
26 | </block> | ||
27 | </view> | ||
28 | </block> | ||
29 | <block v-else> | ||
30 | <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view> | ||
31 | <view class="noRange"> | ||
32 | <block v-for="(item) in funList" :key="item.key"> | ||
33 | <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" | ||
34 | @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> | ||
35 | </block> | ||
36 | </view> | ||
37 | |||
38 | <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> | ||
39 | <view class="noRange" style="max-width: 624rpx"> | ||
40 | <block v-for="(item,index) in funList2" :key="item.key"> | ||
41 | <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" | ||
42 | @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> | ||
43 | </block> | ||
44 | </view> | ||
45 | </block> | ||
46 | </view> | ||
47 | </block> | ||
48 | |||
49 | <block v-else> | ||
50 | *<block v-for="(item,index) in funContent" :key="index"> | ||
51 | <text v-if="item!==null">{{item}}</text> | ||
52 | </block> | ||
53 | </block> | ||
54 | </view> | ||
55 | </view> | ||
56 | |||
57 | </template> | ||
58 | |||
59 | <script> | ||
60 | export default { | ||
61 | props:{ | ||
62 | isOpenProps:{ | ||
63 | // 是否展开,默认 true | ||
64 | type: Boolean, | ||
65 | default: true | ||
66 | }, | ||
67 | funListProp:{ | ||
68 | "name":String, | ||
69 | "isChioce": Number, | ||
70 | "key":Number | ||
71 | }, | ||
72 | funList2Prop:{ | ||
73 | type:Array, | ||
74 | } | ||
75 | , | ||
76 | funContentProp: { | ||
77 | type: Array | ||
78 | }, | ||
79 | title:{ | ||
80 | type: String, | ||
81 | default: '' | ||
82 | } | ||
83 | }, | ||
84 | data() { | ||
85 | return { | ||
86 | isOpen:this.isOpenProps, | ||
87 | // 颜色数组要与传入的值手动相同 | ||
88 | colorList:[ | ||
89 | "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", | ||
90 | "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", | ||
91 | "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", | ||
92 | "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", | ||
93 | "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" | ||
94 | ], | ||
95 | funList: this.funListProp, | ||
96 | funList2: this.funList2Prop, | ||
97 | funContent: this.funContentProp | ||
98 | }; | ||
99 | }, | ||
100 | |||
101 | methods:{ | ||
102 | myCollapseChange(isopen){ | ||
103 | this.isOpen = !isopen | ||
104 | }, | ||
105 | choice(index,isChoice){ | ||
106 | this.funList[index].isChioce = !isChoice | ||
107 | if(!isChoice){ | ||
108 | this.funContent[index] = this.funList[index].name | ||
109 | } | ||
110 | else{ | ||
111 | this.funContent[index] = '' | ||
112 | } | ||
113 | }, | ||
114 | choice2(index,conIndex,isChoice){ | ||
115 | this.funList2[index].isChioce = !isChoice | ||
116 | if(!isChoice){ | ||
117 | this.funContent[conIndex] = this.funList2[index].name | ||
118 | } | ||
119 | else{ | ||
120 | this.funContent[conIndex] = '' | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | } | ||
125 | </script> | ||
126 | |||
127 | <style lang="scss"> | ||
128 | .myCollapse{ | ||
129 | width: 100%; | ||
130 | padding-bottom: 28rpx; | ||
131 | margin-top: 7px; | ||
132 | border-bottom: 1px solid #E9E9E9; | ||
133 | .head{ | ||
134 | display: flex; | ||
135 | justify-content: space-between; | ||
136 | height: 24px; | ||
137 | // font-family: PingFangSC-Medium; | ||
138 | font-size: 16px; | ||
139 | color: #333333; | ||
140 | letter-spacing: -0.3px; | ||
141 | text-align: justify; | ||
142 | line-height: 24px; | ||
143 | margin-bottom: 18rpx; | ||
144 | .headRighted{ | ||
145 | width: 0; | ||
146 | height: 0; | ||
147 | border-left: 4px solid transparent; | ||
148 | border-right: 4px solid transparent; | ||
149 | border-bottom: 4px solid #CFCFCF; | ||
150 | transform: scaleY(-1); | ||
151 | margin-top: 10px; | ||
152 | } | ||
153 | .headMid{ | ||
154 | // font-family: PingFangSC-Regular; | ||
155 | font-size: 10px; | ||
156 | color: #999999; | ||
157 | letter-spacing: -0.19px; | ||
158 | margin-left: -120rpx; | ||
159 | } | ||
160 | .headRight{ | ||
161 | width: 0; | ||
162 | height: 0; | ||
163 | border-left: 4px solid transparent; | ||
164 | border-right: 4px solid transparent; | ||
165 | border-bottom: 4px solid #CFCFCF; | ||
166 | margin-top: 10px; | ||
167 | } | ||
168 | } | ||
169 | .body{ | ||
170 | // font-family: PingFangSC-Regular; | ||
171 | font-size: 12px; | ||
172 | color: #666666; | ||
173 | letter-spacing: 0; | ||
174 | display: flex; | ||
175 | flex-wrap: wrap; | ||
176 | text{ | ||
177 | padding-left: 4px; | ||
178 | } | ||
179 | } | ||
180 | } | ||
181 | .funBox { | ||
182 | // display: flex; | ||
183 | width: 100%; | ||
184 | // flex-wrap: wrap; | ||
185 | // max-width: 624rpx; | ||
186 | .range{ | ||
187 | // font-family: PingFangSC-Regular; | ||
188 | font-size: 10px; | ||
189 | color: #999999; | ||
190 | letter-spacing: -0.19px; | ||
191 | margin-bottom: 5px; | ||
192 | } | ||
193 | .noRange{ | ||
194 | display: flex; | ||
195 | flex-wrap: wrap; | ||
196 | // max-width: 624rpx; | ||
197 | // margin-bottom: 28rpx; | ||
198 | .boxChoiced,.boxChoice{ | ||
199 | height: 60rpx; | ||
200 | border-radius: 4rpx; | ||
201 | // font-family: PingFangSC-Regular; | ||
202 | font-size: 12px; | ||
203 | letter-spacing: 0; | ||
204 | line-height: 60rpx; | ||
205 | box-sizing: border-box; | ||
206 | padding: 0 20rpx; | ||
207 | margin-right: 20rpx; | ||
208 | margin-bottom: 13rpx; | ||
209 | } | ||
210 | .boxChoiced{ | ||
211 | background: rgba(255,107,74,0.15); | ||
212 | color: #FF6B4A; | ||
213 | } | ||
214 | .boxChoice{ | ||
215 | background: #F2F2F2; | ||
216 | color: #666666; | ||
217 | } | ||
218 | .boxChoiced-C,.boxChoice-C{ | ||
219 | width: 64rpx; | ||
220 | height: 64rpx; | ||
221 | border-radius: 32rpx; | ||
222 | margin-right: 8px; | ||
223 | } | ||
224 | .boxChoiced-C{ | ||
225 | opacity: 0.7; | ||
226 | border: 1px solid #FF6B4A; | ||
227 | } | ||
228 | .boxChoice-C{ | ||
229 | opacity: 0.7; | ||
230 | border: 1px solid #FFFFFF; | ||
231 | } | ||
232 | } | ||
233 | |||
234 | } | ||
235 | </style> | ||
236 |
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
File was created | 1 | <template> | |
2 | <view class="content"> | ||
3 | <view class="goods-info"> | ||
4 | <image src="../../static/myorder-paying-pic.png"></image> | ||
5 | <view class="box-right"> | ||
6 | <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> | ||
7 | <text class="p2">支持7天无理由退货 顺丰发货</text> | ||
8 | <view class="priceBox"> | ||
9 | <view class="price">¥{{price*count}}</view> | ||
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> | ||
16 | </view> | ||
17 | </view> | ||
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 | <view class="opCollapse"> | ||
26 | <view class="head"> | ||
27 | <view v-if="!opIsOpen">填写验光数据</view> | ||
28 | <view v-else></view> | ||
29 | <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> | ||
30 | <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> | ||
31 | </view> | ||
32 | <view class="body"> | ||
33 | <template v-if="opIsOpen"> | ||
34 | |||
35 | <view class="goods-form"> | ||
36 | <text class="p1">填写验光数据</text> | ||
37 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | ||
38 | <view class="picker" > | ||
39 | <view class="picker-choice"> | ||
40 | <view class="choice-left"> | ||
41 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | ||
42 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | ||
43 | </view> | ||
44 | <text class="p13">左 (OD)</text> | ||
45 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | ||
46 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | ||
47 | <image src="../../static/detail-tabicon.png" ></image> | ||
48 | </picker> | ||
49 | <text class="p13">右 (OS)</text> | ||
50 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | ||
51 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | ||
52 | <image src="../../static/detail-tabicon.png" ></image> | ||
53 | </picker> | ||
54 | </view> | ||
55 | </view> | ||
56 | <view class="picker" > | ||
57 | <view class="picker-choice"> | ||
58 | <view class="choice-left"> | ||
59 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | ||
60 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | ||
61 | </view> | ||
62 | <text class="p13">左 (OD)</text> | ||
63 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | ||
64 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | ||
65 | <image src="../../static/detail-tabicon.png" ></image> | ||
66 | </picker> | ||
67 | <text class="p13">右 (OS)</text> | ||
68 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | ||
69 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | ||
70 | <image src="../../static/detail-tabicon.png" ></image> | ||
71 | </picker> | ||
72 | </view> | ||
73 | </view> | ||
74 | <view class="picker" > | ||
75 | <view class="picker-choice"> | ||
76 | <view class="choice-left"> | ||
77 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | ||
78 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | ||
79 | </view> | ||
80 | <text class="p13">左 (OD)</text> | ||
81 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | ||
82 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | ||
83 | <image src="../../static/detail-tabicon.png" ></image> | ||
84 | </picker> | ||
85 | <text class="p13">右 (OS)</text> | ||
86 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | ||
87 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | ||
88 | <image src="../../static/detail-tabicon.png" ></image> | ||
89 | </picker> | ||
90 | </view> | ||
91 | </view> | ||
92 | <view class="picker" > | ||
93 | <view class="picker-choice"> | ||
94 | <view class="choice-left"> | ||
95 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | ||
96 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | ||
97 | </view> | ||
98 | <text class="p13">左 (OD)</text> | ||
99 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | ||
100 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | ||
101 | <image src="../../static/detail-tabicon.png" ></image> | ||
102 | </picker> | ||
103 | <text class="p13">右 (OS)</text> | ||
104 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | ||
105 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | ||
106 | <image src="../../static/detail-tabicon.png" ></image> | ||
107 | </picker> | ||
108 | </view> | ||
109 | </view> | ||
110 | <view class="picker" > | ||
111 | <view class="picker-choice"> | ||
112 | <view class="choice-left"> | ||
113 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | ||
114 | </view> | ||
115 | <text class="p13-date">年 (Y)</text> | ||
116 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | ||
117 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | ||
118 | <image src="../../static/detail-tabicon.png" ></image> | ||
119 | </picker> | ||
120 | <text class="p13-date">月 (M)</text> | ||
121 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | ||
122 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | ||
123 | <image src="../../static/detail-tabicon.png" ></image> | ||
124 | </picker> | ||
125 | <text class="p13-date">日 (D)</text> | ||
126 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | ||
127 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | ||
128 | <image src="../../static/detail-tabicon.png" ></image> | ||
129 | </picker> | ||
130 | </view> | ||
131 | </view> | ||
132 | <view class="confirm"> | ||
133 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | ||
134 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
135 | </view> | ||
136 | </view> | ||
137 | |||
138 | </template> | ||
139 | <template v-else> | ||
140 | <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> | ||
141 | <template v-if="item.nameC==='验光日期'"> | ||
142 | <text class="names">{{item.nameC}}</text> | ||
143 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | ||
144 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | ||
145 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | ||
146 | </template> | ||
147 | <template v-else> | ||
148 | <template v-if="item.nameC==='度数'"> | ||
149 | <text style="display: inline;">*</text> | ||
150 | </template> | ||
151 | |||
152 | <text class="names">{{item.nameC}}</text> | ||
153 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | ||
154 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | ||
155 | </template> | ||
156 | </view> | ||
157 | </template> | ||
158 | </view> | ||
159 | </view> | ||
160 | |||
161 | </view> | ||
162 | <view class="submit">立即结算</view> | ||
163 | </view> | ||
164 | </template> | ||
165 | |||
166 | <script> | ||
167 | import MyCollapse from './compoents/MyCollapse.vue' | ||
168 | export default { | ||
169 | components: { | ||
170 | MyCollapse | ||
171 | }, | ||
172 | data() { | ||
173 | return { | ||
174 | count:1, | ||
175 | disabled:false, | ||
176 | price:180, | ||
177 | // 实用功能参数 | ||
178 | funIsOpen:true, // 默认myCollapse开启 | ||
179 | funList: [ | ||
180 | {"name":"防紫外线","isChioce": false,"key":1}, | ||
181 | {"name":"防蓝光","isChioce": false,"key":2}, | ||
182 | {"name":"智能变色","isChioce": false,"key":3}, | ||
183 | {"name":"易清洁","isChioce": false,"key":4}, | ||
184 | {"name":"防辐射","isChioce": false,"key":5}, | ||
185 | {"name":"抗疲劳","isChioce": false,"key":6}, | ||
186 | ], | ||
187 | funContent:[], | ||
188 | |||
189 | // 镜片种类参数 | ||
190 | kindIsOpen:true, | ||
191 | kindList1: [ | ||
192 | {"name":"染色","isChioce":false,key:1}, | ||
193 | {"name":"渐变","isChioce":false,key:2}, | ||
194 | ], | ||
195 | kindList2: [ | ||
196 | {"name":"JB234759","isChioce":false,key:3}, | ||
197 | {"name":"JB234759","isChioce":false,key:4}, | ||
198 | {"name":"JB234759","isChioce":false,key:5}, | ||
199 | {"name":"JB234759","isChioce":false,key:6}, | ||
200 | {"name":"JB234759","isChioce":false,key:7}, | ||
201 | ], | ||
202 | kindContent:[], | ||
203 | // 材质选择 | ||
204 | maIsOpen:true, | ||
205 | maList1: [ | ||
206 | {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, | ||
207 | {"name":"特殊镜片","isChioce":false,key:2}, | ||
208 | ], | ||
209 | maList2: [ | ||
210 | {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, | ||
211 | {"name":"玻璃镜片","isChioce":false,key:4}, | ||
212 | ], | ||
213 | maContent:[], | ||
214 | // 折射率参数 | ||
215 | reIsOpen:true, | ||
216 | reList1: [ | ||
217 | {"name":"1.56(推荐)","isChioce":false,key:1,"range":"0-300度","isRange":true}, | ||
218 | {"name":"1.60","isChioce":false,key:2}, | ||
219 | ], | ||
220 | reList2: [ | ||
221 | {"name":"1.71(推荐)","isChioce":false,key:3,"range":"300-1000度","isRange":true}, | ||
222 | {"name":"1.67","isChioce":false,key:4}, | ||
223 | {"name":"1.71","isChioce":false,key:5}, | ||
224 | {"name":"1.74","isChioce":false,key:6}, | ||
225 | ], | ||
226 | reContent:[], | ||
227 | // 验光参数 | ||
228 | opIsOpen:true, | ||
229 | tablist: { | ||
230 | // read: true, | ||
231 | // seeLong: false, | ||
232 | confirm: false | ||
233 | }, | ||
234 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | ||
235 | // 度数相关数据 | ||
236 | pickerInfoList:[ | ||
237 | {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, | ||
238 | {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, | ||
239 | {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, | ||
240 | {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, | ||
241 | {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} | ||
242 | ], | ||
243 | |||
244 | } | ||
245 | }, | ||
246 | methods: { | ||
247 | counter(isadd){ | ||
248 | if(isadd){ | ||
249 | this.count++ | ||
250 | }else{ | ||
251 | this.count <= 1? this.disabled = true:this.count-- | ||
252 | } | ||
253 | }, | ||
254 | myCollapseChange(isopen){ | ||
255 | // console.log(isopen) | ||
256 | this.opIsOpen = !isopen | ||
257 | }, | ||
258 | changeConfirm() { | ||
259 | this.tablist.confirm = !this.tablist.confirm | ||
260 | }, | ||
261 | |||
262 | bindPickerChange01: function(e) { | ||
263 | this.pickerInfoList[0].nameIndex1 = e.target.value | ||
264 | }, | ||
265 | bindPickerChange02: function(e) { | ||
266 | this.pickerInfoList[0].nameIndex2 = e.target.value | ||
267 | }, | ||
268 | |||
269 | bindPickerChange11: function(e) { | ||
270 | this.pickerInfoList[1].nameIndex1 = e.target.value | ||
271 | }, | ||
272 | bindPickerChange12: function(e) { | ||
273 | this.pickerInfoList[1].nameIndex2 = e.target.value | ||
274 | }, | ||
275 | |||
276 | bindPickerChange21: function(e) { | ||
277 | this.pickerInfoList[2].nameIndex1 = e.target.value | ||
278 | }, | ||
279 | bindPickerChange22: function(e) { | ||
280 | this.pickerInfoList[2].nameIndex2 = e.target.value | ||
281 | }, | ||
282 | |||
283 | bindPickerChange31: function(e) { | ||
284 | this.pickerInfoList[3].nameIndex1 = e.target.value | ||
285 | }, | ||
286 | bindPickerChange32: function(e) { | ||
287 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
288 | }, | ||
289 | |||
290 | bindPickerChange41: function(e) { | ||
291 | this.pickerInfoList[4].nameIndex1 = e.target.value | ||
292 | }, | ||
293 | bindPickerChange42: function(e) { | ||
294 | this.pickerInfoList[4].nameIndex2 = e.target.value | ||
295 | }, | ||
296 | bindPickerChange43: function(e) { | ||
297 | this.pickerInfoList[4].nameIndex3 = e.target.value | ||
298 | }, | ||
299 | } | ||
300 | } | ||
301 | </script> | ||
302 | |||
303 | <style lang="scss" scoped> | ||
304 | .content{ | ||
305 | width: 100%; | ||
306 | background-color: #F2F2F2; | ||
307 | display: flex; | ||
308 | flex-direction: column; | ||
309 | align-items: center; | ||
310 | } | ||
311 | |||
312 | .goods-info{ | ||
313 | width: 100%; | ||
314 | height: 272rpx; | ||
315 | box-sizing: border-box; | ||
316 | padding: 40rpx 40rpx 36rpx 36rpx; | ||
317 | margin: 36rpx 0 18rpx 0; | ||
318 | // margin-bottom: -18rpx; | ||
319 | // margin-top: -36rpx; | ||
320 | background: #FFFFFF; | ||
321 | border-radius: 16rpx; | ||
322 | display: flex; | ||
323 | image{ | ||
324 | width: 94px; | ||
325 | height: 94px; | ||
326 | margin-right: 28rpx; | ||
327 | } | ||
328 | .box-right{ | ||
329 | width: 458rpx; | ||
330 | display: flex; | ||
331 | flex-direction: column; | ||
332 | align-items: flex-start; | ||
333 | justify-content: space-between; | ||
334 | .p1 { | ||
335 | // font-family: PingFangSC-Regular; | ||
336 | font-size: 14px; | ||
337 | color: #333333; | ||
338 | letter-spacing: -0.26px; | ||
339 | text-align: justify; | ||
340 | line-height: 18px; | ||
341 | } | ||
342 | .p2 { | ||
343 | // font-family: PingFangSC-Regular; | ||
344 | font-size: 10px; | ||
345 | color: #999999; | ||
346 | letter-spacing: -0.19px; | ||
347 | margin-top: -20rpx; | ||
348 | } | ||
349 | .priceBox{ | ||
350 | display: flex; | ||
351 | flex-direction: row; | ||
352 | justify-content: space-between; | ||
353 | width: 100%; | ||
354 | .price{ | ||
355 | color: #FF6B4A; | ||
356 | font-size: 28rpx; | ||
357 | } | ||
358 | .counter{ | ||
359 | display: flex; | ||
360 | flex-direction: row; | ||
361 | justify-content: space-between; | ||
362 | font-size: 28rpx; | ||
363 | color: #333333; | ||
364 | width: 122rpx; | ||
365 | .btn{ | ||
366 | display: flex; | ||
367 | justify-content: center; | ||
368 | line-height: 32rpx; | ||
369 | height: 32rpx; | ||
370 | width: 32rpx; | ||
371 | background-color: #F2F2F2; | ||
372 | color: #CFCFCF; | ||
373 | } | ||
374 | } | ||
375 | } | ||
376 | } | ||
377 | } | ||
378 | |||
379 | .goods-data{ | ||
380 | width: 100%; | ||
381 | box-sizing: border-box; | ||
382 | padding: 37rpx 40rpx 0 40rpx; | ||
383 | background: #FFFFFF; | ||
384 | border-radius: 12rpx; | ||
385 | margin-bottom: 92px; | ||
386 | .opCollapse{ | ||
387 | width: 100%; | ||
388 | padding-bottom: 28rpx; | ||
389 | margin-top: 7px; | ||
390 | border-bottom: 1px solid #E9E9E9; | ||
391 | .head{ | ||
392 | display: flex; | ||
393 | justify-content: space-between; | ||
394 | height: 24px; | ||
395 | // font-family: PingFangSC-Medium; | ||
396 | font-size: 16px; | ||
397 | color: #333333; | ||
398 | letter-spacing: -0.3px; | ||
399 | text-align: justify; | ||
400 | line-height: 24px; | ||
401 | margin-bottom: 18rpx; | ||
402 | .headRighted{ | ||
403 | width: 0; | ||
404 | height: 0; | ||
405 | border-left: 4px solid transparent; | ||
406 | border-right: 4px solid transparent; | ||
407 | border-bottom: 4px solid #CFCFCF; | ||
408 | transform: scaleY(-1); | ||
409 | margin-top: 10px; | ||
410 | } | ||
411 | .headMid{ | ||
412 | // font-family: PingFangSC-Regular; | ||
413 | font-size: 10px; | ||
414 | color: #999999; | ||
415 | letter-spacing: -0.19px; | ||
416 | margin-left: -120rpx; | ||
417 | } | ||
418 | .headRight{ | ||
419 | width: 0; | ||
420 | height: 0; | ||
421 | border-left: 4px solid transparent; | ||
422 | border-right: 4px solid transparent; | ||
423 | border-bottom: 4px solid #CFCFCF; | ||
424 | margin-top: 10px; | ||
425 | } | ||
426 | } | ||
427 | .body{ | ||
428 | // font-family: PingFangSC-Regular; | ||
429 | font-size: 12px; | ||
430 | color: #666666; | ||
431 | letter-spacing: 0; | ||
432 | .bodyBox{ | ||
433 | margin-top: 15px; | ||
434 | .names{ | ||
435 | // font-family: PingFangSC-Regular; | ||
436 | font-size: 12px; | ||
437 | color: #151515; | ||
438 | letter-spacing: 0; | ||
439 | text-align: justify; | ||
440 | line-height: 17px; | ||
441 | margin-left: 5px; | ||
442 | margin-right: 10px; | ||
443 | } | ||
444 | text{ | ||
445 | // font-family: PingFangSC-Regular; | ||
446 | font-size: 12px; | ||
447 | color: #666666; | ||
448 | letter-spacing: 0; | ||
449 | text-align: justify; | ||
450 | } | ||
451 | } | ||
452 | |||
453 | } | ||
454 | } | ||
455 | |||
456 | } | ||
457 | |||
458 | .goods-form { | ||
459 | display: flex; | ||
460 | flex-direction: column; | ||
461 | align-items: center; | ||
462 | justify-content: center; | ||
463 | background-color: #fff; | ||
464 | width: 100%; | ||
465 | |||
466 | .p1 { | ||
467 | font-size: 16px; | ||
468 | color: #333333; | ||
469 | letter-spacing: -0.3px; | ||
470 | text-align: justify; | ||
471 | line-height: 24px; | ||
472 | margin: 4px 0; | ||
473 | |||
474 | } | ||
475 | .p2 { | ||
476 | font-size: 12px; | ||
477 | color: #999999; | ||
478 | letter-spacing: -0.23px; | ||
479 | margin-bottom: 18rpx; | ||
480 | } | ||
481 | image{ | ||
482 | width: 28rpx; | ||
483 | height: 26rpx; | ||
484 | } | ||
485 | .confirm { | ||
486 | display: flex; | ||
487 | align-items: center; | ||
488 | font-size: 12px; | ||
489 | color: #666666; | ||
490 | letter-spacing: -0.23px; | ||
491 | width: 684rpx; | ||
492 | image{ | ||
493 | margin-right:25rpx; | ||
494 | } | ||
495 | } | ||
496 | .picker{ | ||
497 | display: flex; | ||
498 | flex-direction: column; | ||
499 | justify-content: center; | ||
500 | align-items: center; | ||
501 | width: 100%; | ||
502 | image{ | ||
503 | width: 10px; | ||
504 | height: 10px; | ||
505 | margin-right: 5px; | ||
506 | } | ||
507 | .picker-choice{ | ||
508 | display: flex; | ||
509 | width: 684rpx; | ||
510 | align-items: center; | ||
511 | margin-bottom: 40rpx; | ||
512 | .choice-left{ | ||
513 | width: 210rpx; | ||
514 | .p11 { | ||
515 | font-size: 14px; | ||
516 | color: #333333; | ||
517 | letter-spacing: -0.26px; | ||
518 | text-align: justify; | ||
519 | line-height: 24px; | ||
520 | // margin-right: 10px; | ||
521 | } | ||
522 | .p12 { | ||
523 | font-size: 10px; | ||
524 | color: #3F3F3F; | ||
525 | letter-spacing: -0.19px; | ||
526 | text-align: justify; | ||
527 | line-height: 24px; | ||
528 | } | ||
529 | |||
530 | |||
531 | } | ||
532 | .p13 { | ||
533 | font-size: 10px; | ||
534 | color: #999999; | ||
535 | letter-spacing: -0.19px; | ||
536 | margin-right: 10px; | ||
537 | } | ||
538 | .p13-date { | ||
539 | font-size: 10px; | ||
540 | color: #999999; | ||
541 | letter-spacing: -0.19px; | ||
542 | margin-right: 5px; | ||
543 | } | ||
544 | .p14 { | ||
545 | font-size: 14px; | ||
546 | color: #666666; | ||
547 | letter-spacing: -0.26px; | ||
548 | text-align: center; | ||
549 | width: 124rpx; | ||
550 | border-bottom: 1px solid #CFCFCF; | ||
551 | } | ||
552 | |||
553 | } | ||
554 | } | ||
555 | } | ||
556 | |||
557 | .submit{ | ||
558 | width: 100%; | ||
559 | height: 112rpx; | ||
560 | background: #FF6B4A; | ||
561 | position: fixed; | ||
562 | bottom: 0; | ||
563 | text-align: center; | ||
564 | line-height: 112rpx; | ||
565 | // font-family: PingFangSC-Regular; | ||
566 | font-size: 16px; | ||
567 | color: #FFFFFF; | ||
568 | letter-spacing: -0.3px; | ||
569 | } | ||
570 | |||
571 | </style> | ||
572 |
src/pages/frameDetail/frameDetail.vue
1 | <template> | 1 | <template> |
2 | <view class="container"> | 2 | <view class="container"> |
3 | <view class="D1"> | 3 | <view class="D1"> |
4 | <!-- 轮播图 --> | 4 | <!-- 轮播图 --> |
5 | <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > | 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"> | 6 | <swiper-item v-for="(item) in infos" :key="item.goods_id"> |
7 | <image :src="item.img" mode="scaleToFill"></image> | 7 | <image :src="item.img" mode="scaleToFill"></image> |
8 | </swiper-item> | 8 | </swiper-item> |
9 | </swiper> | 9 | </swiper> |
10 | <view class="D1_price">¥{{price}}</view> | 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> | 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> | 12 | <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> |
13 | </view> | 13 | </view> |
14 | <view class="D2" v-if="goodType === 0 || goodType === 3"> | 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> | 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> | 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> | 17 | <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> |
18 | </view> | 18 | </view> |
19 | <view class="D2" v-if="goodType === 1"> | 19 | <view class="D2" v-if="updateGoodType == 1"> |
20 | <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view> | 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> | 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> | 22 | <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view> |
23 | </view> | 23 | </view> |
24 | <view class="D2" v-if="goodType === 2"> | 24 | <view class="D2" v-if="updateGoodType == 3"> |
25 | <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view> | 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> | 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> | 27 | <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> |
28 | </view> | 28 | </view> |
29 | 29 | ||
30 | <view class="D3"> | 30 | <view class="D3"> |
31 | <view class="screenBar"> | 31 | <view class="screenBar"> |
32 | <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > | 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> | 33 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
34 | </view> | 34 | </view> |
35 | </view> | 35 | </view> |
36 | <view class="screen-item " v-if="current ===0"> | 36 | <view class="screen-item " v-if="current ===0"> |
37 | <view class="D3_list"> | 37 | <view class="D3_list"> |
38 | <view v-for="(item) in parameter" :key="item.key"> | 38 | <view v-for="(item) in parameter" :key="item.key"> |
39 | <image class="D3_image" v-bind:src = "item.img"></image> | 39 | <image class="D3_image" v-bind:src = "item.img"></image> |
40 | <span>{{item.standard}}</span> | 40 | <span>{{item.standard}}</span> |
41 | <span>{{item.slength}}</span> | 41 | <span>{{item.slength}}</span> |
42 | </view> | 42 | </view> |
43 | </view> | 43 | </view> |
44 | </view > | 44 | </view > |
45 | <view class="screen-item " v-if="current ===1"> | 45 | <view class="screen-item " v-if="current ===1"> |
46 | <view class="D3_list"> | 46 | <view class="D3_list"> |
47 | <view>主体</view> | 47 | <view>主体</view> |
48 | <view>商品产地:韩国</view> | 48 | <view>商品产地:韩国</view> |
49 | <view>包装清单:彩色隐形 * 1</view> | 49 | <view>包装清单:彩色隐形 * 1</view> |
50 | </view> | 50 | </view> |
51 | </view > | 51 | </view > |
52 | <view class="screen-item " v-if="current ===2"> | 52 | <view class="screen-item " v-if="current ===2"> |
53 | <view class="customerService"> | 53 | <view class="customerService"> |
54 | <view class="serviceItem" > | 54 | <view class="serviceItem" > |
55 | <view class="title"> | 55 | <view class="title"> |
56 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 56 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
57 | <text class="titleText">卖家服务</text> | 57 | <text class="titleText">卖家服务</text> |
58 | </view> | 58 | </view> |
59 | <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> | 59 | <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> |
60 | </view> | 60 | </view> |
61 | <view class="serviceItem" > | 61 | <view class="serviceItem" > |
62 | <view class="title"> | 62 | <view class="title"> |
63 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 63 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
64 | <text class="titleText">平台承诺</text> | 64 | <text class="titleText">平台承诺</text> |
65 | </view> | 65 | </view> |
66 | <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> | 66 | <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> |
67 | </view> | 67 | </view> |
68 | <view class="serviceItem"> | 68 | <view class="serviceItem"> |
69 | <view class="title"> | 69 | <view class="title"> |
70 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 70 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
71 | <text class="titleText">正品保证</text> | 71 | <text class="titleText">正品保证</text> |
72 | </view> | 72 | </view> |
73 | <view class="itemContent">向您保证所售商品均为正品行货</view> | 73 | <view class="itemContent">向您保证所售商品均为正品行货</view> |
74 | </view> | 74 | </view> |
75 | <view class="serviceItem2"> | 75 | <view class="serviceItem2"> |
76 | <view class="title"> | 76 | <view class="title"> |
77 | <text class="titleText">权利申明</text> | 77 | <text class="titleText">权利申明</text> |
78 | </view> | 78 | </view> |
79 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> | 79 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> |
80 | </view> | 80 | </view> |
81 | <view class="serviceItem2"> | 81 | <view class="serviceItem2"> |
82 | <view class="title"> | 82 | <view class="title"> |
83 | <text class="titleText">价格保证</text> | 83 | <text class="titleText">价格保证</text> |
84 | </view> | 84 | </view> |
85 | <view class="itemContent"> | 85 | <view class="itemContent"> |
86 | <view class="itemContent-child"> | 86 | <view class="itemContent-child"> |
87 | <text class="contentTitle">平台价:</text> | 87 | <text class="contentTitle">平台价:</text> |
88 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 88 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
89 | </view> | 89 | </view> |
90 | <view class="itemContent-child"> | 90 | <view class="itemContent-child"> |
91 | <text class="contentTitle">划线价:</text> | 91 | <text class="contentTitle">划线价:</text> |
92 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 92 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
93 | </view> | 93 | </view> |
94 | <view class="itemContent-child"> | 94 | <view class="itemContent-child"> |
95 | <text class="contentTitle">平折扣:</text> | 95 | <text class="contentTitle">平折扣:</text> |
96 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 96 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
97 | </view> | 97 | </view> |
98 | <view class="itemContent-child"> | 98 | <view class="itemContent-child"> |
99 | <text class="contentTitle">异常问题:</text> | 99 | <text class="contentTitle">异常问题:</text> |
100 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 100 | <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
101 | </view> | 101 | </view> |
102 | 102 | ||
103 | </view> | 103 | </view> |
104 | </view> | 104 | </view> |
105 | </view> | 105 | </view> |
106 | </view > | 106 | </view > |
107 | </view> | 107 | </view> |
108 | <view class="D4" v-if="current !==2"> | 108 | <view class="D4" v-if="current !==2"> |
109 | <view class="D4_esvalue"> | 109 | <view class="D4_esvalue"> |
110 | <view>{{esvalue}}</view> | 110 | <view>{{esvalue}}</view> |
111 | <view class="D4_2"> | 111 | <view class="D4_2"> |
112 | <view class="star" v-for="o in starCount" :key="o"> | 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> | 113 | <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> |
114 | </view> | 114 | </view> |
115 | </view> | 115 | </view> |
116 | </view> | 116 | </view> |
117 | <view class="D4_list"> | 117 | <view class="D4_list"> |
118 | <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> | 118 | <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> |
119 | </view> | 119 | </view> |
120 | </view> | 120 | </view> |
121 | <view class="D5" v-if="current !==2"> | 121 | <view class="D5" v-if="current !==2"> |
122 | <view class="D5_fixed1"> | 122 | <view class="D5_fixed1"> |
123 | <image src="/static/img/detail/hr.png"></image> | 123 | <image src="/static/img/detail/hr.png"></image> |
124 | <view>商品详细</view> | 124 | <view>商品详细</view> |
125 | <image src="/static/img/detail/hr.png"></image> | 125 | <image src="/static/img/detail/hr.png"></image> |
126 | </view> | 126 | </view> |
127 | <view class="D5_all"> | 127 | <view class="D5_all"> |
128 | <image v-bind:src="imgAll"></image> | 128 | <image v-bind:src="imgAll"></image> |
129 | </view> | 129 | </view> |
130 | <view class="D5_photoes"> | 130 | <view class="D5_photoes"> |
131 | <view class="D5_photoes1"> | 131 | <view class="D5_photoes1"> |
132 | <view v-for="(photoes) in photoes" :key="photoes.value"> | 132 | <view v-for="(photoes) in photoes" :key="photoes.value"> |
133 | <image v-bind:src = "photoes.img"></image> | 133 | <image v-bind:src = "photoes.img"></image> |
134 | <view>{{photoes.value}}</view> | 134 | <view>{{photoes.value}}</view> |
135 | </view> | 135 | </view> |
136 | </view> | 136 | </view> |
137 | <view class="D5_logo1">帕森防蓝光镜片</view> | 137 | <view class="D5_logo1">帕森防蓝光镜片</view> |
138 | <view class="D5_logo2">健康护眼,我们是认真的!</view> | 138 | <view class="D5_logo2">健康护眼,我们是认真的!</view> |
139 | <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> | 139 | <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> |
140 | </view> | 140 | </view> |
141 | </view> | 141 | </view> |
142 | <view class="D6" v-if="current !==2"> | 142 | <view class="D6" v-if="current !==2"> |
143 | <view class="D6_v1">CHARM DETAIL</view> | 143 | <view class="D6_v1">CHARM DETAIL</view> |
144 | <view class="D6_v2">细节展示</view> | 144 | <view class="D6_v2">细节展示</view> |
145 | <view ><image v-bind:src="imgDetail"></image></view> | 145 | <view ><image v-bind:src="imgDetail"></image></view> |
146 | <view>........................................................................</view> | 146 | <view>........................................................................</view> |
147 | <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> | 147 | <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> |
148 | </view> | 148 | </view> |
149 | 149 | ||
150 | <!-- 底部菜单 --> | 150 | <!-- 底部菜单 --> |
151 | <view class="botton"> | 151 | <view class="botton"> |
152 | <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> | 152 | <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> |
153 | <view class="botton_2"> | 153 | <view class="botton_2"> |
154 | <view class="botton_input">加入购物车</view> | 154 | <view class="botton_input">加入购物车</view> |
155 | <view class="botton_now" @click="goPerchase">立即购买</view> | 155 | <view class="botton_now" @click="goPerchase">立即购买</view> |
156 | </view> | 156 | </view> |
157 | </view> | 157 | </view> |
158 | </view> | 158 | </view> |
159 | </template> | 159 | </template> |
160 | 160 | ||
161 | <script> | 161 | <script> |
162 | export default { | 162 | export default { |
163 | data(){ | 163 | data(){ |
164 | return { | 164 | return { |
165 | name:'商品名称', | 165 | name:'商品名称', |
166 | goodType:1, | 166 | goodType:2, |
167 | price: 120, | 167 | price: 120, |
168 | number: 391, | 168 | number: 391, |
169 | screenItems: [ | 169 | screenItems: [ |
170 | {current:0,text:'商品保障'}, | 170 | {current:0,text:'商品保障'}, |
171 | {current:1,text:'规格参数'}, | 171 | {current:1,text:'规格参数'}, |
172 | {current:2,text:'售后保障'}, | 172 | {current:2,text:'售后保障'}, |
173 | ], | 173 | ], |
174 | current: 0, | 174 | current: 0, |
175 | starCount:5, | 175 | starCount:5, |
176 | infos: [ | 176 | infos: [ |
177 | { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | 177 | { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, |
178 | { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | 178 | { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, |
179 | { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | 179 | { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, |
180 | { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, | 180 | { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, |
181 | ], | 181 | ], |
182 | parameter:[ | 182 | parameter:[ |
183 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, | 183 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, |
184 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, | 184 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, |
185 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, | 185 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, |
186 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, | 186 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, |
187 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, | 187 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, |
188 | {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} | 188 | {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} |
189 | ], | 189 | ], |
190 | assess:[ | 190 | assess:[ |
191 | {key: 0, Iassess: '价格实惠'}, | 191 | {key: 0, Iassess: '价格实惠'}, |
192 | {key: 1, Iassess: '美观大方'}, | 192 | {key: 1, Iassess: '美观大方'}, |
193 | {key: 2, Iassess: '易搭配'} | 193 | {key: 2, Iassess: '易搭配'} |
194 | ], | 194 | ], |
195 | esvalue:'宝贝好评率 100%', | 195 | esvalue:'宝贝好评率 100%', |
196 | introduction:{ | 196 | introduction:{ |
197 | material:'钛合金', | 197 | material:'钛合金', |
198 | func:'抗疲劳/防辐射', | 198 | func:'抗疲劳/防辐射', |
199 | rate: 1.6 | 199 | rate: 1.6 |
200 | }, | 200 | }, |
201 | imgAll:'/static/img/detail/d8.png' , | 201 | imgAll:'/static/img/detail/d8.png' , |
202 | photoes:[ | 202 | photoes:[ |
203 | {value:'日常办公', img:'/static/img/detail/d9.png'}, | 203 | {value:'日常办公', img:'/static/img/detail/d9.png'}, |
204 | {value:'上网', img:'/static/img/detail/d10.png'}, | 204 | {value:'上网', img:'/static/img/detail/d10.png'}, |
205 | {value:'追剧', img:'/static/img/detail/d11.png'}, | 205 | {value:'追剧', img:'/static/img/detail/d11.png'}, |
206 | {value:'玩游戏', img:'/static/img/detail/d12.png'}, | 206 | {value:'玩游戏', img:'/static/img/detail/d12.png'}, |
207 | ], | 207 | ], |
208 | imgDetail:'/static/img/detail/d13.png', | 208 | imgDetail:'/static/img/detail/d13.png', |
209 | imgShop:{ | 209 | imgShop:{ |
210 | img:'/static/tab-cart.png', | 210 | img:'/static/tab-cart.png', |
211 | IsShown: false | 211 | IsShown: false |
212 | } | 212 | } |
213 | } | 213 | } |
214 | }, | 214 | }, |
215 | onLoad:function(option){ | ||
216 | this.goodType = option.goodType | ||
217 | console.log(this.updateGoodType) | ||
218 | }, | ||
219 | computed:{ | ||
220 | updateGoodType(){ | ||
221 | return this.goodType | ||
222 | } | ||
223 | }, | ||
215 | methods:{ | 224 | methods:{ |
216 | goPerchase(){ | 225 | goPerchase(){ |
217 | uni.navigateTo({ | 226 | switch(this.updateGoodType){ |
218 | url: '../purchaseLenses/purchaseLenses', | 227 | case '1': |
219 | success: res => {}, | 228 | uni.navigateTo({ |
220 | fail: () => {}, | 229 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
221 | complete: () => {} | 230 | success: res => {}, |
222 | }); | 231 | fail: () => {}, |
232 | complete: () => {} | ||
233 | }); | ||
234 | break; | ||
235 | case '2': | ||
236 | uni.navigateTo({ | ||
237 | url: `../detailStandard/detailStandard_k`, | ||
238 | success: res => {}, | ||
239 | fail: () => {}, | ||
240 | complete: () => {} | ||
241 | }); | ||
242 | break; | ||
243 | case '3': | ||
244 | uni.navigateTo({ | ||
245 | url: `../purchaseLenses/purchaseLenses`, | ||
246 | success: res => {}, | ||
247 | fail: () => {}, | ||
248 | complete: () => {} | ||
249 | }); | ||
250 | break; | ||
251 | case '4': | ||
252 | uni.navigateTo({ | ||
253 | url: `../detailStandard/detailStandard_sun`, | ||
254 | success: res => {}, | ||
255 | fail: () => {}, | ||
256 | complete: () => {} | ||
257 | }); | ||
258 | break; | ||
259 | default : | ||
260 | break | ||
261 | } | ||
223 | }, | 262 | }, |
224 | tabChange(e) { | 263 | tabChange(e) { |
225 | if (this.current !== e) { | 264 | if (this.current !== e) { |
226 | this.current = e; | 265 | this.current = e; |
227 | } | 266 | } |
228 | } | 267 | } |
229 | } | 268 | } |
230 | } | 269 | } |
231 | </script> | 270 | </script> |
232 | <style lang='scss'> | 271 | <style lang='scss'> |
233 | .container{ | 272 | .container{ |
234 | background-color:#f8f8f8 ; | 273 | background-color:#f8f8f8 ; |
235 | } | 274 | } |
236 | .D1,.D2,.D3,.D4,.D6{ | 275 | .D1,.D2,.D3,.D4,.D6{ |
237 | background: #ffffff; | 276 | background: #ffffff; |
238 | margin-bottom: 10px; | 277 | margin-bottom: 10px; |
239 | padding:8px 20px 8px 20px; | 278 | padding:8px 20px 8px 20px; |
240 | box-sizing: border-box; | 279 | box-sizing: border-box; |
241 | .swiperImage { | 280 | .swiperImage { |
242 | width: 684rpx; | 281 | width: 684rpx; |
243 | height: 512rpx; | 282 | height: 512rpx; |
244 | image { | 283 | image { |
245 | width: 100%; | 284 | width: 100%; |
246 | height: 100%; | 285 | height: 100%; |
247 | border-radius: 16rpx; | 286 | border-radius: 16rpx; |
248 | } | 287 | } |
249 | } | 288 | } |
250 | } | 289 | } |
251 | .D5{ | 290 | .D5{ |
252 | background: #ffffff; | 291 | background: #ffffff; |
253 | padding:8px 20px 8px 20px; | 292 | padding:8px 20px 8px 20px; |
254 | box-sizing: border-box; | 293 | box-sizing: border-box; |
255 | } | 294 | } |
256 | .swiperImage{ | 295 | .swiperImage{ |
257 | width: 100%; | 296 | width: 100%; |
258 | height: 560rpx; | 297 | height: 560rpx; |
259 | .swiper-item{ | 298 | .swiper-item{ |
260 | width: 100%; | 299 | width: 100%; |
261 | image{ | 300 | image{ |
262 | width: 100%; | 301 | width: 100%; |
263 | } | 302 | } |
264 | } | 303 | } |
265 | } | 304 | } |
266 | .D1{ | 305 | .D1{ |
267 | .D1_price{ | 306 | .D1_price{ |
268 | color: #EB5D3B; | 307 | color: #EB5D3B; |
269 | font-size: 18px; | 308 | font-size: 18px; |
270 | margin-top: 5px; | 309 | margin-top: 5px; |
271 | font-family: 'PingFangSC-Semibold'; | 310 | font-family: 'PingFangSC-Semibold'; |
272 | } | 311 | } |
273 | .D1_name{ | 312 | .D1_name{ |
274 | font-size: 16px; | 313 | font-size: 16px; |
275 | font-family: 'PingFangSC-Semibold'; | 314 | font-family: 'PingFangSC-Semibold'; |
276 | margin-top: 5px; | 315 | margin-top: 5px; |
277 | display: flex; | 316 | display: flex; |
278 | justify-content: space-between; | 317 | justify-content: space-between; |
279 | .D1_name1{ | 318 | .D1_name1{ |
280 | font-weight: bold; | 319 | font-weight: bold; |
281 | font-size: 16px; | 320 | font-size: 16px; |
282 | color: #333333; | 321 | color: #333333; |
283 | } | 322 | } |
284 | .D1_number{ | 323 | .D1_number{ |
285 | color: #999999 ; | 324 | color: #999999 ; |
286 | font-size: 14px; | 325 | font-size: 14px; |
287 | font-family: 'PingFangSC-Regular'; | 326 | font-family: 'PingFangSC-Regular'; |
288 | } | 327 | } |
289 | } | 328 | } |
290 | .D1_spans{ | 329 | .D1_spans{ |
291 | font-size: 10px; | 330 | font-size: 10px; |
292 | color:#999999; | 331 | color:#999999; |
293 | margin-top: 5px; | 332 | margin-top: 5px; |
294 | span{ | 333 | span{ |
295 | height: 14px; | 334 | height: 14px; |
296 | margin-right: 10px; | 335 | margin-right: 10px; |
297 | } | 336 | } |
298 | } | 337 | } |
299 | 338 | ||
300 | } | 339 | } |
301 | .D2{ | 340 | .D2{ |
302 | font-size: 14px; | 341 | font-size: 14px; |
303 | font-family: 'PingFangSC-Regular'; | 342 | font-family: 'PingFangSC-Regular'; |
304 | view{ | 343 | view{ |
305 | height: 24px; | 344 | height: 24px; |
306 | } | 345 | } |
307 | .D2_span1{ | 346 | .D2_span1{ |
308 | color: #999999; | 347 | color: #999999; |
309 | } | 348 | } |
310 | .D2_span2{ | 349 | .D2_span2{ |
311 | color: #333333; | 350 | color: #333333; |
312 | } | 351 | } |
313 | } | 352 | } |
314 | .D3{ | 353 | .D3{ |
315 | .screenBar{ | 354 | .screenBar{ |
316 | width: 670rpx; | 355 | width: 670rpx; |
317 | margin-top: 20rpx; | 356 | margin-top: 20rpx; |
318 | margin-bottom: 24rpx; | 357 | margin-bottom: 24rpx; |
319 | display: flex; | 358 | display: flex; |
320 | flex-direction: row; | 359 | flex-direction: row; |
321 | justify-content: space-between; | 360 | justify-content: space-between; |
322 | align-items: center; | 361 | align-items: center; |
323 | font-size: 14px; | 362 | font-size: 14px; |
324 | color: #333333; | 363 | color: #333333; |
325 | transition:all 0.2s; | 364 | transition:all 0.2s; |
326 | } | 365 | } |
327 | .screen-item{ | 366 | .screen-item{ |
328 | font-size: 32rpx; | 367 | font-size: 32rpx; |
329 | color: #333333; | 368 | color: #333333; |
330 | display: flex; | 369 | display: flex; |
331 | transition:all 0.2s; | 370 | transition:all 0.2s; |
332 | .D3_list{ | 371 | .D3_list{ |
333 | margin-bottom: 4px; | 372 | margin-bottom: 4px; |
334 | } | 373 | } |
335 | .D3_list view{ | 374 | .D3_list view{ |
336 | display: flex; | 375 | display: flex; |
337 | align-content: center; | 376 | align-content: center; |
338 | font-size: 14px; | 377 | font-size: 14px; |
339 | color: #333333; | 378 | color: #333333; |
340 | } | 379 | } |
341 | .D3_list image{ | 380 | .D3_list image{ |
342 | width: 50px; | 381 | width: 50px; |
343 | height: 25px; | 382 | height: 25px; |
344 | margin-right: 6px; | 383 | margin-right: 6px; |
345 | } | 384 | } |
346 | .D3_list span{ | 385 | .D3_list span{ |
347 | margin-left: 6px; | 386 | margin-left: 6px; |
348 | margin-right: 5px; | 387 | margin-right: 5px; |
349 | font-family: 'PingFangSC-Regular'; | 388 | font-family: 'PingFangSC-Regular'; |
350 | } | 389 | } |
351 | } | 390 | } |
352 | .active{ | 391 | .active{ |
353 | border-bottom: 4rpx solid #FF6B4A; | 392 | border-bottom: 4rpx solid #FF6B4A; |
354 | } | 393 | } |
355 | .customerService{ | 394 | .customerService{ |
356 | margin-bottom: 90rpx; | 395 | margin-bottom: 90rpx; |
357 | .serviceItem{ | 396 | .serviceItem{ |
358 | margin-bottom: 32rpx; | 397 | margin-bottom: 32rpx; |
359 | .title{ | 398 | .title{ |
360 | display: flex;flex-direction: row; | 399 | display: flex;flex-direction: row; |
361 | align-items: center; | 400 | align-items: center; |
362 | .titleText{ | 401 | .titleText{ |
363 | font-size: 14px; | 402 | font-size: 14px; |
364 | color: #333333; | 403 | color: #333333; |
365 | margin-bottom: 12rpx; | 404 | margin-bottom: 12rpx; |
366 | } | 405 | } |
367 | } | 406 | } |
368 | .itemContent{ | 407 | .itemContent{ |
369 | font-size: 14px; | 408 | font-size: 14px; |
370 | color: #999999; | 409 | color: #999999; |
371 | margin-left: 18rpx; | 410 | margin-left: 18rpx; |
372 | } | 411 | } |
373 | } | 412 | } |
374 | .serviceItem2{ | 413 | .serviceItem2{ |
375 | margin-left: 18rpx; | 414 | margin-left: 18rpx; |
376 | margin-bottom: 32rpx; | 415 | margin-bottom: 32rpx; |
377 | .titleText{ | 416 | .titleText{ |
378 | font-size: 14px; | 417 | font-size: 14px; |
379 | color: #FF6B4A; | 418 | color: #FF6B4A; |
380 | } | 419 | } |
381 | .itemContent{ | 420 | .itemContent{ |
382 | font-size: 14px; | 421 | font-size: 14px; |
383 | color: #999999; | 422 | color: #999999; |
384 | .itemContent-child{ | 423 | .itemContent-child{ |
385 | margin-bottom: 40rpx; | 424 | margin-bottom: 40rpx; |
386 | .contentTitle{ | 425 | .contentTitle{ |
387 | border-bottom: 1px solid #FF6B4A; | 426 | border-bottom: 1px solid #FF6B4A; |
388 | } | 427 | } |
389 | } | 428 | } |
390 | } | 429 | } |
391 | } | 430 | } |
392 | } | 431 | } |
393 | } | 432 | } |
394 | .D4{ | 433 | .D4{ |
395 | .D4_esvalue{ | 434 | .D4_esvalue{ |
396 | font-size: 14px; | 435 | font-size: 14px; |
397 | color: #333333; | 436 | color: #333333; |
398 | display: flex; | 437 | display: flex; |
399 | justify-content: space-between; | 438 | justify-content: space-between; |
400 | margin-bottom: 10px; | 439 | margin-bottom: 10px; |
401 | .D4_2{ | 440 | .D4_2{ |
402 | width: 90px; | 441 | width: 90px; |
403 | display: flex; | 442 | display: flex; |
404 | align-items: center; | 443 | align-items: center; |
405 | justify-content: space-between; | 444 | justify-content: space-between; |
406 | } | 445 | } |
407 | } | 446 | } |
408 | .D4_esvalue view{ | 447 | .D4_esvalue view{ |
409 | font-size: 14px; | 448 | font-size: 14px; |
410 | color: #333333; | 449 | color: #333333; |
411 | font-weight: bold; | 450 | font-weight: bold; |
412 | } | 451 | } |
413 | .D4_list view{ | 452 | .D4_list view{ |
414 | display: inline-block; | 453 | display: inline-block; |
415 | font-size: 12px; | 454 | font-size: 12px; |
416 | text-align: center; | 455 | text-align: center; |
417 | margin-right: 12px; | 456 | margin-right: 12px; |
418 | width: 90px; | 457 | width: 90px; |
419 | height: 24px; | 458 | height: 24px; |
420 | line-height: 24px; | 459 | line-height: 24px; |
421 | background: #F2F2F2; | 460 | background: #F2F2F2; |
422 | color: #666666 ; | 461 | color: #666666 ; |
423 | } | 462 | } |
424 | } | 463 | } |
425 | .D5{ | 464 | .D5{ |
426 | .D5_fixed1{ | 465 | .D5_fixed1{ |
427 | display: flex; | 466 | display: flex; |
428 | justify-content: space-between; | 467 | justify-content: space-between; |
429 | align-content: center; | 468 | align-content: center; |
430 | margin-bottom: 12px; | 469 | margin-bottom: 12px; |
431 | view{ | 470 | view{ |
432 | font-size: 14px; | 471 | font-size: 14px; |
433 | color: #333333; | 472 | color: #333333; |
434 | font-weight: bold; | 473 | font-weight: bold; |
435 | font-family: 'PingFangSC-Medium'; | 474 | font-family: 'PingFangSC-Medium'; |
436 | line-height: 24px; | 475 | line-height: 24px; |
437 | } | 476 | } |
438 | image{ | 477 | image{ |
439 | width: 240rpx; | 478 | width: 240rpx; |
440 | height: 3px; | 479 | height: 3px; |
441 | margin-top: 10px; | 480 | margin-top: 10px; |
442 | } | 481 | } |
443 | } | 482 | } |
444 | .D5_all { | 483 | .D5_all { |
445 | width: 100%; | 484 | width: 100%; |
446 | height: 380px; | 485 | height: 380px; |
447 | margin-bottom: 30px; | 486 | margin-bottom: 30px; |
448 | font-family: 'PingFangSC-Regular'; | 487 | font-family: 'PingFangSC-Regular'; |
449 | border: #999999 solid 1.5px; | 488 | border: #999999 solid 1.5px; |
450 | image{ | 489 | image{ |
451 | width: 100%; | 490 | width: 100%; |
452 | height: 380px; | 491 | height: 380px; |
453 | }} | 492 | }} |
454 | .D5_photoes1{ | 493 | .D5_photoes1{ |
455 | display: grid; | 494 | display: grid; |
456 | grid-template-columns: 48% 48%; | 495 | grid-template-columns: 48% 48%; |
457 | grid-row-gap: 10px; | 496 | grid-row-gap: 10px; |
458 | grid-column-gap: 4%; | 497 | grid-column-gap: 4%; |
459 | image{ | 498 | image{ |
460 | width: 100%; | 499 | width: 100%; |
461 | height: 70px; | 500 | height: 70px; |
462 | } | 501 | } |
463 | view{ | 502 | view{ |
464 | width: 100%; | 503 | width: 100%; |
465 | font-size: 14px; | 504 | font-size: 14px; |
466 | text-align: center; | 505 | text-align: center; |
467 | background: #949494; | 506 | background: #949494; |
468 | font-family: 'PingFangSC-Regular'; | 507 | font-family: 'PingFangSC-Regular'; |
469 | color: #ffffff; | 508 | color: #ffffff; |
470 | view{ | 509 | view{ |
471 | height: 24px; | 510 | height: 24px; |
472 | line-height: 24px; | 511 | line-height: 24px; |
473 | } | 512 | } |
474 | } | 513 | } |
475 | } | 514 | } |
476 | .D5_logo1,.D5_logo2{ | 515 | .D5_logo1,.D5_logo2{ |
477 | text-align: center; | 516 | text-align: center; |
478 | } | 517 | } |
479 | .D5_logo1{ | 518 | .D5_logo1{ |
480 | margin-top: 40px; | 519 | margin-top: 40px; |
481 | font-size: 24px; | 520 | font-size: 24px; |
482 | font-weight: bold; | 521 | font-weight: bold; |
483 | font-family: 'PingFangSC-Semibold'; | 522 | font-family: 'PingFangSC-Semibold'; |
484 | } | 523 | } |
485 | .D5_logo2{ | 524 | .D5_logo2{ |
486 | font-size: 12px; | 525 | font-size: 12px; |
487 | } | 526 | } |
488 | .D5_logo3{ | 527 | .D5_logo3{ |
489 | width: 100%; | 528 | width: 100%; |
490 | text-align: center; | 529 | text-align: center; |
491 | image{ | 530 | image{ |
492 | width: 50px; | 531 | width: 50px; |
493 | height: 24px; | 532 | height: 24px; |
494 | } | 533 | } |
495 | } | 534 | } |
496 | } | 535 | } |
497 | .D6{ | 536 | .D6{ |
498 | width: 100%; | 537 | width: 100%; |
499 | height: 430px; | 538 | height: 430px; |
500 | background: #F9F6ED; | 539 | background: #F9F6ED; |
501 | margin-bottom: 74px; | 540 | margin-bottom: 74px; |
502 | view{ | 541 | view{ |
503 | text-align: center; | 542 | text-align: center; |
504 | } | 543 | } |
505 | .D6_v1{ | 544 | .D6_v1{ |
506 | font-weight: bold; | 545 | font-weight: bold; |
507 | } | 546 | } |
508 | .D6_v2{ | 547 | .D6_v2{ |
509 | font-size: 14px; | 548 | font-size: 14px; |
510 | margin-bottom: 30px; | 549 | margin-bottom: 30px; |
511 | } | 550 | } |
512 | .D6_v5{ | 551 | .D6_v5{ |
513 | .D6_v5_s1{ | 552 | .D6_v5_s1{ |
514 | font-weight: bold; | 553 | font-weight: bold; |
515 | } | 554 | } |
516 | .D6_v5_s2{ | 555 | .D6_v5_s2{ |
517 | font-size: 14px; | 556 | font-size: 14px; |
518 | } | 557 | } |
519 | } | 558 | } |
520 | } | 559 | } |
521 | .botton{ | 560 | .botton{ |
522 | position: fixed; | 561 | position: fixed; |
523 | bottom: 0; | 562 | bottom: 0; |
524 | height: 74px; | 563 | height: 74px; |
525 | width: 100%; | 564 | width: 100%; |
526 | background: #FFFFFF; | 565 | background: #FFFFFF; |
527 | padding: 20px 20px 8px 20px; | 566 | padding: 20px 20px 8px 20px; |
528 | font-family: 'PingFangSC-Regular'; | 567 | font-family: 'PingFangSC-Regular'; |
529 | box-sizing: border-box; | 568 | box-sizing: border-box; |
530 | display: flex; | 569 | display: flex; |
531 | justify-content: space-between; | 570 | justify-content: space-between; |
532 | align-content: center; | 571 | align-content: center; |
533 | .botton_1{ | 572 | .botton_1{ |
534 | width: 20%; | 573 | width: 20%; |
535 | height: 100%; | 574 | height: 100%; |
536 | text-align: center; | 575 | text-align: center; |
537 | color: #989898; | 576 | color: #989898; |
538 | } | 577 | } |
539 | image{ | 578 | image{ |
540 | width: 60%; | 579 | width: 60%; |
541 | height: 30px; | 580 | height: 30px; |
542 | } | 581 | } |
543 | .botton_image{ | 582 | .botton_image{ |
544 | font-size: 12px; | 583 | font-size: 12px; |
545 | text-align: center; | 584 | text-align: center; |
546 | } | 585 | } |
547 | .botton_2{ | 586 | .botton_2{ |
548 | width: 74%; | 587 | width: 74%; |
549 | height: 86%; | 588 | height: 86%; |
550 | display: grid; | 589 | display: grid; |
551 | grid-template-columns: 50% 50%; | 590 | grid-template-columns: 50% 50%; |
552 | } | 591 | } |
553 | .botton_input{ | 592 | .botton_input{ |
554 | display: inline-flex; | 593 | display: inline-flex; |
555 | align-items: center; | 594 | align-items: center; |
556 | justify-content: space-around; | 595 | justify-content: space-around; |
557 | background: #FFF0EC; | 596 | background: #FFF0EC; |
558 | font-size: 16px; | 597 | font-size: 16px; |
559 | color: #FF6B4A; | 598 | color: #FF6B4A; |
560 | border-radius: 20px 0 0 20px; | 599 | border-radius: 20px 0 0 20px; |
561 | } | 600 | } |
562 | .botton_now{ | 601 | .botton_now{ |
563 | display: inline-flex; | 602 | display: inline-flex; |
564 | align-items: center; | 603 | align-items: center; |
565 | justify-content: space-around; | 604 | justify-content: space-around; |
566 | background: #FF6B4A; | 605 | background: #FF6B4A; |
567 | font-size: 16px; | 606 | font-size: 16px; |
568 | color: #FFFFFF; | 607 | color: #FFFFFF; |
569 | border-radius:0 20px 20px 0; | 608 | border-radius:0 20px 20px 0; |
570 | } | 609 | } |
571 | } | 610 | } |
572 | </style> | 611 | </style> |
src/pages/index/index.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | <view class="content"> |
3 | <view class="header"> | 3 | <view class="header"> |
4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> | 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> |
8 | </view> | 8 | </view> |
9 | 9 | ||
10 | <!-- 筛选栏--> | 10 | <!-- 筛选栏--> |
11 | <view class="screenBar"> | 11 | <view class="screenBar"> |
12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> |
13 | <view | 13 | <view |
14 | class="screenItem" | 14 | class="screenItem" |
15 | v-bind:class="{ active: current === item.current }" | 15 | v-bind:class="{ active: current === item.current }" |
16 | v-if="item.current === 2" | 16 | v-if="item.current === 2" |
17 | @click="dropDown" | 17 | @click="dropDown" |
18 | > | 18 | > |
19 | {{ item.text }} | 19 | {{ item.text }} |
20 | <icon type="info" size="14"></icon> | 20 | <icon type="info" size="14"></icon> |
21 | </view> | 21 | </view> |
22 | <view | 22 | <view |
23 | class="screenItem" | 23 | class="screenItem" |
24 | v-bind:class="{ active: current === item.current }" | 24 | v-bind:class="{ active: current === item.current }" |
25 | v-if="item.current === 4" | 25 | v-if="item.current === 4" |
26 | @click="showDrawer('showRight')" | 26 | @click="showDrawer('showRight')" |
27 | > | 27 | > |
28 | {{ item.text }} | 28 | {{ item.text }} |
29 | <icon type="info" size="14"></icon> | 29 | <icon type="info" size="14"></icon> |
30 | </view> | 30 | </view> |
31 | <view v-if="item.current !== 2&&item.current!==4"> | 31 | <view v-if="item.current !== 2&&item.current!==4"> |
32 | <view | 32 | <view |
33 | class="screenItem" | 33 | class="screenItem" |
34 | v-bind:class="{ active: current === item.current }" | 34 | v-bind:class="{ active: current === item.current }" |
35 | >{{ item.text }}</view> | 35 | >{{ item.text }}</view> |
36 | </view> | 36 | </view> |
37 | </view> | 37 | </view> |
38 | </view> | 38 | </view> |
39 | </view> | 39 | </view> |
40 | <Uni-drawer | 40 | <Uni-drawer |
41 | ref="showRight" | 41 | ref="showRight" |
42 | mask="true" | 42 | mask="true" |
43 | maskClick="true" | 43 | maskClick="true" |
44 | mode="right" | 44 | mode="right" |
45 | :width="320" | 45 | :width="320" |
46 | @change="change($event,'showRight')" | 46 | @change="change($event,'showRight')" |
47 | > | 47 | > |
48 | <view class="close"> | 48 | <view class="close"> |
49 | <view @click="closeDrawer('showRight')"> | 49 | <view @click="closeDrawer('showRight')"> |
50 | <text class="word-btn-white">关闭</text> | 50 | <text class="word-btn-white">关闭</text> |
51 | </view> | 51 | </view> |
52 | </view> | 52 | </view> |
53 | </Uni-drawer> | 53 | </Uni-drawer> |
54 | 54 | ||
55 | <!-- 筛选菜单--> | 55 | <!-- 筛选菜单--> |
56 | <view class="content-wrap"> | 56 | <view class="content-wrap"> |
57 | <view> | 57 | <view> |
58 | <HMfilterDropdown | 58 | <HMfilterDropdown |
59 | :filterData="filterData" | 59 | :filterData="filterData" |
60 | :defaultSelected="filterDropdownValue" | 60 | :defaultSelected="filterDropdownValue" |
61 | :updateMenuName="true" | 61 | :updateMenuName="true" |
62 | @confirm="confirm" | 62 | @confirm="confirm" |
63 | data-format="Object" | 63 | data-format="Object" |
64 | ></HMfilterDropdown> | 64 | ></HMfilterDropdown> |
65 | <!-- 商品列表 --> | 65 | <!-- 商品列表 --> |
66 | <view class="goods-list"> | 66 | <view class="goods-list"> |
67 | <view class="product-list"> | 67 | <view class="product-list"> |
68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> | 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> |
69 | <Card :goods="goods"></Card> | 69 | <Card :goods="goods"></Card> |
70 | </view> | 70 | </view> |
71 | </view> | 71 | </view> |
72 | <view class="loading-text">{{loadingText}}</view> | 72 | <view class="loading-text">{{loadingText}}</view> |
73 | </view> | 73 | </view> |
74 | </view> | 74 | </view> |
75 | </view> | 75 | </view> |
76 | </view> | 76 | </view> |
77 | </template> | 77 | </template> |
78 | 78 | ||
79 | <script> | 79 | <script> |
80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; | 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; |
81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; | 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; | 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; |
83 | import data from "@/common/data.js"; //筛选菜单数据 | 83 | import data from "@/common/data.js"; //筛选菜单数据 |
84 | import store from '@/store'; | 84 | import store from '@/store'; |
85 | 85 | ||
86 | export default { | 86 | export default { |
87 | components: { | 87 | components: { |
88 | UniDrawer: UniDrawer, | 88 | UniDrawer: UniDrawer, |
89 | HMfilterDropdown: HMfilterDropdown, | 89 | HMfilterDropdown: HMfilterDropdown, |
90 | Card: Card | 90 | Card: Card |
91 | }, | 91 | }, |
92 | data() { | 92 | data() { |
93 | return { | 93 | return { |
94 | screenItems: [ | 94 | screenItems: [ |
95 | { current: 0, text: "全部", hasIcon: false }, | 95 | { current: 0, text: "全部", hasIcon: false }, |
96 | { current: 1, text: "销量", hasIcon: false }, | 96 | { current: 1, text: "销量", hasIcon: false }, |
97 | { current: 2, text: "价格", hasIcon: true }, | 97 | { current: 2, text: "价格", hasIcon: true }, |
98 | { current: 3, text: "折扣", hasIcon: false }, | 98 | { current: 3, text: "折扣", hasIcon: false }, |
99 | { current: 4, text: "筛选", hasIcon: true } | 99 | { current: 4, text: "筛选", hasIcon: true } |
100 | ], | 100 | ], |
101 | current: 0, | 101 | current: 0, |
102 | showRight: false, | 102 | showRight: false, |
103 | indexArr: "", | 103 | indexArr: "", |
104 | valueArr: "", | 104 | valueArr: "", |
105 | // //商品数据 | 105 | loadingText: "~~到底了~~", |
106 | // goodsList: [ | ||
107 | // { | ||
108 | // // goods_id: 0, | ||
109 | // // img: "/static/img/goods/p1.jpg", | ||
110 | // // name: "商品名称", | ||
111 | // // originCost: "¥198", | ||
112 | // // price: "¥168", | ||
113 | // // slogan: "1235人浏览" | ||
114 | // } | ||
115 | // ], | ||
116 | loadingText: "正在加载...", | ||
117 | filterDropdownValue: [], | 106 | filterDropdownValue: [], |
118 | filterData: [] | 107 | filterData: [], |
108 | goodsList:[ | ||
109 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, | ||
110 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, | ||
111 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, | ||
112 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, | ||
113 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, | ||
114 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, | ||
115 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, | ||
116 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, | ||
117 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, | ||
118 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 } | ||
119 | ], | ||
119 | }; | 120 | }; |
120 | }, | 121 | }, |
121 | computed: { | 122 | computed: { |
122 | goodsList() { | 123 | // goodsList() { |
123 | // 也可以从 getters 获取 | 124 | // // 也可以从 getters 获取 |
124 | console.log(this.$store.getters.list); | 125 | // console.log('list', this.$store.state.test.list); |
125 | return this.$store.state.test.list; | 126 | // return this.$store.state.test.list; |
126 | } | 127 | // }, |
128 | // categoryList(){ | ||
129 | // console.log(this.$store.state.categoryOrder.categoryList); | ||
130 | // this.filterData = this.$store.state.categoryOrder.categoryList | ||
131 | // } | ||
132 | |||
127 | }, | 133 | }, |
128 | filters: { | 134 | filters: { |
129 | outData(value) { | 135 | outData(value) { |
130 | return JSON.stringify(value); | 136 | return JSON.stringify(value); |
131 | } | 137 | } |
132 | }, | 138 | }, |
133 | onLoad: function() { | 139 | onLoad: function() { |
134 | store.dispatch('test/fetch'); | 140 | store.dispatch('test/fetch'); |
135 | // uni.request({ | 141 | store.dispatch('categoryOrder/fetch') |
136 | // url: "https://api.glass.xiuyetang.com/app/prod/list", | 142 | |
137 | // method: "post", | ||
138 | // data: { | ||
139 | // // text: 'uni.request' | ||
140 | // }, | ||
141 | // header: { | ||
142 | // // 'custom-header': 'hello', //自定义请求头信息 | ||
143 | // "Content-Type": "application/x-www-form-urlencoded" | ||
144 | // // 'Content-Type':'multipart/form-data' | ||
145 | // // 'Content-Type':'ext/plain' | ||
146 | // }, | ||
147 | // timeout: 3000, | ||
148 | // // dataType:'json' | ||
149 | // // responseType:'text', | ||
150 | // // sslVerify: true, //验证 ssl 证书 | ||
151 | // withCredentials: false, //跨域请求时是否携带凭证(cookies) | ||
152 | // success: res => { | ||
153 | // console.error("success status === > ", res); | ||
154 | // this.goodsList = res.data.data; | ||
155 | // // console.log('res.data', res.data); | ||
156 | // // this.text = 'request success'; | ||
157 | // }, | ||
158 | // fail: res => { | ||
159 | // console.log("fail status === > ", res); | ||
160 | // }, | ||
161 | // complete: res => { | ||
162 | // console.log("complete status === > ", res); | ||
163 | // } | ||
164 | // }); | ||
165 | //定时器模拟ajax异步请求数据 | 143 | //定时器模拟ajax异步请求数据 |
166 | // setTimeout(()=>{ | 144 | setTimeout(()=>{ |
167 | // //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null | 145 | //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null |
168 | // this.filterDropdownValue = [ | 146 | // this.filterDropdownValue = [ |
169 | // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 | 147 | // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 |
170 | // [null,null], //第1个菜单选中 都不选中 | 148 | // [null,null], //第1个菜单选中 都不选中 |
171 | // [1], //第2个菜单选中 一级菜单的第1项 | 149 | // [1], //第2个菜单选中 一级菜单的第1项 |
172 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 | 150 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 |
173 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 | 151 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 |
174 | // ]; | 152 | // ]; |
175 | // this.filterData = data; | 153 | // this.filterData = data; |
176 | // },100); | 154 | },100); |
177 | // 模拟ajax请求子菜单数据。 | ||
178 | // setTimeout(()=>{ | ||
179 | // console.log('发起请求','ddddddd'); | ||
180 | // // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; | ||
181 | // },3000); | ||
182 | }, | 155 | }, |
183 | methods: { | 156 | methods: { |
184 | showDrawer(e) { | 157 | showDrawer(e) { |
185 | this.$refs[e].open(); | 158 | this.$refs[e].open(); |
186 | }, | 159 | }, |
187 | closeDrawer(e) { | 160 | closeDrawer(e) { |
188 | this.$refs[e].close(); | 161 | this.$refs[e].close(); |
189 | }, | 162 | }, |
190 | change(e, type) { | 163 | change(e, type) { |
191 | this[type] = e; | 164 | this[type] = e; |
192 | }, | 165 | }, |
193 | onClickItem(e) { | 166 | onClickItem(e) { |
194 | if (this.current !== e) { | 167 | if (this.current !== e) { |
195 | this.current = e; | 168 | this.current = e; |
196 | } | 169 | } |
197 | }, | 170 | }, |
198 | dropDown() { | 171 | dropDown() { |
199 | console.log("下拉"); | 172 | console.log("下拉"); |
200 | }, | 173 | }, |
201 | //接收菜单结果 | 174 | //接收菜单结果 |
202 | confirm(e) { | 175 | confirm(e) { |
203 | this.indexArr = e.index; | 176 | this.indexArr = e.index; |
204 | this.valueArr = e.value; | 177 | this.valueArr = e.value; |
205 | return; | 178 | return; |
206 | console.log("修改菜单"); | 179 | console.log("修改菜单"); |
207 | this.filterData[4].submenu[1] = { | 180 | this.filterData[4].submenu[1] = { |
208 | name: "项目2", | 181 | name: "项目2", |
209 | submenu: [] | 182 | submenu: [] |
210 | }; | 183 | }; |
211 | } | 184 | } |
212 | }, | 185 | }, |
213 | onNavigationBarButtonTap(e) { | 186 | |
214 | this.showRight = !this.showRight; | ||
215 | }, | ||
216 | //上拉加载, | ||
217 | onReachBottom() { | ||
218 | console.log("到底加载"); | ||
219 | let len = this.goodsList.length; | ||
220 | if (len >= 30) { | ||
221 | this.loadingText = "~~到底了~~"; | ||
222 | return false; | ||
223 | } else { | ||
224 | this.loadingText = "正在加载..."; | ||
225 | } | ||
226 | let end_goods_id = this.goodsList[len - 1].goods_id; | ||
227 | for (let i = 1; i <= 10; i++) { | ||
228 | let goods_id = end_goods_id + i; | ||
229 | let p = { | ||
230 | goods_id: goods_id, | ||
231 | img: | ||
232 | "/static/img/goods/p" + | ||
233 | (goods_id % 10 == 0 ? 10 : goods_id % 10) + | ||
234 | ".jpg", | ||
235 | name: "商品名称", | ||
236 | originCost: "¥198", | ||
237 | price: "¥168", | ||
238 | slogan: "1235人付款" | ||
239 | }; | ||
240 | this.goodsList.push(p); | ||
241 | } | ||
242 | } | ||
243 | }; | 187 | }; |
244 | </script> | 188 | </script> |
245 | 189 | ||
246 | <style lang="scss"> | 190 | <style lang="scss"> |
247 | .content { | 191 | .content { |
248 | display: flex; | 192 | display: flex; |
249 | flex-direction: column; | 193 | flex-direction: column; |
250 | align-items: center; | 194 | align-items: center; |
251 | justify-content: center; | 195 | justify-content: center; |
252 | background-color: #f7f6f6; | 196 | background-color: #f7f6f6; |
253 | } | 197 | } |
254 | .header { | 198 | .header { |
255 | display: flex; | 199 | display: flex; |
256 | flex-direction: column; | 200 | flex-direction: column; |
257 | align-items: center; | 201 | align-items: center; |
258 | justify-content: center; | 202 | justify-content: center; |
259 | background-color: #f7f6f6; | 203 | background-color: #f7f6f6; |
260 | height: 178rpx; | 204 | height: 178rpx; |
261 | width: 100%; | 205 | width: 100%; |
262 | z-index: 999; | 206 | z-index: 999; |
263 | position: fixed; | 207 | position: fixed; |
264 | top: 0; | 208 | top: 0; |
265 | left: 0; | 209 | left: 0; |
266 | } | 210 | } |
267 | .searchBar { | 211 | .searchBar { |
268 | width: 670rpx; | 212 | width: 670rpx; |
269 | display: flex; | 213 | display: flex; |
270 | justify-content: center; | 214 | justify-content: center; |
271 | align-items: center; | 215 | align-items: center; |
272 | box-sizing: border-box; | 216 | box-sizing: border-box; |
273 | padding: 0rpx 16rpx; | 217 | padding: 0rpx 16rpx; |
274 | border: 1px solid #ff6b4a; | 218 | border: 1px solid #ff6b4a; |
275 | border-radius: 8rpx; | 219 | border-radius: 8rpx; |
276 | background-color: #ffffff; | 220 | background-color: #ffffff; |
277 | } | 221 | } |
278 | 222 | ||
279 | .searchIpt { | 223 | .searchIpt { |
280 | height: 68rpx; | 224 | height: 68rpx; |
281 | width: 670rpx; | 225 | width: 670rpx; |
282 | padding: 16rpx; | 226 | padding: 16rpx; |
283 | font-size: 28rpx; | 227 | font-size: 28rpx; |
284 | box-sizing: border-box; | 228 | box-sizing: border-box; |
285 | } | 229 | } |
286 | .screenBar { | 230 | .screenBar { |
287 | width: 670rpx; | 231 | width: 670rpx; |
288 | height: 110rpx; | 232 | height: 110rpx; |
289 | display: flex; | 233 | display: flex; |
290 | flex-direction: row; | 234 | flex-direction: row; |
291 | justify-content: space-between; | 235 | justify-content: space-between; |
292 | align-items: center; | 236 | align-items: center; |
293 | color: #333333; | 237 | color: #333333; |
294 | font-size: 32rpx; | 238 | font-size: 32rpx; |
295 | } | 239 | } |
296 | .active { | 240 | .active { |
297 | color: #ff6b4a; | 241 | color: #ff6b4a; |
298 | } | 242 | } |
299 | .screenItem { | 243 | .screenItem { |
300 | display: flex; | 244 | display: flex; |
301 | justify-content: center; | 245 | justify-content: center; |
302 | align-items: center; | 246 | align-items: center; |
303 | } | 247 | } |
304 | .content-wrap { | 248 | .content-wrap { |
305 | width: 100%; | 249 | width: 100%; |
306 | background-color: #ffffff; | 250 | background-color: #ffffff; |
307 | } | 251 | } |
308 | 252 | ||
309 | .HMfilterDropdown { | 253 | .HMfilterDropdown { |
310 | top: 178rpx !important; | 254 | top: 178rpx !important; |
311 | } | 255 | } |
312 | 256 | ||
313 | .goods-list { | 257 | .goods-list { |
314 | padding-top: 286rpx; | 258 | padding-top: 286rpx; |
315 | .loading-text { | 259 | .loading-text { |
316 | width: 100%; | 260 | width: 100%; |
317 | display: flex; | 261 | display: flex; |
318 | justify-content: center; | 262 | justify-content: center; |
319 | align-items: center; | 263 | align-items: center; |
320 | height: 30px; | 264 | height: 30px; |
321 | color: #979797; | 265 | color: #979797; |
322 | font-size: 12px; | 266 | font-size: 12px; |
src/pages/myOrder/components/OrderCard.vue
1 | <template> | 1 | <template> |
2 | <view> | 2 | <view> |
3 | <view class="card" v-if="current === order.orderType" > | 3 | <view class="card" v-if="current === order.orderType" > |
4 | <view class="cardHeader"> | 4 | <view class="cardHeader"> |
5 | <text class="orderId">订单号:{{order.orderId}}</text> | 5 | <text class="orderId">订单号:{{order.orderId}}</text> |
6 | <text class="orderType" v-if="order.orderType===1">待付款</text> | 6 | <text class="orderType" v-if="order.orderType===1">待付款</text> |
7 | <text class="orderType" v-if="order.orderType===2">待发货</text> | 7 | <text class="orderType" v-if="order.orderType===2">待发货</text> |
8 | <text class="orderType" v-if="order.orderType === 3">待收货</text> | 8 | <text class="orderType" v-if="order.orderType === 3">待收货</text> |
9 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> | 9 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> |
10 | <text class="orderType" v-if="order.orderType === 5">已完成</text> | 10 | <text class="orderType" v-if="order.orderType === 5">已完成</text> |
11 | </view> | 11 | </view> |
12 | <view class="orderCardInfo"> | 12 | <view class="orderCardInfo"> |
13 | <image :src="order.img" mode="aspectFill"></image> | 13 | <image :src="order.img" mode="aspectFill"></image> |
14 | <view class="infoText"> | 14 | <view class="infoText"> |
15 | <view class="orderName">{{order.name}}</view> | 15 | <view class="orderName">{{order.name}}</view> |
16 | <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> | 16 | <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> |
17 | <view class="infoText-bottom"> | 17 | <view class="infoText-bottom"> |
18 | <view class="markPrice">{{order.price}}</view> | 18 | <view class="markPrice">{{order.price}}</view> |
19 | <view class="buy-num">X{{order.buyNum}}</view> | 19 | <view class="buy-num">X{{order.buyNum}}</view> |
20 | </view> | 20 | </view> |
21 | </view> | 21 | </view> |
22 | </view> | 22 | </view> |
23 | <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> | 23 | <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> |
24 | <view class="btns" v-if="order.orderType === 1"> | 24 | <view class="btns" v-if="order.orderType === 1"> |
25 | <view class="btn-type1">申请退款</view> | 25 | <view class="btn-type1">申请退款</view> |
26 | <view class="btn-type2">去支付</view> | 26 | <view class="btn-type2">去支付</view> |
27 | </view> | 27 | </view> |
28 | <view class="btns" v-if="order.orderType === 0"> | 28 | <view class="btns" v-if="order.orderType === 0"> |
29 | <view class="btn-type1">再次购买</view> | 29 | <view class="btn-type1">再次购买</view> |
30 | </view> | 30 | </view> |
31 | </view> | 31 | </view> |
32 | <view class="card" v-if="current === 0" > | 32 | <view class="card" v-if="current === 0" > |
33 | <view class="cardHeader"> | 33 | <view class="cardHeader"> |
34 | <text class="orderId">订单号:{{order.orderId}}</text> | 34 | <text class="orderId">订单号:{{order.orderId}}</text> |
35 | <text class="orderType" v-if="order.orderType===1">待付款</text> | 35 | <text class="orderType" v-if="order.orderType===1">待付款</text> |
36 | <text class="orderType" v-if="order.orderType===2">待发货</text> | 36 | <text class="orderType" v-if="order.orderType===2">待发货</text> |
37 | <text class="orderType" v-if="order.orderType === 3">待收货</text> | 37 | <text class="orderType" v-if="order.orderType === 3">待收货</text> |
38 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> | 38 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> |
39 | </view> | 39 | </view> |
40 | <view class="orderCardInfo"> | 40 | <view class="orderCardInfo"> |
41 | <image :src="order.img" mode="aspectFill"></image> | 41 | <image :src="order.img" mode="aspectFill"></image> |
42 | <view class="infoText"> | 42 | <view class="infoText"> |
43 | <view class="orderName">{{order.name}}</view> | 43 | <view class="orderName">{{order.name}}</view> |
44 | <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> | 44 | <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> |
45 | <view class="infoText-bottom"> | 45 | <view class="infoText-bottom"> |
46 | <view class="markPrice">{{order.price}}</view> | 46 | <view class="markPrice">{{order.price}}</view> |
47 | <view class="buy-num">X{{order.buyNum}}</view> | 47 | <view class="buy-num">X{{order.buyNum}}</view> |
48 | </view> | 48 | </view> |
49 | </view> | 49 | </view> |
50 | </view> | 50 | </view> |
51 | <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> | 51 | <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> |
52 | <view class="btns" v-if="order.orderType === 1"> | 52 | <view class="btns" v-if="order.orderType === 1"> |
53 | <view class="btn-type1" @click="toRefundment">申请退款</view> | 53 | <view class="btn-type1" @click="toRefundment">申请退款</view> |
54 | <view class="btn-type2">去支付</view> | 54 | <view class="btn-type2">去支付</view> |
55 | </view> | 55 | </view> |
56 | <view class="btns" v-if="order.orderType === 0"> | 56 | <view class="btns" v-if="order.orderType === 0"> |
57 | <view class="btn-type1">再次购买</view> | 57 | <view class="btn-type1">再次购买</view> |
58 | </view> | 58 | </view> |
59 | </view> | 59 | </view> |
60 | </view> | 60 | </view> |
61 | </template> | 61 | </template> |
62 | 62 | ||
63 | <script> | 63 | <script> |
64 | export default { | 64 | export default { |
65 | props: { | 65 | props: { |
66 | /** | 66 | /** |
67 | * 订单数据 | 67 | * 订单数据 |
68 | */ | 68 | */ |
69 | order: { | 69 | order: { |
70 | orderId: Number, | 70 | orderId: Number, |
71 | img: String, | 71 | img: String, |
72 | name: String, | 72 | name: String, |
73 | originCost:String, | 73 | originCost:String, |
74 | price: String, | 74 | price: String, |
75 | orderType:Number, | 75 | orderType:Number, |
76 | buyNum:Number | 76 | buyNum:Number |
77 | }, | 77 | }, |
78 | /** | 78 | /** |
79 | * 当前选择 | 79 | * 当前选择 |
80 | */ | 80 | */ |
81 | current:Number | 81 | current:Number |
82 | 82 | ||
83 | }, | 83 | }, |
84 | data() { | 84 | onLoad() { |
85 | return { | 85 | // console.log('dd'); |
86 | }; | 86 | console.log('order', this.props.order); |
87 | }, | ||
88 | data() { | ||
89 | return { | ||
90 | }; | ||
87 | }, | 91 | }, |
88 | methods:{ | 92 | methods:{ |
89 | toRefundment(){ | 93 | toRefundment(){ |
90 | uni.navigateTo({ | 94 | uni.navigateTo({ |
91 | url: '../refundment/refundment', | 95 | url: '../refundment/refundment', |
92 | success: res => {}, | 96 | success: res => {}, |
93 | fail: () => {}, | 97 | fail: () => {}, |
94 | complete: () => {} | 98 | complete: () => {} |
95 | }); | 99 | }); |
96 | } | 100 | } |
97 | } | 101 | } |
98 | } | 102 | } |
99 | </script> | 103 | </script> |
100 | 104 | ||
101 | <style lang="scss"> | 105 | <style lang="scss"> |
102 | .card{ | 106 | .card{ |
103 | width: 670rpx; | 107 | width: 670rpx; |
104 | height: 478rpx; | 108 | height: 478rpx; |
105 | background: #FFFFFF; | 109 | background: #FFFFFF; |
106 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | 110 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); |
107 | border-radius: 8px; | 111 | border-radius: 8px; |
108 | border-radius: 8px; | 112 | border-radius: 8px; |
109 | margin-top: 20rpx; | 113 | margin-top: 20rpx; |
110 | padding: 40rpx; | 114 | padding: 40rpx; |
111 | box-sizing: border-box; | 115 | box-sizing: border-box; |
112 | .cardHeader{ | 116 | .cardHeader{ |
113 | width: 100%; | 117 | width: 100%; |
114 | height: 40rpx; | 118 | height: 40rpx; |
115 | display: flex; | 119 | display: flex; |
116 | justify-content: space-between; | 120 | justify-content: space-between; |
117 | align-items: center; | 121 | align-items: center; |
118 | .orderId{ | 122 | .orderId{ |
119 | font-size: 12px; | 123 | font-size: 12px; |
120 | color: #999999; | 124 | color: #999999; |
121 | } | 125 | } |
122 | .orderType{ | 126 | .orderType{ |
123 | font-size: 14px; | 127 | font-size: 14px; |
124 | color: #FF6B4A; | 128 | color: #FF6B4A; |
125 | } | 129 | } |
126 | } | 130 | } |
127 | .orderCardInfo{ | 131 | .orderCardInfo{ |
128 | width: 100%; | 132 | width: 100%; |
129 | height: 188rpx; | 133 | height: 188rpx; |
130 | display: flex; | 134 | display: flex; |
131 | flex-direction: row; | 135 | flex-direction: row; |
132 | justify-content: space-between; | 136 | justify-content: space-between; |
133 | align-items: center; | 137 | align-items: center; |
134 | margin-top: 40rpx; | 138 | margin-top: 40rpx; |
135 | image{ | 139 | image{ |
136 | height: 188rpx; | 140 | height: 188rpx; |
137 | width: 188rpx; | 141 | width: 188rpx; |
138 | margin-right: 24rpx; | 142 | margin-right: 24rpx; |
139 | } | 143 | } |
140 | .infoText{ | 144 | .infoText{ |
141 | display: flex; | 145 | display: flex; |
142 | flex-direction: column; | 146 | flex-direction: column; |
143 | justify-content: space-between; | 147 | justify-content: space-between; |
144 | align-items: flex-start; | 148 | align-items: flex-start; |
145 | height: 188rpx; | 149 | height: 188rpx; |
146 | } | 150 | } |
147 | .orderName{ | 151 | .orderName{ |
148 | font-size: 14px; | 152 | font-size: 14px; |
149 | color: #333333; | 153 | color: #333333; |
150 | } | 154 | } |
151 | .orderDescrib{ | 155 | .orderDescrib{ |
152 | font-size: 12px; | 156 | font-size: 12px; |
153 | color: #999999; | 157 | color: #999999; |
154 | } | 158 | } |
155 | .infoText-bottom{ | 159 | .infoText-bottom{ |
156 | display: flex; | 160 | display: flex; |
157 | flex-direction: row; | 161 | flex-direction: row; |
158 | justify-content: space-between; | 162 | justify-content: space-between; |
159 | align-items: center; | 163 | align-items: center; |
160 | width: 100%; | 164 | width: 100%; |
161 | .markPrice{ | 165 | .markPrice{ |
162 | font-size: 14px; | 166 | font-size: 14px; |
163 | color: #FF6B4A; | 167 | color: #FF6B4A; |
164 | } | 168 | } |
165 | .buy-num{ | 169 | .buy-num{ |
166 | font-size: 12px; | 170 | font-size: 12px; |
167 | color: #999999; | 171 | color: #999999; |
168 | } | 172 | } |
169 | } | 173 | } |
170 | } | 174 | } |
171 | .payPrice{ | 175 | .payPrice{ |
172 | text-align: right; | 176 | text-align: right; |
173 | margin: 20rpx 0; | 177 | margin: 20rpx 0; |
174 | font-size: 14px; | 178 | font-size: 14px; |
175 | color: #333333; | 179 | color: #333333; |
176 | .priceNum{ | 180 | .priceNum{ |
177 | font-size: 14px; | 181 | font-size: 14px; |
178 | color: #FF6B4A; | 182 | color: #FF6B4A; |
179 | } | 183 | } |
180 | } | 184 | } |
181 | .btns{ | 185 | .btns{ |
182 | display: flex; | 186 | display: flex; |
183 | justify-content: flex-end; | 187 | justify-content: flex-end; |
184 | align-items: center; | 188 | align-items: center; |
185 | .btn-type1{ | 189 | .btn-type1{ |
186 | height: 48rpx; | 190 | height: 48rpx; |
187 | width: 156rpx; | 191 | width: 156rpx; |
188 | border: 1px solid #FF6B4A; | 192 | border: 1px solid #FF6B4A; |
189 | border-radius: 12px; | 193 | border-radius: 12px; |
190 | border-radius: 12px; | 194 | border-radius: 12px; |
191 | text-align: center; | 195 | text-align: center; |
192 | line-height: 48rpx; | 196 | line-height: 48rpx; |
193 | font-size: 12px; | 197 | font-size: 12px; |
194 | color: #FF6B4A; | 198 | color: #FF6B4A; |
195 | } | 199 | } |
196 | .btn-type2{ | 200 | .btn-type2{ |
197 | height: 48rpx; | 201 | height: 48rpx; |
198 | width: 140rpx; | 202 | width: 140rpx; |
199 | background: #FF6B4A; | 203 | background: #FF6B4A; |
200 | border-radius: 12px; | 204 | border-radius: 12px; |
201 | border-radius: 12px; | 205 | border-radius: 12px; |
202 | text-align: center; | 206 | text-align: center; |
203 | line-height: 48rpx; | 207 | line-height: 48rpx; |
204 | font-size: 12px; | 208 | font-size: 12px; |
205 | color: #FFFFFF; | 209 | color: #FFFFFF; |
206 | margin-left: 20rpx; | 210 | margin-left: 20rpx; |
207 | } | 211 | } |
208 | } | 212 | } |
209 | } | 213 | } |
210 | </style> | 214 | </style> |
211 | 215 |
src/pages/myOrder/myOrder.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | <view class="content"> |
3 | <view class="header"> | 3 | <view class="header"> |
4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> | 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> |
8 | </view> | 8 | </view> |
9 | <view class="screenBar"> | 9 | <view class="screenBar"> |
10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
12 | </view> | 12 | </view> |
13 | </view> | 13 | </view> |
14 | </view> | 14 | </view> |
15 | <view class="orderList" > | 15 | <view class="orderList" > |
16 | <view v-for="(order) in orderList" :key="order.orderId"> | 16 | <view |
17 | v-for="(order) in orderList" | ||
18 | :key="order.orderId" | ||
19 | > | ||
17 | <OrderCard :order = "order" :current="current"></OrderCard> | 20 | <OrderCard :order = "order" :current="current"></OrderCard> |
18 | </view> | 21 | </view> |
19 | </view> | 22 | </view> |
20 | <view class="footer">已显示全部</view> | 23 | <view class="footer">已显示全部</view> |
21 | </view> | 24 | </view> |
22 | </template> | 25 | </template> |
23 | <script> | 26 | <script> |
24 | import OrderCard from './components/OrderCard.vue' | 27 | import OrderCard from './components/OrderCard.vue'; |
28 | import store from '@/store'; | ||
29 | |||
25 | export default { | 30 | export default { |
26 | components:{ | 31 | components:{ |
27 | 'OrderCard':OrderCard | 32 | 'OrderCard': OrderCard |
28 | }, | 33 | }, |
29 | data() { | 34 | data() { |
30 | return { | 35 | return { |
31 | screenItems: [ | 36 | screenItems: [ |
32 | {current:0,text:'全部'}, | 37 | {current:0,text:'全部'}, |
33 | {current:1,text:'待付款'}, | 38 | {current:1,text:'待付款'}, |
34 | {current:2,text:'待发货'}, | 39 | {current:2,text:'待发货'}, |
35 | {current:3,text:'待收货'}, | 40 | {current:3,text:'待收货'}, |
36 | {current:4,text:'退款售后'}, | 41 | {current:4,text:'退款售后'}, |
37 | ], | 42 | ], |
38 | current: 0, | 43 | current: 0, |
39 | //订单数据 | 44 | //订单数据 |
40 | orderList:[ | 45 | // orderList:[ |
41 | { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, | 46 | // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, |
42 | { orderId: 2, img: '/static/img/goods/p3.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}, |
43 | { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1}, | 48 | // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1}, |
44 | { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, | 49 | // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, |
45 | { orderId: 5, img: '/static/img/goods/p6.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}, |
46 | { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, | 51 | // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, |
47 | { orderId: 7, img: '/static/img/goods/p8.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}, |
48 | { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}, | 53 | // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}, |
49 | { orderId: 9, img: '/static/img/goods/p10.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} |
50 | ], | 55 | // ], |
51 | |||
52 | }; | 56 | }; |
53 | }, | 57 | }, |
58 | |||
59 | onLoad: function() { | ||
60 | store.dispatch('myOrder/getList', { | ||
61 | uid: "1", | ||
62 | way: "0", | ||
63 | }); | ||
64 | }, | ||
65 | computed: { | ||
66 | orderList() { | ||
67 | console.log('orderList', this.$store.state.myOrder.orderlist); | ||
68 | return this.$store.state.myOrder.orderlist; | ||
69 | } | ||
70 | }, | ||
54 | methods:{ | 71 | methods:{ |
55 | onClickItem(e) { | 72 | onClickItem(e) { |
56 | if (this.current !== e) { | 73 | if (this.current !== e) { |
57 | this.current = e; | 74 | this.current = e; |
58 | } | 75 | } |
59 | } | 76 | } |
60 | } | 77 | } |
61 | } | 78 | } |
62 | </script> | 79 | </script> |
63 | 80 | ||
64 | <style lang="scss"> | 81 | <style lang="scss"> |
65 | .content { | 82 | .content { |
66 | display: flex; | 83 | display: flex; |
67 | flex-direction: column; | 84 | flex-direction: column; |
68 | align-items: center; | 85 | align-items: center; |
69 | background-color: #F7F6F6; | 86 | background-color: #F7F6F6; |
70 | min-height: 100vh; | 87 | min-height: 100vh; |
71 | .header{ | 88 | .header{ |
72 | background-color: #ffffff; | 89 | background-color: #ffffff; |
73 | width: 100%; | 90 | width: 100%; |
74 | height: 232rpx; | 91 | height: 232rpx; |
75 | padding: 40rpx 40rpx 36rpx 40rpx; | 92 | padding: 40rpx 40rpx 36rpx 40rpx; |
76 | box-sizing: border-box; | 93 | box-sizing: border-box; |
77 | position: fixed; | 94 | position: fixed; |
78 | top: 0; | 95 | top: 0; |
79 | left: 0; | 96 | left: 0; |
80 | .searchBar { | 97 | .searchBar { |
81 | width: 670rpx; | 98 | width: 670rpx; |
82 | display: flex; | 99 | display: flex; |
83 | justify-content: center; | 100 | justify-content: center; |
84 | align-items: center; | 101 | align-items: center; |
85 | box-sizing: border-box; | 102 | box-sizing: border-box; |
86 | padding: 0rpx 16rpx; | 103 | padding: 0rpx 16rpx; |
87 | border: 1px solid #FF6B4A; | 104 | border: 1px solid #FF6B4A; |
88 | border-radius: 8rpx; | 105 | border-radius: 8rpx; |
89 | background-color: #ffffff; | 106 | background-color: #ffffff; |
90 | } | 107 | } |
91 | 108 | ||
92 | .screenBar{ | 109 | .screenBar{ |
93 | width: 670rpx; | 110 | width: 670rpx; |
94 | height: 110rpx; | 111 | height: 110rpx; |
95 | display: flex; | 112 | display: flex; |
96 | flex-direction: row; | 113 | flex-direction: row; |
97 | justify-content: space-between; | 114 | justify-content: space-between; |
98 | align-items: center; | 115 | align-items: center; |
99 | color: #333333; | 116 | color: #333333; |
100 | font-size: 32rpx; | 117 | font-size: 32rpx; |
101 | } | 118 | } |
102 | .screenItem{ | 119 | .screenItem{ |
103 | height: 50rpx; | 120 | height: 50rpx; |
104 | font-size: 32rpx; | 121 | font-size: 32rpx; |
105 | color: #333333; | 122 | color: #333333; |
106 | display: flex; | 123 | display: flex; |
107 | justify-content: center; | 124 | justify-content: center; |
108 | align-items: center; | 125 | align-items: center; |
109 | transition:all 0.2s; | 126 | transition:all 0.2s; |
110 | } | 127 | } |
111 | .active{ | 128 | .active{ |
112 | // font-size: 34rpx; | 129 | // font-size: 34rpx; |
113 | color: #EC5D3B; | 130 | color: #EC5D3B; |
114 | } | 131 | } |
115 | .searchIpt { | 132 | .searchIpt { |
116 | height: 68rpx; | 133 | height: 68rpx; |
117 | width: 670rpx; | 134 | width: 670rpx; |
118 | padding: 16rpx; | 135 | padding: 16rpx; |
119 | font-size: 28rpx; | 136 | font-size: 28rpx; |
120 | box-sizing: border-box; | 137 | box-sizing: border-box; |
121 | } | 138 | } |
122 | } | 139 | } |
123 | .orderList{ | 140 | .orderList{ |
124 | margin-top: 232rpx; | 141 | margin-top: 232rpx; |
125 | } | 142 | } |
126 | .footer{ | 143 | .footer{ |
127 | font-size: 14px; | 144 | font-size: 14px; |
128 | color: #B8B8B8; | 145 | color: #B8B8B8; |
129 | margin: 40rpx 0; | 146 | margin: 40rpx 0; |
130 | } | 147 | } |
131 | } | 148 | } |
132 | </style> | 149 | </style> |
src/pages/myOrderPaying/myOrderPaying.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | |
3 | <view class="header"> | 3 | <view class="content"> |
4 | <view class="header-name"> | 4 | <view class="order-hr"></view> |
5 | <navigator open-type="navigateBack" hover-class="navigator-hover"> | 5 | <view class="order-time"> |
6 | <image src="/static/back.png"></image> | 6 | <text>请在</text> |
7 | </navigator> | 7 | <!-- <text class="p2"></text> --> |
8 | <text>我的订单</text> | 8 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" |
9 | </view> | 9 | :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> |
10 | <text>内完成付款</text> | ||
10 | </view> | 11 | </view> |
11 | <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }"> | 12 | <view class="order"> |
12 | <view class="order-hr"></view> | ||
13 | <view class="order-time"> | ||
14 | <text>请在</text> | ||
15 | <text class="p2">00:59:58 </text> | ||
16 | <text>内完成付款</text> | ||
17 | </view> | ||
18 | <view class="order-user"> | 13 | <view class="order-user"> |
19 | <view class="order-user-head"> | 14 | <view class="order-user-head"> |
20 | <text class="p1">钱大大</text> | 15 | <text class="p1">钱大大</text> |
21 | <text class="p2">18823749843</text> | 16 | <text class="p2">18823749843</text> |
22 | </view> | 17 | </view> |
23 | <view class="order-user-body"> | 18 | <view class="order-user-body"> |
24 | <image src="../../static/myorder-paying-location.png"></image> | 19 | <image src="../../static/myorder-paying-location.png"></image> |
25 | <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> | 20 | <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> |
26 | </view> | 21 | </view> |
27 | </view> | 22 | </view> |
28 | <view class="order-info"> | 23 | <view class="order-info"> |
29 | <view class="order-info-head"> | 24 | <view class="order-info-head"> |
30 | <image src="../../static/myorder-paying-pic.png"></image> | 25 | <image src="../../static/myorder-paying-pic.png"></image> |
31 | <view class="order-info-head-r"> | 26 | <view class="order-info-head-r"> |
32 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> | 27 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> |
33 | <text class="p2">规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text> | 28 | <view class="p2" style="margin: 0;"> |
34 | <text class="p3">¥180</text> | 29 | 规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 |
30 | <!-- <view class="arrow"></view> --> | ||
31 | </view> | ||
32 | <text class="p3"><span>¥180</span><span class="p4">X1</span></text> | ||
35 | </view> | 33 | </view> |
36 | </view> | 34 | </view> |
37 | <view class="order-info-goodsnum"> | 35 | <!-- <view class="order-info-goodsnum"> |
38 | <text>X1</text> | 36 | <text>X1</text> |
39 | </view> | 37 | </view> --> |
40 | <text class="order-info-freight"> | 38 | <text class="order-info-freight"> |
41 | <text class="p1">运费</text> | 39 | <text class="p1">运费</text> |
42 | <text class="p2">0.00</text> | 40 | <text class="p2">0.00</text> |
43 | </text> | 41 | </text> |
44 | <text class="order-info-discount"> | 42 | <text class="order-info-discount"> |
45 | <text class="p1">优惠</text> | 43 | <text class="p1">优惠</text> |
46 | <text class="p2">-¥70.00</text> | 44 | <text class="p2">-¥70.00</text> |
47 | </text> | 45 | </text> |
48 | <text class="order-info-price"> | 46 | <text class="order-info-price"> |
49 | <text class="p1">实付</text> | 47 | <text class="p1">实付</text> |
50 | <text class="p2">¥110</text> | 48 | <text class="p2">¥110</text> |
51 | </text> | 49 | </text> |
52 | <text class="order-info-num"> | 50 | <text class="order-info-num"> |
53 | <text>订单号:203486795859605849</text> | 51 | <text>订单号:203486795859605849</text> |
54 | </text> | 52 | </text> |
55 | <text class="order-info-time"> | 53 | <text class="order-info-time"> |
56 | <text>下单时间:2020-10-22 14:32:42</text> | 54 | <text>下单时间:2020-10-22 14:32:42</text> |
57 | </text> | 55 | </text> |
58 | <view class="order-info-hr"></view> | 56 | <view class="order-info-hr"></view> |
59 | <view class="order-info-contact"> | 57 | <view class="order-info-contact"> |
60 | <image src="../../static/myorder-paying-contact.png"></image> | 58 | <image src="../../static/myorder-paying-contact.png"></image> |
61 | <text>联系客服</text> | 59 | <text>联系客服</text> |
62 | </view> | 60 | </view> |
63 | </view> | 61 | </view> |
64 | </scroll-view> | 62 | </view> |
65 | <view class="order-confim"> | 63 | <view class="order-confim"> |
66 | <button class="b1">取消订单</button> | 64 | <button class="b1">取消订单</button> |
67 | <button class="b2">立即支付</button> | 65 | <button class="b2">立即支付</button> |
68 | </view> | 66 | </view> |
69 | </view> | 67 | </view> |
70 | </template> | 68 | </template> |
71 | 69 | ||
72 | <script> | 70 | <script> |
71 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | ||
73 | export default { | 72 | export default { |
73 | components: { | ||
74 | UniCountdown | ||
75 | }, | ||
74 | data() { | 76 | data() { |
75 | return { | 77 | return { |
76 | scrollHeight: false, | 78 | scrollHeight: false, |
77 | } | 79 | } |
78 | }, | 80 | }, |
79 | methods: { | 81 | methods: { |
80 | 82 | ||
81 | } | 83 | } |
82 | } | 84 | } |
83 | </script> | 85 | </script> |
84 | 86 | ||
85 | <style lang="scss" scoped> | 87 | <style lang="scss" scoped> |
86 | .content{ | 88 | .content{ |
87 | display: flex; | 89 | display: flex; |
88 | flex-direction: column; | 90 | flex-direction: column; |
89 | justify-content: center; | 91 | justify-content: center; |
90 | align-items: center; | 92 | align-items: center; |
93 | background-color: #f2f2f2; | ||
91 | } | 94 | } |
92 | 95 | ||
93 | .header{ | ||
94 | display: flex; | ||
95 | flex-direction: column; | ||
96 | align-items: center; | ||
97 | justify-content: center; | ||
98 | width: 100%; | ||
99 | height: 44px; | ||
100 | position: fixed; | ||
101 | top: 0; | ||
102 | z-index: 999; | ||
103 | background-color: #fff; | ||
104 | .header-name{ | ||
105 | display: flex; | ||
106 | align-items: center; | ||
107 | width: 670rpx; | ||
108 | image { | ||
109 | width: 11px; | ||
110 | height: 18px; | ||
111 | } | ||
112 | text { | ||
113 | // font-family: PingFangSC-Regular; | ||
114 | font-size: 36rpx; | ||
115 | color: #333333; | ||
116 | letter-spacing: -0.34px; | ||
117 | margin: 0 0 10rpx 54rpx; | ||
118 | } | ||
119 | } | ||
120 | } | ||
121 | 96 | ||
122 | .scroll-view { | 97 | .order { |
123 | // height: 1760rpx; // 测试 | 98 | min-height: 1196rpx; |
99 | margin-bottom: 112rpx; | ||
124 | background: #F2F2F2; | 100 | background: #F2F2F2; |
125 | } | 101 | } |
126 | .order-hr { | 102 | .order-hr { |
127 | width: 100%; | 103 | width: 100%; |
128 | height: 1px; | 104 | height: 1px; |
129 | background-color: #E9E9E9; | 105 | background-color: #E9E9E9; |
130 | } | 106 | } |
131 | .order-time { | 107 | .order-time { |
132 | width: 100%; | 108 | width: 100%; |
133 | height: 140rpx; | 109 | height: 140rpx; |
134 | background-color: #fff; | 110 | background-color: #fff; |
135 | display: flex; | 111 | display: flex; |
136 | justify-content: center; | 112 | justify-content: center; |
137 | text { | 113 | text { |
138 | // font-family: PingFangSC-Regular; | 114 | // font-family: PingFangSC-Regular; |
139 | margin-top: 48rpx; | 115 | margin-top: 48rpx; |
140 | font-size: 14px; | 116 | font-size: 14px; |
141 | color: #333333; | 117 | color: #333333; |
142 | letter-spacing: -0.26px; | 118 | letter-spacing: -0.26px; |
143 | } | 119 | } |
144 | .p2 { | 120 | .p2 { |
145 | // font-family: DINAlternate-Bold; | 121 | // font-family: DINAlternate-Bold; |
146 | margin: 42rpx 20rpx 0 20rpx; | 122 | margin: 42rpx 20rpx 0 20rpx; |
147 | font-size: 18px; | 123 | font-size: 18px; |
148 | color: #EC5D3B; | 124 | color: #EC5D3B; |
149 | letter-spacing: -0.34px; | 125 | letter-spacing: -0.34px; |
150 | } | 126 | } |
151 | } | 127 | } |
152 | 128 | ||
153 | .order-user { | 129 | .order-user { |
154 | width: 670rpx; | 130 | width: 670rpx; |
155 | height: 228rpx; | 131 | height: 228rpx; |
156 | background: #FFFFFF; | 132 | background: #FFFFFF; |
157 | border-radius: 14rpx; | 133 | border-radius: 14rpx; |
158 | margin: 0 auto; | 134 | margin: 0 auto; |
159 | margin-top: 20rpx; | 135 | margin-top: 20rpx; |
160 | margin-bottom: 20rpx; | 136 | margin-bottom: 20rpx; |
161 | .order-user-head { | 137 | .order-user-head { |
162 | display: flex; | 138 | display: flex; |
163 | height: 108rpx; | 139 | height: 108rpx; |
164 | width: 100%; | 140 | width: 100%; |
165 | align-items: center; | 141 | align-items: center; |
166 | margin-left: 126rpx; | 142 | margin-left: 126rpx; |
167 | .p1 { | 143 | .p1 { |
168 | // font-family: PingFangSC-Regular; | 144 | // font-family: PingFangSC-Regular; |
169 | font-size: 14px; | 145 | font-size: 14px; |
170 | color: #333333; | 146 | color: #333333; |
171 | letter-spacing: -0.26px; | 147 | letter-spacing: -0.26px; |
172 | margin-right: 20rpx; | 148 | margin-right: 20rpx; |
173 | } | 149 | } |
174 | .p2 { | 150 | .p2 { |
175 | // font-family: PingFangSC-Regular; | 151 | // font-family: PingFangSC-Regular; |
176 | font-size: 14px; | 152 | font-size: 14px; |
177 | color: #999999; | 153 | color: #999999; |
178 | letter-spacing: -0.26px; | 154 | letter-spacing: -0.26px; |
179 | } | 155 | } |
180 | } | 156 | } |
181 | .order-user-body { | 157 | .order-user-body { |
182 | display: flex; | 158 | display: flex; |
183 | width: 100%; | 159 | width: 100%; |
184 | image{ | 160 | image{ |
185 | width: 24px; | 161 | width: 24px; |
186 | height: 26px; | 162 | height: 26px; |
187 | margin: 12rpx 32rpx 0 40rpx; | 163 | margin: 12rpx 32rpx 0 40rpx; |
188 | } | 164 | } |
189 | .p3 { | 165 | .p3 { |
190 | // font-family: PingFangSC-Semibold; | 166 | // font-family: PingFangSC-Semibold; |
191 | font-size: 14px; | 167 | font-size: 14px; |
192 | color: #333333; | 168 | color: #333333; |
193 | letter-spacing: -0.26px; | 169 | letter-spacing: -0.26px; |
194 | } | 170 | } |
195 | } | 171 | } |
196 | } | 172 | } |
197 | 173 | ||
198 | .order-info { | 174 | .order-info { |
199 | width: 670rpx; | 175 | width: 670rpx; |
200 | background-color: #fff; | 176 | background-color: #fff; |
201 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); | 177 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); |
202 | border-radius: 16rpx; | 178 | border-radius: 16rpx; |
203 | margin: 0 auto; | 179 | margin: 0 auto; |
204 | view{ | 180 | view{ |
205 | margin-left: 40rpx; | 181 | margin-left: 40rpx; |
206 | } | 182 | } |
207 | text{ | 183 | text{ |
208 | font-size: 14px; | 184 | font-size: 14px; |
209 | } | 185 | } |
210 | .order-info-head { | 186 | .order-info-head { |
211 | display: flex; | 187 | display: flex; |
212 | padding-top: 40rpx; | 188 | padding-top: 40rpx; |
213 | image{ | 189 | image{ |
214 | height: 188rpx; | 190 | height: 188rpx; |
215 | width: 188rpx; | 191 | width: 188rpx; |
216 | } | 192 | } |
217 | .order-info-head-r{ | 193 | .order-info-head-r{ |
218 | margin: 0; | 194 | margin: 0; |
219 | width: 368rpx; | 195 | width: 368rpx; |
220 | margin-left: 24rpx; | 196 | margin-left: 24rpx; |
221 | // margin-top: 40rpx; | 197 | // margin-top: 40rpx; |
222 | text{ | 198 | text{ |
223 | display: block; | 199 | display: block; |
224 | } | 200 | } |
201 | // .arrow{ | ||
202 | // width: 0; | ||
203 | // height: 0; | ||
204 | // border-left: 5px transparent; | ||
205 | // border-right: 5px transparent; | ||
206 | // border-top: 5px #979797; | ||
207 | // border-bottom: 0 transparent; | ||
208 | // border-style: solid; | ||
209 | // position: relative; | ||
210 | // // transform: scaleY(-1); | ||
211 | // } | ||
212 | // .arrow::after{ | ||
213 | // content: ''; | ||
214 | // position: absolute; | ||
215 | // top: -6.5px; | ||
216 | // left: -5px; | ||
217 | // border-left: 5px transparent; | ||
218 | // border-right: 5px transparent; | ||
219 | // border-top: 5px #FFFFFF; | ||
220 | // border-bottom: 0 transparent; | ||
221 | // border-style: solid; | ||
222 | // } | ||
225 | .p1 { | 223 | .p1 { |
226 | height: 40px; | 224 | min-height: 40px; |
227 | // font-family: PingFangSC-Regular; | 225 | // font-family: PingFangSC-Regular; |
228 | font-size: 14px; | 226 | font-size: 14px; |
229 | color: #333333; | 227 | color: #333333; |
230 | letter-spacing: -0.26px; | 228 | letter-spacing: -0.26px; |
231 | line-height: 18px; | 229 | line-height: 18px; |
232 | // line-height: 20px; | 230 | // line-height: 20px; |
233 | } | 231 | } |
234 | .p2 { | 232 | .p2 { |
235 | height: 34px; | 233 | height: 34px; |
236 | padding: 1px 0 3px 0; | 234 | padding: 1px 0 3px 0; |
237 | // font-family: PingFangSC-Regular; | 235 | // font-family: PingFangSC-Regular; |
238 | font-size: 12px; | 236 | font-size: 12px; |
239 | color: #999999; | 237 | color: #999999; |
240 | letter-spacing: -0.23px; | 238 | letter-spacing: -0.23px; |
241 | } | 239 | } |
242 | .p3 { | 240 | .p3 { |
243 | height: 20px; | 241 | height: 20px; |
244 | // font-family: PingFangSC-Regular; | 242 | // font-family: PingFangSC-Regular; |
245 | font-size: 14px; | 243 | font-size: 14px; |
246 | color: #FF6B4A; | 244 | color: #FF6B4A; |
247 | letter-spacing: -0.26px; | 245 | letter-spacing: -0.26px; |
248 | } | 246 | } |
247 | .p4{ | ||
248 | font-size: 12px; | ||
249 | color: #999999; | ||
250 | letter-spacing: -0.23px; | ||
251 | margin-left: 10px; | ||
252 | } | ||
249 | } | 253 | } |
250 | 254 | ||
251 | } | 255 | } |
252 | .order-info-goodsnum { | 256 | // .order-info-goodsnum { |
253 | display: flex; | 257 | // display: flex; |
254 | align-items: center; | 258 | // align-items: center; |
255 | justify-content: flex-end; | 259 | // justify-content: flex-end; |
256 | text { | 260 | // text { |
257 | margin-right: 44rpx; | 261 | // margin-right: 44rpx; |
258 | // ont-family: PingFangSC-Regular; | 262 | // // ont-family: PingFangSC-Regular; |
259 | font-size: 12px; | 263 | // font-size: 12px; |
260 | color: #999999; | 264 | // color: #999999; |
261 | letter-spacing: -0.23px; | 265 | // letter-spacing: -0.23px; |
262 | } | 266 | // } |
263 | } | 267 | // } |
264 | .order-info-freight { | 268 | .order-info-freight { |
265 | display: block; | 269 | display: block; |
266 | margin-left: 40rpx; | 270 | margin-left: 40rpx; |
267 | margin-top: 22rpx; | 271 | margin-top: 22rpx; |
268 | .p1{ | 272 | .p1{ |
269 | // font-family: PingFangSC-Regular; | 273 | // font-family: PingFangSC-Regular; |
270 | font-size: 14px; | 274 | font-size: 14px; |
271 | color: #333333; | 275 | color: #333333; |
272 | letter-spacing: -0.26px; | 276 | letter-spacing: -0.26px; |
273 | line-height: 18px; | 277 | line-height: 18px; |
274 | margin-right: 24px; | 278 | margin-right: 24px; |
275 | } | 279 | } |
276 | .p2 { | 280 | .p2 { |
277 | // font-family: PingFangSC-Regular; | 281 | // font-family: PingFangSC-Regular; |
278 | font-size: 14px; | 282 | font-size: 14px; |
279 | color: #FF6B4A; | 283 | color: #FF6B4A; |
280 | letter-spacing: -0.26px; | 284 | letter-spacing: -0.26px; |
281 | } | 285 | } |
282 | } | 286 | } |
283 | .order-info-discount { | 287 | .order-info-discount { |
284 | display: block; | 288 | display: block; |
285 | margin-left: 40rpx; | 289 | margin-left: 40rpx; |
286 | margin-top: 24rpx; | 290 | margin-top: 24rpx; |
287 | .p1 { | 291 | .p1 { |
288 | // font-family: PingFangSC-Regular; | 292 | // font-family: PingFangSC-Regular; |
289 | font-size: 14px; | 293 | font-size: 14px; |
290 | color: #333333; | 294 | color: #333333; |
291 | letter-spacing: -0.26px; | 295 | letter-spacing: -0.26px; |
292 | line-height: 18px; | 296 | line-height: 18px; |
293 | margin-right: 24px; | 297 | margin-right: 24px; |
294 | } | 298 | } |
295 | .p2 { | 299 | .p2 { |
296 | // font-family: PingFangSC-Regular; | 300 | // font-family: PingFangSC-Regular; |
297 | font-size: 14px; | 301 | font-size: 14px; |
298 | color: #FF6B4A; | 302 | color: #FF6B4A; |
299 | letter-spacing: -0.26px; | 303 | letter-spacing: -0.26px; |
300 | } | 304 | } |
301 | } | 305 | } |
302 | .order-info-price { | 306 | .order-info-price { |
303 | display: block; | 307 | display: block; |
304 | margin-left: 40rpx; | 308 | margin-left: 40rpx; |
305 | margin-top: 24rpx; | 309 | margin-top: 24rpx; |
306 | .p1 { | 310 | .p1 { |
307 | // font-family: PingFangSC-Semibold; | 311 | // font-family: PingFangSC-Semibold; |
308 | font-size: 14px; | 312 | font-size: 14px; |
309 | color: #333333; | 313 | color: #333333; |
310 | letter-spacing: -0.26px; | 314 | letter-spacing: -0.26px; |
311 | line-height: 18px; | 315 | line-height: 18px; |
312 | margin-right: 24px; | 316 | margin-right: 24px; |
313 | } | 317 | } |
314 | .p2 { | 318 | .p2 { |
315 | // font-family: PingFangSC-Semibold; | 319 | // font-family: PingFangSC-Semibold; |
316 | font-size: 14px; | 320 | font-size: 14px; |
317 | color: #FF6B4A; | 321 | color: #FF6B4A; |
318 | letter-spacing: -0.26px; | 322 | letter-spacing: -0.26px; |
319 | } | 323 | } |
320 | } | 324 | } |
321 | .order-info-num{ | 325 | .order-info-num{ |
322 | display: block; | 326 | display: block; |
323 | margin-left: 40rpx; | 327 | margin-left: 40rpx; |
324 | margin-top: 44rpx; | 328 | margin-top: 44rpx; |
325 | text{ | 329 | text{ |
326 | // font-family: PingFangSC-Regular; | 330 | // font-family: PingFangSC-Regular; |
327 | font-size: 12px; | 331 | font-size: 12px; |
328 | color: #999999; | 332 | color: #999999; |
329 | letter-spacing: -0.23px; | 333 | letter-spacing: -0.23px; |
330 | } | 334 | } |
331 | } | 335 | } |
332 | .order-info-time { | 336 | .order-info-time { |
333 | display: block; | 337 | display: block; |
334 | margin: 8rpx 0 48rpx 40rpx; | 338 | margin: 8rpx 0 48rpx 40rpx; |
335 | text{ | 339 | text{ |
336 | // font-family: PingFangSC-Regular; | 340 | // font-family: PingFangSC-Regular; |
337 | font-size: 12px; | 341 | font-size: 12px; |
338 | color: #999999; | 342 | color: #999999; |
339 | letter-spacing: -0.23px; | 343 | letter-spacing: -0.23px; |
340 | } | 344 | } |
341 | } | 345 | } |
342 | .order-info-hr{ | 346 | .order-info-hr{ |
343 | width: 520rpx; | 347 | width: 520rpx; |
344 | height: 1px; | 348 | height: 1px; |
345 | background-color: #E9E9E9; | 349 | background-color: #E9E9E9; |
346 | margin-bottom: 20rpx; | 350 | margin-bottom: 20rpx; |
347 | } | 351 | } |
348 | .order-info-contact { | 352 | .order-info-contact { |
349 | display: flex; | 353 | display: flex; |
350 | padding-bottom: 28rpx; | 354 | padding-bottom: 28rpx; |
351 | image{ | 355 | image{ |
352 | width: 19px; | 356 | width: 19px; |
353 | height: 16px; | 357 | height: 16px; |
354 | } | 358 | } |
355 | text { | 359 | text { |
356 | // font-family: PingFangSC-Regular; | 360 | // font-family: PingFangSC-Regular; |
357 | margin-left: 20rpx; | 361 | margin-left: 20rpx; |
358 | font-size: 14px; | 362 | font-size: 14px; |
359 | color: #333333; | 363 | color: #333333; |
360 | letter-spacing: -0.26px; | 364 | letter-spacing: -0.26px; |
361 | line-height: 18px; | 365 | line-height: 18px; |
362 | } | 366 | } |
363 | } | 367 | } |
364 | } | 368 | } |
src/pages/predelivery/predelivery.vue
File was created | 1 | <template> | |
2 | <view class="container"> | ||
3 | <view v-for="(items) in form" :key="items.key" class="order"> | ||
4 | <view class="order_number">订单号:{{items.orderNum}}<span>待发货</span></view> | ||
5 | <view class="order_detail"> | ||
6 | <view class="detail_img"><image v-bind:src="items.img"></image></view> | ||
7 | <view class="detail_zi"> | ||
8 | <view class="zi_name">{{items.name}}</view> | ||
9 | <view class="zi_standard">规格:{{items.standard}}</view> | ||
10 | <view class="zi_preprice">¥{{items.preprice}}<span>X{{items.number}}</span></view> | ||
11 | </view> | ||
12 | </view> | ||
13 | <view class="now_price">实付:<span>¥{{items.nowprice}}</span></view> | ||
14 | <view class="clear"></view> | ||
15 | <view class="button"> | ||
16 | <view class="button1">申请退款</view> | ||
17 | <view class="button2">提醒发货</view> | ||
18 | </view> | ||
19 | </view> | ||
20 | </view> | ||
21 | </template> | ||
22 | |||
23 | <script> | ||
24 | export default { | ||
25 | data(){ | ||
26 | return{ | ||
27 | form:[ | ||
28 | { | ||
29 | key: 0, | ||
30 | name:'商品名称', | ||
31 | standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻', | ||
32 | img: '/static/img/detail/delivery.png', | ||
33 | preprice: 180, | ||
34 | number:1, | ||
35 | orderNum: 2034867958596334, | ||
36 | nowprice: 110, | ||
37 | } | ||
38 | ] | ||
39 | |||
40 | } | ||
41 | } | ||
42 | } | ||
43 | </script> | ||
44 | |||
45 | <style lang="scss"> | ||
46 | .container{ | ||
47 | width: 100%; | ||
48 | height: 100%; | ||
49 | background: #F2F2F2; | ||
50 | height: 700px; | ||
51 | //要获取屏幕大小 | ||
52 | } | ||
53 | |||
54 | .order{ | ||
55 | background: #FFFFFF; | ||
56 | width: 90%; | ||
57 | height: 450rpx; | ||
58 | margin: 0 auto; | ||
59 | padding: 40rpx; | ||
60 | box-sizing: border-box; | ||
61 | border-radius: 5px; | ||
62 | } | ||
63 | .order_number{ | ||
64 | color: #999999; | ||
65 | font-size: 12px; | ||
66 | font-family: "PingFangSC-Regular"; | ||
67 | span{ | ||
68 | font-family: PingFangSC-Regular; | ||
69 | font-size: 14px; | ||
70 | color: #FF6B4A; | ||
71 | letter-spacing: -0.26px; | ||
72 | line-height: 18px; | ||
73 | float: right; | ||
74 | } | ||
75 | } | ||
76 | .order_detail{ | ||
77 | display: flex; | ||
78 | justify-content: space-around; | ||
79 | margin-top: 12px; | ||
80 | } | ||
81 | .detail_img image{ | ||
82 | width: 188rpx; | ||
83 | height: 188rpx; | ||
84 | } | ||
85 | .detail_zi{ | ||
86 | font-family: PingFangSC-Regular; | ||
87 | width: 55%; | ||
88 | height: 100%; | ||
89 | view{ | ||
90 | margin-bottom: 20rpx; | ||
91 | } | ||
92 | .zi_name{ | ||
93 | font-size: 14px; | ||
94 | color: #333333; | ||
95 | letter-spacing: -0.26px; | ||
96 | line-height: 18px; | ||
97 | } | ||
98 | .zi_standard{ | ||
99 | font-size: 12px; | ||
100 | color: #999999 ; | ||
101 | } | ||
102 | .zi_preprice{ | ||
103 | font-size: 14px; | ||
104 | color: #FF6B4A; | ||
105 | span{ | ||
106 | float: right; | ||
107 | font-size: 12px; | ||
108 | color: #999999; | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | .now_price{ | ||
113 | font-size: 14px; | ||
114 | color: #333333; | ||
115 | float: right; | ||
116 | span{ | ||
117 | font-size: 14px; | ||
118 | color: #FF6B4A ; | ||
119 | } | ||
120 | } | ||
121 | .clear{ | ||
122 | clear: both; | ||
123 | } | ||
124 | .button{ | ||
125 | display: flex; | ||
126 | justify-content: flex-end; | ||
127 | margin-top: 14px; | ||
128 | view{ | ||
129 | width: 156rpx; | ||
130 | height: 48rpx; | ||
131 | border-radius: 12px; | ||
132 | font-size: 12px; | ||
133 | text-align: center; | ||
134 | line-height: 20px; | ||
135 | } | ||
136 | .button1{ | ||
137 | border: 1px solid #FF6B4A; | ||
138 | font-family: PingFangSC-Regular; | ||
139 | color: #FF6B4A; | ||
140 | letter-spacing: -0.23px; | ||
141 | margin-right: 30rpx; | ||
142 | } | ||
143 | .button2{ | ||
144 | border: 1px solid #FF6B4A; | ||
145 | background: #FF6B4A; | ||
146 | font-family: PingFangSC-Regular; | ||
147 | color: #FFFFFF; | ||
148 | letter-spacing: -0.23px; | ||
149 | |||
150 | } | ||
151 | } | ||
152 | </style> |
src/pages/refundment/refundWays.vue
File was created | 1 | <template> | |
2 | <view class="container" v-bind:style="{height: curheight+'px'}"> | ||
3 | <view class="refund" v-for="(items) in refund" :key="items.key"> | ||
4 | <view class="detail"> | ||
5 | <view class="detail_img"><image v-bind:src="items.img"></image></view> | ||
6 | <view class="detail2"> | ||
7 | <view class="detail_name">{{items.name}}</view> | ||
8 | <view class="detail_standard">规格:{{items.standard}}</view> | ||
9 | <view class="detail_price"> | ||
10 | <span>¥{{items.price}}</span> | ||
11 | <span>X{{items.number}}</span> | ||
12 | </view> | ||
13 | </view> | ||
14 | </view> | ||
15 | <view class="refund_price"> | ||
16 | <span class="refund_price1">退款金额</span> | ||
17 | <span class="refund_price2">¥{{items.refundprice}}</span> | ||
18 | </view> | ||
19 | <view class="refund_reason"> | ||
20 | <view>仅退款<image src="/static/img/detail/xiala.png"></image></view> | ||
21 | </view> | ||
22 | <view class="refund_reason"> | ||
23 | <view>退款退货<image src="/static/img/detail/xiala.png"></image></view> | ||
24 | </view> | ||
25 | <view class="refund_reason"> | ||
26 | <view>换货<image src="/static/img/detail/xiala.png"></image></view> | ||
27 | </view> | ||
28 | </view> | ||
29 | </view> | ||
30 | </template> | ||
31 | |||
32 | <script> | ||
33 | export default { | ||
34 | //获取浏览器高度 | ||
35 | beforeMount(height){ | ||
36 | var h = document.documentElement.clientHeight || document.body.clientHeight; | ||
37 | this.curheight = h-44; | ||
38 | |||
39 | }, | ||
40 | data(){ | ||
41 | return{ | ||
42 | curheight:0, //浏览器高度 | ||
43 | refund:[ | ||
44 | { | ||
45 | key:0, | ||
46 | img:'/static/img/detail/d1.png', | ||
47 | name:'商品名称', | ||
48 | standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻', | ||
49 | price: 180, | ||
50 | number: 1, | ||
51 | refundprice: 110, | ||
52 | refund_img:'/static/img/detail/refund_img.png', | ||
53 | } | ||
54 | ], | ||
55 | } | ||
56 | } | ||
57 | } | ||
58 | </script> | ||
59 | |||
60 | <style lang="scss"> | ||
61 | |||
62 | .container{ | ||
63 | background: #F2F2F2; | ||
64 | padding-top: 10px; | ||
65 | box-sizing: border-box; | ||
66 | } | ||
67 | .refund{ | ||
68 | width: 90%; | ||
69 | height: 300px; | ||
70 | margin: 0 auto; | ||
71 | background: #FFFFFF; | ||
72 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | ||
73 | border-radius: 8px; | ||
74 | padding: 14px; | ||
75 | box-sizing: border-box; | ||
76 | } | ||
77 | .detail{ | ||
78 | display: flex; | ||
79 | justify-content: space-between; | ||
80 | font-family: PingFangSC-Regular; | ||
81 | margin-bottom: 20px; | ||
82 | .detail2{ | ||
83 | width: 64%; | ||
84 | view{ | ||
85 | margin-bottom: 8px; | ||
86 | } | ||
87 | .detail_name{ | ||
88 | font-size: 14px; | ||
89 | color:#333333; | ||
90 | } | ||
91 | .detail_standard{ | ||
92 | font-size: 12px; | ||
93 | color: #999999; | ||
94 | } | ||
95 | .detail_price{ | ||
96 | font-size: 14px; | ||
97 | color: #999999; | ||
98 | display: flex; | ||
99 | justify-content: space-between; | ||
100 | } | ||
101 | } | ||
102 | .detail_img{ | ||
103 | width: 188rpx; | ||
104 | height: 188rpx; | ||
105 | border-radius: 40px; | ||
106 | image{ | ||
107 | width: 100%; | ||
108 | height: 100%; | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | |||
113 | .refund_price{ | ||
114 | font-family: PingFangSC-Semibold; | ||
115 | font-size: 14px; | ||
116 | color: #333333; | ||
117 | letter-spacing: -0.26px; | ||
118 | line-height: 18px; | ||
119 | margin-bottom: 26px; | ||
120 | .refund_price1{ | ||
121 | font-weight: bold; | ||
122 | margin-right: 16px; | ||
123 | } | ||
124 | .refund_price2{ | ||
125 | color: #FF6B4A; | ||
126 | } | ||
127 | } | ||
128 | .refund_reason{ | ||
129 | margin-top: 16px; | ||
130 | margin-bottom: 16px; | ||
131 | font-family: PingFangSC-Regular; | ||
132 | font-size: 12px; | ||
133 | color: #333333; | ||
134 | letter-spacing: -0.23px; | ||
135 | line-height: 18px; | ||
136 | view{ | ||
137 | display: inline-block; | ||
138 | font-size: 12px; | ||
139 | color: #333333; | ||
140 | letter-spacing: -0.23px; | ||
141 | line-height: 18px; | ||
142 | width: 90%; | ||
143 | image{ | ||
144 | width: 30rpx; | ||
145 | height: 24rpx; | ||
146 | float: right; | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | |||
152 | </style> |
src/pages/user/user.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <view class="content"> | 3 | <view class="content"> |
4 | <view class="userInfo"> | 4 | <view class="userInfo"> |
5 | <view class="info"> | 5 | <view class="info"> |
6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> | 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> |
7 | <view class="infoText"> | 7 | <view class="infoText"> |
8 | <text class="userName">{{userName}}</text> | 8 | <text class="userName">{{userName}}</text> |
9 | <text class="nickName">用户名:骆驼不死的祥子</text> | 9 | <text class="nickName">用户名:骆驼不死的祥子</text> |
10 | </view> | 10 | </view> |
11 | </view> | 11 | </view> |
12 | <view class="service"> | 12 | <view class="service"> |
13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
14 | </view> | 14 | </view> |
15 | </view> | 15 | </view> |
16 | <view class="myOrder"> | 16 | <view class="myOrder"> |
17 | <view class="orderHeader"> | 17 | <view class="orderHeader"> |
18 | <text>全部订单</text> | 18 | <text>全部订单</text> |
19 | <view class="btn" @click="toMyOrder"> | 19 | <view class="btn" @click="toMyOrder"> |
20 | 全部 | 20 | 全部 |
21 | <image src="../../static/right.png" mode="aspectFill"></image> | 21 | <image src="../../static/right.png" mode="aspectFill"></image> |
22 | </view> | 22 | </view> |
23 | </view> | 23 | </view> |
24 | <view class="orderBody"> | 24 | <view class="orderBody"> |
25 | <view class="item,waitPay" @click=toMyOrderPaying> | 25 | <view class="item waitPay" @click="toMyOrderPaying"> |
26 | <image src="../../static/waitPay.png" mode="aspectFill"></image> | 26 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
27 | <text>待付款</text> | 27 | <text>待付款</text> |
28 | </view> | 28 | </view> |
29 | <view class="item,waitDeliver" @click=toPredelivery> | 29 | <view class="item waitDeliver" @click="toPredelivery" > |
30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
31 | <text>待发货</text> | 31 | <text>待发货</text> |
32 | </view> | 32 | </view> |
33 | <view class="item,waitReceive"> | 33 | <view class="item waitReceive" @click="torefunProgress"> |
34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> | 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
35 | <text>待收货</text> | 35 | <text>待收货</text> |
36 | </view> | 36 | </view> |
37 | <view class="item,service"> | 37 | <view class="item service" @click="torefundment"> |
38 | <image src="../../static/service.png" mode="aspectFill"></image> | 38 | <image src="../../static/service.png" mode="aspectFill"></image> |
39 | <text>退换/售后</text> | 39 | <text>退换/售后</text> |
40 | </view> | 40 | </view> |
41 | </view> | 41 | </view> |
42 | </view> | 42 | </view> |
43 | <view class="recommend"> | 43 | <view class="recommend"> |
44 | <view class="title"> | 44 | <view class="title"> |
45 | <view class="line"></view> | 45 | <view class="line"></view> |
46 | <view class="text">精选推荐</view> | 46 | <view class="text">精选推荐</view> |
47 | <view class="line"></view> | 47 | <view class="line"></view> |
48 | </view> | 48 | </view> |
49 | <!-- 商品列表 --> | 49 | <!-- 商品列表 --> |
50 | <view class="goods-list"> | 50 | <view class="goods-list"> |
51 | <view class="product-list"> | 51 | <view class="product-list"> |
52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
53 | <Card :goods = "goods"></Card> | 53 | <Card :goods = "goods"></Card> |
54 | </view> | 54 | </view> |
55 | </view> | 55 | </view> |
56 | <view class="loading-text">{{loadingText}}</view> | 56 | <view class="loading-text">{{loadingText}}</view> |
57 | </view> | 57 | </view> |
58 | </view> | 58 | </view> |
59 | </view> | 59 | </view> |
60 | 60 | ||
61 | </view> | 61 | </view> |
62 | </template> | 62 | </template> |
63 | 63 | ||
64 | <script> | 64 | <script> |
65 | import Card from "@/components/CommodityCard/CommodityCard.vue" | 65 | import Card from "@/components/CommodityCard/CommodityCard.vue" |
66 | export default { | 66 | export default { |
67 | components: { | 67 | components: { |
68 | 'Card':Card | 68 | 'Card':Card |
69 | }, | 69 | }, |
70 | data() { | 70 | data() { |
71 | return { | 71 | return { |
72 | 72 | ||
73 | //商品数据 | 73 | //商品数据 |
74 | goodsList:[ | 74 | goodsList:[ |
75 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 75 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, |
84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' } | 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' } |
85 | ], | 85 | ], |
86 | headerphoto:'', | 86 | headerphoto:'', |
87 | userName:'Adam' | 87 | userName:'Adam' |
88 | } | 88 | } |
89 | }, | 89 | }, |
90 | onLoad() { | 90 | onLoad() { |
91 | 91 | ||
92 | }, | 92 | }, |
93 | methods: { | 93 | methods: { |
94 | toMyOrder(){ | 94 | toMyOrder(){ |
95 | uni.navigateTo({ | 95 | uni.navigateTo({ |
96 | url: '../myOrder/myOrder', | 96 | url: '../myOrder/myOrder?current=0', |
97 | success: res => {}, | 97 | success: res => {}, |
98 | fail: () => {}, | 98 | fail: () => {}, |
99 | complete: () => {} | 99 | complete: () => {} |
100 | }); | 100 | }); |
101 | }, | 101 | }, |
102 | toPredelivery(){ | 102 | toPredelivery(){ |
103 | uni.navigateTo({ | 103 | uni.navigateTo({ |
104 | url: '../Predelivery/Predelivery', | 104 | url: '../myOrder/myOrder?current=2', |
105 | success: res => {}, | 105 | success: res => {}, |
106 | fail: () => {}, | 106 | fail: () => {}, |
107 | complete: () => {} | 107 | complete: () => {} |
108 | }); | 108 | }); |
109 | }, | 109 | }, |
110 | toMyOrderPaying(){ | 110 | toMyOrderPaying(){ |
111 | uni.navigateTo({ | 111 | uni.navigateTo({ |
112 | url: '../myorder-paying/myorder-paying', | 112 | url: '../myOrder/myOrder?current=1', |
113 | success: res => {}, | 113 | success: res => {}, |
114 | fail: () => {}, | 114 | fail: () => {}, |
115 | complete: () => {} | 115 | complete: () => {} |
116 | }); | 116 | }); |
117 | }, | ||
118 | torefundment(){ | ||
119 | uni.navigateTo({ | ||
120 | url:'../refundment/refundment', | ||
121 | }) | ||
122 | }, | ||
123 | torefunProgress(){ | ||
124 | uni.navigateTo({ | ||
125 | url:'../refundProgress/refundProgress' | ||
126 | }) | ||
117 | } | 127 | } |
118 | } | 128 | } |
119 | } | 129 | } |
120 | </script> | 130 | </script> |
121 | 131 | ||
122 | <style lang="scss"> | 132 | <style lang="scss"> |
123 | .warp{ | 133 | .warp{ |
124 | font-size: 24rpx; | 134 | font-size: 24rpx; |
125 | background-color: #f2f2f2; | 135 | background-color: #f2f2f2; |
126 | height: 100vh; | 136 | height: 100vh; |
127 | } | 137 | } |
128 | .content { | 138 | .content { |
129 | display: flex; | 139 | display: flex; |
130 | flex-direction: column; | 140 | flex-direction: column; |
131 | align-items: center; | 141 | align-items: center; |
132 | justify-content: center; | 142 | justify-content: center; |
133 | background-color: #F2F2F2; | 143 | background-color: #F2F2F2; |
134 | } | 144 | } |
135 | .userInfo{ | 145 | .userInfo{ |
136 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 146 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
137 | width: 100%; | 147 | width: 100%; |
138 | height: 240rpx; | 148 | height: 240rpx; |
139 | color: #FFFFFF; | 149 | color: #FFFFFF; |
140 | padding: 60rpx 82rpx 80rpx 44rpx; | 150 | padding: 60rpx 82rpx 80rpx 44rpx; |
141 | box-sizing: border-box; | 151 | box-sizing: border-box; |
142 | display: flex; | 152 | display: flex; |
143 | flex-direction: row; | 153 | flex-direction: row; |
144 | justify-content: space-between; | 154 | justify-content: space-between; |
145 | align-items: flex-start; | 155 | align-items: flex-start; |
146 | .info{ | 156 | .info{ |
147 | display: flex; | 157 | display: flex; |
148 | flex-direction: row; | 158 | flex-direction: row; |
149 | justify-content: space-between; | 159 | justify-content: space-between; |
150 | align-items: center; | 160 | align-items: center; |
151 | image{ | 161 | image{ |
152 | border-radius: 50rpx; | 162 | border-radius: 50rpx; |
153 | height: 100rpx ; | 163 | height: 100rpx ; |
154 | width: 100rpx; | 164 | width: 100rpx; |
155 | margin-right: 40rpx; | 165 | margin-right: 40rpx; |
156 | } | 166 | } |
157 | .infoText{ | 167 | .infoText{ |
158 | display: flex; | 168 | display: flex; |
159 | flex-direction: column; | 169 | flex-direction: column; |
160 | justify-content: space-between; | 170 | justify-content: space-between; |
161 | align-items: flex-scetart; | 171 | align-items: flex-scetart; |
162 | .userName{ | 172 | .userName{ |
163 | font-size: 18px; | 173 | font-size: 18px; |
164 | color: #FFFFFF; | 174 | color: #FFFFFF; |
165 | margin-bottom: 8rpx; | 175 | margin-bottom: 8rpx; |
166 | } | 176 | } |
167 | .nickName{ | 177 | .nickName{ |
168 | font-size: 12px; | 178 | font-size: 12px; |
169 | color: #FFFFFF; | 179 | color: #FFFFFF; |
170 | } | 180 | } |
171 | } | 181 | } |
172 | } | 182 | } |
173 | .service{ | 183 | .service{ |
174 | image{ | 184 | image{ |
175 | height: 36rpx; | 185 | height: 36rpx; |
176 | width: 36rpx; | 186 | width: 36rpx; |
177 | } | 187 | } |
178 | } | 188 | } |
179 | } | 189 | } |
180 | .myOrder{ | 190 | .myOrder{ |
181 | width: 100%; | 191 | width: 100%; |
182 | height: 296rpx; | 192 | height: 296rpx; |
183 | margin-top: 20rpx; | 193 | margin-top: 20rpx; |
184 | margin-bottom: 20rpx; | 194 | margin-bottom: 20rpx; |
185 | padding: 0 40rpx; | 195 | padding: 0 40rpx; |
186 | box-sizing: border-box; | 196 | box-sizing: border-box; |
187 | background: #FFFFFF; | 197 | background: #FFFFFF; |
188 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 198 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
189 | border-radius: 6px; | 199 | border-radius: 6px; |
190 | border-radius: 6px; | 200 | border-radius: 6px; |
191 | display: flex; | 201 | display: flex; |
192 | flex-direction: column; | 202 | flex-direction: column; |
193 | justify-content: space-around; | 203 | justify-content: space-around; |
194 | align-items: center; | 204 | align-items: center; |
195 | .orderHeader{ | 205 | .orderHeader{ |
196 | width: 100%; | 206 | width: 100%; |
197 | height: 100rpx; | 207 | height: 100rpx; |
198 | display: flex; | 208 | display: flex; |
199 | flex-direction: row; | 209 | flex-direction: row; |
200 | justify-content: space-between; | 210 | justify-content: space-between; |
201 | align-items: center; | 211 | align-items: center; |
202 | border-bottom: 1px solid #E9E9E9;; | 212 | border-bottom: 1px solid #E9E9E9;; |
203 | font-weight: bold; | 213 | font-weight: bold; |
204 | font-size: 18px; | 214 | font-size: 18px; |
205 | color: #333333; | 215 | color: #333333; |
206 | .btn{ | 216 | .btn{ |
207 | font-size: 12px; | 217 | font-size: 12px; |
208 | color: #999999; | 218 | color: #999999; |
209 | image{ | 219 | image{ |
210 | margin-left: 20rpx; | 220 | margin-left: 20rpx; |
211 | height: 16rpx; | 221 | height: 16rpx; |
212 | width: 8rpx; | 222 | width: 8rpx; |
213 | } | 223 | } |
214 | } | 224 | } |
215 | } | 225 | } |
216 | .orderBody{ | 226 | .orderBody{ |
217 | width: 100%; | 227 | width: 100%; |
218 | display: flex; | 228 | display: flex; |
219 | flex-direction: row; | 229 | flex-direction: row; |
220 | justify-content: space-between; | 230 | justify-content: space-between; |
221 | align-items: center; | 231 | align-items: center; |
222 | .item{ | 232 | .item{ |
223 | display: flex; | 233 | display: flex; |
224 | flex-direction: column; | 234 | flex-direction: column; |
225 | align-items: center; | 235 | align-items: center; |
226 | image{ | 236 | image{ |
227 | width: 46rpx; | 237 | width: 46rpx; |
228 | height: 46rpx; | 238 | height: 46rpx; |
229 | } | 239 | } |
230 | text{ | 240 | text{ |
231 | margin-top: 24rpx; | 241 | margin-top: 24rpx; |
232 | font-size: 12px; | 242 | font-size: 12px; |
233 | color: #333333; | 243 | color: #333333; |
234 | } | 244 | } |
235 | } | 245 | } |
236 | } | 246 | } |
237 | } | 247 | } |
238 | .recommend{ | 248 | .recommend{ |
239 | background: #FFFFFF; | 249 | background: #FFFFFF; |
240 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 250 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
241 | border-radius: 6px; | 251 | border-radius: 6px; |
242 | border-radius: 6px; | 252 | border-radius: 6px; |
253 | width: 100%; | ||
243 | .title{ | 254 | .title{ |
244 | display: flex; | 255 | display: flex; |
245 | flex-direction: row; | 256 | flex-direction: row; |
246 | align-items: center; | 257 | align-items: center; |
247 | justify-content: space-between; | 258 | justify-content: space-between; |
248 | padding: 20rpx 40rpx; | 259 | padding: 20rpx 40rpx; |
249 | .line{ | 260 | .line{ |
250 | width: 264rpx; | 261 | width: 264rpx; |
251 | height: 1rpx; | 262 | height: 1rpx; |
252 | border-bottom: 1px solid #EAEAEA; | 263 | border-bottom: 1px solid #EAEAEA; |
253 | } | 264 | } |
254 | .text{ | 265 | .text{ |
255 | font-family: PingFangSC-Medium; | 266 | font-family: PingFangSC-Medium; |
256 | font-size: 14px; | 267 | font-size: 14px; |
257 | color: #333333; | 268 | color: #333333; |
258 | letter-spacing: -0.26px; | 269 | letter-spacing: -0.26px; |
259 | text-align: justify; | 270 | text-align: justify; |
260 | line-height: 24px; | 271 | line-height: 24px; |
261 | } | 272 | } |
262 | } | 273 | } |
263 | .goods-list{ | 274 | .goods-list{ |
264 | .loading-text{ | 275 | .loading-text{ |
265 | width: 100%; | 276 | width: 100%; |
266 | display: flex; | 277 | display: flex; |
267 | justify-content: center; | 278 | justify-content: center; |
268 | align-items: center; | 279 | align-items: center; |
269 | height: 30px; | 280 | height: 30px; |
270 | color: #979797; | 281 | color: #979797; |
271 | font-size: 12px; | 282 | font-size: 12px; |
272 | } | 283 | } |
273 | .product-list{ | 284 | .product-list{ |
274 | width: 92%; | 285 | width: 92%; |
275 | padding: 0 4% 3vw 4%; | 286 | padding: 0 4% 3vw 4%; |
276 | display: flex; | 287 | display: flex; |
277 | justify-content: space-between; | 288 | justify-content: space-between; |
278 | flex-wrap: wrap; | 289 | flex-wrap: wrap; |
279 | .product{ | 290 | .product{ |
280 | width: 48%; | 291 | width: 48%; |
281 | margin: 0 0 20rpx 0; | 292 | margin: 0 0 20rpx 0; |
282 | background: #FFFFFF; | 293 | background: #FFFFFF; |
283 | border: 1px solid #F2F2F2; | 294 | border: 1px solid #F2F2F2; |
284 | } | 295 | } |
285 | } | 296 | } |
286 | } | 297 | } |
287 | } | 298 | } |
288 | 299 | ||
289 | </style> | 300 | </style> |
290 | 301 |
src/static/img/detail/Kuang/g1.png
9.28 KB
src/static/img/detail/Kuang/g2.png
8.61 KB
src/static/img/detail/Kuang/g3.png
7.95 KB
src/static/img/detail/Kuang/s1.png
7.61 KB
src/static/img/detail/Kuang/s2.png
7.83 KB
src/static/img/detail/Kuang/s3.png
7.28 KB
src/static/img/detail/Kuang/s4.png
7.69 KB
src/static/img/detail/Kuang/s5.png
7.39 KB
src/static/img/detail/Kuang/s6.png
7.27 KB
src/static/img/detail/Kuang/s7.png
7.6 KB
src/static/img/detail/Kuang/sun_jp.png
2.5 KB
src/static/img/detail/sun_glass.png
25.2 KB
src/store/modules/categoryOrder.js
File was created | 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 | }; | ||
41 |
src/store/modules/myOrder.js
File was created | 1 | import urlAlias from '../url'; | |
2 | import request from '../request'; | ||
3 | |||
4 | const { | ||
5 | orderList | ||
6 | } = urlAlias; | ||
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 | } | ||
74 | |||
75 | const state = { | ||
76 | orderList: [], | ||
77 | }; | ||
78 | |||
79 | const mutations = { | ||
80 | INIT: (state, data) => { | ||
81 | state.orderList = data; | ||
82 | }, | ||
83 | }; | ||
84 | |||
85 | const actions = { | ||
86 | getList({ commit }, param) { | ||
87 | request({ | ||
88 | url: orderList, | ||
89 | data: param, | ||
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); | ||
97 | }, | ||
98 | }) | ||
99 | } | ||
100 | } | ||
101 | |||
102 | export default { | ||
103 | namespaced: true, | ||
104 | state, | ||
105 | mutations, | ||
106 | actions, | ||
107 | } |
src/store/modules/test.js
1 | import urlAlias from '../url'; | ||
2 | import request from '../request'; | ||
3 | |||
4 | const { | ||
5 | shopList | ||
6 | } = urlAlias; | ||
7 | |||
1 | const state = { | 8 | const state = { |
2 | list: [], | 9 | list: [], |
3 | }; | 10 | }; |
4 | 11 | ||
5 | const mutations = { | 12 | const mutations = { |
6 | INIT: (state, list) => { | 13 | INIT: (state, list) => { |
7 | state.list = list; | 14 | state.list = list; |
8 | }, | 15 | }, |
9 | }; | 16 | }; |
10 | 17 | ||
11 | const actions = { | 18 | const actions = { |
12 | fetch({ commit }, param) { | 19 | fetch({ commit }, param) { |
13 | uni | 20 | request({ |
14 | .request({ | 21 | url: shopList, |
15 | url: "https://api.glass.xiuyetang.com/app/prod/list", | 22 | success: (res) => { |
16 | method: "post", | 23 | commit('INIT', res.data.data) |
17 | data: {}, | 24 | }, |
18 | header: { | 25 | fail: (res) => { |
19 | "Content-Type": "application/x-www-form-urlencoded", | 26 | console.log("fail status === > ", res); |
20 | }, | 27 | }, |
21 | timeout: 3000, | 28 | complete: (res) => { |
22 | withCredentials: false, | 29 | console.log("complete status === > ", res); |
23 | success: (res) => { | 30 | }, |
24 | commit('INIT', res.data.data) | 31 | }) |
25 | }, | 32 | // uni |
26 | fail: (res) => { | 33 | // .request({ |
27 | console.log("fail status === > ", res); | 34 | // url: "https://api.glass.xiuyetang.com/app/prod/list", |
28 | }, | 35 | // method: "post", |
29 | complete: (res) => { | 36 | // data: {}, |
30 | console.log("complete status === > ", res); | 37 | // header: { |
31 | }, | 38 | // "Content-Type": "application/x-www-form-urlencoded", |
32 | }); | 39 | // }, |
40 | // timeout: 3000, | ||
41 | // withCredentials: false, | ||
42 | // success: (res) => { | ||
43 | // commit('INIT', res.data.data) | ||
44 | // }, | ||
45 | // fail: (res) => { | ||
46 | // console.log("fail status === > ", res); | ||
47 | // }, | ||
48 | // complete: (res) => { | ||
49 | // console.log("complete status === > ", res); | ||
50 | // }, | ||
51 | // }); | ||
33 | }, | 52 | }, |
34 | }; | 53 | }; |
35 | 54 | ||
36 | export default { | 55 | export default { |
37 | namespaced: true, | 56 | namespaced: true, |
38 | state, | 57 | state, |
39 | mutations, | 58 | mutations, |
40 | actions, | 59 | actions, |
41 | }; | 60 | }; |
42 | 61 |
src/store/request.js
File was created | 1 | const DOMAIN = 'https://api.glass.xiuyetang.com'; | |
2 | |||
3 | export default async function request({ | ||
4 | url, | ||
5 | method = "post", | ||
6 | data = {}, | ||
7 | header = { | ||
8 | "Content-Type": "application/x-www-form-urlencoded", | ||
9 | }, | ||
10 | timeout = 3000, | ||
11 | withCredentials = false, // 跨域请求时是否携带凭证(cookies) | ||
12 | // sslVerify: true, // 验证 ssl 证书 | ||
13 | success, | ||
14 | fail = (res) => { | ||
15 | console.log("fail status === > ", res); | ||
16 | }, | ||
17 | complete = (res) => { | ||
18 | console.log("complete status === > ", res); | ||
19 | }, | ||
20 | }) { | ||
21 | console.log("DOMAIN", DOMAIN, url); | ||
22 | uni | ||
23 | .request({ | ||
24 | url: DOMAIN + url, | ||
25 | method, | ||
26 | data, | ||
27 | header, | ||
28 | timeout, | ||
29 | withCredentials, | ||
30 | success, | ||
31 | fail, | ||
32 | complete, | ||
33 | }) | ||
34 | } |
src/store/url.js
File was created | 1 | const urlAlias = { | |
2 | // 获取首页商品列表 | ||
3 | shopList: '/app/prod/list', | ||
4 | |||
5 | // 获取首页商品列表 | ||
6 | category: '/app/prod/category', | ||
7 | } | ||
8 | |||
9 | export default urlAlias; | ||
10 |