lookcommon_course/pages_tool/pages/figure/figure.vue

<template>
    <view class="flgure-box">
        <view class="pages-box">
            <view class="fs32 fc99">请输入您的身高体重</view>
            <view class="inp-box">
                <input @input="heightFun" class="inp" placeholder="身高/cm" placeholderStyle="font-size:30rpx" type="digit" />
                <view class="inpimg">
                    <image class="pagesimg" src="@/static/images/height.png"></image>
                </view>
            </view>
            <view class="inp-box">
                <input @input="weightFun" class="inp" placeholder="体重/kg" placeholderStyle="font-size:30rpx" type="digit" />
                <view class="inpimg">
                    <image class="pagesimg" src="@/static/images/weight.png"></image>
                </view>
            </view>
            <view class="btn-box">
                <button @tap="getdata" class="btn fs32">计 算</button>
            </view>
        </view>
        <view :class="'det-box ' + (show ? '' : 'dp-n')">
            <view class="pg-t fs36 fc99">计算结果</view>
            <view class="pglist fc99 figure">
                <image class="figureimg" :src="res.img"></image>
            </view>
            <view class="pglist fc99">
                <view class="pg-l fs32">测试结果：</view>
                <view class="pg-r fs32">{{ res.msg }}</view>
            </view>
            <view class="pglist fc99">
                <view class="pg-l fs32">理想体重：</view>
                <view class="pg-r fs32">{{ res.ideal }}</view>
            </view>
            <view class="pglist fc99 bd-n">
                <view class="pg-l fs32">BMI：</view>
                <view class="pg-r fs32">{{ res.bmi }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            height: '',
            weight: '',
            show: false,
            res: {
                img: '',
                msg: '',
                ideal: '',
                bmi: ''
            }
        };
    },
    onShareAppMessage: function () {},
    methods: {
        heightFun: function (i) {
			this.height=i.detail.value;
        },

        weightFun: function (i) {
			this.weight=i.detail.value;
        },

        getdata: function (i) {
            uni.showLoading({
                title: '计算中'
            });
            var e = this.height;
            var t = this.weight;
            if ('' == e || '' == t) {
                uni.showToast({
                    title: '请输入身高体重',
                    icon: 'none',
                    
                    duration: 2000
                });
                return false;
            }
            if (isNaN(e) || isNaN(t)) {
                uni.showToast({
                    title: '请正确输入！',
                    icon: 'none',
                   
                    duration: 2000
                });
            } else {
                var a = 0.9 * (e - 100);
                var s = t / ((e / 100) * (e / 100));
                if (s < 18.5) {
					this.show=true;
					this.res={
                            img: '/static/images/bq4.png',
                            msg: '你的体重太轻,要多吃点哟!',
                            ideal: a,
                            bmi: s
                        };
					
                } else {
                    if (s >= 18.5 && s < 25) {
						this.show=true;
						this.res={
                                img: '/static/images/bq1.png',
                                msg: '亲,你的体重正常,要继续保持哟',
                                ideal: a,
                                bmi: s
                            };
                    } else {
						
						if(s >= 25 && s < 30){
							this.show=true;
							this.res={
							          img: '/static/images/bq3.png',
							          msg: '亲,您的体重过重,要减肥了!',
							          ideal: a,
							          bmi: s
							      };
						}else{
							this.show=true;
							this.res={
								  img: '/static/images/bq2.png',
								  msg: '亲,你确实要减肥了!',
								  ideal: a,
								  bmi: s
							 }
						}
						
                    }
                }
                uni.hideLoading();
            }
        }
    }
};
</script>
<style>
@import './figure.css';
</style>