| New file |
| | |
| | | <template> |
| | | <view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'"> |
| | | |
| | | <view class="count-less count-pub" :class="[myValue <= min ? 'light' : '']" @tap.stop="less"></view> |
| | | <view class="u-rela u-flex u-col-center"> |
| | | <view class="plc">{{myValue}}</view> |
| | | <input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input" /> |
| | | </view> |
| | | |
| | | <view class="count-add count-pub" :class="[myValue >= max ? 'light' : '']" @tap.stop="add"></view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | myValue: 0, |
| | | status: false |
| | | } |
| | | }, |
| | | props: { |
| | | // 计数器中的值 |
| | | value: { |
| | | type: Number, |
| | | default: 0 |
| | | }, |
| | | max: { |
| | | type: Number, |
| | | default: 10000 |
| | | }, |
| | | min: { |
| | | type: Number, |
| | | default: 0 |
| | | }, |
| | | type: { |
| | | type: String, |
| | | default: 'small' |
| | | } |
| | | }, |
| | | created() { |
| | | this.myValue = this.value |
| | | }, |
| | | watch: { |
| | | value(val) { |
| | | this.myValue = val |
| | | } |
| | | }, |
| | | methods: { |
| | | onBlue() { |
| | | if (+this.myValue >= this.max) { |
| | | this.myValue = this.max |
| | | this.status = false |
| | | } else if (+this.myValue <= this.min) { |
| | | this.myValue = this.min |
| | | this.status = false |
| | | } else { |
| | | this.status = true |
| | | this.myValue = +this.myValue |
| | | } |
| | | if (!isNaN(this.myValue)) { |
| | | this.$emit('handleCount', this.myValue) |
| | | } else { |
| | | this.$emit('handleCount', 0) |
| | | } |
| | | |
| | | }, |
| | | onFocus() { |
| | | this.status = true |
| | | }, |
| | | add() { |
| | | if (this.myValue >= this.max) { |
| | | this.status = false |
| | | this.myValue = this.max |
| | | uni.showToast({ |
| | | title: "已超过最大积分", |
| | | icon: "none" |
| | | }) |
| | | this.myValue = this.max |
| | | } else { |
| | | this.status = true |
| | | this.myValue++ |
| | | } |
| | | this.$emit('handleCount', this.myValue) |
| | | }, |
| | | less() { |
| | | if (this.myValue <= this.min) { |
| | | this.status = false |
| | | this.myValue = this.min |
| | | uni.showToast({ |
| | | title: "不能再少了", |
| | | icon: "none" |
| | | }) |
| | | this.myValue = this.min |
| | | } else { |
| | | this.status = true |
| | | this.myValue-- |
| | | } |
| | | this.$emit('handleCount', this.myValue) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .gray { |
| | | color: #555555; |
| | | } |
| | | |
| | | .light { |
| | | color: #C8C7CC; |
| | | } |
| | | |
| | | .count-box { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 60rpx; |
| | | } |
| | | |
| | | .count-pub { |
| | | width: 42rpx; |
| | | height: 42rpx; |
| | | } |
| | | |
| | | .count-less { |
| | | left: 0; |
| | | width: 42rpx; |
| | | height: 42rpx; |
| | | background: url(../../static/cart/icon_less.png) no-repeat; |
| | | background-size: 42rpx; |
| | | } |
| | | |
| | | .count-add { |
| | | right: 0; |
| | | width: 42rpx; |
| | | height: 42rpx; |
| | | background: url(../../static/cart/icon_add.png) no-repeat; |
| | | background-size: 42rpx; |
| | | } |
| | | |
| | | .count-less.light { |
| | | background: url(../../static/cart/icon_lessLight.png) no-repeat; |
| | | background-size: 42rpx; |
| | | } |
| | | |
| | | .count-add.light { |
| | | background: url(../../static/cart/icon_addLight.png) no-repeat; |
| | | background-size: 42rpx; |
| | | } |
| | | |
| | | .count-input { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 42rpx; |
| | | line-height: 42rpx; |
| | | padding: 0 10rpx; |
| | | box-sizing: border-box; |
| | | color: #333; |
| | | font-size: 30rpx; |
| | | text-align: center; |
| | | } |
| | | |
| | | .plc { |
| | | height: 42rpx; |
| | | line-height: 1; |
| | | text-align: center; |
| | | min-width: 70rpx; |
| | | font-size: 30rpx; |
| | | padding: 0 12rpx; |
| | | visibility: hidden; |
| | | } |
| | | </style> |