移动端获取位置开发

pages/job/publishJob.vue

@@ -111,15 +111,13 @@
                 </view>
                 <view class="form-group">
                     <view class="label">工作地点</view>
-                    <view class="location-input-container">
-                        <input 
-                            class="input location-input" 
-                            placeholder="请输入具体工作地址" 
-                            v-model="formData.jobLocation"
-                        />
-                        <view class="location-icon-btn" @click="chooseLocation">
-                            <uni-icons type="location" size="20" color="#333"></uni-icons>
-                        </view>
+                    <input 
+                        class="input" 
+                        placeholder="请输入具体工作地址" 
+                        v-model="formData.jobLocation"
+                    />
+                    <view class="location-text-btn" @click="chooseLocation">
+                        <text class="location-btn-text">获取定位</text>
                     </view>
                 </view>
                 <view class="form-group">
@@ -594,6 +592,15 @@ const validateForm = () => {
         }
     }
 
+    // 验证定位信息
+    if (!formData.latitude || !formData.longitude) {
+        uni.showToast({
+            title: '请点击"获取定位"按钮获取工作地点位置',
+            icon: 'none'
+        });
+        return false;
+    }
+
     // 薪资验证
     const minSalary = parseFloat(formData.minSalary);
     const maxSalary = parseFloat(formData.maxSalary);
@@ -792,36 +799,28 @@ const validateForm = () => {
         }
     }
     
-    // 工作地点输入容器样式
-    .location-input-container {
+    // 工作地点文字按钮样式
+    .location-text-btn {
+        width: 100%;
+        height: 80rpx;
+        background: #256BFA;
+        border: none;
+        border-radius: 12rpx;
         display: flex;
         align-items: center;
-        position: relative;
+        justify-content: center;
+        margin-top: 20rpx;
+        transition: all 0.3s ease;
         
-        .location-input {
-            flex: 1;
-            padding-right: 100rpx;
+        .location-btn-text {
+            font-size: 28rpx;
+            color: #fff;
+            font-weight: 500;
         }
         
-        .location-icon-btn {
-            position: absolute;
-            right: 0;
-            top: 44%;
-            transform: translateY(-50%);
-            width: 80rpx;
-            height: 60rpx;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #f0f0f0;
-            border: none;
-            border-radius: 12rpx;
-            transition: all 0.3s ease;
-            z-index: 99;
-            
-            &:active {
-                transform: translateY(-50%) scale(0.95);
-            }
+        &:active {
+            background: #1a5cd9;
+            transform: scale(0.98);
         }
     }
 }