| <template> | 
|   <ContentScrollView :paddingH="false"> | 
|     <nut-form :model-value="form" ref="formRef" :rules="rules"> | 
|       <nut-form-item label="支付宝户名:" class="bole-form-item" prop="name"> | 
|         <nut-input v-model.trim="form.name" placeholder="请输入支付宝户名" readonly /> | 
|       </nut-form-item> | 
|       <nut-form-item label="支付宝账号:" class="bole-form-item" prop="code"> | 
|         <nut-input v-model.trim="form.code" placeholder="请输入支付宝账号" /> | 
|       </nut-form-item> | 
|     </nut-form> | 
|   </ContentScrollView> | 
|   <PageFooter> | 
|     <PageFooterBtn type="primary" @click="handleConfirm">绑定支付宝</PageFooterBtn> | 
|   </PageFooter> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; | 
| import { Message } from '@12333/utils'; | 
| import * as userServices from '@12333/services/apiV2/user'; | 
| import { EnumUserBankCardAccess } from '@12333/constants'; | 
| import { goBack } from '@/utils'; | 
|   | 
| defineOptions({ | 
|   name: 'InnerPage', | 
| }); | 
|   | 
| const { userDetail, updateUserInfo } = useUser(); | 
| const form = reactive({ | 
|   name: userDetail.value?.name ?? '', | 
|   code: '', | 
| }); | 
|   | 
| const rules = reactive<FormRules>({ | 
|   code: [{ required: true, message: '请输入支付宝账号' }], | 
| }); | 
|   | 
| const formRef = ref<any>(null); | 
| function handleConfirm() { | 
|   if (!formRef.value) return; | 
|   formRef.value.validate().then(({ valid, errors }: any) => { | 
|     if (valid) { | 
|       confirm(); | 
|     } | 
|   }); | 
| } | 
|   | 
| async function confirm() { | 
|   try { | 
|     let params: API.SavePersonalUserBankCardCommand = { | 
|       code: form.code, | 
|       access: EnumUserBankCardAccess.AliPay, | 
|     }; | 
|     let res = await userServices.savePersonalUserBankCard(params); | 
|     if (res) { | 
|       Message.success('绑定成功', { | 
|         onClosed() { | 
|           updateUserInfo(); | 
|           goBack(); | 
|         }, | 
|       }); | 
|     } | 
|   } catch (error) {} | 
| } | 
| </script> | 
|   | 
| <style lang="scss"> | 
| @import '@/styles/common.scss'; | 
| </style> |