yicangzongtai_app_240321/pages/user/exchange.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="usable-integrate">
			<text class="usable-title">可用积分</text>
			<text class="usable-nums">{{ $addDecimals(integral_able , 8) }}</text>
		</view>
		<view class="box">
			<view class="usable-hint">
				<text>兑换余额</text>
				<service-charge title="兑换余额手续费为"></service-charge>
			</view>
			<view class="usable-input">
				<text class="iconfont3 usable-input-icon">&#xe619;</text>
				<!-- <text class="iconfont3 usable-hint-icon">&#xe619;</text> -->
				<u-input v-model="value" type="number" placeholder="请输入积分数量" :clearable="false" @blur="getPointToBalanceComputer"/>
			</view>
			<view class="usable-hint-info">
				<view class="usable-hint-item">
					<text class="usable-hint-title">手续费（销毁）：</text>
					<text class="usable-hint-val">{{ result.handling_fee }}</text>
				</view>
				<view class="usable-hint-item">
					<text class="usable-hint-title">实际兑换积分：</text>
					<text class="usable-hint-val">{{ result.face_point }}</text>
				</view>
				<view class="usable-hint-item">
					<text class="usable-hint-title">可兑换金额：</text>
					<text class="usable-hint-val">{{ result.face_add_balance }}元</text>
				</view>

				<view class="usable-hint-item usable-hint-error">
					{{ valueError ? '*积分数量不足，请重新输入' : '' }}
				</view>

				<view class="usable-btn" @click.stop="openHintPopup()">
					确认兑换
				</view>
			</view>
		</view>

		<exchange-hint ref="exchangeHint" :params="pointGiveAwayApi" :type="0" :useNums="value" :resultNum="`${result.face_add_balance}元`"></exchange-hint>
	</view>
</template>

<script>
	import {
		pointToBalanceComputer,
		pointToBalance
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				pointGiveAwayApi: {
					url: pointToBalance,
					mode: 'post',
					data: {
						value: '',
						user_obj_id: ''
					}
				},
				value: '',
				valueError:false,
				resultNum: '999元',
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '兑换余额',
					color: '#1A1A1A',
					// autoBack:true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A'
				},
				// 手续费 / 实际转赠
				result: {
					face_point: 0,
					handling_fee: 0,
					face_add_balance:0
				}
			};
		},
		onShow() {
			this.getUserInfo()
		},
		watch:{
			value(newVal){
				console.log('newVal = ' , newVal)
        if (newVal.indexOf('.') != -1) {
          let arr = newVal.split('.')
          if (arr[1].length > 8) {
            this.value = Number(newVal).toFixed(8)
          }
        }
				if(newVal > this.integral_able){
					this.valueError = true
				}else{
					this.valueError = false	
				}
			}
		},
		methods: {
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal');
				this.integral_able = personal ? personal.integral_able : '';
			},
			getPointToBalanceComputer(){
				if(!this.value || this.valueError){
					return false
				};
				this.$http.post(pointToBalanceComputer, {
					value: this.value
				}).then((res) => {
					if (res && res.code == 200) {
						this.result.face_point = res.data.face_point;
						this.result.handling_fee = res.data.handling_fee;
						this.result.face_add_balance = res.data.face_add_balance;
					};
				});
			},
			openHintPopup() {
				this.pointGiveAwayApi.data = {
					value: this.value
				}
				this.$refs.exchangeHint.open()
				// this.$refs.exchangeHint.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./common.scss"
</style>