刘文博 / gulu-vue

Download as
Browse Code »

Commit f112b6434a9937ddcf7637e337a98326270767db

Authored by 范牧
1 parent c516ea0510
Exists in master

全面屏适配

Showing 9 changed files with 1337 additions and 1142 deletions   Show diff stats
src/pages/address/addAddress.vue
Diff comments   View file @f112b64
... ... @@ -77,7 +77,9 @@
77 77 </view>
78 78 <button
79 79 form-type="submit"
80   - class="button" v-if="addId">编辑</button>
  80 + class="button"
  81 + v-if="addId"
  82 + >编辑</button>
81 83 <button
82 84 form-type="submit"
83 85 class="button"
... ... @@ -103,7 +105,7 @@ export default {
103 105 name: '',
104 106 mobile: '',
105 107 addDetial: '',
106   - isDefault: 0
  108 + isDefault: 0,
107 109 }
108 110 },
109 111 onLoad (option) {
... ... @@ -111,27 +113,27 @@ export default {
111 113 if (addId) {
112 114 this.addId = addId
113 115 store.dispatch('address/details', {
114   - add_id: addId
  116 + add_id: addId,
115 117 }).then(() => {
116 118 uni.setNavigationBarTitle({
117   - title: '编辑地址'
  119 + title: '编辑地址',
118 120 })
119   - const { name, mobile, sex, add_detail: addDetial, default: isDefault,address } = this.$store.state.address.details
  121 + const { name, mobile, sex, add_detail: addDetial, default: isDefault, address } = this.$store.state.address.details
120 122 console.log('---', this.$store.state.address.details)
121 123 const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label')
122   - console.log(index)
  124 + console.log(index)
123 125 this.cityPickerValueDefault = index.index
124 126 this.name = name
125 127 this.mobile = Number(mobile)
126 128 this.sexIndex = sex
127 129 this.addDetial = addDetial
128 130 this.isDefalutAddress = !!Number(isDefault)
129   - this.pickerText = address
  131 + this.pickerText = address
130 132 })
131 133 }
132 134 },
133 135 components: {
134   - SimpleAddress
  136 + SimpleAddress,
135 137 },
136 138 methods: {
137 139 openAddres () {
... ... @@ -155,28 +157,28 @@ export default {
155 157 if (name === '') {
156 158 uni.showModal({
157 159 content: '请输入姓名',
158   - showCancel: false
  160 + showCancel: false,
159 161 })
160 162 return 0
161 163 }
162 164 if (!(/^1[3456789]\d{9}$/.test(mobile))) {
163 165 uni.showModal({
164 166 content: '请输入正确的手机号',
165   - showCancel: false
  167 + showCancel: false,
166 168 })
167 169 return 0
168 170 }
169 171 if (this.pickerText === '') {
170 172 uni.showModal({
171 173 content: '请选择收货地区',
172   - showCancel: false
  174 + showCancel: false,
173 175 })
174 176 return 0
175 177 }
176 178 if (addDetail === '') {
177 179 uni.showModal({
178 180 content: '请输入收货详细地址',
179   - showCancel: false
  181 + showCancel: false,
180 182 })
181 183 return 0
182 184 }
... ... @@ -196,20 +198,20 @@ export default {
196 198 default: isDefault ? 1 : 0,
197 199 add_detail: addDetail,
198 200 longitude: 1,
199   - latitude: 1
  201 + latitude: 1,
200 202 }
201 203 if (this.addId) {
202 204 params.add_id = this.addId
203 205 }
204 206 store.dispatch('address/edit', params).then(() => {
205   - console.log('fanhui')
  207 + console.log('fanhui')
206 208 uni.navigateBack({
207   - delta: 1
  209 + delta: 1,
208 210 })
209 211 })
210 212 }
211   - }
212   - }
  213 + },
  214 + },
213 215 }
214 216 </script>
215 217  
... ... @@ -253,7 +255,7 @@ export default {
253 255 position: fixed;
254 256 bottom: 0;
255 257 left: 0;
256   - height: 112rpx;
  258 + height: 120rpx;
257 259 width: 100%;
258 260 background: #ff6b4a;
259 261 display: flex;
... ... @@ -262,5 +264,10 @@ export default {
262 264 font-size: 16px;
263 265 color: #ffffff;
264 266 letter-spacing: -0.3px;
  267 + /* iphonex 等安全区设置，底部安全区适配 */
  268 + /* #ifndef APP-NVUE */
  269 + padding-bottom: constant(safe-area-inset-bottom);
  270 + padding-bottom: env(safe-area-inset-bottom);
  271 + /* #endif */
265 272 }
266 273 </style>
... ...
src/pages/address/addressList.vue
Diff comments   View file @f112b64
... ... @@ -224,7 +224,7 @@ export default {
224 224 position: fixed;
225 225 bottom: 0;
226 226 left: 0;
227   - height: 112rpx;
  227 + height: 120rpx;
228 228 width: 100%;
229 229 background-color: #ff6b4a;
230 230 display: flex;
... ... @@ -233,6 +233,11 @@ export default {
233 233 font-size: 16px;
234 234 color: #ffffff;
235 235 letter-spacing: -0.3px;
  236 + /* iphonex 等安全区设置，底部安全区适配 */
  237 + /* #ifndef APP-NVUE */
  238 + padding-bottom: constant(safe-area-inset-bottom);
  239 + padding-bottom: env(safe-area-inset-bottom);
  240 + /* #endif */
236 241 }
237 242 }
238 243 </style>
... ...
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @f112b64
... ... @@ -756,6 +756,11 @@ export default {
756 756 position: fixed;
757 757 bottom: 0;
758 758 z-index: 9999;
  759 + /* iphonex 等安全区设置，底部安全区适配 */
  760 + /* #ifndef APP-NVUE */
  761 + padding-bottom: constant(safe-area-inset-bottom);
  762 + padding-bottom: env(safe-area-inset-bottom);
  763 + /* #endif */
759 764 .footerLeft {
760 765 display: flex;
761 766 justify-content: center;
... ...
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @f112b64
... ... @@ -11,7 +11,7 @@
11 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 12 <text>{{count}}</text>
13 13 <view class="btn" @click="counter(true)">+</view>
14   - </view>
  14 + </view>
15 15 </view>
16 16 </view>
17 17 </view>
... ... @@ -24,14 +24,14 @@
24 24 <view class="colour_exp">*{{navData.colour}}</view>
25 25 <view>
26 26 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
27   - <view
28   - v-for="(items,index) in details.data.skuList"
29   - :key="index"
  27 + <view
  28 + v-for="(items,index) in details.data.skuList"
  29 + :key="index"
30 30 @click="viewChoose(index)"
31 31 class="colour2_view"
32 32 v-bind:class="{'colour2_viewed': chooseNum == index}"
33 33 >
34   - <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  34 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
35 35 </view>
36 36 </view>
37 37 </view>
... ... @@ -42,7 +42,7 @@
42 42 <view class="size1_1">框架尺寸</view>
43 43 <view><image v-bind:src="isNone[1].img"></image></view>
44 44 </view>
45   - <view class="colour">
  45 + <view class="colour">
46 46 <view class="colour_exp">*{{navData.colour}}</view>
47 47 </view>
48 48 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
... ... @@ -54,7 +54,7 @@
54 54 <text>{{details.data.frame_width}}mm</text>
55 55 </view>
56 56 <view>{{parameter[0].standard}}</view>
57   - </view>
  57 + </view>
58 58 </view>
59 59 <view>
60 60 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
... ... @@ -64,7 +64,7 @@
64 64 <view>{{details.data.glass_width}}mm</view>
65 65 </view>
66 66 <view>{{parameter[1].standard}}</view>
67   - </view>
  67 + </view>
68 68 </view>
69 69 <view>
70 70 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
... ... @@ -74,18 +74,18 @@
74 74 <view>{{details.data.glass_height}}mm</view>
75 75 </view>
76 76 <view>{{parameter[2].standard}}</view>
77   - </view>
  77 + </view>
78 78 </view>
79 79 <view>
80 80 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
81 81 <view class="D3_list_jDu">
82   -
  82 +
83 83 <view class="D3_list1">
84 84 <c-progress class="c-progress" :inner_widthProp="160"/>
85 85 <view>{{details.data.nose_width}}mm</view>
86 86 </view>
87 87 <view>{{parameter[3].standard}}</view>
88   - </view>
  88 + </view>
89 89 </view>
90 90 <view>
91 91 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
... ... @@ -95,7 +95,7 @@
95 95 <view>{{details.data.leg_long}}mm</view>
96 96 </view>
97 97 <view>{{parameter[4].standard}}</view>
98   - </view>
  98 + </view>
99 99 </view>
100 100 <hr/>
101 101 </view>
... ... @@ -110,8 +110,8 @@
110 110 </view>
111 111 <view class="colour_exp">*0290</view>
112 112 <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
113   - <view
114   - v-for="(part) in part"
  113 + <view
  114 + v-for="(part) in part"
115 115 :key="part.key"
116 116 v-bind:class="{'size_viewed': part.is_actived}"
117 117 >
... ... @@ -137,108 +137,107 @@ import CProgress from &#39;../../components/UniSliper/UniSliper&#39;
137 137 import store from '@/store'
138 138  
139 139 export default {
140   - components: {
141   - CProgress
142   - },
143   - data(){
144   - return{
145   - count: 1,
146   - // colour: '1.56非球面防蓝光_亚黑色',
147   - chooseNum : '',
148   - isNone:[
149   - {state: false ,img: '/static/img/detail/xiala.png'},
150   - {state: false ,img: '/static/img/detail/xiala.png'},
151   - {state: false ,img: '/static/img/detail/xiala.png'},
152   - {state: false ,img: '/static/img/detail/xiala.png'},
153   - {state: false ,img: '/static/img/detail/xiala.png'},
154   - ],
155   - //传参
156   - navData:{
157   - pid: "26",
158   - p_root_index: "2",
159   - name:'',
160   - price:'',
161   - colour: '1.56非球面防蓝光_亚黑色',
162   - },
  140 + components: {
  141 + CProgress,
  142 + },
  143 + data() {
  144 + return {
  145 + count: 1,
  146 + // colour: '1.56非球面防蓝光_亚黑色',
  147 + chooseNum: '',
  148 + isNone: [
  149 + { state: false, img: '/static/img/detail/xiala.png' },
  150 + { state: false, img: '/static/img/detail/xiala.png' },
  151 + { state: false, img: '/static/img/detail/xiala.png' },
  152 + { state: false, img: '/static/img/detail/xiala.png' },
  153 + { state: false, img: '/static/img/detail/xiala.png' },
  154 + ],
  155 + // 传参
  156 + navData: {
  157 + pid: '26',
  158 + p_root_index: '2',
  159 + name: '',
  160 + price: '',
  161 + colour: '1.56非球面防蓝光_亚黑色',
  162 + },
163 163  
164   - //尺寸
165   - parameter:[
166   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
167   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
168   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
169   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
170   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
171   - ],
172   - //配饰
173   - part:[
174   - {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
175   - {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
176   - {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
177   - {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
178   - {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
179   - {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
180   - {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
181   - {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
182   - ],
183   - }
184   - },
  164 + // 尺寸
  165 + parameter: [
  166 + { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: 139 },
  167 + { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: 51 },
  168 + { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: 45 },
  169 + { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: 19 },
  170 + { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: 138 },
  171 + ],
  172 + // 配饰
  173 + part: [
  174 + { key: 0, img: '/static/img/detail/Kuang/g1.png', is_actived: true },
  175 + { key: 1, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  176 + { key: 2, img: '/static/img/detail/Kuang/g2.png', is_actived: false },
  177 + { key: 3, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  178 + { key: 4, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  179 + { key: 5, img: '/static/img/detail/Kuang/g3.png', is_actived: false },
  180 + { key: 6, img: '/static/img/detail/Kuang/g3.png', is_actived: false },
  181 + { key: 7, img: '/static/img/detail/Kuang/g2.png', is_actived: false },
  182 + ],
  183 + }
  184 + },
185 185  
186   - computed: {
187   - details(){
188   - return this.$store.state.detailStandard_k.list
189   - },
  186 + computed: {
  187 + details() {
  188 + return this.$store.state.detailStandard_k.list
190 189 },
191   - onLoad:function(){
192   - store.dispatch('detailStandard_k/fetch', {
193   - uid: "1",
194   - pid: "26",
195   - p_root_index: "2"
196   - });
197   - // console.log(this.$store.state.detailStandard_k.list+'ssss');
  190 + },
  191 + onLoad: function() {
  192 + store.dispatch('detailStandard_k/fetch', {
  193 + uid: '1',
  194 + pid: '26',
  195 + p_root_index: '2',
  196 + })
  197 + // console.log(this.$store.state.detailStandard_k.list+'ssss');
  198 + },
  199 + methods: {
  200 + counter(isadd) {
  201 + if (isadd) {
  202 + this.count++
  203 + } else {
  204 + this.count <= 1 ? this.disabled = true : this.count--
  205 + }
198 206 },
199   - methods: {
200   - counter(isadd){
201   - if(isadd){
202   - this.count++
203   - }else{
204   - this.count <= 1? this.disabled = true:this.count--
205   - }
206   - },
207   - xialachange(index){
208   - this.isNone[index].state = !this.isNone[index].state;
209   - if(this.isNone[index].state){
210   - this.isNone[index].img = '/static/img/detail/right.png'
211   - }else{
212   - this.isNone[index].img = '/static/img/detail/xiala.png'
213   - }
214   - },
215   - colourChange(index,e){
216   - this.navData.colour = e ; //颜色选择
217   - console.log(index,this.navData.colour);
218   -
219   - },
220   - viewChoose(index,e){
221   - this.chooseNum = index
222   - },
223   - popArgs(){
224   - uni.navigateTo({
225   - url: '../detailsChoiceArgs/detailsChoiceArgs',
226   - success: res => {},
227   - fail: () => {},
228   - complete: () => {}
229   - });
230   - },
231   - //跳转确认订单页及传参
232   - popSure(name,price){
233   - this.navData.name = name;
234   - this.navData.price = price;
235   - var navData = JSON.stringify(this.navData);
236   - uni.navigateTo({
237   - url: '../confirmOrder/confirmOrder?index='+navData,
238   - });
239   - console.log(this.navData)
240   - },
241   - }
  207 + xialachange(index) {
  208 + this.isNone[index].state = !this.isNone[index].state
  209 + if (this.isNone[index].state) {
  210 + this.isNone[index].img = '/static/img/detail/right.png'
  211 + } else {
  212 + this.isNone[index].img = '/static/img/detail/xiala.png'
  213 + }
  214 + },
  215 + colourChange(index, e) {
  216 + this.navData.colour = e // 颜色选择
  217 + console.log(index, this.navData.colour)
  218 + },
  219 + viewChoose(index, e) {
  220 + this.chooseNum = index
  221 + },
  222 + popArgs() {
  223 + uni.navigateTo({
  224 + url: '../detailsChoiceArgs/detailsChoiceArgs',
  225 + success: res => {},
  226 + fail: () => {},
  227 + complete: () => {},
  228 + })
  229 + },
  230 + // 跳转确认订单页及传参
  231 + popSure(name, price) {
  232 + this.navData.name = name
  233 + this.navData.price = price
  234 + var navData = JSON.stringify(this.navData)
  235 + uni.navigateTo({
  236 + url: '../confirmOrder/confirmOrder?index=' + navData,
  237 + })
  238 + console.log(this.navData)
  239 + },
  240 + },
242 241  
243 242 }
244 243 </script>
... ... @@ -286,11 +285,11 @@ hr{
286 285 color: #333333;
287 286 letter-spacing: -0.26px;
288 287 line-height: 18px;
289   - overflow:hidden;
  288 + overflow:hidden;
290 289 text-overflow:ellipsis;
291   - display:-webkit-box;
  290 + display:-webkit-box;
292 291 -webkit-box-orient:vertical;
293   - -webkit-line-clamp:2;
  292 + -webkit-line-clamp:2;
294 293 }
295 294 .detail2_tui{
296 295 font-size: 10px;
... ... @@ -546,6 +545,11 @@ hr{
546 545 width:100%;
547 546 height: 112rpx;
548 547 background: #FF6B4A 100%;
  548 + /* iphonex 等安全区设置，底部安全区适配 */
  549 + /* #ifndef APP-NVUE */
  550 + padding-bottom: constant(safe-area-inset-bottom);
  551 + padding-bottom: env(safe-area-inset-bottom);
  552 + /* #endif */
549 553 view{
550 554 color: #FFFFFF;
551 555 height: 100%;
... ... @@ -556,4 +560,4 @@ hr{
556 560 font-size: 16px;
557 561 }
558 562 }
559   -</style>
560 563 \ No newline at end of file
  564 +</style>
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @f112b64
... ... @@ -12,7 +12,7 @@
12 12 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
13 13 <text>{{count}}</text>
14 14 <view class="btn" @click="counter(true)">+</view>
15   - </view>
  15 + </view>
16 16 </view>
17 17 </view>
18 18 </view>
... ... @@ -25,14 +25,14 @@
25 25 <view class="colour_exp">*{{navData.colour}}</view>
26 26 <view>
27 27 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
28   - <view
29   - v-for="(items,index) in details.data.skuList"
30   - :key="index"
  28 + <view
  29 + v-for="(items,index) in details.data.skuList"
  30 + :key="index"
31 31 @click="viewChoose(index)"
32 32 class="colour2_view"
33 33 v-bind:class="{'colour2_viewed': chooseNum == index}"
34 34 >
35   - <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  35 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
36 36 </view>
37 37 </view>
38 38 </view>
... ... @@ -46,12 +46,12 @@
46 46 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
47 47 <view v-bind:class="{'colour2_none' : isNone[1].state}">
48 48 <view class="jp_colour2">
49   - <view
50   - v-for="(items,index) in jp_colour"
51   - :key="index"
  49 + <view
  50 + v-for="(items,index) in jp_colour"
  51 + :key="index"
52 52 class="jp_colour2_view"
53 53 >
54   - <image v-bind:src="items.img"></image>
  54 + <image v-bind:src="items.img"></image>
55 55 </view>
56 56 </view>
57 57 </view>
... ... @@ -66,11 +66,11 @@
66 66 <view>
67 67 <view class="colour_exp">*{{navData.split}}</view>
68 68 <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}">
69   - <view
70   - v-for="(items,index) in details.data.attrList[0].attr"
71   - :key="index"
  69 + <view
  70 + v-for="(items,index) in details.data.attrList[0].attr"
  71 + :key="index"
72 72 >
73   - <view
  73 + <view
74 74 class="split_colour2"
75 75 @click="splitChoose(index,items.name)"
76 76 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
... ... @@ -85,7 +85,7 @@
85 85 <view class="size1_1">框架尺寸</view>
86 86 <view><image v-bind:src="isNone[3].img"></image></view>
87 87 </view>
88   - <view class="colour">
  88 + <view class="colour">
89 89 <view class="colour_exp">*{{navData.colour}}</view>
90 90 </view>
91 91 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}">
... ... @@ -97,7 +97,7 @@
97 97 <text>{{details.data.frame_width}}mm</text>
98 98 </view>
99 99 <view>{{parameter[0].standard}}</view>
100   - </view>
  100 + </view>
101 101 </view>
102 102 <view>
103 103 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
... ... @@ -107,7 +107,7 @@
107 107 <view>{{details.data.glass_width}}mm</view>
108 108 </view>
109 109 <view>{{parameter[1].standard}}</view>
110   - </view>
  110 + </view>
111 111 </view>
112 112 <view>
113 113 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
... ... @@ -117,18 +117,18 @@
117 117 <view>{{details.data.glass_height}}mm</view>
118 118 </view>
119 119 <view>{{parameter[2].standard}}</view>
120   - </view>
  120 + </view>
121 121 </view>
122 122 <view>
123 123 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
124 124 <view class="D3_list_jDu">
125   -
  125 +
126 126 <view class="D3_list1">
127 127 <c-progress class="c-progress" :inner_widthProp="160"/>
128 128 <view>{{details.data.nose_width}}mm</view>
129 129 </view>
130 130 <view>{{parameter[3].standard}}</view>
131   - </view>
  131 + </view>
132 132 </view>
133 133 <view>
134 134 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
... ... @@ -138,7 +138,7 @@
138 138 <view>{{details.data.leg_long}}mm</view>
139 139 </view>
140 140 <view>{{parameter[4].standard}}</view>
141   - </view>
  141 + </view>
142 142 </view>
143 143 </view>
144 144 <hr/>
... ... @@ -150,8 +150,8 @@
150 150 </view>
151 151 <view class="colour_exp">*0290</view>
152 152 <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}">
153   - <view
154   - v-for="(part) in part"
  153 + <view
  154 + v-for="(part) in part"
155 155 :key="part.key"
156 156 v-bind:class="{'size_viewed': part.is_actived}"
157 157 >
... ... @@ -271,8 +271,8 @@
271 271 <text>确认以上输入信息来源于我的验光数据!</text>
272 272 </view>
273 273 </view>
274   -
275   - </template>
  274 +
  275 + </template>
276 276 <view class="zhanwei"></view>
277 277 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
278 278 </view>
... ... @@ -288,7 +288,7 @@
288 288 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
289 289 <text>{{count}}</text>
290 290 <view class="btn" @click="counter(true)">+</view>
291   - </view>
  291 + </view>
292 292 </view>
293 293 </view>
294 294 </view>
... ... @@ -301,14 +301,14 @@
301 301 <view class="colour_exp">*{{navData.colour}}</view>
302 302 <view>
303 303 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
304   - <view
305   - v-for="(items,index) in details.data.skuList"
306   - :key="index"
  304 + <view
  305 + v-for="(items,index) in details.data.skuList"
  306 + :key="index"
307 307 @click="viewChoose(index)"
308 308 class="colour2_view"
309 309 v-bind:class="{'colour2_viewed': chooseNum == index}"
310 310 >
311   - <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  311 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
312 312 </view>
313 313 </view>
314 314 </view>
... ... @@ -319,7 +319,7 @@
319 319 <view class="size1_1">框架尺寸</view>
320 320 <view><image v-bind:src="isNone[1].img"></image></view>
321 321 </view>
322   - <view class="colour">
  322 + <view class="colour">
323 323 <view class="colour_exp">*{{navData.colour}}</view>
324 324 </view>
325 325 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
... ... @@ -331,7 +331,7 @@
331 331 <text>{{details.data.frame_width}}mm</text>
332 332 </view>
333 333 <view>{{parameter[0].standard}}</view>
334   - </view>
  334 + </view>
335 335 </view>
336 336 <view>
337 337 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
... ... @@ -341,7 +341,7 @@
341 341 <view>{{details.data.glass_width}}mm</view>
342 342 </view>
343 343 <view>{{parameter[1].standard}}</view>
344   - </view>
  344 + </view>
345 345 </view>
346 346 <view>
347 347 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
... ... @@ -351,18 +351,18 @@
351 351 <view>{{details.data.glass_height}}mm</view>
352 352 </view>
353 353 <view>{{parameter[2].standard}}</view>
354   - </view>
  354 + </view>
355 355 </view>
356 356 <view>
357 357 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
358 358 <view class="D3_list_jDu">
359   -
  359 +
360 360 <view class="D3_list1">
361 361 <c-progress class="c-progress" :inner_widthProp="160"/>
362 362 <view>{{details.data.nose_width}}mm</view>
363 363 </view>
364 364 <view>{{parameter[3].standard}}</view>
365   - </view>
  365 + </view>
366 366 </view>
367 367 <view>
368 368 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
... ... @@ -372,7 +372,7 @@
372 372 <view>{{details.data.leg_long}}mm</view>
373 373 </view>
374 374 <view>{{parameter[4].standard}}</view>
375   - </view>
  375 + </view>
376 376 </view>
377 377 <hr/>
378 378 </view>
... ... @@ -387,8 +387,8 @@
387 387 </view>
388 388 <view class="colour_exp">*0290</view>
389 389 <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
390   - <view
391   - v-for="(part) in part"
  390 + <view
  391 + v-for="(part) in part"
392 392 :key="part.key"
393 393 v-bind:class="{'size_viewed': part.is_actived}"
394 394 >
... ... @@ -415,182 +415,181 @@ import CProgress from &#39;../../components/UniSliper/UniSliper&#39;
415 415 import store from '@/store'
416 416  
417 417 export default {
418   - components: {
419   - CProgress
  418 + components: {
  419 + CProgress,
  420 + },
  421 + data() {
  422 + return {
  423 + type: 2,
  424 + count: 1,
  425 + chooseNum: '',
  426 + isSplit: '',
  427 + isNone: [
  428 + { state: false, img: '/static/img/detail/xiala.png' },
  429 + { state: false, img: '/static/img/detail/xiala.png' },
  430 + { state: false, img: '/static/img/detail/xiala.png' },
  431 + { state: false, img: '/static/img/detail/xiala.png' },
  432 + { state: false, img: '/static/img/detail/xiala.png' },
  433 + ],
  434 +
  435 + // 传参
  436 + navData: {
  437 + pid: '26',
  438 + p_root_index: '4',
  439 + name: '',
  440 + price: '',
  441 + type: '',
  442 + split: '1.56非球面防蓝光',
  443 + colour: '1.56非球面防蓝光_亚黑色',
  444 + },
  445 +
  446 + // 尺寸
  447 + parameter: [
  448 + { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: 139 },
  449 + { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: 51 },
  450 + { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: 45 },
  451 + { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: 19 },
  452 + { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: 138 },
  453 + ],
  454 + // 镜片颜色
  455 + jp_colour: [
  456 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  457 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  458 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  459 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  460 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  461 + { img: '/static/img/detail/Kuang/sun_jp.png' },
  462 + ],
  463 + // 配饰
  464 + part: [
  465 + { key: 0, img: '/static/img/detail/Kuang/g1.png', is_actived: true },
  466 + { key: 1, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  467 + { key: 2, img: '/static/img/detail/Kuang/g2.png', is_actived: false },
  468 + { key: 3, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  469 + { key: 4, img: '/static/img/detail/Kuang/g1.png', is_actived: false },
  470 + { key: 5, img: '/static/img/detail/Kuang/g3.png', is_actived: false },
  471 + { key: 6, img: '/static/img/detail/Kuang/g3.png', is_actived: false },
  472 + { key: 7, img: '/static/img/detail/Kuang/g2.png', is_actived: false },
  473 + ],
  474 + opIsOpen: true,
  475 + tablist: {
  476 + // read: true,
  477 + // seeLong: false,
  478 + confirm: false,
  479 + },
  480 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  481 + // 度数相关数据
  482 + pickerInfoList: [
  483 + { 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 },
  484 + { 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 },
  485 + { 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 },
  486 + { 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 },
  487 + { 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 },
  488 + ],
  489 + }
  490 + },
  491 +
  492 + computed: {
  493 + details() {
  494 + return this.$store.state.detailStandard_k.list
  495 + },
  496 + },
  497 + onLoad: function() {
  498 + store.dispatch('detailStandard_k/fetch', {
  499 + uid: '1',
  500 + pid: '26',
  501 + p_root_index: '4',
  502 + })
  503 + },
  504 + methods: {
  505 + counter(isadd) {
  506 + if (isadd) {
  507 + this.count++
  508 + } else {
  509 + this.count <= 1 ? this.disabled = true : this.count--
  510 + }
  511 + },
  512 + xialachange(index) {
  513 + this.isNone[index].state = !this.isNone[index].state
  514 + if (this.isNone[index].state) {
  515 + this.isNone[index].img = '/static/img/detail/right.png'
  516 + } else {
  517 + this.isNone[index].img = '/static/img/detail/xiala.png'
  518 + }
  519 + },
  520 + colourChange(index, e) {
  521 + this.navData.colour = e // 颜色选择
  522 + },
  523 + viewChoose(index) {
  524 + this.chooseNum = index
  525 + },
  526 + // 折射率选择
  527 + splitChoose(index, e) {
  528 + this.isSplit = index
  529 + this.navData.split = e
  530 + },
  531 + // 跳转镜片选购页
  532 + popArgs() {
  533 + uni.navigateTo({
  534 + url: '../detailsChoiceArgs/detailsChoiceArgs',
  535 + success: res => {},
  536 + fail: () => {},
  537 + complete: () => {},
  538 + })
  539 + },
  540 + // 跳转确认订单页及传参
  541 + popSure(name, price) {
  542 + this.navData.name = name
  543 + this.navData.price = price
  544 + this.navData.type = this.type
  545 + var navData = JSON.stringify(this.navData)
  546 + uni.navigateTo({
  547 + url: '../confirmOrder/confirmOrder?index=' + navData,
  548 + })
  549 + console.log(this.navData)
  550 + },
  551 + // 验光表
  552 + changeConfirm() {
  553 + this.tablist.confirm = !this.tablist.confirm
  554 + },
  555 + bindPickerChange01: function(e) {
  556 + this.pickerInfoList[0].nameIndex1 = e.target.value
  557 + },
  558 + bindPickerChange02: function(e) {
  559 + this.pickerInfoList[0].nameIndex2 = e.target.value
420 560 },
421   - data(){
422   - return{
423   - type: 2,
424   - count: 1,
425   - chooseNum : '',
426   - isSplit: '' ,
427   - isNone:[
428   - {state: false ,img: '/static/img/detail/xiala.png'},
429   - {state: false ,img: '/static/img/detail/xiala.png'},
430   - {state: false ,img: '/static/img/detail/xiala.png'},
431   - {state: false ,img: '/static/img/detail/xiala.png'},
432   - {state: false ,img: '/static/img/detail/xiala.png'},
433   - ],
434 561  
435   - //传参
436   - navData:{
437   - pid: "26",
438   - p_root_index: "4",
439   - name:'',
440   - price:'',
441   - type:'',
442   - split: '1.56非球面防蓝光',
443   - colour: '1.56非球面防蓝光_亚黑色',
444   - },
  562 + bindPickerChange11: function(e) {
  563 + this.pickerInfoList[1].nameIndex1 = e.target.value
  564 + },
  565 + bindPickerChange12: function(e) {
  566 + this.pickerInfoList[1].nameIndex2 = e.target.value
  567 + },
445 568  
446   - //尺寸
447   - parameter:[
448   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
449   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
450   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
451   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
452   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
453   - ],
454   - //镜片颜色
455   - jp_colour:[
456   - {img:'/static/img/detail/Kuang/sun_jp.png'},
457   - {img:'/static/img/detail/Kuang/sun_jp.png'},
458   - {img:'/static/img/detail/Kuang/sun_jp.png'},
459   - {img:'/static/img/detail/Kuang/sun_jp.png'},
460   - {img:'/static/img/detail/Kuang/sun_jp.png'},
461   - {img:'/static/img/detail/Kuang/sun_jp.png'}
462   - ],
463   - //配饰
464   - part:[
465   - {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
466   - {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
467   - {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
468   - {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
469   - {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
470   - {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
471   - {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
472   - {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
473   - ],
474   - opIsOpen:true,
475   - tablist: {
476   - // read: true,
477   - // seeLong: false,
478   - confirm: false
479   - },
480   - tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
481   - // 度数相关数据
482   - pickerInfoList:[
483   - {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},
484   - {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},
485   - {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},
486   - {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},
487   - {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}
488   - ],
489   - }
  569 + bindPickerChange21: function(e) {
  570 + this.pickerInfoList[2].nameIndex1 = e.target.value
  571 + },
  572 + bindPickerChange22: function(e) {
  573 + this.pickerInfoList[2].nameIndex2 = e.target.value
490 574 },
491 575  
492   - computed: {
493   - details(){
494   - return this.$store.state.detailStandard_k.list
495   - },
  576 + bindPickerChange31: function(e) {
  577 + this.pickerInfoList[3].nameIndex1 = e.target.value
496 578 },
497   - onLoad:function(){
498   - store.dispatch('detailStandard_k/fetch', {
499   - uid: "1",
500   - pid: "26",
501   - p_root_index: "4"
502   - });
  579 + bindPickerChange32: function(e) {
  580 + this.pickerInfoList[3].nameIndex2 = e.target.value
503 581 },
504   - methods: {
505   - counter(isadd){
506   - if(isadd){
507   - this.count++
508   - }else{
509   - this.count <= 1? this.disabled = true:this.count--
510   - }
511   - },
512   - xialachange(index){
513   - this.isNone[index].state = !this.isNone[index].state;
514   - if(this.isNone[index].state){
515   - this.isNone[index].img = '/static/img/detail/right.png'
516   - }else{
517   - this.isNone[index].img = '/static/img/detail/xiala.png'
518   - }
519   - },
520   - colourChange(index,e){
521   - this.navData.colour = e ; //颜色选择
522 582  
523   - },
524   - viewChoose(index){
525   - this.chooseNum = index
526   - },
527   - //折射率选择
528   - splitChoose(index,e){
529   - this.isSplit = index
530   - this.navData.split = e
531   - },
532   - //跳转镜片选购页
533   - popArgs(){
534   - uni.navigateTo({
535   - url: '../detailsChoiceArgs/detailsChoiceArgs',
536   - success: res => {},
537   - fail: () => {},
538   - complete: () => {}
539   - });
540   - },
541   - //跳转确认订单页及传参
542   - popSure(name,price){
543   - this.navData.name = name;
544   - this.navData.price = price;
545   - this.navData.type = this.type;
546   - var navData = JSON.stringify(this.navData);
547   - uni.navigateTo({
548   - url: '../confirmOrder/confirmOrder?index='+navData,
549   - });
550   - console.log(this.navData)
551   - },
552   - //验光表
553   - changeConfirm() {
554   - this.tablist.confirm = !this.tablist.confirm
555   - },
556   - bindPickerChange01: function(e) {
557   - this.pickerInfoList[0].nameIndex1 = e.target.value
558   - },
559   - bindPickerChange02: function(e) {
560   - this.pickerInfoList[0].nameIndex2 = e.target.value
561   - },
562   -
563   - bindPickerChange11: function(e) {
564   - this.pickerInfoList[1].nameIndex1 = e.target.value
565   - },
566   - bindPickerChange12: function(e) {
567   - this.pickerInfoList[1].nameIndex2 = e.target.value
568   - },
569   -
570   - bindPickerChange21: function(e) {
571   - this.pickerInfoList[2].nameIndex1 = e.target.value
572   - },
573   - bindPickerChange22: function(e) {
574   - this.pickerInfoList[2].nameIndex2 = e.target.value
575   - },
576   -
577   - bindPickerChange31: function(e) {
578   - this.pickerInfoList[3].nameIndex1 = e.target.value
579   - },
580   - bindPickerChange32: function(e) {
581   - this.pickerInfoList[3].nameIndex2 = e.target.value
582   - },
583   -
584   - bindPickerChange41: function(e) {
585   - this.pickerInfoList[4].nameIndex1 = e.target.value
586   - },
587   - bindPickerChange42: function(e) {
588   - this.pickerInfoList[4].nameIndex2 = e.target.value
589   - },
  583 + bindPickerChange41: function(e) {
  584 + this.pickerInfoList[4].nameIndex1 = e.target.value
  585 + },
  586 + bindPickerChange42: function(e) {
  587 + this.pickerInfoList[4].nameIndex2 = e.target.value
  588 + },
590 589 bindPickerChange43: function(e) {
591   - this.pickerInfoList[4].nameIndex3 = e.target.value
  590 + this.pickerInfoList[4].nameIndex3 = e.target.value
592 591 },
593   - }
  592 + },
594 593  
595 594 }
596 595 </script>
... ... @@ -639,11 +638,11 @@ hr{
639 638 color: #333333;
640 639 letter-spacing: -0.26px;
641 640 line-height: 18px;
642   - overflow:hidden;
  641 + overflow:hidden;
643 642 text-overflow:ellipsis;
644   - display:-webkit-box;
  643 + display:-webkit-box;
645 644 -webkit-box-orient:vertical;
646   - -webkit-line-clamp:2;
  645 + -webkit-line-clamp:2;
647 646 }
648 647 .detail2_tui{
649 648 font-size: 10px;
... ... @@ -745,7 +744,7 @@ hr{
745 744 justify-content: start ;
746 745 grid-column-gap: 10px;
747 746 grid-row-gap: 10px;
748   - margin-bottom: 14px;
  747 + margin-bottom: 14px;
749 748 .jp_colour2_view{
750 749 border: 1px solid #F2F2F2;
751 750 image{
... ... @@ -950,7 +949,7 @@ hr{
950 949 padding-top:20px;
951 950 padding-bottom:20px;
952 951 box-sizing: border-box;
953   -
  952 +
954 953 .p1 {
955 954 font-size: 16px;
956 955 color: #333333;
... ... @@ -1013,8 +1012,7 @@ hr{
1013 1012 text-align: justify;
1014 1013 line-height: 24px;
1015 1014 }
1016   -
1017   -
  1015 +
1018 1016 }
1019 1017 .p13 {
1020 1018 font-size: 10px;
... ... @@ -1036,7 +1034,7 @@ hr{
1036 1034 width: 124rpx;
1037 1035 border-bottom: 1px solid #CFCFCF;
1038 1036 }
1039   -
  1037 +
1040 1038 }
1041 1039 }
1042 1040 }
... ... @@ -1046,6 +1044,12 @@ hr{
1046 1044 width:100%;
1047 1045 height: 112rpx;
1048 1046 background: #FF6B4A 100%;
  1047 +
  1048 + /* iphonex 等安全区设置，底部安全区适配 */
  1049 + /* #ifndef APP-NVUE */
  1050 + padding-bottom: constant(safe-area-inset-bottom);
  1051 + padding-bottom: env(safe-area-inset-bottom);
  1052 + /* #endif */
1049 1053 view{
1050 1054 color: #FFFFFF;
1051 1055 height: 100%;
... ... @@ -1056,4 +1060,4 @@ hr{
1056 1060 font-size: 16px;
1057 1061 }
1058 1062 }
1059   -</style>
1060 1063 \ No newline at end of file
  1064 +</style>
... ...
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @f112b64
1 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   - <view class="opCollapse">
20   - <!-- <view class="head">
  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
  12 + class="btn"
  13 + disabled="this.disabled"
  14 + @click="counter(false)"
  15 + >-</view>
  16 + <text>{{count}}</text>
  17 + <view
  18 + class="btn"
  19 + @click="counter(true)"
  20 + >+</view>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + </view>
  25 + <view class="goods-data">
  26 + <view class="opCollapse">
  27 + <!-- <view class="head">
21 28 <view v-if="!opIsOpen">填写验光数据</view>
22 29 <view v-else></view>
23 30 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
24   - <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
  31 + <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
25 32 </view> -->
26   - <view class="body">
27   - <template v-if="opIsOpen">
28   - <view class="goods-form">
29   - <view class="data-title">
30   - <image src="../../static/icon-data.png" ></image>
31   - <text class="p1">填写验光数据</text>
32   - </view>
  33 + <view class="body">
  34 + <template v-if="opIsOpen">
  35 + <view class="goods-form">
  36 + <view class="data-title">
  37 + <image src="../../static/icon-data.png"></image>
  38 + <text class="p1">填写验光数据</text>
  39 + </view>
33 40 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
34   - <view class="picker" >
  41 + <view class="picker">
35 42 <view class="picker-choice">
36 43 <view class="choice-left">
37 44 <text class="p11">验光单取名:</text>
38 45 </view>
39   - <input class="choice-name uni-input" placeholder="下系" />
  46 + <input
  47 + class="choice-name uni-input"
  48 + placeholder="下系"
  49 + />
40 50 </view>
41 51 </view>
42   - <view class="picker" >
43   - <view class="picker-choice">
44   - <view class="choice-left">
45   - <text class="p11">{{pickerInfoList[0].nameC}}</text>
46   - <text class="p12">{{pickerInfoList[0].nameE}}</text>
47   - </view>
48   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
49   - <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
50   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
51   - <image src="../../static/detail-tabicon.png" ></image>
52   - </picker>
53   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
54   - <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
55   - <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
56   - <image src="../../static/detail-tabicon.png" ></image>
57   - </picker>
  52 + <view class="picker">
  53 + <view class="picker-choice">
  54 + <view class="choice-left">
  55 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  56 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
58 57 </view>
  58 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  59 + <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
  60 + <picker
  61 + @change="bindPickerChange01"
  62 + :value="pickerInfoList[0].nameIndex1"
  63 + :range="pickerInfoList[0].nameArray1"
  64 + >
  65 + <image src="../../static/detail-tabicon.png"></image>
  66 + </picker>
  67 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  68 + <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  69 + <picker
  70 + @change="bindPickerChange02"
  71 + :value="pickerInfoList[0].nameIndex2"
  72 + :range="pickerInfoList[0].nameArray2"
  73 + >
  74 + <image src="../../static/detail-tabicon.png"></image>
  75 + </picker>
  76 + </view>
59 77 </view>
60   - <view class="picker" >
61   - <view class="picker-choice">
62   - <view class="choice-left">
63   - <text class="p11">{{pickerInfoList[1].nameC}}</text>
64   - <text class="p12">{{pickerInfoList[1].nameE}}</text>
65   - </view>
66   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
67   - <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
68   - <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
69   - <image src="../../static/detail-tabicon.png" ></image>
70   - </picker>
71   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
72   - <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
73   - <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
74   - <image src="../../static/detail-tabicon.png" ></image>
75   - </picker>
  78 + <view class="picker">
  79 + <view class="picker-choice">
  80 + <view class="choice-left">
  81 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  82 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
76 83 </view>
  84 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  85 + <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  86 + <picker
  87 + @change="bindPickerChange11"
  88 + :value="pickerInfoList[1].nameIndex1"
  89 + :range="pickerInfoList[1].nameArray1"
  90 + >
  91 + <image src="../../static/detail-tabicon.png"></image>
  92 + </picker>
  93 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  94 + <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  95 + <picker
  96 + @change="bindPickerChange12"
  97 + :value="pickerInfoList[1].nameIndex2"
  98 + :range="pickerInfoList[1].nameArray2"
  99 + >
  100 + <image src="../../static/detail-tabicon.png"></image>
  101 + </picker>
  102 + </view>
77 103 </view>
78   - <view class="picker" >
79   - <view class="picker-choice">
80   - <view class="choice-left">
81   - <text class="p11">{{pickerInfoList[2].nameC}}</text>
82   - <text class="p12">{{pickerInfoList[2].nameE}}</text>
83   - </view>
84   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
85   - <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
86   - <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
87   - <image src="../../static/detail-tabicon.png" ></image>
88   - </picker>
89   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
90   - <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
91   - <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
92   - <image src="../../static/detail-tabicon.png" ></image>
93   - </picker>
  104 + <view class="picker">
  105 + <view class="picker-choice">
  106 + <view class="choice-left">
  107 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  108 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
94 109 </view>
  110 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  111 + <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
  112 + <picker
  113 + @change="bindPickerChange21"
  114 + :value="pickerInfoList[2].nameIndex1"
  115 + :range="pickerInfoList[2].nameArray1"
  116 + >
  117 + <image src="../../static/detail-tabicon.png"></image>
  118 + </picker>
  119 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  120 + <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  121 + <picker
  122 + @change="bindPickerChange22"
  123 + :value="pickerInfoList[2].nameIndex2"
  124 + :range="pickerInfoList[2].nameArray2"
  125 + >
  126 + <image src="../../static/detail-tabicon.png"></image>
  127 + </picker>
  128 + </view>
95 129 </view>
96   - <view class="picker" >
97   - <view class="picker-choice">
98   - <view class="choice-left">
99   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
100   - <text class="p12">{{pickerInfoList[3].nameE}}</text>
101   - </view>
102   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
103   - <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
104   - <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
105   - <image src="../../static/detail-tabicon.png" ></image>
106   - </picker>
107   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
108   - <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
109   - <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
110   - <image src="../../static/detail-tabicon.png" ></image>
111   - </picker>
  130 + <view class="picker">
  131 + <view class="picker-choice">
  132 + <view class="choice-left">
  133 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  134 + <text class="p12">{{pickerInfoList[3].nameE}}</text>
112 135 </view>
  136 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  137 + <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
  138 + <picker
  139 + @change="bindPickerChange31"
  140 + :value="pickerInfoList[3].nameIndex1"
  141 + :range="pickerInfoList[3].nameArray1"
  142 + >
  143 + <image src="../../static/detail-tabicon.png"></image>
  144 + </picker>
  145 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  146 + <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
  147 + <picker
  148 + @change="bindPickerChange32"
  149 + :value="pickerInfoList[3].nameIndex2"
  150 + :range="pickerInfoList[3].nameArray2"
  151 + >
  152 + <image src="../../static/detail-tabicon.png"></image>
  153 + </picker>
  154 + </view>
113 155 </view>
114   - <view class="picker" >
115   - <view class="picker-choice">
116   - <view class="choice-left">
117   - <text class="p11">{{pickerInfoList[4].nameC}}</text>
118   - </view>
119   - <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
120   - <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
121   - <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
122   - <image src="../../static/detail-tabicon.png" ></image>
123   - </picker>
124   - <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
125   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
126   - <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
127   - <image src="../../static/detail-tabicon.png" ></image>
128   - </picker>
129   - <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
130   - <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
131   - <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
132   - <image src="../../static/detail-tabicon.png" ></image>
133   - </picker>
  156 + <view class="picker">
  157 + <view class="picker-choice">
  158 + <view class="choice-left">
  159 + <text class="p11">{{pickerInfoList[4].nameC}}</text>
134 160 </view>
  161 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  162 + <text
  163 + class="p14"
  164 + style="width: 34px;"
  165 + >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
  166 + <picker
  167 + @change="bindPickerChange41"
  168 + :value="pickerInfoList[4].nameIndex1"
  169 + :range="pickerInfoList[4].nameArray1"
  170 + >
  171 + <image src="../../static/detail-tabicon.png"></image>
  172 + </picker>
  173 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  174 + <text
  175 + class="p14"
  176 + style="width: 30px;"
  177 + >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
  178 + <picker
  179 + @change="bindPickerChange42"
  180 + :value="pickerInfoList[4].nameIndex2"
  181 + :range="pickerInfoList[4].nameArray2"
  182 + >
  183 + <image src="../../static/detail-tabicon.png"></image>
  184 + </picker>
  185 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  186 + <text
  187 + class="p14"
  188 + style="width: 30px;"
  189 + >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
  190 + <picker
  191 + @change="bindPickerChange43"
  192 + :value="pickerInfoList[4].nameIndex3"
  193 + :range="pickerInfoList[4].nameArray3"
  194 + >
  195 + <image src="../../static/detail-tabicon.png"></image>
  196 + </picker>
  197 + </view>
135 198 </view>
136 199 <view class="confirm">
137   - <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
138   - <text>确认以上输入信息来源于我的验光数据!</text>
  200 + <image
  201 + :src="tablist.confirm ? tabicon[0] : tabicon[1]"
  202 + @click="changeConfirm"
  203 + ></image>
  204 + <text>确认以上输入信息来源于我的验光数据!</text>
139 205 </view>
140   - </view>
141   -
142   - </template>
143   - <template v-else>
144   - <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
145   - <template v-if="item.nameC==='验光日期'">
146   - <text class="names">{{item.nameC}}</text>
147   - <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
148   - <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
149   - <text>{{item.nameArray3[item.nameIndex2]}}日</text>
150   - </template>
151   - <template v-else>
152   - <template v-if="item.nameC==='度数'">
153   - <text style="display: inline;">*</text>
154   - </template>
155   -
156   - <text class="names">{{item.nameC}}</text>
157   - <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
158   - <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
159   - </template>
160   - </view>
161   - </template>
162   - </view>
163   - </view>
164   - <!-- 实用功能折叠框 -->
165   - <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
166   - <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
167   - <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
168   - <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
169   - <view
170   - v-for="item in attrList"
171   - :key="item.mid"
172   - >
173   - <MyCollapse
174   - :funListProp="item"
175   - :funContentProp="reContent"
176   - :title="item.meta_name"
177   - />
178   - </view>
179   - </view>
180   - <view class="submit">立即结算</view>
181   - </view>
  206 + </view>
  207 +
  208 + </template>
  209 + <template v-else>
  210 + <view
  211 + v-for="item in pickerInfoList"
  212 + :key="item.key"
  213 + class="bodyBox"
  214 + >
  215 + <template v-if="item.nameC==='验光日期'">
  216 + <text class="names">{{item.nameC}}</text>
  217 + <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
  218 + <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
  219 + <text>{{item.nameArray3[item.nameIndex2]}}日</text>
  220 + </template>
  221 + <template v-else>
  222 + <template v-if="item.nameC==='度数'">
  223 + <text style="display: inline;">*</text>
  224 + </template>
  225 +
  226 + <text class="names">{{item.nameC}}</text>
  227 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  228 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  229 + </template>
  230 + </view>
  231 + </template>
  232 + </view>
  233 + </view>
  234 + <!-- 实用功能折叠框 -->
  235 + <MyCollapse
  236 + :isOpenProps="funIsOpen"
  237 + :funListProp="funList"
  238 + :funContentProp="funContent"
  239 + title="实用功能"
  240 + ></MyCollapse>
  241 + <MyCollapse
  242 + :isOpenProps="kindIsOpen"
  243 + :funListProp="kindList1"
  244 + :funList2Prop="kindList2"
  245 + :funContentProp="kindContent"
  246 + title="镜片种类"
  247 + ></MyCollapse>
  248 + <MyCollapse
  249 + :isOpenProps="maIsOpen"
  250 + :funListProp="maList1"
  251 + :funList2Prop="maList2"
  252 + :funContentProp="maContent"
  253 + title="材质选择"
  254 + ></MyCollapse>
  255 + <MyCollapse
  256 + :isOpenProps="reIsOpen"
  257 + :funListProp="reList1"
  258 + :funList2Prop="reList2"
  259 + :funContentProp="reContent"
  260 + title="折射率"
  261 + ></MyCollapse>
  262 + <view
  263 + v-for="item in attrList"
  264 + :key="item.mid"
  265 + >
  266 + <MyCollapse
  267 + :funListProp="item"
  268 + :funContentProp="reContent"
  269 + :title="item.meta_name"
  270 + />
  271 + </view>
  272 + </view>
  273 + <view class="submit">立即结算</view>
  274 + </view>
182 275 </template>
183 276  
184 277 <script>
185   - import MyCollapse from './compoents/MyCollapse.vue'
186   - import store from '@/store'
  278 +import MyCollapse from './compoents/MyCollapse.vue'
  279 +import store from '@/store'
187 280  
188   - export default {
189   - components: {
190   - MyCollapse
191   - },
192   - data() {
193   - return {
194   - count:1,
195   - disabled:false,
196   - price:180,
197   - // 实用功能参数
198   - funIsOpen:true, // 默认myCollapse开启
199   - funList: [
200   - {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
201   - {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
202   - {"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
203   - {"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
204   - {"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
205   - {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
206   - ],
207   - funContent:[],
208   - // 镜片种类参数
209   - kindIsOpen:true,
210   - kindList1: [
211   - {"name":"染色","isChioce":false,key:1,"type": "kind"},
212   - {"name":"渐变","isChioce":false,key:2,"type": "kind"},
213   - ],
214   - kindList2: [
215   - {"name":"JB234759","isChioce":false,key:3,"type": "kind"},
216   - {"name":"JB234759","isChioce":false,key:4,"type": "kind"},
217   - {"name":"JB234759","isChioce":false,key:5,"type": "kind"},
218   - {"name":"JB234759","isChioce":false,key:6,"type": "kind"},
219   - {"name":"JB234759","isChioce":false,key:7,"type": "kind"},
220   - ],
221   - kindContent: [],
222   - // 材质选择
223   - maIsOpen: true,
224   - maList1: [
225   - {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
226   - {"name":"特殊镜片","isChioce":false,key:2},
227   - ],
228   - maList2: [
229   - {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
230   - {"name":"玻璃镜片","isChioce":false,key:4},
231   - ],
232   - maContent: [],
233   - // 折射率参数
234   - reIsOpen: true,
235   - reList1: [
236   - {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
237   - {"name":"1.60","isChioce":false,key:2},
238   - ],
239   - reList2: [
240   - {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
241   - {"name":"1.67","isChioce":false,key:4},
242   - {"name":"1.71","isChioce":false,key:5},
243   - {"name":"1.74","isChioce":false,key:6},
244   - ],
245   - reContent:[],
246   - // 验光参数
247   - opIsOpen:true,
248   - tablist: {
249   - // read: true,
250   - // seeLong: false,
251   - confirm: false
252   - },
253   - tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
254   - // 度数相关数据
255   - pickerInfoList:[
256   - {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},
257   - {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},
258   - {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},
259   - {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},
260   - {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}
261   - ],
262   -
263   - }
264   - },
265   - onLoad() {
266   - store.dispatch('read/fetch', {
267   - pid: 9,
268   - })
269   - },
270   - computed: {
271   - attrList() {
272   - return this.$store.state.read.goodInfo.attrList;
273   - }
274   - },
275   - methods: {
276   - counter(isadd){
277   - if(isadd){
278   - this.count++
279   - } else {
280   - this.count <= 1? this.disabled = true:this.count--
281   - }
282   - },
283   - myCollapseChange(isopen){
284   - // console.log(isopen)
285   - this.opIsOpen = !isopen
286   - },
287   - changeConfirm() {
288   - this.tablist.confirm = !this.tablist.confirm
289   - },
290   -
291   - bindPickerChange01: function(e) {
292   - this.pickerInfoList[0].nameIndex1 = e.target.value
293   - },
294   - bindPickerChange02: function(e) {
295   - this.pickerInfoList[0].nameIndex2 = e.target.value
296   - },
297   -
298   - bindPickerChange11: function(e) {
299   - this.pickerInfoList[1].nameIndex1 = e.target.value
300   - },
301   - bindPickerChange12: function(e) {
302   - this.pickerInfoList[1].nameIndex2 = e.target.value
303   - },
304   -
305   - bindPickerChange21: function(e) {
306   - this.pickerInfoList[2].nameIndex1 = e.target.value
307   - },
308   - bindPickerChange22: function(e) {
309   - this.pickerInfoList[2].nameIndex2 = e.target.value
310   - },
311   -
312   - bindPickerChange31: function(e) {
313   - this.pickerInfoList[3].nameIndex1 = e.target.value
314   - },
315   - bindPickerChange32: function(e) {
316   - this.pickerInfoList[3].nameIndex2 = e.target.value
317   - },
318   -
319   - bindPickerChange41: function(e) {
320   - this.pickerInfoList[4].nameIndex1 = e.target.value
321   - },
322   - bindPickerChange42: function(e) {
323   - this.pickerInfoList[4].nameIndex2 = e.target.value
324   - },
325   - bindPickerChange43: function(e) {
326   - this.pickerInfoList[4].nameIndex3 = e.target.value
327   - },
328   - }
329   - }
330   -</script>
  281 +export default {
  282 + components: {
  283 + MyCollapse,
  284 + },
  285 + data() {
  286 + return {
  287 + count: 1,
  288 + disabled: false,
  289 + price: 180,
  290 + // 实用功能参数
  291 + funIsOpen: true, // 默认myCollapse开启
  292 + funList: [
  293 + { name: '防紫外线', isChioce: false, key: 1, type: 'fun' },
  294 + { name: '防蓝光', isChioce: false, key: 2, type: 'fun' },
  295 + { name: '智能变色', isChioce: false, key: 3, type: 'fun' },
  296 + { name: '易清洁', isChioce: false, key: 4, type: 'fun' },
  297 + { name: '防辐射', isChioce: false, key: 5, type: 'fun' },
  298 + { name: '抗疲劳', isChioce: false, key: 6, type: 'fun' },
  299 + ],
  300 + funContent: [],
  301 + // 镜片种类参数
  302 + kindIsOpen: true,
  303 + kindList1: [
  304 + { name: '染色', isChioce: false, key: 1, type: 'kind' },
  305 + { name: '渐变', isChioce: false, key: 2, type: 'kind' },
  306 + ],
  307 + kindList2: [
  308 + { name: 'JB234759', isChioce: false, key: 3, type: 'kind' },
  309 + { name: 'JB234759', isChioce: false, key: 4, type: 'kind' },
  310 + { name: 'JB234759', isChioce: false, key: 5, type: 'kind' },
  311 + { name: 'JB234759', isChioce: false, key: 6, type: 'kind' },
  312 + { name: 'JB234759', isChioce: false, key: 7, type: 'kind' },
  313 + ],
  314 + kindContent: [],
  315 + // 材质选择
  316 + maIsOpen: true,
  317 + maList1: [
  318 + { name: '树脂镜片', isChioce: false, key: 1, range: '0-300度', isRange: true },
  319 + { name: '特殊镜片', isChioce: false, key: 2 },
  320 + ],
  321 + maList2: [
  322 + { name: '玻璃镜片', isChioce: false, key: 3, range: '300-1000度', isRange: true },
  323 + { name: '玻璃镜片', isChioce: false, key: 4 },
  324 + ],
  325 + maContent: [],
  326 + // 折射率参数
  327 + reIsOpen: true,
  328 + reList1: [
  329 + { name: '1.56（推荐）', isChioce: false, key: 1, range: '0-300度', isRange: true },
  330 + { name: '1.60', isChioce: false, key: 2 },
  331 + ],
  332 + reList2: [
  333 + { name: '1.71（推荐）', isChioce: false, key: 3, range: '300-1000度', isRange: true },
  334 + { name: '1.67', isChioce: false, key: 4 },
  335 + { name: '1.71', isChioce: false, key: 5 },
  336 + { name: '1.74', isChioce: false, key: 6 },
  337 + ],
  338 + reContent: [],
  339 + // 验光参数
  340 + opIsOpen: true,
  341 + tablist: {
  342 + // read: true,
  343 + // seeLong: false,
  344 + confirm: false,
  345 + },
  346 + tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  347 + // 度数相关数据
  348 + pickerInfoList: [
  349 + { 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 },
  350 + { 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 },
  351 + { 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 },
  352 + { 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 },
  353 + { 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 },
  354 + ],
331 355  
332   -<style lang="scss" scoped>
333   - .content{
334   - width: 100%;
335   - background-color: #F2F2F2;
336   - display: flex;
337   - flex-direction: column;
338   - align-items: center;
339   - }
340   - .choice-name {
341   - border-bottom: 1px solid #CFCFCF;
342   - }
343   - .goods-info{
344   - width: 100%;
345   - height: 272rpx;
346   - box-sizing: border-box;
347   - padding: 40rpx 40rpx 36rpx 36rpx;
348   - margin: 36rpx 0 18rpx 0;
349   - // margin-bottom: -18rpx;
350   - // margin-top: -36rpx;
351   - background: #FFFFFF;
352   - border-radius: 16rpx;
353   - display: flex;
354   - image{
355   - width: 94px;
356   - height: 94px;
357   - margin-right: 28rpx;
358   - }
359   - .box-right{
360   - width: 458rpx;
361   - display: flex;
362   - flex-direction: column;
363   - align-items: flex-start;
364   - justify-content: space-between;
365   - .p1 {
366   - // font-family: PingFangSC-Regular;
367   - font-size: 14px;
368   - color: #333333;
369   - letter-spacing: -0.26px;
370   - text-align: justify;
371   - line-height: 18px;
372   - }
373   - .p2 {
374   - // font-family: PingFangSC-Regular;
375   - font-size: 10px;
376   - color: #999999;
377   - letter-spacing: -0.19px;
378   - margin-top: -20rpx;
379   - }
380   - .priceBox{
381   - display: flex;
382   - flex-direction: row;
383   - justify-content: space-between;
384   - width: 100%;
385   - .price{
386   - color: #FF6B4A;
387   - font-size: 28rpx;
388   - }
389   - .counter{
390   - display: flex;
391   - flex-direction: row;
392   - justify-content: space-between;
393   - font-size: 28rpx;
394   - color: #333333;
395   - width: 122rpx;
396   - .btn{
397   - display: flex;
398   - justify-content: center;
399   - line-height: 32rpx;
400   - height: 32rpx;
401   - width: 32rpx;
402   - background-color: #F2F2F2;
403   - color: #CFCFCF;
404   - }
405   - }
406   - }
407   - }
408   - }
409   -
410   - .goods-data{
411   - width: 100%;
412   - box-sizing: border-box;
413   - padding: 37rpx 40rpx 0 40rpx;
414   - background: #FFFFFF;
415   - border-radius: 12rpx;
416   - margin-bottom: 92px;
417   - .opCollapse{
418   - width: 100%;
419   - padding-bottom: 28rpx;
420   - margin-top: 7px;
421   - border-bottom: 1px solid #E9E9E9;
422   - .head{
423   - display: flex;
424   - justify-content: space-between;
425   - height: 24px;
426   - // font-family: PingFangSC-Medium;
427   - font-size: 16px;
428   - color: #333333;
429   - letter-spacing: -0.3px;
430   - text-align: justify;
431   - line-height: 24px;
432   - margin-bottom: 18rpx;
433   - .headRighted{
434   - width: 0;
435   - height: 0;
436   - border-left: 4px solid transparent;
437   - border-right: 4px solid transparent;
438   - border-bottom: 4px solid #CFCFCF;
439   - transform: scaleY(-1);
440   - margin-top: 10px;
441   - }
442   - .headMid{
443   - // font-family: PingFangSC-Regular;
444   - font-size: 10px;
445   - color: #999999;
446   - letter-spacing: -0.19px;
447   - margin-left: -120rpx;
448   - }
449   - .headRight{
450   - width: 0;
451   - height: 0;
452   - border-left: 4px solid transparent;
453   - border-right: 4px solid transparent;
454   - border-bottom: 4px solid #CFCFCF;
455   - margin-top: 10px;
456   - }
457   - }
458   - .body{
459   - // font-family: PingFangSC-Regular;
460   - font-size: 12px;
461   - color: #666666;
462   - letter-spacing: 0;
463   - .bodyBox{
464   - margin-top: 15px;
465   - .names{
466   - // font-family: PingFangSC-Regular;
467   - font-size: 12px;
468   - color: #151515;
469   - letter-spacing: 0;
470   - text-align: justify;
471   - line-height: 17px;
472   - margin-left: 5px;
473   - margin-right: 10px;
474   - }
475   - text{
476   - // font-family: PingFangSC-Regular;
477   - font-size: 12px;
478   - color: #666666;
479   - letter-spacing: 0;
480   - text-align: justify;
481   - }
482   - }
  356 + }
  357 + },
  358 + onLoad() {
  359 + store.dispatch('read/fetch', {
  360 + pid: 9,
  361 + })
  362 + },
  363 + computed: {
  364 + attrList() {
  365 + return this.$store.state.read.goodInfo.attrList
  366 + },
  367 + },
  368 + methods: {
  369 + counter(isadd) {
  370 + if (isadd) {
  371 + this.count++
  372 + } else {
  373 + this.count <= 1 ? this.disabled = true : this.count--
  374 + }
  375 + },
  376 + myCollapseChange(isopen) {
  377 + // console.log(isopen)
  378 + this.opIsOpen = !isopen
  379 + },
  380 + changeConfirm() {
  381 + this.tablist.confirm = !this.tablist.confirm
  382 + },
483 383  
484   - }
485   - }
  384 + bindPickerChange01: function(e) {
  385 + this.pickerInfoList[0].nameIndex1 = e.target.value
  386 + },
  387 + bindPickerChange02: function(e) {
  388 + this.pickerInfoList[0].nameIndex2 = e.target.value
  389 + },
486 390  
487   - }
488   -
489   - .goods-form {
490   - display: flex;
491   - flex-direction: column;
492   - align-items: center;
493   - justify-content: center;
494   - background-color: #fff;
495   - width: 100%;
496   - .p1 {
497   - font-size: 16px;
498   - color: #333333;
499   - letter-spacing: -0.3px;
500   - text-align: justify;
501   - line-height: 24px;
502   - margin: 4px 0;
503   -
  391 + bindPickerChange11: function(e) {
  392 + this.pickerInfoList[1].nameIndex1 = e.target.value
  393 + },
  394 + bindPickerChange12: function(e) {
  395 + this.pickerInfoList[1].nameIndex2 = e.target.value
  396 + },
  397 +
  398 + bindPickerChange21: function(e) {
  399 + this.pickerInfoList[2].nameIndex1 = e.target.value
  400 + },
  401 + bindPickerChange22: function(e) {
  402 + this.pickerInfoList[2].nameIndex2 = e.target.value
  403 + },
  404 +
  405 + bindPickerChange31: function(e) {
  406 + this.pickerInfoList[3].nameIndex1 = e.target.value
  407 + },
  408 + bindPickerChange32: function(e) {
  409 + this.pickerInfoList[3].nameIndex2 = e.target.value
  410 + },
  411 +
  412 + bindPickerChange41: function(e) {
  413 + this.pickerInfoList[4].nameIndex1 = e.target.value
  414 + },
  415 + bindPickerChange42: function(e) {
  416 + this.pickerInfoList[4].nameIndex2 = e.target.value
  417 + },
  418 + bindPickerChange43: function(e) {
  419 + this.pickerInfoList[4].nameIndex3 = e.target.value
  420 + },
  421 + },
  422 +}
  423 +</script>
  424 +
  425 +<style lang="scss" scoped>
  426 +.content {
  427 + width: 100%;
  428 + background-color: #f2f2f2;
  429 + display: flex;
  430 + flex-direction: column;
  431 + align-items: center;
  432 +}
  433 +.choice-name {
  434 + border-bottom: 1px solid #cfcfcf;
  435 +}
  436 +.goods-info {
  437 + width: 100%;
  438 + height: 272rpx;
  439 + box-sizing: border-box;
  440 + padding: 40rpx 40rpx 36rpx 36rpx;
  441 + margin: 36rpx 0 18rpx 0;
  442 + // margin-bottom: -18rpx;
  443 + // margin-top: -36rpx;
  444 + background: #ffffff;
  445 + border-radius: 16rpx;
  446 + display: flex;
  447 + image {
  448 + width: 94px;
  449 + height: 94px;
  450 + margin-right: 28rpx;
  451 + }
  452 + .box-right {
  453 + width: 458rpx;
  454 + display: flex;
  455 + flex-direction: column;
  456 + align-items: flex-start;
  457 + justify-content: space-between;
  458 + .p1 {
  459 + // font-family: PingFangSC-Regular;
  460 + font-size: 14px;
  461 + color: #333333;
  462 + letter-spacing: -0.26px;
  463 + text-align: justify;
  464 + line-height: 18px;
504 465 }
505 466 .p2 {
506   - font-size: 12px;
  467 + // font-family: PingFangSC-Regular;
  468 + font-size: 10px;
  469 + color: #999999;
  470 + letter-spacing: -0.19px;
  471 + margin-top: -20rpx;
  472 + }
  473 + .priceBox {
  474 + display: flex;
  475 + flex-direction: row;
  476 + justify-content: space-between;
  477 + width: 100%;
  478 + .price {
  479 + color: #ff6b4a;
  480 + font-size: 28rpx;
  481 + }
  482 + .counter {
  483 + display: flex;
  484 + flex-direction: row;
  485 + justify-content: space-between;
  486 + font-size: 28rpx;
  487 + color: #333333;
  488 + width: 122rpx;
  489 + .btn {
  490 + display: flex;
  491 + justify-content: center;
  492 + line-height: 32rpx;
  493 + height: 32rpx;
  494 + width: 32rpx;
  495 + background-color: #f2f2f2;
  496 + color: #cfcfcf;
  497 + }
  498 + }
  499 + }
  500 + }
  501 +}
  502 +
  503 +.goods-data {
  504 + width: 100%;
  505 + box-sizing: border-box;
  506 + padding: 37rpx 40rpx 0 40rpx;
  507 + background: #ffffff;
  508 + border-radius: 12rpx;
  509 + margin-bottom: 92px;
  510 + .opCollapse {
  511 + width: 100%;
  512 + padding-bottom: 28rpx;
  513 + margin-top: 7px;
  514 + border-bottom: 1px solid #e9e9e9;
  515 + .head {
  516 + display: flex;
  517 + justify-content: space-between;
  518 + height: 24px;
  519 + // font-family: PingFangSC-Medium;
  520 + font-size: 16px;
  521 + color: #333333;
  522 + letter-spacing: -0.3px;
  523 + text-align: justify;
  524 + line-height: 24px;
  525 + margin-bottom: 18rpx;
  526 + .headRighted {
  527 + width: 0;
  528 + height: 0;
  529 + border-left: 4px solid transparent;
  530 + border-right: 4px solid transparent;
  531 + border-bottom: 4px solid #cfcfcf;
  532 + transform: scaleY(-1);
  533 + margin-top: 10px;
  534 + }
  535 + .headMid {
  536 + // font-family: PingFangSC-Regular;
  537 + font-size: 10px;
507 538 color: #999999;
508   - letter-spacing: -0.23px;
509   - margin-bottom: 18rpx;
  539 + letter-spacing: -0.19px;
  540 + margin-left: -120rpx;
  541 + }
  542 + .headRight {
  543 + width: 0;
  544 + height: 0;
  545 + border-left: 4px solid transparent;
  546 + border-right: 4px solid transparent;
  547 + border-bottom: 4px solid #cfcfcf;
  548 + margin-top: 10px;
  549 + }
  550 + }
  551 + .body {
  552 + // font-family: PingFangSC-Regular;
  553 + font-size: 12px;
  554 + color: #666666;
  555 + letter-spacing: 0;
  556 + .bodyBox {
  557 + margin-top: 15px;
  558 + .names {
  559 + // font-family: PingFangSC-Regular;
  560 + font-size: 12px;
  561 + color: #151515;
  562 + letter-spacing: 0;
  563 + text-align: justify;
  564 + line-height: 17px;
  565 + margin-left: 5px;
  566 + margin-right: 10px;
  567 + }
  568 + text {
  569 + // font-family: PingFangSC-Regular;
  570 + font-size: 12px;
  571 + color: #666666;
  572 + letter-spacing: 0;
  573 + text-align: justify;
  574 + }
  575 + }
510 576 }
511   - image{
512   - width: 28rpx;
513   - height: 26rpx;
  577 + }
  578 +}
  579 +
  580 +.goods-form {
  581 + display: flex;
  582 + flex-direction: column;
  583 + align-items: center;
  584 + justify-content: center;
  585 + background-color: #fff;
  586 + width: 100%;
  587 + .p1 {
  588 + font-size: 16px;
  589 + color: #333333;
  590 + letter-spacing: -0.3px;
  591 + text-align: justify;
  592 + line-height: 24px;
  593 + margin: 4px 0;
  594 + }
  595 + .p2 {
  596 + font-size: 12px;
  597 + color: #999999;
  598 + letter-spacing: -0.23px;
  599 + margin-bottom: 18rpx;
  600 + }
  601 + image {
  602 + width: 28rpx;
  603 + height: 26rpx;
  604 + }
  605 + .confirm {
  606 + display: flex;
  607 + align-items: center;
  608 + font-size: 12px;
  609 + color: #666666;
  610 + letter-spacing: -0.23px;
  611 + width: 684rpx;
  612 + image {
  613 + margin-right: 25rpx;
514 614 }
515   - .confirm {
516   - display: flex;
517   - align-items: center;
518   - font-size: 12px;
519   - color: #666666;
520   - letter-spacing: -0.23px;
521   - width: 684rpx;
522   - image{
523   - margin-right:25rpx;
  615 + }
  616 + .picker {
  617 + display: flex;
  618 + flex-direction: column;
  619 + justify-content: center;
  620 + align-items: center;
  621 + width: 100%;
  622 + image {
  623 + width: 10px;
  624 + height: 10px;
  625 + margin-right: 5px;
  626 + }
  627 + .picker-choice {
  628 + display: flex;
  629 + width: 684rpx;
  630 + align-items: center;
  631 + margin-bottom: 40rpx;
  632 + .choice-left {
  633 + width: 210rpx;
  634 + .p11 {
  635 + font-size: 14px;
  636 + color: #333333;
  637 + letter-spacing: -0.26px;
  638 + text-align: justify;
  639 + line-height: 24px;
  640 + // margin-right: 10px;
  641 + }
  642 + .p12 {
  643 + font-size: 10px;
  644 + color: #3f3f3f;
  645 + letter-spacing: -0.19px;
  646 + text-align: justify;
  647 + line-height: 24px;
524 648 }
  649 + }
  650 + .p13 {
  651 + font-size: 10px;
  652 + color: #999999;
  653 + letter-spacing: -0.19px;
  654 + margin-right: 10px;
  655 + }
  656 + .p13-date {
  657 + font-size: 10px;
  658 + color: #999999;
  659 + letter-spacing: -0.19px;
  660 + margin-right: 5px;
  661 + }
  662 + .p14 {
  663 + font-size: 14px;
  664 + color: #666666;
  665 + letter-spacing: -0.26px;
  666 + text-align: center;
  667 + width: 124rpx;
  668 + border-bottom: 1px solid #cfcfcf;
  669 + }
525 670 }
526   - .picker{
527   - display: flex;
528   - flex-direction: column;
529   - justify-content: center;
530   - align-items: center;
531   - width: 100%;
532   - image{
533   - width: 10px;
534   - height: 10px;
535   - margin-right: 5px;
536   - }
537   - .picker-choice{
538   - display: flex;
539   - width: 684rpx;
540   - align-items: center;
541   - margin-bottom: 40rpx;
542   - .choice-left{
543   - width: 210rpx;
544   - .p11 {
545   - font-size: 14px;
546   - color: #333333;
547   - letter-spacing: -0.26px;
548   - text-align: justify;
549   - line-height: 24px;
550   - // margin-right: 10px;
551   - }
552   - .p12 {
553   - font-size: 10px;
554   - color: #3F3F3F;
555   - letter-spacing: -0.19px;
556   - text-align: justify;
557   - line-height: 24px;
558   - }
559   -
560   -
561   - }
562   - .p13 {
563   - font-size: 10px;
564   - color: #999999;
565   - letter-spacing: -0.19px;
566   - margin-right: 10px;
567   - }
568   - .p13-date {
569   - font-size: 10px;
570   - color: #999999;
571   - letter-spacing: -0.19px;
572   - margin-right: 5px;
573   - }
574   - .p14 {
575   - font-size: 14px;
576   - color: #666666;
577   - letter-spacing: -0.26px;
578   - text-align: center;
579   - width: 124rpx;
580   - border-bottom: 1px solid #CFCFCF;
581   - }
582   -
583   - }
584   - }
585   - }
586   -
587   - .submit{
588   - width: 100%;
589   - height: 112rpx;
590   - background: #FF6B4A;
591   - position: fixed;
592   - bottom: 0;
593   - text-align: center;
594   - line-height: 112rpx;
595   - // font-family: PingFangSC-Regular;
596   - font-size: 16px;
597   - color: #FFFFFF;
598   - letter-spacing: -0.3px;
599   - }
600   -
  671 + }
  672 +}
  673 +
  674 +.submit {
  675 + width: 100%;
  676 + height: 112rpx;
  677 + background: #ff6b4a;
  678 + position: fixed;
  679 + bottom: 0;
  680 + text-align: center;
  681 + line-height: 112rpx;
  682 + // font-family: PingFangSC-Regular;
  683 + font-size: 16px;
  684 + color: #ffffff;
  685 + letter-spacing: -0.3px;
  686 + /* iphonex 等安全区设置，底部安全区适配 */
  687 + /* #ifndef APP-NVUE */
  688 + padding-bottom: constant(safe-area-inset-bottom);
  689 + padding-bottom: env(safe-area-inset-bottom);
  690 + /* #endif */
  691 +}
601 692 </style>
... ...
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @f112b64
... ... @@ -1188,6 +1188,12 @@ export default {
1188 1188 color: #ffffff;
1189 1189 line-height: 112rpx;
1190 1190 text-align: center;
  1191 +
  1192 + /* iphonex 等安全区设置，底部安全区适配 */
  1193 + /* #ifndef APP-NVUE */
  1194 + padding-bottom: constant(safe-area-inset-bottom);
  1195 + padding-bottom: env(safe-area-inset-bottom);
  1196 + /* #endif */
1191 1197 // position: absolute;
1192 1198 bottom: 0;
1193 1199 left: 0;
... ...
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @f112b64
... ... @@ -751,6 +751,11 @@ export default {
751 751 position: fixed;
752 752 bottom: 0;
753 753 background: #ffffff;
  754 + /* iphonex 等安全区设置，底部安全区适配 */
  755 + /* #ifndef APP-NVUE */
  756 + padding-bottom: constant(safe-area-inset-bottom);
  757 + padding-bottom: env(safe-area-inset-bottom);
  758 + /* #endif */
754 759 button {
755 760 width: 204rpx;
756 761 height: 80rpx;
... ...
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @f112b64
... ... @@ -36,139 +36,204 @@
36 36 <view class="opCollapse">
37 37 <view class="body">
38 38 <template v-if="opIsOpen">
39   - <view class="goods-form">
40   - <view class="p1">
41   - <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
42   - 填写验光数据
43   - </view>
44   - <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
45   - <view class="picker">
46   - <view class="picker-choice">
47   - <view class="choice-left">
48   - <text class="pd">验光单取名:</text>
49   - </view>
50   - <input type="text" @blur="handleInput" class="input"
51   - placeholder="请输入名称" maxlength="20" :value="name" />
52   - </view>
53   - </view>
54   - <view class="picker" >
55   - <view class="picker-choice">
56   - <view class="choice-left">
57   - <text class="p11">{{pickerInfoList[0].nameC}}</text>
58   - <text class="p12">{{pickerInfoList[0].nameE}}</text>
59   - </view>
60   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
61   - <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
62   - <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
63   - <view class="p14">
64   - {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
65   - <image src="../../static/detail-tabicon.png" ></image>
  39 + <view class="goods-form">
  40 + <view class="p1">
  41 + <image
  42 + class="image2"
  43 + src="../../static/img/myOpticsData/dataWrite.png"
  44 + mode="aspectFit"
  45 + ></image>
  46 + 填写验光数据
66 47 </view>
67   - <!-- <image src="../../static/detail-tabicon.png" ></image> -->
68   - </picker>
69   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
70   - <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
71   - <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
72   - <view class="p14">
73   - {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
74   - <image src="../../static/detail-tabicon.png" ></image>
  48 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  49 + <view class="picker">
  50 + <view class="picker-choice">
  51 + <view class="choice-left">
  52 + <text class="pd">验光单取名:</text>
  53 + </view>
  54 + <input
  55 + type="text"
  56 + @blur="handleInput"
  57 + class="input"
  58 + placeholder="请输入名称"
  59 + maxlength="20"
  60 + :value="name"
  61 + />
  62 + </view>
75 63 </view>
76   - <!-- <image src="../../static/detail-tabicon.png" ></image> -->
77   - </picker>
78   - </view>
79   - </view>
80   - <view class="picker" >
81   - <view class="picker-choice">
82   - <view class="choice-left">
83   - <text class="p11">{{pickerInfoList[1].nameC}}</text>
84   - <text class="p12">{{pickerInfoList[1].nameE}}</text>
85   - </view>
86   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
87   - <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
88   - <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
89   - <view class="p14">
90   - {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
91   - <image src="../../static/detail-tabicon.png" ></image>
  64 + <view class="picker">
  65 + <view class="picker-choice">
  66 + <view class="choice-left">
  67 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  68 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  69 + </view>
  70 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  71 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  72 + <picker
  73 + @change="bindPickerChange01"
  74 + :value="pickerInfoList[0].nameIndex1"
  75 + :range="pickerInfoList[0].nameArray1"
  76 + >
  77 + <view class="p14">
  78 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
  79 + <image src="../../static/detail-tabicon.png"></image>
  80 + </view>
  81 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  82 + </picker>
  83 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  84 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
  85 + <picker
  86 + @change="bindPickerChange02"
  87 + :value="pickerInfoList[0].nameIndex2"
  88 + :range="pickerInfoList[0].nameArray2"
  89 + >
  90 + <view class="p14">
  91 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
  92 + <image src="../../static/detail-tabicon.png"></image>
  93 + </view>
  94 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  95 + </picker>
  96 + </view>
92 97 </view>
93   - <!-- <image src="../../static/detail-tabicon.png" ></image> -->
94   - </picker>
95   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
96   - <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
97   - <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
98   - <view class="p14">
99   - {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
100   - <image src="../../static/detail-tabicon.png" ></image>
  98 + <view class="picker">
  99 + <view class="picker-choice">
  100 + <view class="choice-left">
  101 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  102 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  103 + </view>
  104 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  105 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
  106 + <picker
  107 + @change="bindPickerChange11"
  108 + :value="pickerInfoList[1].nameIndex1"
  109 + :range="pickerInfoList[1].nameArray1"
  110 + >
  111 + <view class="p14">
  112 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  113 + <image src="../../static/detail-tabicon.png"></image>
  114 + </view>
  115 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  116 + </picker>
  117 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  118 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
  119 + <picker
  120 + @change="bindPickerChange12"
  121 + :value="pickerInfoList[1].nameIndex2"
  122 + :range="pickerInfoList[1].nameArray2"
  123 + >
  124 + <view class="p14">
  125 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  126 + <image src="../../static/detail-tabicon.png"></image>
  127 + </view>
  128 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  129 + </picker>
  130 + </view>
101 131 </view>
102   - <!-- <image src="../../static/detail-tabicon.png" ></image> -->
103   - </picker>
104   - </view>
105   - </view>
106   - <view class="picker" >
107   - <view class="picker-choice">
108   - <view class="choice-left">
109   - <text class="p11">{{pickerInfoList[2].nameC}}</text>
110   - <text class="p12">{{pickerInfoList[2].nameE}}</text>
111   - </view>
112   - <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
113   - <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
114   - <view class="p14">
115   - {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
116   - <image src="../../static/detail-tabicon.png" ></image>
  132 + <view class="picker">
  133 + <view class="picker-choice">
  134 + <view class="choice-left">
  135 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  136 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  137 + </view>
  138 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  139 + <picker
  140 + @change="bindPickerChange21"
  141 + :value="pickerInfoList[2].nameIndex1"
  142 + :range="pickerInfoList[2].nameArray1"
  143 + >
  144 + <view class="p14">
  145 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  146 + <image src="../../static/detail-tabicon.png"></image>
  147 + </view>
  148 + </picker>
  149 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  150 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
  151 + <picker
  152 + @change="bindPickerChange22"
  153 + :value="pickerInfoList[2].nameIndex2"
  154 + :range="pickerInfoList[2].nameArray2"
  155 + >
  156 + <view class="p14">
  157 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  158 + <image src="../../static/detail-tabicon.png"></image>
  159 + </view>
  160 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  161 + </picker>
  162 + </view>
117 163 </view>
118   - </picker>
119   - <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
120   - <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
121   - <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
122   - <view class="p14">
123   - {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
124   - <image src="../../static/detail-tabicon.png" ></image>
  164 + <view class="picker">
  165 + <view class="picker-choice">
  166 + <view class="choice-left">
  167 + <text class="pd">瞳距:</text>
  168 + </view>
  169 + <input
  170 + type="digit"
  171 + @change="handleInputPd"
  172 + class="input"
  173 + placeholder="请输入瞳距,单位cm"
  174 + maxlength="20"
  175 + :value="pd"
  176 + />
  177 + </view>
125 178 </view>
126   - <!-- <image src="../../static/detail-tabicon.png" ></image> -->
127   - </picker>
128   - </view>
129   - </view>
130   - <view class="picker">
131   - <view class="picker-choice">
132   - <view class="choice-left">
133   - <text class="pd">瞳距:</text>
134   - </view>
135   - <input type="digit" @change="handleInputPd" class="input"
136   - placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
137   - </view>
138   - </view>
139   - <view class="picker" >
140   - <view class="picker-choice">
141   - <view class="choice-left">
142   - <text class="p11">{{pickerInfoList[3].nameC}}</text>
143   - </view>
144   - <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
145   - <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
146   - <view class="p14" style="width: 30px;">
147   - {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
148   - <image src="../../static/detail-tabicon.png" ></image>
149   - </view>
150   - </picker>
151   - <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
152   - <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
153   - <view class="p14" style="width: 30px;">
154   - {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
155   - <image src="../../static/detail-tabicon.png" ></image>
  179 + <view class="picker">
  180 + <view class="picker-choice">
  181 + <view class="choice-left">
  182 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  183 + </view>
  184 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  185 + <picker
  186 + @change="bindPickerChange41"
  187 + :value="pickerInfoList[3].nameIndex1"
  188 + :range="pickerInfoList[3].nameArray1"
  189 + >
  190 + <view
  191 + class="p14"
  192 + style="width: 30px;"
  193 + >
  194 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  195 + <image src="../../static/detail-tabicon.png"></image>
  196 + </view>
  197 + </picker>
  198 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  199 + <picker
  200 + @change="bindPickerChange42"
  201 + :value="pickerInfoList[3].nameIndex2"
  202 + :range="pickerInfoList[3].nameArray2"
  203 + >
  204 + <view
  205 + class="p14"
  206 + style="width: 30px;"
  207 + >
  208 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  209 + <image src="../../static/detail-tabicon.png"></image>
  210 + </view>
  211 + </picker>
  212 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  213 + <picker
  214 + @change="bindPickerChange43"
  215 + :value="pickerInfoList[3].nameIndex3"
  216 + :range="pickerInfoList[3].nameArray3"
  217 + >
  218 + <view
  219 + class="p14"
  220 + style="width: 30px;"
  221 + >
  222 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  223 + <image src="../../static/detail-tabicon.png"></image>
  224 + </view>
  225 + </picker>
  226 + </view>
156 227 </view>
157   - </picker>
158   - <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
159   - <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
160   - <view class="p14" style="width: 30px;">
161   - {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
162   - <image src="../../static/detail-tabicon.png" ></image>
  228 + <view class="confirm">
  229 + <image
  230 + class="image1"
  231 + :src="confirm ? tabicon[0] : tabicon[1]"
  232 + @tap="changeConfirm"
  233 + ></image>
  234 + <text>确认以上输入信息来源于我的验光数据!</text>
163 235 </view>
164   - </picker>
165   - </view>
166   - </view>
167   - <view class="confirm">
168   - <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
169   - <text>确认以上输入信息来源于我的验光数据!</text>
170   - </view>
171   - </view>
  236 + </view>
172 237 </template>
173 238 <template v-else>
174 239 <view
... ... @@ -1010,129 +1075,126 @@ export default {
1010 1075 // }
1011 1076 // }
1012 1077 // }
1013   - .goods-form {
1014   - display: flex;
1015   - flex-direction: column;
1016   - align-items: center;
1017   - justify-content: center;
1018   - background-color: #fff;
  1078 + .goods-form {
  1079 + display: flex;
  1080 + flex-direction: column;
  1081 + align-items: center;
  1082 + justify-content: center;
  1083 + background-color: #fff;
1019 1084 width: 100%;
1020 1085 padding: 40rpx 0;
1021   - .p1 {
1022   - font-size: 16px;
1023   - color: #333333;
1024   - letter-spacing: -0.3px;
1025   - text-align: justify;
1026   - line-height: 24px;
1027   - margin: 4px 0;
1028   -
  1086 + .p1 {
  1087 + font-size: 16px;
  1088 + color: #333333;
  1089 + letter-spacing: -0.3px;
  1090 + text-align: justify;
  1091 + line-height: 24px;
  1092 + margin: 4px 0;
1029 1093 }
1030 1094 .p2 {
1031   - font-size: 12px;
1032   - color: #999999;
1033   - letter-spacing: -0.23px;
1034   - margin-bottom: 32rpx;
  1095 + font-size: 12px;
  1096 + color: #999999;
  1097 + letter-spacing: -0.23px;
  1098 + margin-bottom: 32rpx;
1035 1099 }
1036   - .image2{
1037   - width: 42rpx;
1038   - height: 34rpx;
1039   - margin-right: 12rpx;
  1100 + .image2 {
  1101 + width: 42rpx;
  1102 + height: 34rpx;
  1103 + margin-right: 12rpx;
1040 1104 }
1041 1105 .confirm {
1042   - display: flex;
1043   - align-items: center;
1044   - font-size: 12px;
1045   - color: #666666;
1046   - letter-spacing: -0.23px;
1047   - width: 684rpx;
1048   - .image1{
1049   - margin-right:25rpx;
1050   - width: 42rpx;
1051   - height: 38rpx;
1052   - }
  1106 + display: flex;
  1107 + align-items: center;
  1108 + font-size: 12px;
  1109 + color: #666666;
  1110 + letter-spacing: -0.23px;
  1111 + width: 684rpx;
  1112 + .image1 {
  1113 + margin-right: 25rpx;
  1114 + width: 42rpx;
  1115 + height: 38rpx;
  1116 + }
1053 1117 }
1054   - .picker{
1055   - display: flex;
1056   - flex-direction: column;
1057   - justify-content: center;
1058   - align-items: center;
1059   - width: 100%;
  1118 + .picker {
  1119 + display: flex;
  1120 + flex-direction: column;
  1121 + justify-content: center;
  1122 + align-items: center;
  1123 + width: 100%;
1060 1124  
1061   - .picker-choice{
1062   - display: flex;
1063   - width: 684rpx;
1064   - align-items: center;
  1125 + .picker-choice {
  1126 + display: flex;
  1127 + width: 684rpx;
  1128 + align-items: center;
1065 1129 margin-bottom: 40rpx;
1066   - .input{
1067   - border-bottom: 1px solid #CFCFCF;
1068   - height: 40rpx;
1069   - }
1070   - .choice-left{
1071   - width: 210rpx;
1072   - .pd{
1073   - font-size: 14px;
1074   - color: #333333;
1075   - letter-spacing: -0.26px;
1076   - text-align: justify;
1077   - line-height: 24px;
1078   - margin-right: 44rpx;
1079   - }
1080   - .p11 {
1081   - font-size: 14px;
1082   - color: #333333;
1083   - letter-spacing: -0.26px;
1084   - text-align: justify;
1085   - line-height: 24px;
1086   - // margin-right: 10px;
1087   - }
1088   - .p12 {
1089   - font-size: 10px;
1090   - color: #3F3F3F;
1091   - letter-spacing: -0.19px;
1092   - text-align: justify;
1093   - line-height: 24px;
1094   - }
1095   -
1096   - }
1097   - .p13 {
1098   - font-size: 10px;
1099   - color: #999999;
1100   - letter-spacing: -0.19px;
1101   - margin-right: 10px;
1102   - }
1103   - .p13-date {
  1130 + .input {
  1131 + border-bottom: 1px solid #cfcfcf;
  1132 + height: 40rpx;
  1133 + }
  1134 + .choice-left {
  1135 + width: 210rpx;
  1136 + .pd {
  1137 + font-size: 14px;
  1138 + color: #333333;
  1139 + letter-spacing: -0.26px;
  1140 + text-align: justify;
  1141 + line-height: 24px;
  1142 + margin-right: 44rpx;
  1143 + }
  1144 + .p11 {
  1145 + font-size: 14px;
  1146 + color: #333333;
  1147 + letter-spacing: -0.26px;
  1148 + text-align: justify;
  1149 + line-height: 24px;
  1150 + // margin-right: 10px;
  1151 + }
  1152 + .p12 {
1104 1153 font-size: 10px;
1105   - color: #999999;
1106   - letter-spacing: -0.19px;
1107   - margin-right: 5px;
  1154 + color: #3f3f3f;
  1155 + letter-spacing: -0.19px;
  1156 + text-align: justify;
  1157 + line-height: 24px;
  1158 + }
  1159 + }
  1160 + .p13 {
  1161 + font-size: 10px;
  1162 + color: #999999;
  1163 + letter-spacing: -0.19px;
  1164 + margin-right: 10px;
  1165 + }
  1166 + .p13-date {
  1167 + font-size: 10px;
  1168 + color: #999999;
  1169 + letter-spacing: -0.19px;
  1170 + margin-right: 5px;
  1171 + }
  1172 + picker {
  1173 + width: 144rpx;
  1174 + height: 40rpx;
  1175 + display: flex;
  1176 + position: relative;
  1177 + .p14 {
  1178 + font-size: 14px;
  1179 + color: #666666;
  1180 + letter-spacing: -0.26px;
  1181 + text-align: center;
  1182 + width: 124rpx;
  1183 + border-bottom: 1px solid #cfcfcf;
  1184 + height: 38rpx;
  1185 + }
  1186 + image {
  1187 + width: 20rpx;
  1188 + height: 20rpx;
  1189 + position: absolute;
  1190 + right: 20rpx;
  1191 + top: 8rpx;
  1192 + }
1108 1193 }
1109   - picker{
1110   - width: 144rpx;
1111   - height: 40rpx;
1112   - display: flex;
1113   - position: relative;
1114   - .p14 {
1115   - font-size: 14px;
1116   - color: #666666;
1117   - letter-spacing: -0.26px;
1118   - text-align: center;
1119   - width: 124rpx;
1120   - border-bottom: 1px solid #CFCFCF;
1121   - height: 38rpx;
1122   - }
1123   - image{
1124   - width: 20rpx;
1125   - height: 20rpx;
1126   - position: absolute;
1127   - right: 20rpx;
1128   - top: 8rpx;
1129 1194 }
1130 1195 }
1131   -
1132 1196 }
1133 1197 }
1134   - }
1135   - }
1136 1198 }
1137 1199 .choose {
1138 1200 width: 100%;
... ... @@ -1201,6 +1263,12 @@ export default {
1201 1263 position: fixed;
1202 1264 bottom: 0;
1203 1265 left: 0;
  1266 +
  1267 + /* iphonex 等安全区设置，底部安全区适配 */
  1268 + /* #ifndef APP-NVUE */
  1269 + padding-bottom: constant(safe-area-inset-bottom);
  1270 + padding-bottom: env(safe-area-inset-bottom);
  1271 + /* #endif */
1204 1272 }
1205 1273 }
1206 1274 </style>
... ...