You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
2.3 KiB
129 lines
2.3 KiB
<template>
|
|
<view :class="{ line: line, weight: weight }"
|
|
:style="{color:color, fontFamily: SemiBold ? 'SemiBold' : 'Regular'}"
|
|
class="base-money">
|
|
<text v-show="preFix" class="preFix" :style="{'font-size': preFixSize + 'rpx','color':textColor}">{{preFix}}</text>
|
|
<text class="symbol" :style="{'font-size': symbolSize +'rpx'}">￥</text><text class="integer"
|
|
:style="{'font-size': integerSize +'rpx'}">{{ integer }}</text>
|
|
<text v-if="digits && showDigits" class="decimal"
|
|
:style="{'font-size': decimalSize +'rpx'}">.{{ decimal }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BaseMoney',
|
|
props: {
|
|
// 小数位数，为0则不显示
|
|
digits: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
money: {
|
|
type: String | Number,
|
|
default: ""
|
|
},
|
|
// 删除线
|
|
line: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 粗体
|
|
weight: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
color:{
|
|
type: String,
|
|
default: 'var(--view-theme)'
|
|
},
|
|
textColor:{
|
|
type: String,
|
|
default: '#999'
|
|
},
|
|
symbolSize: {
|
|
type: String,
|
|
default: '20'
|
|
},
|
|
integerSize: {
|
|
type: String,
|
|
default: '26'
|
|
},
|
|
decimalSize: {
|
|
type: String,
|
|
default: '24'
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
preFix:{
|
|
type: String,
|
|
default: ''
|
|
},
|
|
preFixSize:{
|
|
type: String,
|
|
default: '24'
|
|
},
|
|
SemiBold:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
isCoupon:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
integer: 0,
|
|
decimal: 0
|
|
};
|
|
},
|
|
watch: {
|
|
money: {
|
|
handler(newValue, oldValue) {
|
|
let value = Number(newValue).toFixed(this.digits);
|
|
value = value.split('.');
|
|
this.integer = value[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
if (value[1]) {
|
|
this.decimal = value[1];
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
computed:{
|
|
showDigits(){
|
|
if(this.isCoupon){
|
|
if(this.decimal == '00') return false
|
|
}else{
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.base-money {
|
|
display: inline-block;
|
|
&.line {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
&.weight {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.preFix{
|
|
font-weight: 500 !important;
|
|
font-family: PingFang SC-Medium, PingFang SC !important;
|
|
}
|
|
.SemiBold{
|
|
font-family:'SemiBold';
|
|
}
|
|
.Regular{
|
|
font-family:'Regular';
|
|
}
|
|
</style>
|
|
|