户号绑定页面

app.json

@@ -27,9 +27,7 @@
   },
   "window": {
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#4080FF",
-    "navigationBarTitleText": "智慧水务",
-    "navigationBarTextStyle": "white"
+    "navigationBarBackgroundColor": "#4080FF"
   },
   "componentFramework": "glass-easel",
   "sitemapLocation": "sitemap.json",

pages/FirstBangDing/FirstBangDing.js

@@ -0,0 +1,114 @@
+// pages/FirstBangDing/FirstBangDing.js
+const app = getApp()
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    maxBindCount: 5,
+    notices: [
+      '部分小区水费由物业代收，请联系小区物业进行咨询缴费操作。',
+      '户号绑定: 在绑定页面手动查询，输入地址关键词信息。',
+      '每个微信用户最多绑定5个户号。'
+    ],
+    images: {
+      logo: '',
+      background: '',
+      card: '',
+      tzd: "",
+      phone: "",
+      yl: "",
+      jcsfcjtzd: ""
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    // 页面加载时获取图片路径
+    this.setData({
+      images: {
+        logo: app.globalData.images.logo,
+        background: app.globalData.images.background,
+        card: app.globalData.images.card,
+        tzd: app.globalData.images.tzd,
+        phone: app.globalData.images.phone,
+        yl: app.globalData.images.yl,
+        jcsfcjtzd: app.globalData.images.jcsfcjtzd
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  bindAccount() {
+    wx.navigateTo({
+      url: '/pages/bind/bind'
+    })
+  },
+
+  switchTab(e) {
+    const page = e.currentTarget.dataset.page
+    if (page === 'profile') {
+      wx.switchTab({
+        url: '/pages/profile/profile'
+      })
+    }
+  },
+
+  goToBindHuhao() {
+    wx.navigateTo({
+      url: '/pages/huhaobangding/huhaobangding'
+    })
+  }
+})

pages/FirstBangDing/FirstBangDing.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/FirstBangDing/FirstBangDing.wxml

@@ -0,0 +1,25 @@
+<view class="container1">
+  <!-- 顶部背景和Logo -->
+  <view class="header">
+    <image class="background" src="{{images.background}}" mode="widthFix" />
+    <image class="logo" src="{{images.logo}}" mode="aspectFit" />
+  </view>
+
+  <!-- 欢迎卡片 -->
+  <view class="welcome-card">
+    <image class="card-bg" src="{{images.card}}" mode="aspectFill" />
+    <view class="card-content">
+      <view class="title">欢迎使用智慧水务</view>
+      <view class="subtitle">润/泽/千/家/万/户</view>
+      <view class="divider"></view>
+      <button class="bind-button" bindtap="goToBindHuhao">户号绑定</button>
+    </view>
+  </view>
+
+  <!-- 通知列表 -->
+  <view class="notice-list">
+    <view class="notice-item" wx:for="{{notices}}" wx:key="index">
+      {{index + 1}}、{{item}}
+    </view>
+  </view>
+</view>

pages/FirstBangDing/FirstBangDing.wxss

@@ -0,0 +1,160 @@
+/* pages/homepage/homepage.wxss */
+.container1 {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0;
+  box-sizing: border-box;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  height: 320rpx;
+  margin-top: -32rpx;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 101%;
+  height: 100%;
+}
+
+
+.logo {
+  position: absolute;
+  left: 32rpx;
+  bottom: 80rpx;
+  width: 280rpx;
+  height: 100rpx;
+  z-index: 2;
+}
+
+.welcome-card {
+  position: absolute;
+  left: 4%;
+  top: 135px;
+  width: 92%;
+  height: 210px;
+  opacity: 1;
+  background-color: #fff;
+  border-radius: 8px;
+  /* 圆角 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-bg {
+  position: absolute;
+  width: 105%;
+  /* 宽度超出 .welcome-card 的 5%，实现覆盖效果 */
+  left: -2.5%;
+  /* 向左偏移 2.5%，使背景居中 */
+  height: 100%;
+  /* 高度与 .welcome-card 一致 */
+  opacity: 1;
+  background-color: #f0f0f0;
+  /* 背景色 */
+  border-radius: 8px;
+  /* 圆角 */
+}
+
+.card-content {
+  position: relative;
+  padding: 40rpx 32rpx;
+  z-index: 2;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: 500;
+  margin-bottom: 12rpx;
+  letter-spacing: 0px;
+  line-height: 24px;
+  color: rgba(46, 48, 56, 1);
+  text-align: left;
+  vertical-align: top;
+  font-family: 'PingFang SC', sans-serif;
+}
+
+.subtitle {
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 32rpx;
+  letter-spacing: 4rpx;
+}
+
+.bind-button {
+  width: 200rpx !important;
+  height: 70rpx;
+  line-height: 70rpx;
+  background: #4080FF;
+  color: #fff;
+  font-family: 'PingFang SC', sans-serif;
+  font-size: 30rpx;
+  border-radius: 40rpx;
+  margin-left: 0rpx;
+  /* 向左50rpx */
+  top: 40rpx;
+  /* 向下50rpx */
+}
+
+.bind-button::after {
+  border: none;
+}
+
+.notice-list {
+  margin: 32rpx;
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.6;
+  margin-top: auto;
+}
+
+.notice-item {
+  font-size: 26rpx;
+  line-height: 1.8;
+  margin-bottom: 16rpx;
+  color: #999;
+  position: relative;
+  top: 100rpx;
+  /* 向下移动 10rpx */
+}
+
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+  border-top: 1rpx solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.tab-item.active {
+  color: #4080FF;
+}
+
+.divider {
+  left: 36px;
+  top: 201px;
+  width: 15px;
+  height: 0px;
+  opacity: 1;
+  border: 1px solid rgba(232, 232, 232, 1);
+}

pages/huhaobangding/huhaobangding.js

@@ -0,0 +1,69 @@
+const app = getApp()
+
+Page({
+  data: {
+    selectedTag: '',
+    showCustomInput: false,
+    customTagLength: 0,
+    customTagName: '',
+    tzd: '/static_file/jcsfcjtzd.jpg',
+    showPreview: false
+  },
+
+  selectTag(e) {
+    const tag = e.currentTarget.dataset.tag;
+    this.setData({
+      selectedTag: tag,
+      showCustomInput: tag === '自定义'
+    });
+  },
+
+  onCustomInput(e) {
+    const value = e.detail.value;
+    this.setData({
+      customTagName: value,
+      customTagLength: value.length
+    });
+  },
+
+  // 显示抽屉
+  showDrawer() {
+    this.setData({
+      showDrawer: true
+    });
+  },
+
+  // 隐藏抽屉
+  hideDrawer() {
+    this.setData({
+      showDrawer: false
+    });
+  },
+
+
+  // 拨打电话
+  makePhoneCall() {
+    wx.makePhoneCall({
+      phoneNumber: '客服电话号码'
+    });
+  },
+
+  // 修改预览图片方法
+  previewImage: function() {
+    this.setData({
+      showPreview: true
+    });
+  },
+
+  // 关闭预览
+  closePreview: function() {
+    this.setData({
+      showPreview: false
+    });
+  },
+
+  // 防止点击图片内容时关闭预览
+  preventBubble: function() {
+    return;
+  }
+});

pages/huhaobangding/huhaobangding.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "户号绑定",
+  "backgroundColor": "#F8F8F8"
+}

pages/huhaobangding/huhaobangding.wxml

@@ -0,0 +1,82 @@
+<view class="container">
+  <view class="form-group">
+    <view class="form-item">
+      <text class="label">户号</text>
+      <input type="text" placeholder="请绑定缴费户号" placeholder-class="placeholder" />
+      <view class="check-auth-btn" bindtap="showDrawer">
+        查看获取方式
+      </view>
+    </view>
+
+    <view class="form-item">
+      <text class="label">手机号</text>
+      <input type="number" placeholder="请输入手机号" placeholder-class="placeholder" />
+    </view>
+  </view>
+
+  <view class="group-select">
+    <text class="section-title">设置分组(可选)</text>
+    <view class="tag-group">
+      <view class="tag {{selectedTag === '家' ? 'active' : ''}}" bindtap="selectTag" data-tag="家">家</view>
+      <view class="tag {{selectedTag === '父母' ? 'active' : ''}}" bindtap="selectTag" data-tag="父母">父母</view>
+      <view class="tag {{selectedTag === '公司' ? 'active' : ''}}" bindtap="selectTag" data-tag="公司">公司</view>
+      <view class="tag {{selectedTag === '出租' ? 'active' : ''}}" bindtap="selectTag" data-tag="出租">出租</view>
+      <view class="tag {{selectedTag === '朋友' ? 'active' : ''}}" bindtap="selectTag" data-tag="朋友">朋友</view>
+      <view class="tag {{selectedTag === '自定义' ? 'active' : ''}}" bindtap="selectTag" data-tag="自定义">自定义</view>
+    </view>
+
+    <block wx:if="{{showCustomInput}}">
+      <view class="custom-group">
+        <view class="custom-input">
+          <input type="text" placeholder="请输入标签名称" placeholder-class="placeholdersecond" bindinput="onCustomInput" />
+          <text class="count">{{customTagLength}}/4字</text>
+        </view>
+      </view>
+    </block>
+  </view>
+
+  <view class="submit-btn">
+    <button type="primary">确认绑定</button>
+  </view>
+
+  <view class="tips">
+    <text>1、请确认上述信息是您定期水表。</text>
+    <text>2、如果您的水表为合收费表，我们将绑定的是您对应的主表信息。</text>
+  </view>
+
+</view>
+
+<view class="drawer-mask" wx:if="{{showDrawer}}" bindtap="hideDrawer"></view>
+<view class="drawer-container {{showDrawer ? 'show' : ''}}">
+  <view class="drawer-close"></view>
+  <view class="drawer-title">获取户号方式</view>
+
+  <view class="auth-method">
+    <image class="auth-method-icon" src="/static_file/tzd.png" mode="aspectFit"></image>
+    <view class="auth-method-content">
+      <view class="auth-method-title">检查水费催缴通知单</view>
+      <view class="auth-method-desc">从纸质版水费催缴通知单上查看用水户号。</view>
+    </view>
+    <view class="preview" bindtap="previewImage">
+        <image class="preview-icon" src="/static_file/yl.png"></image>
+        <text class="preview-text">预览图</text>
+      </view>
+  </view>
+
+  <view class="auth-method">
+    <image class="auth-method-icon" src="/static_file/phone.png" mode="aspectFit"></image>
+    <view class="auth-method-content">
+      <view class="auth-method-title">电话查询</view>
+      <view class="auth-method-desc">提供户号地址拨打服热线电话，客服在线时间为早9:00至晚20:00。</view>
+    </view>
+    <view class="auth-method-action" bindtap="makePhoneCall">拨打电话</view>
+  </view>
+</view>
+
+<!-- 添加自定义预览模态框 -->
+<view class="preview-modal" wx:if="{{showPreview}}" bindtap="closePreview">
+  <view class="preview-content" catchtap="preventBubble">
+    <image class="preview-image" src="{{tzd}}" mode="aspectFit"></image>
+    <view class="close-btn" bindtap="closePreview">×</view>
+  </view>
+</view>

pages/huhaobangding/huhaobangding.wxss

@@ -0,0 +1,323 @@
+.container {
+  padding: 30rpx;
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group {
+  background-color: #FFFFFF;
+  border-radius: 18rpx;
+  padding: 0 40rpx;
+  margin-bottom: 30rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  padding: 34rpx 0;
+}
+
+.form-item:first-child {
+  border-bottom: 1rpx solid #EEEEEE;
+}
+
+.label {
+  width: 120rpx;
+  color: #333333;
+  font-size: 30rpx;
+  text-align: left;
+  margin-right: 20rpx;
+}
+
+input {
+  flex: 1;
+  font-size: 30rpx;
+  color: #333333;
+  padding: 0 20rpx;
+  text-align: right;
+}
+
+.placeholder {
+  color: #999999;
+  text-align: right;
+  font-size: 28rpx;
+}
+
+.placeholdersecond {
+  color: #999999;
+  text-align: left;
+  font-size: 28rpx;
+}
+
+.verify-btn {
+  color: #0066FF;
+  font-size: 28rpx;
+  padding-left: 30rpx;
+}
+
+.group-select {
+  background-color: #FFFFFF;
+  border-radius: 8rpx;
+  padding: 0 40rpx;
+  padding-top: 20rpx;
+  margin-bottom: 30rpx;
+  position: relative;
+  width: calc(100% - 80rpx);
+  overflow: visible;
+}
+
+.section-title {
+  font-size: 30rpx;
+  color: #333333;
+  padding: 34rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1rpx;
+  background-color: #EEEEEE;
+}
+
+.tag-group {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12rpx;
+  padding: 30rpx 0;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.tag {
+  padding: 12rpx 24rpx;
+  background-color: #F5F5F5;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: rgba(0, 0, 0, 1);
+  display: inline-block;
+}
+
+.tag.active {
+  background-color: #E6F0FF;
+  color: #0066FF;
+}
+
+.custom-group {
+  position: relative;
+  left: 0;
+  right: 0;
+  background-color: #FFFFFF;
+  padding: 20rpx 0;
+  margin-top: 0;
+}
+
+.custom-input {
+  display: flex;
+  align-items: center;
+  background-color: #F5F5F5;
+  border-radius: 8rpx;
+  padding: 24rpx;
+  margin: 0;
+}
+
+.custom-input input {
+  text-align: left;
+}
+
+.count {
+  font-size: 26rpx;
+  color: #999999;
+  margin-left: 24rpx;
+}
+
+.submit-btn {
+  margin: 50rpx 5%;
+  width: 90%;
+}
+
+.submit-btn button {
+  background-color: #0066FF;
+  color: #FFFFFF;
+  font-size: 32rpx;
+  border-radius: 44rpx;
+  width: 100%;
+  height: 88rpx;
+  line-height: 88rpx;
+}
+
+.tips {
+  padding: 0 30rpx;
+  margin-top: 0;
+}
+
+.tips text {
+  display: block;
+  font-size: 26rpx;
+  color: #999999;
+  line-height: 1.8;
+  margin-bottom: 10rpx;
+}
+
+.check-auth-btn {
+  background-color: rgba(45, 128, 254, 0.12);
+  font-family: 'PingFang SC', sans-serif;
+  border-radius: 2px;
+  padding: 10rpx 20rpx;
+  color: rgba(31, 103, 212, 1);
+  font-size: 28rpx;
+  
+}
+
+.drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+.drawer-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #FFFFFF;
+  border-radius: 24rpx 24rpx 0 0;
+  z-index: 101;
+  padding: 40rpx 30rpx;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.drawer-container.show {
+  transform: translateY(0);
+}
+
+.drawer-title {
+  text-align: center;
+  font-size: 32rpx;
+  color: #333333;
+  font-weight: 500;
+  margin-bottom: 40rpx;
+}
+
+.auth-method {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #EEEEEE;
+}
+
+.auth-method:last-child {
+  border-bottom: none;
+}
+
+.auth-method-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 20rpx;
+}
+
+.auth-method-content {
+  flex: 1;
+}
+
+.auth-method-title {
+  font-size: 30rpx;
+  color: #333333;
+  margin-bottom: 8rpx;
+}
+
+.auth-method-desc {
+  font-size: 26rpx;
+  color: #999999;
+}
+
+.auth-method-action {
+  padding: 10rpx 30rpx;
+  background-color: #0066FF;
+  border-radius: 30rpx;
+  color: #FFFFFF;
+  font-size: 26rpx;
+}
+
+.drawer-close {
+  width: 100%;
+  height: 10rpx;
+  background-color: #D8D8D8;
+  border-radius: 5rpx;
+  margin: 0 auto 30rpx;
+  max-width: 80rpx;
+}
+
+/* 预览图样式 */
+.preview {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  color: #007bff;
+  cursor: pointer;
+}
+
+.preview-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+
+.preview-text {
+  font-size: 14px;
+  color: rgba(104, 108, 128, 1);
+}
+
+
+.preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.preview-content {
+  position: relative;
+  width: 80%;
+  max-width: 600rpx;
+  background: transparent;
+}
+
+.preview-image {
+  width: 100%;
+  height: auto;
+}
+
+.close-btn {
+  position: absolute;
+  top: -80rpx;
+  right: 0;
+  width: 60rpx;
+  height: 60rpx;
+  background: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #333;
+}