agent0.5

pages/agents/agents.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="lease-page">
+  <view class="agents-page">
     <!-- 头部区域 -->
     <custom-nav-bar3 title=""></custom-nav-bar3>
     <view class="header">
@@ -8,193 +8,216 @@
 
     <!-- 主要内容区域 -->
     <view class="main-content">
-      <!-- 租赁信息表单 -->
+      <!-- 表单区域 -->
-      <view class="form-section"></view>
+      <view class="form-section">
-    </view>
+        <!-- 姓名输入 -->
+        <view class="form-item">
+          <view class="form-label">请填写您的姓名</view>
+          <input
+            v-model="formData.name"
+            class="form-input"
+            maxlength="20"
+            placeholder="请输入您的姓名"
+          />
+        </view>
 
-    <!-- 底部导航已由系统tabBar处理 -->
+        <!-- 联系方式输入 -->
+        <view class="form-item">
+          <view class="form-label">请填写您的联系方式</view>
+          <input
+            v-model="formData.phone"
+            class="form-input"
+            maxlength="11"
+            placeholder="请输入您的联系方式"
+            type="number"
+          />
+        </view>
+
+        <!-- 身份证号码输入 -->
+        <view class="form-item">
+          <view class="form-label">请输入您的身份证号码</view>
+          <input
+            v-model="formData.idCard"
+            class="form-input"
+            maxlength="18"
+            placeholder="请输入您的身份证号码"
+          />
+        </view>
+
+        <!-- 服务区域选择 -->
+        <view class="form-item">
+          <view class="form-label">请选择您的服务区域</view>
+          <view class="form-selector" @click="selectServiceArea">
+            <text class="selector-text">{{ formData.serviceArea || '请选择服务区域' }}</text>
+            <text class="arrow-icon">></text>
+          </view>
+        </view>
+
+        <!-- 详细地址输入 -->
+        <view class="form-item">
+          <view class="form-label">请输入您的详细地址</view>
+          <input
+            v-model="formData.detailAddress"
+            class="form-input"
+            maxlength="100"
+            placeholder="请输入您的详细地址"
+          />
+        </view>
+
+        <!-- 协议同意 -->
+        <view class="agreement-section">
+          <view class="agreement-item" @click="toggleAgreement">
+            <view :class="{ checked: formData.agreed }" class="checkbox">
+              <text v-if="formData.agreed" class="checkmark">✓</text>
+            </view>
+            <text class="agreement-text">
+              我已阅读并同意
+              <text class="agreement-link" @click.stop="showAgreement">《代理商协议》</text>
+            </text>
+          </view>
+        </view>
+
+        <!-- 提交按钮 -->
+        <view class="submit-section">
+          <button :disabled="!canSubmit" class="submit-btn" @click="submitApplication">
+            申请成为代理商
+          </button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 import commonEnum from '../../enum/commonEnum'
-import { getLocationWithPermission, handleLocationError } from '@/utils/permission.js'
 
 export default {
-  name: 'LeasePage',
+  name: 'AgentsPage',
   computed: {
     commonEnum() {
       return commonEnum
     },
+    canSubmit() {
+      return (
+        this.formData.name &&
+        this.formData.phone &&
+        this.formData.idCard &&
+        this.formData.serviceArea &&
+        this.formData.detailAddress &&
+        this.formData.agreed
+      )
+    },
   },
   onLoad() {
-    // 页面加载时获取当前位置
+    // 页面加载时的逻辑
-    //this.getCurrentLocation()
   },
   data() {
     return {
       formData: {
         name: '张珊珊',
         phone: '',
-        address: '',
+        idCard: '',
-        detailAddress: '',
+        serviceArea: '福建省宁德市福鼎市',
-        equipment: '',
+        detailAddress: '太姥山镇秦屿大道2号',
-        period: '1年',
+        agreed: true,
       },
-      currentLocation: null,
-      showDetails: false,
-      totalAmount: '100.10',
     }
   },
   methods: {
-    // 获取当前位置信息
+    // 选择服务区域
-    async getCurrentLocation() {
+    selectServiceArea() {
-      try {
+      uni.showActionSheet({
-        uni.showLoading({
+        itemList: [
-          title: '获取位置中...',
+          '福建省宁德市福鼎市',
-        })
+          '福建省宁德市霞浦县',
-
+          '福建省宁德市古田县',
-        const location = await getLocationWithPermission()
+          '福建省宁德市屏南县',
-        console.log('位置信息:', location)
+        ],
-        this.reverseGeocode(location.latitude, location.longitude)
-      } catch (err) {
-        uni.hideLoading()
-        handleLocationError(err)
-      }
-    },
-
-    // 处理位置信息
-    reverseGeocode(latitude, longitude) {
-      uni.hideLoading()
-
-      // 直接使用坐标信息，避免依赖外部API
-      this.currentLocation = {
-        company: '当前位置',
-        address: `纬度: ${latitude.toFixed(6)}, 经度: ${longitude.toFixed(6)}`,
-        latitude: latitude,
-        longitude: longitude,
-      }
-
-      // 尝试使用uni-app的地理编码（如果平台支持）
-      // #ifdef APP-PLUS || MP-WEIXIN
-      uni.reverseGeocoder({
-        location: {
-          latitude: latitude,
-          longitude: longitude,
-        },
         success: res => {
-          console.log('逆地理编码结果:', res)
+          const areas = [
-          if (res.result) {
+            '福建省宁德市福鼎市',
-            this.currentLocation = {
+            '福建省宁德市霞浦县',
-              company: res.result.addressComponent?.city || '当前位置',
+            '福建省宁德市古田县',
-              address:
+            '福建省宁德市屏南县',
-                res.result.formatted_addresses?.recommend || res.result.address || '未知地址',
+          ]
-              latitude: latitude,
+          this.formData.serviceArea = areas[res.tapIndex]
-              longitude: longitude,
-            }
-          }
         },
-        fail: err => {
-          console.log('逆地理编码不可用，使用坐标信息')
-        },
-      })
-      // #endif
-
-      uni.showToast({
-        title: '位置获取成功',
-        icon: 'success',
       })
     },
 
-    selectAddress() {
+    // 切换协议同意状态
-      // 选择地址逻辑
+    toggleAgreement() {
-      uni.showToast({
+      this.formData.agreed = !this.formData.agreed
-        title: '选择地址功能',
+    },
-        icon: 'none',
+
+    // 显示代理商协议
+    showAgreement() {
+      uni.showModal({
+        title: '代理商协议',
+        content: '这里是代理商协议的详细内容...',
+        showCancel: false,
+        confirmText: '我知道了',
       })
     },
 
-    useCurrentLocation() {
+    // 提交申请
-      if (!this.currentLocation) {
+    submitApplication() {
-        this.getCurrentLocation()
+      if (!this.canSubmit) {
+        uni.showToast({
+          title: '请完善所有必填信息',
+          icon: 'none',
+        })
         return
       }
 
-      this.formData.address = this.currentLocation.company + ' ' + this.currentLocation.address
+      uni.showLoading({
-      uni.showToast({
+        title: '提交中...',
-        title: '已使用当前定位',
-        icon: 'success',
       })
+
+      // 模拟提交
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showModal({
+          title: '提交成功',
+          content: '您的代理商申请已提交，我们将在3个工作日内审核并联系您。',
+          showCancel: false,
+          confirmText: '确定',
+          success: () => {
+            // 重置表单
+            this.resetForm()
+          },
+        })
+      }, 2000)
     },
-    selectEquipment() {
+
-      // 选择设备逻辑
+    // 重置表单
-      uni.showActionSheet({
+    resetForm() {
-        itemList: ['节能灶', '燃烧器', '燃气灶', '电磁炉'],
+      this.formData = {
-        success: res => {
+        name: '',
-          const equipmentList = ['节能灶', '燃烧器', '燃气灶', '电磁炉']
+        phone: '',
-          this.formData.equipment = equipmentList[res.tapIndex]
+        idCard: '',
-        },
+        serviceArea: '',
-      })
+        detailAddress: '',
-    },
+        agreed: false,
-    selectPeriod() {
+      }
-      // 选择租赁周期逻辑
-      uni.showActionSheet({
-        itemList: ['1个月', '3个月', '6个月', '1年', '2年'],
-        success: res => {
-          const periodList = ['1个月', '3个月', '6个月', '1年', '2年']
-          this.formData.period = periodList[res.tapIndex]
-        },
-      })
-    },
-    toggleDetails() {
-      this.showDetails = !this.showDetails
-    },
-    handlePayment() {
-      // 支付逻辑
-      uni.showModal({
-        title: '确认支付',
-        content: `确认支付 ¥${this.totalAmount} 吗？`,
-        success: res => {
-          if (res.confirm) {
-            uni.showToast({
-              title: '支付成功',
-              icon: 'success',
-            })
-          }
-        },
-      })
-    },
-    // 页面跳转现在由系统tabBar处理
-    goToHome() {
-      uni.switchTab({
-        url: '/pages/index/index',
-      })
-    },
-    goToProfile() {
-      uni.switchTab({
-        url: '/pages/profile/profile',
-      })
     },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.lease-page {
+.agents-page {
   position: relative;
   background: #f3f5f6;
-  border: #120d0d solid 2rpx;
 }
 
 // 头部区域
 .header {
   position: relative;
-  //border: #120d0d solid 2rpx;
   background: #fedfcd;
 
   .agent-background {
     position: relative;
-
     width: 750rpx;
   }
 }
@@ -207,329 +230,141 @@ export default {
   border-radius: 40rpx 40rpx 0 0;
   margin: 0 30rpx;
   padding: 40rpx;
-  min-height: 60vh;
-  //border: #120d0d solid 2rpx;
-  //box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
 }
 
 // 表单区域
 .form-section {
-  margin-bottom: 60rpx;
+  .form-title {
-  //border: #0c1387 solid 2rpx;
+    font-size: 36rpx;
-
+    font-weight: bold;
-  .section-header {
+    color: #333;
-    display: flex;
+    text-align: center;
-    align-items: center;
+    margin-bottom: 60rpx;
-    margin-bottom: 40rpx;
-    //border: red solid 2rpx;
-
-    .section-indicator {
-      width: 8rpx;
-      height: 40rpx;
-      background: #f15a04;
-      border-radius: 4rpx;
-      margin-right: 20rpx;
-    }
-
-    .section-title {
-      font-size: 32rpx;
-      font-weight: bold;
-      color: #333;
-    }
   }
-}
 
-.form-fields {
   .form-item {
-    //margin-bottom: 40rpx;
+    margin-bottom: 40rpx;
-    display: flex;
-    align-items: center;
-    border-bottom: 1rpx solid #d8d8d8;
 
-    .field-label {
+    .form-label {
-      display: block;
       font-size: 28rpx;
       color: #333;
-      font-weight: 400;
+      margin-bottom: 20rpx;
-      flex: 1;
+      font-weight: 500;
-      //border: 2rpx solid #d81313;
     }
 
-    .field-input {
+    .form-input {
-      //border: 2rpx solid #d81313;
+      width: 100%;
-      flex: 3;
       height: 80rpx;
-      padding: 0 20rpx;
+      background: #ffffff;
+      border: 2rpx solid #e8e8e8;
+      border-radius: 12rpx;
+      padding: 0 24rpx;
       font-size: 28rpx;
+      color: #333;
+      box-sizing: border-box;
 
       &:focus {
-        border-color: #ff9a9e;
+        border-color: #ff6b6b;
-        background: #fff;
+      }
+
+      &::placeholder {
+        color: #999;
+      }
+    }
+
+    .form-selector {
+      width: 100%;
+      height: 80rpx;
+      background: #ffffff;
+      border: 2rpx solid #e8e8e8;
+      border-radius: 12rpx;
+      padding: 0 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+
+      .selector-text {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+
+      .arrow-icon {
+        font-size: 24rpx;
+        color: #999;
+        transform: rotate(90deg);
       }
     }
   }
 }
 
-// 地址表单项特殊样式
+// 协议区域
-.address-form-item {
+.agreement-section {
-  margin-bottom: 20rpx;
+  margin-bottom: 60rpx;
+
+  .agreement-item {
+    display: flex;
+    align-items: center;
+
+    .checkbox {
+      width: 32rpx;
+      height: 32rpx;
+      border: 2rpx solid #ff6b6b;
+      border-radius: 6rpx;
+      margin-right: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ffffff;
+
+      &.checked {
+        background: #f15a04;
+      }
+
+      .checkmark {
+        color: #ffffff;
+        font-size: 20rpx;
+        font-weight: bold;
+      }
+    }
+
+    .agreement-text {
+      font-size: 26rpx;
+      color: #666;
+      flex: 1;
+
+      .agreement-link {
+        color: #f15a04;
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
-// 地址选择器
+// 提交区域
-.address-selector {
+.submit-section {
-  flex: 3;
+  .submit-btn {
-  display: flex;
+    width: 100%;
-  align-items: center;
+    height: 88rpx;
-  justify-content: space-between;
+    background: #f15a04;
-  height: 80rpx;
+    color: #ffffff;
-  padding: 0 20rpx;
+    border: none;
-
+    border-radius: 12rpx;
-  border-radius: 12rpx;
+    font-size: 32rpx;
-
+    font-weight: bold;
-  transition: all 0.3s ease;
-
-  &:active {
-    background: #f0f0f0;
-    border-color: #ff6b6b;
-  }
-
-  .address-text {
-    flex: 1;
-    font-size: 28rpx;
-    color: #666;
-    margin-right: 20rpx;
-  }
-
-  .map-icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40rpx;
-    height: 40rpx;
-    background: #f15a04;
-    border-radius: 50%;
 
-    .map-icon {
+    &:disabled {
-      font-size: 24rpx;
+      background: #cccccc;
-      color: white;
+      color: #999999;
-    }
-  }
-}
-
-// 位置建议卡片
-.location-suggestion {
-  margin-bottom: 40rpx;
-
-  .location-card {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: white;
-    border: 2rpx solid #e8f4fd;
-    border-radius: 16rpx;
-    padding: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 6rpx;
-      background: #f3f5f6;
-      border-radius: 6rpx 0 0 6rpx;
     }
 
-    .location-content {
+    &:active {
-      flex: 1;
+      transform: scale(0.98);
-      margin-right: 20rpx;
-
-      .location-header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8rpx;
-
-        .location-title {
-          font-size: 24rpx;
-          color: #f15a04;
-          font-weight: 500;
-          margin-right: 12rpx;
-        }
-
-        .location-company {
-          font-size: 26rpx;
-          color: #333;
-          font-weight: 500;
-        }
-      }
-
-      .location-address {
-        font-size: 24rpx;
-        color: #666;
-        line-height: 1.4;
-      }
     }
-
-    .use-location-btn {
-      background: #f3f5f5;
-      color: #000000;
-      border: none;
-      border-radius: 24rpx;
-      padding: 12rpx 24rpx;
-      font-size: 24rpx;
-      font-weight: 500;
-      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
-      transition: all 0.3s ease;
-
-      &:active {
-        transform: translateY(2rpx);
-        box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
-      }
-    }
-
-    .get-location-btn {
-      background: #f15a04;
-      color: #ffffff;
-      border: none;
-      border-radius: 24rpx;
-      padding: 12rpx 24rpx;
-      font-size: 24rpx;
-      font-weight: 500;
-      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
-      transition: all 0.3s ease;
-
-      &:active {
-        transform: translateY(2rpx);
-        box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
-      }
-    }
-  }
-}
-
-// 选择器
-.selector {
-  flex: 3;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 80rpx;
-
-  border-radius: 12rpx;
-  padding: 0 20rpx;
-
-  transition: all 0.3s ease;
-
-  &:active {
-    background: #f0f0f0;
-    border-color: #ff6b6b;
-  }
-
-  .selector-text {
-    font-size: 28rpx;
-    color: #666;
-  }
-
-  .arrow-icon {
-    font-size: 24rpx;
-    color: #999;
-    transition: transform 0.3s ease;
-  }
-
-  &:active .arrow-icon {
-    transform: scale(1.2);
-  }
-}
-
-// 支付区域
-.payment-section {
-  display: flex;
-  flex-direction: column;
-
-  .pay-button {
-    width: 100%;
-    height: 100%;
-    background: #f15a04;
-    color: #fff;
-    border: none;
-    border-radius: 10rpx;
-    font-size: 32rpx;
-    font-weight: bold;
-    margin-bottom: 40rpx;
-    box-shadow: 0 10rpx 30rpx rgba(255, 154, 158, 0.3);
-  }
-
-  .payment-details {
-    .details-header {
-      display: flex;
-      align-items: center;
-
-      padding: 20rpx 0;
-      border-bottom: 2rpx solid #f0f0f0;
-
-      .details-title {
-        font-size: 28rpx;
-        color: #f15a04;
-        padding-right: 10rpx;
-      }
-
-      .arrow-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: transform 0.3s ease;
-
-        &.expanded {
-          transform: rotate(180deg);
-        }
-      }
-
-      .details-arrow {
-        width: 20rpx;
-        height: 10rpx;
-      }
-    }
-
-    .details-content {
-      padding: 20rpx 0;
-
-      .detail-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20rpx;
-
-        .detail-label {
-          font-size: 28rpx;
-          color: #868686;
-        }
-
-        .detail-value {
-          font-size: 28rpx;
-          color: #3d3d3d;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-
-// 底部导航样式已移除，使用系统tabBar
-
-// 动画
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
   }
 }
 </style>