浏览代码

用户微信支付开放,用户新增地址跳转修改

jiayubo 4 月之前
父节点
当前提交
d2b23af347

+ 61 - 38
components/its-calendar/its-calendar.vue

@@ -52,7 +52,8 @@
 				nowTimes: new Date().getTime(), // 只保留一个定义
 				disableAfterTime: null,
 				selectedTime: null,
-				selectedDay: null ,// 新增:记录选择的日期
+				selectedDay: null, // 新增:记录选择的日期
+				selectedTimeSlots: {}, // 存储每个日期的选择状态
 			}
 		},
 		watch: {
@@ -69,21 +70,52 @@
 					this.dayArr = dateArr
 				},
 				immediate: true
+			},
+			timeHostArr: {
+				handler(newVal) {
+					// 当timeHostArr更新时,恢复之前的选择状态
+					if (newVal && newVal.length > 0) {
+						this.restoreSelections();
+					}
+				},
+				deep: true
 			}
 		},
 		mounted() {
 		},
 		methods: {
+			// 恢复选择状态
+			restoreSelections() {
+				if (!this.timeHostArr[this.day_index]) return;
+				
+				// 遍历当前日期的时间槽
+				this.timeHostArr[this.day_index].forEach(slot => {
+					// 检查这个时间槽是否在之前被选中
+					const dateKey = this.timeArr[this.day_index];
+					if (this.selectedTimeSlots[dateKey] && 
+						this.selectedTimeSlots[dateKey].includes(slot.timeStamp)) {
+						slot.checked = true;
+						
+						// 计算并禁用后续的时间段
+						const seconds = this.businessDuration * 60;
+						const endTimestamp = slot.timeStamp + seconds;
+						
+						// 禁用后续的时间段
+						this.timeHostArr[this.day_index].forEach(s => {
+							if (s.timeStamp > slot.timeStamp && 
+								s.timeStamp <= endTimestamp) {
+								s.disabled = true;
+							}
+						});
+					}
+				});
+			},
+			
 			handleTimeClick(item) {
 				console.log(this.businessDuration, '>>>>>>businessDuration');
 				// 禁用点击,取消点击触发
 				if (item.disabled) return false
 				
-				// if (!this.shouldDisable(item)) {
-				// 	item.checked = !item.checked
-				// 	this.hosts(item);
-				// }
-				
 				// 计算服务时间秒
 				const seconds = this.businessDuration * 60
 				// 计算最终服务时间
@@ -95,23 +127,39 @@
 				          i.timeStamp <= endTimestamp)
 				 })
 				 
-				 console.log(filteredSlots, '>>>>>filteredSlots');
+				console.log(filteredSlots, '>>>>>filteredSlots');
+				
+				// 当前日期
+				const currentDate = this.timeArr[this.day_index];
+				
 				if (!item.checked) {
 					// 计算禁用时间区域
-					 filteredSlots.forEach(v => {
+					filteredSlots.forEach(v => {
 						v.disabled = true
-					 })
-					 item.checked = true
+					})
+					item.checked = true
+					
+					// 保存选择状态
+					if (!this.selectedTimeSlots[currentDate]) {
+						this.selectedTimeSlots[currentDate] = [];
+					}
+					this.selectedTimeSlots[currentDate].push(item.timeStamp);
 				} else {
 					// 释放禁用区域
 					filteredSlots.forEach(v => {
 						if (v.hasReservation !== 1) v.disabled = false
 					})
 					item.checked = false
+					
+					// 移除选择状态
+					if (this.selectedTimeSlots[currentDate]) {
+						const index = this.selectedTimeSlots[currentDate].indexOf(item.timeStamp);
+						if (index > -1) {
+							this.selectedTimeSlots[currentDate].splice(index, 1);
+						}
+					}
 				}
 				
-				
-				
 				this.hosts(item);
 			},
 			// 点击日期
@@ -132,34 +180,9 @@
 
 				const itemTime = this.ensureMillisecond(item.timeStamp);
 
-				
-
-				// // 过去时间
+				// 过去时间
 				if (this.nowTimes > itemTime) return true;
 
-				// // // 选择后的时间段
-				// if (this.selectedTime) {
-				// 	return itemTime > this.selectedTime &&
-				// 		itemTime <= this.disableAfterTime;
-				// }
-				
-				// let flat = false
-				
-				// this.timeHostArr[this.day_index].forEach(i => {
-				// 	if (i.checked) {
-				// 		const itemTime2 = this.ensureMillisecond(item.timeStamp);
-				// 		flat = itemTime2 > this.selectedTime &&
-				// 		itemTime2 <= this.disableAfterTime;
-				// 	}
-				// })
-				
-				
-				// if (!item.checked) {
-				// 	return itemTime > this.selectedTime &&
-				// 		itemTime <= this.disableAfterTime;
-				// }
-				
-
 				return false;
 			},
 			hosts(item) {

+ 6 - 0
pages.json

@@ -115,6 +115,12 @@
 					"style": {
 						"navigationBarTitleText": "用户协议"
 					}
+				},
+				{
+					"path": "pages/setupUser/Address",
+					"style": {
+						"navigationBarTitleText": "新增地址"
+					}
 				}
 			]
 		},

+ 361 - 0
pages_home/components/setupUserCopy/Add.vue

@@ -0,0 +1,361 @@
+<template>
+  <view>
+    <up-form
+      labelPosition="left"
+      :model="modelForm"
+      :rules="rulesForm"
+      ref="formRef"
+    >
+      <up-form-item label="姓名" prop="name" borderBottom labelWidth="70">
+        <up-input
+          v-model="modelForm.name"
+          border="none"
+          placeholder="请输入姓名"
+        ></up-input>
+      </up-form-item>
+      <up-form-item
+        label="性别"
+        prop="sex"
+        borderBottom
+        @click="() => (sexFlag = true)"
+        labelWidth="70"
+      >
+        <up-input
+          v-model="displaySex"
+          disabled
+          disabledColor="#ffffff"
+          placeholder="请选择性别"
+          border="none"
+        ></up-input>
+        <template #right>
+          <up-icon name="arrow-right"></up-icon>
+        </template>
+      </up-form-item>
+      <up-form-item
+        label="关系"
+        prop="label"
+        borderBottom
+        @click="() => (labelFlag = true)"
+        labelWidth="70"
+      >
+        <up-input
+          v-model="modelForm.label"
+          disabled
+          disabledColor="#ffffff"
+          placeholder="请选择关系"
+          border="none"
+        ></up-input>
+        <template #right>
+          <up-icon name="arrow-right"></up-icon>
+        </template>
+      </up-form-item>
+      <up-form-item label="年龄" prop="age" borderBottom labelWidth="70">
+        <up-input
+          v-model="modelForm.age"
+          border="none"
+          placeholder="请输入年龄"
+        ></up-input>
+      </up-form-item>
+      <up-form-item
+        label="手机号"
+        prop="telephone"
+        borderBottom
+        labelWidth="70"
+      >
+        <up-input
+          v-model="modelForm.telephone"
+          border="none"
+          placeholder="请输入手机号"
+        ></up-input>
+      </up-form-item>
+      <up-form-item
+        label="地区"
+        prop="area"
+        borderBottom
+        @click="() => (addressShow = true)"
+        labelWidth="70"
+      >
+        <pickerAddress
+          @change="addressChange"
+          :selectValue="[
+            modelForm.provinceInd,
+            modelForm.cityInd,
+            modelForm.districtInd,
+          ]"
+        >
+          <view
+            class="inp"
+            :class="
+              modelForm.provinceName &&
+              modelForm.cityName &&
+              modelForm.districtName
+                ? ''
+                : 'address-inp'
+            "
+          >
+            {{ modelForm.provinceName ? modelForm.provinceName : '省' }} /
+            {{ modelForm.cityName ? modelForm.cityName : '市' }} /
+            {{ modelForm.districtName ? modelForm.districtName : '区' }}
+          </view>
+        </pickerAddress>
+        <template #right>
+          <up-icon name="map" size="22" @click="onCityWx"></up-icon>
+        </template>
+      </up-form-item>
+      <up-form-item label="地址" prop="address" borderBottom labelWidth="70">
+        <up-input
+          v-model="modelForm.address"
+          border="none"
+          placeholder="请输入地址"
+        ></up-input>
+      </up-form-item>
+    </up-form>
+    <up-action-sheet
+      :show="sexFlag"
+      :actions="sexOptions"
+      @select="sexSelect"
+      @close="sexFlag = false"
+    ></up-action-sheet>
+    <up-action-sheet
+      :show="labelFlag"
+      :actions="relaTionsHip"
+      @select="sexSelectsHip"
+      @close="labelFlag = false"
+    ></up-action-sheet>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import pickerAddress from '@/pages_mine/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
+import { splitAddress } from '@/utils/adress'
+import config from '@/config'
+const mapKey = config.mapKey // 从配置文件中直接获取腾讯地图key
+const formRef = ref(null)
+const modelForm = ref({
+  name: '',
+  sex: '',
+  label: '',
+  age: '',
+  telephone: '',
+
+  provinceName: '', // 省
+  provinceCode: '',
+  provinceInd: 0,
+
+  cityName: '', // 市
+  cityCode: '',
+  cityInd: 0,
+
+  districtName: '',
+  districtCode: '',
+  districtInd: 0,
+
+  address: '',
+})
+
+const rulesForm = ref({
+  name: {
+    type: 'string',
+    required: true,
+    message: '请填写姓名',
+    trigger: ['blur', 'change'],
+  },
+  sex: {
+    type: 'string',
+    required: true,
+    message: '请选择性别',
+    trigger: ['change'],
+  },
+  label: {
+    type: 'string',
+    required: true,
+    message: '请选择关系',
+    trigger: ['change'],
+  },
+  userInfo: {
+    type: 'string',
+    required: true,
+    message: '请填写年龄',
+    trigger: ['blur', 'change'],
+  },
+  telephone: {
+    type: 'string',
+    required: true,
+    message: '请填写手机号',
+    trigger: ['blur', 'change'],
+  },
+})
+
+let sexFlag = ref(false)
+let labelFlag = ref(false)
+let addressShow = ref(false)
+let index = ref(0)
+// 新增一个响应式变量,控制传染病内容的显示
+const showContagionContent = ref(false)
+
+const sexOptions = ref([
+  {
+    name: '男',
+    value: 0,
+  },
+  {
+    name: '女',
+    value: 1,
+  },
+])
+
+const relaTionsHip = ref([
+  {
+    name: '父母',
+  },
+  {
+    name: '子女',
+  },
+  {
+    name: '兄弟',
+  },
+  {
+    name: '朋友',
+  },
+  {
+    name: '同学',
+  },
+  {
+    name: '同事',
+  },
+  {
+    name: '配偶',
+  },
+])
+
+const displaySex = computed({
+  get() {
+    const option = sexOptions.value.find(
+      (item) => item.value === modelForm.value.sex
+    )
+    return option ? option.name : ''
+  },
+  set(newValue) {
+    const option = sexOptions.value.find((item) => item.name === newValue)
+    if (option) {
+      modelForm.value.sex = option.value
+    }
+  },
+})
+// 性别选择处理
+function sexSelect(e) {
+  modelForm.value.sex = e.value
+  sexFlag.value = false
+}
+
+function sexSelectsHip(e) {
+  modelForm.value.label = e.name
+  labelFlag.value = false
+}
+
+function addressChange(info) {
+  console.log(info, '>>>>data')
+
+  const { data, code, index } = info
+
+  modelForm.value.provinceName = data[0]
+  modelForm.value.provinceCode = code[0]
+  modelForm.value.provinceInd = index[0]
+
+  modelForm.value.cityName = data[1]
+  modelForm.value.cityCode = code[1]
+  modelForm.value.cityInd = index[1]
+
+  modelForm.value.districtName = data[2]
+  modelForm.value.districtCode = code[2]
+  modelForm.value.districtInd = index[2]
+}
+
+// 使用腾讯地图 API 的函数
+function getAdcodeByCoordinates(latitude, longitude) {
+  if (!mapKey) {
+    console.error('腾讯地图key为空,请检查配置!');
+    uni.showToast({
+      title: '腾讯地图key为空',
+      icon: 'error'
+    });
+    return Promise.reject('腾讯地图key为空');
+  }
+
+  const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${mapKey}`;
+  console.log('请求URL:', url);
+
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: url,
+      success: (res) => {
+        if (res.data.status === 0) {
+          const adInfo = res.data.result.ad_info;
+          resolve({
+            provinceName: adInfo.province,
+            cityName: adInfo.city,
+            districtName: adInfo.district,
+            provinceCode: adInfo.adcode.slice(0, 2) + '0000', // 提取省编码
+            cityCode: adInfo.adcode.slice(0, 4) + '00', // 提取市编码
+            districtCode: adInfo.adcode // 提取区编码
+          });
+        } else {
+          console.error('腾讯地图API错误:', res.data.message);
+          reject('Error fetching adcode: ' + res.data.message);
+        }
+      },
+      fail: (err) => {
+        console.error('请求腾讯地图API失败:', err);
+        reject(err);
+      }
+    });
+  });
+}
+
+// 点击地图图标选择地址
+// 点击地址图标,选择位置并获取省市区编码
+async function onCityWx() {
+  wx.chooseLocation({
+    success: async function (res) {
+      try {
+        console.log('选择的地址:', res);
+
+        // 调用腾讯地图 API 获取省市区编码
+        const adcodeData = await getAdcodeByCoordinates(res.latitude, res.longitude);
+
+        // 更新表单数据
+        modelForm.value.provinceName = adcodeData.provinceName;
+        modelForm.value.cityName = adcodeData.cityName;
+        modelForm.value.districtName = adcodeData.districtName;
+        modelForm.value.provinceCode = adcodeData.provinceCode;
+        modelForm.value.cityCode = adcodeData.cityCode;
+        modelForm.value.districtCode = adcodeData.districtCode;
+        modelForm.value.address = res.address; // 完整地址
+        modelForm.value.longitude = res.longitude;
+        modelForm.value.latitude = res.latitude;
+
+        console.log('获取到的省市区信息:', adcodeData);
+      } catch (err) {
+        console.error('获取省市区编码失败:', err);
+        uni.showToast({
+          title: '获取地址编码失败',
+          icon: 'error'
+        });
+      }
+    },
+    fail: function (err) {
+      console.error('选择位置失败:', err);
+      uni.showToast({
+        title: '获取地址失败',
+        icon: 'error'
+      });
+    }
+  });
+}
+defineExpose({
+  modelForm: modelForm.value,
+})
+</script>
+
+<style></style>

+ 1 - 6
pages_home/components/volunteerSide/adresss.vue

@@ -53,15 +53,10 @@
 		const addressId = ref('')
 		const onLoadOptions = ref({})
 
-		const handleAddAddress = () => {
-			uni.navigateTo({
-				url: '/pages_home/components/volunteerSide/addAddress'
-			})
-  }
 
   	const handlHeader = () => {
 		uni.navigateTo({
-			url: `/pages_mine/pages/setupUser/Address`
+			url: `/pages_home/pages/setupUser/Address`
 		});
 	}
 

+ 20 - 5
pages_home/pages/Volunteerside/goodsDetails.vue

@@ -144,7 +144,7 @@
 						<image src="/static/钱包.png" class="payment-icon"></image>
 						<text class="option-text">钱包</text>
 					</view>
-					<up-radio-group v-model="radiovalue1" placement="column">
+					<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>
@@ -157,8 +157,10 @@
 						<image src="/static/微信支付.png" class="payment-icon"></image>
 						<text class="option-text">微信支付</text>
 					</view>
-					<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>
 
 				<up-line></up-line>
@@ -240,14 +242,19 @@
 	const radiovalue1 = ref('苹果');
 	const selectedAddress = ref(null);
 	const addressFlag = ref(false)
+	const paymentMethod = ref(1) // Add payment method ref with default value 1 (wallet)
 
 	const addressInfo = ref(null)
 	// Radio 单选框数据
 	const radiolist1 = reactive([{
-		name: '',
+		name: '钱包支付',
 		disabled: false,
 	}, ]);
 
+	const radiolist2 = reactive([{
+		name: '微信支付',
+		disabled: false,
+	}, ]);
 
 	// 详情底部立即购买弹框
 	const buttonClick = (e) => {
@@ -517,7 +524,7 @@
 				serviceStartDate: "2025-04-18",
 				startTime: "8:00",
 				serviceDuration: 4,
-				paymentMethod: 1,
+				paymentMethod: paymentMethod.value, // Use the selected payment method
 				volunteerId: volunteerId.value,
 				remark: remark.value,
 				businessManagementId: businessManagementId.value,
@@ -558,6 +565,14 @@
 		}
 	};
 
+	// 修改支付方式
+	const handlePaymentMethodChange = (value) => {
+		if (value === '钱包支付') {
+			paymentMethod.value = 1;
+		} else if (value === '微信支付') {
+			paymentMethod.value = 2;
+		}
+	};
 
 	onMounted(async () => {
 		await getListTime()

+ 78 - 0
pages_home/pages/setupUser/Address.vue

@@ -0,0 +1,78 @@
+<template>
+	<view>
+		<template v-for="(item, index) in addInfoArr" :key="index">
+			<add-component ref="addComponentRef"></add-component>
+		</template>
+		<view class="Wrapper-Btn">
+			<up-button @click="handleQux" type="error" :plain="true" :hairline="true" text="取消" :customStyle="hadlClickEdit"></up-button>
+			<up-button type="error" text="确定" @click="handlOk" :customStyle="hadlClickEdit"></up-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive
+	} from 'vue';
+	import {
+		useraDdressData
+	} from "@/api/userSettings.js"
+	import pickerAddress from '@/pages_home/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
+	import addComponent from '@/pages_home/components/setupUserCopy/Add.vue'
+
+
+	const addComponentRef = ref(null)
+
+	const addInfoArr = ref([{}])
+
+	function handleAdd() {
+		if (addInfoArr.value.length < 4) addInfoArr.value.push({})
+	}
+
+
+	const handlOk = async () => {
+		const params = []
+		addInfoArr.value.forEach((item, index) => {
+			params.push(addComponentRef.value[index].modelForm)
+		})
+
+		params.forEach(async (obj) => {
+			const res = await useraDdressData(obj)
+			if (res.code == 200) {
+				uni.showToast({
+					title: '新增成功',
+					icon: 'success', // 或者 'none'
+					duration: 1500, // 显示时间,单位毫秒,默认1500
+					mask: true, // 是否显示透明蒙层,防止触摸穿透,默认false
+				});
+				setTimeout(() => {
+					uni.navigateBack({
+						delta: 2
+          })
+				}, 1500)
+			}
+		})
+	}
+	
+	const handleQux = () =>{
+		uni.navigateBack({
+			delta:2
+		})
+	}
+	const hadlClickEdit = {
+		width: '240rpx',
+		marginTop: '30rpx'
+	}
+</script>
+<style scoped lang="scss">
+	.address-inp {
+		color: #929292;
+	}
+	
+	.Wrapper-Btn{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>