140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<template>
|
||
<JeepayBackground>
|
||
<view class="page-wrapper jeepay-edit-form">
|
||
<JeepayCustomNavbar :title="vdata.ruleId ? '修改充值规则' : '创建充值规则' " backCtrl="back" />
|
||
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
|
||
|
||
<uni-forms-item required label="充值金额" name="rechargeAmount">
|
||
<uni-easyinput type="digit" v-model="vdata.formData.rechargeAmount" placeholder="请输入充值金额" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="赠送金额" name="giveAmount">
|
||
<uni-easyinput type="digit" v-model="vdata.formData.giveAmount" placeholder="请输入赠送金额" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="排序" name="sort">
|
||
<uni-easyinput type="number" v-model="vdata.formData.sort" placeholder="请输入排序" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
<JeepayTableListItem v-if="vdata.ruleId" title="状态" subtitle="状态禁用后，规则将无法使用">
|
||
<template #titleRight>
|
||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false' />
|
||
</template>
|
||
</JeepayTableListItem>
|
||
|
||
<uni-forms-item required label="备注" name="remark">
|
||
<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
</uni-forms>
|
||
|
||
<view class="confirm-wrapper">
|
||
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.ruleId ? '确认修改' : '确认创建' }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</JeepayBackground>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from '@/http/apiManager.js'
|
||
import infoBox from '@/commons/utils/infoBox.js';
|
||
import go from '@/commons/utils/go.js'
|
||
import formUtil from '@/commons/utils/formUtil.js'
|
||
import cal from '@/commons/utils/cal.js'
|
||
import emit from '@/commons/utils/emit.js'
|
||
|
||
const formRef = ref()
|
||
|
||
onLoad((options) => {
|
||
|
||
// 修改页面
|
||
if(options.ruleId){
|
||
vdata.ruleId = options.ruleId
|
||
reqLoad.getById(API_URL_MEMBER_RECHARGE_RULES, vdata.ruleId).then(({bizData}) => {
|
||
vdata.formData = bizData
|
||
vdata.formData.rechargeAmount = cal.cert2Dollar(vdata.formData.rechargeAmount)
|
||
vdata.formData.giveAmount = cal.cert2Dollar(vdata.formData.giveAmount)
|
||
})
|
||
}
|
||
|
||
})
|
||
|
||
|
||
const rules = {
|
||
rechargeAmount: {
|
||
rules:[ formUtil.rules.requiredInput('充值金额') ]
|
||
}
|
||
}
|
||
|
||
|
||
const vdata = reactive({
|
||
|
||
ruleId: null, // 新建 or 修改
|
||
|
||
// 表单数据
|
||
formData: {
|
||
state: 1
|
||
}
|
||
})
|
||
|
||
|
||
function confirmFunc(){
|
||
if(vdata.formData.rechargeAmount<=0) return infoBox.showToast('充值金额 不能小于0')
|
||
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
|
||
if (!REG_AMOUNT.test(vdata.formData.rechargeAmount)) {
|
||
return infoBox.showToast('请输入正确的充值金额，最多两位小数')
|
||
}
|
||
if (vdata.formData.giveAmount && !REG_AMOUNT.test(vdata.formData.giveAmount)) {
|
||
return infoBox.showToast('请输入正确的赠送金额，不能小于0 最多保留两位小数')
|
||
}
|
||
|
||
formUtil.validate(formRef.value).then(() => {
|
||
return reqLoad.addOrUpdate(vdata.ruleId, API_URL_MEMBER_RECHARGE_RULES, vdata.formData)
|
||
})
|
||
.then(( {bizData} ) => {
|
||
go.back(1, emit.ENAME_REF_RECHARGE_RULE_LIST) // 返回页面 && 更新
|
||
})
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
input {
|
||
font-size: 32rpx;
|
||
}
|
||
.f-label {
|
||
width: 240rpx;
|
||
}
|
||
.selected-sex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-top: 45rpx;
|
||
margin-bottom: 10rpx;
|
||
font-size: 32rpx;
|
||
color: #b3b3b3;
|
||
image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-top: -40rpx;
|
||
}
|
||
.selected-box {
|
||
color: #000;
|
||
}
|
||
}
|
||
.confirm-wrapper {
|
||
padding: 50rpx 30rpx;
|
||
.confirm-button {
|
||
height: 110rpx;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
background: $jeepay-bg-primary;
|
||
}
|
||
}
|
||
</style>
|