271 lines
9.6 KiB
Plaintext
271 lines
9.6 KiB
Plaintext
<!--pages/member/bind/bind.wxml-->
|
||
<view class="container">
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<view class="header-content">
|
||
<image class="header-icon" src="/images/bind/member-icon.png" mode="aspectFit"></image>
|
||
<view class="header-text">
|
||
<view class="header-title">会员绑定</view>
|
||
<view class="header-desc">绑定会员账号，享受专属权益</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 当前状态卡片 -->
|
||
<view class="status-card card">
|
||
<view class="status-content">
|
||
<view class="status-icon">
|
||
<image src="{{statusInfo.icon}}" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="status-text">
|
||
<view class="status-title">{{statusInfo.title}}</view>
|
||
<view class="status-desc">{{statusInfo.desc}}</view>
|
||
</view>
|
||
<view class="status-badge {{statusInfo.badgeClass}}" wx:if="{{statusInfo.badge}}">
|
||
{{statusInfo.badge}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 绑定表单 -->
|
||
<view class="bind-form card" wx:if="{{!memberInfo.isBound}}">
|
||
<view class="card-header">
|
||
<text class="text-lg font-bold">绑定会员账号</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<form bindsubmit="handleSubmit">
|
||
<!-- 手机号输入 -->
|
||
<view class="form-group">
|
||
<view class="form-label">手机号码</view>
|
||
<view class="input-group">
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
placeholder="请输入手机号码"
|
||
value="{{formData.phone}}"
|
||
bindinput="onPhoneInput"
|
||
maxlength="11"
|
||
/>
|
||
<view class="input-suffix" wx:if="{{formData.phone && isValidPhone}}">
|
||
<image src="/images/icons/check-green.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form-error" wx:if="{{errors.phone}}">{{errors.phone}}</view>
|
||
</view>
|
||
|
||
<!-- 验证码输入 -->
|
||
<view class="form-group">
|
||
<view class="form-label">验证码</view>
|
||
<view class="input-group">
|
||
<input
|
||
class="form-input flex-1"
|
||
type="number"
|
||
placeholder="请输入验证码"
|
||
value="{{formData.verifyCode}}"
|
||
bindinput="onVerifyCodeInput"
|
||
maxlength="6"
|
||
/>
|
||
<button
|
||
class="verify-btn {{canSendCode ? 'active' : 'disabled'}}"
|
||
bindtap="sendVerifyCode"
|
||
disabled="{{!canSendCode}}"
|
||
>
|
||
{{verifyCodeText}}
|
||
</button>
|
||
</view>
|
||
<view class="form-error" wx:if="{{errors.verifyCode}}">{{errors.verifyCode}}</view>
|
||
</view>
|
||
|
||
<!-- 会员卡号输入 -->
|
||
<view class="form-group">
|
||
<view class="form-label">会员卡号</view>
|
||
<view class="input-group">
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
placeholder="请输入会员卡号"
|
||
value="{{formData.memberCard}}"
|
||
bindinput="onMemberCardInput"
|
||
/>
|
||
<view class="input-suffix" bindtap="scanMemberCard">
|
||
<image src="/images/icons/scan.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form-error" wx:if="{{errors.memberCard}}">{{errors.memberCard}}</view>
|
||
</view>
|
||
|
||
<!-- 密码输入 -->
|
||
<view class="form-group">
|
||
<view class="form-label">会员密码</view>
|
||
<view class="input-group">
|
||
<input
|
||
class="form-input"
|
||
type="{{showPassword ? 'text' : 'password'}}"
|
||
placeholder="请输入会员密码"
|
||
value="{{formData.password}}"
|
||
bindinput="onPasswordInput"
|
||
/>
|
||
<view class="input-suffix" bindtap="togglePassword">
|
||
<image src="/images/icons/{{showPassword ? 'eye-off' : 'eye'}}.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form-error" wx:if="{{errors.password}}">{{errors.password}}</view>
|
||
</view>
|
||
|
||
<!-- 协议同意 -->
|
||
<view class="agreement-group">
|
||
<label class="agreement-item">
|
||
<checkbox
|
||
value="agree"
|
||
checked="{{agreeTerms}}"
|
||
bindchange="onAgreeChange"
|
||
/>
|
||
<text class="agreement-text">
|
||
我已阅读并同意
|
||
<text class="link" bindtap="showTerms">《会员服务协议》</text>
|
||
和
|
||
<text class="link" bindtap="showPrivacy">《隐私政策》</text>
|
||
</text>
|
||
</label>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<button
|
||
class="btn btn-primary btn-block btn-large {{canSubmit ? '' : 'btn-disabled'}}"
|
||
form-type="submit"
|
||
disabled="{{!canSubmit || submitting}}"
|
||
>
|
||
{{submitting ? '绑定中...' : '立即绑定'}}
|
||
</button>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已绑定状态 -->
|
||
<view class="bound-info card" wx:if="{{memberInfo.isBound}}">
|
||
<view class="card-header">
|
||
<text class="text-lg font-bold">会员信息</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<view class="member-details">
|
||
<view class="detail-item">
|
||
<view class="detail-label">会员等级</view>
|
||
<view class="detail-value">
|
||
<view class="member-badge {{memberInfo.level}}">{{memberInfo.levelText}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="detail-label">会员卡号</view>
|
||
<view class="detail-value">{{memberInfo.memberCard}}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="detail-label">绑定手机</view>
|
||
<view class="detail-value">{{memberInfo.phone}}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="detail-label">绑定时间</view>
|
||
<view class="detail-value">{{memberInfo.bindTimeText}}</view>
|
||
</view>
|
||
<view class="detail-item" wx:if="{{memberInfo.expireTime}}">
|
||
<view class="detail-label">到期时间</view>
|
||
<view class="detail-value {{memberInfo.expireInfo.isExpired ? 'text-danger' : 'text-success'}}">
|
||
{{memberInfo.expireInfo.text}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="action-buttons">
|
||
<button class="btn btn-outline btn-block" bindtap="showUnbindConfirm">
|
||
解除绑定
|
||
</button>
|
||
<button class="btn btn-primary btn-block mt-2" bindtap="navigateToCenter">
|
||
查看权益
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 绑定说明 -->
|
||
<view class="help-card card">
|
||
<view class="card-header">
|
||
<text class="text-lg font-bold">绑定说明</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<view class="help-list">
|
||
<view class="help-item">
|
||
<view class="help-icon">
|
||
<image src="/images/icons/info.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="help-text">绑定后可享受会员专属权益和服务</view>
|
||
</view>
|
||
<view class="help-item">
|
||
<view class="help-icon">
|
||
<image src="/images/icons/security.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="help-text">您的个人信息将被严格保护</view>
|
||
</view>
|
||
<view class="help-item">
|
||
<view class="help-icon">
|
||
<image src="/images/icons/support.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="help-text">如有问题请联系客服：400-123-4567</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 解绑确认弹窗 -->
|
||
<view class="unbind-modal" wx:if="{{showUnbindModal}}" bindtap="hideUnbindConfirm">
|
||
<view class="modal-content" catchtap="stopPropagation">
|
||
<view class="modal-header">
|
||
<text class="modal-title">确认解除绑定</text>
|
||
</view>
|
||
<view class="modal-body">
|
||
<view class="unbind-warning">
|
||
<image class="warning-icon" src="/images/icons/warning.png" mode="aspectFit"></image>
|
||
<view class="warning-text">
|
||
<view class="warning-title">解除绑定后将失去以下权益：</view>
|
||
<view class="warning-list">
|
||
<text>• 会员专属功能和服务</text>
|
||
<text>• 积分和优惠券</text>
|
||
<text>• 会员等级和特权</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="btn btn-secondary" bindtap="hideUnbindConfirm">取消</button>
|
||
<button class="btn btn-danger ml-2" bindtap="confirmUnbind">确认解绑</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 协议弹窗 -->
|
||
<view class="agreement-modal" wx:if="{{showAgreementModal}}" bindtap="hideAgreement">
|
||
<view class="modal-content" catchtap="stopPropagation">
|
||
<view class="modal-header">
|
||
<text class="modal-title">{{agreementTitle}}</text>
|
||
<view class="modal-close" bindtap="hideAgreement">
|
||
<image src="/images/icons/close.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<scroll-view class="agreement-content" scroll-y="true">
|
||
<rich-text nodes="{{agreementContent}}"></rich-text>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="btn btn-primary btn-block" bindtap="hideAgreement">我知道了</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view class="loading-overlay" wx:if="{{loading}}">
|
||
<view class="loading-content">
|
||
<view class="loading-spinner"></view>
|
||
<text>{{loadingText}}</text>
|
||
</view>
|
||
</view> |