Browse Source

用户登录定位

jiayubo 3 days ago
parent
commit
b1fd17082e
5 changed files with 119 additions and 184 deletions
  1. 4 2
      api/login.js
  2. 40 1
      pages/login.vue
  3. 69 180
      pages_home/pages/Volunteerside/goodsDetails.vue
  4. 4 1
      store/modules/user.ts
  5. 2 0
      types/store.ts

+ 4 - 2
api/login.js

@@ -1,14 +1,16 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid, referrerType, referrerId) {
+export function login(username, password, code, uuid, referrerType, referrerId, latitude, longitude) {
 	const data = {
 		username,
 		password,
 		code,
 		uuid,
 		referrerType,
-		referrerId
+		referrerId,
+		latitude: Number(latitude) || 0,
+		longitude: Number(longitude) || 0
 	}
 	return request({
 		url: '/login',

+ 40 - 1
pages/login.vue

@@ -41,7 +41,7 @@ import {
   userOrWorker,
 } from '@/api/login';
 import { getUnlimitedQRCode } from '@/api/qrcode'
-const imagePath = '/static/9efd1.png' // Path to the logo image (red tree)
+const imagePath = '/static/9efd1.png'
 
 // 获取全局配置
 // const globalConfig = getApp().globalData.config;
@@ -52,6 +52,8 @@ const loginForm = reactive({
   uuid: '',
   referrerType: '',
   referrerId: '',
+  latitude: 0,
+  longitude: 0,
 })
 
 
@@ -126,6 +128,32 @@ const handleUserAgrement = () => {
   })
 }
 
+// 获取模糊位置信息
+const getFuzzyLocation = () => {
+  return new Promise((resolve, reject) => {
+    wx.getFuzzyLocation({
+      type: 'gcj02',
+      success: (res) => {
+        console.log('模糊位置获取成功:', res)
+        // 确保经纬度是number类型
+        loginForm.latitude = Number(res.latitude)
+        loginForm.longitude = Number(res.longitude)
+        resolve(res)
+      },
+      fail: (err) => {
+        console.error('模糊位置获取失败:', err)
+        // 位置获取失败时,设为默认值0
+        loginForm.latitude = 0
+        loginForm.longitude = 0
+        resolve({
+          latitude: 0,
+          longitude: 0
+        })
+      }
+    })
+  })
+}
+
 // 登录方法
 const onLogin = () => {
   uni.$u.debounce(handleLogin, 300)
@@ -145,6 +173,13 @@ const handleLogin = async () => {
     title: '登录中,请耐心等待...',
   }) // 使用uni-app的loading方法替代$modal.loading
 
+  try {
+    // 获取模糊位置信息
+    await getFuzzyLocation()
+    console.log('登录位置信息:', loginForm.latitude, loginForm.longitude)
+  } catch (err) {
+    console.log('位置获取失败,继续登录流程')
+  }
 
   // 获取code
   uni.login({
@@ -175,6 +210,10 @@ const pwdLogin = async () => {
     console.error('Store is not defined')
     return
   }
+  
+  // 确保经纬度已添加到loginForm
+  console.log('发送登录请求,经纬度:', loginForm.latitude, loginForm.longitude)
+  
   store.dispatch('Login', loginForm).then(() => {
     loginSuccess()
   })

+ 69 - 180
pages_home/pages/Volunteerside/goodsDetails.vue

@@ -1,33 +1,32 @@
 <template>
   <view>
-    <view>
-      <Detiles></Detiles>
-      <up-card
-        title="服务描述"
-        :thumb="thumb"
-        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
-      >
-        <template #body>
-          <view class="service-description-container">
-            <view class="service-text">{{ listData.businessDescribe }}</view>
-            <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
-          </view>
-        </template>
-      </up-card>
-    </view>
+
+      <!-- 顶部轮播图 -->
+      <view>
+        <Detiles></Detiles>
+      </view>
+
+      <!-- 页面背景整体定位 -->
+      <view class="service-description-position">
+
+        <!-- 价格服务介绍 -->
+        <view class="service-description-container">
+          <view class="service-text">{{ listData.businessDescribe }}</view>
+          <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
+        </view>
+
+      </view>
+
+
+
+
+
     <view class="service-description-box">
-      <up-card
-        title="志愿者介绍"
-        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
-      >
+      <up-card title="志愿者介绍" :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }">
         <template #body>
           <view class="volunteer-card">
             <!-- 左侧图片 -->
-            <image
-              class="volunteer-image"
-              :src="listData.volunteerPicture"
-              mode="aspectFill"
-            ></image>
+            <image class="volunteer-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
 
             <!-- 中间信息(姓名/类别等) -->
             <view class="volunteer-info">
@@ -62,44 +61,25 @@
         </template>
       </up-card>
 
-      <up-card
-        title="个人简介"
-        :thumb="thumb"
-        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
-      >
+      <up-card title="个人简介" :thumb="thumb" :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }">
         <template #body>
           <view class="skill-description">
             {{ listData.skillDescribe }}
           </view>
         </template>
       </up-card>
-      <up-card
-        title="证书"
-        :thumb="thumb"
-        :head-style="{ height: '80rpx', padding: '20rpx' }"
-      >
+      <up-card title="证书" :thumb="thumb" :head-style="{ height: '80rpx', padding: '20rpx' }">
         <template #body>
           <view class="certificate">
-            <up-image
-              v-for="item in certificationPictures"
-              :key="item"
-              :src="item"
-              style="width: 100%"
-              class="certificate-img"
-              mode="widthFix"
-            ></up-image>
+            <up-image v-for="item in certificationPictures" :key="item" :src="item" style="width: 100%"
+              class="certificate-img" mode="widthFix"></up-image>
           </view>
         </template>
       </up-card>
       <!-- 固定底部按钮区 -->
       <view class="Wrap-btn">
-        <uni-goods-nav
-          :fill="true"
-          :options="options"
-          :buttonGroup="buttonGroup"
-          @click="onClick"
-          @buttonClick="buttonClick"
-        />
+        <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
+          @buttonClick="buttonClick" />
       </view>
     </view>
 
@@ -127,75 +107,39 @@
           </view>
           <view class="service-info-item">
             <text class="service-label">上门服务次数:</text>
-            <up-number-box
-              v-model="singleQuantity"
-              :min="listData.minQuantity"
-              :max="minQuantityMax"
-              class="service-number-box"
-              :disabled="isChanging"
-              :longPress="false"
-              @change="valChange"
-            ></up-number-box>
+            <up-number-box v-model="singleQuantity" :min="listData.minQuantity" :max="minQuantityMax"
+              class="service-number-box" :disabled="isChanging" :longPress="false" @change="valChange"></up-number-box>
             <view class="service-values">{{ listData.businessUnit }}</view>
           </view>
-         
-            
+
+
           <view class="service-period">
             <text class="service-label">服务周期:</text>
             <view class="date-picker-container">
-              <uniDatetimePickerMy
-                :modelValue="doorToDoorTime"
-                :start="startDisabled"
-                :end="endDisabled"
-                type="daterange"
-              ></uniDatetimePickerMy>
+              <uniDatetimePickerMy :modelValue="doorToDoorTime" :start="startDisabled" :end="endDisabled"
+                type="daterange"></uniDatetimePickerMy>
             </view>
             <view>
 
               <!-- :businessDuration="listData.businessDuration" -->
-              <its-calendar
-                v-if="show"
-                ref="itsCalendarRef"
-                :businessDuration="businessDurationComputed"
-                :minQuantity="singleQuantity"
-                :timeArr="doorToDoorTimeArr"
-                :timeHostArr="timeHostArr"
-                :businessTierName="listData.businessTierName"
-                class="calendar-component"
-                @getByDate="getByDate"
-                @getByTime="getByTime"
-                @changeMinQuantityMax="changeMinQuantityMax"
-              ></its-calendar>
+              <its-calendar v-if="show" ref="itsCalendarRef" :businessDuration="businessDurationComputed"
+                :minQuantity="singleQuantity" :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr"
+                :businessTierName="listData.businessTierName" class="calendar-component" @getByDate="getByDate"
+                @getByTime="getByTime" @changeMinQuantityMax="changeMinQuantityMax"></its-calendar>
             </view>
           </view>
           <view class="remark-container">
             <text class="service-label">备注:</text>
-            <up-input
-              placeholder="请输入内容"
-              border="surround"
-              v-model="remark"
-              class="remark-input"
-              @change="change"
-            ></up-input>
+            <up-input placeholder="请输入内容" border="surround" v-model="remark" class="remark-input"
+              @change="change"></up-input>
           </view>
           <!-- 保持内容底部有足够的空白以避免按钮遮挡内容 -->
           <view style="height: 120rpx;"></view>
         </scroll-view>
         <!-- 将按钮移到scroll-view外部,但保持在popup内 -->
         <view class="popup-fixed-bottom">
-          <up-button
-            type="primary"
-            shape="circle"
-            :customStyle="wrapqx"
-            @click="handlCancel"
-            >取消</up-button
-          >
-          <up-button
-            type="error"
-            shape="circle"
-            :customStyle="wrapqx"
-            @click="handleBuy"
-          >
+          <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="handlCancel">取消</up-button>
+          <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleBuy">
             预约¥{{ computeMoney.toFixed(2) }}
           </up-button>
         </view>
@@ -206,10 +150,7 @@
     <up-popup :show="showSecond">
       <view>
         <up-cell-group>
-          <view
-            @click="jumpToAddressSelect"
-            style="display: flex; align-items: center; padding: 10px"
-          >
+          <view @click="jumpToAddressSelect" style="display: flex; align-items: center; padding: 10px">
             <up-icon name="more-dot-fill" size="16" />
             <view v-if="selectedAddress" style="margin-left: 8px; flex: 1">
               <view class="address-display">
@@ -221,32 +162,18 @@
                   <text class="contact-name">{{ selectedAddress.name }}</text>
                   <text class="contact-phone">{{
                     selectedAddress.telephone
-                  }}</text>
+                    }}</text>
                 </view>
               </view>
             </view>
-            <text v-else style="margin-left: 8px; font-size: 18px"
-              >请选择服务地址</text
-            >
+            <text v-else style="margin-left: 8px; font-size: 18px">请选择服务地址</text>
           </view>
           <scroll-view scroll-y style="height: 460rpx">
-            <view
-              class="card-container"
-              v-for="(item, index) in selectedTimes"
-              :key="index"
-            >
-              <image
-                class="card-image"
-                :src="listData.volunteerPicture"
-                mode="aspectFill"
-              ></image>
+            <view class="card-container" v-for="(item, index) in selectedTimes" :key="index">
+              <image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
               <view class="card-content">
-                <view class="info-item"
-                  >服务项目:{{ listData.projectName }}</view
-                >
-                <view class="Telephone"
-                  >服务时长:{{ listData.businessDuration }}</view
-                >
+                <view class="info-item">服务项目:{{ listData.projectName }}</view>
+                <view class="Telephone">服务时长:{{ listData.businessDuration }}</view>
                 <view class="date">日期:{{ item.date }}</view>
                 <view class="time"> 时间:{{ item.time }} </view>
               </view>
@@ -270,18 +197,9 @@
             <image src="/static/钱包.png" class="payment-icon"></image>
             <text class="option-text">钱包</text>
           </view>
-          <up-radio-group
-            v-model="radiovalue1"
-            placement="column"
-            @change="handlePaymentMethodChange"
-          >
-            <up-radio
-              :customStyle="{ marginLeft: 'auto' }"
-              v-for="(item, index) in radiolist1"
-              :key="index"
-              :label="item.name"
-              :name="item.name"
-            ></up-radio>
+          <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
+            <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist1" :key="index"
+              :label="item.name" :name="item.name"></up-radio>
           </up-radio-group>
         </view>
         <up-line></up-line>
@@ -292,18 +210,9 @@
             <image src="/static/微信支付.png" class="payment-icon"></image>
             <text class="option-text">微信支付</text>
           </view>
-          <up-radio-group
-            v-model="radiovalue1"
-            placement="column"
-            @change="handlePaymentMethodChange"
-          >
-            <up-radio
-              :customStyle="{ marginLeft: 'auto' }"
-              v-for="(item, index) in radiolist2"
-              :key="index"
-              :label="item.name"
-              :name="item.name"
-            ></up-radio>
+          <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
+            <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist2" :key="index"
+              :label="item.name" :name="item.name"></up-radio>
           </up-radio-group>
         </view>
 
@@ -321,31 +230,16 @@
         </view>
       </view>
       <view class="Wrap-detils-btn">
-        <up-button
-          type="primary"
-          shape="circle"
-          :customStyle="wrapqx"
-          @click="closeSecond"
-          >取消</up-button
-        >
-        <up-button
-          type="error"
-          shape="circle"
-          :customStyle="wrapqx"
-          @click="handlConfiRmpurchase"
-        >
+        <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="closeSecond">取消</up-button>
+        <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handlConfiRmpurchase">
           购买¥{{ computeMoney }}
         </up-button>
       </view>
     </up-popup>
 
     <view v-if="addressFlag" class="box">
-      <addressComponent
-        :modelValue="addressFlag"
-        @update:modelValue="(val) => (addressFlag = val)"
-        :addressInfo="addressInfo"
-        @update:addressInfo="handleAddressUpdate"
-      ></addressComponent>
+      <addressComponent :modelValue="addressFlag" @update:modelValue="(val) => (addressFlag = val)"
+        :addressInfo="addressInfo" @update:addressInfo="handleAddressUpdate"></addressComponent>
     </view>
   </view>
 </template>
@@ -906,6 +800,15 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+
+/* 整体背景定位 */
+.service-description-position{
+  width: 750rpx;
+  /* background: #FFFFFF; */
+  background: red;
+  position: relative;
+  z-index: 180;
+}
 /* 添加卡片样式 */
 .card-container {
   display: flex;
@@ -1250,20 +1153,6 @@ onMounted(async () => {
   align-items: flex-start;
 }
 
-.service-text {
-  flex: 1;
-  margin-right: 20rpx;
-}
-
-.service-price-tag {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #ff4d4f;
-  white-space: nowrap;
-  padding: 8rpx 16rpx;
-  background-color: #fff2f0;
-  border-radius: 8rpx;
-}
 
 /* 弹框滚动内容样式 */
 .popup-scroll-content {

+ 4 - 1
store/modules/user.ts

@@ -83,8 +83,11 @@ const user: Module<UserState, UserState> = {
       const uuid = userInfo.uuid
       const referrerType = userInfo.referrerType
       const referrerId = userInfo.referrerId
+      // 确保经纬度是number类型
+      const latitude = Number(userInfo.latitude) || 0
+      const longitude = Number(userInfo.longitude) || 0
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid, referrerType, referrerId).then((res: any) => {
+        login(username, password, code, uuid, referrerType, referrerId, latitude, longitude).then((res: any) => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve(res)

+ 2 - 0
types/store.ts

@@ -16,6 +16,8 @@ export interface UserForm {
     uuid: string
     referrerType: number
     referrerId: number
+    latitude: number
+    longitude: number
 }