刘文博 / gulu-vue

Download as
Browse Code »

Commit 912dd06afca653d84cb700548211087876520008

Authored by BigBoss
2 parents a8284c675b 31d534075d
Exists in master

拉取了筛选目录接口

Showing 16 changed files   Show diff stats
src/components/UniSliper/UniSliper.vue
Diff comments   View file @912dd06
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>
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/myOrder/myOrder", 10 "path" : "pages/myOrder/myOrder",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText": "我的订单"} 12 "navigationBarTitleText": "我的订单"}
13 }, 13 },
14 { 14 {
15 "path": "pages/frameDetail/frameDetail", 15 "path": "pages/frameDetail/frameDetail",
16 "style": { 16 "style": {
17 "navigationBarTitleText": "产品详情" 17 "navigationBarTitleText": "产品详情"
18 } 18 }
19 }, 19 },
20 { 20 {
21 "path": "pages/lensDetails/lensDetails", 21 "path": "pages/lensDetails/lensDetails",
22 "style": { 22 "style": {
23 "navigationBarTitleText": "产品详情" 23 "navigationBarTitleText": "产品详情"
24 } 24 }
25 }, 25 },
26 { 26 {
27 "path": "pages/cart/cart", 27 "path": "pages/cart/cart",
28 "style": { 28 "style": {
29 "navigationBarTitleText": "购物车" 29 "navigationBarTitleText": "购物车"
30 } 30 }
31 }, 31 },
32 { 32 {
33 "path" : "pages/purchaseLenses/purchaseLenses", 33 "path" : "pages/purchaseLenses/purchaseLenses",
34 "style" : { 34 "style" : {
35 "navigationBarTitleText": "产品选购" 35 "navigationBarTitleText": "产品选购"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path" : "pages/refundProgress/refundProgress", 39 "path" : "pages/refundProgress/refundProgress",
40 "style": { 40 "style": {
41 "navigationBarTitleText": "申请退款" 41 "navigationBarTitleText": "申请退款"
42 } 42 }
43 }, 43 },
44 { 44 {
45 "path": "pages/addAddress/addAddress", 45 "path": "pages/addAddress/addAddress",
46 "style": { 46 "style": {
47 "navigationBarTitleText": "新增地址" 47 "navigationBarTitleText": "新增地址"
48 } 48 }
49 }, 49 },
50 { 50 {
51 "path" : "pages/confirmOrder/confirmOrder", 51 "path" : "pages/confirmOrder/confirmOrder",
52 "style" : { 52 "style" : {
53 "navigationBarTitleText": "确认订单" 53 "navigationBarTitleText": "确认订单"
54 } 54 }
55 }, 55 },
56 { 56 {
57 "path": "pages/user/user", 57 "path": "pages/user/user",
58 "style": { 58 "style": {
59 "navigationBarTitleText": "我的" 59 "navigationBarTitleText": "我的"
60 } 60 }
61 }, 61 },
62 // { 62 {
63 // "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 63 "path": "pages/refundment/refundWays"
64 // "style": { 64 },
65 // "navigationBarTitleText": "选购参数" 65 {
66 // } 66 "path": "pages/refundment/refundment"
67 // }, 67 },
68 // { 68 {
69 // "path": "pages/detailStandard/detailStandardSun", 69 "path": "pages/predelivery/predelivery"
70 // "style": { 70 },
71 // "navigationBarTitleText": "选购参数" 71 {
72 // } 72 "path": "pages/customerService/customerService"
73 // }, 73 },
74 { 74 {
75 "path": "pages/refundment/refundWays" 75 "path": "pages/myOrderPaying/myOrderPaying",
76 "style": {
77 "navigationBarTitleText": "待付款"
78 }
79 },
80 {
81 "path" : "pages/detailStandard/detailStandard_sun",
82 "style": {
83 "navigationBarTitleText": "太阳镜选购页"
84 }
85 },
86 {
87 "path" : "pages/detailStandard/detailStandard_k",
76 }, 88 "style": {
77 { 89 "navigationBarTitleText": "镜框选购页"
78 "path": "pages/refundment/refundment" 90 }
79 }, 91 }
80 { 92
81 "path": "pages/predelivery/predelivery" 93 ],
82 }, 94 "globalStyle": {
83 { 95 "navigationBarTextStyle": "black",
84 "path": "pages/customerService/customerService" 96 "navigationBarTitleText": "uni-app",
85 }, 97 "navigationBarBackgroundColor": "#F8F8F8",
86 { 98 "backgroundColor": "#F8F8F8"
87 "path": "pages/myOrderPaying/myOrderPaying", 99 },
88 "style": { 100 "tabBar": {
89 "navigationBarTitleText": "待付款" 101 "color": "#C0C4CC",
90 } 102 "selectedColor": "#fa436a",
91 } 103 "borderStyle": "black",
92 104 "backgroundColor": "#ffffff",
93 ], 105 "list": [{
94 "globalStyle": { 106 "pagePath": "pages/index/index",
95 "navigationBarTextStyle": "black", 107 "iconPath": "static/tab-home.png",
96 "navigationBarTitleText": "uni-app", 108 "selectedIconPath": "static/tab-home-current.png",
97 "navigationBarBackgroundColor": "#F8F8F8", 109 "text": "首页"
98 "backgroundColor": "#F8F8F8" 110 },
99 }, 111 {
100 "tabBar": { 112 "pagePath": "pages/cart/cart",
101 "color": "#C0C4CC", 113 "iconPath": "static/tab-cart.png",
102 "selectedColor": "#fa436a", 114 "selectedIconPath": "static/tab-cart-current.png",
103 "borderStyle": "black", 115 "text": "购物车"
104 "backgroundColor": "#ffffff", 116 },
105 "list": [{ 117 {
106 "pagePath": "pages/index/index", 118 "pagePath": "pages/user/user",
107 "iconPath": "static/tab-home.png", 119 "iconPath": "static/tab-my.png",
108 "selectedIconPath": "static/tab-home-current.png", 120 "selectedIconPath": "static/tab-my-current.png",
109 "text": "首页" 121 "text": "我的"
110 }, 122 }
111 { 123 ]
112 "pagePath": "pages/cart/cart", 124 }
113 "iconPath": "static/tab-cart.png", 125 }
114 "selectedIconPath": "static/tab-cart-current.png", 126
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @912dd06
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
Diff comments   View file @912dd06
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/static/img/detail/Kuang/g1.png
Diff comments   View file @912dd06

9.28 KB
src/static/img/detail/Kuang/g2.png
Diff comments   View file @912dd06

8.61 KB
src/static/img/detail/Kuang/g3.png
Diff comments   View file @912dd06

7.95 KB
src/static/img/detail/Kuang/s1.png
Diff comments   View file @912dd06

7.61 KB
src/static/img/detail/Kuang/s2.png
Diff comments   View file @912dd06

7.83 KB
src/static/img/detail/Kuang/s3.png
Diff comments   View file @912dd06

7.28 KB
src/static/img/detail/Kuang/s4.png
Diff comments   View file @912dd06

7.69 KB
src/static/img/detail/Kuang/s5.png
Diff comments   View file @912dd06

7.39 KB
src/static/img/detail/Kuang/s6.png
Diff comments   View file @912dd06

7.27 KB
src/static/img/detail/Kuang/s7.png
Diff comments   View file @912dd06

7.6 KB
src/static/img/detail/Kuang/sun_jp.png
Diff comments   View file @912dd06

2.5 KB
src/static/img/detail/sun_glass.png
Diff comments   View file @912dd06

25.2 KB