/**
|
* CNumerical - 数值显示
|
* @author Tevin
|
*/
|
|
<template>
|
<view class="c-numerical at-row at-row--wrap">
|
<view
|
class="at-col"
|
v-for="(item,index) in values2"
|
:key="index"
|
:class="'at-col-' + valueFlex[index] + ' ' + (!!item.onClick?'on-clickable':'')"
|
@tap="evt => item.onClick && item.onClick(item)"
|
>
|
<view
|
class="c-numerical-value"
|
:class="item.textType?('m-text-'+item.textType):''"
|
>
|
<text class="c-numerical-interger">{{item.integer}}</text>
|
<text
|
class="c-numerical-decimal"
|
:class="item.integer.length>4?'small':''"
|
v-if="item.decimal.length>0"
|
>.{{item.decimal}}</text>
|
<text class="c-numerical-more">»</text>
|
</view>
|
<view class="c-numerical-title">{{item.title}}</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import {} from 'taro-ui-vue';
|
import './cNumerical.scss';
|
|
export default {
|
name: 'CNumerical',
|
components: {},
|
props: {
|
// 数值集合，格式为：[{title, value, textType, onClick}]
|
values: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
computed: {
|
values2() {
|
return (
|
this.values.map(item => ({
|
...item,
|
integer: (item.value + '').split('.')[0] || '',
|
decimal: (item.value + '').split('.')[1] || '',
|
})) || []
|
);
|
},
|
valueFlex() {
|
return this.values.map((item, index) => {
|
const surplus = this.values.length % 3;
|
if (surplus === 0) {
|
return 4;
|
} else if (surplus === 1) {
|
if (this.values.length === 1) {
|
return 12;
|
} else {
|
if (index >= this.values.length - 4) {
|
return 6;
|
} else {
|
return 4;
|
}
|
}
|
} else if (surplus === 2) {
|
if (index >= this.values.length - 2) {
|
return 6;
|
} else {
|
return 4;
|
}
|
}
|
});
|
},
|
},
|
data() {
|
return {};
|
},
|
methods: {},
|
};
|
</script>
|
