<template>
|
<view class="add-account-page">
|
<view class="form-area">
|
<!-- 等级选择 -->
|
<view class="form-item">
|
<text class="form-label">等级</text>
|
<picker
|
mode="selector"
|
:range="levelLabels"
|
:value="levelIndex"
|
@change="_handleLevelChange"
|
>
|
<view class="select-box">
|
<text
|
class="select-text"
|
:class="{ 'select-text--placeholder': !form.level }"
|
>
|
{{ form.level || '请选择' }}
|
</text>
|
<!-- 纯 CSS 下拉箭头 -->
|
<view class="chevron-icon"></view>
|
</view>
|
</picker>
|
<text class="quota-tip">{{ quotaTip }}</text>
|
</view>
|
|
<!-- 登录手机号输入 -->
|
<view class="form-item">
|
<text class="form-label">登录手机号</text>
|
<input
|
v-model="form.phone"
|
class="input-box"
|
type="number"
|
maxlength="11"
|
placeholder="请输入账户"
|
placeholder-style="color:#b8bec7;font-size:28rpx"
|
/>
|
</view>
|
</view>
|
|
<!-- 底部提交按钮 -->
|
<view class="bottom-bar">
|
<view class="submit-btn" @tap="_handleSubmit">新增</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
import { getSubAccountQuota, createSubAccount } from '@/api/index.js'
|
|
// ======================== 数据定义区域 ========================
|
|
// 表单数据
|
const form = reactive({
|
level: '',
|
phone: ''
|
})
|
|
// 各等级剩余可开通数量
|
const quota = ref({ L1: 0, L2: 0, L3: 0 })
|
|
// 可选等级值列表（与 levelLabels 下标一一对应）
|
const levelValues = ['L1', 'L2', 'L3']
|
|
// 当前选中的等级下标
|
const levelIndex = ref(0)
|
|
// 等级选择器的展示文案（带剩余数量提示）
|
const levelLabels = computed(() =>
|
levelValues.map((level) => level + '（剩余' + (quota.value[level] || 0) + '个）')
|
)
|
|
// 剩余额度提示文案
|
const quotaTip = computed(
|
() => `当前剩余可用：${quota.value.L1}个L1 ${quota.value.L2}个L2 ${quota.value.L3}个L3`
|
)
|
|
// ======================== 方法定义区域 ========================
|
|
/**
|
* 加载各等级剩余可开通额度
|
* 后端接口就绪前以本地模拟数据兜底，保证页面可视
|
*/
|
const _loadQuota = async () => {
|
try {
|
const { data } = await getSubAccountQuota()
|
quota.value = data || quota.value
|
} catch (e) {
|
quota.value = { L1: 6, L2: 8, L3: 3 }
|
}
|
}
|
|
/** 切换等级 */
|
const _handleLevelChange = (e) => {
|
const index = Number(e.detail.value)
|
levelIndex.value = index
|
form.level = levelValues[index]
|
}
|
|
/** 校验表单，返回校验失败原因（通过则返回空串） */
|
const _validateForm = () => {
|
if (!form.level) return '请选择等级'
|
if (!/^1[3-9]\d{9}$/.test(form.phone)) return '请输入正确的手机号'
|
return ''
|
}
|
|
/** 提交新增子账号 */
|
const _handleSubmit = async () => {
|
const errorMsg = _validateForm()
|
if (errorMsg) {
|
uni.showToast({ title: errorMsg, icon: 'none' })
|
return
|
}
|
|
try {
|
await createSubAccount({ level: form.level, phone: form.phone })
|
uni.showToast({ title: '新增成功', icon: 'success' })
|
setTimeout(() => uni.navigateBack(), 1200)
|
} catch (e) {
|
uni.showToast({ title: e.message || '新增失败', icon: 'none' })
|
}
|
}
|
|
onLoad(() => {
|
_loadQuota()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
/* 页面最外层：纵向弹性布局，撑满整屏 */
|
.add-account-page {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #ffffff;
|
}
|
|
.form-area {
|
flex: 1;
|
padding: 30rpx 28rpx;
|
}
|
|
/* 表单项容器 */
|
.form-item {
|
margin-bottom: 40rpx;
|
}
|
|
.form-label {
|
display: block;
|
font-size: 28rpx;
|
color: #1f2329;
|
margin-bottom: 20rpx;
|
}
|
|
/* 下拉选择框 */
|
.select-box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 88rpx;
|
padding: 0 24rpx;
|
border: 1rpx solid #dcdfe6;
|
border-radius: 8rpx;
|
box-sizing: border-box;
|
}
|
|
.select-text {
|
font-size: 28rpx;
|
color: #1f2329;
|
}
|
|
.select-text--placeholder {
|
color: #b8bec7;
|
}
|
|
/* 纯 CSS 下拉箭头（向下） */
|
.chevron-icon {
|
width: 16rpx;
|
height: 16rpx;
|
border-right: 3rpx solid #9aa1ab;
|
border-bottom: 3rpx solid #9aa1ab;
|
transform: rotate(45deg);
|
margin-right: 6rpx;
|
flex-shrink: 0;
|
}
|
|
/* 剩余额度提示 */
|
.quota-tip {
|
display: block;
|
margin-top: 16rpx;
|
font-size: 24rpx;
|
color: #1a73e8;
|
}
|
|
/* 手机号输入框 */
|
.input-box {
|
height: 88rpx;
|
padding: 0 24rpx;
|
border: 1rpx solid #dcdfe6;
|
border-radius: 8rpx;
|
font-size: 28rpx;
|
color: #1f2329;
|
box-sizing: border-box;
|
}
|
|
/* 底部按钮区 */
|
.bottom-bar {
|
padding: 20rpx 28rpx;
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
background-color: #ffffff;
|
border-top: 1rpx solid #f0f2f5;
|
}
|
|
.submit-btn {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #0b3b68;
|
color: #ffffff;
|
font-size: 30rpx;
|
font-weight: 600;
|
border-radius: 8rpx;
|
}
|
</style>
|
