rrys121/pages/users/user_integral/redTarget.vue

<template>
	<view class="pageBg" :style="colorStyle">
		<!-- #ifdef MP -->
		<view class="accountTitle">
			<view :style="{height:getHeight.barTop+'px'}"></view>
			<view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
				<view>账户充值</view>
				<text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
			</view>
		</view>
		<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
		<!-- #endif -->
		<form @submit="submitSub">
			<view class="paymentCon">
				<view class="payment-top">
					<span class="name">我的红积分</span>
					<view class="money">{{ userinfo.red_integral || 0 }}</view>
					<view class="pictrue">
						<image src="../static/chongzhi.png"></image>
					</view>
				</view>
			</view>
			<view class="payment">
				<view class="tip">
					<view class="title">转到佣金</view>
					<view class='input acea-row row-middle'><input @input='inputNum'
							:maxlength="moneyMaxLeng" placeholder="请输入转到佣金金额" type='digit'
							placeholder-class='placeholder' v-model="number" name="number"></input></view>
				</view>
				<view class="tip">
					手续费：{{number*userinfo.red_integral_commission/100}}
				</view>
				<button class='but bg-color' formType="submit">立即转佣金</button>
			</view>
		</form>
		
		<!-- 确认框 -->
		<tuiModal :show="showModal" title="温馨提示" content="确认是否转到佣金？" :maskClosable="false" @click="handleClick">
		</tuiModal>
	</view>
</template>

<script>
	import {
		getUserInfo,
		setRedIntegralList,
		getRechargeApi,
		memberCardCreate
	} from '@/api/user.js';
	import tuiModal from "@/components/tui-modal/index.vue"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		orderOfflinePayType
	} from '@/api/order.js';
	import {
		mapGetters
	} from "vuex";
	import colors from "@/mixins/color";
	import {
		openPaySubscribe
	} from '@/utils/SubscribeMessage.js';
	export default {
		components: {
			tuiModal
		},
		mixins: [colors],
		data() {
			let that = this;
			return {
				// #ifdef MP
				getHeight: this.$util.getWXStatusHeight(),
				// #endif
				now_money: 0,
				navRecharge: ['账户充值', '佣金转入'],
				active: 0,
				number: '',
				userinfo: {},
				placeholder: "0.00",
				from: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				picList: [],
				activePic: 0,
				money: "",
				numberPic: '',
				rechar_id: 0,
				password: '',
				goodsList: [],
				pay_order_id: '',
				payType: '',
				totalPrice: '0',
				formContent: '',
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				type: '',
				rechargeAttention: [],
				moneyMaxLeng: 8,
				showModal: false,
				balanceStatus: 0
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						//#ifndef MP
						this.getUserInfo();
						this.getRecharge();
						//#endif
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			if (this.isLogin) {
				this.getUserInfo();
				this.getRecharge();
			} else {
				toLogin();
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
		},
		methods: {
			allChange() {
				this.number = this.userinfo.commissionCount;
			},
			goarrow() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				if (prevPage) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			inputNum: function(e) {
				let val = e.detail.value;
				let dot = val.indexOf('.');
				if (dot > -1) {
					this.moneyMaxLeng = dot + 3;
				} else {
					this.moneyMaxLeng = 8
				}
			},
			/**
			 * 选择金额
			 */
			picCharge(idx, item) {
				this.activePic = idx;
				if (item === undefined) {
					this.rechar_id = 0;
					this.numberPic = "";
				} else {
					this.money = "";
					this.rechar_id = item.id;
					this.numberPic = item.price;
				}
			},

			/**
			 * 充值额度选择
			 */
			getRecharge() {
				getRechargeApi().then(res => {
					this.picList = res.data.recharge_quota;
					if (this.picList[0]) {
						this.rechar_id = this.picList[0].id;
						this.numberPic = this.picList[0].price;
					}
					this.rechargeAttention = res.data.recharge_attention || [];
					this.balanceStatus = res.data.user_extract_balance_status;
				}).catch(res => {
					this.$util.Tips({
						title: res
					})
				});
			},
			navRecharges: function(index) {
				this.active = index;
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userinfo', res.data);
				})
			},
			handleClick(e) {
					let data = {
						money: this.number,
					};
					setRedIntegralList(data).then(res => {
						this.$util.Tips({
							title: res.msg
						}, {
							url: "/pages/users/user_integral/red"
						})
					}).catch(err => {
						return this.$util.Tips({
							title: err
						})
					});
				
				this.showModal = false;
			},
			submitSub: function(e) {
				let that = this
				let value = e.detail.value.number;
				// 转入余额
				if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
					return that.$util.Tips({
						title: '请输入金额'
					});
				}
				this.showModal = true;

			}
		}
	}
</script>

<style lang="scss">
	
	.bgcolor {
		background-color: var(--view-theme)
	}

	.accountTitle {
		background-color: var(--view-minorColorT);
		position: fixed;
		left: 0;
		top:  var(--status-bar-height);
		width: 100%;
		z-index: 99;

		.sysTitle {
			width: 100%;
			position: relative;
			font-weight: 500;
			color: #333333;
			font-size: 30rpx;

			.iconfont {
				position: absolute;
				font-size: 36rpx;
				left: 11rpx;
				width: 60rpx;
			}
		}
	}

	.payment {
		position: relative;
		width: 710rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin: -176rpx auto 0 auto;
		padding-bottom: 64rpx;
	}

	.payment .nav {
		height: 96rpx;
		line-height: 96rpx;
		background-color: #f5f5f5;
		border-radius: 32rpx 32rpx 0 0;
	}

	.payment .nav .item {
		font-size: 30rpx;
		color: #333;
		width: 280rpx;
		text-align: center;
		padding-right: 40rpx;
		position: relative;

		&.on1 {
			padding-right: 62rpx;
			background-image: url('../static/titleLeft.png');

			&::after {
				margin-left: 150rpx;
			}
		}

		&.on2 {
			padding-left: 62rpx;
			background-image: url('../static/titleRight.png');

			&::after {
				margin-left: 192rpx;
			}
		}

		&.on3 {
			padding-left: 62rpx;
		}
	}

	.payment .nav .item.on {
		font-weight: bold;
		width: 407rpx;
		height: 96rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;

		&::after {
			width: 38rpx;
			height: 30rpx;
			border: 2px solid var(--view-theme);
			border-left: 2px solid transparent !important;
			border-top: 2px solid transparent !important;
			border-right: 2px solid transparent !important;
			border-radius: 50%;
			position: absolute;
			content: ' ';
			left: 0;
			bottom: 10rpx;
		}
	}

	.payment .input {
		margin: 32rpx auto 0 auto;
		font-size: 56rpx;
		color: #333333;
		background: #F5F5F5;
		border-radius: 16rpx;
		height: 114rpx;
	}

	.payment .input text {
		padding-left: 26rpx;
		font-weight: 600;
	}

	.payment .input input {
		width: 520rpx;
		height: 94rpx;
		font-size: 60rpx;
		margin-left: 24rpx;
		font-family: 'SemiBold';
	}

	.payment .input .placeholder {
		font-weight: 400;
		color: #DDDDDD;
		height: 100%;
		line-height: 94rpx;
		font-size: 32rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 30rpx 33rpx 0 33rpx;

		.title {
			font-weight: 400;
			color: #333333;
			font-size: 28rpx;
		}
	}

	.payment .but {
		color: #fff;
		font-size: 28rpx;
		width: 646rpx;
		height: 88rpx;
		border-radius: 50rpx;
		margin: 50rpx auto 0 auto;
		line-height: 88rpx;
		font-weight: 500;
		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
	}

	.paymentCon {
		background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
		padding-top: calc(var(--status-bar-height) + 32rpx) ;
	}

	.payment-top {
		width: 710rpx;
		height: 396rpx;
		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
		margin: 0 auto;
		border-radius: 32rpx 32rpx 0 0;
		padding: 56rpx 60rpx;
		box-sizing: border-box;
		position: relative;

		.name {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.money {
			font-size: 68rpx;
			color: #fff;
			font-family: 'SemiBold';
			margin-top: 16rpx;
		}

		.pictrue {
			width: 186rpx;
			height: 186rpx;
			position: absolute;
			right: 60rpx;
			top: 66rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;

		.pic-box {
			width: 204rpx;
			height: 144rpx;
			border-radius: 20rpx;
			padding: 28rpx 0 26rpx 0;
			margin: 16rpx 16rpx 0 0;
			box-sizing: border-box;
			position: relative;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.label {
				position: absolute;
				left: -2rpx;
				top: -18rpx;
				width: 118rpx;
				height: 40rpx;
				background: linear-gradient(270deg, #FAAD14 0%, #FF7D00 100%);
				border-radius: 16rpx 0 16rpx 0;
				color: #fff;
				font-size: 22rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.pic-box-color {
			background-color: #F5F5F5;
			color: #333;
			border: 1px solid #F5F5F5;
		}

		.pic-number {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 6rpx;
		}

		.pic-number-pic {
			font-size: 36rpx;
			font-weight: 500;
			width: 100%;
			text-align: center;

			.money {
				margin-left: 10rpx;
			}
		}

		.pic-box-money {
			height: 70rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: 500;
			line-height: 70rpx;
		}

		.placeholders {
			color: #333333;
		}

		.pic-box-color-active {
			background-color: var(--view-minorColorT) !important;
			color: var(--view-theme) !important;
			border: 1px solid var(--view-theme);

			.pic-number,
			.placeholders {
				color: var(--view-theme) !important;
			}
		}
	}

	.tips-box {
		margin-top: 48rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.tips {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 24rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;

			.drop {
				width: 10rpx;
				height: 10rpx;
				background-color: var(--view-theme);
				border-radius: 50%;
				margin-top: 12rpx;
			}

			.info {
				width: 620rpx;
			}
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 32rpx;
		font-size: 26rpx;
		color: #333;
	}
</style>