93 lines
4.6 KiB
Plaintext
93 lines
4.6 KiB
Plaintext
<view class="container">
|
|
<!-- 原先这里是 mine 页上的 comp_address 浮层（fixed + 遮罩 + 底部 sheet），
|
|
不占页面栈，系统返回键会直接退出小程序；改为真页面后由微信原生
|
|
导航栏接管返回。列表 / 表单两个状态仍在同页切换（外层不再有壳），
|
|
切换时同步改导航栏标题 -->
|
|
|
|
<!-- ===== 列表态 ===== -->
|
|
<block wx:if="{{!isEditing}}">
|
|
<view class="addr-list" wx:if="{{addresses.length > 0}}">
|
|
<view
|
|
class="addr-card {{index === addresses.length - 1 ? 'addr-card-last' : ''}}"
|
|
wx:for="{{addresses}}"
|
|
wx:key="index"
|
|
>
|
|
<!-- 主体可点进编辑：右侧 chevron 是点击暗示，不做无暗示的整卡可点 -->
|
|
<view class="addr-main" bindtap="onEditAddress" data-index="{{index}}" hover-class="addr-main-hover">
|
|
<view class="addr-info">
|
|
<view class="addr-top">
|
|
<text class="addr-label">{{item.label}}</text>
|
|
<text class="addr-default-tag" wx:if="{{item.isDefault}}">默认</text>
|
|
</view>
|
|
<text class="addr-region">{{item.province}} {{item.city}} {{item.district}}</text>
|
|
<text class="addr-detail">{{item.address}}</text>
|
|
<text class="addr-postcode" wx:if="{{item.postcode}}">邮编：{{item.postcode}}</text>
|
|
</view>
|
|
<t-icon name="chevron-right" class="addr-arrow" size="32rpx" />
|
|
</view>
|
|
|
|
<view class="addr-actions">
|
|
<view class="addr-action" bindtap="onSetDefault" data-index="{{index}}">
|
|
<!-- 状态同时用图形与文字传达，不只靠颜色（WCAG 1.4.1）；
|
|
t-icon 的 color 读不到变量，故用 CSS 类着色而不是写死 hex -->
|
|
<t-icon wx:if="{{item.isDefault}}" name="check-circle-filled" class="addr-action-icon addr-action-icon-active" size="32rpx" />
|
|
<t-icon wx:else name="circle" class="addr-action-icon" size="32rpx" />
|
|
<text class="addr-action-text {{item.isDefault ? 'addr-action-text-active' : ''}}">{{item.isDefault ? '默认地址' : '设为默认'}}</text>
|
|
</view>
|
|
<view class="addr-action" bindtap="onDeleteAddress" data-index="{{index}}">
|
|
<t-icon name="delete" class="addr-action-icon" size="32rpx" />
|
|
<text class="addr-action-text">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="addr-empty" wx:else>
|
|
<t-icon name="location" class="addr-empty-icon" size="80rpx" />
|
|
<text class="addr-empty-text">还没有邮寄地址，添加后下单即可选用</text>
|
|
</view>
|
|
|
|
<view class="footer-bar">
|
|
<button class="primary-btn" bindtap="onAddAddress">添加地址</button>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- ===== 表单态 ===== -->
|
|
<block wx:else>
|
|
<view class="form-card">
|
|
<view class="form-row">
|
|
<text class="form-label">地址标签</text>
|
|
<input class="form-input" value="{{editData.label}}" placeholder="如：家庭、公司" placeholder-class="form-placeholder"
|
|
maxlength="20" bindinput="onFieldInput" data-field="label" />
|
|
</view>
|
|
|
|
<view class="form-row">
|
|
<text class="form-label">所在地区</text>
|
|
<picker class="form-picker" mode="region" value="{{[editData.province, editData.city, editData.district]}}"
|
|
bindchange="onRegionChange">
|
|
<view class="picker-value {{editData.province ? '' : 'picker-placeholder'}}">
|
|
{{editData.province || '请选择地区'}}{{editData.city ? ' ' + editData.city : ''}}{{editData.district ? ' ' + editData.district : ''}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="form-row">
|
|
<text class="form-label">详细地址</text>
|
|
<input class="form-input" value="{{editData.address}}" placeholder="请输入详细地址" placeholder-class="form-placeholder"
|
|
maxlength="100" bindinput="onFieldInput" data-field="address" />
|
|
</view>
|
|
|
|
<view class="form-row form-row-last">
|
|
<text class="form-label">设为默认地址</text>
|
|
<!-- switch 的 color 属性读不到 CSS 变量，只能硬编码，取值须与令牌同步 -->
|
|
<switch checked="{{editData.isDefault}}" bindchange="onDefaultChange" color="#B8520A" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单态双按钮：取消走空心（--sep 描边 + 透明底），保存是本页唯一实心橙块 -->
|
|
<view class="footer-bar footer-bar-duo">
|
|
<button class="ghost-btn" bindtap="onBackToList">取消</button>
|
|
<button class="primary-btn" bindtap="onSaveEdit">保存</button>
|
|
</view>
|
|
</block>
|
|
</view> |