Adam / gulu-vue

Download as
Browse Code »

Commit 09a4a9a0aa68e86f0c0a8b5b85adc0cca5b04c66

Authored by BigBoss
2 parents c338b4909b eab89b2542
Exists in master

修改冲突

Showing 5 changed files   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/myOrder/myOrder", 10 "path" : "pages/myOrder/myOrder",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText": "我的订单"} 12 "navigationBarTitleText": "我的订单"}
13 }, 13 },
14 { 14 {
15 "path": "pages/frameDetail/frameDetail", 15 "path": "pages/frameDetail/frameDetail",
16 "style": { 16 "style": {
17 "navigationBarTitleText": "产品详情" 17 "navigationBarTitleText": "产品详情"
18 } 18 }
19 }, 19 },
20 { 20 {
21 "path": "pages/lensDetails/lensDetails", 21 "path": "pages/lensDetails/lensDetails",
22 "style": { 22 "style": {
23 "navigationBarTitleText": "产品详情" 23 "navigationBarTitleText": "产品详情"
24 } 24 }
25 }, 25 },
26 { 26 {
27 "path": "pages/cart/cart", 27 "path": "pages/cart/cart",
28 "style": { 28 "style": {
29 "navigationBarTitleText": "购物车" 29 "navigationBarTitleText": "购物车"
30 } 30 }
31 }, 31 },
32 { 32 {
33 "path" : "pages/purchaseLenses/purchaseLenses", 33 "path" : "pages/purchaseLenses/purchaseLenses",
34 "style" : { 34 "style" : {
35 "navigationBarTitleText": "产品选购" 35 "navigationBarTitleText": "产品选购"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path" : "pages/refundProgress/refundProgress", 39 "path" : "pages/refundProgress/refundProgress",
40 "style": { 40 "style": {
41 "navigationBarTitleText": "申请退款" 41 "navigationBarTitleText": "申请退款"
42 } 42 }
43 }, 43 },
44 { 44 {
45 "path": "pages/addAddress/addAddress", 45 "path": "pages/addAddress/addAddress",
46 "style": { 46 "style": {
47 "navigationBarTitleText": "新增地址" 47 "navigationBarTitleText": "新增地址"
48 } 48 }
49 }, 49 },
50 { 50 {
51 "path" : "pages/confirmOrder/confirmOrder", 51 "path" : "pages/confirmOrder/confirmOrder",
52 "style" : { 52 "style" : {
53 "navigationBarTitleText": "确认订单" 53 "navigationBarTitleText": "确认订单"
54 } 54 }
55 }, 55 },
56 { 56 {
57 "path": "pages/user/user", 57 "path": "pages/user/user",
58 "style": { 58 "style": {
59 "navigationBarTitleText": "我的" 59 "navigationBarTitleText": "我的"
60 } 60 }
61 }, 61 },
62 { 62 {
63 "path": "pages/refundment/refundWays" 63 "path": "pages/refundment/refundWays"
64 }, 64 },
65 { 65 {
66 "path": "pages/refundment/refundment" 66 "path": "pages/refundment/refundment"
67 }, 67 },
68 { 68 {
69 "path": "pages/predelivery/predelivery" 69 "path": "pages/predelivery/predelivery"
70 }, 70 },
71 { 71 {
72 "path": "pages/customerService/customerService", 72 "path": "pages/customerService/customerService",
73 "style":{ 73 "style":{
74 "navigationBarTitleText" : "在线客服" 74 "navigationBarTitleText" : "在线客服"
75 } 75 }
76 }, 76 },
77 { 77 {
78 "path": "pages/myOrderPaying/myOrderPaying", 78 "path": "pages/myOrderPaying/myOrderPaying",
79 "style":{ 79 "style":{
80 "navigationBarTitleText" : "我的订单" 80 "navigationBarTitleText" : "我的订单"
81 } 81 }
82 }, 82 },
83 { 83 {
84 "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 84 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
85 "style":{ 85 "style":{
86 "navigationBarTitleText" : "镜片名称名称" 86 "navigationBarTitleText" : "镜片名称名称"
87 } 87 }
88 }, 88 },
89 { 89 {
90 "path" : "pages/detailStandard/detailStandard_sun", 90 "path" : "pages/detailStandard/detailStandard_sun",
91 "style": { 91 "style": {
92 "navigationBarTitleText": "太阳镜选购页" 92 "navigationBarTitleText": "太阳镜选购页"
93 } 93 }
94 }, 94 },
95 { 95 {
96 "path" : "pages/detailStandard/detailStandard_k", 96 "path" : "pages/detailStandard/detailStandard_k",
97 "style": { 97 "style": {
98 "navigationBarTitleText": "镜框选购页" 98 "navigationBarTitleText": "镜框选购页"
99 } 99 }
100 } 100 }
101 101
102 ], 102 ],
103 "globalStyle": { 103 "globalStyle": {
104 "navigationBarTextStyle": "black", 104 "navigationBarTextStyle": "black",
105 "navigationBarTitleText": "uni-app", 105 "navigationBarTitleText": "uni-app",
106 "navigationBarBackgroundColor": "#F8F8F8", 106 "navigationBarBackgroundColor": "#F8F8F8",
107 "backgroundColor": "#F8F8F8" 107 "backgroundColor": "#F8F8F8"
108 }, 108 },
109 "tabBar": { 109 "tabBar": {
110 "color": "#C0C4CC", 110 "color": "#C0C4CC",
111 "selectedColor": "#fa436a", 111 "selectedColor": "#fa436a",
112 "borderStyle": "black", 112 "borderStyle": "black",
113 "backgroundColor": "#ffffff", 113 "backgroundColor": "#ffffff",
114 "list": [{ 114 "list": [{
115 "pagePath": "pages/index/index", 115 "pagePath": "pages/index/index",
116 "iconPath": "static/tab-home.png", 116 "iconPath": "static/tab-home.png",
117 "selectedIconPath": "static/tab-home-current.png", 117 "selectedIconPath": "static/tab-home-current.png",
118 "text": "首页" 118 "text": "首页"
119 }, 119 },
120 { 120 {
121 "pagePath": "pages/cart/cart", 121 "pagePath": "pages/cart/cart",
122 "iconPath": "static/tab-cart.png", 122 "iconPath": "static/tab-cart.png",
123 "selectedIconPath": "static/tab-cart-current.png", 123 "selectedIconPath": "static/tab-cart-current.png",
124 "text": "购物车" 124 "text": "购物车"
125 }, 125 },
126 { 126 {
127 "pagePath": "pages/user/user", 127 "pagePath": "pages/user/user",
128 "iconPath": "static/tab-my.png", 128 "iconPath": "static/tab-my.png",
129 "selectedIconPath": "static/tab-my-current.png", 129 "selectedIconPath": "static/tab-my-current.png",
130 "text": "我的" 130 "text": "我的"
131 } 131 }
132 ] 132 ]
133 }, 133 },
134 "condition" : { //模式配置，仅开发期间生效 134 "condition" : { //模式配置，仅开发期间生效
135 "current": 0, //当前激活的模式(list 的索引项) 135 "current": 0, //当前激活的模式(list 的索引项)
136 "list": [ 136 "list": [
137 { 137 {
138 "name": "", //模式名称 138 "name": "", //模式名称
139 "path": "", //启动页面，必选 139 "path": "", //启动页面，必选
140 "query": "" //启动参数，在页面的onLoad函数里面得到 140 "query": "" //启动参数，在页面的onLoad函数里面得到
141 } 141 }
142 ] 142 ]
143 } 143 }
144 }
145
src/pages/cart/cart.vue
Diff comments   View file @09a4a9a
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3
4 <view class="card"> 4 <view class="card">
5 <view class="cardHeader"> 5 <view class="cardHeader">
6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> --> 6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7 <block v-if="pIsoPen"> 7 <block v-if="pIsoPen">
8 <view class="partentChecked" @click="pChange(pIsoPen)"> 8 <view class="partentChecked" @click="pChange(pIsoPen)">
9 <span class="status correct"></span> 9 <span class="status correct"></span>
10 </view> 10 </view>
11 </block> 11 </block>
12 <block v-else> 12 <block v-else>
13 <view class="partentCheck" @click="pChange(pIsoPen)"></view> 13 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
14 </block> 14 </block>
15 <image src="../../static/store.png" mode="aspectFill"></image> 15 <image src="../../static/store.png" mode="aspectFill"></image>
16 <text>非常戴镜</text> 16 <text>非常戴镜</text>
17 </view> 17 </view>
18 18
19 <view class="cardBody"> 19 <view class="cardBody">
20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> 20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21 <template v-if="childIsOpen.child1"> 21 <template v-if="childIsOpen.child1">
22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23 <span class="status correct"></span> 23 <span class="status correct"></span>
24 </view> 24 </view>
25 </template> 25 </template>
26 <template v-else> 26 <template v-else>
27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28 </template> 28 </template>
29 <view class="goodInfo"> 29 <view class="goodInfo">
30 <view class="imageWrap"> 30 <view class="imageWrap">
31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
32 </view> 32 </view>
33 <view class="infoRight"> 33 <view class="infoRight">
34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
36 <!-- <text class="icon">></text> --> 36 <!-- <text class="icon">></text> -->
37 </view> 37 </view>
38 <view class="priceBox"> 38 <view class="priceBox">
39 <view class="price">￥{{198*this.count}}</view> 39 <view class="price">￥{{198}}</view>
40 <text>(限购{{maxCount}}副)</text> 40 <text>(限购{{maxCount}}副)</text>
41 <view class="counter"> 41 <view class="counter">
42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
43 <text>{{count}}</text> 43 <text>{{count}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
45 </view> 45 </view>
46 </view> 46 </view>
47 </view> 47 </view>
48 </view> 48 </view>
49 </view> 49 </view>
50 <view class="cardBody"> 50 <view class="cardBody">
51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> 51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
52 <template v-if="childIsOpen.child2"> 52 <template v-if="childIsOpen.child2">
53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> 53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
54 <span class="status correct"></span> 54 <span class="status correct"></span>
55 </view> 55 </view>
56 </template> 56 </template>
57 <template v-else> 57 <template v-else>
58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> 58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
59 </template> 59 </template>
60 <view class="goodInfo"> 60 <view class="goodInfo">
61 <view class="imageWrap"> 61 <view class="imageWrap">
62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
63 </view> 63 </view>
64 <view class="infoRight"> 64 <view class="infoRight">
65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
67 <!-- <text class="icon">></text> --> 67 <!-- <text class="icon">></text> -->
68 </view> 68 </view>
69 <view class="priceBox"> 69 <view class="priceBox">
70 <view class="price">￥{{198*this.count}}</view> 70 <view class="price">￥198</view>
71 <text>(限购{{maxCount}}副)</text> 71 <text>(限购{{maxCount}}副)</text>
72 <view class="counter"> 72 <view class="counter">
73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
74 <text>{{count}}</text> 74 <text>{{count}}</text>
75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
76 </view> 76 </view>
77 </view> 77 </view>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 </view> 81 </view>
82 82
83 <view class="footer"> 83 <view class="footer">
84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
85 <view class="footerRight"> 85 <view class="footerRight">
86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
87 <view class="paybtn">立即支付</view> 87 <view class="paybtn">立即支付</view>
88 </navigator> 88 </navigator>
89 </view> 89 </view>
90 </view> 90 </view>
91 91
92 </view> 92 </view>
93 </template> 93 </template>
94 94
95 <script> 95 <script>
96 export default { 96 export default {
97 97
98 data() { 98 data() {
99 return { 99 return {
100 totalPrice: 360, 100 totalPrice: 360,
101 count:1, 101 count:1,
102 maxCount:20, 102 maxCount:20,
103 pIsoPen: false, 103 pIsoPen: false,
104 childIsOpen:{ 104 childIsOpen:{
105 "child1":true, 105 "child1":true,
106 "child2":true 106 "child2":true
107 }, 107 },
108 } 108 }
109 }, 109 },
110 onLoad() { 110 onLoad() {
111 111
112 } 112 }
113 , 113 ,
114 methods: { 114 methods: {
115 counter(isadd){ 115 counter(isadd){
116 if(isadd){ 116 if(isadd){
117 this.count >= this.maxCount? this.addDisabled = true:this.count++; 117 this.count >= this.maxCount? this.addDisabled = true:this.count++;
118 }else{ 118 }else{
119 this.count <= 1? this.desDisabled = true:this.count--; 119 this.count <= 1? this.desDisabled = true:this.count--;
120 } 120 }
121 }, 121 },
122 pChange(isopen){ 122 pChange(isopen){
123 // console.log(isopen) 123 // console.log(isopen)
124 this.pIsoPen=!isopen 124 this.pIsoPen=!isopen
125 this.childIsOpen.child1=!isopen 125 this.childIsOpen.child1=!isopen
126 this.childIsOpen.child2=!isopen 126 this.childIsOpen.child2=!isopen
127 }, 127 },
128 cChange(isopen,child){ 128 cChange(isopen,child){
129 // console.log(child) 129 // console.log(child)
130 if(child==='child1'){ 130 if(child==='child1'){
131 this.childIsOpen.child1=!isopen 131 this.childIsOpen.child1=!isopen
132 } 132 }
133 if(child==='child2'){ 133 if(child==='child2'){
134 this.childIsOpen.child2=!isopen 134 this.childIsOpen.child2=!isopen
135 } 135 }
136 } 136 }
137 } 137 }
138 } 138 }
139 </script> 139 </script>
140 140
141 <style lang="scss"> 141 <style lang="scss">
142 .content { 142 .content {
143 min-height: 100vh; 143 min-height: 100vh;
144 background-color: #f2f2f2; 144 background-color: #f2f2f2;
145 display: flex; 145 display: flex;
146 flex-direction: column; 146 flex-direction: column;
147 align-items: center; 147 align-items: center;
148 justify-content: space-between; 148 justify-content: space-between;
149 padding: 20rpx 40rpx; 149 padding: 20rpx 40rpx;
150 box-sizing: border-box; 150 box-sizing: border-box;
151 151
152 .partentCheck{ 152 .partentCheck{
153 width: 16px; 153 width: 16px;
154 height: 16px; 154 height: 16px;
155 border-radius: 18px; 155 border-radius: 18px;
156 border: 1px solid #CFCFCF; 156 border: 1px solid #CFCFCF;
157 background-color: #FFFFFF; 157 background-color: #FFFFFF;
158 } 158 }
159 .partentChecked{ 159 .partentChecked{
160 width: 18px; 160 width: 18px;
161 height: 18px; 161 height: 18px;
162 border-radius: 18px; 162 border-radius: 18px;
163 background-color: #FF6B4A; 163 background-color: #FF6B4A;
164 .correct { 164 .correct {
165 display: inline-block; 165 display: inline-block;
166 width: 5px; 166 width: 5px;
167 height: 1px; 167 height: 1px;
168 background: #FFFFFF; 168 background: #FFFFFF;
169 line-height: 0; 169 line-height: 0;
170 font-size: 0; 170 font-size: 0;
171 position: relative; 171 position: relative;
172 top: -10px; 172 top: -6px;
173 left: 4px; 173 left: 4px;
174 -webkit-transform: rotate(45deg); 174 -webkit-transform: rotate(45deg);
175 } 175 }
176 .correct:after { 176 .correct:after {
177 content: '/'; 177 content: '/';
178 display: block; 178 display: block;
179 width: 8px; 179 width: 8px;
180 height: 1px; 180 height: 1px;
181 background: #FFFFFF; 181 background: #FFFFFF;
182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
183 } 183 }
184 } 184 }
185 185
186 .card{ 186 .card{
187 background-color: #FFFFFF; 187 background-color: #FFFFFF;
188 border-radius: 16rpx; 188 border-radius: 16rpx;
189 box-sizing: border-box; 189 box-sizing: border-box;
190 padding: 36rpx 36rpx 36rpx 18rpx; 190 padding: 36rpx 36rpx 36rpx 18rpx;
191 display: flex; 191 display: flex;
192 flex-direction: column; 192 flex-direction: column;
193 align-items: center; 193 align-items: center;
194 justify-content: space-between; 194 justify-content: space-between;
195 .cardHeader{ 195 .cardHeader{
196 width: 100%; 196 width: 100%;
197 height: 36rpx; 197 height: 36rpx;
198 display: flex; 198 display: flex;
199 align-items: center; 199 align-items: center;
200 justify-content: flex-start; 200 justify-content: flex-start;
201 image{ 201 image{
202 height: 32rpx; 202 height: 32rpx;
203 width: 32rpx; 203 width: 32rpx;
204 padding-left: 6px; 204 padding-left: 6px;
205 padding-right: 10px; 205 padding-right: 10px;
206 } 206 }
207 text{ 207 text{
208 // font-family: PingFangSC-Regular; 208 // font-family: PingFangSC-Regular;
209 font-size: 14px; 209 font-size: 14px;
210 color: #333333; 210 color: #333333;
211 letter-spacing: -0.26px; 211 letter-spacing: -0.26px;
212 } 212 }
213 } 213 }
214 .cardBody{ 214 .cardBody{
215 width: 100%; 215 width: 100%;
216 height: 300rpx; 216 height: 300rpx;
217 display: flex; 217 display: flex;
218 align-items: center; 218 align-items: center;
219 justify-content: space-between; 219 justify-content: space-between;
220 .goodInfo{ 220 .goodInfo{
221 width: 95%; 221 width: 95%;
222 display: flex; 222 display: flex;
223 flex-direction: row; 223 flex-direction: row;
224 justify-content: flex-start; 224 justify-content: flex-start;
225 padding-left: 6px; 225 padding-left: 6px;
226 .imageWrap{ 226 .imageWrap{
227 height: 188rpx; 227 height: 188rpx;
228 width: 188rpx; 228 width: 188rpx;
229 margin-right: 28rpx; 229 margin-right: 28rpx;
230 image{ 230 image{
231 border-radius: 4px; 231 border-radius: 4px;
232 height: 188rpx; 232 height: 188rpx;
233 width: 188rpx; 233 width: 188rpx;
234 } 234 }
235 } 235 }
236 .infoRight{ 236 .infoRight{
237 display: flex; 237 display: flex;
238 flex-direction: column; 238 flex-direction: column;
239 align-items: flex-start; 239 align-items: flex-start;
240 justify-content: space-between; 240 justify-content: space-between;
241 height: 240rpx; 241 height: 240rpx;
242 .goodName{ 242 .goodName{
243 font-size: 28rpx; 243 font-size: 28rpx;
244 color: #333333; 244 color: #333333;
245 } 245 }
246 .describ{ 246 .describ{
247 width: 100%; 247 width: 100%;
248 height: 80rpx; 248 height: 80rpx;
249 box-sizing: border-box; 249 box-sizing: border-box;
250 padding: 10rpx; 250 padding: 10rpx;
251 font-size: 20rpx; 251 font-size: 20rpx;
252 color: #999999; 252 color: #999999;
253 background: #F2F2F2; 253 background: #F2F2F2;
254 text{ 254 text{
255 text-overflow: -o-ellipsis-lastline; 255 text-overflow: -o-ellipsis-lastline;
256 overflow: hidden; 256 overflow: hidden;
257 text-overflow: ellipsis; 257 text-overflow: ellipsis;
258 display: -webkit-box; 258 display: -webkit-box;
259 -webkit-line-clamp: 2; 259 -webkit-line-clamp: 2;
260 line-clamp: 2; 260 line-clamp: 2;
261 -webkit-box-orient: vertical; 261 -webkit-box-orient: vertical;
262 } 262 }
263 // .icon{ 263 // .icon{
264 // transform: rotate(90deg); 264 // transform: rotate(90deg);
265 // } 265 // }
266 } 266 }
267 .priceBox{ 267 .priceBox{
268 display: flex; 268 display: flex;
269 justify-content: space-between; 269 justify-content: space-between;
270 align-items: center; 270 align-items: center;
271 // margin-top: 26px; 271 // margin-top: 26px;
272 width: 100%; 272 width: 100%;
273 font-size: 14px; 273 font-size: 14px;
274 color: #999999; 274 color: #999999;
275 .price{ 275 .price{
276 color: #FF6B4A; 276 color: #FF6B4A;
277 font-size: 28rpx; 277 font-size: 28rpx;
278 } 278 }
279 .counter{ 279 .counter{
280 display: flex; 280 display: flex;
281 flex-direction: row; 281 flex-direction: row;
282 justify-content: space-between; 282 justify-content: space-between;
283 align-items: center; 283 align-items: center;
284 font-size: 28rpx; 284 font-size: 28rpx;
285 color: #333333; 285 color: #333333;
286 width: 122rpx; 286 width: 122rpx;
287 .btn{ 287 .btn{
288 display: flex; 288 display: flex;
289 justify-content: center; 289 justify-content: center;
290 line-height: 32rpx; 290 line-height: 32rpx;
291 height: 32rpx; 291 height: 32rpx;
292 width: 32rpx; 292 width: 32rpx;
293 background-color: #F2F2F2; 293 background-color: #F2F2F2;
294 color: #CFCFCF; 294 color: #CFCFCF;
295 } 295 }
296 } 296 }
297 } 297 }
298 } 298 }
299 } 299 }
300 } 300 }
301 } 301 }
302 302
303 .footer{ 303 .footer{
304 position: fixed; 304 position: fixed;
305 left: 0; 305 left: 0;
306 bottom: 50px; 306 bottom: 0px;
307 height: 112rpx; 307 height: 112rpx;
308 width: 100%; 308 width: 100%;
309 background-color: #FFFFFF; 309 background-color: #FFFFFF;
310 font-size: 16px; 310 font-size: 16px;
311 display: flex; 311 display: flex;
312 justify-content: space-between; 312 justify-content: space-between;
313 align-items: center; 313 align-items: center;
314 .footerLeft{ 314 .footerLeft{
315 display: flex; 315 display: flex;
316 justify-content: center; 316 justify-content: center;
317 align-items: center; 317 align-items: center;
318 width: 50%; 318 width: 50%;
319 color: #333333; 319 color: #333333;
320 text{ 320 text{
321 color: #FF6B4A; 321 color: #FF6B4A;
322 } 322 }
323 } 323 }
324 .footerRight{ 324 .footerRight{
325 display: flex; 325 display: flex;
326 justify-content: flex-end; 326 justify-content: flex-end;
327 align-items: center; 327 align-items: center;
328 width: 50%; 328 width: 50%;
329 margin-right: 26rpx; 329 margin-right: 26rpx;
330 .paybtn{ 330 .paybtn{
331 display: flex; 331 display: flex;
332 justify-content: center; 332 justify-content: center;
333 align-items: center; 333 align-items: center;
334 background: #FF6B4A; 334 background: #FF6B4A;
335 border-radius: 20px; 335 border-radius: 20px;
336 border-radius: 20px; 336 border-radius: 20px;
337 color: #FFFFFF; 337 color: #FFFFFF;
338 width: 204rpx; 338 width: 204rpx;
339 height: 80rpx; 339 height: 80rpx;
340 } 340 }
341 } 341 }
342 342
343 } 343 }
344 } 344 }
345 345
346 346
347 347
348 </style> 348 </style>
349 349
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
Diff comments   View file @09a4a9a
1 <template> 1 <template>
2 <!-- 折叠框 --> 2 <!-- 折叠框 -->
3 <view class="myCollapse"> 3 <view class="myCollapse">
4 <view class="head"> 4 <view class="head">
5 <view>{{title}}</view> 5 <view>{{title}}</view>
6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view> 6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
7 <view class="headRighted" v-if="this.isOpen" @click="myCollapseChange(isOpen)"></view> 7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
9 </view> 9 </view>
10 <view class="body"> 10 <view class="body">
11 <block v-if="this.isOpen"> 11
12 <block v-if="isOpen">
13
12 <view style="background-color: #FFFFFF;" class="funBox"> 14 <view style="background-color: #FFFFFF;" class="funBox">
13 <template v-if="title==='镜片种类'"> 15 <block v-if="title==='镜片种类'">
14 <view class="noRange"> 16 <view class="noRange">
15 <block v-for="(item,index) in funList" :key="item.key"> 17 <block v-for="(item) in funList" :key="item.key">
16 <view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
17 <view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
18 </block> 20 </block>
19 </view> 21 </view>
20 <view class="noRange"> 22 <view class="noRange">
21 <block v-for="(item,index) in funList2" :key="item.key"> 23 <block v-for="(item,index) in funList2" :key="item.key">
22 <view class="boxChoiced-C" :style="colorList[index]" v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)"></view> 24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
23 <view class="boxChoice-C" :style="colorList[index]" v-else @click="choice2(index,item.key-1,item.isChioce)"></view> 25 :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view>
24 </block> 26 </block>
25 </view> 27 </view>
26 </template> 28 </block>
27 <template v-else> 29 <block v-else>
28 <view class="range" v-for="(item,index) in funList" :key="item.key">{{item.range}}</view> 30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
29 <view class="noRange"> 31 <view class="noRange">
30 <block v-for="(item,index) in funList" :key="item.key"> 32 <block v-for="(item) in funList" :key="item.key">
31 <view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
32 <view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
33 </block> 35 </block>
34 </view> 36 </view>
35 <!-- 手动换行 --> 37
36 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> 38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
37 <view class="noRange" style="max-width: 624rpx"> 39 <view class="noRange" style="max-width: 624rpx">
38 <block v-for="(item,index) in funList2" :key="item.key"> 40 <block v-for="(item,index) in funList2" :key="item.key">
39 <view class="boxChoiced" v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> 41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
40 <view class="boxChoice" v-else @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> 42 @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
41 </block> 43 </block>
42 </view> 44 </view>
43 </template> 45 </block>
44
45 </view> 46 </view>
46 </block> 47 </block>
48
47 <block v-else> 49 <block v-else>
48 *<text v-for="(item,index) in funContent" :key="index">{{item}}</text> 50 *<block v-for="(item,index) in funContent" :key="index">
51 <text v-if="item!==null">{{item}}</text>
52 </block>
49 </block> 53 </block>
50 </view> 54 </view>
51 </view> 55 </view>
52 56
53 </template> 57 </template>
54 58
55 <script> 59 <script>
56 export default { 60 export default {
57 props:{ 61 props:{
58 isOpenProps:{ 62 isOpenProps:{
59 // 是否展开，默认 true 63 // 是否展开，默认 true
60 type: Boolean, 64 type: Boolean,
61 default: true 65 default: true
62 }, 66 },
63 funList:{ 67 funListProp:{
64 type: Array, 68 "name":String,
65 default: [] 69 "isChioce": Number,
70 "key":Number
66 }, 71 },
67 funList2:{ 72 funList2Prop:{
68 type:Array, 73 type:Array,
69
70 } 74 }
71 , 75 ,
72 funContent: { 76 funContentProp: {
73 type: Array, 77 type: Array
74 default: []
75 }, 78 },
76 title:{ 79 title:{
77 type: String, 80 type: String,
78 default: '' 81 default: ''
79 } 82 }
80 }, 83 },
81 data() { 84 data() {
82 return { 85 return {
83 isOpen:this.isOpenProps, 86 isOpen:this.isOpenProps,
84 // 颜色数组要与传入的值手动相同 87 // 颜色数组要与传入的值手动相同
85 colorList:[ 88 colorList:[
86 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", 89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
87 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", 90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
88 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", 91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
89 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", 92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
90 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" 93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
91 ] 94 ],
95 funList: this.funListProp,
96 funList2: this.funList2Prop,
97 funContent: this.funContentProp
92 }; 98 };
93 }, 99 },
100
94 methods:{ 101 methods:{
95 myCollapseChange(isopen){ 102 myCollapseChange(isopen){
96 this.isOpen = !isopen 103 this.isOpen = !isopen
97 }, 104 },
98 choice(index,isChoice){ 105 choice(index,isChoice){
99 this.funList[index].isChioce = !isChoice 106 this.funList[index].isChioce = !isChoice
100 if(!isChoice){ 107 if(!isChoice){
101 this.funContent[index] = this.funList[index].name 108 this.funContent[index] = this.funList[index].name
102 } 109 }
103 else{ 110 else{
104 this.funContent[index] = '' 111 this.funContent[index] = ''
105 } 112 }
106 }, 113 },
107 choice2(index,conIndex,isChoice){ 114 choice2(index,conIndex,isChoice){
108 this.funList2[index].isChioce = !isChoice 115 this.funList2[index].isChioce = !isChoice
109 if(!isChoice){ 116 if(!isChoice){
110 this.funContent[conIndex] = this.funList2[index].name 117 this.funContent[conIndex] = this.funList2[index].name
111 } 118 }
112 else{ 119 else{
113 this.funContent[conIndex] = '' 120 this.funContent[conIndex] = ''
114 } 121 }
115 } 122 }
116 } 123 }
117 } 124 }
118 </script> 125 </script>
119 126
120 <style lang="scss"> 127 <style lang="scss">
121 .myCollapse{ 128 .myCollapse{
122 width: 100%; 129 width: 100%;
123 padding-bottom: 28rpx; 130 padding-bottom: 28rpx;
124 margin-top: 7px; 131 margin-top: 7px;
125 border-bottom: 1px solid #E9E9E9; 132 border-bottom: 1px solid #E9E9E9;
126 .head{ 133 .head{
127 display: flex; 134 display: flex;
128 justify-content: space-between; 135 justify-content: space-between;
129 height: 24px; 136 height: 24px;
130 // font-family: PingFangSC-Medium; 137 // font-family: PingFangSC-Medium;
131 font-size: 16px; 138 font-size: 16px;
132 color: #333333; 139 color: #333333;
133 letter-spacing: -0.3px; 140 letter-spacing: -0.3px;
134 text-align: justify; 141 text-align: justify;
135 line-height: 24px; 142 line-height: 24px;
136 margin-bottom: 18rpx; 143 margin-bottom: 18rpx;
137 .headRighted{ 144 .headRighted{
138 width: 0; 145 width: 0;
139 height: 0; 146 height: 0;
140 border-left: 4px solid transparent; 147 border-left: 4px solid transparent;
141 border-right: 4px solid transparent; 148 border-right: 4px solid transparent;
142 border-bottom: 4px solid #CFCFCF; 149 border-bottom: 4px solid #CFCFCF;
143 transform: scaleY(-1); 150 transform: scaleY(-1);
144 margin-top: 10px; 151 margin-top: 10px;
145 } 152 }
146 .headMid{ 153 .headMid{
147 // font-family: PingFangSC-Regular; 154 // font-family: PingFangSC-Regular;
148 font-size: 10px; 155 font-size: 10px;
149 color: #999999; 156 color: #999999;
150 letter-spacing: -0.19px; 157 letter-spacing: -0.19px;
151 margin-left: -120rpx; 158 margin-left: -120rpx;
152 } 159 }
153 .headRight{ 160 .headRight{
154 width: 0; 161 width: 0;
155 height: 0; 162 height: 0;
156 border-left: 4px solid transparent; 163 border-left: 4px solid transparent;
157 border-right: 4px solid transparent; 164 border-right: 4px solid transparent;
158 border-bottom: 4px solid #CFCFCF; 165 border-bottom: 4px solid #CFCFCF;
159 margin-top: 10px; 166 margin-top: 10px;
160 } 167 }
161 } 168 }
162 .body{ 169 .body{
163 // font-family: PingFangSC-Regular; 170 // font-family: PingFangSC-Regular;
164 font-size: 12px; 171 font-size: 12px;
165 color: #666666; 172 color: #666666;
166 letter-spacing: 0; 173 letter-spacing: 0;
167 display: flex; 174 display: flex;
168 flex-wrap: wrap; 175 flex-wrap: wrap;
169 text{ 176 text{
170 padding-left: 4px; 177 padding-left: 4px;
171 } 178 }
172 } 179 }
173 } 180 }
174 .funBox { 181 .funBox {
175 // display: flex; 182 // display: flex;
176 width: 100%; 183 width: 100%;
177 // flex-wrap: wrap; 184 // flex-wrap: wrap;
178 // max-width: 624rpx; 185 // max-width: 624rpx;
179 .range{ 186 .range{
180 // font-family: PingFangSC-Regular; 187 // font-family: PingFangSC-Regular;
181 font-size: 10px; 188 font-size: 10px;
182 color: #999999; 189 color: #999999;
183 letter-spacing: -0.19px; 190 letter-spacing: -0.19px;
184 margin-bottom: 5px; 191 margin-bottom: 5px;
185 } 192 }
186 .noRange{ 193 .noRange{
187 display: flex; 194 display: flex;
188 flex-wrap: wrap; 195 flex-wrap: wrap;
189 // max-width: 624rpx; 196 // max-width: 624rpx;
190 // margin-bottom: 28rpx; 197 // margin-bottom: 28rpx;
191 .boxChoiced,.boxChoice{ 198 .boxChoiced,.boxChoice{
192 height: 60rpx; 199 height: 60rpx;
193 border-radius: 4rpx; 200 border-radius: 4rpx;
194 // font-family: PingFangSC-Regular; 201 // font-family: PingFangSC-Regular;
195 font-size: 12px; 202 font-size: 12px;
196 letter-spacing: 0; 203 letter-spacing: 0;
197 line-height: 60rpx; 204 line-height: 60rpx;
198 box-sizing: border-box; 205 box-sizing: border-box;
199 padding: 0 20rpx; 206 padding: 0 20rpx;
200 margin-right: 20rpx; 207 margin-right: 20rpx;
201 margin-bottom: 13rpx; 208 margin-bottom: 13rpx;
202 } 209 }
203 .boxChoiced{ 210 .boxChoiced{
204 background: rgba(255,107,74,0.15); 211 background: rgba(255,107,74,0.15);
205 color: #FF6B4A; 212 color: #FF6B4A;
206 } 213 }
207 .boxChoice{ 214 .boxChoice{
208 background: #F2F2F2; 215 background: #F2F2F2;
209 color: #666666; 216 color: #666666;
210 } 217 }
211 .boxChoiced-C,.boxChoice-C{ 218 .boxChoiced-C,.boxChoice-C{
212 width: 64rpx; 219 width: 64rpx;
213 height: 64rpx; 220 height: 64rpx;
214 border-radius: 32rpx; 221 border-radius: 32rpx;
215 margin-right: 8px; 222 margin-right: 8px;
216 } 223 }
217 .boxChoiced-C{ 224 .boxChoiced-C{
218 opacity: 0.7; 225 opacity: 0.7;
219 border: 1px solid #FF6B4A; 226 border: 1px solid #FF6B4A;
220 } 227 }
221 .boxChoice-C{ 228 .boxChoice-C{
222 opacity: 0.7; 229 opacity: 0.7;
223 border: 1px solid #FFFFFF; 230 border: 1px solid #FFFFFF;
224 } 231 }
225 } 232 }
226 233
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @09a4a9a
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goods-info"> 3 <view class="goods-info">
4 <image src="../../static/myorder-paying-pic.png"></image> 4 <image src="../../static/myorder-paying-pic.png"></image>
5 <view class="box-right"> 5 <view class="box-right">
6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> 6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7 <text class="p2">支持7天无理由退货 顺丰发货</text> 7 <text class="p2">支持7天无理由退货 顺丰发货</text>
8 <view class="priceBox"> 8 <view class="priceBox">
9 <view class="price">￥{{price*count}}</view> 9 <view class="price">￥{{price*count}}</view>
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="goods-data"> 18 <view class="goods-data">
19 <!-- 实用功能折叠框 --> 19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funList="funList" :funContent="funContent" title="实用功能"></MyCollapse> 20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21 <MyCollapse :isOpenProps="kindIsOpen" :funList="kindList1" :funList2="kindList2" :funContent="kindContent" title="镜片种类"></MyCollapse> 21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
22 <MyCollapse :isOpenProps="maIsOpen" :funList="maList1" :funList2="maList2" :funContent="maContent" title="材质选择"></MyCollapse> 22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23 <MyCollapse :isOpenProps="reIsOpen" :funList="reList1" :funList2="reList2" :funContent="reContent" title="折射率"></MyCollapse> 23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24 24
25 <view class="opCollapse"> 25 <view class="opCollapse">
26 <view class="head"> 26 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view> 27 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view> 28 <view v-else></view>
29 <view class="headRighted" v-if="this.opIsOpen" @click="myCollapseChange(opIsOpen)"></view> 29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view> 31 </view>
32 <view class="body"> 32 <view class="body">
33 <block v-if="this.opIsOpen"> 33 <template v-if="opIsOpen">
34 34
35 <view class="goods-form"> 35 <view class="goods-form">
36 <text class="p1">填写验光数据</text> 36 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38 <view class="picker" > 38 <view class="picker" >
39 <view class="picker-choice"> 39 <view class="picker-choice">
40 <view class="choice-left"> 40 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text> 41 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text> 42 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view> 43 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image> 47 <image src="../../static/detail-tabicon.png" ></image>
48 </picker> 48 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image> 52 <image src="../../static/detail-tabicon.png" ></image>
53 </picker> 53 </picker>
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[1].nameC}}</text> 59 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text> 60 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view> 61 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image> 65 <image src="../../static/detail-tabicon.png" ></image>
66 </picker> 66 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image> 70 <image src="../../static/detail-tabicon.png" ></image>
71 </picker> 71 </picker>
72 </view> 72 </view>
73 </view> 73 </view>
74 <view class="picker" > 74 <view class="picker" >
75 <view class="picker-choice"> 75 <view class="picker-choice">
76 <view class="choice-left"> 76 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text> 77 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text> 78 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view> 79 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image> 83 <image src="../../static/detail-tabicon.png" ></image>
84 </picker> 84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image> 88 <image src="../../static/detail-tabicon.png" ></image>
89 </picker> 89 </picker>
90 </view> 90 </view>
91 </view> 91 </view>
92 <view class="picker" > 92 <view class="picker" >
93 <view class="picker-choice"> 93 <view class="picker-choice">
94 <view class="choice-left"> 94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text> 95 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text> 96 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view> 97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker> 102 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 106 <image src="../../static/detail-tabicon.png" ></image>
107 </picker> 107 </picker>
108 </view> 108 </view>
109 </view> 109 </view>
110 <view class="picker" > 110 <view class="picker" >
111 <view class="picker-choice"> 111 <view class="picker-choice">
112 <view class="choice-left"> 112 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text> 113 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view> 114 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118 <image src="../../static/detail-tabicon.png" ></image> 118 <image src="../../static/detail-tabicon.png" ></image>
119 </picker> 119 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123 <image src="../../static/detail-tabicon.png" ></image> 123 <image src="../../static/detail-tabicon.png" ></image>
124 </picker> 124 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128 <image src="../../static/detail-tabicon.png" ></image> 128 <image src="../../static/detail-tabicon.png" ></image>
129 </picker> 129 </picker>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view class="confirm"> 132 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text> 134 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view> 135 </view>
136 </view> 136 </view>
137 137
138 </block> 138 </template>
139 <block v-else> 139 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'"> 141 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text> 142 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 145 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template> 146 </template>
147 <template v-else> 147 <template v-else>
148 <template v-if="item.nameC==='度数'"> 148 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text> 149 <text style="display: inline;">*</text>
150 </template> 150 </template>
151 151
152 <text class="names">{{item.nameC}}</text> 152 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template> 155 </template>
156 </view> 156 </view>
157 </block> 157 </template>
158 </view> 158 </view>
159 </view> 159 </view>
160 160
161 </view> 161 </view>
162 <view class="submit">立即结算</view> 162 <view class="submit">立即结算</view>
163 </view> 163 </view>
164 </template> 164 </template>
165 165
166 <script> 166 <script>
167 import MyCollapse from './compoents/MyCollapse.vue' 167 import MyCollapse from './compoents/MyCollapse.vue'
168 export default { 168 export default {
169 components: { 169 components: {
170 MyCollapse 170 MyCollapse
171 }, 171 },
172 data() { 172 data() {
173 return { 173 return {
174 count:1, 174 count:1,
175 disabled:false, 175 disabled:false,
176 price:180, 176 price:180,
177 // 实用功能参数 177 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启 178 funIsOpen:true, // 默认myCollapse开启
179 funList: [ 179 funList: [
180 {"name":"防紫外线","isChioce":false,key:1}, 180 {"name":"防紫外线","isChioce": false,"key":1},
181 {"name":"防蓝光","isChioce":false,key:2}, 181 {"name":"防蓝光","isChioce": false,"key":2},
182 {"name":"智能变色","isChioce":false,key:3}, 182 {"name":"智能变色","isChioce": false,"key":3},
183 {"name":"易清洁","isChioce":false,key:4}, 183 {"name":"易清洁","isChioce": false,"key":4},
184 {"name":"防辐射","isChioce":false,key:5}, 184 {"name":"防辐射","isChioce": false,"key":5},
185 {"name":"抗疲劳","isChioce":false,key:6}, 185 {"name":"抗疲劳","isChioce": false,"key":6},
186 ], 186 ],
187 funContent:[], 187 funContent:[],
188 188
189 // 镜片种类参数 189 // 镜片种类参数
190 kindIsOpen:false, // 默认myCollapse开启 190 kindIsOpen:true,
191 kindList1: [ 191 kindList1: [
192 {"name":"染色","isChioce":false,key:1}, 192 {"name":"染色","isChioce":false,key:1},
193 {"name":"渐变","isChioce":false,key:2}, 193 {"name":"渐变","isChioce":false,key:2},
194 ], 194 ],
195 kindList2: [ 195 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3}, 196 {"name":"JB234759","isChioce":false,key:3},
197 {"name":"JB234759","isChioce":false,key:4}, 197 {"name":"JB234759","isChioce":false,key:4},
198 {"name":"JB234759","isChioce":false,key:5}, 198 {"name":"JB234759","isChioce":false,key:5},
199 {"name":"JB234759","isChioce":false,key:6}, 199 {"name":"JB234759","isChioce":false,key:6},
200 {"name":"JB234759","isChioce":false,key:7}, 200 {"name":"JB234759","isChioce":false,key:7},
201 ], 201 ],
202 kindContent:[], 202 kindContent:[],
203 // 材质选择 203 // 材质选择
204 maIsOpen:false, 204 maIsOpen:true,
205 maList1: [ 205 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, 206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2}, 207 {"name":"特殊镜片","isChioce":false,key:2},
208 ], 208 ],
209 maList2: [ 209 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4}, 211 {"name":"玻璃镜片","isChioce":false,key:4},
212 ], 212 ],
213 maContent:[], 213 maContent:[],
214 // 折射率参数 214 // 折射率参数
215 reIsOpen:false, 215 reIsOpen:true,
216 reList1: [ 216 reList1: [
217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, 217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2}, 218 {"name":"1.60","isChioce":false,key:2},
219 ], 219 ],
220 reList2: [ 220 reList2: [
221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4}, 222 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5}, 223 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6}, 224 {"name":"1.74","isChioce":false,key:6},
225 ], 225 ],
226 reContent:[], 226 reContent:[],
227 // 验光参数 227 // 验光参数
228 opIsOpen:false, 228 opIsOpen:true,
229 tablist: { 229 tablist: {
230 // read: true, 230 // read: true,
231 // seeLong: false, 231 // seeLong: false,
232 confirm: false 232 confirm: false
233 }, 233 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据 235 // 度数相关数据
236 pickerInfoList:[ 236 pickerInfoList:[
237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
242 ], 242 ],
243 243
244 } 244 }
245 }, 245 },
246 methods: { 246 methods: {
247 counter(isadd){ 247 counter(isadd){
248 if(isadd){ 248 if(isadd){
249 this.count++ 249 this.count++
250 }else{ 250 }else{
251 this.count <= 1? this.disabled = true:this.count-- 251 this.count <= 1? this.disabled = true:this.count--
252 } 252 }
253 }, 253 },
254 myCollapseChange(isopen){ 254 myCollapseChange(isopen){
255 // console.log(isopen) 255 // console.log(isopen)
256 this.opIsOpen = !isopen 256 this.opIsOpen = !isopen
257 }, 257 },
258 changeConfirm() { 258 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm 259 this.tablist.confirm = !this.tablist.confirm
260 }, 260 },
261 261
262 bindPickerChange01: function(e) { 262 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value 263 this.pickerInfoList[0].nameIndex1 = e.target.value
264 }, 264 },
265 bindPickerChange02: function(e) { 265 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value 266 this.pickerInfoList[0].nameIndex2 = e.target.value
267 }, 267 },
268 268
269 bindPickerChange11: function(e) { 269 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value 270 this.pickerInfoList[1].nameIndex1 = e.target.value
271 }, 271 },
272 bindPickerChange12: function(e) { 272 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value 273 this.pickerInfoList[1].nameIndex2 = e.target.value
274 }, 274 },
275 275
276 bindPickerChange21: function(e) { 276 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value 277 this.pickerInfoList[2].nameIndex1 = e.target.value
278 }, 278 },
279 bindPickerChange22: function(e) { 279 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value 280 this.pickerInfoList[2].nameIndex2 = e.target.value
281 }, 281 },
282 282
283 bindPickerChange31: function(e) { 283 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value 284 this.pickerInfoList[3].nameIndex1 = e.target.value
285 }, 285 },
286 bindPickerChange32: function(e) { 286 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value 287 this.pickerInfoList[3].nameIndex2 = e.target.value
288 }, 288 },
289 289
290 bindPickerChange41: function(e) { 290 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value 291 this.pickerInfoList[4].nameIndex1 = e.target.value
292 }, 292 },
293 bindPickerChange42: function(e) { 293 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value 294 this.pickerInfoList[4].nameIndex2 = e.target.value
295 }, 295 },
296 bindPickerChange43: function(e) { 296 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value 297 this.pickerInfoList[4].nameIndex3 = e.target.value
298 }, 298 },
299 } 299 }
300 } 300 }
301 </script> 301 </script>
302 302
303 <style lang="scss" scoped> 303 <style lang="scss" scoped>
304 .content{ 304 .content{
305 width: 100%; 305 width: 100%;
306 background-color: #F2F2F2; 306 background-color: #F2F2F2;
307 display: flex; 307 display: flex;
308 flex-direction: column; 308 flex-direction: column;
309 align-items: center; 309 align-items: center;
310 } 310 }
311 311
312 .goods-info{ 312 .goods-info{
313 width: 100%; 313 width: 100%;
314 height: 272rpx; 314 height: 272rpx;
315 box-sizing: border-box; 315 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx; 316 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0; 317 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx; 318 // margin-bottom: -18rpx;
319 // margin-top: -36rpx; 319 // margin-top: -36rpx;
320 background: #FFFFFF; 320 background: #FFFFFF;
321 border-radius: 16rpx; 321 border-radius: 16rpx;
322 display: flex; 322 display: flex;
323 image{ 323 image{
324 width: 94px; 324 width: 94px;
325 height: 94px; 325 height: 94px;
326 margin-right: 28rpx; 326 margin-right: 28rpx;
327 } 327 }
328 .box-right{ 328 .box-right{
329 width: 458rpx; 329 width: 458rpx;
330 display: flex; 330 display: flex;
331 flex-direction: column; 331 flex-direction: column;
332 align-items: flex-start; 332 align-items: flex-start;
333 justify-content: space-between; 333 justify-content: space-between;
334 .p1 { 334 .p1 {
335 // font-family: PingFangSC-Regular; 335 // font-family: PingFangSC-Regular;
336 font-size: 14px; 336 font-size: 14px;
337 color: #333333; 337 color: #333333;
338 letter-spacing: -0.26px; 338 letter-spacing: -0.26px;
339 text-align: justify; 339 text-align: justify;
340 line-height: 18px; 340 line-height: 18px;
341 } 341 }
342 .p2 { 342 .p2 {
343 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
344 font-size: 10px; 344 font-size: 10px;
345 color: #999999; 345 color: #999999;
346 letter-spacing: -0.19px; 346 letter-spacing: -0.19px;
347 margin-top: -20rpx; 347 margin-top: -20rpx;
348 } 348 }
349 .priceBox{ 349 .priceBox{
350 display: flex; 350 display: flex;
351 flex-direction: row; 351 flex-direction: row;
352 justify-content: space-between; 352 justify-content: space-between;
353 width: 100%; 353 width: 100%;
354 .price{ 354 .price{
355 color: #FF6B4A; 355 color: #FF6B4A;
356 font-size: 28rpx; 356 font-size: 28rpx;
357 } 357 }
358 .counter{ 358 .counter{
359 display: flex; 359 display: flex;
360 flex-direction: row; 360 flex-direction: row;
361 justify-content: space-between; 361 justify-content: space-between;
362 font-size: 28rpx; 362 font-size: 28rpx;
363 color: #333333; 363 color: #333333;
364 width: 122rpx; 364 width: 122rpx;
365 .btn{ 365 .btn{
366 display: flex; 366 display: flex;
367 justify-content: center; 367 justify-content: center;
368 line-height: 32rpx; 368 line-height: 32rpx;
369 height: 32rpx; 369 height: 32rpx;
370 width: 32rpx; 370 width: 32rpx;
371 background-color: #F2F2F2; 371 background-color: #F2F2F2;
372 color: #CFCFCF; 372 color: #CFCFCF;
373 } 373 }
374 } 374 }
375 } 375 }
376 } 376 }
377 } 377 }
378 378
379 .goods-data{ 379 .goods-data{
380 width: 100%; 380 width: 100%;
381 box-sizing: border-box; 381 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx; 382 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF; 383 background: #FFFFFF;
384 border-radius: 12rpx; 384 border-radius: 12rpx;
385 margin-bottom: 92px; 385 margin-bottom: 92px;
386 .opCollapse{ 386 .opCollapse{
387 width: 100%; 387 width: 100%;
388 padding-bottom: 28rpx; 388 padding-bottom: 28rpx;
389 margin-top: 7px; 389 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9; 390 border-bottom: 1px solid #E9E9E9;
391 .head{ 391 .head{
392 display: flex; 392 display: flex;
393 justify-content: space-between; 393 justify-content: space-between;
394 height: 24px; 394 height: 24px;
395 // font-family: PingFangSC-Medium; 395 // font-family: PingFangSC-Medium;
396 font-size: 16px; 396 font-size: 16px;
397 color: #333333; 397 color: #333333;
398 letter-spacing: -0.3px; 398 letter-spacing: -0.3px;
399 text-align: justify; 399 text-align: justify;
400 line-height: 24px; 400 line-height: 24px;
401 margin-bottom: 18rpx; 401 margin-bottom: 18rpx;
402 .headRighted{ 402 .headRighted{
403 width: 0; 403 width: 0;
404 height: 0; 404 height: 0;
405 border-left: 4px solid transparent; 405 border-left: 4px solid transparent;
406 border-right: 4px solid transparent; 406 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF; 407 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1); 408 transform: scaleY(-1);
409 margin-top: 10px; 409 margin-top: 10px;
410 } 410 }
411 .headMid{ 411 .headMid{
412 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
413 font-size: 10px; 413 font-size: 10px;
414 color: #999999; 414 color: #999999;
415 letter-spacing: -0.19px; 415 letter-spacing: -0.19px;
416 margin-left: -120rpx; 416 margin-left: -120rpx;
417 } 417 }
418 .headRight{ 418 .headRight{
419 width: 0; 419 width: 0;
420 height: 0; 420 height: 0;
421 border-left: 4px solid transparent; 421 border-left: 4px solid transparent;
422 border-right: 4px solid transparent; 422 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF; 423 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px; 424 margin-top: 10px;
425 } 425 }
426 } 426 }
427 .body{ 427 .body{
428 // font-family: PingFangSC-Regular; 428 // font-family: PingFangSC-Regular;
429 font-size: 12px; 429 font-size: 12px;
430 color: #666666; 430 color: #666666;
431 letter-spacing: 0; 431 letter-spacing: 0;
432 .bodyBox{ 432 .bodyBox{
433 margin-top: 15px; 433 margin-top: 15px;
434 .names{ 434 .names{
435 // font-family: PingFangSC-Regular; 435 // font-family: PingFangSC-Regular;
436 font-size: 12px; 436 font-size: 12px;
437 color: #151515; 437 color: #151515;
438 letter-spacing: 0; 438 letter-spacing: 0;
439 text-align: justify; 439 text-align: justify;
440 line-height: 17px; 440 line-height: 17px;
441 margin-left: 5px; 441 margin-left: 5px;
442 margin-right: 10px; 442 margin-right: 10px;
443 } 443 }
444 text{ 444 text{
445 // font-family: PingFangSC-Regular; 445 // font-family: PingFangSC-Regular;
446 font-size: 12px; 446 font-size: 12px;
447 color: #666666; 447 color: #666666;
448 letter-spacing: 0; 448 letter-spacing: 0;
449 text-align: justify; 449 text-align: justify;
450 } 450 }
451 } 451 }
452 452
453 } 453 }
454 } 454 }
455 455
456 } 456 }
457 457
458 .goods-form { 458 .goods-form {
459 display: flex; 459 display: flex;
460 flex-direction: column; 460 flex-direction: column;
461 align-items: center; 461 align-items: center;
462 justify-content: center; 462 justify-content: center;
463 background-color: #fff; 463 background-color: #fff;
464 width: 100%; 464 width: 100%;
465 465
466 .p1 { 466 .p1 {
467 font-size: 16px; 467 font-size: 16px;
468 color: #333333; 468 color: #333333;
469 letter-spacing: -0.3px; 469 letter-spacing: -0.3px;
470 text-align: justify; 470 text-align: justify;
471 line-height: 24px; 471 line-height: 24px;
472 margin: 4px 0; 472 margin: 4px 0;
473 473
474 } 474 }
475 .p2 { 475 .p2 {
476 font-size: 12px; 476 font-size: 12px;
477 color: #999999; 477 color: #999999;
478 letter-spacing: -0.23px; 478 letter-spacing: -0.23px;
479 margin-bottom: 18rpx; 479 margin-bottom: 18rpx;
480 } 480 }
481 image{ 481 image{
482 width: 28rpx; 482 width: 28rpx;
483 height: 26rpx; 483 height: 26rpx;
484 } 484 }
485 .confirm { 485 .confirm {
486 display: flex; 486 display: flex;
487 align-items: center; 487 align-items: center;
488 font-size: 12px; 488 font-size: 12px;
489 color: #666666; 489 color: #666666;
490 letter-spacing: -0.23px; 490 letter-spacing: -0.23px;
491 width: 684rpx; 491 width: 684rpx;
492 image{ 492 image{
493 margin-right:25rpx; 493 margin-right:25rpx;
494 } 494 }
495 } 495 }
496 .picker{ 496 .picker{
497 display: flex; 497 display: flex;
498 flex-direction: column; 498 flex-direction: column;
499 justify-content: center; 499 justify-content: center;
500 align-items: center; 500 align-items: center;
501 width: 100%; 501 width: 100%;
502 image{ 502 image{
503 width: 10px; 503 width: 10px;
504 height: 10px; 504 height: 10px;
505 margin-right: 5px; 505 margin-right: 5px;
506 } 506 }
507 .picker-choice{ 507 .picker-choice{
508 display: flex; 508 display: flex;
509 width: 684rpx; 509 width: 684rpx;
510 align-items: center; 510 align-items: center;
511 margin-bottom: 40rpx; 511 margin-bottom: 40rpx;
512 .choice-left{ 512 .choice-left{
513 width: 210rpx; 513 width: 210rpx;
514 .p11 { 514 .p11 {
515 font-size: 14px; 515 font-size: 14px;
516 color: #333333; 516 color: #333333;
517 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
518 text-align: justify; 518 text-align: justify;
519 line-height: 24px; 519 line-height: 24px;
520 // margin-right: 10px; 520 // margin-right: 10px;
521 } 521 }
522 .p12 { 522 .p12 {
523 font-size: 10px; 523 font-size: 10px;
524 color: #3F3F3F; 524 color: #3F3F3F;
525 letter-spacing: -0.19px; 525 letter-spacing: -0.19px;
526 text-align: justify; 526 text-align: justify;
527 line-height: 24px; 527 line-height: 24px;
528 } 528 }
529 529
530 530
531 } 531 }
532 .p13 { 532 .p13 {
533 font-size: 10px; 533 font-size: 10px;
534 color: #999999; 534 color: #999999;
535 letter-spacing: -0.19px; 535 letter-spacing: -0.19px;
536 margin-right: 10px; 536 margin-right: 10px;
537 } 537 }
538 .p13-date { 538 .p13-date {
539 font-size: 10px; 539 font-size: 10px;
540 color: #999999; 540 color: #999999;
541 letter-spacing: -0.19px; 541 letter-spacing: -0.19px;
542 margin-right: 5px; 542 margin-right: 5px;
543 } 543 }
544 .p14 { 544 .p14 {
545 font-size: 14px; 545 font-size: 14px;
546 color: #666666; 546 color: #666666;
547 letter-spacing: -0.26px; 547 letter-spacing: -0.26px;
548 text-align: center; 548 text-align: center;
549 width: 124rpx; 549 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF; 550 border-bottom: 1px solid #CFCFCF;
551 } 551 }
552 552
553 } 553 }
554 } 554 }
555 } 555 }
556 556
557 .submit{ 557 .submit{
558 width: 100%; 558 width: 100%;
559 height: 112rpx; 559 height: 112rpx;
560 background: #FF6B4A; 560 background: #FF6B4A;
561 position: fixed; 561 position: fixed;
562 bottom: 0; 562 bottom: 0;
563 text-align: center; 563 text-align: center;
564 line-height: 112rpx; 564 line-height: 112rpx;
565 // font-family: PingFangSC-Regular; 565 // font-family: PingFangSC-Regular;
566 font-size: 16px; 566 font-size: 16px;
567 color: #FFFFFF; 567 color: #FFFFFF;
568 letter-spacing: -0.3px; 568 letter-spacing: -0.3px;
569 } 569 }
570 570
571 </style> 571 </style>
572 572
src/pages/myOrder/myOrder.vue
Diff comments   View file @09a4a9a
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> 7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8 </view> 8 </view>
9 <view class="screenBar"> 9 <view class="screenBar">
10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12 </view> 12 </view>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="orderList" > 15 <view class="orderList" >
16 <view 16 <view
17 v-for="(order) in orderList" 17 v-for="(order) in orderList"
18 :key="order.orderId" 18 :key="order.orderId"
19 > 19 >
20 <OrderCard :order = "order" :current="current"></OrderCard> 20 <OrderCard :order = "order" :current="current"></OrderCard>
21 </view> 21 </view>
22 </view> 22 </view>
23 <navigator url="/pages/user/user" open-type="switchTab"><view class="footer">已显示全部</view></navigator> 23 <view class="footer">已显示全部</view>
24 <!-- <view class="footer">已显示全部</view> -->
25 </view> 24 </view>
26 </template> 25 </template>
27 <script> 26 <script>
28 import OrderCard from './components/OrderCard.vue'; 27 import OrderCard from './components/OrderCard.vue';
29 import store from '@/store'; 28 import store from '@/store';
30 29
31 export default { 30 export default {
32 components:{ 31 components:{
33 'OrderCard': OrderCard 32 'OrderCard': OrderCard
34 }, 33 },
35 data() { 34 data() {
36 return { 35 return {
37 screenItems: [ 36 screenItems: [
38 {current:0,text:'全部'}, 37 {current:0,text:'全部'},
39 {current:1,text:'待付款'}, 38 {current:1,text:'待付款'},
40 {current:2,text:'待发货'}, 39 {current:2,text:'待发货'},
41 {current:3,text:'待收货'}, 40 {current:3,text:'待收货'},
42 {current:4,text:'退款售后'}, 41 {current:4,text:'退款售后'},
43 ], 42 ],
44 current: 0, 43 current: 0,
45 //订单数据 44 //订单数据
46 // orderList:[ 45 // orderList:[
47 // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, 46 // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
48 // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, 47 // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
49 // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1}, 48 // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
50 // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, 49 // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
51 // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, 50 // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
52 // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, 51 // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
53 // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, 52 // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
54 // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}, 53 // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
55 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1} 54 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
56 // ], 55 // ],
57 }; 56 };
58 }, 57 },
59 58
60 onLoad: function() { 59 onLoad: function() {
61 store.dispatch('myOrder/getList', { 60 store.dispatch('myOrder/getList', {
62 uid: "1", 61 uid: "1",
63 way: "0", 62 way: "0",
64 }); 63 });
65 }, 64 },
66 computed: { 65 computed: {
67 orderList() { 66 orderList() {
68 console.log('orderList', this.$store.state.myOrder.orderlist); 67 console.log('orderList', this.$store.state.myOrder.orderlist);
69 return this.$store.state.myOrder.orderlist; 68 return this.$store.state.myOrder.orderlist;
70 } 69 }
71 }, 70 },
72 methods:{ 71 methods:{
73 onClickItem(e) { 72 onClickItem(e) {
74 if (this.current !== e) { 73 if (this.current !== e) {
75 this.current = e; 74 this.current = e;
76 } 75 }
77 } 76 }
78 } 77 }
79 } 78 }
80 </script> 79 </script>
81 80
82 <style lang="scss"> 81 <style lang="scss">
83 .content { 82 .content {
84 display: flex; 83 display: flex;
85 flex-direction: column; 84 flex-direction: column;
86 align-items: center; 85 align-items: center;
87 background-color: #F7F6F6; 86 background-color: #F7F6F6;
88 min-height: 100vh; 87 min-height: 100vh;
89 .header{ 88 .header{
90 background-color: #ffffff; 89 background-color: #ffffff;
91 width: 100%; 90 width: 100%;
92 height: 232rpx; 91 height: 232rpx;
93 padding: 40rpx 40rpx 36rpx 40rpx; 92 padding: 40rpx 40rpx 36rpx 40rpx;
94 box-sizing: border-box; 93 box-sizing: border-box;
95 position: fixed; 94 position: fixed;
96 top: 0; 95 top: 0;
97 left: 0; 96 left: 0;
98 .searchBar { 97 .searchBar {
99 width: 670rpx; 98 width: 670rpx;
100 display: flex; 99 display: flex;
101 justify-content: center; 100 justify-content: center;
102 align-items: center; 101 align-items: center;
103 box-sizing: border-box; 102 box-sizing: border-box;
104 padding: 0rpx 16rpx; 103 padding: 0rpx 16rpx;
105 border: 1px solid #FF6B4A; 104 border: 1px solid #FF6B4A;
106 border-radius: 8rpx; 105 border-radius: 8rpx;
107 background-color: #ffffff; 106 background-color: #ffffff;
108 } 107 }
109 108
110 .screenBar{ 109 .screenBar{
111 width: 670rpx; 110 width: 670rpx;
112 height: 110rpx; 111 height: 110rpx;
113 display: flex; 112 display: flex;
114 flex-direction: row; 113 flex-direction: row;
115 justify-content: space-between; 114 justify-content: space-between;
116 align-items: center; 115 align-items: center;
117 color: #333333; 116 color: #333333;
118 font-size: 32rpx; 117 font-size: 32rpx;
119 } 118 }
120 .screenItem{ 119 .screenItem{
121 height: 50rpx; 120 height: 50rpx;
122 font-size: 32rpx; 121 font-size: 32rpx;
123 color: #333333; 122 color: #333333;
124 display: flex; 123 display: flex;
125 justify-content: center; 124 justify-content: center;
126 align-items: center; 125 align-items: center;
127 transition:all 0.2s; 126 transition:all 0.2s;
128 } 127 }
129 .active{ 128 .active{
130 // font-size: 34rpx; 129 // font-size: 34rpx;
131 color: #EC5D3B; 130 color: #EC5D3B;
132 } 131 }
133 .searchIpt { 132 .searchIpt {
134 height: 68rpx; 133 height: 68rpx;
135 width: 670rpx; 134 width: 670rpx;
136 padding: 16rpx; 135 padding: 16rpx;
137 font-size: 28rpx; 136 font-size: 28rpx;
138 box-sizing: border-box; 137 box-sizing: border-box;
139 } 138 }
140 } 139 }
141 .orderList{ 140 .orderList{
142 margin-top: 232rpx; 141 margin-top: 232rpx;
143 } 142 }
144 .footer{ 143 .footer{
145 font-size: 14px; 144 font-size: 14px;
146 color: #B8B8B8; 145 color: #B8B8B8;
147 margin: 40rpx 0; 146 margin: 40rpx 0;
148 } 147 }
149 } 148 }
150 </style> 149 </style>
151 150