130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<template>
|
|
<JeepayBackground>
|
|
<view class="page-wrapper jeepay-edit-form">
|
|
<JeepayCustomNavbar :title="vdata.mbrId ? '修改会员信息' : '创建会员' " backCtrl="back" />
|
|
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
|
|
|
|
<uni-forms-item required label="会员名称" name="mbrName">
|
|
<uni-easyinput v-model="vdata.formData.mbrName" placeholder="请输入会员名称" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="手机号" name="mbrTel">
|
|
<text v-if="vdata.mbrId">{{ vdata.formData.mbrTel }}</text>
|
|
<uni-easyinput v-else v-model="vdata.formData.mbrTel" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
<JeepayTableListItem v-if="vdata.mbrId" 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.mbrId ? '确认修改' : '确认创建' }}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</JeepayBackground>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reqLoad, API_URL_MEMBERS } 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 emit from '@/commons/utils/emit.js'
|
|
|
|
const formRef = ref()
|
|
|
|
onLoad((options) => {
|
|
|
|
// 修改页面
|
|
if(options.mbrId){
|
|
vdata.mbrId = options.mbrId
|
|
reqLoad.getById(API_URL_MEMBERS, vdata.mbrId).then(({bizData}) => {
|
|
vdata.formData = bizData
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
|
|
const rules = {
|
|
mbrName: {
|
|
rules:[ formUtil.rules.requiredInput() ],
|
|
},
|
|
mbrTel: {
|
|
rules:[ formUtil.rules.requiredInput(), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile) ],
|
|
},
|
|
}
|
|
|
|
|
|
const vdata = reactive({
|
|
|
|
mbrId: null, // 新建 or 修改
|
|
|
|
// 表单数据
|
|
formData: {
|
|
state: 1
|
|
}
|
|
})
|
|
|
|
|
|
function confirmFunc(){
|
|
|
|
formUtil.validate(formRef.value).then(() => {
|
|
return reqLoad.addOrUpdate(vdata.mbrId, API_URL_MEMBERS, vdata.formData)
|
|
})
|
|
.then(( {bizData} ) => {
|
|
emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
|
|
go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
|
|
})
|
|
|
|
}
|
|
|
|
</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>
|