128 lines
4.7 KiB
Plaintext
128 lines
4.7 KiB
Plaintext
<view class="page">
|
||
<!-- 状态栏占位 -->
|
||
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
||
|
||
<!-- 导航栏：动态高度 + 右侧胶囊避让 -->
|
||
<view class="nav" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px; box-sizing: border-box;">
|
||
<view class="nav-back" bindtap="onBack">取消</view>
|
||
<view class="nav-title">{{isEdit ? '编辑宠物' : '添加宠物'}}</view>
|
||
<view class="nav-save" bindtap="onSave">保存</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y="true" class="scroll" enhanced="true" show-scrollbar="false">
|
||
<view class="form">
|
||
|
||
<!-- 宠物头像 -->
|
||
<view class="avatar-section" bindtap="onChoosePhoto">
|
||
<view class="pet-avatar" style="background: linear-gradient(135deg, #d9d2fb, #efedfd);">
|
||
<text class="pet-emoji-big">{{form.emoji || '🐾'}}</text>
|
||
</view>
|
||
<text class="avatar-tip">点击更换照片</text>
|
||
</view>
|
||
|
||
<!-- 基础信息 -->
|
||
<view class="field-group">
|
||
|
||
<!-- 名字 -->
|
||
<view class="field-item">
|
||
<text class="field-label">宠物名字 *</text>
|
||
<input class="field-input" value="{{form.name}}" bindinput="onField" data-key="name" placeholder="给TA起个名字" maxlength="10" />
|
||
</view>
|
||
|
||
<!-- 物种 -->
|
||
<view class="field-item" bindtap="onSpecies">
|
||
<text class="field-label">物种 *</text>
|
||
<view class="field-select">
|
||
<text>{{speciesLabel}}</text>
|
||
<text class="select-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 品种 — picker 滚轮 -->
|
||
<view class="field-item">
|
||
<text class="field-label">品种</text>
|
||
<picker mode="selector" range="{{currentBreeds}}" value="{{breedIndex}}" bindchange="onBreedChange">
|
||
<view class="field-select">
|
||
<text class="{{form.breed ? '' : 'placeholder-text'}}">{{form.breed || '选择品种'}}</text>
|
||
<text class="select-arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 性别 -->
|
||
<view class="field-item">
|
||
<text class="field-label">性别</text>
|
||
<view class="gender-btns">
|
||
<view class="gender-btn {{form.gender === 'female' ? 'g-active' : ''}}" bindtap="onGender" data-v="female">女生 ♀</view>
|
||
<view class="gender-btn {{form.gender === 'male' ? 'g-active' : ''}}" bindtap="onGender" data-v="male">男生 ♂</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 生日 -->
|
||
<view class="field-item">
|
||
<text class="field-label">生日</text>
|
||
<picker mode="date" value="{{form.birthday}}" bindchange="onBirthday">
|
||
<view class="field-select">
|
||
<text class="{{form.birthday ? '' : 'placeholder-text'}}">{{form.birthday || '选择生日'}}</text>
|
||
<text class="select-arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 简介 -->
|
||
<view class="field-item field-item-col">
|
||
<text class="field-label">简介</text>
|
||
<textarea
|
||
class="field-textarea"
|
||
value="{{form.bio}}"
|
||
bindinput="onField"
|
||
data-key="bio"
|
||
placeholder="写几句关于TA的介绍..."
|
||
maxlength="100"
|
||
auto-height="true"
|
||
show-confirm-bar="false"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 性格标签 -->
|
||
<view class="tags-section">
|
||
<view class="tags-header">
|
||
<text class="tags-title">性格标签</text>
|
||
<text class="tags-count">已选 {{form.tags.length}}/8</text>
|
||
</view>
|
||
|
||
<!-- 预设 + 自定义标签网格 -->
|
||
<view class="tag-grid">
|
||
<view
|
||
wx:for="{{allTags}}"
|
||
wx:key="index"
|
||
class="tag-chip {{selectedTagSet[item] ? 'tag-on' : ''}}"
|
||
bindtap="onTagToggle"
|
||
data-tag="{{item}}"
|
||
>{{item}}</view>
|
||
</view>
|
||
|
||
<!-- 自定义标签输入 -->
|
||
<view class="custom-tag-row">
|
||
<input
|
||
class="custom-tag-input"
|
||
value="{{customTagInput}}"
|
||
bindinput="onCustomTagInput"
|
||
bindconfirm="onAddCustomTag"
|
||
placeholder="自定义标签（最多5字）"
|
||
maxlength="5"
|
||
confirm-type="done"
|
||
/>
|
||
<view class="custom-tag-add {{customTagInput ? '' : 'add-disabled'}}" bindtap="onAddCustomTag">添加</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 删除 -->
|
||
<view wx:if="{{isEdit}}" class="delete-btn" bindtap="onDelete">删除这只宠物</view>
|
||
|
||
<view style="height: 80rpx;"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|