mali-applet-ui 0.0.4 → 0.0.7

package/components/ml-amount-input/ml-amount-input.vue

@@ -0,0 +1,115 @@
+<template>
+	<input class="ml-amount-input" v-model="inpVal" type="text" :class="{'is-right': align === 'right', 'is-border': border}" :placeholder="placeholder" :maxlength="maxLength" :disabled="disabled" @blur="blurEvent" @input="inputEvent" />
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import { toNumMoneyToChinese } from '../../utils'
+
+export default {
+	name: 'ml-amount-input',
+	props: {
+		value: String,
+		align: String,
+		border: Boolean,
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		max: {
+			type: [Number, String],
+			default: 9999999999999
+		},
+		maxLength: {
+			type: Number,
+			default: 12
+		},
+		placeholder: {
+			type: String,
+			default: '请输入'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data () {
+		return {
+			inpVal: ''
+		}
+	},
+	computed: {
+		currAmountNum () {
+			return this.value === '' ? '' : Number(this.value || 0)
+		},
+		currAmountLabel () {
+			return this.currAmountNum === '' ? '无' : toNumMoneyToChinese(this.currAmountNum)
+		},
+		minNum () {
+			if (XEUtils.isNumber(this.min) || this.min) {
+			return Number(this.min || 0)
+			}
+			return null
+		},
+		maxNum () {
+			if (XEUtils.isNumber(this.max) || this.max) {
+			return Number(this.max)
+			}
+			return null
+		}
+	},
+	watch: {
+		value (val) {
+			this.inpVal = val
+		},
+		min () {
+			this.checkValue()
+		},
+		max () {
+			this.checkValue()
+		}
+	},
+	created () {
+		this.inpVal = this.value
+	},
+	methods: {
+		checkValue  () {
+			if (this.minNum !== null && (Number(this.value) < this.minNum)) {
+			this.$emit('input', this.minNum)
+			return { status: false, value: this.minNum }
+			}
+			if (this.maxNum !== null && (Number(this.value) > this.maxNum)) {
+			this.$emit('input', this.maxNum)
+			return { status: false, value: this.maxNum }
+			}
+			const val = XEUtils.floor(Number(this.value), 2)
+			if (`${val}` !== `${this.value}`) {
+				this.$emit('input', val)
+				return { status: false, value: val }
+			}
+			return { status: true, value: 0 }
+		},
+		blurEvent () {
+			this.checkValue()
+			this.$emit('blur')
+		},
+		inputEvent () {
+			this.$emit('input', this.inpVal)
+			this.$emit('change', this.inpVal)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.ml-amount-input {
+	font-size: $uni-font-size-base;
+	padding: 0 10rpx;
+	&.is-right {
+		text-align: right;
+	}
+	&.is-border {
+    border: 1px solid #e5e5e5;
+	}
+}
+</style>

package/components/ml-amount-text/ml-amount-text.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="ml-amount-text">
+		<slot name="symbol">
+			<view v-if="symbol" class="amount-flag">￥</view>
+		</slot>
+		<slot>
+			<view class="amount-num">{{ amountLabel }}</view>
+		</slot>
+		<slot name="unit">
+			<view v-if="unit" class="amount-unit">{{ amountUnit }}</view>
+		</slot>
+	</view>
+</template>
+
+<script>
+import { toAmountString, toWanAmountString } from '../../utils'
+
+export default {
+	name: 'MlAmountText',
+	props: {
+		value: [String, Number],
+		simplify: Boolean,
+		symbol: {
+			type: Boolean,
+			default: true
+		},
+		unit: {
+			type: Boolean,
+			default: false
+		},
+	},
+	computed: {
+		amountUnit () {
+			if (this.simplify) {
+				return '万元'
+			}
+			return '元'
+		},
+		amountLabel () {
+			if (this.simplify) {
+				return toWanAmountString(this.value)
+			}
+			return toAmountString(this.value)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.ml-amount-text {
+	display: inline;
+	.amount-flag,
+	.amount-num,
+	.amount-unit {
+		display: inline;
+	}
+	.amount-unit {
+		font-size: 0.65em;
+		color: rgba(39, 42, 48, 0.45);
+	}
+}
+</style>