183 lines
3.4 KiB
Vue
183 lines
3.4 KiB
Vue
<template>
|
||
<un-pages
|
||
:show-nav-bar="true"
|
||
nav-bar-title="创建家庭"
|
||
:show-back="true"
|
||
>
|
||
<view class="page-content">
|
||
<view class="form-section">
|
||
<view class="section-title">家庭名称</view>
|
||
<view class="input-wrapper">
|
||
<input
|
||
v-model="familyName"
|
||
placeholder="请输入家庭名称"
|
||
placeholder-style="color: #ccc"
|
||
maxlength="20"
|
||
/>
|
||
<text class="char-count">{{ familyName.length }}/20</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tips-section">
|
||
<view class="tip-item">
|
||
<uni-icons type="info" size="18" color="#667eea"></uni-icons>
|
||
<text class="tip-text">创建后您将成为家主，可以管理家庭成员</text>
|
||
</view>
|
||
<view class="tip-item">
|
||
<uni-icons type="info" size="18" color="#667eea"></uni-icons>
|
||
<text class="tip-text">每个用户只能创建或加入一个家庭</text>
|
||
</view>
|
||
<view class="tip-item">
|
||
<uni-icons type="info" size="18" color="#667eea"></uni-icons>
|
||
<text class="tip-text">创建家庭后，家庭成员可以查看和记录家庭账单</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="submit-section">
|
||
<button class="submit-btn" @tap="handleCreate" :loading="loading">
|
||
创建家庭
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</un-pages>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
familyName: '',
|
||
loading: false
|
||
}
|
||
},
|
||
methods: {
|
||
async handleCreate() {
|
||
if (!this.familyName.trim()) {
|
||
uni.showToast({
|
||
title: '请输入家庭名称',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const res = await this.$store.dispatch('createFamily', this.familyName.trim())
|
||
if (res && res.code === 1) {
|
||
uni.showToast({
|
||
title: '创建成功',
|
||
icon: 'success'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: res?.message || '创建失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('创建家庭失败', error)
|
||
uni.showToast({
|
||
title: error?.message || '创建失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-content {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.form-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.input-wrapper {
|
||
position: relative;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
padding: 0;
|
||
}
|
||
|
||
.char-count {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: -30rpx;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips-section {
|
||
background: rgba(102, 126, 234, 0.05);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.tip-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
uni-icons {
|
||
margin-right: 12rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.tip-text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-section {
|
||
margin-top: 60rpx;
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|