water-uniApp/pages/bindPhone/bindPhone.vue

<template>
  <view class="container">
    <view class="card-wrapper">
      <!-- 顶部蓝色卡片 -->
      <view class="top-card">
        <view class="top-left">物联网智能抄表管理系统</view>
		
        <picker @change="changeCity" :value="cityIndex" :range="cityList">
           <view class="top-right">{{ cityList.length > 0 ? cityList[cityIndex] : '请选择城市' }}</view>
        </picker>
      </view>

      <!-- 缴费单位 -->
      <view class="unit-section">
        <text class="label">缴费单位</text>
        <picker @change="changeCompany" :value="companyIndex" :range="companyList">
            <view class="unit-box">
              <text class="unit-name">{{ companyList.length > 0 ? companyList[companyIndex] : '请选择缴纳单位' }}</text>
              <text class="arrow">＞</text>
            </view>
        </picker>
      </view>

      <!-- 电话输入 -->
      <view class="input-section">
        <text class="label">电话号码</text>
        <input type="text" placeholder="请输入电话号码" v-model="phone" class="input" />
      </view>
	  
	  <!-- 密码输入 -->
	  <view class="input-section">
	    <text class="label">用户密码</text>
	    <input type="text" password  placeholder="请输入用户密码" v-model="password" class="input" />
	  </view>

      <!-- 协议 -->
      <view class="agreement">
        <checkbox :checked="checked" @click="checked = !checked" />
        <text>同意</text>
        <navigator url="/pages/agreement/index">
          <text class="link" @tap="gotourl('/pages/agreement/payfees')">《缴费协议》</text>
        </navigator>
      </view>

      <!-- 提交按钮 -->
      <button type="primary" class="confirm-btn" :loading="loading" @click="bindPhone">确定绑定</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { post, get } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app'

const phone = ref('')
const password = ref('')
const checked = ref(false)
const loading = ref(false)

const cityList = ref([]); 
const cityIndex = ref(0);
const changeCity = e => {
  cityIndex.value = e.detail.value
}


const companyList = ref([]); 
const companyIndex = ref(0)
const changeCompany = e => {
  companyIndex.value = e.detail.value
}

const gotourl = (text) => {
	uni.navigateTo({
		url: text
	});
}

const bindPhone = async () => {
  if (!phone.value) {
    return uni.showToast({ title: '请输入手机号', icon: 'none' })
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    return uni.showToast({ title: '手机号格式不正确', icon: 'none' })
  }
  if (!password.value) {
    return uni.showToast({ title: '请输入用户密码', icon: 'none' })
  }
  if (!checked.value) {
    return uni.showToast({ title: '请同意协议', icon: 'none' })
  }

  loading.value = true

  try {
    const res = await get('/api/waterUser/findByPhoneNumber', {
      phoneNumber: phone.value,
	  password: password.value
    })

    // 这里根据接口返回数据继续判断
    if (res.code === '200') {
      uni.showToast({ title: '绑定成功', icon: 'success' })
	   const userInfoStr = encodeURIComponent(JSON.stringify(res.data))
	  
	   // 存储用户信息
	   uni.setStorageSync('userInfo', res.data)
	   
	   // 关闭所有页面，跳转首页
	   uni.navigateTo({
	     url: '/pages/index/index'
	   })
    } else {
      uni.showToast({ title: res.message || '绑定失败', icon: 'none' })
    }
  } catch (err) {
    // console.log('请求失败：', err)
    uni.showToast({ title: '请求失败，请稍后重试', icon: 'none' })
  } finally {
    loading.value = false
  }
}


const getCity = async () => {
	try {
	  const res = await get('/api/communityManage/getCity')
	
	  // 这里根据接口返回数据继续判断
	  if (res.code === '200') {
	    cityList.value = res.data.map(item => item.name)
		cityIndex.value = 0
	  } else {
	    uni.showToast({ title: res.message || '获取失败', icon: 'none' })
	  }
	} catch (err) {
	  // console.log('请求失败：', err)
	  uni.showToast({ title: '请求失败，请稍后重试', icon: 'none' })
	}
}

const getCompany = async () => {
	try {
	  const res = await get('/api/companyManage/findAll')
	
	  // 这里根据接口返回数据继续判断
	  if (res.code === '200') {
	    companyList.value = res.data.map(item => item.companyName)
		cityIndex.value = 0
	  } else {
	    uni.showToast({ title: res.message || '获取失败', icon: 'none' })
	  }
	} catch (err) {
	  // console.log('请求失败：', err)
	  uni.showToast({ title: '请求失败，请稍后重试', icon: 'none' })
	}
}

onLoad((options) => {
	if (options.phone) {
		  phone.value = decodeURIComponent(options.phone); // 解码手机号
		  // console.log('接收到的手机号:', phone.value);
	}
  getCity()
  getCompany()
})
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
    min-height: 100vh;
    padding: 30rpx;
    box-sizing: border-box;
}

.card-wrapper {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0rpx 0rpx 60rpx 0rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.top-card {
  background: linear-gradient(to right, #6ca3fe, #3f83fd);
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 20rpx 20px 30px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-left {
  font-size: 26rpx;
}
.top-right {
  background: white;
  color: #2979ff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.unit-section {
  padding: 20px 30rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  margin-top: -20px;
  background: #ffffff;
}
.label {
  font-size: 28rpx;
  color: #b5b5b5;
  margin-bottom: 10rpx;
  display: block;
}
.unit-box {
  border-radius: 12rpx;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unit-name {
  font-size: 30rpx;
}
.arrow {
  font-size: 34rpx;
  color: #999;
}

.input-section {
  padding: 20rpx 30rpx;
}
.input {
  padding: 17rpx;
  border: 1px solid #ccc;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  font-size: 26rpx;
  padding: 0 30rpx;
  margin-top: 40rpx;
}
.link {
  color: #2979ff;
  margin-left: 10rpx;
}
.confirm-btn {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  border-radius: 35rpx;
  background: linear-gradient(to bottom, #6ca3fe, #3f83fd);
  color: white;
  font-size: 30rpx;
}
</style>