刘文博 / gulu-vue

Download as
Browse Code »

Commit c4c4f1251c85a8697f7f5e84f8ce500e5c7a51e4

Authored by 尹聃
1 parent 600d4968f3
Exists in master

修改镜框选购页

Showing 4 changed files with 73 additions and 19 deletions   Show diff stats
src/components/UniSliper/UniSliper.vue
Diff comments   View file @c4c4f12
1 <template> 1 <template>
2 <div class="c-progress"> 2 <div class="c-progress">
3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> 3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4 <div class="c-progress-inner" :style="setProgressStyle"></div> 4 <div class="c-progress-inner" :style="setProgressStyle"></div>
5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> 5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
6 </div> 6 </div>
7 <span v-if="showPerText">{{stand_width}}mm</span> 7 <span v-if="showPerText">{{stand_width}}mm</span>
8 </div> 8 </div>
9 </template> 9 </template>
10 10
11 <script> 11 <script>
12 // 使用了element的颜色 12 // 使用了element的颜色
13 const colorTable = { 13 const colorTable = {
14 success: '#13ce66', 14 success: '#13ce66',
15 fail: '#ff4949', 15 fail: '#ff4949',
16 warning: '#e6a23c', 16 warning: '#e6a23c',
17 default: '#409EFF' 17 default: '#409EFF'
18 } 18 }
19 export default { 19 export default {
20 name: 'CProgress', 20 name: 'CProgress',
21 props: { 21 props: {
22 percent: { 22 percent: {
23 type: Number, 23 type: Number,
24 default: 60 24 default: 60
25 }, 25 },
26 showSlider: { 26 showSlider: {
27 type: Boolean, 27 type: Boolean,
28 default: true 28 default: true
29 }, 29 },
30 showPerText: { 30 showPerText: {
31 type: Boolean, 31 type: Boolean,
32 default: true 32 default: true
33 }, 33 },
34 // 进度条的宽度 34 // 进度条的宽度
35 width: { 35 width: {
36 type: Number, 36 type: Number,
37 default: 300 37 default: 300
38 }, 38 },
39 bgColor: { 39 bgColor: {
40 type: String, 40 type: String,
41 default: '#ebeef5' 41 default: '#ebeef5'
42 }, 42 },
43 progressColor: { 43 progressColor: {
44 type: String, 44 type: String,
45 default: '#409EFF' 45 default: '#409EFF'
46 }, 46 },
47 // 滑块的宽度 47 // 滑块的宽度
48 sliderWidth: { 48 sliderWidth: {
49 type: Number, 49 type: Number,
50 default: 20 50 default: 20
51 }, 51 },
52 // 颜色的类型 52 // 颜色的类型
53 type: { 53 type: {
54 type: String, 54 type: String,
55 default: colorTable.default 55 default: colorTable.default
56 }, 56 },
57 //规格长度 57 //规格长度
58 standard:{ 58 standard:{
59 type: Number, 59 type: Number,
60 default: 1.4 60 default: 1.4
61 }, 61 },
62 //初始长度 62 //初始长度
63 stand_width:{ 63 stand_width:{
64 type: Number, 64 type: Number,
65 default: 0 65 default: 0
66 } 66 }
67 }, 67 },
68 data () { 68 data () {
69 return { 69 return {
70 sliderLeft: 0, // 滑块相对父元素发x坐标 70 sliderLeft: 0, // 滑块相对父元素发x坐标
71 progressWidth: 0, // 进度条当前的的宽度 71 progressWidth: 0, // 进度条当前的的宽度
72 tempPercent: 0, 72 tempPercent: 0,
73 } 73 }
74 }, 74 },
75 computed: { 75 computed: {
76 // 设置进度条的背景样式 76 // 设置进度条的背景样式
77 setProgressBgStyle () { 77 setProgressBgStyle () {
78 return { 78 return {
79 // 加上滑块的宽度 79 // 加上滑块的宽度
80 width: `${this.width + this.sliderWidth}px` 80 width: `${this.width + this.sliderWidth}px`
81 } 81 }
82 }, 82 },
83 // 设置进度条的样式 83 // 设置进度条的样式
84 setProgressStyle () { 84 setProgressStyle () {
85 const color = colorTable[this.type] || this.progressColor 85 const color = colorTable[this.type] || this.progressColor
86 return { 86 return {
87 width: `${this.progressWidth}px`, 87 width: `${this.progressWidth}px`,
88 background: color 88 background: color
89 } 89 }
90 }, 90 },
91 // 设置滑块的样式 91 // 设置滑块的样式
92 setSliderStyle () { 92 setSliderStyle () {
93 const color = colorTable[this.type] || this.progressColor 93 const color = colorTable[this.type] || this.progressColor
94 return { 94 return {
95 border: `1px solid ${color}`, 95 border: `1px solid ${color}`,
96 width: `${this.sliderWidth}px`, 96 width: `${this.sliderWidth}px`,
97 height: `${this.sliderWidth}px`, 97 height: `${this.sliderWidth}px`,
98 left: `${this.sliderLeft}px` 98 left: `${this.sliderLeft}px`
99 } 99 }
100 } 100 }
101 }, 101 },
102 mounted () { 102 mounted () {
103 this.sliderLeft = this.width / 100 * this.percent 103 this.sliderLeft = this.width / 100 * this.percent
104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 this.tempPercent = this.percent 105 this.tempPercent = this.percent
106 this.addListener() 106 this.addListener()
107 }, 107 },
108 methods: { 108 methods: {
109 addListener () { 109 addListener () {
110 const slider = this.$refs.slider 110 const slider = this.$refs.slider
111 const progress = this.$refs.progress 111 const progress = this.$refs.progress
112 let isClickSlider = false 112 let isClickSlider = false
113 let distance = 0 // 滑块与点击坐标的绝对距离 113 let distance = 0 // 滑块与点击坐标的绝对距离
114 progress.onclick = (e) => { 114 progress.onclick = (e) => {
115 // 阻止事件冒泡 115 // 阻止事件冒泡
116 if (e.target == slider) { 116 if (e.target == slider) {
117 return 117 return
118 } 118 }
119 let curX = progress.offsetLeft 119 let curX = progress.offsetLeft
120 this.sliderLeft = e.pageX - curX 120 this.sliderLeft = e.pageX - curX
121 if (this.sliderLeft <= 0) { 121 if (this.sliderLeft <= 0) {
122 this.sliderLeft = 0 122 this.sliderLeft = 0
123 } 123 }
124 if (this.sliderLeft >= this.width) { 124 if (this.sliderLeft >= this.width) {
125 this.sliderLeft = this.width 125 this.sliderLeft = this.width
126 } 126 }
127 this._countCurPercent() 127 this._countCurPercent()
128 } 128 }
129 // slider.onmousedown = (e) => { 129 // slider.onmousedown = (e) => {
130 // isClickSlider = true 130 // isClickSlider = true
131 // let curX = slider.offsetLeft 131 // let curX = slider.offsetLeft
132 // distance = e.pageX - curX // 得出绝对距离 132 // distance = e.pageX - curX // 得出绝对距离
133 // } 133 // }
134 progress.onmousemove = (e) => { 134 progress.onmousemove = (e) => {
135 if (isClickSlider) { 135 if (isClickSlider) {
136 // 判断是否已经超出进度条的长度 136 // 判断是否已经超出进度条的长度
137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { 137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138 this.sliderLeft = e.pageX - distance 138 this.sliderLeft = e.pageX - distance
139 this._countCurPercent() 139 this._countCurPercent()
140 } 140 }
141 } 141 }
142 } 142 }
143 progress.onmouseup = () => { 143 progress.onmouseup = () => {
144 isClickSlider = false 144 isClickSlider = false
145 } 145 }
146 }, 146 },
147 // 算出百分比 147 // 算出百分比
148 _countCurPercent () { 148 _countCurPercent () {
149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) 149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150 this.progressWidth = this.sliderLeft + 20 150 this.progressWidth = this.sliderLeft + 20
151 // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 151 // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
152 if (this.tempPercent <= 0) { 152 if (this.tempPercent <= 0) {
153 this.progressWidth = 0 153 this.progressWidth = 0
154 this.sliderLeft = 0 154 this.sliderLeft = 0
155 } 155 }
156 if (this.tempPercent >= 100) { 156 if (this.tempPercent >= 100) {
157 this.progressWidth = this.width + 20 157 this.progressWidth = this.width + 20
158 this.sliderLeft = this.width 158 this.sliderLeft = this.width
159 } 159 }
160 this.stand_width = this.tempPercent*this.standard 160 this.stand_width = this.tempPercent*this.standard
161 this.stand_width = parseInt(this.stand_width/1) //取整 161 this.stand_width = parseInt(this.stand_width/1) //取整
162 this.$emit('percentChange', this.tempPercent) 162 this.$emit('percentChange', this.tempPercent)
163 } 163 }
164 } 164 }
165 } 165 }
166 </script> 166 </script>
167 167
168 <style scoped lang="scss"> 168 <style scoped lang="scss">
169 .c-progress { 169 .c-progress {
170 $width: 300px; 170 $width: 400rpx;
171 $radius: 5px; 171 $radius: 5px;
172 display: flex; 172 display: flex;
173 align-items: center; 173 align-items: center;
174 174
175 span { 175 span {
176 margin-left: 5px; 176 margin-left: 5px;
177 font-size: 14px; 177 font-size: 14px;
178 color: #666; 178 color: #666;
179 } 179 }
180 180
181 .c-progress-outer { 181 .c-progress-outer {
182 width: $width; 182 width: $width;
183 height: 10px; 183 height: 10px;
184 background: #ebeef5; 184 background: #ebeef5;
185 position: relative; 185 position: relative;
186 display: flex; 186 display: flex;
187 align-items: center; 187 align-items: center;
188 188
189 .c-progress-inner { 189 .c-progress-inner {
190 width: 100px; 190 width: 100rpx;
191 height: 10px; 191 height: 10px;
192 background: #409EFF; 192 background: #FF6B4A ;
193 } 193 }
194 194
195 .c-progress-slider { 195 .c-progress-slider {
196 width: 20px; 196 width: 20px;
197 height: 20px; 197 height: 20px;
198 border-radius: 50%; 198 border-radius: 50%;
199 background: #fff; 199 background: #fff;
200 border: 1px solid #409EFF; 200 border: 1px solid #FF6B4A ;
201 position: absolute; 201 position: absolute;
202 z-index: 10; 202 z-index: 10;
203 left: 10px; 203 left: 10px;
204 } 204 }
205 } 205 }
206 } 206 }
207 </style> 207 </style>
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @c4c4f12
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view> 4 <view class="detail1"><image v-bind:src="detail.image"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view> 6 <view class="detail2_name">{{detail.name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> 7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"><span>￥{{detail.price}}</span></view> 8 <view class="detail2_price"><span>￥{{detail.price}}</span></view>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="choose"> 11 <view class="choose">
12 <view class="colour"> 12 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> 13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view> 14 <view class="colour_exp">*黑色 BHL192345</view>
15 <view class="colour2"> 15 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> 16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
17 </view> 17 </view>
18 <hr/> 18 <hr/>
19 </view> 19 </view>
20 <view class="size"> 20 <view class="size">
21 <view class="size1"> 21 <view class="size1">
22 <view class="size1_1">框架尺寸</view> 22 <view class="size1_1">框架尺寸</view>
23 <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> 23 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
24 </view> 24 </view>
25 <view class="size2"> 25 <view class="size2">
26 <view>通用</view> 26 <view>通用</view>
27 <view>定制</view> 27 <view>定制</view>
28 </view> 28 </view>
29 <view class="D3_list"> 29 <view class="D3_list">
30 <view v-for="(item) in parameter" :key="item.key"> 30 <view v-for="(item) in parameter" :key="item.key">
31 <view><image class="D3_image" v-bind:src = "item.img"></image></view> 31 <view><image class="D3_image" v-bind:src = "item.img"></image></view>
32 <view class="D3_list_jDu"> 32 <view class="D3_list_jDu">
33 <!-- uni-sliper插件 --> 33 <!-- uni-sliper插件 -->
34 <c-progress class="c-progress" 34 <!-- <c-progress class="c-progress"
35 :percent="item.percent" 35 :percent="item.percent"
36 :show-slider="false" :width="190" 36 :show-slider="false" :width="190"
37 :standard="item.standard_l" 37 :standard="item.standard_l"
38 :stand_width="item.slength" 38 :stand_width="item.slength"
39 progressColor="#FF6B4A" 39 progressColor="#FF6B4A"
40 /> 40 /> -->
41 <view>{{item.standard}}</view> 41 <view>{{item.standard}}</view>
42 </view> 42 </view>
43 </view> 43 </view>
44 <hr/> 44 <hr/>
45 </view> 45 </view>
46 </view> 46 </view>
47 <view class="part"> 47 <view class="part">
48 <view class="size1"> 48 <view class="size1">
49 <view class="size1_1">配件</view> 49 <view class="size1_1">配件</view>
50 <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> 50 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
51 </view> 51 </view>
52 <view class="colour_exp">*0290</view> 52 <view class="colour_exp">*0290</view>
53 <view class="part_som"> 53 <view class="part_som">
54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> 54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
55 </view> 55 </view>
56 </view> 56 </view>
57 </view> 57 </view>
58 <view class="buy"> 58 <view class="buy">
59 <view class="buy1">选了镜框，想选镜片？</view> 59 <view class="buy1">选了镜框，想选镜片？</view>
60 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 60 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
61 <view class="buy3"> 61 <view class="buy3">
62 <view class="buy3_1">暂时不选</view> 62 <view class="buy3_1">暂时不选</view>
63 <view class="buy3_2">立即去选</view> 63 <view class="buy3_2">立即去选</view>
64 </view> 64 </view>
65 </view> 65 </view>
66 <view class="zhanwei"></view> 66 <view class="zhanwei"></view>
67 <view class="button"><view>立即结算</view></view> 67 <view class="button"><view>立即结算</view></view>
68 </view> 68 </view>
69 </template> 69 </template>
70 <script> 70 <script>
71 import CProgress from '../../components/UniSliper/UniSliper' 71 import CProgress from '../../components/UniSliper/UniSliper'
72 import store from '@/store'
72 73
73 export default { 74 export default {
74 components: {
75 CProgress
76 },
77 data(){ 75 data(){
78 return{ 76 return{
79 detail:{ 77 detail:{
80 image:'/static/img/detail/d1.png', 78 image:'/static/img/detail/d1.png',
81 name:'商品名称商品名称商品名称商品名称商品名称', 79 name:'商品名称商品名称商品名称商品名称商品名称',
82 price: 180, 80 price: 180,
83 number: 1, 81 number: 1,
84 }, 82 },
85 //框架颜色 83 //框架颜色
86 colour:[ 84 colour:[
87 {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, 85 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
88 {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, 86 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
89 {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, 87 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
90 {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, 88 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
91 {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, 89 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
92 {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, 90 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
93 {key:6 ,img: '/static/img/detail/Kuang/s7.png'} 91 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
94 ], 92 ],
95 //规格 93 //规格
96 parameter:[ 94 parameter:[
97 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, 95 {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}, 96 {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}, 97 {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}, 98 {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}, 99 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
102 ], 100 ],
103 //配饰 101 //配饰
104 part:[ 102 part:[
105 {key: 0,img:'/static/img/detail/Kuang/g1.png'}, 103 {key: 0,img:'/static/img/detail/Kuang/g1.png'},
106 {key: 1,img:'/static/img/detail/Kuang/g1.png'}, 104 {key: 1,img:'/static/img/detail/Kuang/g1.png'},
107 {key: 2,img:'/static/img/detail/Kuang/g2.png'}, 105 {key: 2,img:'/static/img/detail/Kuang/g2.png'},
108 {key: 3,img:'/static/img/detail/Kuang/g1.png'}, 106 {key: 3,img:'/static/img/detail/Kuang/g1.png'},
109 {key: 4,img:'/static/img/detail/Kuang/g1.png'}, 107 {key: 4,img:'/static/img/detail/Kuang/g1.png'},
110 {key: 5,img:'/static/img/detail/Kuang/g3.png'}, 108 {key: 5,img:'/static/img/detail/Kuang/g3.png'},
111 {key: 6,img:'/static/img/detail/Kuang/g3.png'}, 109 {key: 6,img:'/static/img/detail/Kuang/g3.png'},
112 {key: 7,img:'/static/img/detail/Kuang/g2.png'}, 110 {key: 7,img:'/static/img/detail/Kuang/g2.png'},
113 ], 111 ],
114 } 112 }
115 } 113 },
114
115 components: {
116 detailStandard_k(){
117 console.log(detailStandard_k)
118 return this.$store.state.detailStandard_k.detailStandardList
119 }
120 },
121 onLoad:function(){
122 store.dispatch('detailStandard_k/getList')
123 },
116 } 124 }
117 </script> 125 </script>
118 126
119 <style lang="scss"> 127 <style lang="scss">
120 .container{ 128 .container{
121 min-height: 100vh; 129 min-height: 100vh;
122 background: #F2F2F2; 130 background: #F2F2F2;
123 padding-top: 10px; 131 padding-top: 10px;
124 box-sizing: border-box; 132 box-sizing: border-box;
125 } 133 }
126 hr{ 134 hr{
127 border: none; 135 border: none;
128 height: 1px; 136 height: 1px;
129 background: #F2F2F2; 137 background: #F2F2F2;
130 margin-top: 18px; 138 margin-top: 18px;
131 } 139 }
132 .detail{ 140 .detail{
133 height: 272rpx; 141 height: 272rpx;
134 background: #FFFFFF; 142 background: #FFFFFF;
135 border-radius: 8px; 143 border-radius: 8px;
136 padding: 16px; 144 padding: 16px;
137 box-sizing: border-box; 145 box-sizing: border-box;
138 display: flex; 146 display: flex;
139 justify-content: space-between; 147 justify-content: space-between;
140 align-items: center; 148 align-items: center;
141 } 149 }
142 .detail1{ 150 .detail1{
143 height: 188rpx; 151 height: 188rpx;
144 width: 188rpx; 152 width: 188rpx;
145 image{ 153 image{
146 width: 100%; 154 width: 100%;
147 height: 100%; 155 height: 100%;
148 border-radius: 8px; 156 border-radius: 8px;
149 } 157 }
150 } 158 }
151 .detail2{ 159 .detail2{
152 width: 68%; 160 width: 68%;
153 view{ 161 view{
154 margin-bottom: 8px; 162 margin-bottom: 8px;
155 font-family: PingFangSC-Regular; 163 font-family: PingFangSC-Regular;
156 } 164 }
157 .detail2_name{ 165 .detail2_name{
158 font-size: 14px; 166 font-size: 14px;
159 color: #333333; 167 color: #333333;
160 letter-spacing: -0.26px; 168 letter-spacing: -0.26px;
161 line-height: 18px; 169 line-height: 18px;
162 } 170 }
163 .detail2_tui{ 171 .detail2_tui{
164 font-size: 10px; 172 font-size: 10px;
165 color: #999999; 173 color: #999999;
166 letter-spacing: -0.19px; 174 letter-spacing: -0.19px;
167 span{ 175 span{
168 margin-right: 10px; 176 margin-right: 10px;
169 } 177 }
170 } 178 }
171 .detail2_price{ 179 .detail2_price{
172 font-size: 14px; 180 font-size: 14px;
173 color: #FF6B4A; 181 color: #FF6B4A;
174 letter-spacing: -0.26px; 182 letter-spacing: -0.26px;
175 } 183 }
176 } 184 }
177 .choose{ 185 .choose{
178 background: #FFFFFF; 186 background: #FFFFFF;
179 padding: 16px; 187 padding: 16px;
180 box-sizing: border-box; 188 box-sizing: border-box;
181 margin-top: 10px; 189 margin-top: 10px;
182 border-radius: 8px; 190 border-radius: 8px;
183 .colour1{ 191 .colour1{
184 span{ 192 span{
185 font-family: PingFangSC-Medium; 193 font-family: PingFangSC-Medium;
186 font-size: 16px; 194 font-size: 16px;
187 color: #333333; 195 color: #333333;
188 letter-spacing: -0.3px; 196 letter-spacing: -0.3px;
189 text-align: justify; 197 text-align: justify;
190 line-height: 24px; 198 line-height: 24px;
191 font-weight: bold; 199 font-weight: bold;
192 } 200 }
193 image{ 201 image{
194 float: right; 202 float: right;
195 width: 40rpx; 203 width: 40rpx;
196 height: 36rpx; 204 height: 36rpx;
197 } 205 }
198 } 206 }
199 .colour_exp{ 207 .colour_exp{
200 font-family: PingFangSC-Regular; 208 font-family: PingFangSC-Regular;
201 font-size: 12px; 209 font-size: 12px;
202 color: #666666; 210 color: #666666;
203 letter-spacing: 0; 211 letter-spacing: 0;
204 margin-top: 10px; 212 margin-top: 10px;
205 margin-bottom: 10px; 213 margin-bottom: 10px;
206 } 214 }
207 .colour2{ 215 .colour2{
208 display: grid; 216 display: grid;
209 grid-template-columns: repeat(5, 17%); 217 grid-template-columns: repeat(5, 17%);
210 justify-content: space-between ; 218 justify-content: space-between ;
211 grid-row-gap: 10px; 219 grid-row-gap: 10px;
212 margin-bottom: 14px; 220 margin-bottom: 14px;
213 view{ 221 view{
214 border: 1px solid #F2F2F2; 222 border: 1px solid #F2F2F2;
215 image{ 223 image{
216 width: 100%; 224 width: 100%;
217 height: 100%; 225 height: 100%;
218 } 226 }
219 } 227 }
220 view:hover{ 228 view:hover{
221 border: 1px solid #FF6B4A; 229 border: 1px solid #FF6B4A;
222 } 230 }
223 } 231 }
224 } 232 }
225 .size,.part{ 233 .size,.part{
226 margin-top:14px; 234 margin-top:14px;
227 .size1{ 235 .size1{
228 display: flex; 236 display: flex;
229 justify-content: space-between; 237 justify-content: space-between;
230 margin-bottom: 10px; 238 margin-bottom: 10px;
231 .size1_1{ 239 .size1_1{
232 font-weight: bold; 240 font-weight: bold;
233 font-family: PingFangSC-Medium; 241 font-family: PingFangSC-Medium;
234 font-size: 16px; 242 font-size: 16px;
235 color: #333333; 243 color: #333333;
236 letter-spacing: -0.3px; 244 letter-spacing: -0.3px;
237 line-height: 24px; 245 line-height: 24px;
238 } 246 }
239 view{ 247 view{
240 span{ 248 span{
241 font-family: PingFangSC-Regular; 249 font-family: PingFangSC-Regular;
242 font-size: 14px; 250 font-size: 14px;
243 color: #FF6B4A; 251 color: #FF6B4A;
244 letter-spacing: -0.26px; 252 letter-spacing: -0.26px;
245 margin-right: 12px; 253 margin-right: 12px;
246 } 254 }
247 image{ 255 image{
248 width: 40rpx; 256 width: 40rpx;
249 height: 36rpx; 257 height: 36rpx;
250 } 258 }
251 } 259 }
252 } 260 }
253 .size2{ 261 .size2{
254 view{ 262 view{
255 display: inline-flex; 263 display: inline-flex;
256 align-items: center; 264 align-items: center;
257 justify-content: center; //字体居中 265 justify-content: center; //字体居中
258 margin-right: 12px; 266 margin-right: 12px;
259 margin-bottom: 20px; 267 margin-bottom: 20px;
260 width: 136rpx; 268 width: 136rpx;
261 height: 60rpx; 269 height: 60rpx;
262 background: #F2F2F2; 270 background: #F2F2F2;
263 border-radius: 2px; 271 border-radius: 2px;
264 font-family: PingFangSC-Regular; 272 font-family: PingFangSC-Regular;
265 font-size: 12px; 273 font-size: 12px;
266 color: #666666; 274 color: #666666;
267 } 275 }
268 view:hover{ 276 view:hover{
269 color: #FF6B4A; 277 color: #FF6B4A;
270 background: rgba(255,107,74,0.15); 278 background: rgba(255,107,74,0.15);
271 } 279 }
272 } 280 }
273 .D3_list{ 281 .D3_list{
274 margin-bottom: 4px; 282 margin-bottom: 4px;
275 } 283 }
276 .D3_list>view{ 284 .D3_list>view{
277 display: flex; 285 display: flex;
278 align-content: center; 286 align-content: center;
279 margin-bottom: 10px; 287 margin-bottom: 10px;
280 view{ 288 view{
281 margin-right: 10px; 289 margin-right: 10px;
282 } 290 }
283 } 291 }
284 .D3_list image{ 292 .D3_list image{
285 width: 50px; 293 width: 50px;
286 height: 25px; 294 height: 25px;
287 margin-right: 6px; 295 margin-right: 6px;
288 } 296 }
289 .D3_list span{ 297 .D3_list span{
290 margin-left: 6px; 298 margin-left: 6px;
291 margin-right: 5px; 299 margin-right: 5px;
292 font-family: 'PingFangSC-Regular'; 300 font-family: 'PingFangSC-Regular';
293 } 301 }
294 .D3_list_jDu{ 302 .D3_list_jDu{
295 view{ 303 view{
296 font-family: PingFangSC-Regular; 304 font-family: PingFangSC-Regular;
297 font-size: 10px; 305 font-size: 10px;
298 color: #999999; 306 color: #999999;
299 letter-spacing: -0.19px; 307 letter-spacing: -0.19px;
300 } 308 }
301 } 309 }
302 } 310 }
303 .part{ 311 .part{
304 .part_som{ 312 .part_som{
305 display: grid; 313 display: grid;
306 justify-content: space-between; 314 justify-content: space-between;
307 grid-template-columns: repeat(4, 22%); 315 grid-template-columns: repeat(4, 22%);
308 grid-row-gap: 12px; 316 grid-row-gap: 12px;
309 margin-bottom: 14px; 317 margin-bottom: 14px;
310 view{ 318 view{
311 border: 1px solid #F2F2F2; 319 border: 1px solid #F2F2F2;
312 height: 72rpx; 320 height: 72rpx;
313 image{ 321 image{
314 width: 100%; 322 width: 100%;
315 height: 100%; 323 height: 100%;
316 } 324 }
317 } 325 }
318 view:hover{ 326 view:hover{
319 border: 1px solid #FF6B4A; 327 border: 1px solid #FF6B4A;
320 } 328 }
321 } 329 }
322 } 330 }
323 .buy{ 331 .buy{
324 height: 280rpx; 332 height: 280rpx;
325 background: #FFFFFF ; 333 background: #FFFFFF ;
326 margin-top: 10px; 334 margin-top: 10px;
327 border-radius: 8px; 335 border-radius: 8px;
328 padding-top: 20px; 336 padding-top: 20px;
329 box-sizing: border-box; 337 box-sizing: border-box;
330 margin-bottom: 20px; 338 margin-bottom: 20px;
331 } 339 }
332 .buy1{ 340 .buy1{
333 font-family: PingFangSC-Medium; 341 font-family: PingFangSC-Medium;
334 font-size: 16px; 342 font-size: 16px;
335 font-weight: bold; 343 font-weight: bold;
336 color: #333333; 344 color: #333333;
337 text-align: center; 345 text-align: center;
338 } 346 }
339 .buy2{ 347 .buy2{
340 font-family: PingFangSC-Regular; 348 font-family: PingFangSC-Regular;
341 font-size: 12px; 349 font-size: 12px;
342 color: #999999; 350 color: #999999;
343 text-align: center; 351 text-align: center;
344 margin: 10px; 352 margin: 10px;
345 } 353 }
346 .buy3{ 354 .buy3{
347 font-family: PingFangSC-Regular; 355 font-family: PingFangSC-Regular;
348 font-size: 16px; 356 font-size: 16px;
349 display: flex; 357 display: flex;
350 justify-content: center; 358 justify-content: center;
351 margin-top: 14px; 359 margin-top: 14px;
352 view{ 360 view{
353 border-radius: 20px; 361 border-radius: 20px;
354 width: 240rpx; 362 width: 240rpx;
355 height: 80rpx; 363 height: 80rpx;
356 display: flex; 364 display: flex;
357 justify-content: center; 365 justify-content: center;
358 align-items: center; 366 align-items: center;
359 } 367 }
360 .buy3_1{ 368 .buy3_1{
361 margin-right: 20px; 369 margin-right: 20px;
362 background: rgba(255,107,74,0.15); 370 background: rgba(255,107,74,0.15);
363 color: #FF6B4A ; 371 color: #FF6B4A ;
364 } 372 }
365 .buy3_2{ 373 .buy3_2{
366 background: #FF6B4A; 374 background: #FF6B4A;
367 color: #FFFFFF ; 375 color: #FFFFFF ;
368 } 376 }
369 } 377 }
370 .zhanwei{ 378 .zhanwei{
371 background: #F2F2F2; 379 background: #F2F2F2;
372 height: 120rpx; 380 height: 120rpx;
373 } 381 }
374 .button{ 382 .button{
375 position: fixed; 383 position: fixed;
376 bottom: 0; 384 bottom: 0;
377 width:100%; 385 width:100%;
378 height: 112rpx; 386 height: 112rpx;
379 background: #FF6B4A 100%; 387 background: #FF6B4A 100%;
380 view{ 388 view{
381 color: #FFFFFF; 389 color: #FFFFFF;
382 height: 100%; 390 height: 100%;
383 display: flex; 391 display: flex;
384 justify-content: center; 392 justify-content: center;
385 align-items: center; 393 align-items: center;
386 font-family: PingFangSC-Regular; 394 font-family: PingFangSC-Regular;
387 font-size: 16px; 395 font-size: 16px;
src/store/modules/detailStandard_k.js
Diff comments   View file @c4c4f12
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 detailStandardList
6 } = urlAlias
7
8 const state = {
9 list:[],
10 };
11
12 const mutations = {
13 INIT: (state, detailStandardList) => {
14 state.detailStandardList = detailStandardList;
15 },
16 };
17
18 const actions = {
19 getList({ commit }, param){
20 request({
21 detailStandardList,
22 success: (res) => {
23
24 commit('INIT', res.data.data)
25 console,log('success')
26 },
27 fail: (res) => {
28 console.log("detail status === > ", res);
29 },
30 complete: (res) => {
31 console.log("detail compete status === > ", res);
32 },
33 })
34 }
35 }
36
37 export default {
38 namespaced: true,
39 state,
40 mutations,
41 actions,
42 }
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取首页商品列表
3 shopList: '/app/prod/list', 3 shopList: '/app/prod/list',
4 4
5 // 获取首页商品列表 5 // 获取首页商品列表
6 category: '/app/prod/category2', 6 category: '/app/prod/category2',
7 // 获取商品信息 7 // 获取商品信息
8 read: '/app/prod/read', 8 read: '/app/prod/read',
9 9
10 // 首页 10 // 首页
11 shopList: '/app/prod/list', // 获取首页商品列表 11 shopList: '/app/prod/list', // 获取首页商品列表
12 category: '/app/prod/category', // 获取首页商品分类 12 category: '/app/prod/category', // 获取首页商品分类
13 13
14 // 登陆 14 // 登陆
15 login: '/app/glass/getOpenId', // 登陆 15 login: '/app/glass/getOpenId', // 登陆
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息 16 getUserInfo: '/app/glass/userinfo', // 获取用户信息
17 17
18 // 我的订单 18 // 我的订单
19 orderList: '/app/order/list', // 获取订单列表 19 orderList: '/app/order/list', // 获取订单列表
20 20
21 // 购物车 21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表 22 cartList: '/app/cart/list', // 获取购物车列表
23 23
24 // 我的 24 // 我的
25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
26
27 // 镜框选购页
28 detailStandardList: '/app/prod/read', //获取商品的详细信息
29
26 } 30 }
27 31
28 export default urlAlias; 32 export default urlAlias;
29 33