Showing
4 changed files
with
1 additions
and
394 deletions
| 1 | -function init(ctx) { | ||
| 2 | - let data = {}; | ||
| 3 | - let view = ctx.data.pickerData.view; | ||
| 4 | - | ||
| 5 | - data.sourceType = ctx.data.pickerData.sourceType; | ||
| 6 | - data.view = view; | ||
| 7 | - ctx.setData({ | ||
| 8 | - pickerData: data | ||
| 9 | - }); | ||
| 10 | -} | ||
| 11 | - | ||
| 12 | -function pickerShow(ctx) { | ||
| 13 | - let data = ctx.data.pickerData; | ||
| 14 | - | ||
| 15 | - data.view.isShow = !data.view.isShow; | ||
| 16 | - ctx.setData({ | ||
| 17 | - pickerData: data | ||
| 18 | - }); | ||
| 19 | -} | ||
| 20 | - | ||
| 21 | -function pickerHide(ctx) { | ||
| 22 | - let data = ctx.data.pickerData; | ||
| 23 | - | ||
| 24 | - data.view.isShow = false; | ||
| 25 | - ctx.setData({ | ||
| 26 | - pickerData: data | ||
| 27 | - }); | ||
| 28 | -} | ||
| 29 | - | ||
| 30 | -module.exports = { | ||
| 31 | - init: init, | ||
| 32 | - pickerShow: pickerShow, | ||
| 33 | - pickerHide: pickerHide | ||
| 34 | -}; |
| 1 | -<template name="Picker"> | ||
| 2 | - <view class="picker-bg" id="picker-bg" catchtap="hidePicker" disable-scroll='true' catchtouchmove="catchtouchmove" | ||
| 3 | - style="display:{{pickerData.view.isShow ? 'block':'none'}}"> | ||
| 4 | - <view class="picker-view"> | ||
| 5 | - <view class="pickerGoodsInfo"> | ||
| 6 | - <image class="img" src="{{pickerData.view.image}}"> | ||
| 7 | - </image> | ||
| 8 | - <image class="placeholder"></image> | ||
| 9 | - <view class="goodPrice"> | ||
| 10 | - <text class="realPrice"> | ||
| 11 | - {{pickerData.view.goodPrice==='0'?pickerData.view.price:pickerData.view.goodPrice}} | ||
| 12 | - </text> | ||
| 13 | - <text class="price" style="display:{{pickerData.view.goodPrice==='0'?'none':''}}"> | ||
| 14 | - {{pickerData.view.price}} | ||
| 15 | - </text> | ||
| 16 | - </view> | ||
| 17 | - </view> | ||
| 18 | - <view class="seperatorLine"></view> | ||
| 19 | - <scroll-view scroll-y="true" style="height: 450rpx;"> | ||
| 20 | - <view class="goodsColor"> | ||
| 21 | - <text class="title">颜色</text> | ||
| 22 | - <view class="list"> | ||
| 23 | - <block wx:for="{{pickerData.view.goodsList}}" wx:key="unique"> | ||
| 24 | - <view id="{{index}}" class="{{item.selected?'selectedItem':'normalItem'}}" | ||
| 25 | - bindtap="chooseColor" | ||
| 26 | - data-key="{{item}}">{{item.factory_goods_name}} | ||
| 27 | - </view> | ||
| 28 | - </block> | ||
| 29 | - </view> | ||
| 30 | - </view> | ||
| 31 | - <view class="seperatorLine"></view> | ||
| 32 | - <view class="goodsSize"> | ||
| 33 | - <text class="title">尺码</text> | ||
| 34 | - <view class="list"> | ||
| 35 | - <block wx:for="{{pickerData.view.sizeList}}" wx:key="unique"> | ||
| 36 | - <view id="{{index}}" | ||
| 37 | - class="{{ item.enable?(item.selected?'selectedItem':'normalItem'):'disableItem'}}" | ||
| 38 | - bindtap="chooseSize" data-key="{{item}}">{{item.size_name}} | ||
| 39 | - </view> | ||
| 40 | - </block> | ||
| 41 | - </view> | ||
| 42 | - </view> | ||
| 43 | - <view class="seperatorLine"></view> | ||
| 44 | - <view wx:if='{{!pickerData.view.should_hidden_number_view}}' class="goodsCount"> | ||
| 45 | - <text class="title">数量</text> | ||
| 46 | - <view class="stepper"> | ||
| 47 | - <view bindtap="bindMinus" class='reduceNumberBtn'> | ||
| 48 | - <image class='reduceImage' | ||
| 49 | - src='{{pickerData.view.minusButtonEnable ? "../../../static/images/jian_h@2x.png" : "../../../static/images/jian_disable@2x.png"}}'></image> | ||
| 50 | - </view> | ||
| 51 | - <view class='buyNumberText'> | ||
| 52 | - {{pickerData.view.buyNumber}} | ||
| 53 | - </view> | ||
| 54 | - <view bindtap="bindPlus" class='addNumberBtn'> | ||
| 55 | - <image class='addImage' | ||
| 56 | - src='{{pickerData.view.plusButtonEnable ? "../../../static/images/and_normal@2x.png" : "../../../static/images/and_h@2x.png"}}'></image> | ||
| 57 | - </view> | ||
| 58 | - </view> | ||
| 59 | - <view wx:if="{{pickerData.view.isSoldOutSoon}}" class='soldSoonOut'> | ||
| 60 | - 即将售罄 | ||
| 61 | - </view> | ||
| 62 | - <view wx:if="{{pickerData.view.buy_limit_number}}" class='soldSoonOut'> | ||
| 63 | - 限购{{pickerData.view.buy_limit_number}}件 | ||
| 64 | - </view> | ||
| 65 | - <view wx:if="{{pickerData.view.bundle_count}}" class='soldSoonOut'> | ||
| 66 | - {{pickerData.view.bundle_count}}件起售 | ||
| 67 | - </view> | ||
| 68 | - </view> | ||
| 69 | - </scroll-view> | ||
| 70 | - | ||
| 71 | - <view wx:if="{{pickerData.sourceType == 'goodsDetail' && pickerData.view.buyButtonEnable}}" | ||
| 72 | - class="{{pickerData.view.buyButtonEnable?'buyButton':'buyButtonDisable'}}" bindtap="goPayment" | ||
| 73 | - data-type='{{pickerData}}'> | ||
| 74 | - <text class="title">确定</text> | ||
| 75 | - </view> | ||
| 76 | - <view wx:if="{{pickerData.sourceType == 'goodsDetail' && !pickerData.view.buyButtonEnable}}" | ||
| 77 | - class="{{pickerData.view.buyButtonEnable?'buyButton':'buyButtonDisable'}}" data-type='{{pickerData}}'> | ||
| 78 | - <text class="title">已售罄</text> | ||
| 79 | - </view> | ||
| 80 | - </view> | ||
| 81 | - </view> | ||
| 82 | -</template> |
| 1 | -.picker-bg{ | ||
| 2 | - position: fixed; | ||
| 3 | - z-index: 999; | ||
| 4 | - left: 0; | ||
| 5 | - bottom: 0; | ||
| 6 | - width: 100%; | ||
| 7 | - height: 100%; | ||
| 8 | - margin: 0; | ||
| 9 | - border-top: 1px #eee solid; | ||
| 10 | - background-color: rgba(0, 0, 0, 0.2); | ||
| 11 | -} | ||
| 12 | - | ||
| 13 | -.picker-bg .picker-view{ | ||
| 14 | - position: fixed; | ||
| 15 | - z-index: 9999; | ||
| 16 | - width:100%; | ||
| 17 | - height: 800rpx; | ||
| 18 | - left:0; | ||
| 19 | - bottom: 0; | ||
| 20 | - background-color: white; | ||
| 21 | -} | ||
| 22 | - | ||
| 23 | -.picker-view .pickerGoodsInfo{ | ||
| 24 | - display: flex; | ||
| 25 | - margin-bottom: 50rpx; | ||
| 26 | -} | ||
| 27 | - | ||
| 28 | -.picker-view .pickerGoodsInfo .img{ | ||
| 29 | - position: absolute; | ||
| 30 | - top: -30rpx; | ||
| 31 | - margin-left: 30rpx; | ||
| 32 | - width: 164rpx; | ||
| 33 | - height: 228rpx; | ||
| 34 | - border:1rpx solid #e0e0e0; | ||
| 35 | - border-radius: 5rpx; | ||
| 36 | - /*background-color: red;*/ | ||
| 37 | -} | ||
| 38 | - | ||
| 39 | -.picker-view .pickerGoodsInfo .placeholder{ | ||
| 40 | - margin-left: 30rpx; | ||
| 41 | - width: 164rpx; | ||
| 42 | - height: 180rpx; | ||
| 43 | -} | ||
| 44 | - | ||
| 45 | -.picker-view .pickerGoodsInfo .goodPrice{ | ||
| 46 | - display: flex; | ||
| 47 | - width: 500 rpx; | ||
| 48 | - margin-left: 20rpx; | ||
| 49 | - margin-top: 20rpx; | ||
| 50 | - height: 70rpx; | ||
| 51 | -} | ||
| 52 | - | ||
| 53 | -.picker-view .pickerGoodsInfo .goodPrice .realPrice{ | ||
| 54 | - padding-left: 25rpx; | ||
| 55 | - color: #d0021b; | ||
| 56 | - line-height: 70rpx; | ||
| 57 | - font-size: 28rpx; | ||
| 58 | -} | ||
| 59 | - | ||
| 60 | -.picker-view .pickerGoodsInfo .goodPrice .price{ | ||
| 61 | - padding-left: 15rpx; | ||
| 62 | - color: #b0b0b0; | ||
| 63 | - text-decoration: line-through; | ||
| 64 | - line-height: 70rpx; | ||
| 65 | - font-size: 28rpx; | ||
| 66 | -} | ||
| 67 | - | ||
| 68 | -.picker-view .goodsColor{ | ||
| 69 | - margin:30rpx; | ||
| 70 | - display: flex; | ||
| 71 | - flex-direction: row; | ||
| 72 | -} | ||
| 73 | - | ||
| 74 | -.picker-view .goodsColor .title{ | ||
| 75 | - font-size: 28rpx; | ||
| 76 | - color: #444444; | ||
| 77 | - text-align: left; | ||
| 78 | - padding: 20rpx 0; | ||
| 79 | - width: 60rpx; | ||
| 80 | - font-weight: bold; | ||
| 81 | - white-space: nowrap; | ||
| 82 | -} | ||
| 83 | - | ||
| 84 | -.picker-view .goodsColor .list{ | ||
| 85 | - display: flex; | ||
| 86 | - flex-direction: row; | ||
| 87 | - flex-wrap: wrap; | ||
| 88 | - padding-left: 10rpx; | ||
| 89 | -} | ||
| 90 | - | ||
| 91 | -.normalItem{ | ||
| 92 | - font-size: 28rpx; | ||
| 93 | - text-align: center; | ||
| 94 | - border: 1px solid #444; | ||
| 95 | - margin: 5px; | ||
| 96 | - padding: 5px; | ||
| 97 | - border-radius: 3px; | ||
| 98 | - min-width: 40rpx; | ||
| 99 | -} | ||
| 100 | - | ||
| 101 | - .disableItem{ | ||
| 102 | - font-size: 28rpx; | ||
| 103 | - text-align: center; | ||
| 104 | - border: 1px solid #e0e0e0; | ||
| 105 | - margin: 5px; | ||
| 106 | - padding: 5px; | ||
| 107 | - border-radius: 3px; | ||
| 108 | - color: #e0e0e0; | ||
| 109 | - min-width: 40rpx; | ||
| 110 | -} | ||
| 111 | - | ||
| 112 | -.selectedItem{ | ||
| 113 | - font-size: 28rpx; | ||
| 114 | - text-align: center; | ||
| 115 | - border: 1px solid #d0021b; | ||
| 116 | - margin: 5px; | ||
| 117 | - padding: 5px; | ||
| 118 | - border-radius: 3px; | ||
| 119 | - color: white; | ||
| 120 | - background-color: #d0021b; | ||
| 121 | - min-width: 40rpx; | ||
| 122 | -} | ||
| 123 | - | ||
| 124 | -.picker-view .goodsSize{ | ||
| 125 | - margin: 30rpx; | ||
| 126 | - display: flex; | ||
| 127 | - flex-direction: row; | ||
| 128 | -} | ||
| 129 | - | ||
| 130 | -.picker-view .goodsSize .title{ | ||
| 131 | - font-size: 28rpx; | ||
| 132 | - color: #444444; | ||
| 133 | - text-align: left; | ||
| 134 | - width: 60rpx; | ||
| 135 | - padding: 20rpx 0; | ||
| 136 | - font-weight: bold; | ||
| 137 | - white-space: nowrap; | ||
| 138 | -} | ||
| 139 | - | ||
| 140 | -.picker-view .goodsSize .list{ | ||
| 141 | - display: flex; | ||
| 142 | - flex-direction: row; | ||
| 143 | - flex-wrap: wrap; | ||
| 144 | - margin-left: 10rpx; | ||
| 145 | - flex: 90%; | ||
| 146 | -} | ||
| 147 | - | ||
| 148 | -.picker-view .goodsSize .list .item{ | ||
| 149 | - font-size: 28rpx; | ||
| 150 | - text-align: center; | ||
| 151 | - border: 1px solid #444; | ||
| 152 | - margin: 5px; | ||
| 153 | - padding: 5px; | ||
| 154 | - border-radius: 3px; | ||
| 155 | -} | ||
| 156 | - | ||
| 157 | -.picker-view .goodsCount{ | ||
| 158 | - display: flex; | ||
| 159 | - margin: 30rpx; | ||
| 160 | - flex-direction: row; | ||
| 161 | - flex-wrap: wrap; | ||
| 162 | - float: left; | ||
| 163 | - align-items: center; | ||
| 164 | -} | ||
| 165 | - | ||
| 166 | -.picker-view .goodsCount .title{ | ||
| 167 | - font-size: 28rpx; | ||
| 168 | - color: #444444; | ||
| 169 | - text-align: left; | ||
| 170 | - padding: 20rpx 0; | ||
| 171 | - font-weight: bold; | ||
| 172 | - width: 60rpx; | ||
| 173 | -} | ||
| 174 | - | ||
| 175 | -.stepper { | ||
| 176 | - border: 2rpx solid #e0e0e0; | ||
| 177 | - border-radius: 6rpx; | ||
| 178 | - width: 240rpx; | ||
| 179 | - height: 60rpx; | ||
| 180 | - margin-left: 20rpx; | ||
| 181 | - justify-content: space-between; | ||
| 182 | - display: flex; | ||
| 183 | - align-items: center; | ||
| 184 | - flex-direction: row; | ||
| 185 | -} | ||
| 186 | - | ||
| 187 | -.buyButton{ | ||
| 188 | - position: absolute; | ||
| 189 | - width: 100%; | ||
| 190 | - height: 100rpx; | ||
| 191 | - bottom: 0; | ||
| 192 | - background: #d0021b; | ||
| 193 | - justify-content: space-around; | ||
| 194 | -} | ||
| 195 | - | ||
| 196 | -.buyButton .title{ | ||
| 197 | - position: absolute; | ||
| 198 | - color: white; | ||
| 199 | - font-size: 34rpx; | ||
| 200 | - line-height: 50rpx; | ||
| 201 | - width: 100%; | ||
| 202 | - text-align: center; | ||
| 203 | - height: 70rpx; | ||
| 204 | - bottom: 0; | ||
| 205 | -} | ||
| 206 | - | ||
| 207 | -.buyButtonDisable{ | ||
| 208 | - position: absolute; | ||
| 209 | - width: 100%; | ||
| 210 | - height: 100rpx; | ||
| 211 | - bottom: 0; | ||
| 212 | - background: #b0b0b0; | ||
| 213 | - justify-content: space-around; | ||
| 214 | -} | ||
| 215 | - | ||
| 216 | -.buyButtonDisable .title{ | ||
| 217 | - position: absolute; | ||
| 218 | - color: white; | ||
| 219 | - font-size: 34rpx; | ||
| 220 | - line-height: 50rpx; | ||
| 221 | - width: 100%; | ||
| 222 | - text-align: center; | ||
| 223 | - height: 70rpx; | ||
| 224 | - bottom: 0; | ||
| 225 | -} | ||
| 226 | - | ||
| 227 | -.seperatorLine { | ||
| 228 | - /*position: absolute;*/ | ||
| 229 | - display: flex; | ||
| 230 | - width:100%; | ||
| 231 | - /*margin: 30rpx;*/ | ||
| 232 | - height:1rpx; | ||
| 233 | - background:#e0e0e0; | ||
| 234 | -} | ||
| 235 | - | ||
| 236 | - | ||
| 237 | -.reduceNumberBtn { | ||
| 238 | - width: 70rpx; | ||
| 239 | - height: 60rpx; | ||
| 240 | - display: flex; | ||
| 241 | - align-items: center; | ||
| 242 | - justify-content: center; | ||
| 243 | - border-right: solid 2rpx #e0e0e0; | ||
| 244 | -} | ||
| 245 | - | ||
| 246 | -.addNumberBtn { | ||
| 247 | - width: 70rpx; | ||
| 248 | - height: 60rpx; | ||
| 249 | - display: flex; | ||
| 250 | - align-items: center; | ||
| 251 | - justify-content: center; | ||
| 252 | - border-left: solid 2rpx #e0e0e0; | ||
| 253 | -} | ||
| 254 | - | ||
| 255 | -.buyNumberText{ | ||
| 256 | - font-family: PingFang-SC; | ||
| 257 | - font-size: 28rpx; | ||
| 258 | - text-align: center; | ||
| 259 | - color: #444444; | ||
| 260 | - width: 94rpx; | ||
| 261 | -} | ||
| 262 | - | ||
| 263 | -.reduceImage { | ||
| 264 | - width: 24rpx; | ||
| 265 | - height: 4rpx; | ||
| 266 | -} | ||
| 267 | - | ||
| 268 | -.addImage { | ||
| 269 | - width: 24rpx; | ||
| 270 | - height: 24rpx; | ||
| 271 | -} | ||
| 272 | - | ||
| 273 | -.soldSoonOut { | ||
| 274 | - font-size: 28rpx; | ||
| 275 | - color: #d0021b; | ||
| 276 | - margin-left: 20rpx; | ||
| 277 | -} |
-
Please register or login to post a comment