new-zx-front-app/pages/user/wallet/scoreToConsumption.vue

<template>
	<s-layout class="set-wrap" :title="t('wallet.积分转换')" :bgStyle="{ color: '#FFF' }">
		<uni-forms :model="state.model" :rules="state.rules" validateTrigger="bind" labelPosition="left" border
			class="form-box" labelWidth='200' ref="FormRef">
			<view class="bg-white ss-p-x-30">
				<uni-forms-item name="integralType" :label="t('wallet.积分转换类型')" :required="true">
					<!-- <uni-data-picker v-model="state.model.integralType"
						:localdata="state.data" placeholder="请选择类型"
						style="width: 100%;" /> -->

					<radio-group @change="e => state.model.integralType = Number(e.detail.value)" >
						<label v-for="item in state.data" :key="item.value" class="ss-m-r-20">
							<radio :value="item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)" :checked="state.model.integralType == item.value" />
							<text class="ss-m-l-10">{{ item.text }}</text>
						</label>
					</radio-group>
				</uni-forms-item>
				<template v-if="state.model.integralType">
					<uni-forms-item name="quota" :label="t('wallet.积分')" :required="true">
						<uni-easyinput v-model="state.model.quota" type="number" :placeholder="t('wallet.请输入转换积分')"
							:inputBorder="false" :clearable="false" @input="validateInput" />
					</uni-forms-item>
				</template>


			</view>
		</uni-forms>
		<view class="ss-flex ss-row-center ss-col-center ss-m-t-30">
			<template v-if="state.model.integralType">
				{{ t('wallet.current_commission_available') }}:<text class="text-red">{{ currentQuota }}</text>
			</template>
			<!-- <button class="ss-m-l-10 all-btn " @click="useAllPonints">全部</button> -->

		</view>
		<su-fixed bottom placeholder bg="none" v-if="state.model.integralType">
			<view class="footer-box ss-p-20 ss-flex">
				<button class="ss-rest-button btn" @tap="onSubmit">{{ t('common.confirm') }}</button>
			</view>
		</su-fixed>

	</s-layout>
</template>


<script setup>
import {
	computed,
	reactive,
	onBeforeMount,
	ref,
	unref,
	watch,
	nextTick
} from 'vue';
import sheep from '@/sheep';
import {
	clone
} from 'lodash';
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	points2point
} from '@/sheep/hooks/useGoods';
import {
	email
} from '@/sheep/validate/form';

import AuthUtil from '@/sheep/api/member/auth';
import ConsumptionApi from '@/sheep/api/distri/consumption';
import {
	showAuthModal,
	showInputPayPassword
} from '@/sheep/hooks/useModal';
import { t } from '@/locale'
const userInfo = computed(() => sheep.$store('user').userInfo);
const userWallet = computed(() => sheep.$store('user').userWallet);
console.log(userWallet.value.categoryId)
const typeOptions = computed(() => {

  const options = []
  // 黄转红选项始终存在
  options.push({ value: 2, text: t('wallet.黄转红') })
  // 只有 categoryId 为 3 时才显示红转绿选项
  if (userWallet.value.categoryId === 3) {
    options.push({ value: 1, text: t('wallet.红转绿') })
  }
  
  
  return options
})
const state = reactive({
	data: typeOptions,
	model: {
		quota: undefined,
		integralType: 2,
	},
	rules: {
		quota: {
			rules: [{
				required: true,
				errorMessage: t('wallet.transfer_amount_cannot_be_empty'),
			},
			{
				validateFunction: function (rule, value, data, callback) {
					if (value <= 0) {
						callback(t('wallet.transfer_amount_cannot_be_zero'));
					}
					return true;
				},
			},
			],
		},
	}
});
const currentQuota = computed(() => {
	if (state.model.integralType == 1) {
		return points2point(userWallet.value.integralDO.redCurrentQuota);
	} else {
		return points2point(userWallet.value.integralDO.yellowCurrentQuota);
	}
});

async function validateInput(value) {
	// 确保输入是整数
	const intValue = parseInt(value);
	const strPoints = value.toString()
	const [integerPart, decimalPart] = strPoints.split('.')
	if (decimalPart) {
		nextTick(() => {
			state.model.quota = integerPart;
		});
	}

	if (intValue > parseInt(currentQuota.value)) {
		nextTick(() => {
			state.model.quota = parseInt(currentQuota.value);
		});

	} else {
		nextTick(() => {
			state.model.quota = intValue;
		});
	}
}

// 提交审核
const FormRef = ref(null);
const onSubmit = async () => {
	// 参数校验
	const validate = await unref(FormRef)
		.validate()
		.catch((error) => {
			console.log('error: ', error);
		});
	if (!validate) {
		return;
	}
	uni.showModal({
		title: t('setting.prompt'),
		content: t('wallet.转换后不可逆，是否继续'),

		success: function (res) {
			if (!res.confirm) {
				return;
			}
			showInputPayPassword(async (password) => {
				state.model.payPassword = password
				const { data, code } = await ConsumptionApi.quotaTransition(state.model);
				if (code === 0) {
					uni.showToast({
						title: t('wallet.conversion_successful'),
						icon: 'none',
						duration: 2000
					});
					uni.$emit('consumptionTransfersComplete');
					sheep.$router.redirect('/pages/user/wallet/score')
				}
			})
		}
	});

}

const isLogin = computed(() => sheep.$store('user').isLogin);
// 监听到在这个页面登陆，并刷新页面
watch(
	() => isLogin.value,
	(newVal) => {
		if (newVal) {
			window.location.reload()
		}
	}, {
	deep: true, // 深度监听
},
);

onLoad(async (options) => {
	if (!isLogin.value) {
		showAuthModal();
	}
});
</script>

<style lang="scss" scoped>


:deep(.uni-forms-item__content) {
	display: flex;
	align-items: center;
	flex: 1;
}

.code-btn-start {

	width: 158rpx;
	height: 56rpx;
	line-height: normal;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 28rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #fff;

}

.disabled {
	border: 1px solid #f7f7f7;
}

.icon {
	display: flex;
	align-items: center;
	margin-right: 7rpx
}

.icon image {
	width: 35rpx;
	height: 35rpx;
}

:deep() {

	.file-picker__progress {
		height: 0 !important;
	}

	.uni-list-item__content-title {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
	}

	.uni-icons {
		font-size: 40rpx !important;
	}

	.is-disabled {
		color: #333333;
	}
}

:deep(.disabled) {
	opacity: 1;
}

.gender-name {
	font-size: 28rpx;
	font-weight: 500;
	line-height: normal;
	color: #333333;
}

.title-box {
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
	line-height: 100rpx;
}

.btn {
	width: 710rpx;
	height: 80rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 40rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: $white;
}

.btn-two {
	width: 310rpx;
	height: 80rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 40rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: $white;
}

.radio-dark {
	filter: grayscale(100%);
	filter: gray;
	opacity: 0.4;
}

.content-img {
	border-radius: 50%;
}

.header-box-content {
	position: relative;
	width: 160rpx;
	height: 160rpx;
	overflow: hidden;
	border-radius: 50%;
}

.avatar-action {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 1;
	width: 160rpx;
	height: 46rpx;
	background: rgba(#000000, 0.3);

	.avatar-action-btn {
		width: 160rpx;
		height: 46rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
	}
}

// 绑定项
.account-list {
	background-color: $white;
	height: 100rpx;
	padding: 0 20rpx;

	.list-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.list-name {
		font-size: 28rpx;
		color: #333333;
	}

	.info {
		.avatar {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: $dark-9;
		}
	}

	.bind-box {
		width: 100rpx;
		height: 50rpx;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;

		.bind-btn {
			width: 100%;
			height: 100%;
			border-radius: 25rpx;
			background: #f4f4f4;
			color: #999999;
		}

		.relieve-btn {
			width: 100%;
			height: 100%;
			border-radius: 25rpx;
			background: var(--ui-BG-Main-opacity-1);
			color: var(--ui-BG-Main);
		}
	}
}

.list-border {
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	border-bottom: 2rpx solid #eeeeee;
}

image {
	width: 100%;
	height: 100%;
}
</style>