Commit daf137d6fdb9a5992261ea0bf7a5ac6a3259250c
Exists in
master
合并冲突
Showing
10 changed files
Show diff stats
src/pages/addOpticsData/addOpticsData.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
4 | <uni-popup ref="popup" type="center"> | 4 | <uni-popup ref="popup" type="center"> |
5 | <!-- 给一个左边弹窗的样式 --> | 5 | <!-- 给一个左边弹窗的样式 --> |
6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> | 6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> |
7 | <!-- 关闭弹窗按钮 --> | 7 | <!-- 关闭弹窗按钮 --> |
8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> | 8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> |
9 | <!-- 左 --> | 9 | <!-- 左 --> |
10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> | 10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> |
11 | <!-- 右 --> | 11 | <!-- 右 --> |
12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> | 12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> |
13 | </view> | 13 | </view> |
14 | </uni-popup> | 14 | </uni-popup> |
15 | <!-- 点击弹窗部分 --> | 15 | <!-- 点击弹窗部分 --> |
16 | <view class="header"> | 16 | <view class="header"> |
17 | <view class="headerLeft" @click=changeTap(0)> | 17 | <view class="headerLeft" @click=changeTap(0)> |
18 | <text>如何查看验光单?</text> | 18 | <text>如何查看验光单?</text> |
19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> | 19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> |
20 | </view> | 20 | </view> |
21 | <view class="headerRight" @click=changeTap(1)> | 21 | <view class="headerRight" @click=changeTap(1)> |
22 | <text>如何查看眼镜框架?</text> | 22 | <text>如何查看眼镜框架?</text> |
23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> | 23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> |
24 | </view> | 24 | </view> |
25 | </view> | 25 | </view> |
26 | <!-- 数据展示部分 --> | 26 | <!-- 数据展示部分 --> |
27 | <view class="dataMenu"> | 27 | <view class="dataMenu"> |
28 | <uni-collapse accordion="true"> | 28 | <uni-collapse accordion="true"> |
29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index"> | 29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index" > |
30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> | 30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> |
31 | <view class="loveDataInfo"> | 31 | <view class="loveDataInfo" @click="toNewData(2,index)"> |
32 | <view class="dataInfoItem"> | 32 | <view class="dataInfoItem"> |
33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> | 33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> |
34 | </view> | 34 | </view> |
35 | <view class="dataInfoItem"> | 35 | <view class="dataInfoItem"> |
36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> | 36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> |
37 | </view> | 37 | </view> |
38 | <view class="dataInfoItem"> | 38 | <view class="dataInfoItem"> |
39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> | 39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> |
40 | </view> | 40 | </view> |
41 | <view class="dataInfoItem"> | 41 | <view class="dataInfoItem"> |
42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> | 42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> |
43 | </view> | 43 | </view> |
44 | </view> | 44 | </view> |
45 | </uni-collapse-item> | 45 | </uni-collapse-item> |
46 | </view> | 46 | </view> |
47 | </uni-collapse> | 47 | </uni-collapse> |
48 | </view> | 48 | </view> |
49 | <view class="footer"> | 49 | <view class="footer"> |
50 | <button class="btn" type="default" @click="toNewData">新建验光单</button> | 50 | <button class="btn" type="default" @click="toNewData(1)">新建验光单</button> |
51 | </view> | 51 | </view> |
52 | </view> | 52 | </view> |
53 | </template> | 53 | </template> |
54 | 54 | ||
55 | <script> | 55 | <script> |
56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
59 | import store from '@/store'; | 59 | import store from '@/store'; |
60 | export default { | 60 | export default { |
61 | components: {UniCollapse,UniCollapseItem,UniPopup}, | 61 | components: {UniCollapse,UniCollapseItem,UniPopup}, |
62 | data() { | 62 | data() { |
63 | return { | 63 | return { |
64 | whichTap:0 | 64 | whichTap:0 |
65 | }; | 65 | }; |
66 | }, | 66 | }, |
67 | onLoad: function(option) { | 67 | onLoad: function(option) { |
68 | //获取关心的人列表 | 68 | //获取关心的人列表 |
69 | store.dispatch('myLoveList/getLoveList', { | 69 | store.dispatch('myLoveList/getLoveList', { |
70 | uid: "1", | 70 | uid: this.$store.state.user.userInfo.uid, |
71 | }); | 71 | }); |
72 | }, | 72 | }, |
73 | computed:{ | 73 | computed:{ |
74 | loveList() { | 74 | loveList() { |
75 | console.log(this.$store.state.myLoveList.loveList) | 75 | console.log(this.$store.state.myLoveList.loveList) |
76 | return this.$store.state.myLoveList.loveList || [] | 76 | return this.$store.state.myLoveList.loveList || [] |
77 | }, | 77 | }, |
78 | }, | 78 | }, |
79 | methods:{ | 79 | methods:{ |
80 | changeTap(item){ | 80 | changeTap(item){ |
81 | this.whichTap = item | 81 | this.whichTap = item |
82 | this.$refs.popup.open() | 82 | this.$refs.popup.open() |
83 | }, | 83 | }, |
84 | //给时间搞一个nice的格式 | 84 | //给时间搞一个nice的格式 |
85 | getRightTime(time){ | 85 | getRightTime(time){ |
86 | //如果小于10 则返回'0'+m | 86 | //如果小于10 则返回'0'+m |
87 | // function add(m){return m<10?'0'+m:m} | 87 | // function add(m){return m<10?'0'+m:m} |
88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 | 88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 |
89 | // const oldTime = (new Date(time)).getTime() | 89 | // const oldTime = (new Date(time)).getTime() |
90 | // const year = new Date(oldTime).getFullYear() | 90 | // const year = new Date(oldTime).getFullYear() |
91 | // const month = new Date(oldTime).getMonth()+1 | 91 | // const month = new Date(oldTime).getMonth()+1 |
92 | // const day = new Date(oldTime).getDate() | 92 | // const day = new Date(oldTime).getDate() |
93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) | 93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) |
94 | 94 | ||
95 | // console.log(newTime) | 95 | // console.log(newTime) |
96 | // return newTime.replace(/-/g, '/') | 96 | // return newTime.replace(/-/g, '/') |
97 | return time | 97 | return time |
98 | }, | 98 | }, |
99 | getFirstName(name){ | 99 | getFirstName(name){ |
100 | return name.substring(0,1) | 100 | return name.substring(0,1) |
101 | }, | 101 | }, |
102 | toNewData(){ | 102 | toNewData(item,index){ |
103 | // const args={ | ||
104 | // name:loveItem.name, | ||
105 | // pd:loveItem.pd, | ||
106 | // leftSph:loveItem.leftSph, | ||
107 | // rightSph:loveItem.rightSph, | ||
108 | // leftCyl:loveItem.leftCyl, | ||
109 | // rightCyl:loveItem.rightCyl, | ||
110 | // leftAxi:loveItem.leftAxi, | ||
111 | // rightAxi:loveItem.rightAxi | ||
112 | // } | ||
103 | uni.navigateTo({ | 113 | uni.navigateTo({ |
104 | url:'../newOpticsData/newOpticsData' | 114 | // kinds 参数为 1 表示添加新的验光单, 2 表示更新验光单 |
115 | // name 表示修改的人名儿,pd瞳距 | ||
116 | url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index | ||
105 | }) | 117 | }) |
106 | } | 118 | } |
107 | } | 119 | } |
108 | } | 120 | } |
109 | </script> | 121 | </script> |
110 | 122 | ||
111 | <style lang="scss"> | 123 | <style lang="scss"> |
112 | .wrap{ | 124 | .wrap{ |
113 | min-height: 100vh; | 125 | min-height: 100vh; |
114 | width: 100%; | 126 | width: 100%; |
115 | background-color: #F2F2F2; | 127 | background-color: #F2F2F2; |
116 | .header{ | 128 | .header{ |
117 | height: 304rpx; | 129 | height: 304rpx; |
118 | width: 100%; | 130 | width: 100%; |
119 | background-color: #FFFFFF; | 131 | background-color: #FFFFFF; |
120 | display: flex; | 132 | display: flex; |
121 | justify-content: space-around; | 133 | justify-content: space-around; |
122 | align-items: center; | 134 | align-items: center; |
123 | view{ | 135 | view{ |
124 | height: 210rpx; | 136 | height: 210rpx; |
125 | width: 304rpx; | 137 | width: 304rpx; |
126 | background: #FDF7F5; | 138 | background: #FDF7F5; |
127 | border-radius: 4px; | 139 | border-radius: 4px; |
128 | border-radius: 4px; | 140 | border-radius: 4px; |
129 | display: flex; | 141 | display: flex; |
130 | flex-direction: column; | 142 | flex-direction: column; |
131 | align-items: center; | 143 | align-items: center; |
132 | justify-content: center; | 144 | justify-content: center; |
133 | text{ | 145 | text{ |
134 | font-size: 12px; | 146 | font-size: 12px; |
135 | color: #333333; | 147 | color: #333333; |
136 | } | 148 | } |
137 | image{ | 149 | image{ |
138 | height: 144rpx; | 150 | height: 144rpx; |
139 | width: 144rpx; | 151 | width: 144rpx; |
140 | } | 152 | } |
141 | } | 153 | } |
142 | } | 154 | } |
143 | .dataMenu{ | 155 | .dataMenu{ |
144 | margin-top: 20rpx; | 156 | margin-top: 20rpx; |
145 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 157 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
146 | width: 100%; | 158 | width: 100%; |
147 | background-color: #FFFFFF; | 159 | background-color: #FFFFFF; |
160 | margin-bottom: 120rpx; | ||
148 | .item{ | 161 | .item{ |
149 | padding: 0 40rpx; | 162 | padding: 0 40rpx; |
150 | .loveDataInfo{ | 163 | .loveDataInfo{ |
151 | padding: 0 44rpx 0 70rpx; | 164 | padding: 0 44rpx 0 70rpx; |
152 | display: flex; | 165 | display: flex; |
153 | justify-content: space-around; | 166 | justify-content: space-around; |
154 | flex-direction: column; | 167 | flex-direction: column; |
155 | align-items: flex-start; | 168 | align-items: flex-start; |
156 | .dataInfoItem{ | 169 | .dataInfoItem{ |
157 | font-size: 12px; | 170 | font-size: 12px; |
158 | color: #333333; | 171 | color: #333333; |
159 | margin-bottom: 34rpx; | 172 | margin-bottom: 34rpx; |
160 | text{ | 173 | text{ |
161 | font-size: 12px; | 174 | font-size: 12px; |
162 | color: #2A2A2A; | 175 | color: #2A2A2A; |
163 | margin-right: 20rpx; | 176 | margin-right: 20rpx; |
164 | } | 177 | } |
165 | } | 178 | } |
166 | } | 179 | } |
167 | } | 180 | } |
168 | } | 181 | } |
169 | .footer{ | 182 | .footer{ |
170 | width: 100%; | 183 | width: 100%; |
171 | position: fixed; | 184 | position: fixed; |
172 | bottom: 0; | 185 | bottom: 0; |
173 | left: 0; | 186 | left: 0; |
174 | .btn{ | 187 | .btn{ |
175 | width: 100%; | 188 | width: 100%; |
176 | height: 112rpx; | 189 | height: 112rpx; |
177 | line-height: 112rpx; | 190 | line-height: 112rpx; |
178 | background: #FF6B4A; | 191 | background: #FF6B4A; |
179 | font-size: 16px; | 192 | font-size: 16px; |
180 | color: #FFFFFF; | 193 | color: #FFFFFF; |
181 | } | 194 | } |
182 | } | 195 | } |
183 | } | 196 | } |
184 | .popUpWrap{ | 197 | .popUpWrap{ |
185 | height: 850rpx; | 198 | height: 850rpx; |
186 | width: 542rpx; | 199 | width: 542rpx; |
187 | background-color: #FFFFFF; | 200 | background-color: #FFFFFF; |
188 | border-radius: 4px; | 201 | border-radius: 4px; |
189 | border: 1px solid #979797; | 202 | border: 1px solid #979797; |
190 | .closeBtn{ | 203 | .closeBtn{ |
191 | height: 28rpx; | 204 | height: 28rpx; |
192 | width: 28rpx; | 205 | width: 28rpx; |
193 | // border: 1px solid red; | 206 | // border: 1px solid red; |
194 | position: absolute; | 207 | position: absolute; |
195 | top: 20rpx; | 208 | top: 20rpx; |
196 | right: 20rpx; | 209 | right: 20rpx; |
197 | } | 210 | } |
198 | .glassInfo{ | 211 | .glassInfo{ |
199 | height: 474rpx; | 212 | height: 474rpx; |
200 | width: 528rpx; | 213 | width: 528rpx; |
201 | } | 214 | } |
202 | .dataInfo{ | 215 | .dataInfo{ |
203 | height: 850rpx; | 216 | height: 850rpx; |
204 | width: 542rpx; | 217 | width: 542rpx; |
205 | } | 218 | } |
206 | } | 219 | } |
207 | .popUpWrap1{ | 220 | .popUpWrap1{ |
208 | height: 474rpx; | 221 | height: 474rpx; |
209 | width: 528rpx; | 222 | width: 528rpx; |
210 | border-radius: 4px; | 223 | border-radius: 4px; |
211 | border: 1px solid #979797; | 224 | border: 1px solid #979797; |
212 | } | 225 | } |
213 | 226 | ||
214 | </style> | 227 | </style> |
215 | 228 |
src/pages/detailStandard/detailStandard_k.vue
1 | <template> | 1 | <template> |
2 | <view class="container"> | 2 | <view class="container"> |
3 | <view class="detail"> | 3 | <view class="detail"> |
4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | 4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> |
5 | <view class="detail2"> | 5 | <view class="detail2"> |
6 | <view class="detail2_name">{{details.data.p_name}}</view> | 6 | <view class="detail2_name">{{details.data.p_name}}</view> |
7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> |
8 | <view class="detail2_price"> | 8 | <view class="detail2_price"> |
9 | <span>¥{{details.data.p_sale_price*count}}</span> | 9 | <span>¥{{details.data.p_sale_price*count}}</span> |
10 | <view class="counter"> | 10 | <view class="counter"> |
11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
12 | <text>{{count}}</text> | 12 | <text>{{count}}</text> |
13 | <view class="btn" @click="counter(true)">+</view> | 13 | <view class="btn" @click="counter(true)">+</view> |
14 | </view> | 14 | </view> |
15 | </view> | 15 | </view> |
16 | </view> | 16 | </view> |
17 | </view> | 17 | </view> |
18 | <view class="choose"> | 18 | <view class="choose"> |
19 | <view class="colour"> | 19 | <view class="colour"> |
20 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> | 20 | <view class="colour1" @click="xialachange(0)"> |
21 | <view class="colour_exp">*{{colour}}</view> | 21 | <text>框架颜色</text> |
22 | <image v-bind:src="isNone[0].img"></image> | ||
23 | </view> | ||
24 | <view class="colour_exp">*{{navData.colour}}</view> | ||
22 | <view> | 25 | <view> |
23 | <view class="colour2"> | 26 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
24 | <view | 27 | <view |
25 | v-for="(items,index) in details.data.skuList" | 28 | v-for="(items,index) in details.data.skuList" |
26 | :key="index" | 29 | :key="index" |
27 | @click="viewChoose(index)" | 30 | @click="viewChoose(index)" |
28 | class="colour2_view" | 31 | class="colour2_view" |
29 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 32 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
30 | > | 33 | > |
31 | <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> |
32 | </view> | 35 | </view> |
33 | </view> | 36 | </view> |
34 | </view> | 37 | </view> |
35 | <hr/> | 38 | <hr/> |
36 | </view> | 39 | </view> |
37 | <view class="size"> | 40 | <view class="size"> |
38 | <view class="size1"> | 41 | <view class="size1" @click="xialachange(1)"> |
39 | <view class="size1_1">框架尺寸</view> | 42 | <view class="size1_1">框架尺寸</view> |
40 | <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> | 43 | <view><image v-bind:src="isNone[1].img"></image></view> |
41 | </view> | 44 | </view> |
42 | <view class="colour"> | 45 | <view class="colour"> |
43 | <view class="colour_exp">*{{colour}}</view> | 46 | <view class="colour_exp">*{{navData.colour}}</view> |
44 | </view> | 47 | </view> |
45 | <view class="D3_list"> | 48 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> |
46 | <view> | 49 | <view> |
47 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | 50 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> |
48 | <view class="D3_list_jDu"> | 51 | <view class="D3_list_jDu"> |
49 | <view class="D3_list1"> | 52 | <view class="D3_list1"> |
50 | <c-progress class="c-progress" :inner_widthProp="300"/> | 53 | <c-progress class="c-progress" :inner_widthProp="300"/> |
51 | <text>{{details.data.frame_width}}mm</text> | 54 | <text>{{details.data.frame_width}}mm</text> |
52 | </view> | 55 | </view> |
53 | <view>{{parameter[0].standard}}</view> | 56 | <view>{{parameter[0].standard}}</view> |
54 | </view> | 57 | </view> |
55 | </view> | 58 | </view> |
56 | <view> | 59 | <view> |
57 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | 60 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> |
58 | <view class="D3_list_jDu"> | 61 | <view class="D3_list_jDu"> |
59 | <view class="D3_list1"> | 62 | <view class="D3_list1"> |
60 | <c-progress class="c-progress" :inner_widthProp="190"/> | 63 | <c-progress class="c-progress" :inner_widthProp="190"/> |
61 | <view>{{details.data.glass_width}}mm</view> | 64 | <view>{{details.data.glass_width}}mm</view> |
62 | </view> | 65 | </view> |
63 | <view>{{parameter[1].standard}}</view> | 66 | <view>{{parameter[1].standard}}</view> |
64 | </view> | 67 | </view> |
65 | </view> | 68 | </view> |
66 | <view> | 69 | <view> |
67 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | 70 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> |
68 | <view class="D3_list_jDu"> | 71 | <view class="D3_list_jDu"> |
69 | <view class="D3_list1"> | 72 | <view class="D3_list1"> |
70 | <c-progress class="c-progress" :inner_widthProp="210"/> | 73 | <c-progress class="c-progress" :inner_widthProp="210"/> |
71 | <view>{{details.data.glass_height}}mm</view> | 74 | <view>{{details.data.glass_height}}mm</view> |
72 | </view> | 75 | </view> |
73 | <view>{{parameter[2].standard}}</view> | 76 | <view>{{parameter[2].standard}}</view> |
74 | </view> | 77 | </view> |
75 | </view> | 78 | </view> |
76 | <view> | 79 | <view> |
77 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | 80 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> |
78 | <view class="D3_list_jDu"> | 81 | <view class="D3_list_jDu"> |
79 | 82 | ||
80 | <view class="D3_list1"> | 83 | <view class="D3_list1"> |
81 | <c-progress class="c-progress" :inner_widthProp="160"/> | 84 | <c-progress class="c-progress" :inner_widthProp="160"/> |
82 | <view>{{details.data.nose_width}}mm</view> | 85 | <view>{{details.data.nose_width}}mm</view> |
83 | </view> | 86 | </view> |
84 | <view>{{parameter[3].standard}}</view> | 87 | <view>{{parameter[3].standard}}</view> |
85 | </view> | 88 | </view> |
86 | </view> | 89 | </view> |
87 | <view> | 90 | <view> |
88 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | 91 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> |
89 | <view class="D3_list_jDu"> | 92 | <view class="D3_list_jDu"> |
90 | <view class="D3_list1"> | 93 | <view class="D3_list1"> |
91 | <c-progress class="c-progress" :inner_widthProp="260"/> | 94 | <c-progress class="c-progress" :inner_widthProp="260"/> |
92 | <view>{{details.data.leg_long}}mm</view> | 95 | <view>{{details.data.leg_long}}mm</view> |
93 | </view> | 96 | </view> |
94 | <view>{{parameter[4].standard}}</view> | 97 | <view>{{parameter[4].standard}}</view> |
95 | </view> | 98 | </view> |
96 | </view> | 99 | </view> |
97 | <hr/> | 100 | <hr/> |
98 | </view> | 101 | </view> |
99 | </view> | 102 | </view> |
100 | <view class="part"> | 103 | <view class="part"> |
101 | <view class="size1"> | 104 | <view class="size1" @click="xialachange(2)"> |
102 | <view class="size1_1">配件</view> | 105 | <view class="size1_1" >配件</view> |
103 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | 106 | <view> |
107 | <span>+¥0.00</span> | ||
108 | <image v-bind:src="isNone[2].img"></image> | ||
109 | </view> | ||
104 | </view> | 110 | </view> |
105 | <view class="colour_exp">*0290</view> | 111 | <view class="colour_exp">*0290</view> |
106 | <view class="part_som"> | 112 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
107 | <view | 113 | <view |
108 | v-for="(part) in part" | 114 | v-for="(part) in part" |
109 | :key="part.key" | 115 | :key="part.key" |
110 | v-bind:class="{'size_viewed': part.is_actived}" | 116 | v-bind:class="{'size_viewed': part.is_actived}" |
111 | > | 117 | > |
112 | <image v-bind:src="part.img"></image> | 118 | <image v-bind:src="part.img"></image> |
113 | </view> | 119 | </view> |
114 | </view> | 120 | </view> |
115 | </view> | 121 | </view> |
116 | </view> | 122 | </view> |
117 | <view class="buy"> | 123 | <view class="buy"> |
118 | <view class="buy1">选了镜框,想选镜片?</view> | 124 | <view class="buy1">选了镜框,想选镜片?</view> |
119 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | 125 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
120 | <view class="buy3"> | 126 | <view class="buy3"> |
121 | <view class="buy3_1">暂时不选</view> | 127 | <view class="buy3_1">暂时不选</view> |
122 | <view class="buy3_2" @click="popArgs">立即去选</view> | 128 | <view class="buy3_2" @click="popArgs">立即去选</view> |
123 | </view> | 129 | </view> |
124 | </view> | 130 | </view> |
125 | <view class="zhanwei"></view> | 131 | <view class="zhanwei"></view> |
126 | <view class="button"><view>立即结算</view></view> | 132 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
127 | </view> | 133 | </view> |
128 | </template> | 134 | </template> |
129 | <script> | 135 | <script> |
130 | import CProgress from '../../components/UniSliper/UniSliper' | 136 | import CProgress from '../../components/UniSliper/UniSliper' |
131 | import store from '@/store' | 137 | import store from '@/store' |
132 | 138 | ||
133 | export default { | 139 | export default { |
134 | components: { | 140 | components: { |
135 | CProgress | 141 | CProgress |
136 | }, | 142 | }, |
137 | data(){ | 143 | data(){ |
138 | return{ | 144 | return{ |
139 | count: 1, | 145 | count: 1, |
140 | colour: '1.56非球面防蓝光_亚黑色', | 146 | // colour: '1.56非球面防蓝光_亚黑色', |
141 | chooseNum : '', | 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 | |||
164 | //尺寸 | ||
142 | parameter:[ | 165 | parameter:[ |
143 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 166 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
144 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 167 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
145 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 168 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
146 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | 169 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
147 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | 170 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
148 | ], | 171 | ], |
149 | //配饰 | 172 | //配饰 |
150 | part:[ | 173 | part:[ |
151 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | 174 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
152 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 175 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
153 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 176 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
154 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 177 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
155 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 178 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
156 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 179 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
157 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 180 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
158 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 181 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
159 | ], | 182 | ], |
160 | } | 183 | } |
161 | }, | 184 | }, |
162 | 185 | ||
163 | computed: { | 186 | computed: { |
164 | details(){ | 187 | details(){ |
165 | return this.$store.state.detailStandard_k.list | 188 | return this.$store.state.detailStandard_k.list |
166 | }, | 189 | }, |
167 | }, | 190 | }, |
168 | onLoad:function(){ | 191 | onLoad:function(){ |
169 | store.dispatch('detailStandard_k/fetch', { | 192 | store.dispatch('detailStandard_k/fetch', { |
170 | uid: "1", | 193 | uid: "1", |
171 | pid: "26", | 194 | pid: "26", |
195 | p_root_index: "2" | ||
172 | }); | 196 | }); |
173 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); | 197 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); |
174 | }, | 198 | }, |
175 | methods: { | 199 | methods: { |
176 | counter(isadd){ | 200 | counter(isadd){ |
177 | if(isadd){ | 201 | if(isadd){ |
178 | this.count++ | 202 | this.count++ |
179 | }else{ | 203 | }else{ |
180 | this.count <= 1? this.disabled = true:this.count-- | 204 | this.count <= 1? this.disabled = true:this.count-- |
181 | } | 205 | } |
182 | }, | 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 | }, | ||
183 | colourChange(index,e){ | 215 | colourChange(index,e){ |
184 | this.colour = e ; //颜色选择 | 216 | this.navData.colour = e ; //颜色选择 |
185 | // console.log(index,e); | 217 | console.log(index,this.navData.colour); |
186 | 218 | ||
187 | }, | 219 | }, |
188 | viewChoose(index){ | 220 | viewChoose(index,e){ |
189 | this.chooseNum = index | 221 | this.chooseNum = index |
190 | }, | 222 | }, |
191 | popArgs(){ | 223 | popArgs(){ |
192 | uni.navigateTo({ | 224 | uni.navigateTo({ |
193 | url: '../detailsChoiceArgs/detailsChoiceArgs', | 225 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
194 | success: res => {}, | 226 | success: res => {}, |
195 | fail: () => {}, | 227 | fail: () => {}, |
196 | complete: () => {} | 228 | complete: () => {} |
197 | }); | 229 | }); |
198 | } | 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 | }, | ||
199 | } | 241 | } |
200 | 242 | ||
201 | } | 243 | } |
202 | </script> | 244 | </script> |
203 | 245 | ||
204 | <style lang="scss"> | 246 | <style lang="scss"> |
205 | .container{ | 247 | .container{ |
206 | min-height: 100vh; | 248 | min-height: 100vh; |
207 | background: #F2F2F2; | 249 | background: #F2F2F2; |
208 | padding-top: 10px; | 250 | padding-top: 10px; |
209 | box-sizing: border-box; | 251 | box-sizing: border-box; |
210 | } | 252 | } |
211 | hr{ | 253 | hr{ |
212 | border: none; | 254 | border: none; |
213 | height: 1px; | 255 | height: 1px; |
214 | background: #F2F2F2; | 256 | background: #F2F2F2; |
215 | margin-top: 18px; | 257 | margin-top: 18px; |
216 | } | 258 | } |
217 | .detail{ | 259 | .detail{ |
218 | height: 272rpx; | 260 | height: 272rpx; |
219 | background: #FFFFFF; | 261 | background: #FFFFFF; |
220 | border-radius: 8px; | 262 | border-radius: 8px; |
221 | padding: 16px; | 263 | padding: 16px; |
222 | box-sizing: border-box; | 264 | box-sizing: border-box; |
223 | display: flex; | 265 | display: flex; |
224 | justify-content: space-between; | 266 | justify-content: space-between; |
225 | align-items: center; | 267 | align-items: center; |
226 | } | 268 | } |
227 | .detail1{ | 269 | .detail1{ |
228 | height: 178rpx; | 270 | height: 178rpx; |
229 | width: 188rpx; | 271 | width: 188rpx; |
230 | image{ | 272 | image{ |
231 | width: 100%; | 273 | width: 100%; |
232 | height: 100%; | 274 | height: 100%; |
233 | border-radius: 8px; | 275 | border-radius: 8px; |
234 | } | 276 | } |
235 | } | 277 | } |
236 | .detail2{ | 278 | .detail2{ |
237 | width: 68%; | 279 | width: 68%; |
238 | view{ | 280 | view{ |
239 | margin-bottom: 6px; | 281 | margin-bottom: 6px; |
240 | font-family: PingFangSC-Regular; | 282 | font-family: PingFangSC-Regular; |
241 | } | 283 | } |
242 | .detail2_name{ | 284 | .detail2_name{ |
243 | font-size: 14px; | 285 | font-size: 14px; |
244 | color: #333333; | 286 | color: #333333; |
245 | letter-spacing: -0.26px; | 287 | letter-spacing: -0.26px; |
246 | line-height: 18px; | 288 | line-height: 18px; |
247 | overflow:hidden; | 289 | overflow:hidden; |
248 | text-overflow:ellipsis; | 290 | text-overflow:ellipsis; |
249 | display:-webkit-box; | 291 | display:-webkit-box; |
250 | -webkit-box-orient:vertical; | 292 | -webkit-box-orient:vertical; |
251 | -webkit-line-clamp:2; | 293 | -webkit-line-clamp:2; |
252 | } | 294 | } |
253 | .detail2_tui{ | 295 | .detail2_tui{ |
254 | font-size: 10px; | 296 | font-size: 10px; |
255 | color: #999999; | 297 | color: #999999; |
256 | letter-spacing: -0.19px; | 298 | letter-spacing: -0.19px; |
257 | span{ | 299 | span{ |
258 | margin-right: 10px; | 300 | margin-right: 10px; |
259 | } | 301 | } |
260 | } | 302 | } |
261 | .detail2_price{ | 303 | .detail2_price{ |
262 | font-size: 14px; | 304 | font-size: 14px; |
263 | color: #FF6B4A; | 305 | color: #FF6B4A; |
264 | letter-spacing: -0.26px; | 306 | letter-spacing: -0.26px; |
265 | } | 307 | } |
266 | } | 308 | } |
267 | .counter{ | 309 | .counter{ |
268 | display: flex; | 310 | display: flex; |
269 | flex-direction: row; | 311 | flex-direction: row; |
270 | justify-content: space-between; | 312 | justify-content: space-between; |
271 | font-size: 28rpx; | 313 | font-size: 28rpx; |
272 | color: #333333; | 314 | color: #333333; |
273 | width: 122rpx; | 315 | width: 122rpx; |
274 | float: right; | 316 | float: right; |
275 | .btn{ | 317 | .btn{ |
276 | display: flex; | 318 | display: flex; |
277 | justify-content: center; | 319 | justify-content: center; |
278 | line-height: 32rpx; | 320 | line-height: 32rpx; |
279 | height: 32rpx; | 321 | height: 32rpx; |
280 | width: 32rpx; | 322 | width: 32rpx; |
281 | background-color: #F2F2F2; | 323 | background-color: #F2F2F2; |
282 | color: #CFCFCF; | 324 | color: #CFCFCF; |
283 | } | 325 | } |
284 | } | 326 | } |
285 | .choose{ | 327 | .choose{ |
286 | background: #FFFFFF; | 328 | background: #FFFFFF; |
287 | padding: 16px; | 329 | padding: 16px; |
288 | box-sizing: border-box; | 330 | box-sizing: border-box; |
289 | margin-top: 10px; | 331 | margin-top: 10px; |
290 | border-radius: 8px; | 332 | border-radius: 8px; |
291 | .colour1{ | 333 | .colour1{ |
292 | span{ | 334 | span{ |
293 | font-family: PingFangSC-Medium; | 335 | font-family: PingFangSC-Medium; |
294 | font-size: 16px; | 336 | font-size: 16px; |
295 | color: #333333; | 337 | color: #333333; |
296 | letter-spacing: -0.3px; | 338 | letter-spacing: -0.3px; |
297 | text-align: justify; | 339 | text-align: justify; |
298 | line-height: 24px; | 340 | line-height: 24px; |
299 | font-weight: bold; | 341 | font-weight: bold; |
300 | } | 342 | } |
301 | image{ | 343 | image{ |
302 | float: right; | 344 | float: right; |
303 | width: 40rpx; | 345 | width: 40rpx; |
304 | height: 36rpx; | 346 | height: 36rpx; |
305 | } | 347 | } |
306 | } | 348 | } |
307 | .colour_exp{ | 349 | .colour_exp{ |
308 | font-family: PingFangSC-Regular; | 350 | font-family: PingFangSC-Regular; |
309 | font-size: 12px; | 351 | font-size: 12px; |
310 | color: #666666; | 352 | color: #666666; |
311 | letter-spacing: 0; | 353 | letter-spacing: 0; |
312 | margin-top: 10px; | 354 | margin-top: 10px; |
313 | margin-bottom: 10px; | 355 | margin-bottom: 10px; |
314 | } | 356 | } |
315 | .colour2{ | 357 | .colour2{ |
316 | display: grid; | 358 | display: grid; |
317 | grid-template-columns: repeat(5, 17%); | 359 | grid-template-columns: repeat(5, 17%); |
318 | justify-content: space-between ; | 360 | justify-content: space-between ; |
319 | grid-row-gap: 10px; | 361 | grid-row-gap: 10px; |
320 | margin-bottom: 14px; | 362 | margin-bottom: 14px; |
321 | .colour2_view{ | 363 | .colour2_view{ |
322 | border: 1px solid #F2F2F2; | 364 | border: 1px solid #F2F2F2; |
323 | image{ | 365 | image{ |
324 | width: 100rpx; | 366 | width: 100rpx; |
325 | height: 60rpx; | 367 | height: 60rpx; |
326 | } | 368 | } |
327 | } | 369 | } |
328 | .colour2_viewed{ | 370 | .colour2_viewed{ |
329 | border: 1px solid #FF6B4A; | 371 | border: 1px solid #FF6B4A; |
330 | image{ | 372 | image{ |
331 | width: 100rpx; | 373 | width: 100rpx; |
332 | height: 60rpx; | 374 | height: 60rpx; |
333 | } | 375 | } |
334 | } | 376 | } |
335 | } | 377 | } |
378 | .colour2_none{ | ||
379 | display: none; | ||
380 | } | ||
336 | } | 381 | } |
337 | .size,.part{ | 382 | .size,.part{ |
338 | margin-top:14px; | 383 | margin-top:14px; |
339 | .size1{ | 384 | .size1{ |
340 | display: flex; | 385 | display: flex; |
341 | justify-content: space-between; | 386 | justify-content: space-between; |
342 | margin-bottom: 10px; | 387 | margin-bottom: 10px; |
343 | .size1_1{ | 388 | .size1_1{ |
344 | font-weight: bold; | 389 | font-weight: bold; |
345 | font-family: PingFangSC-Medium; | 390 | font-family: PingFangSC-Medium; |
346 | font-size: 16px; | 391 | font-size: 16px; |
347 | color: #333333; | 392 | color: #333333; |
348 | letter-spacing: -0.3px; | 393 | letter-spacing: -0.3px; |
349 | line-height: 24px; | 394 | line-height: 24px; |
350 | } | 395 | } |
351 | view{ | 396 | view{ |
352 | span{ | 397 | span{ |
353 | font-family: PingFangSC-Regular; | 398 | font-family: PingFangSC-Regular; |
354 | font-size: 14px; | 399 | font-size: 14px; |
355 | color: #FF6B4A; | 400 | color: #FF6B4A; |
356 | letter-spacing: -0.26px; | 401 | letter-spacing: -0.26px; |
357 | margin-right: 12px; | 402 | margin-right: 12px; |
358 | } | 403 | } |
359 | image{ | 404 | image{ |
360 | width: 40rpx; | 405 | width: 40rpx; |
361 | height: 36rpx; | 406 | height: 36rpx; |
362 | } | 407 | } |
363 | } | 408 | } |
364 | } | 409 | } |
365 | .size2{ | 410 | .size2{ |
366 | view{ | 411 | view{ |
367 | display: inline-flex; | 412 | display: inline-flex; |
368 | align-items: center; | 413 | align-items: center; |
369 | justify-content: center; //字体居中 | 414 | justify-content: center; //字体居中 |
370 | margin-right: 12px; | 415 | margin-right: 12px; |
371 | margin-bottom: 20px; | 416 | margin-bottom: 20px; |
372 | width: 136rpx; | 417 | width: 136rpx; |
373 | height: 60rpx; | 418 | height: 60rpx; |
374 | background: #F2F2F2; | 419 | background: #F2F2F2; |
375 | border-radius: 2px; | 420 | border-radius: 2px; |
376 | font-family: PingFangSC-Regular; | 421 | font-family: PingFangSC-Regular; |
377 | font-size: 12px; | 422 | font-size: 12px; |
378 | color: #666666; | 423 | color: #666666; |
379 | } | 424 | } |
380 | view:hover{ | 425 | view:hover{ |
381 | color: #FF6B4A; | 426 | color: #FF6B4A; |
382 | background: rgba(255,107,74,0.15); | 427 | background: rgba(255,107,74,0.15); |
383 | } | 428 | } |
384 | } | 429 | } |
385 | .D3_list{ | 430 | .D3_list{ |
386 | margin-bottom: 4px; | 431 | margin-bottom: 4px; |
387 | } | 432 | } |
388 | .D3_list>view{ | 433 | .D3_list>view{ |
389 | display: flex; | 434 | display: flex; |
390 | align-content: center; | 435 | align-content: center; |
391 | margin-bottom: 10px; | 436 | margin-bottom: 10px; |
392 | view{ | 437 | view{ |
393 | margin-right: 10px; | 438 | margin-right: 10px; |
394 | } | 439 | } |
395 | } | 440 | } |
396 | .D3_list image{ | 441 | .D3_list image{ |
397 | width: 50px; | 442 | width: 50px; |
398 | height: 25px; | 443 | height: 25px; |
399 | margin-right: 6px; | 444 | margin-right: 6px; |
400 | } | 445 | } |
401 | .D3_list span{ | 446 | .D3_list span{ |
402 | margin-left: 6px; | 447 | margin-left: 6px; |
403 | margin-right: 5px; | 448 | margin-right: 5px; |
404 | font-family: 'PingFangSC-Regular'; | 449 | font-family: 'PingFangSC-Regular'; |
405 | } | 450 | } |
406 | .D3_list_jDu{ | 451 | .D3_list_jDu{ |
407 | view{ | 452 | view{ |
408 | font-family: PingFangSC-Regular; | 453 | font-family: PingFangSC-Regular; |
409 | font-size: 10px; | 454 | font-size: 10px; |
410 | color: #999999; | 455 | color: #999999; |
411 | letter-spacing: -0.19px; | 456 | letter-spacing: -0.19px; |
412 | } | 457 | } |
413 | .D3_list1{ | 458 | .D3_list1{ |
414 | display: flex; | 459 | display: flex; |
415 | } | 460 | } |
416 | } | 461 | } |
417 | } | 462 | } |
418 | .part{ | 463 | .part{ |
419 | .part_som{ | 464 | .part_som{ |
420 | display: grid; | 465 | display: grid; |
421 | justify-content: space-between; | 466 | justify-content: space-between; |
422 | grid-template-columns: repeat(4, 22%); | 467 | grid-template-columns: repeat(4, 22%); |
423 | grid-row-gap: 12px; | 468 | grid-row-gap: 12px; |
424 | margin-bottom: 14px; | 469 | margin-bottom: 14px; |
425 | view{ | 470 | view{ |
426 | border: 1px solid #F2F2F2; | 471 | border: 1px solid #F2F2F2; |
427 | height: 72rpx; | 472 | height: 72rpx; |
428 | image{ | 473 | image{ |
429 | width: 100%; | 474 | width: 100%; |
430 | height: 100%; | 475 | height: 100%; |
431 | } | 476 | } |
432 | } | 477 | } |
433 | .size_viewed{ | 478 | .size_viewed{ |
434 | border: 1px solid #FF6B4A; | 479 | border: 1px solid #FF6B4A; |
435 | height: 72rpx; | 480 | height: 72rpx; |
436 | image{ | 481 | image{ |
437 | width: 100%; | 482 | width: 100%; |
438 | height: 100%; | 483 | height: 100%; |
439 | } | 484 | } |
440 | } | 485 | } |
441 | } | 486 | } |
487 | .colour2_none{ | ||
488 | display: none; | ||
489 | } | ||
442 | } | 490 | } |
443 | 491 | ||
444 | .buy{ | 492 | .buy{ |
445 | height: 300rpx; | 493 | height: 300rpx; |
446 | background: #FFFFFF ; | 494 | background: #FFFFFF ; |
447 | margin-top: 10px; | 495 | margin-top: 10px; |
448 | border-radius: 8px; | 496 | border-radius: 8px; |
449 | padding-top: 20px; | 497 | padding-top: 20px; |
450 | box-sizing: border-box; | 498 | box-sizing: border-box; |
451 | margin-bottom: 20px; | 499 | margin-bottom: 20px; |
452 | } | 500 | } |
453 | .buy1{ | 501 | .buy1{ |
454 | font-family: PingFangSC-Medium; | 502 | font-family: PingFangSC-Medium; |
455 | font-size: 16px; | 503 | font-size: 16px; |
456 | font-weight: bold; | 504 | font-weight: bold; |
457 | color: #333333; | 505 | color: #333333; |
458 | text-align: center; | 506 | text-align: center; |
459 | } | 507 | } |
460 | .buy2{ | 508 | .buy2{ |
461 | font-family: PingFangSC-Regular; | 509 | font-family: PingFangSC-Regular; |
462 | font-size: 12px; | 510 | font-size: 12px; |
463 | color: #999999; | 511 | color: #999999; |
464 | text-align: center; | 512 | text-align: center; |
465 | margin: 10px; | 513 | margin: 10px; |
466 | } | 514 | } |
467 | .buy3{ | 515 | .buy3{ |
468 | font-family: PingFangSC-Regular; | 516 | font-family: PingFangSC-Regular; |
469 | font-size: 16px; | 517 | font-size: 16px; |
470 | display: flex; | 518 | display: flex; |
471 | justify-content: center; | 519 | justify-content: center; |
472 | margin-top: 14px; | 520 | margin-top: 14px; |
473 | view{ | 521 | view{ |
474 | border-radius: 20px; | 522 | border-radius: 20px; |
475 | width: 240rpx; | 523 | width: 240rpx; |
476 | height: 80rpx; | 524 | height: 80rpx; |
477 | display: flex; | 525 | display: flex; |
478 | justify-content: center; | 526 | justify-content: center; |
479 | align-items: center; | 527 | align-items: center; |
480 | } | 528 | } |
481 | .buy3_1{ | 529 | .buy3_1{ |
482 | margin-right: 20px; | 530 | margin-right: 20px; |
483 | background: rgba(255,107,74,0.15); | 531 | background: rgba(255,107,74,0.15); |
484 | color: #FF6B4A ; | 532 | color: #FF6B4A ; |
485 | } | 533 | } |
486 | .buy3_2{ | 534 | .buy3_2{ |
487 | background: #FF6B4A; | 535 | background: #FF6B4A; |
488 | color: #FFFFFF ; | 536 | color: #FFFFFF ; |
489 | } | 537 | } |
490 | } | 538 | } |
491 | .zhanwei{ | 539 | .zhanwei{ |
492 | background: #F2F2F2; | 540 | background: #F2F2F2; |
493 | height: 120rpx; | 541 | height: 120rpx; |
494 | } | 542 | } |
495 | .button{ | 543 | .button{ |
496 | position: fixed; | 544 | position: fixed; |
497 | bottom: 0; | 545 | bottom: 0; |
498 | width:100%; | 546 | width:100%; |
499 | height: 112rpx; | 547 | height: 112rpx; |
500 | background: #FF6B4A 100%; | 548 | background: #FF6B4A 100%; |
501 | view{ | 549 | view{ |
502 | color: #FFFFFF; | 550 | color: #FFFFFF; |
503 | height: 100%; | 551 | height: 100%; |
504 | display: flex; | 552 | display: flex; |
505 | justify-content: center; | 553 | justify-content: center; |
506 | align-items: center; | 554 | align-items: center; |
507 | font-family: PingFangSC-Regular; | 555 | font-family: PingFangSC-Regular; |
508 | font-size: 16px; | 556 | font-size: 16px; |
509 | } | 557 | } |
510 | } | 558 | } |
511 | </style> | 559 | </style> |
src/pages/detailStandard/detailStandard_sun.vue
1 | <template> | 1 | <template> |
2 | <view class="container"> | 2 | <view> |
3 | <view class="container" v-if="type===2"> | ||
3 | <view class="detail"> | 4 | <view class="detail"> |
4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | 5 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> |
5 | <view class="detail2"> | 6 | <view class="detail2"> |
6 | <view class="detail2_name">{{details.data.p_name}}</view> | 7 | <view class="detail2_name">{{details.data.p_name}}</view> |
7 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> | 8 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> |
8 | <view class="detail2_price"> | 9 | <view class="detail2_price"> |
9 | <text>¥{{details.data.p_sale_price*count}}</text> | 10 | <text>¥{{details.data.p_sale_price*count}}</text> |
10 | <view class="counter"> | 11 | <view class="counter"> |
11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 12 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
12 | <text>{{count}}</text> | 13 | <text>{{count}}</text> |
13 | <view class="btn" @click="counter(true)">+</view> | 14 | <view class="btn" @click="counter(true)">+</view> |
14 | </view> | 15 | </view> |
15 | </view> | 16 | </view> |
16 | </view> | 17 | </view> |
17 | </view> | 18 | </view> |
18 | <view class="choose"> | 19 | <view class="choose"> |
19 | <view class="colour"> | 20 | <view class="colour"> |
20 | <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> | 21 | <view class="colour1" @click="xialachange(0)"> |
21 | <view class="colour_exp">*{{colour}}</view> | 22 | <text>框架颜色</text> |
23 | <image v-bind:src="isNone[0].img"></image> | ||
24 | </view> | ||
25 | <view class="colour_exp">*{{navData.colour}}</view> | ||
22 | <view> | 26 | <view> |
23 | <view class="colour2"> | 27 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
24 | <view | 28 | <view |
25 | v-for="(items,index) in details.data.skuList" | 29 | v-for="(items,index) in details.data.skuList" |
26 | :key="index" | 30 | :key="index" |
27 | @click="viewChoose(index)" | 31 | @click="viewChoose(index)" |
28 | class="colour2_view" | 32 | class="colour2_view" |
29 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 33 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
30 | > | 34 | > |
31 | <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> |
32 | </view> | 36 | </view> |
33 | </view> | 37 | </view> |
34 | </view> | 38 | </view> |
35 | <hr/> | 39 | <hr/> |
36 | </view> | 40 | </view> |
37 | <view class="colour"> | 41 | <view class="colour"> |
38 | <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view> | 42 | <view class="colour1" @click="xialachange(1)"> |
43 | <text>镜片颜色</text> | ||
44 | <image v-bind:src="isNone[1].img"></image> | ||
45 | </view> | ||
39 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | 46 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
40 | <view> | 47 | <view v-bind:class="{'colour2_none' : isNone[1].state}"> |
41 | <view class="jp_colour2"> | 48 | <view class="jp_colour2"> |
42 | <view | 49 | <view |
43 | v-for="(items,index) in jp_colour" | 50 | v-for="(items,index) in jp_colour" |
44 | :key="index" | 51 | :key="index" |
45 | class="jp_colour2_view" | 52 | class="jp_colour2_view" |
46 | > | 53 | > |
47 | <image v-bind:src="items.img"></image> | 54 | <image v-bind:src="items.img"></image> |
48 | </view> | 55 | </view> |
49 | </view> | 56 | </view> |
50 | </view> | 57 | </view> |
51 | <hr/> | 58 | <hr/> |
52 | </view> | 59 | </view> |
53 | <view class="colour"> | 60 | <view class="colour"> |
54 | <view class="colour1"> | 61 | <view class="colour1" @click="xialachange(2)"> |
55 | <text>{{details.data.attrList[0].meta_name}}</text> | 62 | <text>{{details.data.attrList[0].meta_name}}</text> |
56 | <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> | 63 | <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> |
57 | <image src="/static/img/detail/xiala.png"></image> | 64 | <image v-bind:src="isNone[2].img"></image> |
58 | </view> | 65 | </view> |
59 | <view> | 66 | <view> |
60 | <view class="split"> | 67 | <view class="colour_exp">*{{navData.split}}</view> |
68 | <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> | ||
61 | <view | 69 | <view |
62 | v-for="(items,index) in details.data.attrList[0].attr" | 70 | v-for="(items,index) in details.data.attrList[0].attr" |
63 | :key="index" | 71 | :key="index" |
64 | > | 72 | > |
65 | <view | 73 | <view |
66 | class="split_colour2" | 74 | class="split_colour2" |
67 | @click="splitChoose(index)" | 75 | @click="splitChoose(index,items.name)" |
68 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" | 76 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" |
69 | >{{items.name}}</view> | 77 | >{{items.name}}</view> |
70 | </view> | 78 | </view> |
71 | </view> | 79 | </view> |
72 | </view> | 80 | </view> |
73 | <hr/> | 81 | <hr/> |
74 | </view> | 82 | </view> |
75 | <view class="size"> | 83 | <view class="size"> |
76 | <view class="size1"> | 84 | <view class="size1" @click="xialachange(3)"> |
77 | <view class="size1_1">框架尺寸</view> | 85 | <view class="size1_1">框架尺寸</view> |
78 | <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> | 86 | <view><image v-bind:src="isNone[3].img"></image></view> |
79 | </view> | 87 | </view> |
80 | <view class="colour"> | 88 | <view class="colour"> |
81 | <view class="colour_exp">*{{colour}}</view> | 89 | <view class="colour_exp">*{{navData.colour}}</view> |
82 | </view> | 90 | </view> |
83 | <view class="D3_list"> | 91 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> |
84 | <view> | 92 | <view> |
85 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | 93 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> |
86 | <view class="D3_list_jDu"> | 94 | <view class="D3_list_jDu"> |
87 | <view class="D3_list1"> | 95 | <view class="D3_list1"> |
88 | <c-progress class="c-progress" :inner_widthProp="300"/> | 96 | <c-progress class="c-progress" :inner_widthProp="300"/> |
89 | <text>{{details.data.frame_width}}mm</text> | 97 | <text>{{details.data.frame_width}}mm</text> |
90 | </view> | 98 | </view> |
91 | <view>{{parameter[0].standard}}</view> | 99 | <view>{{parameter[0].standard}}</view> |
92 | </view> | 100 | </view> |
93 | </view> | 101 | </view> |
94 | <view> | 102 | <view> |
95 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | 103 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> |
96 | <view class="D3_list_jDu"> | 104 | <view class="D3_list_jDu"> |
97 | <view class="D3_list1"> | 105 | <view class="D3_list1"> |
98 | <c-progress class="c-progress" :inner_widthProp="190"/> | 106 | <c-progress class="c-progress" :inner_widthProp="190"/> |
99 | <view>{{details.data.glass_width}}mm</view> | 107 | <view>{{details.data.glass_width}}mm</view> |
100 | </view> | 108 | </view> |
101 | <view>{{parameter[1].standard}}</view> | 109 | <view>{{parameter[1].standard}}</view> |
102 | </view> | 110 | </view> |
103 | </view> | 111 | </view> |
104 | <view> | 112 | <view> |
105 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | 113 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> |
106 | <view class="D3_list_jDu"> | 114 | <view class="D3_list_jDu"> |
107 | <view class="D3_list1"> | 115 | <view class="D3_list1"> |
108 | <c-progress class="c-progress" :inner_widthProp="210"/> | 116 | <c-progress class="c-progress" :inner_widthProp="210"/> |
109 | <view>{{details.data.glass_height}}mm</view> | 117 | <view>{{details.data.glass_height}}mm</view> |
110 | </view> | 118 | </view> |
111 | <view>{{parameter[2].standard}}</view> | 119 | <view>{{parameter[2].standard}}</view> |
112 | </view> | 120 | </view> |
113 | </view> | 121 | </view> |
114 | <view> | 122 | <view> |
115 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | 123 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> |
116 | <view class="D3_list_jDu"> | 124 | <view class="D3_list_jDu"> |
117 | 125 | ||
118 | <view class="D3_list1"> | 126 | <view class="D3_list1"> |
119 | <c-progress class="c-progress" :inner_widthProp="160"/> | 127 | <c-progress class="c-progress" :inner_widthProp="160"/> |
120 | <view>{{details.data.nose_width}}mm</view> | 128 | <view>{{details.data.nose_width}}mm</view> |
121 | </view> | 129 | </view> |
122 | <view>{{parameter[3].standard}}</view> | 130 | <view>{{parameter[3].standard}}</view> |
123 | </view> | 131 | </view> |
124 | </view> | 132 | </view> |
125 | <view> | 133 | <view> |
126 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | 134 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> |
127 | <view class="D3_list_jDu"> | 135 | <view class="D3_list_jDu"> |
128 | <view class="D3_list1"> | 136 | <view class="D3_list1"> |
129 | <c-progress class="c-progress" :inner_widthProp="260"/> | 137 | <c-progress class="c-progress" :inner_widthProp="260"/> |
130 | <view>{{details.data.leg_long}}mm</view> | 138 | <view>{{details.data.leg_long}}mm</view> |
131 | </view> | 139 | </view> |
132 | <view>{{parameter[4].standard}}</view> | 140 | <view>{{parameter[4].standard}}</view> |
133 | </view> | 141 | </view> |
134 | </view> | 142 | </view> |
135 | <hr/> | ||
136 | </view> | 143 | </view> |
144 | <hr/> | ||
137 | </view> | 145 | </view> |
138 | <view class="part"> | 146 | <view class="part"> |
139 | <view class="size1"> | 147 | <view class="size1" @click="xialachange(4)"> |
140 | <view class="size1_1">配件</view> | 148 | <view class="size1_1">配件</view> |
141 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | 149 | <view><span>+¥0.00</span><image v-bind:src="isNone[4].img"></image></view> |
150 | </view> | ||
151 | <view class="colour_exp">*0290</view> | ||
152 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> | ||
153 | <view | ||
154 | v-for="(part) in part" | ||
155 | :key="part.key" | ||
156 | v-bind:class="{'size_viewed': part.is_actived}" | ||
157 | > | ||
158 | <image v-bind:src="part.img"></image> | ||
159 | </view> | ||
160 | </view> | ||
161 | </view> | ||
162 | </view> | ||
163 | <view class="buy"> | ||
164 | <view class="buy1">选了镜框,想选镜片?</view> | ||
165 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | ||
166 | <view class="buy3"> | ||
167 | <view class="buy3_1">暂时不选</view> | ||
168 | <view class="buy3_2" @click="popArgs">立即去选</view> | ||
169 | </view> | ||
170 | </view> | ||
171 | <template > | ||
172 | <view class="goods-form"> | ||
173 | <text class="p1">填写验光数据</text> | ||
174 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | ||
175 | <view class="picker" > | ||
176 | <view class="picker-choice"> | ||
177 | <view class="choice-left"> | ||
178 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | ||
179 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | ||
180 | </view> | ||
181 | <text class="p13">左 (OD)</text> | ||
182 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | ||
183 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | ||
184 | <image src="../../static/detail-tabicon.png" ></image> | ||
185 | </picker> | ||
186 | <text class="p13">右 (OS)</text> | ||
187 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | ||
188 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | ||
189 | <image src="../../static/detail-tabicon.png" ></image> | ||
190 | </picker> | ||
191 | </view> | ||
192 | </view> | ||
193 | <view class="picker" > | ||
194 | <view class="picker-choice"> | ||
195 | <view class="choice-left"> | ||
196 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | ||
197 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | ||
198 | </view> | ||
199 | <text class="p13">左 (OD)</text> | ||
200 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | ||
201 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | ||
202 | <image src="../../static/detail-tabicon.png" ></image> | ||
203 | </picker> | ||
204 | <text class="p13">右 (OS)</text> | ||
205 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | ||
206 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | ||
207 | <image src="../../static/detail-tabicon.png" ></image> | ||
208 | </picker> | ||
209 | </view> | ||
210 | </view> | ||
211 | <view class="picker" > | ||
212 | <view class="picker-choice"> | ||
213 | <view class="choice-left"> | ||
214 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | ||
215 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | ||
216 | </view> | ||
217 | <text class="p13">左 (OD)</text> | ||
218 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | ||
219 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | ||
220 | <image src="../../static/detail-tabicon.png" ></image> | ||
221 | </picker> | ||
222 | <text class="p13">右 (OS)</text> | ||
223 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | ||
224 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | ||
225 | <image src="../../static/detail-tabicon.png" ></image> | ||
226 | </picker> | ||
227 | </view> | ||
228 | </view> | ||
229 | <view class="picker" > | ||
230 | <view class="picker-choice"> | ||
231 | <view class="choice-left"> | ||
232 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | ||
233 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | ||
234 | </view> | ||
235 | <text class="p13">左 (OD)</text> | ||
236 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | ||
237 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | ||
238 | <image src="../../static/detail-tabicon.png" ></image> | ||
239 | </picker> | ||
240 | <text class="p13">右 (OS)</text> | ||
241 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | ||
242 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | ||
243 | <image src="../../static/detail-tabicon.png" ></image> | ||
244 | </picker> | ||
245 | </view> | ||
246 | </view> | ||
247 | <view class="picker" > | ||
248 | <view class="picker-choice"> | ||
249 | <view class="choice-left"> | ||
250 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | ||
251 | </view> | ||
252 | <text class="p13-date">年 (Y)</text> | ||
253 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | ||
254 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | ||
255 | <image src="../../static/detail-tabicon.png" ></image> | ||
256 | </picker> | ||
257 | <text class="p13-date">月 (M)</text> | ||
258 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | ||
259 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | ||
260 | <image src="../../static/detail-tabicon.png" ></image> | ||
261 | </picker> | ||
262 | <text class="p13-date">日 (D)</text> | ||
263 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | ||
264 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | ||
265 | <image src="../../static/detail-tabicon.png" ></image> | ||
266 | </picker> | ||
267 | </view> | ||
268 | </view> | ||
269 | <view class="confirm"> | ||
270 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | ||
271 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
272 | </view> | ||
273 | </view> | ||
274 | |||
275 | </template> | ||
276 | <view class="zhanwei"></view> | ||
277 | <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> | ||
278 | </view> | ||
279 | <view class="container" v-if="type===4"> | ||
280 | <view class="detail"> | ||
281 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | ||
282 | <view class="detail2"> | ||
283 | <view class="detail2_name">{{details.data.p_name}}</view> | ||
284 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | ||
285 | <view class="detail2_price"> | ||
286 | <span>¥{{details.data.p_sale_price*count}}</span> | ||
287 | <view class="counter"> | ||
288 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | ||
289 | <text>{{count}}</text> | ||
290 | <view class="btn" @click="counter(true)">+</view> | ||
291 | </view> | ||
292 | </view> | ||
293 | </view> | ||
294 | </view> | ||
295 | <view class="choose"> | ||
296 | <view class="colour"> | ||
297 | <view class="colour1" @click="xialachange(0)"> | ||
298 | <text>框架颜色</text> | ||
299 | <image v-bind:src="isNone[0].img"></image> | ||
300 | </view> | ||
301 | <view class="colour_exp">*{{navData.colour}}</view> | ||
302 | <view> | ||
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" | ||
307 | @click="viewChoose(index)" | ||
308 | class="colour2_view" | ||
309 | v-bind:class="{'colour2_viewed': chooseNum == index}" | ||
310 | > | ||
311 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | ||
312 | </view> | ||
313 | </view> | ||
314 | </view> | ||
315 | <hr/> | ||
316 | </view> | ||
317 | <view class="size"> | ||
318 | <view class="size1" @click="xialachange(1)"> | ||
319 | <view class="size1_1">框架尺寸</view> | ||
320 | <view><image v-bind:src="isNone[1].img"></image></view> | ||
321 | </view> | ||
322 | <view class="colour"> | ||
323 | <view class="colour_exp">*{{navData.colour}}</view> | ||
324 | </view> | ||
325 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> | ||
326 | <view> | ||
327 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | ||
328 | <view class="D3_list_jDu"> | ||
329 | <view class="D3_list1"> | ||
330 | <c-progress class="c-progress" :inner_widthProp="300"/> | ||
331 | <text>{{details.data.frame_width}}mm</text> | ||
332 | </view> | ||
333 | <view>{{parameter[0].standard}}</view> | ||
334 | </view> | ||
335 | </view> | ||
336 | <view> | ||
337 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | ||
338 | <view class="D3_list_jDu"> | ||
339 | <view class="D3_list1"> | ||
340 | <c-progress class="c-progress" :inner_widthProp="190"/> | ||
341 | <view>{{details.data.glass_width}}mm</view> | ||
342 | </view> | ||
343 | <view>{{parameter[1].standard}}</view> | ||
344 | </view> | ||
345 | </view> | ||
346 | <view> | ||
347 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | ||
348 | <view class="D3_list_jDu"> | ||
349 | <view class="D3_list1"> | ||
350 | <c-progress class="c-progress" :inner_widthProp="210"/> | ||
351 | <view>{{details.data.glass_height}}mm</view> | ||
352 | </view> | ||
353 | <view>{{parameter[2].standard}}</view> | ||
354 | </view> | ||
355 | </view> | ||
356 | <view> | ||
357 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | ||
358 | <view class="D3_list_jDu"> | ||
359 | |||
360 | <view class="D3_list1"> | ||
361 | <c-progress class="c-progress" :inner_widthProp="160"/> | ||
362 | <view>{{details.data.nose_width}}mm</view> | ||
363 | </view> | ||
364 | <view>{{parameter[3].standard}}</view> | ||
365 | </view> | ||
366 | </view> | ||
367 | <view> | ||
368 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | ||
369 | <view class="D3_list_jDu"> | ||
370 | <view class="D3_list1"> | ||
371 | <c-progress class="c-progress" :inner_widthProp="260"/> | ||
372 | <view>{{details.data.leg_long}}mm</view> | ||
373 | </view> | ||
374 | <view>{{parameter[4].standard}}</view> | ||
375 | </view> | ||
376 | </view> | ||
377 | <hr/> | ||
378 | </view> | ||
379 | </view> | ||
380 | <view class="part"> | ||
381 | <view class="size1" @click="xialachange(2)"> | ||
382 | <view class="size1_1" >配件</view> | ||
383 | <view> | ||
384 | <span>+¥0.00</span> | ||
385 | <image v-bind:src="isNone[2].img"></image> | ||
386 | </view> | ||
142 | </view> | 387 | </view> |
143 | <view class="colour_exp">*0290</view> | 388 | <view class="colour_exp">*0290</view> |
144 | <view class="part_som"> | 389 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
145 | <view | 390 | <view |
146 | v-for="(part) in part" | 391 | v-for="(part) in part" |
147 | :key="part.key" | 392 | :key="part.key" |
148 | v-bind:class="{'size_viewed': part.is_actived}" | 393 | v-bind:class="{'size_viewed': part.is_actived}" |
149 | > | 394 | > |
150 | <image v-bind:src="part.img"></image> | 395 | <image v-bind:src="part.img"></image> |
151 | </view> | 396 | </view> |
152 | </view> | 397 | </view> |
153 | </view> | 398 | </view> |
154 | </view> | 399 | </view> |
155 | <view class="buy"> | 400 | <view class="buy"> |
156 | <view class="buy1">选了镜框,想选镜片?</view> | 401 | <view class="buy1">选了镜框,想选镜片?</view> |
157 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | 402 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
158 | <view class="buy3"> | 403 | <view class="buy3"> |
159 | <view class="buy3_1">暂时不选</view> | 404 | <view class="buy3_1">暂时不选</view> |
160 | <view class="buy3_2" @click="popArgs">立即去选</view> | 405 | <view class="buy3_2" @click="popArgs">立即去选</view> |
161 | </view> | 406 | </view> |
162 | </view> | 407 | </view> |
163 | <view class="zhanwei"></view> | 408 | <view class="zhanwei"></view> |
164 | <view class="button"><view>立即结算</view></view> | 409 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
165 | </view> | 410 | </view> |
411 | </view> | ||
166 | </template> | 412 | </template> |
167 | <script> | 413 | <script> |
168 | import CProgress from '../../components/UniSliper/UniSliper' | 414 | import CProgress from '../../components/UniSliper/UniSliper' |
169 | import store from '@/store' | 415 | import store from '@/store' |
170 | 416 | ||
171 | export default { | 417 | export default { |
172 | components: { | 418 | components: { |
173 | CProgress | 419 | CProgress |
174 | }, | 420 | }, |
175 | data(){ | 421 | data(){ |
176 | return{ | 422 | return{ |
423 | type: 2, | ||
177 | count: 1, | 424 | count: 1, |
178 | colour: '1.56非球面防蓝光_亚黑色', | ||
179 | chooseNum : '', | 425 | chooseNum : '', |
180 | isSplit: '' , | 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 | //尺寸 | ||
181 | parameter:[ | 447 | parameter:[ |
182 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 448 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
183 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 449 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
184 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 450 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
185 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | 451 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
186 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | 452 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
187 | ], | 453 | ], |
188 | //镜片颜色 | 454 | //镜片颜色 |
189 | jp_colour:[ | 455 | jp_colour:[ |
190 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 456 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
191 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 457 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
192 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 458 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
193 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 459 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
194 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 460 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
195 | {img:'/static/img/detail/Kuang/sun_jp.png'} | 461 | {img:'/static/img/detail/Kuang/sun_jp.png'} |
196 | ], | 462 | ], |
197 | //配饰 | 463 | //配饰 |
198 | part:[ | 464 | part:[ |
199 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | 465 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
200 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 466 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
201 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 467 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
202 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 468 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
203 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 469 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
204 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 470 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
205 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 471 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
206 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 472 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
207 | ], | 473 | ], |
208 | //折射率 | 474 | opIsOpen:true, |
209 | split:[ | 475 | tablist: { |
210 | {number: 1.56}, | 476 | // read: true, |
211 | {number: 1.60}, | 477 | // seeLong: false, |
212 | {number: 1.67}, | 478 | confirm: false |
213 | {number: 1.71}, | 479 | }, |
214 | {number: 1.74} | 480 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], |
215 | 481 | // 度数相关数据 | |
216 | ] | 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 | ], | ||
217 | } | 489 | } |
218 | }, | 490 | }, |
219 | 491 | ||
220 | computed: { | 492 | computed: { |
221 | details(){ | 493 | details(){ |
222 | return this.$store.state.detailStandard_k.list | 494 | return this.$store.state.detailStandard_k.list |
223 | }, | 495 | }, |
224 | }, | 496 | }, |
225 | onLoad:function(){ | 497 | onLoad:function(){ |
226 | store.dispatch('detailStandard_k/fetch', { | 498 | store.dispatch('detailStandard_k/fetch', { |
227 | uid: "1", | 499 | uid: "1", |
228 | pid: "26", | 500 | pid: "26", |
229 | }); | 501 | p_root_index: "4" |
230 | console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); | 502 | }); |
231 | console.log("ssssssssssssssssssssssssssss") | ||
232 | }, | 503 | }, |
233 | methods: { | 504 | methods: { |
234 | counter(isadd){ | 505 | counter(isadd){ |
235 | if(isadd){ | 506 | if(isadd){ |
236 | this.count++ | 507 | this.count++ |
237 | }else{ | 508 | }else{ |
238 | this.count <= 1? this.disabled = true:this.count-- | 509 | this.count <= 1? this.disabled = true:this.count-- |
239 | } | 510 | } |
240 | }, | 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 | }, | ||
241 | colourChange(index,e){ | 520 | colourChange(index,e){ |
242 | this.colour = e ; //颜色选择 | 521 | this.navData.colour = e ; //颜色选择 |
243 | // console.log(index,e); | ||
244 | 522 | ||
245 | }, | 523 | }, |
246 | viewChoose(index){ | 524 | viewChoose(index){ |
247 | this.chooseNum = index | 525 | this.chooseNum = index |
248 | }, | 526 | }, |
249 | splitChoose(index){ | 527 | //折射率选择 |
528 | splitChoose(index,e){ | ||
250 | this.isSplit = index | 529 | this.isSplit = index |
530 | this.navData.split = e | ||
251 | }, | 531 | }, |
532 | //跳转镜片选购页 | ||
252 | popArgs(){ | 533 | popArgs(){ |
253 | uni.navigateTo({ | 534 | uni.navigateTo({ |
254 | url: '../detailsChoiceArgs/detailsChoiceArgs', | 535 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
255 | success: res => {}, | 536 | success: res => {}, |
256 | fail: () => {}, | 537 | fail: () => {}, |
257 | complete: () => {} | 538 | complete: () => {} |
258 | }); | 539 | }); |
259 | } | 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 | }, | ||
590 | bindPickerChange43: function(e) { | ||
591 | this.pickerInfoList[4].nameIndex3 = e.target.value | ||
592 | }, | ||
260 | } | 593 | } |
261 | 594 | ||
262 | } | 595 | } |
263 | </script> | 596 | </script> |
264 | 597 | ||
265 | <style lang="scss"> | 598 | <style lang="scss"> |
266 | .container{ | 599 | .container{ |
267 | min-height: 100vh; | 600 | min-height: 100vh; |
268 | background: #F2F2F2; | 601 | background: #F2F2F2; |
269 | padding-top: 10px; | 602 | padding-top: 10px; |
270 | box-sizing: border-box; | 603 | box-sizing: border-box; |
271 | } | 604 | } |
272 | hr{ | 605 | hr{ |
273 | border: none; | 606 | border: none; |
274 | height: 1px; | 607 | height: 1px; |
275 | background: #F2F2F2; | 608 | background: #F2F2F2; |
276 | margin-top: 18px; | 609 | margin-top: 18px; |
277 | margin-bottom: 10px; | 610 | margin-bottom: 10px; |
278 | } | 611 | } |
279 | .detail{ | 612 | .detail{ |
280 | height: 272rpx; | 613 | height: 272rpx; |
281 | background: #FFFFFF; | 614 | background: #FFFFFF; |
282 | border-radius: 8px; | 615 | border-radius: 8px; |
283 | padding: 16px; | 616 | padding: 16px; |
284 | box-sizing: border-box; | 617 | box-sizing: border-box; |
285 | display: flex; | 618 | display: flex; |
286 | justify-content: space-between; | 619 | justify-content: space-between; |
287 | align-items: center; | 620 | align-items: center; |
288 | } | 621 | } |
289 | .detail1{ | 622 | .detail1{ |
290 | height: 178rpx; | 623 | height: 178rpx; |
291 | width: 188rpx; | 624 | width: 188rpx; |
292 | image{ | 625 | image{ |
293 | width: 100%; | 626 | width: 100%; |
294 | height: 100%; | 627 | height: 100%; |
295 | border-radius: 8px; | 628 | border-radius: 8px; |
296 | } | 629 | } |
297 | } | 630 | } |
298 | .detail2{ | 631 | .detail2{ |
299 | width: 68%; | 632 | width: 68%; |
300 | view{ | 633 | view{ |
301 | margin-bottom: 6px; | 634 | margin-bottom: 6px; |
302 | font-family: PingFangSC-Regular; | 635 | font-family: PingFangSC-Regular; |
303 | } | 636 | } |
304 | .detail2_name{ | 637 | .detail2_name{ |
305 | font-size: 14px; | 638 | font-size: 14px; |
306 | color: #333333; | 639 | color: #333333; |
307 | letter-spacing: -0.26px; | 640 | letter-spacing: -0.26px; |
308 | line-height: 18px; | 641 | line-height: 18px; |
309 | overflow:hidden; | 642 | overflow:hidden; |
310 | text-overflow:ellipsis; | 643 | text-overflow:ellipsis; |
311 | display:-webkit-box; | 644 | display:-webkit-box; |
312 | -webkit-box-orient:vertical; | 645 | -webkit-box-orient:vertical; |
313 | -webkit-line-clamp:2; | 646 | -webkit-line-clamp:2; |
314 | } | 647 | } |
315 | .detail2_tui{ | 648 | .detail2_tui{ |
316 | font-size: 10px; | 649 | font-size: 10px; |
317 | color: #999999; | 650 | color: #999999; |
318 | letter-spacing: -0.19px; | 651 | letter-spacing: -0.19px; |
319 | span{ | 652 | span{ |
320 | margin-right: 10px; | 653 | margin-right: 10px; |
321 | } | 654 | } |
322 | } | 655 | } |
323 | .detail2_price{ | 656 | .detail2_price{ |
324 | font-size: 14px; | 657 | font-size: 14px; |
325 | color: #FF6B4A; | 658 | color: #FF6B4A; |
326 | letter-spacing: -0.26px; | 659 | letter-spacing: -0.26px; |
327 | } | 660 | } |
328 | } | 661 | } |
329 | .counter{ | 662 | .counter{ |
330 | display: flex; | 663 | display: flex; |
331 | flex-direction: row; | 664 | flex-direction: row; |
332 | justify-content: space-between; | 665 | justify-content: space-between; |
333 | font-size: 28rpx; | 666 | font-size: 28rpx; |
334 | color: #333333; | 667 | color: #333333; |
335 | width: 122rpx; | 668 | width: 122rpx; |
336 | float: right; | 669 | float: right; |
337 | .btn{ | 670 | .btn{ |
338 | display: flex; | 671 | display: flex; |
339 | justify-content: center; | 672 | justify-content: center; |
340 | line-height: 32rpx; | 673 | line-height: 32rpx; |
341 | height: 32rpx; | 674 | height: 32rpx; |
342 | width: 32rpx; | 675 | width: 32rpx; |
343 | background-color: #F2F2F2; | 676 | background-color: #F2F2F2; |
344 | color: #CFCFCF; | 677 | color: #CFCFCF; |
345 | } | 678 | } |
346 | } | 679 | } |
347 | .choose{ | 680 | .choose{ |
348 | background: #FFFFFF; | 681 | background: #FFFFFF; |
349 | padding: 16px; | 682 | padding: 16px; |
350 | box-sizing: border-box; | 683 | box-sizing: border-box; |
351 | margin-top: 10px; | 684 | margin-top: 10px; |
352 | border-radius: 8px; | 685 | border-radius: 8px; |
353 | .colour1{ | 686 | .colour1{ |
354 | span{ | 687 | span{ |
355 | font-family: PingFangSC-Medium; | 688 | font-family: PingFangSC-Medium; |
356 | font-size: 16px; | 689 | font-size: 16px; |
357 | color: #333333; | 690 | color: #333333; |
358 | letter-spacing: -0.3px; | 691 | letter-spacing: -0.3px; |
359 | text-align: justify; | 692 | text-align: justify; |
360 | line-height: 24px; | 693 | line-height: 24px; |
361 | font-weight: bold; | 694 | font-weight: bold; |
362 | } | 695 | } |
363 | image{ | 696 | image{ |
364 | float: right; | 697 | float: right; |
365 | width: 40rpx; | 698 | width: 40rpx; |
366 | height: 36rpx; | 699 | height: 36rpx; |
367 | } | 700 | } |
368 | .colour1_span2{ | 701 | .colour1_span2{ |
369 | font-family: PingFangSC-Regular; | 702 | font-family: PingFangSC-Regular; |
370 | font-size: 12px; | 703 | font-size: 12px; |
371 | color: #666666; | 704 | color: #666666; |
372 | margin-left: 10px; | 705 | margin-left: 10px; |
373 | font-weight: normal | 706 | font-weight: normal |
374 | } | 707 | } |
375 | } | 708 | } |
376 | .colour_exp{ | 709 | .colour_exp{ |
377 | font-family: PingFangSC-Regular; | 710 | font-family: PingFangSC-Regular; |
378 | font-size: 12px; | 711 | font-size: 12px; |
379 | color: #666666; | 712 | color: #666666; |
380 | letter-spacing: 0; | 713 | letter-spacing: 0; |
381 | margin-top: 10px; | 714 | margin-top: 10px; |
382 | margin-bottom: 10px; | 715 | margin-bottom: 10px; |
383 | } | 716 | } |
384 | .colour2{ | 717 | .colour2{ |
385 | display: grid; | 718 | display: grid; |
386 | grid-template-columns: repeat(5, 17%); | 719 | grid-template-columns: repeat(5, 17%); |
387 | justify-content: space-between ; | 720 | justify-content: space-between ; |
388 | grid-row-gap: 10px; | 721 | grid-row-gap: 10px; |
389 | margin-bottom: 14px; | 722 | margin-bottom: 14px; |
390 | .colour2_view{ | 723 | .colour2_view{ |
391 | border: 1px solid #F2F2F2; | 724 | border: 1px solid #F2F2F2; |
392 | image{ | 725 | image{ |
393 | width: 100rpx; | 726 | width: 100rpx; |
394 | height: 60rpx; | 727 | height: 60rpx; |
395 | } | 728 | } |
396 | } | 729 | } |
397 | .colour2_viewed{ | 730 | .colour2_viewed{ |
398 | border: 1px solid #FF6B4A; | 731 | border: 1px solid #FF6B4A; |
399 | image{ | 732 | image{ |
400 | width: 100rpx; | 733 | width: 100rpx; |
401 | height: 60rpx; | 734 | height: 60rpx; |
402 | } | 735 | } |
403 | } | 736 | } |
404 | } | 737 | } |
738 | .colour2_none{ | ||
739 | display: none; | ||
740 | } | ||
405 | } | 741 | } |
406 | .jp_colour2{ | 742 | .jp_colour2{ |
407 | display: grid; | 743 | display: grid; |
408 | grid-template-columns: repeat(5, 13%); | 744 | grid-template-columns: repeat(5, 13%); |
409 | justify-content: start ; | 745 | justify-content: start ; |
410 | grid-column-gap: 10px; | 746 | grid-column-gap: 10px; |
411 | grid-row-gap: 10px; | 747 | grid-row-gap: 10px; |
412 | margin-bottom: 14px; | 748 | margin-bottom: 14px; |
413 | .jp_colour2_view{ | 749 | .jp_colour2_view{ |
414 | border: 1px solid #F2F2F2; | 750 | border: 1px solid #F2F2F2; |
415 | image{ | 751 | image{ |
416 | width: 80rpx; | 752 | width: 80rpx; |
417 | height: 80rpx; | 753 | height: 80rpx; |
418 | } | 754 | } |
419 | } | 755 | } |
420 | } | 756 | } |
421 | .split{ | 757 | .split{ |
422 | display: grid; | 758 | display: grid; |
423 | grid-template-columns: repeat(2, 45%); | 759 | grid-template-columns: repeat(2, 45%); |
424 | grid-column-gap: 10px; | 760 | grid-column-gap: 10px; |
425 | grid-row-gap: 10px; | 761 | grid-row-gap: 10px; |
426 | margin-top: 10px ; | 762 | margin-top: 10px ; |
427 | .split_colour2{ | 763 | .split_colour2{ |
428 | display: flex; | 764 | display: flex; |
429 | justify-content: center; | 765 | justify-content: center; |
430 | align-items: center; | 766 | align-items: center; |
431 | width: 300rpx; | 767 | width: 300rpx; |
432 | height: 60rpx; | 768 | height: 60rpx; |
433 | background: #F2F2F2; | 769 | background: #F2F2F2; |
434 | border-radius: 2px; | 770 | border-radius: 2px; |
435 | font-family: PingFangSC-Regular; | 771 | font-family: PingFangSC-Regular; |
436 | font-size: 12px; | 772 | font-size: 12px; |
437 | color: #666666; | 773 | color: #666666; |
438 | letter-spacing: 0; | 774 | letter-spacing: 0; |
439 | text-align: center; | 775 | text-align: center; |
440 | } | 776 | } |
441 | .split_colour2_actived{ | 777 | .split_colour2_actived{ |
442 | background: rgba(255,107,74,0.15); | 778 | background: rgba(255,107,74,0.15); |
443 | color: #FF6B4A; | 779 | color: #FF6B4A; |
444 | } | 780 | } |
445 | } | 781 | } |
446 | .size,.part{ | 782 | .size,.part{ |
447 | margin-top:14px; | 783 | margin-top:14px; |
448 | .size1{ | 784 | .size1{ |
449 | display: flex; | 785 | display: flex; |
450 | justify-content: space-between; | 786 | justify-content: space-between; |
451 | margin-bottom: 10px; | 787 | margin-bottom: 10px; |
452 | .size1_1{ | 788 | .size1_1{ |
453 | font-weight: bold; | 789 | font-weight: bold; |
454 | font-family: PingFangSC-Medium; | 790 | font-family: PingFangSC-Medium; |
455 | font-size: 16px; | 791 | font-size: 16px; |
456 | color: #333333; | 792 | color: #333333; |
457 | letter-spacing: -0.3px; | 793 | letter-spacing: -0.3px; |
458 | line-height: 24px; | 794 | line-height: 24px; |
459 | } | 795 | } |
460 | view{ | 796 | view{ |
461 | span{ | 797 | span{ |
462 | font-family: PingFangSC-Regular; | 798 | font-family: PingFangSC-Regular; |
463 | font-size: 14px; | 799 | font-size: 14px; |
464 | color: #FF6B4A; | 800 | color: #FF6B4A; |
465 | letter-spacing: -0.26px; | 801 | letter-spacing: -0.26px; |
466 | margin-right: 12px; | 802 | margin-right: 12px; |
467 | } | 803 | } |
468 | image{ | 804 | image{ |
469 | width: 40rpx; | 805 | width: 40rpx; |
470 | height: 36rpx; | 806 | height: 36rpx; |
471 | } | 807 | } |
472 | } | 808 | } |
473 | } | 809 | } |
474 | .size2{ | 810 | .size2{ |
475 | view{ | 811 | view{ |
476 | display: inline-flex; | 812 | display: inline-flex; |
477 | align-items: center; | 813 | align-items: center; |
478 | justify-content: center; //字体居中 | 814 | justify-content: center; //字体居中 |
479 | margin-right: 12px; | 815 | margin-right: 12px; |
480 | margin-bottom: 20px; | 816 | margin-bottom: 20px; |
481 | width: 136rpx; | 817 | width: 136rpx; |
482 | height: 60rpx; | 818 | height: 60rpx; |
483 | background: #F2F2F2; | 819 | background: #F2F2F2; |
484 | border-radius: 2px; | 820 | border-radius: 2px; |
485 | font-family: PingFangSC-Regular; | 821 | font-family: PingFangSC-Regular; |
486 | font-size: 12px; | 822 | font-size: 12px; |
487 | color: #666666; | 823 | color: #666666; |
488 | } | 824 | } |
489 | view:hover{ | 825 | view:hover{ |
490 | color: #FF6B4A; | 826 | color: #FF6B4A; |
491 | background: rgba(255,107,74,0.15); | 827 | background: rgba(255,107,74,0.15); |
492 | } | 828 | } |
493 | } | 829 | } |
494 | .D3_list{ | 830 | .D3_list{ |
495 | margin-bottom: 4px; | 831 | margin-bottom: 4px; |
496 | } | 832 | } |
497 | .D3_list>view{ | 833 | .D3_list>view{ |
498 | display: flex; | 834 | display: flex; |
499 | align-content: center; | 835 | align-content: center; |
500 | margin-bottom: 10px; | 836 | margin-bottom: 10px; |
501 | view{ | 837 | view{ |
502 | margin-right: 10px; | 838 | margin-right: 10px; |
503 | } | 839 | } |
504 | } | 840 | } |
505 | .D3_list image{ | 841 | .D3_list image{ |
506 | width: 50px; | 842 | width: 50px; |
507 | height: 25px; | 843 | height: 25px; |
508 | margin-right: 6px; | 844 | margin-right: 6px; |
509 | } | 845 | } |
510 | .D3_list span{ | 846 | .D3_list span{ |
511 | margin-left: 6px; | 847 | margin-left: 6px; |
512 | margin-right: 5px; | 848 | margin-right: 5px; |
513 | font-family: 'PingFangSC-Regular'; | 849 | font-family: 'PingFangSC-Regular'; |
514 | } | 850 | } |
515 | .D3_list_jDu{ | 851 | .D3_list_jDu{ |
516 | view{ | 852 | view{ |
517 | font-family: PingFangSC-Regular; | 853 | font-family: PingFangSC-Regular; |
518 | font-size: 10px; | 854 | font-size: 10px; |
519 | color: #999999; | 855 | color: #999999; |
520 | letter-spacing: -0.19px; | 856 | letter-spacing: -0.19px; |
521 | } | 857 | } |
522 | .D3_list1{ | 858 | .D3_list1{ |
523 | display: flex; | 859 | display: flex; |
524 | } | 860 | } |
525 | } | 861 | } |
526 | } | 862 | } |
527 | .part{ | 863 | .part{ |
528 | .part_som{ | 864 | .part_som{ |
529 | display: grid; | 865 | display: grid; |
530 | justify-content: space-between; | 866 | justify-content: space-between; |
531 | grid-template-columns: repeat(4, 22%); | 867 | grid-template-columns: repeat(4, 22%); |
532 | grid-row-gap: 12px; | 868 | grid-row-gap: 12px; |
533 | margin-bottom: 14px; | 869 | margin-bottom: 14px; |
534 | view{ | 870 | view{ |
535 | border: 1px solid #F2F2F2; | 871 | border: 1px solid #F2F2F2; |
536 | height: 72rpx; | 872 | height: 72rpx; |
537 | image{ | 873 | image{ |
538 | width: 100%; | 874 | width: 100%; |
539 | height: 100%; | 875 | height: 100%; |
540 | } | 876 | } |
541 | } | 877 | } |
542 | .size_viewed{ | 878 | .size_viewed{ |
543 | border: 1px solid #FF6B4A; | 879 | border: 1px solid #FF6B4A; |
544 | height: 72rpx; | 880 | height: 72rpx; |
545 | image{ | 881 | image{ |
546 | width: 100%; | 882 | width: 100%; |
547 | height: 100%; | 883 | height: 100%; |
548 | } | 884 | } |
549 | } | 885 | } |
550 | } | 886 | } |
887 | .colour2_none{ | ||
888 | display: none; | ||
889 | } | ||
551 | } | 890 | } |
552 | 891 | ||
553 | .buy{ | 892 | .buy{ |
554 | height: 300rpx; | 893 | height: 300rpx; |
555 | background: #FFFFFF ; | 894 | background: #FFFFFF ; |
556 | margin-top: 10px; | 895 | margin-top: 10px; |
557 | border-radius: 8px; | 896 | border-radius: 8px; |
558 | padding-top: 20px; | 897 | padding-top: 20px; |
559 | box-sizing: border-box; | 898 | box-sizing: border-box; |
560 | margin-bottom: 20px; | 899 | margin-bottom: 10px; |
561 | } | 900 | } |
562 | .buy1{ | 901 | .buy1{ |
563 | font-family: PingFangSC-Medium; | 902 | font-family: PingFangSC-Medium; |
564 | font-size: 16px; | 903 | font-size: 16px; |
565 | font-weight: bold; | 904 | font-weight: bold; |
566 | color: #333333; | 905 | color: #333333; |
567 | text-align: center; | 906 | text-align: center; |
568 | } | 907 | } |
569 | .buy2{ | 908 | .buy2{ |
570 | font-family: PingFangSC-Regular; | 909 | font-family: PingFangSC-Regular; |
571 | font-size: 12px; | 910 | font-size: 12px; |
572 | color: #999999; | 911 | color: #999999; |
573 | text-align: center; | 912 | text-align: center; |
574 | margin: 10px; | 913 | margin: 10px; |
575 | } | 914 | } |
576 | .buy3{ | 915 | .buy3{ |
577 | font-family: PingFangSC-Regular; | 916 | font-family: PingFangSC-Regular; |
578 | font-size: 16px; | 917 | font-size: 16px; |
579 | display: flex; | 918 | display: flex; |
580 | justify-content: center; | 919 | justify-content: center; |
581 | margin-top: 14px; | 920 | margin-top: 14px; |
582 | view{ | 921 | view{ |
583 | border-radius: 20px; | 922 | border-radius: 20px; |
584 | width: 240rpx; | 923 | width: 240rpx; |
585 | height: 80rpx; | 924 | height: 80rpx; |
586 | display: flex; | 925 | display: flex; |
587 | justify-content: center; | 926 | justify-content: center; |
588 | align-items: center; | 927 | align-items: center; |
589 | } | 928 | } |
590 | .buy3_1{ | 929 | .buy3_1{ |
591 | margin-right: 20px; | 930 | margin-right: 20px; |
592 | background: rgba(255,107,74,0.15); | 931 | background: rgba(255,107,74,0.15); |
593 | color: #FF6B4A ; | 932 | color: #FF6B4A ; |
594 | } | 933 | } |
595 | .buy3_2{ | 934 | .buy3_2{ |
596 | background: #FF6B4A; | 935 | background: #FF6B4A; |
597 | color: #FFFFFF ; | 936 | color: #FFFFFF ; |
598 | } | 937 | } |
599 | } | 938 | } |
600 | .zhanwei{ | 939 | .zhanwei{ |
601 | background: #F2F2F2; | 940 | background: #F2F2F2; |
602 | height: 120rpx; | 941 | height: 200rpx; |
942 | } | ||
943 | .goods-form { | ||
944 | display: flex; | ||
945 | flex-direction: column; | ||
946 | align-items: center; | ||
947 | justify-content: center; | ||
948 | background-color: #fff; | ||
949 | width: 100%; | ||
950 | padding-top:20px; | ||
951 | padding-bottom:20px; | ||
952 | box-sizing: border-box; | ||
953 | |||
954 | .p1 { | ||
955 | font-size: 16px; | ||
956 | color: #333333; | ||
957 | letter-spacing: -0.3px; | ||
958 | text-align: justify; | ||
959 | line-height: 24px; | ||
960 | margin: 4px 0; | ||
961 | } | ||
962 | .p2 { | ||
963 | font-size: 12px; | ||
964 | color: #999999; | ||
965 | letter-spacing: -0.23px; | ||
966 | margin-bottom: 18rpx; | ||
967 | } | ||
968 | image{ | ||
969 | width: 28rpx; | ||
970 | height: 26rpx; | ||
971 | } | ||
972 | .confirm { | ||
973 | display: flex; | ||
974 | align-items: center; | ||
975 | font-size: 12px; | ||
976 | color: #666666; | ||
977 | letter-spacing: -0.23px; | ||
978 | width: 684rpx; | ||
979 | image{ | ||
980 | margin-right:25rpx; | ||
981 | } | ||
982 | } | ||
983 | .picker{ | ||
984 | display: flex; | ||
985 | flex-direction: column; | ||
986 | justify-content: center; | ||
987 | align-items: center; | ||
988 | width: 100%; | ||
989 | image{ | ||
990 | width: 10px; | ||
991 | height: 10px; | ||
992 | margin-right: 5px; | ||
993 | } | ||
994 | .picker-choice{ | ||
995 | display: flex; | ||
996 | width: 684rpx; | ||
997 | align-items: center; | ||
998 | margin-bottom: 40rpx; | ||
999 | .choice-left{ | ||
1000 | width: 210rpx; | ||
1001 | .p11 { | ||
1002 | font-size: 14px; | ||
1003 | color: #333333; | ||
1004 | letter-spacing: -0.26px; | ||
1005 | text-align: justify; | ||
1006 | line-height: 24px; | ||
1007 | // margin-right: 10px; | ||
1008 | } | ||
1009 | .p12 { | ||
1010 | font-size: 10px; | ||
1011 | color: #3F3F3F; | ||
1012 | letter-spacing: -0.19px; | ||
1013 | text-align: justify; | ||
1014 | line-height: 24px; | ||
1015 | } | ||
1016 | |||
1017 | |||
1018 | } | ||
1019 | .p13 { | ||
1020 | font-size: 10px; | ||
1021 | color: #999999; | ||
1022 | letter-spacing: -0.19px; | ||
1023 | margin-right: 10px; | ||
1024 | } | ||
1025 | .p13-date { | ||
1026 | font-size: 10px; | ||
1027 | color: #999999; | ||
1028 | letter-spacing: -0.19px; | ||
1029 | margin-right: 5px; | ||
1030 | } | ||
1031 | .p14 { | ||
1032 | font-size: 14px; | ||
1033 | color: #666666; | ||
1034 | letter-spacing: -0.26px; | ||
1035 | text-align: center; | ||
1036 | width: 124rpx; | ||
1037 | border-bottom: 1px solid #CFCFCF; | ||
1038 | } | ||
1039 | |||
1040 | } | ||
1041 | } | ||
603 | } | 1042 | } |
604 | .button{ | 1043 | .button{ |
605 | position: fixed; | 1044 | position: fixed; |
606 | bottom: 0; | 1045 | bottom: 0; |
607 | width:100%; | 1046 | width:100%; |
608 | height: 112rpx; | 1047 | height: 112rpx; |
609 | background: #FF6B4A 100%; | 1048 | background: #FF6B4A 100%; |
610 | view{ | 1049 | view{ |
611 | color: #FFFFFF; | 1050 | color: #FFFFFF; |
612 | height: 100%; | 1051 | height: 100%; |
613 | display: flex; | 1052 | display: flex; |
614 | justify-content: center; | 1053 | justify-content: center; |
615 | align-items: center; | 1054 | align-items: center; |
616 | font-family: PingFangSC-Regular; | 1055 | font-family: PingFangSC-Regular; |
src/pages/newOpticsData/newOpticsData.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <view class="body"> | 3 | <view class="body"> |
4 | <template > | 4 | <template > |
5 | <view class="goods-form"> | 5 | <view class="goods-form"> |
6 | <view class="p1"> | 6 | <view class="p1"> |
7 | <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> | 7 | <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> |
8 | 填写验光数据 | 8 | 填写验光数据 |
9 | </view> | 9 | </view> |
10 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | 10 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> |
11 | <view class="use_name"> | ||
12 | <text>验光单取名:</text> | ||
13 | <input type="text" @change="handleInput" | ||
14 | placeholder="请输入名称" maxlength="30" :value="name" /> | ||
15 | </view> | ||
16 | <view class="use_pd"> | ||
17 | <text>瞳距:</text> | ||
18 | <input type="number" @change="handleInputPd" | ||
19 | placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> | ||
20 | </view> | ||
11 | <view class="picker" > | 21 | <view class="picker" > |
12 | <view class="picker-choice"> | 22 | <view class="picker-choice"> |
13 | <view class="choice-left"> | 23 | <view class="choice-left"> |
14 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 24 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
15 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 25 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
16 | </view> | 26 | </view> |
17 | <text class="p13">左 (OD)</text> | 27 | <text class="p13">左 (OD)</text> |
18 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 28 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
19 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | 29 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> |
20 | <image src="../../static/detail-tabicon.png" ></image> | 30 | <image src="../../static/detail-tabicon.png" ></image> |
21 | </picker> | 31 | </picker> |
22 | <text class="p13">右 (OS)</text> | 32 | <text class="p13">右 (OS)</text> |
23 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 33 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
24 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | 34 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> |
25 | <image src="../../static/detail-tabicon.png" ></image> | 35 | <image src="../../static/detail-tabicon.png" ></image> |
26 | </picker> | 36 | </picker> |
27 | </view> | 37 | </view> |
28 | </view> | 38 | </view> |
29 | <view class="picker" > | 39 | <view class="picker" > |
30 | <view class="picker-choice"> | 40 | <view class="picker-choice"> |
31 | <view class="choice-left"> | 41 | <view class="choice-left"> |
32 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 42 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
33 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 43 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
34 | </view> | 44 | </view> |
35 | <text class="p13">左 (OD)</text> | 45 | <text class="p13">左 (OD)</text> |
36 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 46 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
37 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | 47 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> |
38 | <image src="../../static/detail-tabicon.png" ></image> | 48 | <image src="../../static/detail-tabicon.png" ></image> |
39 | </picker> | 49 | </picker> |
40 | <text class="p13">右 (OS)</text> | 50 | <text class="p13">右 (OS)</text> |
41 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 51 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
42 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | 52 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> |
43 | <image src="../../static/detail-tabicon.png" ></image> | 53 | <image src="../../static/detail-tabicon.png" ></image> |
44 | </picker> | 54 | </picker> |
45 | </view> | 55 | </view> |
46 | </view> | 56 | </view> |
47 | <view class="picker" > | 57 | <view class="picker" > |
48 | <view class="picker-choice"> | 58 | <view class="picker-choice"> |
49 | <view class="choice-left"> | 59 | <view class="choice-left"> |
50 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 60 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
51 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 61 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
52 | </view> | 62 | </view> |
53 | <text class="p13">左 (OD)</text> | 63 | <text class="p13">左 (OD)</text> |
54 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 64 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
55 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | 65 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> |
56 | <image src="../../static/detail-tabicon.png" ></image> | 66 | <image src="../../static/detail-tabicon.png" ></image> |
57 | </picker> | 67 | </picker> |
58 | <text class="p13">右 (OS)</text> | 68 | <text class="p13">右 (OS)</text> |
59 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 69 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
60 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | 70 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> |
61 | <image src="../../static/detail-tabicon.png" ></image> | 71 | <image src="../../static/detail-tabicon.png" ></image> |
62 | </picker> | 72 | </picker> |
63 | </view> | 73 | </view> |
64 | </view> | 74 | </view> |
65 | <view class="picker" > | 75 | <!-- <view class="picker" > |
66 | <view class="picker-choice"> | 76 | <view class="picker-choice"> |
67 | <view class="choice-left"> | 77 | <view class="choice-left"> |
68 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 78 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
69 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 79 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
70 | </view> | 80 | </view> |
71 | <text class="p13">左 (OD)</text> | 81 | <text class="p13">左 (OD)</text> |
72 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 82 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
73 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | 83 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
74 | <image src="../../static/detail-tabicon.png" ></image> | 84 | <image src="../../static/detail-tabicon.png" ></image> |
75 | </picker> | 85 | </picker> |
76 | <text class="p13">右 (OS)</text> | 86 | <text class="p13">右 (OS)</text> |
77 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 87 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
78 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | 88 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
79 | <image src="../../static/detail-tabicon.png" ></image> | 89 | <image src="../../static/detail-tabicon.png" ></image> |
80 | </picker> | 90 | </picker> |
81 | </view> | 91 | </view> |
82 | </view> | 92 | </view> --> |
83 | <view class="picker" > | 93 | <view class="picker" > |
84 | <view class="picker-choice"> | 94 | <view class="picker-choice"> |
85 | <view class="choice-left"> | 95 | <view class="choice-left"> |
86 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 96 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
87 | </view> | 97 | </view> |
88 | <text class="p13-date">年 (Y)</text> | 98 | <text class="p13-date">年 (Y)</text> |
89 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | 99 | <text class="p14" style="width: 34px;">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
90 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | 100 | <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
91 | <image src="../../static/detail-tabicon.png" ></image> | 101 | <image src="../../static/detail-tabicon.png" ></image> |
92 | </picker> | 102 | </picker> |
93 | <text class="p13-date">月 (M)</text> | 103 | <text class="p13-date">月 (M)</text> |
94 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | 104 | <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
95 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | 105 | <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
96 | <image src="../../static/detail-tabicon.png" ></image> | 106 | <image src="../../static/detail-tabicon.png" ></image> |
97 | </picker> | 107 | </picker> |
98 | <text class="p13-date">日 (D)</text> | 108 | <text class="p13-date">日 (D)</text> |
99 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | 109 | <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}</text> |
100 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | 110 | <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> |
101 | <image src="../../static/detail-tabicon.png" ></image> | 111 | <image src="../../static/detail-tabicon.png" ></image> |
102 | </picker> | 112 | </picker> |
103 | </view> | 113 | </view> |
104 | </view> | 114 | </view> |
105 | <view class="confirm"> | 115 | <view class="confirm"> |
106 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | 116 | <image :src="confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> |
107 | <text>确认以上输入信息来源于我的验光数据!</text> | 117 | <text>确认以上输入信息来源于我的验光数据!</text> |
108 | </view> | 118 | </view> |
109 | </view> | 119 | </view> |
110 | 120 | ||
111 | </template> | 121 | </template> |
112 | </view> | 122 | </view> |
113 | 123 | ||
114 | 124 | ||
115 | <view class="footer"> | 125 | <view class="footer" @click="handleSubmit"> |
116 | <button class="btn" type="default">提 交</button> | 126 | <button class="btn" type="default">提 交</button> |
117 | </view> | 127 | </view> |
118 | </view> | 128 | </view> |
119 | </template> | 129 | </template> |
120 | 130 | ||
121 | <script> | 131 | <script> |
132 | import store from '@/store'; | ||
133 | |||
122 | export default { | 134 | export default { |
123 | data() { | 135 | data() { |
124 | return { | 136 | return { |
125 | pickerInfoList:[ | 137 | pickerInfoList:[ |
126 | {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}, | 138 | {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, |
127 | {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}, | 139 | {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, |
128 | {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}, | 140 | {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, |
129 | {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}, | 141 | {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} |
130 | {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} | ||
131 | ], | 142 | ], |
132 | tablist: { | 143 | confirm: false, // 用户是否确认 |
133 | // read: true, | 144 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], |
134 | // seeLong: false, | 145 | name: '夏小花', |
135 | confirm: false | 146 | pickerInfoChioce:{ |
147 | "leftSph": 0, | ||
148 | "rightSph": 0, | ||
149 | "leftCyl": 0, | ||
150 | "rightCyl": 0, | ||
151 | "leftAxi": 0, | ||
152 | "rightAxi": 0, | ||
153 | "time":{ | ||
154 | "year":0, | ||
155 | "month": 0, | ||
156 | "day":0 , | ||
157 | } | ||
136 | }, | 158 | }, |
137 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | 159 | pd: '',// 瞳距 |
160 | kinds:Number, // kinds=1,提交为新增验光,2为修改 | ||
161 | mp_id: Number | ||
138 | }; | 162 | }; |
139 | }, | 163 | }, |
164 | onLoad: function (option) { | ||
165 | //option为object类型,会序列化上个页面传递的参数 | ||
166 | // 初始化SPL、CYL、AXI的值 | ||
167 | for (let j = 0; j < 3; j++) { | ||
168 | for(let i=-12;i<6;i++){ | ||
169 | this.pickerInfoList[j].nameArray1.push(i) | ||
170 | this.pickerInfoList[j].nameArray1.push(i+0.5) | ||
171 | this.pickerInfoList[j].nameArray2.push(i) | ||
172 | this.pickerInfoList[j].nameArray2.push(i+0.5) | ||
173 | if(i>=-6){ | ||
174 | this.pickerInfoList[j].nameArray1.push(i+0.25) | ||
175 | this.pickerInfoList[j].nameArray1.push(i+0.75) | ||
176 | this.pickerInfoList[j].nameArray2.push(i+0.25) | ||
177 | this.pickerInfoList[j].nameArray2.push(i+0.75) | ||
178 | } | ||
179 | if(i==5){ | ||
180 | this.pickerInfoList[j].nameArray1.push(i+1) | ||
181 | this.pickerInfoList[j].nameArray2.push(i+1) | ||
182 | } | ||
183 | } | ||
184 | } | ||
185 | // 初始化日期值 | ||
186 | for (let i = 1; i < 32; i++){ | ||
187 | this.pickerInfoList[3].nameArray3.push(i) | ||
188 | } | ||
189 | // 初始化年份前后五年 | ||
190 | let myDate = new Date(); | ||
191 | let nowYear = myDate.getFullYear(); | ||
192 | for(let i=0;i<5;i++){ | ||
193 | this.pickerInfoList[3].nameArray1.push(nowYear-i) | ||
194 | } | ||
195 | |||
196 | this.kinds=option.kinds | ||
197 | if(option.kinds==1){ | ||
198 | this.name= ''; | ||
199 | this.pd= ''; | ||
200 | } else{ | ||
201 | console.log('args===>',option.index) | ||
202 | const loveList=Object.assign({},this.$store.state.myLoveList.loveList) | ||
203 | console.log('args===>',loveList[option.index].in_time) | ||
204 | console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) | ||
205 | console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) | ||
206 | console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) | ||
207 | this.name=loveList[option.index].name | ||
208 | this.pd=loveList[option.index].pd | ||
209 | this.mp_id=loveList[option.index].mp_id | ||
210 | // 将kinds =2时的值传到该页面 | ||
211 | this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) | ||
212 | this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) | ||
213 | this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) | ||
214 | this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) | ||
215 | this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) | ||
216 | this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) | ||
217 | |||
218 | this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) | ||
219 | if(loveList[option.index].in_time.toString().slice(5,6)==0){ | ||
220 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) | ||
221 | } else{ | ||
222 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) | ||
223 | } | ||
224 | if(loveList[option.index].in_time.toString().slice(8,9)==0){ | ||
225 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) | ||
226 | } else{ | ||
227 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) | ||
228 | } | ||
229 | } | ||
230 | }, | ||
140 | methods:{ | 231 | methods:{ |
232 | handleInput(e){ | ||
233 | this.name=e.target.value | ||
234 | }, | ||
235 | handleInputPd(e){ | ||
236 | // 只能输入正浮点数或正数 | ||
237 | if(/^\d+(\.\d+)?$/.test(e.target.value)){ | ||
238 | this.pd=e.target.value | ||
239 | } else { | ||
240 | uni.showToast({ | ||
241 | title:"请输入有效数据;示例:89", | ||
242 | icon: "none", | ||
243 | duration: 3000, | ||
244 | }) | ||
245 | this.pd = '' | ||
246 | } | ||
247 | |||
248 | }, | ||
249 | // 用户提交 | ||
250 | handleSubmit(){ | ||
251 | if(this.name==''){ | ||
252 | uni.showToast({ | ||
253 | title:"请输入验光单取名", | ||
254 | icon: "none", | ||
255 | duration: 3000, | ||
256 | }) | ||
257 | } | ||
258 | if(this.pd==''){ | ||
259 | uni.showToast({ | ||
260 | title:"请输入瞳距", | ||
261 | icon: "none", | ||
262 | duration: 3000, | ||
263 | }) | ||
264 | } | ||
265 | if(this.confirm){ | ||
266 | if(this.kinds==1){ | ||
267 | // 添加用户验光单 | ||
268 | console.log('kinds====>',this.kinds) | ||
269 | store.dispatch('myLoveList/addMylove', { | ||
270 | |||
271 | uid: this.$store.state.user.userInfo.uid, | ||
272 | openid: this.$store.state.user.userInfo.openid, | ||
273 | // mp_name: this.$store.state.user.userInfo.mp_name, | ||
274 | leftSph: this.pickerInfoChioce.leftSph, | ||
275 | rightSph: this.pickerInfoChioce.rightSph, | ||
276 | leftCyl: this.pickerInfoChioce.leftCyl, | ||
277 | rightCyl: this.pickerInfoChioce.rightCyl, | ||
278 | leftAxi: this.pickerInfoChioce.leftAxi, | ||
279 | rightAxi: this.pickerInfoChioce.rightAxi, | ||
280 | pd: this.pd,// 瞳距 | ||
281 | mp_name:this.name, | ||
282 | // time: this.pickerInfoChioce.time, | ||
283 | // img_url2: "http://localhost:8087/images/shop_1/1/", | ||
284 | }); | ||
285 | store.dispatch('myLoveList/getLoveList', { | ||
286 | uid: this.$store.state.user.userInfo.uid, | ||
287 | }); | ||
288 | uni.navigateBack({ | ||
289 | delta:1, | ||
290 | animationDuration:2000 | ||
291 | }) | ||
292 | } | ||
293 | if(this.kinds==2){ | ||
294 | // console.log('kinds====>',this.kinds) | ||
295 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) | ||
296 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) | ||
297 | const leftList = ["leftSph","leftCyl","leftAxi"]; | ||
298 | const rightList = ["rightSph", "rightCyl", "rigthAxi"]; | ||
299 | for (let j=0; j<3; j++) { | ||
300 | if(this.pickerInfoList[j].nameIndex1!=0){ | ||
301 | |||
302 | store.dispatch('myLoveList/updateMylove', { | ||
303 | uid: this.$store.state.user.userInfo.uid, | ||
304 | openid: this.$store.state.user.userInfo.openid, | ||
305 | mp_id: this.mp_id, | ||
306 | keyname: leftList[j], | ||
307 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | ||
308 | }); | ||
309 | } | ||
310 | if(this.pickerInfoList[j].nameIndex2 !=0) { | ||
311 | store.dispatch('myLoveList/updateMylove', { | ||
312 | uid: this.$store.state.user.userInfo.uid, | ||
313 | openid: this.$store.state.user.userInfo.openid, | ||
314 | mp_id: this.mp_id, | ||
315 | keyname: rightList[j], | ||
316 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] | ||
317 | }); | ||
318 | } | ||
319 | } | ||
320 | store.dispatch('myLoveList/getLoveList', { | ||
321 | uid: this.$store.state.user.userInfo.uid, | ||
322 | }); | ||
323 | uni.navigateBack({ | ||
324 | delta:1, | ||
325 | animationDuration:2000 | ||
326 | }) | ||
327 | |||
328 | } | ||
329 | |||
330 | } else{ | ||
331 | uni.showToast({ | ||
332 | title:"请确认你的验光数据", | ||
333 | icon: "none", | ||
334 | duration: 3000, | ||
335 | }) | ||
336 | } | ||
337 | }, | ||
141 | changeConfirm() { | 338 | changeConfirm() { |
142 | this.tablist.confirm = !this.tablist.confirm | 339 | this.confirm = !this.confirm |
143 | }, | 340 | }, |
144 | 341 | ||
145 | bindPickerChange01: function(e) { | 342 | bindPickerChange01: function(e) { |
146 | this.pickerInfoList[0].nameIndex1 = e.target.value | 343 | this.pickerInfoList[0].nameIndex1 = e.target.value |
344 | this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] | ||
147 | }, | 345 | }, |
148 | bindPickerChange02: function(e) { | 346 | bindPickerChange02: function(e) { |
149 | this.pickerInfoList[0].nameIndex2 = e.target.value | 347 | this.pickerInfoList[0].nameIndex2 = e.target.value |
348 | this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] | ||
150 | }, | 349 | }, |
151 | 350 | ||
152 | bindPickerChange11: function(e) { | 351 | bindPickerChange11: function(e) { |
153 | this.pickerInfoList[1].nameIndex1 = e.target.value | 352 | this.pickerInfoList[1].nameIndex1 = e.target.value |
353 | this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] | ||
154 | }, | 354 | }, |
155 | bindPickerChange12: function(e) { | 355 | bindPickerChange12: function(e) { |
156 | this.pickerInfoList[1].nameIndex2 = e.target.value | 356 | this.pickerInfoList[1].nameIndex2 = e.target.value |
357 | this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] | ||
157 | }, | 358 | }, |
158 | 359 | ||
159 | bindPickerChange21: function(e) { | 360 | bindPickerChange21: function(e) { |
160 | this.pickerInfoList[2].nameIndex1 = e.target.value | 361 | this.pickerInfoList[2].nameIndex1 = e.target.value |
362 | this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] | ||
161 | }, | 363 | }, |
162 | bindPickerChange22: function(e) { | 364 | bindPickerChange22: function(e) { |
163 | this.pickerInfoList[2].nameIndex2 = e.target.value | 365 | this.pickerInfoList[2].nameIndex2 = e.target.value |
366 | this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] | ||
164 | }, | 367 | }, |
165 | 368 | ||
166 | bindPickerChange31: function(e) { | ||
167 | this.pickerInfoList[3].nameIndex1 = e.target.value | ||
168 | }, | ||
169 | bindPickerChange32: function(e) { | ||
170 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
171 | }, | ||
172 | |||
173 | bindPickerChange41: function(e) { | 369 | bindPickerChange41: function(e) { |
174 | this.pickerInfoList[4].nameIndex1 = e.target.value | 370 | this.pickerInfoList[3].nameIndex1 = e.target.value |
371 | this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] | ||
175 | }, | 372 | }, |
176 | bindPickerChange42: function(e) { | 373 | bindPickerChange42: function(e) { |
177 | this.pickerInfoList[4].nameIndex2 = e.target.value | 374 | this.pickerInfoList[3].nameIndex2 = e.target.value |
375 | this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] | ||
178 | }, | 376 | }, |
179 | bindPickerChange43: function(e) { | 377 | bindPickerChange43: function(e) { |
180 | this.pickerInfoList[4].nameIndex3 = e.target.value | 378 | this.pickerInfoList[3].nameIndex3 = e.target.value |
379 | this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] | ||
181 | }, | 380 | }, |
182 | } | 381 | } |
183 | } | 382 | } |
184 | </script> | 383 | </script> |
185 | 384 | ||
186 | <style lang="scss"> | 385 | <style lang="scss"> |
187 | .wrap{ | 386 | .wrap{ |
188 | min-height: 100vh; | 387 | min-height: 100vh; |
189 | background-color: #F2F2F2; | 388 | background-color: #F2F2F2; |
190 | .body{ | 389 | .body{ |
191 | // font-family: PingFangSC-Regular; | 390 | // font-family: PingFangSC-Regular; |
192 | font-size: 12px; | 391 | font-size: 12px; |
193 | color: #666666; | 392 | color: #666666; |
194 | letter-spacing: 0; | 393 | letter-spacing: 0; |
195 | .bodyBox{ | 394 | .bodyBox{ |
196 | margin-top: 15px; | 395 | margin-top: 15px; |
197 | .names{ | 396 | .names{ |
198 | // font-family: PingFangSC-Regular; | 397 | // font-family: PingFangSC-Regular; |
199 | font-size: 12px; | 398 | font-size: 12px; |
200 | color: #151515; | 399 | color: #151515; |
201 | letter-spacing: 0; | 400 | letter-spacing: 0; |
202 | text-align: justify; | 401 | text-align: justify; |
203 | line-height: 17px; | 402 | line-height: 17px; |
204 | margin-left: 5px; | 403 | margin-left: 5px; |
205 | margin-right: 10px; | 404 | margin-right: 10px; |
206 | } | 405 | } |
207 | text{ | 406 | text{ |
208 | // font-family: PingFangSC-Regular; | 407 | // font-family: PingFangSC-Regular; |
209 | font-size: 12px; | 408 | font-size: 12px; |
210 | color: #666666; | 409 | color: #666666; |
211 | letter-spacing: 0; | 410 | letter-spacing: 0; |
212 | text-align: justify; | 411 | text-align: justify; |
213 | } | 412 | } |
214 | } | 413 | } |
215 | 414 | ||
216 | } | 415 | } |
217 | .goods-form { | 416 | .goods-form { |
218 | display: flex; | 417 | display: flex; |
219 | flex-direction: column; | 418 | flex-direction: column; |
220 | align-items: center; | 419 | align-items: center; |
221 | justify-content: center; | 420 | justify-content: center; |
222 | background-color: #fff; | 421 | background-color: #fff; |
223 | width: 100%; | 422 | width: 100%; |
224 | padding: 40rpx 0; | 423 | padding: 40rpx 0; |
225 | .p1 { | 424 | .p1 { |
226 | font-size: 16px; | 425 | font-size: 16px; |
227 | color: #333333; | 426 | color: #333333; |
228 | letter-spacing: -0.3px; | 427 | letter-spacing: -0.3px; |
229 | text-align: justify; | 428 | text-align: justify; |
230 | line-height: 24px; | 429 | line-height: 24px; |
231 | margin: 4px 0; | 430 | margin: 4px 0; |
232 | 431 | ||
233 | } | 432 | } |
234 | .p2 { | 433 | .p2 { |
235 | font-size: 12px; | 434 | font-size: 12px; |
236 | color: #999999; | 435 | color: #999999; |
237 | letter-spacing: -0.23px; | 436 | letter-spacing: -0.23px; |
238 | margin-bottom: 18rpx; | 437 | margin-bottom: 18rpx; |
239 | } | 438 | } |
439 | .use_pd{ | ||
440 | display: flex; | ||
441 | height: 48rpx; | ||
442 | line-height: 48rpx; | ||
443 | margin-left: -298rpx; | ||
444 | margin-top: 30rpx; | ||
445 | margin-bottom: 40rpx; | ||
446 | align-items: center; | ||
447 | justify-content: center; | ||
448 | text{ | ||
449 | font-size: 14px; | ||
450 | color: #333333; | ||
451 | margin-right: 44rpx; | ||
452 | } | ||
453 | } | ||
454 | .use_name{ | ||
455 | display: flex; | ||
456 | height: 48rpx; | ||
457 | line-height: 48rpx; | ||
458 | margin-left: -220rpx; | ||
459 | margin-top: 20rpx; | ||
460 | align-items: center; | ||
461 | justify-content: center; | ||
462 | // text-align: center; | ||
463 | text{ | ||
464 | font-size: 14px; | ||
465 | color: #333333; | ||
466 | margin-right: 44rpx; | ||
467 | } | ||
468 | } | ||
240 | image{ | 469 | image{ |
241 | width: 28rpx; | 470 | width: 28rpx; |
242 | height: 26rpx; | 471 | height: 26rpx; |
243 | } | 472 | } |
244 | .confirm { | 473 | .confirm { |
245 | display: flex; | 474 | display: flex; |
246 | align-items: center; | 475 | align-items: center; |
247 | font-size: 12px; | 476 | font-size: 12px; |
248 | color: #666666; | 477 | color: #666666; |
249 | letter-spacing: -0.23px; | 478 | letter-spacing: -0.23px; |
250 | width: 684rpx; | 479 | width: 684rpx; |
251 | image{ | 480 | image{ |
252 | margin-right:25rpx; | 481 | margin-right:25rpx; |
253 | } | 482 | } |
254 | } | 483 | } |
255 | .picker{ | 484 | .picker{ |
256 | display: flex; | 485 | display: flex; |
257 | flex-direction: column; | 486 | flex-direction: column; |
258 | justify-content: center; | 487 | justify-content: center; |
259 | align-items: center; | 488 | align-items: center; |
260 | width: 100%; | 489 | width: 100%; |
261 | image{ | 490 | image{ |
262 | width: 10px; | 491 | width: 10px; |
263 | height: 10px; | 492 | height: 10px; |
264 | margin-right: 5px; | 493 | margin-right: 5px; |
265 | } | 494 | } |
266 | .picker-choice{ | 495 | .picker-choice{ |
267 | display: flex; | 496 | display: flex; |
268 | width: 684rpx; | 497 | width: 684rpx; |
269 | align-items: center; | 498 | align-items: center; |
270 | margin-bottom: 40rpx; | 499 | margin-bottom: 40rpx; |
271 | .choice-left{ | 500 | .choice-left{ |
272 | width: 210rpx; | 501 | width: 210rpx; |
273 | .p11 { | 502 | .p11 { |
274 | font-size: 14px; | 503 | font-size: 14px; |
275 | color: #333333; | 504 | color: #333333; |
276 | letter-spacing: -0.26px; | 505 | letter-spacing: -0.26px; |
277 | text-align: justify; | 506 | text-align: justify; |
278 | line-height: 24px; | 507 | line-height: 24px; |
279 | // margin-right: 10px; | 508 | // margin-right: 10px; |
280 | } | 509 | } |
281 | .p12 { | 510 | .p12 { |
282 | font-size: 10px; | 511 | font-size: 10px; |
283 | color: #3F3F3F; | 512 | color: #3F3F3F; |
284 | letter-spacing: -0.19px; | 513 | letter-spacing: -0.19px; |
285 | text-align: justify; | 514 | text-align: justify; |
286 | line-height: 24px; | 515 | line-height: 24px; |
287 | } | 516 | } |
288 | 517 | ||
289 | 518 | ||
290 | } | 519 | } |
291 | .p13 { | 520 | .p13 { |
292 | font-size: 10px; | 521 | font-size: 10px; |
293 | color: #999999; | 522 | color: #999999; |
294 | letter-spacing: -0.19px; | 523 | letter-spacing: -0.19px; |
295 | margin-right: 10px; | 524 | margin-right: 10px; |
296 | } | 525 | } |
297 | .p13-date { | 526 | .p13-date { |
298 | font-size: 10px; | 527 | font-size: 10px; |
299 | color: #999999; | 528 | color: #999999; |
300 | letter-spacing: -0.19px; | 529 | letter-spacing: -0.19px; |
301 | margin-right: 5px; | 530 | margin-right: 5px; |
302 | } | 531 | } |
303 | .p14 { | 532 | .p14 { |
304 | font-size: 14px; | 533 | font-size: 14px; |
305 | color: #666666; | 534 | color: #666666; |
306 | letter-spacing: -0.26px; | 535 | letter-spacing: -0.26px; |
307 | text-align: center; | 536 | text-align: center; |
308 | width: 124rpx; | 537 | width: 124rpx; |
309 | border-bottom: 1px solid #CFCFCF; | 538 | border-bottom: 1px solid #CFCFCF; |
539 | height: 40rpx; | ||
540 | |||
310 | } | 541 | } |
311 | 542 | ||
312 | } | 543 | } |
313 | } | 544 | } |
314 | } | 545 | } |
315 | 546 | ||
316 | .footer{ | 547 | .footer{ |
317 | width: 100%; | 548 | width: 100%; |
318 | position: fixed; | 549 | position: fixed; |
319 | bottom: 0; | 550 | bottom: 0; |
320 | left: 0; | 551 | left: 0; |
321 | .btn{ | 552 | .btn{ |
322 | width: 100%; | 553 | width: 100%; |
323 | height: 112rpx; | 554 | height: 112rpx; |
324 | line-height: 112rpx; | 555 | line-height: 112rpx; |
src/pages/purchaseLenses/purchaseLenses.vue
1 | <template> | 1 | <template> |
2 | <view class="content"> | 2 | <view class="content"> |
3 | <view class="goodInfo"> | 3 | <view class="goodInfo"> |
4 | <view class="imageWrap"> | 4 | <view class="imageWrap"> |
5 | <image | 5 | <image |
6 | src="../../static/img/detail/d1.png" | 6 | src="../../static/img/detail/d1.png" |
7 | mode="aspectFill" | 7 | mode="aspectFill" |
8 | style="width: 188rpx;height: 168rpx;" | 8 | style="width: 188rpx;height: 168rpx;" |
9 | ></image> | 9 | ></image> |
10 | </view> | 10 | </view> |
11 | <view class="infoRight"> | 11 | <view class="infoRight"> |
12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | 12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> |
13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
14 | <view class="priceBox"> | 14 | <view class="priceBox"> |
15 | <view class="price">¥198</view> | 15 | <view class="price">¥198</view> |
16 | <text>(限购{{maxCount}}副)</text> | 16 | <text>(限购{{maxCount}}副)</text> |
17 | <view class="counter"> | 17 | <view class="counter"> |
18 | <view | 18 | <view |
19 | class="btn" | 19 | class="btn" |
20 | disabled="this.addDisabled" | 20 | disabled="this.addDisabled" |
21 | type="default" | 21 | type="default" |
22 | @click="counter(false)" | 22 | @click="counter(false)" |
23 | >-</view> | 23 | >-</view> |
24 | <text>{{count}}</text> | 24 | <text>{{count}}</text> |
25 | <view | 25 | <view |
26 | class="btn" | 26 | class="btn" |
27 | disabled="this.desDisabled" | 27 | disabled="this.desDisabled" |
28 | type="default" | 28 | type="default" |
29 | @click="counter(true)" | 29 | @click="counter(true)" |
30 | >+</view> | 30 | >+</view> |
31 | </view> | 31 | </view> |
32 | </view> | 32 | </view> |
33 | </view> | 33 | </view> |
34 | </view> | 34 | </view> |
35 | <view class="goods-data"> | 35 | <view class="goods-data"> |
36 | <view class="opCollapse"> | 36 | <view class="opCollapse"> |
37 | <view class="body"> | 37 | <view class="body"> |
38 | <template v-if="opIsOpen"> | 38 | <template v-if="opIsOpen"> |
39 | <view class="goods-form"> | 39 | <view class="goods-form"> |
40 | <view class="data-title"> | 40 | <view class="data-title"> |
41 | <image src="../../static/icon-data.png"></image> | 41 | <image src="../../static/icon-data.png"></image> |
42 | <text class="p1">填写验光数据</text> | 42 | <text class="p1">填写验光数据</text> |
43 | </view> | 43 | </view> |
44 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | 44 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> |
45 | <view class="picker"> | 45 | <view class="picker"> |
46 | <view class="picker-choice"> | 46 | <view class="picker-choice"> |
47 | <view class="choice-left"> | 47 | <view class="choice-left"> |
48 | <text class="p11">验光单取名:</text> | 48 | <text class="p11">验光单取名:</text> |
49 | </view> | 49 | </view> |
50 | <input | 50 | <input |
51 | class="choice-name uni-input" | 51 | class="choice-name uni-input" |
52 | placeholder="下系" | 52 | placeholder="下系" |
53 | /> | 53 | /> |
54 | </view> | 54 | </view> |
55 | </view> | 55 | </view> |
56 | <view class="picker"> | 56 | <view class="picker"> |
57 | <view class="picker-choice"> | 57 | <view class="picker-choice"> |
58 | <view class="choice-left"> | 58 | <view class="choice-left"> |
59 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 59 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
60 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 60 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
61 | </view> | 61 | </view> |
62 | <text class="p13">左 (OD)</text> | 62 | <text class="p13">左 (OD)</text> |
63 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 63 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
64 | <picker | 64 | <picker |
65 | @change="bindPickerChange01" | 65 | @change="bindPickerChange01" |
66 | :value="pickerInfoList[0].nameIndex1" | 66 | :value="pickerInfoList[0].nameIndex1" |
67 | :range="pickerInfoList[0].nameArray1" | 67 | :range="pickerInfoList[0].nameArray1" |
68 | > | 68 | > |
69 | <image src="../../static/detail-tabicon.png"></image> | 69 | <image src="../../static/detail-tabicon.png"></image> |
70 | </picker> | 70 | </picker> |
71 | <text class="p13">右 (OS)</text> | 71 | <text class="p13">右 (OS)</text> |
72 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 72 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
73 | <picker | 73 | <picker |
74 | @change="bindPickerChange02" | 74 | @change="bindPickerChange02" |
75 | :value="pickerInfoList[0].nameIndex2" | 75 | :value="pickerInfoList[0].nameIndex2" |
76 | :range="pickerInfoList[0].nameArray2" | 76 | :range="pickerInfoList[0].nameArray2" |
77 | > | 77 | > |
78 | <image src="../../static/detail-tabicon.png"></image> | 78 | <image src="../../static/detail-tabicon.png"></image> |
79 | </picker> | 79 | </picker> |
80 | </view> | 80 | </view> |
81 | </view> | 81 | </view> |
82 | <view class="picker"> | 82 | <view class="picker"> |
83 | <view class="picker-choice"> | 83 | <view class="picker-choice"> |
84 | <view class="choice-left"> | 84 | <view class="choice-left"> |
85 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 85 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
86 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 86 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
87 | </view> | 87 | </view> |
88 | <text class="p13">左 (OD)</text> | 88 | <text class="p13">左 (OD)</text> |
89 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 89 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
90 | <picker | 90 | <picker |
91 | @change="bindPickerChange11" | 91 | @change="bindPickerChange11" |
92 | :value="pickerInfoList[1].nameIndex1" | 92 | :value="pickerInfoList[1].nameIndex1" |
93 | :range="pickerInfoList[1].nameArray1" | 93 | :range="pickerInfoList[1].nameArray1" |
94 | > | 94 | > |
95 | <image src="../../static/detail-tabicon.png"></image> | 95 | <image src="../../static/detail-tabicon.png"></image> |
96 | </picker> | 96 | </picker> |
97 | <text class="p13">右 (OS)</text> | 97 | <text class="p13">右 (OS)</text> |
98 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 98 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
99 | <picker | 99 | <picker |
100 | @change="bindPickerChange12" | 100 | @change="bindPickerChange12" |
101 | :value="pickerInfoList[1].nameIndex2" | 101 | :value="pickerInfoList[1].nameIndex2" |
102 | :range="pickerInfoList[1].nameArray2" | 102 | :range="pickerInfoList[1].nameArray2" |
103 | > | 103 | > |
104 | <image src="../../static/detail-tabicon.png"></image> | 104 | <image src="../../static/detail-tabicon.png"></image> |
105 | </picker> | 105 | </picker> |
106 | </view> | 106 | </view> |
107 | </view> | 107 | </view> |
108 | <view class="picker"> | 108 | <view class="picker"> |
109 | <view class="picker-choice"> | 109 | <view class="picker-choice"> |
110 | <view class="choice-left"> | 110 | <view class="choice-left"> |
111 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 111 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
112 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 112 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
113 | </view> | 113 | </view> |
114 | <text class="p13">左 (OD)</text> | 114 | <text class="p13">左 (OD)</text> |
115 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 115 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
116 | <picker | 116 | <picker |
117 | @change="bindPickerChange21" | 117 | @change="bindPickerChange21" |
118 | :value="pickerInfoList[2].nameIndex1" | 118 | :value="pickerInfoList[2].nameIndex1" |
119 | :range="pickerInfoList[2].nameArray1" | 119 | :range="pickerInfoList[2].nameArray1" |
120 | > | 120 | > |
121 | <image src="../../static/detail-tabicon.png"></image> | 121 | <image src="../../static/detail-tabicon.png"></image> |
122 | </picker> | 122 | </picker> |
123 | <text class="p13">右 (OS)</text> | 123 | <text class="p13">右 (OS)</text> |
124 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 124 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
125 | <picker | 125 | <picker |
126 | @change="bindPickerChange22" | 126 | @change="bindPickerChange22" |
127 | :value="pickerInfoList[2].nameIndex2" | 127 | :value="pickerInfoList[2].nameIndex2" |
128 | :range="pickerInfoList[2].nameArray2" | 128 | :range="pickerInfoList[2].nameArray2" |
129 | > | 129 | > |
130 | <image src="../../static/detail-tabicon.png"></image> | 130 | <image src="../../static/detail-tabicon.png"></image> |
131 | </picker> | 131 | </picker> |
132 | </view> | 132 | </view> |
133 | </view> | 133 | </view> |
134 | <view class="picker"> | 134 | <view class="picker"> |
135 | <view class="picker-choice"> | 135 | <view class="picker-choice"> |
136 | <view class="choice-left"> | 136 | <view class="choice-left"> |
137 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 137 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
138 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 138 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
139 | </view> | 139 | </view> |
140 | <text class="p13">左 (OD)</text> | 140 | <text class="p13">左 (OD)</text> |
141 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 141 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
142 | <picker | 142 | <picker |
143 | @change="bindPickerChange31" | 143 | @change="bindPickerChange31" |
144 | :value="pickerInfoList[3].nameIndex1" | 144 | :value="pickerInfoList[3].nameIndex1" |
145 | :range="pickerInfoList[3].nameArray1" | 145 | :range="pickerInfoList[3].nameArray1" |
146 | > | 146 | > |
147 | <image src="../../static/detail-tabicon.png"></image> | 147 | <image src="../../static/detail-tabicon.png"></image> |
148 | </picker> | 148 | </picker> |
149 | <text class="p13">右 (OS)</text> | 149 | <text class="p13">右 (OS)</text> |
150 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 150 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
151 | <picker | 151 | <picker |
152 | @change="bindPickerChange32" | 152 | @change="bindPickerChange32" |
153 | :value="pickerInfoList[3].nameIndex2" | 153 | :value="pickerInfoList[3].nameIndex2" |
154 | :range="pickerInfoList[3].nameArray2" | 154 | :range="pickerInfoList[3].nameArray2" |
155 | > | 155 | > |
156 | <image src="../../static/detail-tabicon.png"></image> | 156 | <image src="../../static/detail-tabicon.png"></image> |
157 | </picker> | 157 | </picker> |
158 | </view> | 158 | </view> |
159 | </view> | 159 | </view> |
160 | <view class="picker"> | 160 | <view class="picker"> |
161 | <view class="picker-choice"> | 161 | <view class="picker-choice"> |
162 | <view class="choice-left"> | 162 | <view class="choice-left"> |
163 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 163 | <text class="p11">{{pickerInfoList[4].nameC}}</text> |
164 | </view> | 164 | </view> |
165 | <text class="p13-date">年 (Y)</text> | 165 | <text class="p13-date">年 (Y)</text> |
166 | <text | 166 | <text |
167 | class="p14" | 167 | class="p14" |
168 | style="width: 34px;" | 168 | style="width: 34px;" |
169 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | 169 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> |
170 | <picker | 170 | <picker |
171 | @change="bindPickerChange41" | 171 | @change="bindPickerChange41" |
172 | :value="pickerInfoList[4].nameIndex1" | 172 | :value="pickerInfoList[4].nameIndex1" |
173 | :range="pickerInfoList[4].nameArray1" | 173 | :range="pickerInfoList[4].nameArray1" |
174 | > | 174 | > |
175 | <image src="../../static/detail-tabicon.png"></image> | 175 | <image src="../../static/detail-tabicon.png"></image> |
176 | </picker> | 176 | </picker> |
177 | <text class="p13-date">月 (M)</text> | 177 | <text class="p13-date">月 (M)</text> |
178 | <text | 178 | <text |
179 | class="p14" | 179 | class="p14" |
180 | style="width: 30px;" | 180 | style="width: 30px;" |
181 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | 181 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> |
182 | <picker | 182 | <picker |
183 | @change="bindPickerChange42" | 183 | @change="bindPickerChange42" |
184 | :value="pickerInfoList[4].nameIndex2" | 184 | :value="pickerInfoList[4].nameIndex2" |
185 | :range="pickerInfoList[4].nameArray2" | 185 | :range="pickerInfoList[4].nameArray2" |
186 | > | 186 | > |
187 | <image src="../../static/detail-tabicon.png"></image> | 187 | <image src="../../static/detail-tabicon.png"></image> |
188 | </picker> | 188 | </picker> |
189 | <text class="p13-date">日 (D)</text> | 189 | <text class="p13-date">日 (D)</text> |
190 | <text | 190 | <text |
191 | class="p14" | 191 | class="p14" |
192 | style="width: 30px;" | 192 | style="width: 30px;" |
193 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | 193 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> |
194 | <picker | 194 | <picker |
195 | @change="bindPickerChange43" | 195 | @change="bindPickerChange43" |
196 | :value="pickerInfoList[4].nameIndex3" | 196 | :value="pickerInfoList[4].nameIndex3" |
197 | :range="pickerInfoList[4].nameArray3" | 197 | :range="pickerInfoList[4].nameArray3" |
198 | > | 198 | > |
199 | <image src="../../static/detail-tabicon.png"></image> | 199 | <image src="../../static/detail-tabicon.png"></image> |
200 | </picker> | 200 | </picker> |
201 | </view> | 201 | </view> |
202 | </view> | 202 | </view> |
203 | <view class="confirm"> | 203 | <view class="confirm"> |
204 | <image | 204 | <image |
205 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" | 205 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" |
206 | @click="changeConfirm" | 206 | @click="changeConfirm" |
207 | ></image> | 207 | ></image> |
208 | <text>确认以上输入信息来源于我的验光数据!</text> | 208 | <text>确认以上输入信息来源于我的验光数据!</text> |
209 | </view> | 209 | </view> |
210 | </view> | 210 | </view> |
211 | 211 | ||
212 | </template> | 212 | </template> |
213 | <template v-else> | 213 | <template v-else> |
214 | <view | 214 | <view |
215 | v-for="item in pickerInfoList" | 215 | v-for="item in pickerInfoList" |
216 | :key="item.key" | 216 | :key="item.key" |
217 | class="bodyBox" | 217 | class="bodyBox" |
218 | > | 218 | > |
219 | <template v-if="item.nameC==='验光日期'"> | 219 | <template v-if="item.nameC==='验光日期'"> |
220 | <text class="names">{{item.nameC}}</text> | 220 | <text class="names">{{item.nameC}}</text> |
221 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 221 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
222 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 222 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
223 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 223 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
224 | </template> | 224 | </template> |
225 | <template v-else> | 225 | <template v-else> |
226 | <template v-if="item.nameC==='度数'"> | 226 | <template v-if="item.nameC==='度数'"> |
227 | <text style="display: inline;">*</text> | 227 | <text style="display: inline;">*</text> |
228 | </template> | 228 | </template> |
229 | 229 | ||
230 | <text class="names">{{item.nameC}}</text> | 230 | <text class="names">{{item.nameC}}</text> |
231 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 231 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
232 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 232 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
233 | </template> | 233 | </template> |
234 | </view> | 234 | </view> |
235 | </template> | 235 | </template> |
236 | </view> | 236 | </view> |
237 | </view> | 237 | </view> |
238 | </view> | 238 | </view> |
239 | <view class="choose"> | 239 | <view class="choose"> |
240 | <view | 240 | <view |
241 | class="chooseItem_1_content" | 241 | class="chooseItem_1_content" |
242 | v-for="(item,index) in attrList" | 242 | v-for="(item,index) in attrList" |
243 | :key="index" | 243 | :key="index" |
244 | > | 244 | > |
245 | <UniCollapse @change="change(index)"> | 245 | <UniCollapse @change="change(index)"> |
246 | <UniCollapseItem | 246 | <UniCollapseItem |
247 | :open="show[index]" | 247 | :open="show[index]" |
248 | :title="item.meta_name" | 248 | :title="item.meta_name" |
249 | showAnimation=false | 249 | showAnimation=false |
250 | > | 250 | > |
251 | <view class="chooseItem_1_content"> | 251 | <view class="chooseItem_1_content"> |
252 | <view class="itemsWrap"> | 252 | <view class="itemsWrap"> |
253 | <view | 253 | <view |
254 | class="item2" | 254 | class="item2" |
255 | v-for="(one,i) in item.attr" | 255 | v-for="(one,i) in item.attr" |
256 | :key="i" | 256 | :key="i" |
257 | :class="{ active2: current[index] === i }" | 257 | :class="{ active2: current[index] === i }" |
258 | @click="onClickItem(index, i)" | 258 | @click="onClickItem(index, i)" |
259 | >{{one.name}}</view> | 259 | >{{one.name}}</view> |
260 | </view> | 260 | </view> |
261 | </view> | 261 | </view> |
262 | </UniCollapseItem> | 262 | </UniCollapseItem> |
263 | </UniCollapse> | 263 | </UniCollapse> |
264 | <view | 264 | <view |
265 | class="chooseRes" | 265 | class="chooseRes" |
266 | v-show="!show[index]" | 266 | v-show="!show[index]" |
267 | >* {{attrList[index].attr[current[index]].name}}</view> | 267 | >* {{attrList[index].attr[current[index]].name}}</view> |
268 | </view> | 268 | </view> |
269 | <!-- <view class="chooseItem_1 chooseItem"> | 269 | <!-- <view class="chooseItem_1 chooseItem"> |
270 | <UniCollapse @change="change(1)"> | 270 | <UniCollapse @change="change(1)"> |
271 | <UniCollapseItem | 271 | <UniCollapseItem |
272 | open=true | 272 | open=true |
273 | title="款式挑选" | 273 | title="款式挑选" |
274 | showAnimation=false | 274 | showAnimation=false |
275 | > | 275 | > |
276 | <view | 276 | <view |
277 | class="chooseRes" | 277 | class="chooseRes" |
278 | v-show="show[1]" | 278 | v-show="show[1]" |
279 | >* {{chooseRes1}}</view> | 279 | >* {{chooseRes1}}</view> |
280 | <view class="chooseItem_1_content"> | 280 | <view class="chooseItem_1_content"> |
281 | <view class="itemsWrap"> | 281 | <view class="itemsWrap"> |
282 | <view | 282 | <view |
283 | class="item1" | 283 | class="item1" |
284 | v-for="(item,index) in chooseItem1" | 284 | v-for="(item,index) in chooseItem1" |
285 | :key="index" | 285 | :key="index" |
286 | :style="item.style" | 286 | :style="item.style" |
287 | :class="{ active1: current1 === index }" | 287 | :class="{ active1: current1 === index }" |
288 | @click="onClickItem1(index)" | 288 | @click="onClickItem1(index)" |
289 | ></view> | 289 | ></view> |
290 | </view> | 290 | </view> |
291 | </view> | 291 | </view> |
292 | </UniCollapseItem> | 292 | </UniCollapseItem> |
293 | </UniCollapse> | 293 | </UniCollapse> |
294 | <view | 294 | <view |
295 | class="chooseRes" | 295 | class="chooseRes" |
296 | v-show="show[1]" | 296 | v-show="show[1]" |
297 | >* {{chooseRes1}}</view> | 297 | >* {{chooseRes1}}</view> |
298 | </view> | 298 | </view> |
299 | <view class="chooseItem_2 chooseItem "> | 299 | <view class="chooseItem_2 chooseItem "> |
300 | <UniCollapse @change="change(2)"> | 300 | <UniCollapse @change="change(2)"> |
301 | <UniCollapseItem | 301 | <UniCollapseItem |
302 | open=true | 302 | open=true |
303 | title="直径" | 303 | title="直径" |
304 | showAnimation=false | 304 | showAnimation=false |
305 | > | 305 | > |
306 | <view class="chooseItem_1_content"> | 306 | <view class="chooseItem_1_content"> |
307 | <view class="itemsWrap"> | 307 | <view class="itemsWrap"> |
308 | <view | 308 | <view |
309 | class="item2" | 309 | class="item2" |
310 | v-for="(item,index) in chooseItem2" | 310 | v-for="(item,index) in chooseItem2" |
311 | :key="index" | 311 | :key="index" |
312 | :class="{ active2: current2 === index }" | 312 | :class="{ active2: current2 === index }" |
313 | @click="onClickItem2(index)" | 313 | @click="onClickItem2(index)" |
314 | >{{item.num}}</view> | 314 | >{{item.num}}</view> |
315 | </view> | 315 | </view> |
316 | </view> | 316 | </view> |
317 | </UniCollapseItem> | 317 | </UniCollapseItem> |
318 | </UniCollapse> | 318 | </UniCollapse> |
319 | <view | 319 | <view |
320 | class="chooseRes" | 320 | class="chooseRes" |
321 | v-show="show[2]" | 321 | v-show="show[2]" |
322 | >* {{chooseRes2}}</view> | 322 | >* {{chooseRes2}}</view> |
323 | </view> | 323 | </view> |
324 | <view class="chooseItem_3 chooseItem"> | 324 | <view class="chooseItem_3 chooseItem"> |
325 | <UniCollapse @change="change(3)"> | 325 | <UniCollapse @change="change(3)"> |
326 | <UniCollapseItem | 326 | <UniCollapseItem |
327 | open=true | 327 | open=true |
328 | title="度数" | 328 | title="度数" |
329 | showAnimation=false | 329 | showAnimation=false |
330 | > | 330 | > |
331 | <view class="chooseItem_1_content"> | 331 | <view class="chooseItem_1_content"> |
332 | <view class="itemsWrap"> | 332 | <view class="itemsWrap"> |
333 | <view | 333 | <view |
334 | class="item2" | 334 | class="item2" |
335 | v-for="(item,index) in chooseItem3" | 335 | v-for="(item,index) in chooseItem3" |
336 | :key="index" | 336 | :key="index" |
337 | :class="{ active2: current3 === index }" | 337 | :class="{ active2: current3 === index }" |
338 | @click="onClickItem3(index)" | 338 | @click="onClickItem3(index)" |
339 | >{{item}}</view> | 339 | >{{item}}</view> |
340 | </view> | 340 | </view> |
341 | </view> | 341 | </view> |
342 | </UniCollapseItem> | 342 | </UniCollapseItem> |
343 | </UniCollapse> | 343 | </UniCollapse> |
344 | <view | 344 | <view |
345 | class="chooseRes" | 345 | class="chooseRes" |
346 | v-show="show[3]" | 346 | v-show="show[3]" |
347 | >* {{chooseRes3}}</view> | 347 | >* {{chooseRes3}}</view> |
348 | </view> --> | 348 | </view> --> |
349 | </view> | 349 | </view> |
350 | <view | 350 | <view |
351 | class="button" | 351 | class="button" |
352 | @click="toComfirmOrder" | 352 | @click="toComfirmOrder" |
353 | > | 353 | > |
354 | 立即结算 | 354 | 立即结算 |
355 | </view> | 355 | </view> |
356 | </view> | 356 | </view> |
357 | </template> | 357 | </template> |
358 | 358 | ||
359 | <script> | 359 | <script> |
360 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 360 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
361 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 361 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
362 | import store from '@/store' | 362 | import store from '@/store' |
363 | 363 | ||
364 | export default { | 364 | export default { |
365 | components: { | 365 | components: { |
366 | UniCollapse, | 366 | UniCollapse, |
367 | UniCollapseItem | 367 | UniCollapseItem |
368 | }, | 368 | }, |
369 | data() { | 369 | data() { |
370 | return { | 370 | return { |
371 | count: 1, | 371 | count: 1, |
372 | pid: 0, | 372 | pid: 0, |
373 | maxCount: 20, | 373 | maxCount: 20, |
374 | isShow: true, | 374 | isShow: true, |
375 | opIsOpen: true, | 375 | opIsOpen: true, |
376 | addDisabled: false, | 376 | addDisabled: false, |
377 | desDisabled: false, | 377 | desDisabled: false, |
378 | current1: 0, | 378 | current1: 0, |
379 | current2: 0, | 379 | current2: 0, |
380 | current3: 0, | 380 | current3: 0, |
381 | current: [], | 381 | current: [], |
382 | show: [], | 382 | show: [], |
383 | chooseRes1: { | 383 | chooseRes1: { |
384 | sku_name: 'Miss 黑二代【减龄自然】', | 384 | sku_name: 'Miss 黑二代【减龄自然】', |
385 | sk_id: '128' | 385 | sk_id: '128' |
386 | }, | 386 | }, |
387 | chooseRes2: '14.0', | 387 | chooseRes2: '14.0', |
388 | chooseRes3: 0, | 388 | chooseRes3: 0, |
389 | chooseItem1: [ | 389 | chooseItem1: [ |
390 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, | 390 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, |
391 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, | 391 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, |
392 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, | 392 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, |
393 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 393 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
394 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 394 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
395 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 395 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
396 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 396 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
397 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 397 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
398 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 398 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
399 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 399 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
400 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 400 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
401 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 401 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
402 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 402 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
403 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 403 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
404 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } | 404 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } |
405 | ], | 405 | ], |
406 | chooseItem2: [ | 406 | chooseItem2: [ |
407 | { num: '14.0' }, | 407 | { num: '14.0' }, |
408 | { num: '14.2' }, | 408 | { num: '14.2' }, |
409 | { num: '14.4' }, | 409 | { num: '14.4' }, |
410 | { num: '14.5' } | 410 | { num: '14.5' } |
411 | ], | 411 | ], |
412 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], | 412 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], |
413 | // 度数相关数据 | 413 | // 度数相关数据 |
414 | pickerInfoList: [ | 414 | pickerInfoList: [ |
415 | { 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 }, | 415 | { 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 }, |
416 | { 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 }, | 416 | { 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 }, |
417 | { 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 }, | 417 | { 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 }, |
418 | { 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 }, | 418 | { 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 }, |
419 | { 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 } | 419 | { 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 } |
420 | ] | 420 | ] |
421 | } | 421 | } |
422 | }, | 422 | }, |
423 | computed: { | 423 | computed: { |
424 | attrList() { | 424 | attrList() { |
425 | return this.$store.state.read.goodInfo.attrList | 425 | return this.$store.state.read.goodInfo.attrList |
426 | }, | 426 | }, |
427 | skuList() { | 427 | skuList() { |
428 | return this.$store.state.read.goodInfo.skuList | 428 | return this.$store.state.read.goodInfo.skuList |
429 | } | 429 | } |
430 | }, | 430 | }, |
431 | onLoad({ pid }) { | 431 | onLoad({ pid }) { |
432 | this.pid = pid | 432 | this.pid = pid |
433 | store.dispatch('read/fetch', { | 433 | store.dispatch('read/fetch', { |
434 | pid | 434 | pid |
435 | }).then(() => { | 435 | }).then(() => { |
436 | const current = [] | 436 | const current = [] |
437 | const show = [] | 437 | const show = [] |
438 | for (let index = 0; index < this.attrList.length; index++) { | 438 | for (let index = 0; index < this.attrList.length; index++) { |
439 | current.push(0) | 439 | current.push(0) |
440 | show.push(true) | 440 | show.push(true) |
441 | } | 441 | } |
442 | this.current = current | 442 | this.current = current |
443 | this.show = show | 443 | this.show = show |
444 | }) | 444 | }) |
445 | }, | 445 | }, |
446 | methods: { | 446 | methods: { |
447 | change(num) { | 447 | change(num) { |
448 | this.show[num] = !this.show[num] | 448 | this.show[num] = !this.show[num] |
449 | this.$forceUpdate() | 449 | this.$forceUpdate() |
450 | }, | 450 | }, |
451 | onClickItem(index, i) { | 451 | onClickItem(index, i) { |
452 | if (this.current[index] !== i) { | 452 | if (this.current[index] !== i) { |
453 | this.current[index] = i | 453 | this.current[index] = i |
454 | } | 454 | } |
455 | this.$forceUpdate() | 455 | this.$forceUpdate() |
456 | }, | 456 | }, |
457 | onClickItem1(index) { | 457 | onClickItem1(index) { |
458 | if (this.current1 !== index) { | 458 | if (this.current1 !== index) { |
459 | this.current1 = index | 459 | this.current1 = index |
460 | this.chooseRes1 = this.chooseItem1[index].describ | 460 | this.chooseRes1 = this.chooseItem1[index].describ |
461 | } | 461 | } |
462 | }, | 462 | }, |
463 | onClickItem2(index) { | 463 | onClickItem2(index) { |
464 | if (this.current2 !== index) { | 464 | if (this.current2 !== index) { |
465 | this.current2 = index | 465 | this.current2 = index |
466 | this.chooseRes2 = this.chooseItem2[index].num | 466 | this.chooseRes2 = this.chooseItem2[index].num |
467 | } | 467 | } |
468 | }, | 468 | }, |
469 | onClickItem3(index) { | 469 | onClickItem3(index) { |
470 | if (this.current3 !== index) { | 470 | if (this.current3 !== index) { |
471 | this.current3 = index | 471 | this.current3 = index |
472 | this.chooseRes3 = this.chooseItem3[index] | 472 | this.chooseRes3 = this.chooseItem3[index] |
473 | } | 473 | } |
474 | }, | 474 | }, |
475 | counter(isadd) { | 475 | counter(isadd) { |
476 | if (isadd) { | 476 | if (isadd) { |
477 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 477 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
478 | } else { | 478 | } else { |
479 | this.count <= 1 ? this.desDisabled = true : this.count-- | 479 | this.count <= 1 ? this.desDisabled = true : this.count-- |
480 | } | 480 | } |
481 | }, | 481 | }, |
482 | toComfirmOrder() { | 482 | toComfirmOrder() { |
483 | store.dispatch('order/saveParams', { | 483 | store.dispatch('order/saveParams', { |
484 | current: this.current | 484 | current: this.current |
485 | }) | 485 | }) |
486 | uni.navigateTo({ | 486 | uni.navigateTo({ |
487 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` | 487 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` |
488 | }) | 488 | }) |
489 | } | 489 | } |
490 | } | 490 | } |
491 | } | 491 | } |
492 | </script> | 492 | </script> |
493 | 493 | ||
494 | <style lang="scss"> | 494 | <style lang="scss"> |
495 | .content { | 495 | .content { |
496 | min-height: 100vh; | 496 | min-height: 100vh; |
497 | background-color: #f2f2f2; | 497 | background-color: #f2f2f2; |
498 | // padding-top: 20rpx; | 498 | // padding-top: 20rpx; |
499 | .goodInfo { | 499 | .goodInfo { |
500 | width: 100%; | 500 | width: 100%; |
501 | height: 272rpx; | 501 | height: 272rpx; |
502 | border-radius: 16rpx; | 502 | border-radius: 16rpx; |
503 | background-color: #ffffff; | 503 | background-color: #ffffff; |
504 | box-sizing: border-box; | 504 | box-sizing: border-box; |
505 | padding: 36rpx; | 505 | padding: 36rpx; |
506 | display: flex; | 506 | display: flex; |
507 | flex-direction: row; | 507 | flex-direction: row; |
508 | justify-content: flex-start; | 508 | justify-content: flex-start; |
509 | .imageWrap { | 509 | .imageWrap { |
510 | height: 188rpx; | 510 | height: 188rpx; |
511 | width: 188rpx; | 511 | width: 188rpx; |
512 | margin-right: 28rpx; | 512 | margin-right: 28rpx; |
513 | image { | 513 | image { |
514 | height: 188rpx; | 514 | height: 188rpx; |
515 | width: 188rpx; | 515 | width: 188rpx; |
516 | } | 516 | } |
517 | } | 517 | } |
518 | .infoRight { | 518 | .infoRight { |
519 | display: flex; | 519 | display: flex; |
520 | flex-direction: column; | 520 | flex-direction: column; |
521 | align-items: flex-start; | 521 | align-items: flex-start; |
522 | justify-content: space-between; | 522 | justify-content: space-between; |
523 | .goodName { | 523 | .goodName { |
524 | font-size: 28rpx; | 524 | font-size: 28rpx; |
525 | color: #333333; | 525 | color: #333333; |
526 | } | 526 | } |
527 | .remarks { | 527 | .remarks { |
528 | font-size: 20rpx; | 528 | font-size: 20rpx; |
529 | color: #999999; | 529 | color: #999999; |
530 | } | 530 | } |
531 | .priceBox { | 531 | .priceBox { |
532 | display: flex; | 532 | display: flex; |
533 | justify-content: space-between; | 533 | justify-content: space-between; |
534 | align-items: center; | 534 | align-items: center; |
535 | width: 100%; | 535 | width: 100%; |
536 | font-size: 14px; | 536 | font-size: 14px; |
537 | color: #999999; | 537 | color: #999999; |
538 | .price { | 538 | .price { |
539 | color: #ff6b4a; | 539 | color: #ff6b4a; |
540 | font-size: 28rpx; | 540 | font-size: 28rpx; |
541 | } | 541 | } |
542 | .counter { | 542 | .counter { |
543 | display: flex; | 543 | display: flex; |
544 | flex-direction: row; | 544 | flex-direction: row; |
545 | justify-content: space-between; | 545 | justify-content: space-between; |
546 | align-items: center; | 546 | align-items: center; |
547 | font-size: 28rpx; | 547 | font-size: 28rpx; |
548 | color: #333333; | 548 | color: #333333; |
549 | width: 122rpx; | 549 | width: 122rpx; |
550 | .btn { | 550 | .btn { |
551 | display: flex; | 551 | display: flex; |
552 | justify-content: center; | 552 | justify-content: center; |
553 | line-height: 32rpx; | 553 | line-height: 32rpx; |
554 | height: 32rpx; | 554 | height: 32rpx; |
555 | width: 32rpx; | 555 | width: 32rpx; |
556 | background-color: #f2f2f2; | 556 | background-color: #f2f2f2; |
557 | color: #cfcfcf; | 557 | color: #cfcfcf; |
558 | } | 558 | } |
559 | } | 559 | } |
560 | } | 560 | } |
561 | } | 561 | } |
562 | } | 562 | } |
563 | .goods-data { | 563 | .goods-data { |
564 | width: 100%; | 564 | width: 100%; |
565 | box-sizing: border-box; | 565 | box-sizing: border-box; |
566 | padding: 37rpx 40rpx 0 40rpx; | 566 | padding: 37rpx 40rpx 0 40rpx; |
567 | background: #ffffff; | 567 | background: #ffffff; |
568 | border-radius: 12rpx; | 568 | border-radius: 12rpx; |
569 | .opCollapse { | 569 | .opCollapse { |
570 | width: 100%; | 570 | width: 100%; |
571 | padding-bottom: 28rpx; | 571 | padding-bottom: 28rpx; |
572 | margin-top: 7px; | 572 | margin-top: 7px; |
573 | border-bottom: 1px solid #e9e9e9; | 573 | border-bottom: 1px solid #e9e9e9; |
574 | .head { | 574 | .head { |
575 | display: flex; | 575 | display: flex; |
576 | justify-content: space-between; | 576 | justify-content: space-between; |
577 | height: 24px; | 577 | height: 24px; |
578 | // font-family: PingFangSC-Medium; | 578 | // font-family: PingFangSC-Medium; |
579 | font-size: 16px; | 579 | font-size: 16px; |
580 | color: #333333; | 580 | color: #333333; |
581 | letter-spacing: -0.3px; | 581 | letter-spacing: -0.3px; |
582 | text-align: justify; | 582 | text-align: justify; |
583 | line-height: 24px; | 583 | line-height: 24px; |
584 | margin-bottom: 18rpx; | 584 | margin-bottom: 18rpx; |
585 | .headRighted { | 585 | .headRighted { |
586 | width: 0; | 586 | width: 0; |
587 | height: 0; | 587 | height: 0; |
588 | border-left: 4px solid transparent; | 588 | border-left: 4px solid transparent; |
589 | border-right: 4px solid transparent; | 589 | border-right: 4px solid transparent; |
590 | border-bottom: 4px solid #cfcfcf; | 590 | border-bottom: 4px solid #cfcfcf; |
591 | transform: scaleY(-1); | 591 | transform: scaleY(-1); |
592 | margin-top: 10px; | 592 | margin-top: 10px; |
593 | } | 593 | } |
594 | .headMid { | 594 | .headMid { |
595 | // font-family: PingFangSC-Regular; | 595 | // font-family: PingFangSC-Regular; |
596 | font-size: 10px; | 596 | font-size: 10px; |
597 | color: #999999; | 597 | color: #999999; |
598 | letter-spacing: -0.19px; | 598 | letter-spacing: -0.19px; |
599 | margin-left: -120rpx; | 599 | margin-left: -120rpx; |
600 | } | 600 | } |
601 | .headRight { | 601 | .headRight { |
602 | width: 0; | 602 | width: 0; |
603 | height: 0; | 603 | height: 0; |
604 | border-left: 4px solid transparent; | 604 | border-left: 4px solid transparent; |
605 | border-right: 4px solid transparent; | 605 | border-right: 4px solid transparent; |
606 | border-bottom: 4px solid #cfcfcf; | 606 | border-bottom: 4px solid #cfcfcf; |
607 | margin-top: 10px; | 607 | margin-top: 10px; |
608 | } | 608 | } |
609 | } | 609 | } |
610 | .body { | 610 | .body { |
611 | // font-family: PingFangSC-Regular; | 611 | // font-family: PingFangSC-Regular; |
612 | font-size: 12px; | 612 | font-size: 12px; |
613 | color: #666666; | 613 | color: #666666; |
614 | letter-spacing: 0; | 614 | letter-spacing: 0; |
615 | .bodyBox { | 615 | .bodyBox { |
616 | margin-top: 15px; | 616 | margin-top: 15px; |
617 | .names { | 617 | .names { |
618 | // font-family: PingFangSC-Regular; | 618 | // font-family: PingFangSC-Regular; |
619 | font-size: 12px; | 619 | font-size: 12px; |
620 | color: #151515; | 620 | color: #151515; |
621 | letter-spacing: 0; | 621 | letter-spacing: 0; |
622 | text-align: justify; | 622 | text-align: justify; |
623 | line-height: 17px; | 623 | line-height: 17px; |
624 | margin-left: 5px; | 624 | margin-left: 5px; |
625 | margin-right: 10px; | 625 | margin-right: 10px; |
626 | } | 626 | } |
627 | text { | 627 | text { |
628 | // font-family: PingFangSC-Regular; | 628 | // font-family: PingFangSC-Regular; |
629 | font-size: 12px; | 629 | font-size: 12px; |
630 | color: #666666; | 630 | color: #666666; |
631 | letter-spacing: 0; | 631 | letter-spacing: 0; |
632 | text-align: justify; | 632 | text-align: justify; |
633 | } | 633 | } |
634 | } | 634 | } |
635 | } | 635 | } |
636 | .goods-form { | 636 | .goods-form { |
637 | display: flex; | 637 | display: flex; |
638 | flex-direction: column; | 638 | flex-direction: column; |
639 | align-items: center; | 639 | align-items: center; |
640 | justify-content: center; | 640 | justify-content: center; |
641 | background-color: #fff; | 641 | background-color: #fff; |
642 | width: 100%; | 642 | width: 100%; |
643 | .p1 { | 643 | .p1 { |
644 | font-size: 16px; | 644 | font-size: 16px; |
645 | color: #333333; | 645 | color: #333333; |
646 | letter-spacing: -0.3px; | 646 | letter-spacing: -0.3px; |
647 | text-align: justify; | 647 | text-align: justify; |
648 | line-height: 24px; | 648 | line-height: 24px; |
649 | margin: 4px 0; | 649 | margin: 4px 0; |
650 | } | 650 | } |
651 | .p2 { | 651 | .p2 { |
652 | font-size: 12px; | 652 | font-size: 12px; |
653 | color: #999999; | 653 | color: #999999; |
654 | letter-spacing: -0.23px; | 654 | letter-spacing: -0.23px; |
655 | margin-bottom: 18rpx; | 655 | margin-bottom: 18rpx; |
656 | } | 656 | } |
657 | image { | 657 | image { |
658 | width: 28rpx; | 658 | width: 28rpx; |
659 | height: 26rpx; | 659 | height: 26rpx; |
660 | } | 660 | } |
661 | .confirm { | 661 | .confirm { |
662 | display: flex; | 662 | display: flex; |
663 | align-items: center; | 663 | align-items: center; |
664 | font-size: 12px; | 664 | font-size: 12px; |
665 | color: #666666; | 665 | color: #666666; |
666 | letter-spacing: -0.23px; | 666 | letter-spacing: -0.23px; |
667 | width: 684rpx; | 667 | width: 684rpx; |
668 | image { | 668 | image { |
669 | margin-right: 25rpx; | 669 | margin-right: 25rpx; |
670 | } | 670 | } |
671 | } | 671 | } |
672 | .picker { | 672 | .picker { |
673 | display: flex; | 673 | display: flex; |
674 | flex-direction: column; | 674 | flex-direction: column; |
675 | justify-content: center; | 675 | justify-content: center; |
676 | align-items: center; | 676 | align-items: center; |
677 | width: 100%; | 677 | width: 100%; |
678 | image { | 678 | image { |
679 | width: 10px; | 679 | width: 10px; |
680 | height: 10px; | 680 | height: 10px; |
681 | margin-right: 5px; | 681 | margin-right: 5px; |
682 | } | 682 | } |
683 | .picker-choice { | 683 | .picker-choice { |
684 | display: flex; | 684 | display: flex; |
685 | width: 684rpx; | 685 | width: 684rpx; |
686 | align-items: center; | 686 | align-items: center; |
687 | margin-bottom: 40rpx; | 687 | margin-bottom: 40rpx; |
688 | .choice-left { | 688 | .choice-left { |
689 | width: 210rpx; | 689 | width: 210rpx; |
690 | .p11 { | 690 | .p11 { |
691 | font-size: 14px; | 691 | font-size: 14px; |
692 | color: #333333; | 692 | color: #333333; |
693 | letter-spacing: -0.26px; | 693 | letter-spacing: -0.26px; |
694 | text-align: justify; | 694 | text-align: justify; |
695 | line-height: 24px; | 695 | line-height: 24px; |
696 | } | 696 | } |
697 | .p12 { | 697 | .p12 { |
698 | font-size: 10px; | 698 | font-size: 10px; |
699 | color: #3f3f3f; | 699 | color: #3f3f3f; |
700 | letter-spacing: -0.19px; | 700 | letter-spacing: -0.19px; |
701 | text-align: justify; | 701 | text-align: justify; |
702 | line-height: 24px; | 702 | line-height: 24px; |
703 | } | 703 | } |
704 | } | 704 | } |
705 | .p13 { | 705 | .p13 { |
706 | font-size: 10px; | 706 | font-size: 10px; |
707 | color: #999999; | 707 | color: #999999; |
708 | letter-spacing: -0.19px; | 708 | letter-spacing: -0.19px; |
709 | margin-right: 10px; | 709 | margin-right: 10px; |
710 | } | 710 | } |
711 | .p13-date { | 711 | .p13-date { |
712 | font-size: 10px; | 712 | font-size: 10px; |
713 | color: #999999; | 713 | color: #999999; |
714 | letter-spacing: -0.19px; | 714 | letter-spacing: -0.19px; |
715 | margin-right: 5px; | 715 | margin-right: 5px; |
716 | } | 716 | } |
717 | .p14 { | 717 | .p14 { |
718 | font-size: 14px; | 718 | font-size: 14px; |
719 | color: #666666; | 719 | color: #666666; |
720 | letter-spacing: -0.26px; | 720 | letter-spacing: -0.26px; |
721 | text-align: center; | 721 | text-align: center; |
722 | width: 124rpx; | 722 | width: 124rpx; |
723 | border-bottom: 1px solid #cfcfcf; | 723 | border-bottom: 1px solid #cfcfcf; |
724 | } | 724 | } |
725 | } | 725 | } |
726 | } | 726 | } |
727 | } | 727 | } |
728 | } | 728 | } |
729 | } | 729 | } |
730 | .choose { | 730 | .choose { |
731 | width: 100%; | 731 | width: 100%; |
732 | background: #ffffff; | 732 | background: #ffffff; |
733 | border-radius: 12rpx; | 733 | border-radius: 12rpx; |
734 | margin-top: 20rpx; | 734 | margin-top: 20rpx; |
735 | padding: 40rpx 40rpx 112rpx 40rpx; | 735 | padding: 40rpx 40rpx 112rpx 40rpx; |
736 | box-sizing: border-box; | 736 | box-sizing: border-box; |
737 | .chooseItem { | 737 | .chooseItem { |
738 | width: 100%; | 738 | width: 100%; |
739 | padding-bottom: 32rpx; | 739 | padding-bottom: 32rpx; |
740 | border-bottom: 1px solid #e9e9e9; | 740 | border-bottom: 1px solid #e9e9e9; |
741 | margin-bottom: 28rpx; | 741 | margin-bottom: 28rpx; |
742 | } | 742 | } |
743 | .chooseRes { | 743 | .chooseRes { |
744 | font-size: 12px; | 744 | font-size: 12px; |
745 | color: #666666; | 745 | color: #666666; |
746 | } | 746 | } |
747 | .itemsWrap { | 747 | .itemsWrap { |
748 | display: flex; | 748 | display: flex; |
749 | flex-direction: row; | 749 | flex-direction: row; |
750 | flex-wrap: wrap; | 750 | flex-wrap: wrap; |
751 | justify-content: flex-start; | 751 | justify-content: flex-start; |
752 | align-items: center; | 752 | align-items: center; |
753 | padding-top: 24rpx; | 753 | padding-top: 24rpx; |
754 | .item1 { | 754 | .item1 { |
755 | width: 64rpx; | 755 | width: 64rpx; |
756 | height: 64rpx; | 756 | height: 64rpx; |
757 | border-radius: 32rpx; | 757 | border-radius: 32rpx; |
758 | margin: 0 36rpx 24rpx 0; | 758 | margin: 0 36rpx 24rpx 0; |
759 | transition: all 0.3s; | 759 | transition: all 0.3s; |
760 | border: 1px solid #ffffff; | 760 | border: 1px solid #ffffff; |
761 | } | 761 | } |
762 | .item2 { | 762 | .item2 { |
763 | // width: 100rpx; | 763 | // width: 100rpx; |
764 | padding: 0 30rpx; | 764 | padding: 0 30rpx; |
765 | height: 60rpx; | 765 | height: 60rpx; |
766 | margin: 0 20rpx 20rpx 0; | 766 | margin: 0 20rpx 20rpx 0; |
767 | transition: all 0.3s; | 767 | transition: all 0.3s; |
768 | background: #f2f2f2; | 768 | background: #f2f2f2; |
769 | border-radius: 2px; | 769 | border-radius: 2px; |
770 | border-radius: 2px; | 770 | border-radius: 2px; |
771 | line-height: 60rpx; | 771 | line-height: 60rpx; |
772 | text-align: center; | 772 | text-align: center; |
773 | color: #666666; | 773 | color: #666666; |
774 | font-size: 12px; | 774 | font-size: 12px; |
775 | } | 775 | } |
776 | .active1 { | 776 | .active1 { |
777 | opacity: 0.7; | 777 | opacity: 0.7; |
778 | border: 1px solid #ff6b4a; | 778 | border: 1px solid #ff6b4a; |
779 | } | 779 | } |
780 | .active2 { | 780 | .active2 { |
781 | background: rgba(255, 107, 74, 0.15); | 781 | background: rgba(255, 107, 74, 0.15); |
782 | color: #ff6b4a; | 782 | color: #ff6b4a; |
783 | } | 783 | } |
784 | } | 784 | } |
785 | } | 785 | } |
786 | .button { | 786 | .button { |
787 | width: 100%; | 787 | width: 100%; |
788 | height: 112rpx; | 788 | height: 112rpx; |
789 | background-color: #ff6b4a; | 789 | background-color: #ff6b4a; |
790 | font-size: 16px; | 790 | font-size: 16px; |
791 | color: #ffffff; | 791 | color: #ffffff; |
792 | line-height: 112rpx; | 792 | line-height: 112rpx; |
793 | text-align: center; | 793 | text-align: center; |
794 | position: fixed; | 794 | position: fixed; |
795 | bottom: 0; | 795 | bottom: 0; |
796 | left: 0; | 796 | left: 0; |
797 | } | 797 | } |
798 | } | 798 | } |
799 | </style> | 799 | </style> |
800 | 800 |
src/pages/user/user.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <!-- 弹窗 --> | ||
4 | <uni-popup | ||
5 | ref="popup" | ||
6 | type="center" | ||
7 | > | ||
8 | <!-- 给一个左边弹窗的样式 --> | ||
9 | <!-- 关闭弹窗按钮 --> | ||
10 | <view | ||
11 | class="closeBtn" | ||
12 | @tap="this.$refs.popup.close()" | ||
13 | >x</view> | ||
14 | <view | ||
15 | class="popUpWrap" | ||
16 | v-if="whichTap==0" | ||
17 | > | ||
18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> | ||
19 | |||
20 | <!-- 左 --> | ||
21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | ||
22 | <!-- 右 --> | ||
23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | ||
3 | <view | 24 | </view> |
4 | v-if="isAuth" | 25 | <view |
5 | class="content" | 26 | class="popUpWrap" |
6 | > | 27 | v-if="whichTap==1" |
7 | <view class="userInfo"> | 28 | > |
8 | <view class="info"> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
9 | <image | 30 | </view> |
10 | :src="headerphoto" | 31 | <view |
11 | mode="aspectFill" | 32 | class="popUpWrap" |
12 | ></image> | 33 | v-if="whichTap==2" |
13 | <view class="infoText"> | 34 | > |
14 | <text class="userName">{{nickName}}</text> | 35 | <button @tap="chatOur(1)">客服1</button> |
15 | </view> | 36 | <button @tap="chatOur(2)">客服2</button> |
16 | </view> | 37 | </view> |
17 | <!-- <view class="service"> | 38 | </uni-popup> |
18 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 39 | <view |
19 | </view> --> | 40 | v-if="isAuth" |
20 | </view> | 41 | class="content" |
21 | <view | 42 | > |
22 | class="myOpticsData" | 43 | <view class="userInfo"> |
23 | @click="toOpticsData" | 44 | <view class="info"> |
24 | > | 45 | <image |
25 | <view class="left"> | 46 | :src="headerphoto" |
26 | <image | 47 | mode="aspectFill" |
27 | src="../../static/img/user/dataWrite.png" | 48 | ></image> |
28 | mode="aspectFit" | 49 | <view class="infoText"> |
29 | ></image> | 50 | <text class="userName">{{nickName}}</text> |
30 | <text>验光数据</text> | 51 | </view> |
31 | </view> | 52 | </view> |
32 | <image | 53 | <!-- <view class="service"> |
33 | src="../../static/right.png" | 54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
34 | mode="aspectFit" | 55 | </view> --> |
35 | ></image> | 56 | </view> |
36 | </view> | 57 | <view |
37 | <view class="myOrder"> | 58 | class="myOpticsData" |
38 | <view class="orderHeader"> | 59 | @tap="toOpticsData" |
39 | <text>全部订单</text> | 60 | > |
40 | <view | 61 | <view class="left"> |
41 | class="btn" | 62 | <image |
42 | @click="toMyOrder('10')" | 63 | src="../../static/img/user/dataWrite.png" |
43 | > | 64 | mode="aspectFit" |
44 | 全部 | 65 | ></image> |
45 | <image | 66 | <text>验光数据</text> |
46 | src="../../static/right.png" | 67 | </view> |
47 | mode="aspectFit" | 68 | <image |
48 | ></image> | 69 | src="../../static/right.png" |
49 | </view> | 70 | mode="aspectFit" |
50 | </view> | 71 | ></image> |
51 | <view class="orderBody"> | 72 | </view> |
52 | <view | 73 | <view class="myOrder"> |
53 | class="item waitPay" | 74 | <view class="orderHeader"> |
54 | @click="toMyOrder('0')" | 75 | <text>全部订单</text> |
55 | > | 76 | <view |
56 | <image | 77 | class="btn" |
57 | src="../../static/img/user/waitDeliver.png" | 78 | @click="toMyOrder('10')" |
58 | mode="aspectFit" | 79 | > |
59 | ></image> | 80 | 全部 |
60 | <text>待付款</text> | 81 | <image |
61 | </view> | 82 | src="../../static/right.png" |
62 | <view | 83 | mode="aspectFit" |
63 | class="item waitDeliver" | 84 | ></image> |
64 | @click="toMyOrder('1')" | 85 | </view> |
65 | > | 86 | </view> |
66 | <image | 87 | <view class="orderBody"> |
67 | src="../../static/img/user/waitPay.png" | 88 | <view |
68 | mode="aspectFit" | 89 | class="item waitPay" |
69 | ></image> | 90 | @click="toMyOrder('0')" |
70 | <text>待收货</text> | 91 | > |
71 | </view> | 92 | <image |
72 | <view | 93 | src="../../static/img/user/waitDeliver.png" |
73 | class="item waitReceive" | 94 | mode="aspectFit" |
74 | @click="toMyOrder('2')" | 95 | ></image> |
75 | > | 96 | <text>待付款</text> |
76 | <image | 97 | </view> |
77 | src="../../static/img/user/waitReceive.png" | 98 | <view |
78 | mode="aspectFit" | 99 | class="item waitDeliver" |
79 | ></image> | 100 | @click="toMyOrder('1')" |
80 | <text>已完成</text> | 101 | > |
81 | </view> | 102 | <image |
82 | <!-- <view class="item service" @click="toMyOrder('3')"> | 103 | src="../../static/img/user/waitPay.png" |
83 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 104 | mode="aspectFit" |
84 | <text>已评价</text> | 105 | ></image> |
85 | </view> --> | 106 | <text>待收货</text> |
86 | </view> | 107 | </view> |
87 | </view> | 108 | <view |
88 | <view class="someItem"> | 109 | class="item waitReceive" |
89 | <!-- <view class="item"> | 110 | @click="toMyOrder('2')" |
90 | <view class="left"> | 111 | > |
91 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 112 | <image |
92 | <text>推广记录与收益</text> | 113 | src="../../static/img/user/waitReceive.png" |
93 | </view> | 114 | mode="aspectFit" |
94 | <image src="../../static/right.png" mode="aspectFit"></image> | 115 | ></image> |
95 | </view> --> | 116 | <text>已完成</text> |
96 | <view class="item"> | 117 | </view> |
97 | <view class="left"> | 118 | <!-- <view class="item service" @click="toMyOrder('3')"> |
98 | <image | 119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
99 | src="../../static/address-icon.png" | 120 | <text>已评价</text> |
100 | mode="aspectFit" | 121 | </view> --> |
101 | ></image> | 122 | </view> |
102 | <text @tap="toAddress">地址管理</text> | 123 | </view> |
103 | </view> | 124 | <view class="someItem"> |
104 | <image | 125 | <!-- <view class="item"> |
105 | src="../../static/right.png" | 126 | <view class="left"> |
106 | mode="aspectFit" | 127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> |
107 | ></image> | 128 | <text>推广记录与收益</text> |
108 | </view> | 129 | </view> |
109 | <view class="item"> | 130 | <image src="../../static/right.png" mode="aspectFit"></image> |
110 | <view class="left"> | 131 | </view> --> |
111 | <image | 132 | <view class="item"> |
112 | src="../../static/img/user/introduce.png" | 133 | <view class="left"> |
113 | mode="aspectFit" | 134 | <image |
114 | ></image> | 135 | src="../../static/address-icon.png" |
136 | mode="aspectFit" | ||
115 | <text @tap="introduce">系统介绍</text> | 137 | ></image> |
116 | </view> | 138 | <text @tap="toAddress">地址管理</text> |
117 | <image | 139 | </view> |
118 | src="../../static/right.png" | 140 | <image |
141 | src="../../static/right.png" | ||
119 | mode="aspectFit" | 142 | mode="aspectFit" |
120 | ></image> | 143 | ></image> |
121 | </view> | 144 | </view> |
122 | <view class="item"> | 145 | <view class="item"> |
123 | <view class="left"> | 146 | <view class="left"> |
147 | <image | ||
124 | <image | 148 | src="../../static/img/user/introduce.png" |
125 | src="../../static/img/user/joinUs.png" | 149 | mode="aspectFit" |
126 | mode="aspectFit" | 150 | ></image> |
127 | ></image> | 151 | <text @tap="introduce">系统介绍</text> |
128 | <text @tap="joinUs">加入我们</text> | 152 | </view> |
129 | </view> | 153 | <image |
130 | <image | 154 | src="../../static/right.png" |
131 | src="../../static/right.png" | 155 | mode="aspectFit" |
132 | mode="aspectFit" | 156 | ></image> |
133 | ></image> | 157 | </view> |
134 | </view> | 158 | <view class="item"> |
135 | <view class="item"> | 159 | <view class="left"> |
136 | <view class="left"> | 160 | <image |
137 | <image | 161 | src="../../static/img/user/joinUs.png" |
138 | src="../../static/img/user/service.png" | 162 | mode="aspectFit" |
139 | mode="aspectFit" | 163 | ></image> |
140 | ></image> | 164 | <text @tap="joinUs">加入我们</text> |
141 | <text>联系客服</text> | 165 | </view> |
142 | </view> | 166 | <image |
143 | <image | 167 | src="../../static/right.png" |
144 | src="../../static/right.png" | 168 | mode="aspectFit" |
145 | mode="aspectFit" | 169 | ></image> |
146 | ></image> | 170 | </view> |
147 | </view> | 171 | <view class="item"> |
148 | </view> | 172 | <view class="left"> |
149 | <view class="recommend"> | 173 | <image |
150 | <view class="title"> | 174 | src="../../static/img/user/service.png" |
151 | <view class="line"></view> | 175 | mode="aspectFit" |
152 | <view class="text">精选推荐</view> | 176 | ></image> |
153 | <view class="line"></view> | 177 | <text>联系客服</text> |
154 | </view> | 178 | </view> |
155 | <!-- 商品列表 --> | 179 | <image |
156 | <view class="goods-list"> | 180 | src="../../static/right.png" |
157 | <scroll-view | 181 | mode="aspectFit" |
158 | enable-flex | 182 | ></image> |
159 | @scrolltolower="handleScrolltolower" | 183 | </view> |
160 | scroll-y | 184 | </view> |
161 | class="product-list" | 185 | <view class="recommend"> |
162 | > | 186 | <view class="title"> |
163 | <view | 187 | <view class="line"></view> |
164 | class="product" | 188 | <view class="text">精选推荐</view> |
165 | v-for="(item, index) in userRecommandList" | 189 | <view class="line"></view> |
190 | </view> | ||
191 | <!-- 商品列表 --> | ||
192 | <view class="goods-list"> | ||
193 | <scroll-view | ||
194 | enable-flex | ||
195 | @scrolltolower="handleScrolltolower" | ||
196 | scroll-y | ||
197 | class="product-list" | ||
198 | > | ||
199 | <view | ||
200 | class="product" | ||
201 | v-for="(item, index) in userRecommandList" | ||
202 | :key="index" | ||
203 | > | ||
204 | <Card :goods="item"></Card> | ||
205 | </view> | ||
166 | :key="index" | 206 | </scroll-view> |
167 | > | 207 | <view class="loading-text">{{loadingText}}</view> |
168 | <Card :goods="item"></Card> | 208 | </view> |
169 | </view> | 209 | </view> |
170 | </scroll-view> | 210 | </view> |
171 | <view class="loading-text">{{loadingText}}</view> | 211 | <view |
172 | </view> | 212 | v-else |
173 | </view> | 213 | class="auth" |
174 | </view> | 214 | > |
175 | <view | 215 | <view class="icon"></view> |
176 | v-else | 216 | <view class="divider"></view> |
177 | class="auth" | 217 | <view class="title">申请获取以下权限</view> |
178 | > | 218 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
179 | <view class="icon"></view> | 219 | <button |
180 | <view class="divider"></view> | 220 | type="primary" |
181 | <view class="title">申请获取以下权限</view> | 221 | open-type="getUserInfo" |
182 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 222 | @getuserinfo="onGotUserInfo" |
183 | <button | 223 | >授权登陆</button> |
184 | type="primary" | 224 | </view> |
185 | open-type="getUserInfo" | 225 | </view> |
186 | @getuserinfo="onGotUserInfo" | 226 | </template> |
187 | >授权登陆</button> | 227 | |
188 | </view> | 228 | <script> |
189 | </view> | 229 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
190 | </template> | 230 | import store from '@/store' |
191 | 231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | |
192 | <script> | 232 | |
193 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 233 | export default { |
194 | import store from '@/store' | 234 | components: { |
195 | 235 | Card, | |
196 | export default { | 236 | UniPopup |
197 | components: { | 237 | }, |
198 | Card: Card | 238 | data() { |
199 | }, | 239 | return { |
200 | data() { | 240 | isAuth: true, // 是否显示授权页面, |
201 | return { | 241 | pagesnum: 1, // 分页请求初始值 |
202 | isAuth: true, // 是否显示授权页面, | 242 | whichTap: 0 // 弹窗渲染选择条件 |
203 | pagesnum: 1 // 分页请求初始值 | 243 | } |
204 | } | 244 | }, |
205 | }, | 245 | onLoad() { |
206 | onLoad() { | 246 | // 判断是否授权 |
207 | // 判断是否授权 | 247 | uni.getSetting({ |
208 | uni.getSetting({ | 248 | success(res) { |
209 | success(res) { | 249 | console.log('authSetting', res.authSetting) |
210 | console.log('authSetting', res.authSetting) | 250 | if (res.authSetting['scope.userInfo'] === true) { |
211 | if (res.authSetting['scope.userInfo'] === true) { | 251 | this.isAuth = true |
212 | this.isAuth = true | 252 | } else { |
213 | } else { | 253 | this.isAuth = false |
214 | this.isAuth = false | 254 | } |
215 | } | 255 | } |
216 | } | 256 | }) |
217 | }) | 257 | store.dispatch('userRecommand/getRecommandList', { |
218 | store.dispatch('userRecommand/getRecommandList', { | 258 | uid: this.$store.state.user.userInfo.uid, |
219 | uid: this.$store.state.user.userInfo.uid, | 259 | openid: this.$store.state.user.userInfo.openid, |
220 | openid: this.$store.state.user.userInfo.openid, | 260 | page: this.pagesnum |
221 | page: this.pagesnum | 261 | }) |
222 | }) | 262 | }, |
223 | }, | 263 | computed: { |
224 | computed: { | 264 | nickName() { |
225 | nickName() { | 265 | return this.$store.state.user.userInfo.nickName |
226 | return this.$store.state.user.userInfo.nickName | 266 | }, |
227 | }, | 267 | headerphoto() { |
228 | headerphoto() { | 268 | return this.$store.state.user.userInfo.headerphoto |
229 | return this.$store.state.user.userInfo.headerphoto | 269 | }, |
230 | }, | 270 | userRecommandList() { |
231 | userRecommandList() { | 271 | return this.$store.state.userRecommand.recommandList |
232 | return this.$store.state.userRecommand.recommandList | 272 | } |
233 | } | 273 | }, |
234 | }, | 274 | methods: { |
235 | methods: { | 275 | // 弹窗 |
236 | // 授权 | 276 | changeTap(item) { |
237 | onGotUserInfo(e) { | 277 | this.whichTap = item |
238 | if (e.detail.errMsg === 'getUserInfo:ok') { | 278 | this.$refs.popup.open() |
239 | const { fromInfo } = this.$store.state.user | 279 | }, |
240 | // 用户授权成功 | 280 | chatOur(item) { |
241 | store.dispatch('user/getUserInfo', fromInfo) | 281 | if (item === 1) { |
242 | this.isAuth = true | 282 | uni.makePhoneCall({ |
243 | } | 283 | phoneNumber: 13376189297 // 客服1 电话 |
244 | }, | 284 | }) |
245 | toAddress() { | 285 | } else { |
246 | uni.navigateTo({ | 286 | uni.makePhoneCall({ |
247 | url: '../address/addressList', | 287 | phoneNumber: 18014995101 // 客服2 电话 |
248 | success: res => {}, | 288 | }) |
249 | fail: () => {}, | 289 | } |
250 | complete: () => {} | 290 | }, |
251 | }) | 291 | // 授权 |
252 | }, | 292 | onGotUserInfo(e) { |
253 | introduce() { | 293 | if (e.detail.errMsg === 'getUserInfo:ok') { |
254 | uni.showModal({ | 294 | const { fromInfo } = this.$store.state.user |
255 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', | 295 | // 用户授权成功 |
256 | showCancel: false | 296 | store.dispatch('user/getUserInfo', fromInfo) |
257 | }) | 297 | this.isAuth = true |
258 | }, | 298 | } |
259 | joinUs() { | 299 | }, |
260 | uni.showModal({ | 300 | toAddress() { |
261 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 301 | uni.navigateTo({ |
262 | showCancel: false | 302 | url: '../address/addressList', |
263 | }) | 303 | success: res => {}, |
264 | }, | 304 | fail: () => {}, |
265 | toMyOrder(status) { | 305 | complete: () => {} |
266 | uni.navigateTo({ | 306 | }) |
267 | url: `../myOrder/myOrder?status=${status}`, | 307 | }, |
268 | success: res => {}, | 308 | introduce() { |
269 | fail: () => {}, | 309 | uni.showModal({ |
270 | complete: () => {} | 310 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', |
271 | }) | 311 | showCancel: false |
272 | }, | 312 | }) |
273 | toOpticsData() { | 313 | }, |
274 | uni.navigateTo({ | 314 | joinUs() { |
275 | url: '../addOpticsData/addOpticsData' | 315 | uni.showModal({ |
276 | }) | 316 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
277 | }, | 317 | showCancel: false |
278 | handleScrolltolower() { | 318 | }) |
279 | // console.log('usr-my',this.$store.state.user.userInfo) | 319 | }, |
280 | this.pagesnum++ | 320 | toMyOrder(status) { |
281 | store.dispatch('userRecommand/getRecommandList', { | 321 | uni.navigateTo({ |
282 | uid: this.$store.state.user.userInfo.uid, | 322 | url: `../myOrder/myOrder?status=${status}`, |
283 | openid: this.$store.state.user.userInfo.openid, | 323 | success: res => {}, |
284 | page: this.pagesnum | 324 | fail: () => {}, |
285 | }) | 325 | complete: () => {} |
286 | } | 326 | }) |
287 | } | 327 | }, |
288 | } | 328 | toOpticsData() { |
289 | </script> | 329 | uni.navigateTo({ |
290 | 330 | url: '../addOpticsData/addOpticsData' | |
291 | <style lang="scss"> | 331 | }) |
292 | .warp { | 332 | }, |
293 | font-size: 24rpx; | 333 | handleScrolltolower() { |
294 | background-color: #f2f2f2; | 334 | // console.log('usr-my',this.$store.state.user.userInfo) |
295 | height: 100vh; | 335 | this.pagesnum++ |
296 | } | 336 | store.dispatch('userRecommand/getRecommandList', { |
297 | .content { | 337 | uid: this.$store.state.user.userInfo.uid, |
298 | display: flex; | 338 | openid: this.$store.state.user.userInfo.openid, |
299 | flex-direction: column; | 339 | page: this.pagesnum |
300 | align-items: center; | 340 | }) |
301 | justify-content: center; | 341 | } |
302 | background-color: #f2f2f2; | 342 | } |
303 | } | 343 | } |
304 | .userInfo { | 344 | </script> |
305 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); | 345 | |
306 | width: 100%; | 346 | <style lang="scss"> |
307 | height: 240rpx; | 347 | .warp { |
308 | color: #ffffff; | 348 | font-size: 24rpx; |
309 | padding: 60rpx 82rpx 80rpx 44rpx; | 349 | background-color: #f2f2f2; |
310 | box-sizing: border-box; | 350 | height: 100vh; |
311 | display: flex; | 351 | } |
312 | flex-direction: row; | 352 | .content { |
313 | justify-content: space-between; | 353 | display: flex; |
314 | align-items: flex-start; | 354 | flex-direction: column; |
315 | .info { | 355 | align-items: center; |
316 | display: flex; | 356 | justify-content: center; |
317 | flex-direction: row; | 357 | background-color: #f2f2f2; |
318 | justify-content: space-between; | 358 | } |
319 | align-items: center; | 359 | .userInfo { |
320 | image { | 360 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); |
321 | border-radius: 50rpx; | 361 | width: 100%; |
322 | height: 100rpx; | 362 | height: 240rpx; |
323 | width: 100rpx; | 363 | color: #ffffff; |
324 | margin-right: 40rpx; | 364 | padding: 60rpx 82rpx 80rpx 44rpx; |
325 | } | 365 | box-sizing: border-box; |
326 | .infoText { | 366 | display: flex; |
327 | display: flex; | 367 | flex-direction: row; |
328 | flex-direction: column; | 368 | justify-content: space-between; |
329 | justify-content: space-between; | 369 | align-items: flex-start; |
330 | align-items: flex-scetart; | 370 | .info { |
331 | .userName { | 371 | display: flex; |
332 | font-size: 18px; | 372 | flex-direction: row; |
333 | color: #ffffff; | 373 | justify-content: space-between; |
334 | margin-bottom: 8rpx; | 374 | align-items: center; |
335 | } | 375 | image { |
336 | .nickName { | 376 | border-radius: 50rpx; |
337 | font-size: 12px; | 377 | height: 100rpx; |
338 | color: #ffffff; | 378 | width: 100rpx; |
339 | } | 379 | margin-right: 40rpx; |
340 | } | 380 | } |
341 | } | 381 | .infoText { |
342 | // .service { | 382 | display: flex; |
343 | // margin-top: 20rpx; | 383 | flex-direction: column; |
344 | // image { | 384 | justify-content: space-between; |
345 | // height: 36rpx; | 385 | align-items: flex-scetart; |
346 | // width: 36rpx; | 386 | .userName { |
347 | // } | 387 | font-size: 18px; |
348 | // } | 388 | color: #ffffff; |
349 | } | 389 | margin-bottom: 8rpx; |
350 | .myOpticsData { | 390 | } |
351 | width: 670rpx; | 391 | .nickName { |
352 | height: 120rpx; | 392 | font-size: 12px; |
353 | background-color: #ffffff; | 393 | color: #ffffff; |
354 | border-radius: 6px; | 394 | } |
355 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 395 | } |
356 | position: relative; | 396 | } |
357 | bottom: 44rpx; | 397 | // .service { |
358 | padding: 40rpx; | 398 | // margin-top: 20rpx; |
359 | box-sizing: border-box; | 399 | // image { |
360 | display: flex; | 400 | // height: 36rpx; |
361 | justify-content: space-between; | 401 | // width: 36rpx; |
362 | align-items: center; | 402 | // } |
363 | .left { | 403 | // } |
364 | font-size: 14px; | 404 | } |
365 | color: #333333; | 405 | .myOpticsData { |
366 | display: flex; | 406 | width: 670rpx; |
367 | align-items: center; | 407 | height: 120rpx; |
368 | image { | 408 | background-color: #ffffff; |
369 | margin-right: 32rpx; | 409 | border-radius: 6px; |
370 | width: 30rpx; | 410 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
371 | height: 34rpx; | 411 | position: relative; |
372 | } | 412 | bottom: 44rpx; |
373 | } | 413 | padding: 40rpx; |
374 | image { | 414 | box-sizing: border-box; |
375 | height: 16px; | 415 | display: flex; |
376 | width: 8px; | 416 | justify-content: space-between; |
377 | } | 417 | align-items: center; |
378 | } | 418 | .left { |
379 | .myOrder { | 419 | font-size: 14px; |
380 | width: 100%; | 420 | color: #333333; |
381 | height: 296rpx; | 421 | display: flex; |
382 | // margin-top: 116rpx; | 422 | align-items: center; |
383 | margin-bottom: 20rpx; | 423 | image { |
384 | padding: 0 40rpx; | 424 | margin-right: 32rpx; |
385 | box-sizing: border-box; | 425 | width: 30rpx; |
386 | background: #ffffff; | 426 | height: 34rpx; |
387 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 427 | } |
388 | border-radius: 6px; | 428 | } |
389 | border-radius: 6px; | 429 | image { |
390 | display: flex; | 430 | height: 16px; |
391 | flex-direction: column; | 431 | width: 8px; |
392 | justify-content: space-around; | 432 | } |
393 | align-items: center; | 433 | } |
394 | .orderHeader { | 434 | .myOrder { |
395 | width: 100%; | 435 | width: 100%; |
396 | height: 100rpx; | 436 | height: 296rpx; |
397 | display: flex; | 437 | // margin-top: 116rpx; |
398 | flex-direction: row; | 438 | margin-bottom: 20rpx; |
399 | justify-content: space-between; | 439 | padding: 0 40rpx; |
400 | align-items: center; | 440 | box-sizing: border-box; |
401 | border-bottom: 1px solid #e9e9e9; | 441 | background: #ffffff; |
402 | font-weight: bold; | 442 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
403 | font-size: 18px; | 443 | border-radius: 6px; |
404 | color: #333333; | 444 | border-radius: 6px; |
405 | .btn { | 445 | display: flex; |
406 | font-size: 12px; | 446 | flex-direction: column; |
407 | color: #999999; | 447 | justify-content: space-around; |
408 | display: flex; | 448 | align-items: center; |
409 | align-items: center; | 449 | .orderHeader { |
410 | image { | 450 | width: 100%; |
411 | margin-left: 20rpx; | 451 | height: 100rpx; |
412 | height: 32rpx; | 452 | display: flex; |
413 | width: 16rpx; | 453 | flex-direction: row; |
414 | } | 454 | justify-content: space-between; |
415 | } | 455 | align-items: center; |
416 | } | 456 | border-bottom: 1px solid #e9e9e9; |
417 | .orderBody { | 457 | font-weight: bold; |
418 | width: 100%; | 458 | font-size: 18px; |
419 | display: flex; | 459 | color: #333333; |
420 | flex-direction: row; | 460 | .btn { |
421 | justify-content: space-around; | 461 | font-size: 12px; |
422 | align-items: center; | 462 | color: #999999; |
423 | .item { | 463 | display: flex; |
424 | display: flex; | 464 | align-items: center; |
425 | flex-direction: column; | 465 | image { |
426 | align-items: center; | 466 | margin-left: 20rpx; |
427 | image { | 467 | height: 32rpx; |
428 | width: 62rpx; | 468 | width: 16rpx; |
429 | height: 46rpx; | 469 | } |
430 | } | 470 | } |
431 | text { | 471 | } |
432 | margin-top: 24rpx; | 472 | .orderBody { |
433 | font-size: 12px; | 473 | width: 100%; |
434 | color: #333333; | 474 | display: flex; |
435 | } | 475 | flex-direction: row; |
436 | } | 476 | justify-content: space-around; |
437 | } | 477 | align-items: center; |
438 | } | 478 | .item { |
439 | .someItem { | 479 | display: flex; |
440 | width: 100%; | 480 | flex-direction: column; |
441 | height: 336rpx; | 481 | align-items: center; |
442 | background: #ffffff; | 482 | image { |
443 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 483 | width: 62rpx; |
444 | border-radius: 6px; | 484 | height: 46rpx; |
445 | border-radius: 6px; | 485 | } |
446 | margin-bottom: 18rpx; | 486 | text { |
447 | box-sizing: border-box; | 487 | margin-top: 24rpx; |
448 | padding: 21rpx 48rpx 21rpx 42rpx; | 488 | font-size: 12px; |
449 | box-sizing: border-box; | 489 | color: #333333; |
450 | display: flex; | 490 | } |
451 | flex-direction: column; | 491 | } |
452 | justify-content: space-between; | 492 | } |
453 | align-items: center; | 493 | } |
454 | .item { | 494 | .someItem { |
455 | display: flex; | 495 | width: 100%; |
456 | justify-content: space-between; | 496 | height: 336rpx; |
457 | border-bottom: 1px solid #f2f2f2; | 497 | background: #ffffff; |
458 | align-items: center; | 498 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
459 | height: 72rpx; | 499 | border-radius: 6px; |
460 | width: 100%; | 500 | border-radius: 6px; |
461 | .left { | 501 | margin-bottom: 18rpx; |
462 | font-size: 14px; | 502 | box-sizing: border-box; |
463 | color: #333333; | 503 | padding: 21rpx 48rpx 21rpx 42rpx; |
464 | display: flex; | 504 | box-sizing: border-box; |
465 | align-items: center; | 505 | display: flex; |
466 | image { | 506 | flex-direction: column; |
467 | margin-right: 32rpx; | 507 | justify-content: space-between; |
468 | width: 30rpx; | 508 | align-items: center; |
469 | height: 34rpx; | 509 | .item { |
470 | } | 510 | display: flex; |
471 | } | 511 | justify-content: space-between; |
472 | image { | 512 | border-bottom: 1px solid #f2f2f2; |
473 | height: 16px; | 513 | align-items: center; |
474 | width: 8px; | 514 | height: 72rpx; |
475 | } | 515 | width: 100%; |
476 | } | 516 | .left { |
477 | } | 517 | font-size: 14px; |
478 | .recommend { | 518 | color: #333333; |
479 | background: #ffffff; | 519 | display: flex; |
520 | align-items: center; | ||
521 | image { | ||
522 | margin-right: 32rpx; | ||
523 | width: 30rpx; | ||
524 | height: 34rpx; | ||
525 | } | ||
526 | } | ||
527 | image { | ||
528 | height: 16px; | ||
529 | width: 8px; | ||
530 | } | ||
531 | } | ||
532 | } | ||
533 | .recommend { | ||
534 | background: #ffffff; | ||
535 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | ||
536 | border-radius: 6px; | ||
537 | border-radius: 6px; | ||
538 | width: 100%; | ||
539 | .title { | ||
540 | display: flex; | ||
541 | flex-direction: row; | ||
542 | align-items: center; | ||
543 | justify-content: space-between; | ||
544 | padding: 20rpx 40rpx; | ||
545 | .line { | ||
546 | width: 264rpx; | ||
547 | height: 1rpx; | ||
548 | border-bottom: 1px solid #eaeaea; | ||
549 | } | ||
550 | .text { | ||
551 | font-family: PingFangSC-Medium; | ||
552 | font-size: 14px; | ||
553 | color: #333333; | ||
554 | letter-spacing: -0.26px; | ||
480 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 555 | text-align: justify; |
481 | border-radius: 6px; | 556 | line-height: 24px; |
482 | border-radius: 6px; | 557 | } |
483 | width: 100%; | 558 | } |
484 | .title { | 559 | .goods-list { |
485 | display: flex; | 560 | .loading-text { |
486 | flex-direction: row; | 561 | width: 100%; |
487 | align-items: center; | 562 | display: flex; |
488 | justify-content: space-between; | 563 | justify-content: center; |
489 | padding: 20rpx 40rpx; | 564 | align-items: center; |
490 | .line { | 565 | height: 30px; |
491 | width: 264rpx; | 566 | color: #979797; |
492 | height: 1rpx; | 567 | font-size: 12px; |
493 | border-bottom: 1px solid #eaeaea; | 568 | } |
494 | } | 569 | .product-list { |
495 | .text { | 570 | width: 92%; |
496 | font-family: PingFangSC-Medium; | 571 | padding: 0 4% 3vw 4%; |
497 | font-size: 14px; | 572 | display: flex; |
498 | color: #333333; | 573 | justify-content: space-between; |
499 | letter-spacing: -0.26px; | 574 | flex-wrap: wrap; |
500 | text-align: justify; | 575 | .product { |
501 | line-height: 24px; | 576 | width: 48%; |
502 | } | 577 | margin: 0 0 20rpx 0; |
503 | } | 578 | background: #ffffff; |
504 | .goods-list { | 579 | border: 1px solid #f2f2f2; |
505 | .loading-text { | 580 | } |
506 | width: 100%; | 581 | } |
507 | display: flex; | 582 | } |
508 | justify-content: center; | 583 | } |
509 | align-items: center; | 584 | .auth { |
510 | height: 30px; | 585 | height: 100vh; |
511 | color: #979797; | 586 | display: flex; |
512 | font-size: 12px; | 587 | flex-direction: column; |
513 | } | 588 | align-items: center; |
514 | .product-list { | 589 | .icon { |
515 | width: 92%; | 590 | width: 140rpx; |
516 | padding: 0 4% 3vw 4%; | 591 | height: 140rpx; |
517 | display: flex; | 592 | border-radius: 50%; |
518 | justify-content: space-between; | 593 | margin-top: 100rpx; |
519 | flex-wrap: wrap; | 594 | background-color: grey; |
520 | .product { | 595 | } |
521 | width: 48%; | 596 | .divider { |
522 | margin: 0 0 20rpx 0; | 597 | height: 1rpx; |
523 | background: #ffffff; | 598 | width: 600rpx; |
524 | border: 1px solid #f2f2f2; | 599 | margin-top: 80rpx; |
525 | } | 600 | background-color: #e6e3e3; |
526 | } | 601 | } |
527 | } | 602 | .title { |
528 | } | 603 | width: 600rpx; |
529 | .auth { | 604 | margin-top: 50rpx; |
530 | height: 100vh; | 605 | text-align: left; |
531 | display: flex; | 606 | } |
532 | flex-direction: column; | 607 | .text { |
533 | align-items: center; | 608 | width: 600rpx; |
534 | .icon { | 609 | margin-top: 30rpx; |
535 | width: 140rpx; | 610 | text-align: left; |
536 | height: 140rpx; | 611 | color: #e6e3e3; |
537 | border-radius: 50%; | 612 | } |
538 | margin-top: 100rpx; | 613 | button { |
539 | background-color: grey; | 614 | width: 450rpx; |
540 | } | 615 | height: 80rpx; |
541 | .divider { | 616 | line-height: 80rpx; |
542 | height: 1rpx; | 617 | margin-top: 80rpx; |
543 | width: 600rpx; | 618 | border-radius: 30rpx; |
544 | margin-top: 80rpx; | 619 | } |
545 | background-color: #e6e3e3; | 620 | } |
546 | } | 621 | .closeBtn { |
547 | .title { | 622 | height: 28rpx; |
548 | width: 600rpx; | 623 | width: 28rpx; |
549 | margin-top: 50rpx; | 624 | // border: 1px solid red; |
550 | text-align: left; | 625 | position: absolute; |
551 | } | 626 | top: 20rpx; |
552 | .text { | 627 | right: 10rpx; |
553 | width: 600rpx; | 628 | } |
554 | margin-top: 30rpx; | 629 | </style> |
555 | text-align: left; | 630 |
src/static/img/detail/right.png
475 Bytes
src/static/img/detail/xiala.png
src/store/modules/myLoveList.js
1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
2 | import request from '../request'; | 2 | import request from '../request'; |
3 | 3 | ||
4 | const { | 4 | const { |
5 | mylovelist | 5 | mylovelist, |
6 | myloveadd, | ||
7 | myloveupdate | ||
6 | } = urlAlias; | 8 | } = urlAlias; |
7 | 9 | ||
8 | const state = { | 10 | const state = { |
9 | loveList: [], | 11 | loveList: [], |
10 | }; | 12 | }; |
11 | 13 | ||
12 | const mutations = { | 14 | const mutations = { |
13 | INIT: (state, data) => { | 15 | INIT: (state, data) => { |
14 | state.loveList = data; | 16 | state.loveList = data; |
15 | }, | 17 | }, |
18 | // 更新关心人验光单 | ||
19 | UPDATE:(state, data) => { | ||
20 | // state.loveList.push(data) | ||
21 | // console.log('UPDATA=====>',data) | ||
22 | } | ||
16 | }; | 23 | }; |
17 | 24 | ||
18 | const actions = { | 25 | const actions = { |
19 | getLoveList({ commit }, param) { | 26 | getLoveList({ commit }, param) { |
20 | request({ | 27 | request({ |
21 | url: mylovelist, | 28 | url: mylovelist, |
22 | data: param, | 29 | data: param, |
23 | success: (res) => { | 30 | success: (res) => { |
24 | // console.log(res.data); | 31 | // console.log(res.data); |
25 | commit("INIT", res.data.data); | 32 | commit("INIT", res.data.data); |
26 | }, | 33 | }, |
27 | }) | 34 | }) |
28 | } | 35 | }, |
36 | addMylove({ commit }, param) { | ||
37 | |||
38 | console.log('myloveupdate-parm====>',param) | ||
39 | request({ | ||
40 | url: myloveadd, | ||
41 | data: param, | ||
42 | success: (res) => { | ||
43 | console.log('addMylove-parm====>',param) | ||
44 | console.log(res.data); | ||
45 | // commit("ADD", args); | ||
46 | }, | ||
47 | }) | ||
48 | }, | ||
49 | updateMylove({ commit }, param) { | ||
50 | request({ | ||
51 | url: myloveupdate, | ||
52 | data: param, | ||
53 | success: (res) => { | ||
54 | console.log('myloveupdate-parm====>',param) | ||
55 | console.log(res); | ||
56 | // commit("UPDATE", param); | ||
57 | }, | ||
58 | }) | ||
59 | }, | ||
60 | |||
29 | } | 61 | } |
30 | 62 | ||
31 | export default { | 63 | export default { |
32 | namespaced: true, | 64 | namespaced: true, |
33 | state, | 65 | state, |
34 | mutations, | 66 | mutations, |
35 | actions, | 67 | actions, |
36 | } | 68 | } |
src/store/url.js
1 | const urlAlias = { | 1 | const urlAlias = { |
2 | // 详情 | 2 | // 详情 |
3 | read: '/app/prod/read', // 获取商品信息 | 3 | read: '/app/prod/read', // 获取商品信息 |
4 | 4 | ||
5 | // 首页 | 5 | // 首页 |
6 | shopList: '/app/prod/list', // 获取首页商品列表 | 6 | shopList: '/app/prod/list', // 获取首页商品列表 |
7 | category: '/app/prod/category2', // 获取首页商品分类 | 7 | category: '/app/prod/category2', // 获取首页商品分类 |
8 | search: '/app/prod/search', // 首页搜索商品 | 8 | search: '/app/prod/search', // 首页搜索商品 |
9 | 9 | ||
10 | // 登陆 | 10 | // 登陆 |
11 | login: '/app/glass/getOpenId', // 登陆 | 11 | login: '/app/glass/getOpenId', // 登陆 |
12 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 | 12 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 |
13 | 13 | ||
14 | // 我的订单 | 14 | // 我的订单 |
15 | orderList: '/app/order/list', // 获取订单列表 | 15 | orderList: '/app/order/list', // 获取订单列表 |
16 | myOrderList: '/app/order/list3', // 获取订单列表 | 16 | myOrderList: '/app/order/list3', // 获取订单列表 |
17 | orderRead: '/app/order/read', // 获取订单详情 | 17 | orderRead: '/app/order/read', // 获取订单详情 |
18 | cancelOrder: '/app/order/wait/del', // 取消订单 | 18 | cancelOrder: '/app/order/wait/del', // 取消订单 |
19 | statusConfirm: '/app/order/statusConfirm', // 订单操作 | 19 | statusConfirm: '/app/order/statusConfirm', // 订单操作 |
20 | payLog: '/app/pay/log', // 调起支付 | 20 | payLog: '/app/pay/log', // 调起支付 |
21 | orderBuild: '/app/order/build', // 生成订单 | 21 | orderBuild: '/app/order/build', // 生成订单 |
22 | 22 | ||
23 | // 购物车 | 23 | // 购物车 |
24 | cartList: '/app/cart/list', // 获取购物车列表 | 24 | cartList: '/app/cart/list', // 获取购物车列表 |
25 | cartModi: '/app/cart/modi', // 修改购物车 | 25 | cartModi: '/app/cart/modi', // 修改购物车 |
26 | cartDel: '/app/cart/del', // 删除购物车 | 26 | cartDel: '/app/cart/del', // 删除购物车 |
27 | cartAdd: '/app/cart/add', // 添加购物车 | 27 | cartAdd: '/app/cart/add', // 添加购物车 |
28 | 28 | ||
29 | // 我的 | 29 | // 我的 |
30 | recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 | 30 | recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 |
31 | 31 | ||
32 | // 镜框选购页 | 32 | // 镜框选购页 |
33 | detailStandardList: '/app/prod/read', // 获取商品的详细信息 | 33 | detailStandardList: '/app/prod/read', // 获取商品的详细信息 |
34 | // 选购页 | 34 | // 选购页 |
35 | detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 | 35 | detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 |
36 | 36 | ||
37 | // 地址管理 | 37 | // 地址管理 |
38 | editAddress: '/app/address/edit_address', // 编辑地址 | 38 | editAddress: '/app/address/edit_address', // 编辑地址 |
39 | addressList: '/app/address/get_address_list', // 获取用户地址列表 | 39 | addressList: '/app/address/get_address_list', // 获取用户地址列表 |
40 | getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 | 40 | getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 |
41 | getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 | 41 | getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 |
42 | 42 | ||
43 | // 用户数据 | 43 | // 用户数据 |
44 | mylovelist: '/app/user/mylovelist', // 关心的人的数据 | ||
44 | mylovelist: '/app/user/mylovelist', // 关心的人的数据 | 45 | myloveadd: '/app/user/myloveadd', // 添加关心的人 |
45 | myloveadd: '/app/user/myloveadd' // 添加关心的人 | 46 | myloveupdate: '/app/user/myloveupdate' // 更新关心人的数据 |
46 | } | 47 | } |
47 | 48 | ||
48 | export default urlAlias | 49 | export default urlAlias |
49 | 50 |