Commit eab89b254277cc1b6a1a43e44ad2aace1feb7b3b
1 parent
ab4209caf5
Exists in
master
updates
Showing
5 changed files
with
210 additions
and
197 deletions
Show diff stats
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 2 | "pages" : [ |
| 3 | { | 3 | { |
| 4 | "path" : "pages/myOrder/myOrder", | 4 | "path" : "pages/myOrder/myOrder", |
| 5 | "style" : { | 5 | "style" : { |
| 6 | "navigationBarTitleText": "我的订单"} | 6 | "navigationBarTitleText" : "我的订单" |
| 7 | }, | 7 | } |
| 8 | { | 8 | }, |
| 9 | "path": "pages/cart/cart", | 9 | { |
| 10 | "style": { | 10 | "path" : "pages/cart/cart", |
| 11 | "navigationBarTitleText": "购物车" | 11 | "style" : { |
| 12 | } | 12 | "navigationBarTitleText" : "购物车" |
| 13 | }, | 13 | } |
| 14 | { | 14 | }, |
| 15 | "path": "pages/index/index", | 15 | { |
| 16 | "style": { | 16 | "path" : "pages/index/index", |
| 17 | "navigationBarTitleText": "商城一览" | 17 | "style" : { |
| 18 | } | 18 | "navigationBarTitleText" : "商城一览" |
| 19 | }, | 19 | } |
| 20 | { | 20 | }, |
| 21 | "path": "pages/frameDetail/frameDetail", | 21 | { |
| 22 | "style": { | 22 | "path" : "pages/frameDetail/frameDetail", |
| 23 | "navigationBarTitleText": "产品详情" | 23 | "style" : { |
| 24 | } | 24 | "navigationBarTitleText" : "产品详情" |
| 25 | }, | 25 | } |
| 26 | { | 26 | }, |
| 27 | "path": "pages/lensDetails/lensDetails", | 27 | { |
| 28 | "style": { | 28 | "path" : "pages/lensDetails/lensDetails", |
| 29 | "navigationBarTitleText": "产品详情" | 29 | "style" : { |
| 30 | } | 30 | "navigationBarTitleText" : "产品详情" |
| 31 | }, | 31 | } |
| 32 | { | 32 | }, |
| 33 | "path" : "pages/purchaseLenses/purchaseLenses", | 33 | { |
| 34 | "style" : { | 34 | "path" : "pages/purchaseLenses/purchaseLenses", |
| 35 | "navigationBarTitleText": "产品选购" | 35 | "style" : { |
| 36 | } | 36 | "navigationBarTitleText" : "产品选购" |
| 37 | }, | 37 | } |
| 38 | { | 38 | }, |
| 39 | "path" : "pages/refundProgress/refundProgress", | 39 | { |
| 40 | "style": { | 40 | "path" : "pages/refundProgress/refundProgress", |
| 41 | "navigationBarTitleText": "申请退款" | 41 | "style" : { |
| 42 | } | 42 | "navigationBarTitleText" : "申请退款" |
| 43 | }, | 43 | } |
| 44 | { | 44 | }, |
| 45 | "path": "pages/addAddress/addAddress", | 45 | { |
| 46 | "style": { | 46 | "path" : "pages/addAddress/addAddress", |
| 47 | "navigationBarTitleText": "新增地址" | 47 | "style" : { |
| 48 | } | 48 | "navigationBarTitleText" : "新增地址" |
| 49 | }, | 49 | } |
| 50 | { | 50 | }, |
| 51 | "path" : "pages/confirmOrder/confirmOrder", | 51 | { |
| 52 | "style" : { | 52 | "path" : "pages/confirmOrder/confirmOrder", |
| 53 | "navigationBarTitleText": "确认订单"} | 53 | "style" : { |
| 54 | }, | 54 | "navigationBarTitleText" : "确认订单" |
| 55 | { | 55 | } |
| 56 | "path": "pages/user/user", | 56 | }, |
| 57 | "style": { | 57 | { |
| 58 | "navigationBarTitleText": "我的" | 58 | "path" : "pages/user/user", |
| 59 | } | 59 | "style" : { |
| 60 | }, | 60 | "navigationBarTitleText" : "我的" |
| 61 | { | 61 | } |
| 62 | "path": "pages/refundment/refundWays" | 62 | }, |
| 63 | }, | 63 | { |
| 64 | { | 64 | "path" : "pages/refundment/refundWays" |
| 65 | "path": "pages/refundment/refundment" | 65 | }, |
| 66 | }, | 66 | { |
| 67 | { | 67 | "path" : "pages/refundment/refundment" |
| 68 | "path": "pages/predelivery/predelivery" | 68 | }, |
| 69 | }, | 69 | { |
| 70 | { | 70 | "path" : "pages/predelivery/predelivery" |
| 71 | "path": "pages/customerService/customerService", | 71 | }, |
| 72 | "style":{ | 72 | { |
| 73 | "navigationBarTitleText" : "在线客服" | 73 | "path" : "pages/customerService/customerService", |
| 74 | } | 74 | "style" : { |
| 75 | }, | 75 | "navigationBarTitleText" : "在线客服" |
| 76 | { | 76 | } |
| 77 | "path": "pages/myOrderPaying/myOrderPaying", | 77 | }, |
| 78 | "style":{ | 78 | { |
| 79 | "navigationBarTitleText" : "我的订单" | 79 | "path" : "pages/myOrderPaying/myOrderPaying", |
| 80 | } | 80 | "style" : { |
| 81 | }, | 81 | "navigationBarTitleText" : "我的订单" |
| 82 | { | 82 | } |
| 83 | "path": "pages/detailsChoiceArgs/detailsChoiceArgs", | 83 | }, |
| 84 | "style":{ | 84 | { |
| 85 | "navigationBarTitleText" : "镜片名称名称" | 85 | "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", |
| 86 | } | 86 | "style" : { |
| 87 | }, | 87 | "navigationBarTitleText" : "镜片名称名称" |
| 88 | { | 88 | } |
| 89 | "path" : "pages/detailStandard/detailStandard_sun", | 89 | }, |
| 90 | "style": { | 90 | { |
| 91 | "navigationBarTitleText": "太阳镜选购页" | 91 | "path" : "pages/detailStandard/detailStandard_sun", |
| 92 | } | 92 | "style" : { |
| 93 | }, | 93 | "navigationBarTitleText" : "太阳镜选购页" |
| 94 | { | 94 | } |
| 95 | "path" : "pages/detailStandard/detailStandard_k", | 95 | }, |
| 96 | "style": { | 96 | { |
| 97 | "navigationBarTitleText": "镜框选购页" | 97 | "path" : "pages/detailStandard/detailStandard_k", |
| 98 | } | 98 | "style" : { |
| 99 | } | 99 | "navigationBarTitleText" : "镜框选购页" |
| 100 | 100 | } | |
| 101 | ], | 101 | }, |
| 102 | "globalStyle": { | 102 | { |
| 103 | "navigationBarTextStyle": "black", | 103 | "path" : "pages/detailsChoiceArgs/compoents/MyCollapse", |
| 104 | "navigationBarTitleText": "uni-app", | 104 | "style" : {} |
| 105 | "navigationBarBackgroundColor": "#F8F8F8", | 105 | } |
| 106 | "backgroundColor": "#F8F8F8" | 106 | ], |
| 107 | }, | 107 | "globalStyle" : { |
| 108 | "tabBar": { | 108 | "navigationBarTextStyle" : "black", |
| 109 | "color": "#C0C4CC", | 109 | "navigationBarTitleText" : "uni-app", |
| 110 | "selectedColor": "#fa436a", | 110 | "navigationBarBackgroundColor" : "#F8F8F8", |
| 111 | "borderStyle": "black", | 111 | "backgroundColor" : "#F8F8F8" |
| 112 | "backgroundColor": "#ffffff", | 112 | }, |
| 113 | "list": [{ | 113 | "tabBar" : { |
| 114 | "pagePath": "pages/index/index", | 114 | "color" : "#C0C4CC", |
| 115 | "iconPath": "static/tab-home.png", | 115 | "selectedColor" : "#fa436a", |
| 116 | "selectedIconPath": "static/tab-home-current.png", | 116 | "borderStyle" : "black", |
| 117 | "text": "首页" | 117 | "backgroundColor" : "#ffffff", |
| 118 | }, | 118 | "list" : [ |
| 119 | { | 119 | { |
| 120 | "pagePath": "pages/cart/cart", | 120 | "pagePath" : "pages/index/index", |
| 121 | "iconPath": "static/tab-cart.png", | 121 | "iconPath" : "static/tab-home.png", |
| 122 | "selectedIconPath": "static/tab-cart-current.png", | 122 | "selectedIconPath" : "static/tab-home-current.png", |
| 123 | "text": "购物车" | 123 | "text" : "首页" |
| 124 | }, | 124 | }, |
| 125 | { | 125 | { |
| 126 | "pagePath": "pages/user/user", | 126 | "pagePath" : "pages/cart/cart", |
| 127 | "iconPath": "static/tab-my.png", | 127 | "iconPath" : "static/tab-cart.png", |
| 128 | "selectedIconPath": "static/tab-my-current.png", | 128 | "selectedIconPath" : "static/tab-cart-current.png", |
| 129 | "text": "我的" | 129 | "text" : "购物车" |
| 130 | } | 130 | }, |
| 131 | ] | 131 | { |
| 132 | }, | 132 | "pagePath" : "pages/user/user", |
| 133 | "condition" : { //模式配置，仅开发期间生效 | 133 | "iconPath" : "static/tab-my.png", |
| 134 | "current": 0, //当前激活的模式(list 的索引项) | 134 | "selectedIconPath" : "static/tab-my-current.png", |
| 135 | "list": [ | 135 | "text" : "我的" |
| 136 | { | 136 | } |
| 137 | "name": "", //模式名称 | 137 | ] |
| 138 | "path": "", //启动页面，必选 | 138 | }, |
| 139 | "query": "" //启动参数，在页面的onLoad函数里面得到 | 139 | "condition" : { |
| 140 | } | 140 | //模式配置，仅开发期间生效 |
| 141 | ] | 141 | "current" : 0, //当前激活的模式(list 的索引项) |
| 142 | } | 142 | "list" : [ |
| 143 | } | 143 | { |
| 144 | "name" : "", //模式名称 | ||
| 145 | "path" : "", //启动页面，必选 | ||
| 146 | "query" : "" //启动参数，在页面的onLoad函数里面得到 | ||
| 147 | } | ||
| 148 | ] | ||
| 149 | } | ||
| 150 | } | ||
| 144 | 151 |
src/pages/cart/cart.vue
| 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
| 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
| 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">左 (OD)</text> | 44 | <text class="p13">左 (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">右 (OS)</text> | 49 | <text class="p13">右 (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">左 (OD)</text> | 62 | <text class="p13">左 (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">右 (OS)</text> | 67 | <text class="p13">右 (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">左 (OD)</text> | 80 | <text class="p13">左 (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">右 (OS)</text> | 85 | <text class="p13">右 (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">左 (OD)</text> | 98 | <text class="p13">左 (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">右 (OS)</text> | 103 | <text class="p13">右 (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">年 (Y)</text> | 115 | <text class="p13-date">年 (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">月 (M)</text> | 120 | <text class="p13-date">月 (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">日 (D)</text> | 125 | <text class="p13-date">日 (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;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 153 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 154 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 154 | <text>右 {{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
| 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 | onLoad: function() { | 58 | onLoad: function() { |
| 60 | store.dispatch('myOrder/getList', { | 59 | store.dispatch('myOrder/getList', { |
| 61 | uid: "1", | 60 | uid: "1", |
| 62 | way: "0", | 61 | way: "0", |
| 63 | }); | 62 | }); |
| 64 | }, | 63 | }, |
| 65 | computed: { | 64 | computed: { |
| 66 | orderList() { | 65 | orderList() { |
| 67 | console.log('orderList', this.$store.state.myOrder.orderlist); | 66 | console.log('orderList', this.$store.state.myOrder.orderlist); |
| 68 | return this.$store.state.myOrder.orderlist; | 67 | return this.$store.state.myOrder.orderlist; |
| 69 | } | 68 | } |
| 70 | }, | 69 | }, |
| 71 | methods:{ | 70 | methods:{ |
| 72 | onClickItem(e) { | 71 | onClickItem(e) { |
| 73 | if (this.current !== e) { | 72 | if (this.current !== e) { |
| 74 | this.current = e; | 73 | this.current = e; |
| 75 | } | 74 | } |
| 76 | } | 75 | } |
| 77 | } | 76 | } |
| 78 | } | 77 | } |
| 79 | </script> | 78 | </script> |
| 80 | 79 | ||
| 81 | <style lang="scss"> | 80 | <style lang="scss"> |
| 82 | .content { | 81 | .content { |
| 83 | display: flex; | 82 | display: flex; |
| 84 | flex-direction: column; | 83 | flex-direction: column; |
| 85 | align-items: center; | 84 | align-items: center; |
| 86 | background-color: #F7F6F6; | 85 | background-color: #F7F6F6; |
| 87 | min-height: 100vh; | 86 | min-height: 100vh; |
| 88 | .header{ | 87 | .header{ |
| 89 | background-color: #ffffff; | 88 | background-color: #ffffff; |
| 90 | width: 100%; | 89 | width: 100%; |
| 91 | height: 232rpx; | 90 | height: 232rpx; |
| 92 | padding: 40rpx 40rpx 36rpx 40rpx; | 91 | padding: 40rpx 40rpx 36rpx 40rpx; |
| 93 | box-sizing: border-box; | 92 | box-sizing: border-box; |
| 94 | position: fixed; | 93 | position: fixed; |
| 95 | top: 0; | 94 | top: 0; |
| 96 | left: 0; | 95 | left: 0; |
| 97 | .searchBar { | 96 | .searchBar { |
| 98 | width: 670rpx; | 97 | width: 670rpx; |
| 99 | display: flex; | 98 | display: flex; |
| 100 | justify-content: center; | 99 | justify-content: center; |
| 101 | align-items: center; | 100 | align-items: center; |
| 102 | box-sizing: border-box; | 101 | box-sizing: border-box; |
| 103 | padding: 0rpx 16rpx; | 102 | padding: 0rpx 16rpx; |
| 104 | border: 1px solid #FF6B4A; | 103 | border: 1px solid #FF6B4A; |
| 105 | border-radius: 8rpx; | 104 | border-radius: 8rpx; |
| 106 | background-color: #ffffff; | 105 | background-color: #ffffff; |
| 107 | } | 106 | } |
| 108 | 107 | ||
| 109 | .screenBar{ | 108 | .screenBar{ |
| 110 | width: 670rpx; | 109 | width: 670rpx; |
| 111 | height: 110rpx; | 110 | height: 110rpx; |
| 112 | display: flex; | 111 | display: flex; |
| 113 | flex-direction: row; | 112 | flex-direction: row; |
| 114 | justify-content: space-between; | 113 | justify-content: space-between; |
| 115 | align-items: center; | 114 | align-items: center; |
| 116 | color: #333333; | 115 | color: #333333; |
| 117 | font-size: 32rpx; | 116 | font-size: 32rpx; |
| 118 | } | 117 | } |
| 119 | .screenItem{ | 118 | .screenItem{ |
| 120 | height: 50rpx; | 119 | height: 50rpx; |
| 121 | font-size: 32rpx; | 120 | font-size: 32rpx; |
| 122 | color: #333333; | 121 | color: #333333; |
| 123 | display: flex; | 122 | display: flex; |
| 124 | justify-content: center; | 123 | justify-content: center; |
| 125 | align-items: center; | 124 | align-items: center; |
| 126 | transition:all 0.2s; | 125 | transition:all 0.2s; |
| 127 | } | 126 | } |
| 128 | .active{ | 127 | .active{ |
| 129 | // font-size: 34rpx; | 128 | // font-size: 34rpx; |
| 130 | color: #EC5D3B; | 129 | color: #EC5D3B; |
| 131 | } | 130 | } |
| 132 | .searchIpt { | 131 | .searchIpt { |
| 133 | height: 68rpx; | 132 | height: 68rpx; |
| 134 | width: 670rpx; | 133 | width: 670rpx; |
| 135 | padding: 16rpx; | 134 | padding: 16rpx; |
| 136 | font-size: 28rpx; | 135 | font-size: 28rpx; |
| 137 | box-sizing: border-box; | 136 | box-sizing: border-box; |
| 138 | } | 137 | } |
| 139 | } | 138 | } |
| 140 | .orderList{ | 139 | .orderList{ |
| 141 | margin-top: 232rpx; | 140 | margin-top: 232rpx; |
| 142 | } | 141 | } |
| 143 | .footer{ | 142 | .footer{ |
| 144 | font-size: 14px; | 143 | font-size: 14px; |
| 145 | color: #B8B8B8; | 144 | color: #B8B8B8; |
| 146 | margin: 40rpx 0; | 145 | margin: 40rpx 0; |
| 147 | } | 146 | } |
| 148 | } | 147 | } |
| 149 | </style> | 148 | </style> |
| 150 | 149 |