From 9d6d0bb764011e590aa869815cb3b431f89c6319 Mon Sep 17 00:00:00 2001 From: tx <2622874537@qq.com> Date: Mon, 30 Sep 2024 18:02:38 +0800 Subject: [PATCH] 11 --- common/http.interceptor.js | 2 +- page_user/carSelection.vue | 122 ++--- page_user/carStore.vue | 256 +++++++++-- page_user/idcard_test.vue | 329 +++++++++++++ page_user/mapSele.vue | 859 +++++++++++++++++++++++++++------- page_user/ordder.vue | 917 ++++++++++++++++++++++++++++++++----- page_user/tips.vue | 32 ++ page_user/user_order.vue | 567 +++++++++++++++++++---- page_user/word.vue | 104 +++++ pages.json | 72 +-- pages/index/index.vue | 99 ++-- pages/login/login.vue | 24 +- pages/my.vue | 205 ++++++++- 13 files changed, 3028 insertions(+), 560 deletions(-) create mode 100644 page_user/idcard_test.vue create mode 100644 page_user/tips.vue create mode 100644 page_user/word.vue diff --git a/common/http.interceptor.js b/common/http.interceptor.js index 5ab6a81..23703dd 100644 --- a/common/http.interceptor.js +++ b/common/http.interceptor.js @@ -36,7 +36,7 @@ const install = (Vue, vm) => { // 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值 const token = uni.getStorageSync('token'); - // const token = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjQ0ZDljYzBlLThjZjEtNGFkOC05OGFjLThlNThjMWIxYjQ3OSJ9.v-aMkp9t7Z_QfjfsZy6d_1Ng76hPYa0A--SWScMJY9to7UlNv9IxHQnTJylLKdYKGrr8fRZ47Bu12UPm1DgMQg" + // const token = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjNlMjMyMGNiLTRiOTktNDhiNS1iOGFhLWZlNGU4ZTFhZTQ3OCJ9.6qeOWeY1w9a4B2uTwFT-Fg-4t0llrSkFklzxg3oRgj7EbNEI1o1uHsdlHB3cxXeS95dQOQyh9sKlAei-T-9gDQ" // console.log("我是token", token) config.header.Authorization = token; diff --git a/page_user/carSelection.vue b/page_user/carSelection.vue index e0efcb1..2151aa6 100644 --- a/page_user/carSelection.vue +++ b/page_user/carSelection.vue @@ -9,7 +9,7 @@ - {{addressInfo}} + {{addressInfo}} |{{time}} 取车| @@ -32,7 +32,8 @@ {{cityList[0].cityName}} - + + @@ -48,8 +49,9 @@ {{addressInfo}} - - + + + @@ -63,17 +65,19 @@ 取车时间 - {{time}} - + {{time}} + + 选择租车周期 - + {{dataInfo.dictLabel}} - + + @@ -89,6 +93,8 @@ + + @@ -127,12 +133,14 @@ 请选择租车周期 - + - + {{item.dictLabel}} - + @@ -151,7 +159,7 @@ showchoose: false, CouponLists: [], hight: 0, - showkf:false, + showkf: false, cityList: [], dataList: [], gps: {}, @@ -170,10 +178,10 @@ startTime: '', pickertime: '', time: '', - showdata:false, - dataIndex:0, - dataInfo:{}, - shopList:[] + showdata: false, + dataIndex: 0, + dataInfo: {}, + shopList: [] } }, onLoad() { @@ -185,7 +193,7 @@ uni.getLocation({ type: 'gcj02', success: function(lb) { - + that.gps.latitude = lb.latitude; that.gps.longitude = lb.longitude; that.getCity() @@ -201,19 +209,19 @@ // that.getmarks() // 在这里处理获取位置信息失败的情况 } - + }) // 获取当前日期，并设置startDate和pickertime const now = new Date(); const month = now.getMonth() + 1; // 月份从0开始，因此加1 const day = now.getDate(); - + // 格式化为 MM-DD 的字符串 this.startDate = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`; // 初始化pickertime为当天的默认日期 this.pickertime = this.startDate; - + this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select('.ips_box').boundingClientRect(data => { @@ -224,15 +232,15 @@ }); }, methods: { - getshopList(){ - let data={ + getshopList() { + let data = { // phoneLon:this.gps.latitude, - phoneLon:120.257144, + phoneLon: 120.257144, // phoneLat:this.gps.longitude, - phoneLat:27.105719, - isFreeCar:true + phoneLat: 27.105719, + isFreeCar: true } - this.$u.post(`app/getStoreListByLocation`,data).then((res) => { + this.$u.post(`app/getStoreListByLocation`, data).then((res) => { if (res.code == 200) { this.shopList = res.data; } else { @@ -244,34 +252,34 @@ } }); }, - chooseData(item,index){ - this.dataInfo=item - this.dataIndex=index + chooseData(item, index) { + this.dataInfo = item + this.dataIndex = index }, - closeData(){ - this.showdata=false + closeData() { + this.showdata = false }, confirm1(selectedDate) { // 将用户选择的日期和当前日期进行比较 - + // 从回调中获取选择的月份和日期 const selectedMonth = parseInt(selectedDate.month, 10); const selectedDay = parseInt(selectedDate.day, 10); - + // 获取当前日期 const now = new Date(); const currentMonth = now.getMonth() + 1; const currentDay = now.getDate(); - + // 比较选择的日期和当前日期 if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) { // 如果选择的日期比当前日期早，则重置为pickertime const now = new Date(); const month = now.getMonth() + 1; // 月份从0开始，因此加1 const day = now.getDate(); - + // 格式化为 MM-DD 的字符串 - + this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`; uni.showToast({ title: '选择的日期不能小于当前日期', @@ -283,7 +291,7 @@ this.time = `${selectedDate.month}月${selectedDate.day}日`; } }, - + getaddress() { this.$u.get(`app/getAddress?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => { if (res.code == 200) { @@ -301,10 +309,10 @@ this.$u.get(`app/getCity?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => { if (res.code == 200) { this.cityInfo = res.data; - + // 假设 cityList 是一个包含城市信息的数组，并且 cityInfo 中有一个唯一标识字段，例如 cityName 或 cityId const index = this.cityList.findIndex(city => city.cityName === this.cityInfo.cityName); - + if (index !== -1) { this.cityIndex = index console.log('City found at index:', index); @@ -312,7 +320,7 @@ } else { console.log('City not found in the list'); } - + } else { uni.showToast({ title: res.msg, @@ -323,26 +331,26 @@ }); }, showCity() { - + }, getdata() { - + this.$u.get("/app/getDictData?dictType=rl_rental_period").then((res) => { if (res.code == 200) { this.dataList = res.data - this.dataInfo=this.dataList[0] + this.dataInfo = this.dataList[0] } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); - + } }); }, getcityList() { - + this.$u.get("app/city/list").then((res) => { if (res.code == 200) { this.cityList = res.data @@ -352,17 +360,19 @@ icon: 'none', duration: 2000 }); - + } }); }, + + tosele() { uni.navigateTo({ url: '/page_user/carSelection' }) }, - - + + } } @@ -405,7 +415,7 @@ } } - + .li { margin-bottom: 24rpx; @@ -422,14 +432,16 @@ font-size: 36rpx; color: #3D3D3D; } + .act { - + background: #DCEDFF; - + border: 2rpx solid #4297F3; } } + .ips_box { padding: 22rpx 38rpx; width: 750rpx; @@ -456,7 +468,8 @@ font-size: 24rpx; color: #6F6F6F; } - .txt1{ + + .txt1 { font-weight: 400; font-size: 24rpx; color: #6F6F6F; @@ -483,6 +496,7 @@ } } + .car_card { margin: 0 auto; margin-top: 16rpx; @@ -777,7 +791,7 @@ flex-wrap: nowrap; align-items: center; margin-top: 6rpx; - + .txt3 { font-weight: 600; font-size: 32rpx; @@ -791,7 +805,7 @@ text-overflow: ellipsis; /* 超出部分显示省略号 */ } - + image { width: 40rpx; height: 22rpx; diff --git a/page_user/carStore.vue b/page_user/carStore.vue index e323d8d..f923cc0 100644 --- a/page_user/carStore.vue +++ b/page_user/carStore.vue @@ -9,30 +9,40 @@ - 云行租车（汇丰公寓） + {{storeInfo.name}} - 天目山路148号 - 营业时间 | 06:00 - 23:00 + 营业时间 | {{storeInfo.businessTimeStart}} - {{storeInfo.businessTimeEnd}} - 3辆可租 + {{storeInfo.rentalCar ? storeInfo.rentalCar : 0}} 辆可租 - + 免费送取车 - - + + + + {{kmInfo}} + + + + + + 电话 + + + - + @@ -57,14 +67,14 @@ - + - + - 全新车网红泡泡50KM... + {{item.model}} 剩余 @@ -72,15 +82,16 @@ - 手机开关锁 | 定位防盗 + {{item.modelsType}} + - - 9辆 + + {{item.rentalCar}}辆 - 日租￥9 + 日租￥{{item.price}} 立即租 @@ -92,14 +103,14 @@ 没有更多了哦 - + 请选择您要联系的客服 我们根据选择为您提供服务 - + @@ -108,24 +119,24 @@ 官方客服 - 000-260-1559 + {{agentInfo.phone}} - + - 官方客服 + 门店客服 - 000-260-1559 + {{storeInfo.serverPhone}} - + @@ -139,11 +150,16 @@ }, statusBarHeight:0, navBarHeight:0, - showkf:true + showkf:false, + storeId:'', + storeInfo:{}, + agentInfo:{}, + gps:{}, + kmInfo:'' } }, - onLoad() { + onLoad(e) { //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; @@ -157,10 +173,167 @@ // #endif - + this.storeId=e.storeId + this.getStoreInfo() + }, + onShow() { + + }, + computed: { + // getType() { + // return (item) => { + // let data = { + // modelId: item.modelId + // }; + // this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => { + // if (res.code == 200) { + // return res.data; + // } + // return ''; + // }); + // }; + // } }, methods: { + mapFun() { + console.log('点击了'); + uni.openLocation({ + latitude: this.storeInfo.lat, + //纬度 - 目的地/坐标点 + longitude: this.storeInfo.lng, + //经度 - 目的地/坐标点 + // name: "荆门市", + address: this.storeInfo.simpleAddress + }); + }, + getkm(){ + let data = { + lon: this.gps.longitude, + lat: this.gps.latitude, + storeId: this.storeInfo.storeId + }; + this.$u.get(`app/computeDistance?`, data).then((res) => { + if (res.code == 200) { + let distance = res.data; // 获取返回的距离 + + // 判断距离单位，如果小于1000米则显示米，大于等于1000米则显示千米 + if (distance < 1000) { + this.kmInfo = `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm' + } else { + this.kmInfo = `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数 + } + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + callPhone(phone){ + uni.makePhoneCall({ + phoneNumber:phone + }) + setTimeout(()=>{ + this.showkf=false + },500) + }, + getAgent(){ + let data={ + agentId:this.storeInfo.agentId + + } + this.$u.get(`app/getAgentByAgentId?`,data).then((res) => { + if (res.code == 200) { + this.agentInfo = res.data; + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getType(item) { + let data = { + modelId: item.modelId + }; + return this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => { + if (res.code == 200) { + // 截取前两项并提取 function 字段，拼接上 '|' + return res.data.slice(0, 2).map(func => func.function).join(' | '); + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + return ''; // 返回空字符串或其他默认值 + } + }).catch(err => { + console.error('Request failed:', err); + return ''; // 返回空字符串或其他默认值 + }); + }, + + async updateModelsType() { + for (let index = 0; index < this.storeInfo.models.length; index++) { + const item = this.storeInfo.models[index]; + // 调用 getType 函数并等待返回结果 + const modelsType = await this.getType(item); + // 将返回的内容添加到对应的项 + this.$set(this.storeInfo.models, index, { + ...item, + modelsType // 添加 modelsType 字段 + }); + + } + console.log( this.storeInfo,'aaa'); + }, + getStoreInfo(){ + let data={ + storeId:this.storeId + } + this.$u.get(`app/getStore?`,data).then((res) => { + if (res.code == 200) { + this.storeInfo = res.data; + this.updateModelsType(); // 确保在设置 storeInfo 后调用 + this.getAgent() + let that = this + uni.getLocation({ + type: 'gcj02', + success: function(lb) { + + that.gps.latitude = lb.latitude; + that.gps.longitude = lb.longitude; + that.getkm() + + }, + fail: function(error) { + uni.showToast({ + title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能', + icon: 'none', + duration: 2000 + }); + // that.getmarks() + // 在这里处理获取位置信息失败的情况 + } + + }) + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + } } } @@ -239,6 +412,7 @@ color: #3D3D3D; } } + .tip{ margin-top: 30rpx; width: 100; @@ -419,16 +593,30 @@ background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */ background-position: center; - .img1{ - margin-left: -29rpx; - width: 58rpx; - height: 58rpx; - } - .img2{ - margin-left: 54rpx; - width: 58rpx; - height: 58rpx; + .img_box{ + width: 80rpx; + display: flex; + flex-wrap: wrap; + justify-content: center; + .img1{ + + width: 58rpx; + height: 58rpx; + } + .img2{ + + width: 58rpx; + height: 58rpx; + } + .txt1{ + text-align: center; + width: 80rpx; + font-weight: 400; + font-size: 24rpx; + color: #3D3D3D; + } } + } .left{ .store_tit{ diff --git a/page_user/idcard_test.vue b/page_user/idcard_test.vue new file mode 100644 index 0000000..f76171e --- /dev/null +++ b/page_user/idcard_test.vue @@ -0,0 +1,329 @@ + + + + + \ No newline at end of file diff --git a/page_user/mapSele.vue b/page_user/mapSele.vue index 1ce6381..2e5da3f 100644 --- a/page_user/mapSele.vue +++ b/page_user/mapSele.vue @@ -8,14 +8,14 @@ - - 文三数字生活...| + + {{addressInfo}} - 09月02日取车| + |{{time}} 取车| - 日租 + {{dataInfo.dictLabel}} @@ -23,7 +23,7 @@ - + - + 取车城市 - - 价格服务 + + {{cityList[0].cityName}} - + - 取车城市 + 取车地点 距最近店铺727m - 福鼎市太姥山镇... + + {{addressInfo}} + + - + 当前位置 @@ -120,8 +124,8 @@ 取车时间 - - 09月2日 今天 + + {{time}} @@ -130,8 +134,8 @@ 选择租车周期 - - 时租 + + {{dataInfo.dictLabel}} @@ -149,46 +153,25 @@ + + + @labeltap="handleMarkerTap" :show-location="true" :markers="markers" :polygons="polyline"> - - - 请选择租车周期 - - - - 时租 - - - 时租 - - - 时租 - - - 时租 - - - 时租 - - - 时租 - - + - - + + - 云行租车（汇丰公寓） + {{item.name}} - + @@ -196,16 +179,16 @@ - 2.3km | 天目山路148号 + {{returnKm(item)}} | {{item.simpleAddress}} - 营业时间 | 06:00 - 23:00 + 营业时间 |{{item.businessTimeStart}} - {{item.businessTimeEnd}} - 日均￥69起 + 日均￥{{item.bottomPrice}}起 @@ -213,107 +196,163 @@ 免费送取车 - 3辆车可租 + {{item.rentalCar}}辆车可租 - + - + - 适合打卡出行 + {{item.models[0].description}} - 日均￥69 + 日租 ￥{{item.models[0].price}} - + - 适合打卡出行 + {{item.models[1].description}} - 日均￥69 + 日租￥{{item.models[1].price}} - + - 云行租车（汇丰公寓） + {{choseStore.name}} - + - - 2.3km | 萧山区萧山机场交通中心停车库B4层B区B-137号车位 + + {{returnKm(choseStore)}} | {{choseStore.simpleAddress}} - 营业时间 | 06:00 - 23:00 + 营业时间 | {{choseStore.businessTimeStart}} - {{choseStore.businessTimeEnd}} - - 免费送取车 + + + 免费送取车 + + + - - + + + - 全新车网红泡泡50KM续航 + {{item.model}} 手机开关锁 | 定位防盗 - - 含电池 + + {{items.name}} - 剩余9辆 + 剩余 {{item.rentalCar ? item.rentalCar : 0}} 辆 - 日租￥ 69 - + 日租￥ {{item.price}} + 立即租 - + - + + + + + 请选择租车周期 + + + + {{item.dictLabel}} + + + + + + 请选择您要联系的客服 + + + 我们根据选择为您提供服务 + + + + + + + + 官方客服 + + + {{AgentInfo.servicePhone}} + + + + + + + + + + 门店客服 + + + {{choosePhone.serverPhone}} + + + + + @@ -328,13 +367,45 @@ showchoose: false, CouponLists: [], hight: 0, - latitude: 39.916527, - longitude: 116.397128, + latitude: null, + longitude: null, isMap: false, zoomSize: 15, markers: [], polyline: [], polygons: [], + showchoose: false, + CouponLists: [], + hight: 0, + showkf: false, + cityList: [], + dataList: [], + gps: {}, + cityInfo: {}, + cityIndex: -1, + addressInfo: '', + time1: false, + params: { + year: false, + month: true, + day: true, + hour: false, + minute: false, + second: false + }, + startTime: '', + pickertime: '', + time: '', + showdata: false, + dataIndex: 0, + dataInfo: {}, + shopList: [], + + choosePhone: {}, + shownormal: false, + choseStore: {}, + AgentInfo: {}, + chosenMarkerId: null, } }, @@ -349,8 +420,317 @@ }); + let that = this + uni.getLocation({ + type: 'gcj02', + success: function(lb) { + + that.gps.latitude = lb.latitude; + that.gps.longitude = lb.longitude; + that.getCity() + + that.getaddress() + that.getshopList() + }, + fail: function(error) { + uni.showToast({ + title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能', + icon: 'none', + duration: 2000 + }); + // that.getmarks() + // 在这里处理获取位置信息失败的情况 + } + + }) + // 获取当前日期，并设置startDate和pickertime + const now = new Date(); + const month = now.getMonth() + 1; // 月份从0开始，因此加1 + const day = now.getDate(); + + // 格式化为 MM-DD 的字符串 + this.startDate = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; + this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`; + // 初始化pickertime为当天的默认日期 + this.pickertime = this.startDate; + + this.$nextTick(() => { + const query = uni.createSelectorQuery().in(this); + query.select('.ips_box').boundingClientRect(data => { + + this.hight = data.height + 45 + console.log('ips_box height:', this.hight); + }).exec(); + }); + }, + onLoad() { + this.getcityList() + this.getdata() }, methods: { + toOrdder(item,items){ + console.log(items,'toOrdder'); + uni.navigateTo({ + url:'/page_user/ordder?storeId='+item.storeId+'&modelId='+items.modelId + }) + }, + toStore(item){ + console.log(item,'itemitemitem'); + uni.navigateTo({ + url:'/page_user/carStore?storeId='+item.storeId + }) + }, + handleMarkerTap(event) { + console.log('点击了'); + // 获取被点击的标记 id + const markerId = event.detail.markerId; + + // 查找对应的标记信息 + const clickedMarker = this.markers.find(marker => marker.id === markerId); + + if (clickedMarker) { + console.log('Clicked Marker:', clickedMarker); + this.shownormal = true; + + // 根据 clickedMarker.id 查找 this.shopList 中对应的 storeId + const matchedStore = this.shopList.find(store => store.storeId === clickedMarker.id); + + // 如果找到了匹配的 storeId，则将值赋给 this.choseStore + if (matchedStore) { + this.choseStore = matchedStore; // 或者你想要的具体字段，如 matchedStore.someField + } else { + console.log('未找到匹配的商店'); + } + + // 更新标记样式 + this.markers = this.markers.map(marker => { + // 恢复之前高亮的标记颜色 + if (this.chosenMarkerId !== null && marker.id === this.chosenMarkerId) { + return { + ...marker, + label: { + ...marker.label, + bgColor: '#4297F3', // 恢复默认背景色 + color: '#FFFFFF', // 恢复默认文字颜色 + borderColor: '#FFFFFF', // 恢复默认边框颜色 + } + }; + } + + // 更新当前点击的标记 + if (marker.id === markerId) { + return { + ...marker, + label: { + ...marker.label, + bgColor: '#FFFFFF', // 点击后的背景色 + color: '#4297F3', // 点击后的文字颜色 + borderColor: '#4297F3', // 点击后的边框颜色 + } + }; + } + + return marker; // 不改变其他标记 + }); + + // 更新当前高亮的标记 ID + this.chosenMarkerId = markerId; // 记录当前点击的标记 ID + + // 刷新视图 + this.$forceUpdate(); + } + }, + shownm(item) { + this.shownormal = true + this.choseStore = item + }, + showKfs(item) { + console.log('点击了'); + this.choosePhone = item + this.showkf = true + + }, + returnKm(item) { + let distance = item.distance + if (distance < 1000) { + return `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm' + } else { + return `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数 + } + }, + getAgent() { + let data = { + // phoneLon:this.gps.latitude, + cityId: this.cityInfo.cityId, + + } + this.$u.get(`/app/getAgentByCityId?`, data).then((res) => { + if (res.code == 200) { + this.AgentInfo = res.data + this.latitude = Number(this.AgentInfo.latitude); + this.longitude = Number(this.AgentInfo.longitude); + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getshopList() { + let data = { + // phoneLon:this.gps.latitude, + phoneLon: 120.257144, + // phoneLat:this.gps.longitude, + phoneLat: 27.105719, + isFreeCar: true + } + this.$u.post(`app/getStoreListByLocation`, data).then((res) => { + if (res.code == 200) { + this.shopList = res.data; + this.shopList.forEach(item => { + this.markers.push({ + id: parseFloat(item.storeId), + latitude: parseFloat(item.lat), + longitude: parseFloat(item.lng), + width: 5, + height: 5, + iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uzNZFrhZypy1CdYMHlhi', + label: { + content: '￥69 起', // 修改为你想要显示的文字内容 + color: '#fff', // 文字颜色 + fontSize: 12, // 文字大小 + borderRadius: 16, // 圆角 + bgColor: '#4297F3', // 背景颜色 + padding: 2, // 内边距 + borderWidth: 2, // 边框宽度 + borderColor: '#FFFFFF', // 边框颜色 + display: 'ALWAYS', // 一直显示 + }, + }); + }) + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + chooseData(item, index) { + this.dataInfo = item + this.dataIndex = index + }, + closeData() { + this.showdata = false + }, + confirm1(selectedDate) { + // 将用户选择的日期和当前日期进行比较 + + // 从回调中获取选择的月份和日期 + const selectedMonth = parseInt(selectedDate.month, 10); + const selectedDay = parseInt(selectedDate.day, 10); + + // 获取当前日期 + const now = new Date(); + const currentMonth = now.getMonth() + 1; + const currentDay = now.getDate(); + + // 比较选择的日期和当前日期 + if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) { + // 如果选择的日期比当前日期早，则重置为pickertime + const now = new Date(); + const month = now.getMonth() + 1; // 月份从0开始，因此加1 + const day = now.getDate(); + + // 格式化为 MM-DD 的字符串 + + this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`; + uni.showToast({ + title: '选择的日期不能小于当前日期', + icon: 'none', + duration: 2000 + }); + } else { + // 否则，设置为用户选择的日期 + this.time = `${selectedDate.month}月${selectedDate.day}日`; + } + }, + + getaddress() { + this.$u.get(`app/getAddress?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => { + if (res.code == 200) { + this.addressInfo = res.data; + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getCity() { + this.$u.get(`app/getCity?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => { + if (res.code == 200) { + this.cityInfo = res.data; + this.getAgent() + // 假设 cityList 是一个包含城市信息的数组，并且 cityInfo 中有一个唯一标识字段，例如 cityName 或 cityId + const index = this.cityList.findIndex(city => city.cityName === this.cityInfo.cityName); + + if (index !== -1) { + this.cityIndex = index + console.log('City found at index:', index); + // 可以在这里对找到的索引进行其他处理 + } else { + console.log('City not found in the list'); + } + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + showCity() { + + }, + getdata() { + + this.$u.get("/app/getDictData?dictType=rl_rental_period").then((res) => { + if (res.code == 200) { + this.dataList = res.data + this.dataInfo = this.dataList[0] + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + + } + }); + }, + getcityList() { + + this.$u.get("app/city/list").then((res) => { + if (res.code == 200) { + this.cityList = res.data + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + + } + }); + }, } } @@ -365,6 +745,138 @@ width: 100%; position: relative; + .kfbox { + padding: 48rpx 30rpx; + position: fixed; + left: 82rpx; + top: 410rpx; + width: 590rpx; + // height: 282rpx; + background: #FFFFFF; + border-radius: 30rpx 30rpx 30rpx 30rpx; + z-index: 110; + display: flex; + justify-content: center; + flex-wrap: wrap; + + .close { + position: relative; + bottom: -124rpx; + width: 60rpx; + height: 60rpx; + } + + .phone_box { + margin-top: 32rpx; + width: 528rpx; + height: 144rpx; + background: #FFFFFF; + box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1); + border-radius: 20rpx 20rpx 20rpx 20rpx; + display: flex; + flex-wrap: nowrap; + align-items: center; + + .img { + width: 86rpx; + height: 86rpx; + + image { + width: 86rpx; + height: 86rpx; + } + } + + .info { + display: flex; + flex-wrap: wrap; + margin-left: 34rpx; + + .name { + width: 100%; + font-weight: 600; + font-size: 32rpx; + color: #3D3D3D; + } + + .phone { + width: 100%; + font-weight: 400; + font-size: 32rpx; + color: #3D3D3D; + } + } + } + + .tit { + font-weight: 600; + font-size: 40rpx; + color: #3D3D3D; + } + + .words { + margin-bottom: 42rpx; + margin-top: 16rpx; + font-weight: 400; + font-size: 28rpx; + color: #3D3D3D; + } + } + + .choosedata { + padding: 46rpx 37rpx; + position: fixed; + bottom: 0; + width: 750rpx; + // height: 757rpx; + background: #FFFFFF; + border-radius: 20rpx 20rpx 0 0; + z-index: 101; + + .tit { + margin-bottom: 54rpx; + position: relative; + width: 100%; + text-align: center; + font-weight: 600; + font-size: 40rpx; + color: #3D3D3D; + + image { + position: absolute; + right: 36rpx; + width: 52rpx; + height: 52rpx; + } + } + + + + .li { + margin-bottom: 24rpx; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + width: 676rpx; + height: 88rpx; + background: #F7F7F7; + border-radius: 14rpx 14rpx 14rpx 14rpx; + border: 2rpx solid #fff; + font-weight: 600; + font-size: 36rpx; + color: #3D3D3D; + } + + .act { + + background: #DCEDFF; + + border: 2rpx solid #4297F3; + } + } + + .bot_cont { position: fixed; bottom: 0; @@ -375,38 +887,47 @@ width: 66rpx; height: 66rpx; } - .normal_store{ + + .normal_store { width: 100%; background: #fff; - .card_box{ - .card{ + + .card_box { + .card { padding: 28rpx 36rpx; display: flex; flex-wrap: nowrap; align-items: center; border-bottom: 1rpx solid #808080; - image{ + + image { width: 172rpx; height: 132rpx; } - .infos{ + + .infos { width: 100%; margin-left: 30rpx; - .name{ + + .name { font-weight: 600; font-size: 28rpx; color: #3D3D3D; } - .cartool{ + + .cartool { margin-top: 16rpx; font-weight: 400; font-size: 24rpx; color: #3D3D3D; } - .car_type_li{ + + .car_type_li { margin-top: 16rpx; display: flex; - .type{ + + .type { + margin-right: 12rpx; padding: 4rpx 10rpx; background: #DCEDFF; border-radius: 6rpx 6rpx 6rpx 6rpx; @@ -414,23 +935,27 @@ font-size: 24rpx; color: #4297F3; } - + } - .price_box{ + + .price_box { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; - .left{ + + .left { font-weight: 400; font-size: 24rpx; color: #FF1C1C; - span{ + + span { font-size: 48rpx; } } - .right{ + + .right { display: flex; flex-wrap: nowrap; align-items: center; @@ -438,10 +963,12 @@ font-weight: 400; font-size: 24rpx; color: #FF1C1C; - span{ + + span { font-size: 48rpx; } - .btn{ + + .btn { margin-left: 28rpx; display: flex; align-items: center; @@ -459,29 +986,34 @@ } } } - .store_info{ + + .store_info { display: flex; flex-wrap: wrap; width: 100%; padding: 30rpx 28rpx; - box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1); - .top_info{ + box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1); + + .top_info { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; - .name{ + + .name { font-weight: 600; font-size: 36rpx; color: #3D3D3D; } - .img{ + + .img { width: 48rpx; height: 48rpx; } } - .address{ + + .address { margin-top: 12rpx; width: 100%; display: flex; @@ -490,30 +1022,47 @@ font-weight: 400; font-size: 24rpx; color: #3D3D3D; - + } - .time{ + + .time { width: 100%; margin-top: 8rpx; font-weight: 500; font-size: 24rpx; color: #3D3D3D; - span{ + + span { font-weight: 600; } } - .type{ - margin-top: 18rpx; - padding: 4rpx 10rpx; - background: #DCEDFF; - border-radius: 6rpx 6rpx 6rpx 6rpx; - font-weight: 400; - font-size: 24rpx; - color: #4297F3; + + .types_box { + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + + .type { + margin-top: 18rpx; + padding: 4rpx 10rpx; + background: #DCEDFF; + border-radius: 6rpx 6rpx 6rpx 6rpx; + font-weight: 400; + font-size: 24rpx; + color: #4297F3; + } + + image { + width: 48rpx; + height: 48rpx; + } } + } } - + .mini_store::-webkit-scrollbar { display: none; } @@ -808,61 +1357,8 @@ } - .choosedata { - padding: 46rpx 37rpx; - position: fixed; - bottom: 0; - width: 750rpx; - // height: 757rpx; - background: #FFFFFF; - border-radius: 20rpx 20rpx 0 0; - z-index: 101; - - .tit { - margin-bottom: 54rpx; - position: relative; - width: 100%; - text-align: center; - font-weight: 600; - font-size: 40rpx; - color: #3D3D3D; - - image { - position: absolute; - right: 36rpx; - width: 52rpx; - height: 52rpx; - } - } - - - - .li { - margin-bottom: 24rpx; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - width: 676rpx; - height: 88rpx; - background: #F7F7F7; - border-radius: 14rpx 14rpx 14rpx 14rpx; - border: 2rpx solid #fff; - font-weight: 600; - font-size: 36rpx; - color: #3D3D3D; - } - - .act { - - background: #DCEDFF; - - border: 2rpx solid #4297F3; - } - } - .ips_box { - padding: 22rpx 38rpx 0 38rpx; + padding: 22rpx 38rpx; width: 750rpx; background: #FFFFFF; border-radius: 0rpx 0rpx 0rpx 0rpx; @@ -887,6 +1383,20 @@ font-size: 24rpx; color: #6F6F6F; } + + .txt1 { + font-weight: 400; + font-size: 24rpx; + color: #6F6F6F; + width: 252rpx; + /* 设置宽度 */ + white-space: nowrap; + /* 禁止文本换行 */ + overflow: hidden; + /* 超出部分隐藏 */ + text-overflow: ellipsis; + /* 超出部分显示省略号 */ + } } .right { @@ -905,7 +1415,6 @@ - .choose_card { position: absolute; top: 0; @@ -1088,10 +1597,24 @@ } .bot { + display: flex; + flex-wrap: nowrap; + align-items: center; margin-top: 6rpx; - font-weight: 600; - font-size: 32rpx; - color: #3D3D3D; + + .txt3 { + font-weight: 600; + font-size: 32rpx; + color: #3D3D3D; + width: 252rpx; + /* 设置宽度 */ + white-space: nowrap; + /* 禁止文本换行 */ + overflow: hidden; + /* 超出部分隐藏 */ + text-overflow: ellipsis; + /* 超出部分显示省略号 */ + } image { width: 40rpx; diff --git a/page_user/ordder.vue b/page_user/ordder.vue index 2221a14..bee6b2f 100644 --- a/page_user/ordder.vue +++ b/page_user/ordder.vue @@ -11,28 +11,28 @@ - 全新车网红泡泡50KM续航 + {{modelInfo.model}} - + 含电池 - + - + - 商家收费上门 + 商家 {{ agentInfo.isFreeCar ? '免费' : '收费' }} 上门 - + 自行前往门店 取车 - - 2024年09月04日 今天16:00 + + {{time}} + 更改时间 + - + 商家收费送车上门（服务费15元） + + 商家免费送车上门 + - 1天 + {{timenum}}{{timetype(chosePriceInfo.rentalUnit)}} 取车后开始计算订单时长 @@ -76,16 +86,19 @@ 还车 - 2024年09月04日 今天16:00 + {{backTime()}} + - - - - - - 商家收费送车上门（服务费15元） + + + 地址 + + + @@ -95,15 +108,22 @@ - + 取车 - - 2024年09月04日 今天16:00 + + 2024年09月04日 16:00 + 更改时间 + @@ -111,13 +131,22 @@ - 自行前往门店取车 福建省宁德市福鼎市太... - 门店距【福鼎太姥山...】直线距离3.8km + 自行前往门店取车 {{storeInfo.simpleAddress}} + + + + + + + + 直线距离 {{km}} + + - 1天 + {{timenum}}{{timetype(chosePriceInfo.rentalUnit)}} 取车后开始计算订单时长 @@ -129,10 +158,10 @@ 还车 - 2024年09月04日 今天16:00 + {{backTime()}} - + + + + 选择租车方案 - + - 1小时 + 1{{timetype(item.rentalUnit)}} - ￥ 58 + ￥ {{item.price}} - + - - - 1小时 - - - ￥ 58 - - - - - 1小时 - - - ￥ 58 - - - @@ -187,17 +203,17 @@ - 共1天 + 共{{timenum}}{{timetype(chosePriceInfo.rentalUnit)}} - + - 1 + {{timenum}} - + @@ -226,7 +242,7 @@ - 押金￥199 + 押金￥{{modelInfo.deposit}} 全部退还 @@ -290,22 +306,15 @@ 扣费标准 - + - 超过取车时间2小时内 + {{item.instructions}} - 扣费标准 - - - - - 超过取车时间2小时内 - - - 扣费标准 + {{backDedu(item.deductPercent)}} + 配套服务 @@ -332,7 +341,7 @@ - + 线上交押 @@ -345,50 +354,69 @@ - + 订单明细 - + - + 租金 - ￥108 + ￥{{priceInfo.rent}} + + + + + 押金 + + + ￥{{priceInfo.deposit}} + + + + + 派送费 + + + ￥{{priceInfo.deliveryFee}} - - - + + + 已阅读并同意 - 《电动车租赁用户协议》《享权须知》 + 《电动车租赁用户协议》 《享权须知》 - ￥ 347.9 + ￥{{ priceInfo.totalFee? priceInfo.totalFee : '--' }} - + 明细 - + - + 去支付 + + @@ -396,12 +424,73 @@ export default { data() { return { - typeidx: 1, + typeidx: 0, height: 0, - showtips: true + showtips: false, + modelId: '', + storeId: '', + modelInfo: {}, + storeInfo: {}, + agentInfo: {}, + priceList: [], + deliveryMethod: 1, + time1: false, + params: { + year: false, + month: true, + day: true, + hour: true, + minute: true, + second: false + }, + time: "", + gps: {}, + km: '', + startDate: '', + pickertime: '', + priceIndex: 0, + chosePriceInfo: {}, + timenum: 1, + priceInfo: {}, + showmx: false, + address: '', + addlon: null, + addlat: null, + agree:false + } }, + onLoad(e) { + if (e) { + this.modelId = e.modelId + this.storeId = e.storeId + + } + + console.log(e, 'eee'); + }, onShow() { + // this.getToken() + let that = this + uni.getLocation({ + type: 'gcj02', + success: function(lb) { + + that.gps.latitude = lb.latitude; + that.gps.longitude = lb.longitude; + that.getKm() + }, + fail: function(error) { + uni.showToast({ + title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能', + icon: 'none', + duration: 2000 + }); + // that.getmarks() + // 在这里处理获取位置信息失败的情况 + } + + }) this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select('.getcar').boundingClientRect(data => { @@ -410,25 +499,589 @@ console.log('ips_box height:', this.height); }).exec(); }, 300); - this.calculateDistance(); + this.calculateDistance(0); + this.getmodelInfo() + this.getstoreInfo() + + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth() + 1; // 月份从0开始，因此加1 + const day = now.getDate(); + + // 设置一个小时后的时间 + let hour = now.getHours() + 1; + let nextDay = day; + let nextMonth = month; + + // 如果 hour 超过 23，调整日期 + if (hour >= 24) { + hour = 0; + nextDay += 1; + + // 获取当前月份的天数 + const daysInMonth = new Date(year, month, 0).getDate(); + if (nextDay > daysInMonth) { + nextDay = 1; + nextMonth += 1; + + // 如果超过12月，调整到下一年 + if (nextMonth > 12) { + nextMonth = 1; + } + } + } + const minute = 0; + // 格式化为 MM-DD 的字符串 + this.startDate = + `${nextMonth < 10 ? '0' : ''}${nextMonth}-${nextDay < 10 ? '0' : ''}${nextDay} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`; + // 设置时间为当前年份、月份、日期、一个小时后的时间，分钟为 00，格式为 YYYY年MM月DD日 HH:mm + this.time = + `${year}年${nextMonth < 10 ? '0' : ''}${nextMonth}月${nextDay < 10 ? '0' : ''}${nextDay}日 ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`; + // 初始化 pickertime 为当天的默认日期 + this.pickertime = this.startDate; + + console.log('startDate:', this.startDate); + console.log('time:', this.time); + }, + methods: { - calculateDistance() { - const query = uni.createSelectorQuery().in(this); - - // 选择 "取车" 的元素 - query.select('#startType1').boundingClientRect(startRect => { - - // 选择 "还车" 的元素 - query.select('#endType1').boundingClientRect(endRect => { - - // 计算 "取车" 和 "还车" 之间的距离 - this.height = endRect.top - startRect.bottom; + handleClick() { + if (!this.address) { + this.getMapLocation(); + } + }, + handleInputClick(event) { + if (!this.address) { + // 阻止输入框默认行为，避免在 address 为空时进行输入 + event.stopPropagation(); + this.getMapLocation(); + } + }, + sub() { + if(this.paid){ + return; // 阻止后续代码执行 + } + if (this.agree==false) { + uni.showToast({ + title: '请勾选协议', + icon: 'none', + duration: 2000 + }); + return; // 阻止后续代码执行 + } + let data = { + modelId: this.modelId, + ruleId: this.chosePriceInfo.ruleId, + agentId: this.agentInfo.agentId, + num: this.timenum, + address: this.address, + pickupLon: this.addlon, + pickupLat: this.addlat, + storeId: this.storeId, + type:1 + }; + + let timeStr = this.time.replace('年', '-').replace('月', '-').replace('日', '').trim() + ':00'; + data.pickupTime = timeStr; + + if (this.typeidx == 0) { + if (!this.address || !this.addlat || !this.addlon) { + uni.showToast({ + title: '请选择地图位置', + icon: 'none', + duration: 2000 + }); + return; // 阻止后续代码执行 + } + if (this.agentInfo.isFreeCar) { + data.deliveryMethod = 2; + } else { + data.deliveryMethod = 3; + } + + } else { + data.deliveryMethod = 1; + + // 当 typeidx 为 1 时，检查 address、addlat 和 addlon 是否有值 + + } + + this.$u.post(`appVerify/createOrder`, data).then((res) => { + if (res.code == 200) { + uni.showLoading({ + title:'加载中' + }) + this.paid=true + console.log(res); + // this.freList=res.rows + uni.requestPayment({ + provider: 'wxpay', + timeStamp: res.data.response.timeStamp, + nonceStr: res.data.response.nonceStr, + package: res.data.response.packageVal, + signType: res.data.response.signType, + paySign: res.data.response.paySign, + success(res) { + // that.ispaid = false + // console.log('支付成功'); + // // 支付成功逻辑 + // clearInterval(that.timer) + // that.orderinfo = {} + // that.showdevice = false + // that.deviceIndex = 0 + uni.hideLoading() + uni.redirectTo({ + url:'/page_user/user_order?orderNo='+res.data.orderNo + }) + + }, + fail(err) { + // that.ispaid = false + console.log(res); + // 支付失败逻辑 + // uni.showToast({ + // title: '支付失败', + // icon: 'none', + // duration: 1000 + // }); + uni.hideLoading() + uni.redirectTo({ + url:'/page_user/user_order?orderNo='+res.data.orderNo + }) + // setTimeout(()=>{ + + // },1100) + } + }); + // 成功处理逻辑 + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + backDedu(info) { + if (info == 0) { + return '免费取消' + } else { + return '扣费' + info * 100 + '%' + } + }, + getToken() { + this.$u.post(`/getToken`).then((res) => { + if (res.code == 200) { - }).exec(); + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + toWord(num) { + if (num == 1) { + + } else { + + } + uni.navigateTo({ + url: '/page_user/word?id=' + 9 + }) + }, + getMapLocation() { + uni.chooseLocation({ + success: (res) => { + console.log(res); + this.address = res.address + this.addlon = res.longitude + this.addlat = res.latitude + // this.getRegionFn(res); + }, + fail: () => { + // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息 + uni.getSetting({ + success: (res) => { + console.log(res); + var status = res.authSetting; + if (!status['scope.userLocation']) { + // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息 + uni.showModal({ + title: "是否授权当前位置", + content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用", + success: (tip) => { + if (tip.confirm) { + // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作 + uni.openSetting({ + success: (data) => { + // 如果用户授权了地理信息在，则提示授权成功 + if (data + .authSetting[ + 'scope.userLocation' + ] === true + ) { + uni.showToast({ + title: "授权成功", + icon: "success", + duration: 1000 + }) + // 授权成功后，然后再次chooseLocation获取信息 + uni.chooseLocation({ + success: ( + res + ) => { + console + .log( + "详细地址", + res + ); + // this.getRegionFn(res); + } + }) + } else { + uni.showToast({ + title: "授权失败", + icon: "none", + duration: 1000 + }) + } + } + }) + } + } + }) + } + }, + fail: (res) => { + uni.showToast({ + title: "调用授权窗口失败", + icon: "none", + duration: 1000 + }) + } + }) + } + }); + }, + + mapFun() { + console.log('点击了'); + uni.openLocation({ + latitude: this.storeInfo.lat, + //纬度 - 目的地/坐标点 + longitude: this.storeInfo.lng, + //经度 - 目的地/坐标点 + // name: "荆门市", + address: this.storeInfo.simpleAddress + }); + }, + backTime() { + if (this.chosePriceInfo.rentalUnit) { + // 将 this.time 转换为 Date 对象 + const timeParts = this.time.match(/(\d{4})年(\d{2})月(\d{2})日 (\d{2}):(\d{2})/); + const startTime = new Date( + `${timeParts[1]}-${timeParts[2]}-${timeParts[3]}T${timeParts[4]}:${timeParts[5]}`); + + // 确定要增加的时间单位 + let multiplier = this.timenum; + switch (this.chosePriceInfo.rentalUnit) { + case 'hour': + startTime.setHours(startTime.getHours() + multiplier); + break; + case 'day': + startTime.setDate(startTime.getDate() + multiplier); + break; + case 'week': + startTime.setDate(startTime.getDate() + multiplier * 7); + break; + case 'month': + startTime.setMonth(startTime.getMonth() + multiplier); + break; + case 'quarter': + startTime.setMonth(startTime.getMonth() + multiplier * 3); + break; + case 'year': + startTime.setFullYear(startTime.getFullYear() + multiplier); + break; + default: + console.error('Unknown rental unit:', this.chosePriceInfo.rentalUnit); + } + + // 格式化返回时间 + const year = startTime.getFullYear(); + const month = (startTime.getMonth() + 1).toString().padStart(2, '0'); + const day = startTime.getDate().toString().padStart(2, '0'); + const hours = startTime.getHours().toString().padStart(2, '0'); + const minutes = startTime.getMinutes().toString().padStart(2, '0'); + + // 返回归还时间 + return `${year}年${month}月${day}日 ${hours}:${minutes}`; + } + + }, + getPrice() { + + let data = { + modelId: this.modelId, + + ruleId: this.chosePriceInfo.ruleId, + agentId: this.agentInfo.agentId, + num: this.timenum + } + + if (this.typeidx == 0) { + if (this.agentInfo.isFreeCar) { + data.deliveryMethod = 2 + } else { + data.deliveryMethod = 1 + } + } else { + data.deliveryMethod = 3 + } + + this.$u.post(`app/calculatePrice`, data).then((res) => { + if (res.code == 200) { + this.priceInfo = res.data + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + addnum() { + this.timenum++ + this.getPrice() + }, + subtractnum() { + if (this.timenum > 1) { + this.timenum--; + this.getPrice() + } + }, + changePrice(item, idx) { + this.chosePriceInfo = item + this.priceIndex = idx + this.getPrice() + }, + confirm1(selectedDate) { + // 将用户选择的日期和当前日期进行比较 + // 从回调中获取选择的月份、日期、小时和分钟 + const selectedMonth = parseInt(selectedDate.month, 10); + const selectedDay = parseInt(selectedDate.day, 10); + const selectedHour = selectedDate.hour; + const selectedMinute = selectedDate.minute; + + // 获取当前日期 + const now = new Date(); + const currentYear = now.getFullYear(); + const currentMonth = now.getMonth(); + const currentDay = now.getDate(); + + // 比较选择的日期和当前日期 + if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) { + // 如果选择的日期比当前日期早，则重置为当前日期时间 + const month = currentMonth < 10 ? `${currentMonth}` : currentMonth; + const day = currentDay < 10 ? `${currentDay}` : currentDay; + const hour = now.getHours() < 10 ? `${now.getHours()}` : now.getHours(); + const minute = now.getMinutes() < 10 ? `${now.getMinutes()}` : now.getMinutes(); + + this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`; + + uni.showToast({ + title: '选择的日期不能小于当前日期', + icon: 'none', + duration: 2000 + }); + } else { + // 否则，设置为用户选择的日期和时间 + const month = selectedMonth < 10 ? `${selectedMonth}` : selectedMonth; + const day = selectedDay < 10 ? `${selectedDay}` : selectedDay; + const hour = selectedHour < 10 ? `${selectedHour}` : selectedHour; + const minute = selectedMinute < 10 ? `${selectedMinute}` : selectedMinute; + + this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`; + } + console.log(this.time); + }, + getKm() { + let data = { + lon: this.gps.longitude, + lat: this.gps.latitude, + storeId: this.storeId + + } + this.$u.get(`app/computeDistance?`, data).then((res) => { + if (res.code == 200) { + + let distance = res.data; // 获取返回的距离 + + // 判断距离单位，如果小于1000米则显示米，大于等于1000米则显示千米 + if (distance < 1000) { + this.km = `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm' + } else { + this.km = `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数 + } + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + timetype(time) { + if (time == 'hour') { + return '小时' + } else if (time == 'day') { + return '天' + } else if (time == 'week') { + return '周' + } else if (time == 'month') { + return '月' + } else if (time == 'quarter') { + return '季度' + } else if (time == 'year') { + return '年' + } + }, + changeType(num) { + this.typeidx = num + this.$nextTick(() => { + this.calculateDistance(num); + }); + + }, + getpriceList() { + let data = { + modelId: this.modelId + + } + this.$u.get(`app/getRuleByModelId?`, data).then((res) => { + if (res.code == 200) { + this.priceList = res.data; + this.chosePriceInfo = this.priceList[0] + setTimeout(() => { + this.getPrice() + }, 300) + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getmodelInfo() { + let data = { + modelId: this.modelId + } + this.$u.get(`app/getModelById?`, data).then((res) => { + if (res.code == 200) { + this.modelInfo = res.data + this.getpriceList() + this.getAgent() + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getAgent() { + let data = { + agentId: this.modelInfo.agentId + + } + this.$u.get(`app/getAgentByAgentId?`, data).then((res) => { + if (res.code == 200) { + this.agentInfo = res.data; + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getstoreInfo() { + let data = { + storeId: this.storeId + } + this.$u.get(`app/getStore?`, data).then((res) => { + if (res.code == 200) { + this.storeInfo = res.data + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + calculateDistance(num) { + if (num == 0) { + console.log('00'); + setTimeout(() => { + const query = uni.createSelectorQuery().in(this); + + query.select('#startType').boundingClientRect(startRect => { + if (!startRect) { + // console.error('#startType element not found'); + return; + } + + query.select('#endType').boundingClientRect(endRect => { + if (!endRect) { + // console.error('#endType element not found'); + return; + } + + this.height = endRect.top - startRect.bottom; + }).exec(); + + }).exec(); + }, 100); + } else { + console.log('11'); + setTimeout(() => { + const query = uni.createSelectorQuery().in(this); + + query.select('#startType1').boundingClientRect(startRect => { + if (!startRect) { + // console.error('#startType1 element not found'); + return; + } + + query.select('#endType1').boundingClientRect(endRect => { + if (!endRect) { + // console.error('#endType1 element not found'); + return; + } + + this.height = endRect.top - startRect.bottom; + }).exec(); + + }).exec(); + }, 100); + } - }).exec(); } } } @@ -733,6 +1386,7 @@ } } + } .insurance_box { @@ -1170,6 +1824,7 @@ } .maps { + z-index: 100; position: absolute; right: 0; top: 100rpx; @@ -1181,6 +1836,7 @@ background-position: center; image { + position: absolute; right: 0; top: 30rpx; @@ -1199,6 +1855,16 @@ display: flex; flex-wrap: nowrap; + .input { + width: 510rpx; + } + + image { + margin-left: 6rpx; + width: 32rpx; + height: 32rpx; + } + .type { display: flex; @@ -1295,6 +1961,38 @@ } } + + + .delivery_right { + width: 50%; + height: 100rpx; + background: #fff; + border-radius: 0rpx 60rpx 0 0rpx; + + .cont { + position: relative; + flex-wrap: wrap; + padding-top: 26rpx; + text-align: center; + width: 100%; + background: #eee; + height: 100%; + border-radius: 0rpx 60rpx 0 60rpx; + font-weight: 600; + font-size: 36rpx; + color: #808080; + + image { + position: absolute; + bottom: 0; + width: 92rpx; + height: 16rpx; + left: 114rpx; + } + } + } + + .leftact { background: #fff; border-radius: 60rpx 0 0 0; @@ -1310,7 +2008,7 @@ } .rightact { - background: red; + background: #eee; border-radius: 0 60rpx 0 0; .cont { @@ -1318,39 +2016,9 @@ background: #fff; height: 100%; border-radius: 60rpx 60rpx 0 0; - color: #3D3D3D; - } - } - - .delivery_right { - width: 50%; - height: 100rpx; - background: #eee; - border-radius: 0rpx 60rpx 0 0rpx; - - .cont { - position: relative; - flex-wrap: wrap; - padding-top: 26rpx; - text-align: center; - width: 100%; - background: #fff; - height: 100%; - border-radius: 60rpx 60rpx 0 0rpx; - font-weight: 600; - font-size: 36rpx; color: #808080; - - image { - position: absolute; - bottom: 0; - width: 92rpx; - height: 16rpx; - left: 114rpx; - } } } - } } @@ -1379,6 +2047,7 @@ display: flex; .type { + margin-right: 12rpx; padding: 4rpx 10rpx; background: #DCEDFF; border-radius: 6rpx 6rpx 6rpx 6rpx; diff --git a/page_user/tips.vue b/page_user/tips.vue new file mode 100644 index 0000000..6501c5d --- /dev/null +++ b/page_user/tips.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/page_user/user_order.vue b/page_user/user_order.vue index 8a4fc66..d53e570 100644 --- a/page_user/user_order.vue +++ b/page_user/user_order.vue @@ -8,20 +8,20 @@ - 请于9月4日前到店取车 + {{typeReturn(orderInfo.status)}} - - 超出时间将无法保证车辆库存 + + 剩余支付时间：{{countdown}} - + 已还车 - 押金将退还原支付账户 + 押金将退还原支付账户 - 还车时间：09月05日（周四）16:00 + 还车时间：09月05日（周四）16:00 @@ -29,10 +29,10 @@ 租车门店 - 云行租车（汇丰公寓） + {{storeInfo.name}} - 天目山路148号 + {{storeInfo.simpleAddress}} 营业时间：09:00-21:00 @@ -42,7 +42,7 @@ 联系门店 - + 导航到店 @@ -52,22 +52,25 @@ 还取方式 - + 自行前往门店还车 + + 上门取车 + - + - 全新车网红泡泡50KM续航 + {{modelInfo.model}} - 套餐：日租 108/天 + 套餐：{{orderInfo.rentalPeriodText}} - 租赁周期：1天 + 租赁周期：{{orderInfo.num}}{{timetype(orderInfo.rentalUnit)}} @@ -75,8 +78,8 @@ 租车时间 - - 共1天（09/04 16:00-09/05 16:00) + + 共{{orderInfo.num}}{{timetype(orderInfo.rentalUnit)}}（{{returnTime(orderInfo.pickupTime)}}-{{returnTime(orderInfo.expiryTime)}}) @@ -84,17 +87,17 @@ 租金 - ￥108×1 - ￥108 + + ￥{{orderInfo.price}} - 基础服务保障 + 车辆派送费 - ￥108 + ￥{{orderInfo.deliveryFee}} @@ -102,8 +105,8 @@ 押金 - ￥108×1 - ￥108 + + ￥{{orderInfo.deposit}} @@ -115,7 +118,7 @@ 实付款 - ￥108 + ￥{{orderInfo.payFee}} @@ -128,14 +131,50 @@ - + 取车须知 - + + + + + 取消规则 + + + + + 超时规则 + + + + + 还车规则 + + - - 请在2024-09-04 16:00前取车，超出时间将无法保证 车辆库存。 + + 请在{{orderInfo.pickupTime}}前取车，超出时间将无法保证 车辆库存。 + + + + 取消时间 + + + 扣费标准 + + + + + {{item.instructions}} + + + {{backDedu(item.deductPercent)}} + + + + + @@ -143,14 +182,22 @@ - ZDVNJK24968791234168549864412 + {{orderInfo.orderNo}} - + 复制 - + + + + 取消订单 + + + 确认支付 + + 取消订单 @@ -170,14 +217,14 @@ 续租 - + - + 重新下单 - + @@ -188,9 +235,9 @@ 还车可选择以下任意一家门店 - + - + @@ -201,7 +248,7 @@ - + 营业时间：09:00-21:00 @@ -210,18 +257,20 @@ - + 人民南路110号（通过街地铁站C口步行120 米） - + + 联系门店 - + + 导航到店 @@ -249,10 +298,11 @@ 车辆编号：21358941 - 90% 可骑行35km + + 90% 可骑行35km - + @@ -263,7 +313,7 @@ - + @@ -272,15 +322,254 @@ data() { return { showsub: false, - showaddress:false + showaddress: false, + orderNo: '', + orderInfo: {}, + countdown: '', + countdownTimer: null, + storeInfo: {}, + modelInfo: {}, + tabindex:0, + agentInfo:{} } }, + onLoad(e) { + if (e.orderNo) { + this.orderNo = e.orderNo + } + }, + onShow() { + this.getOrderInfo() + }, methods: { + copy(orderNo) { + uni.setClipboardData({ + data: orderNo, + success: () => { + uni.showToast({ + title: '复制成功', + icon: 'success', + duration: 2000 + }); + }, + fail: () => { + uni.showToast({ + title: '复制失败', + icon: 'none', + duration: 2000 + }); + } + }); + }, + tosubOrder(){ + uni.navigateTo({ + url:'/page_user/ordder?storeId='+this.orderInfo.storeId+'&modelId='+this.orderInfo.modelId + }) + }, + orderCancel(){ + + this.$u.post(`appVerify/orderCancel?orderNo=`+this.orderInfo.orderNo).then((res) => { + if (res.code == 200) { + this.getOrderInfo() + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + returnTime(time) { + // 将时间字符串转换为 Date 对象 + let date = new Date(time.replace(/-/g, "/")); + + // 获取月份（注意：月份从 0 开始，需要加 1） + let month = (date.getMonth() + 1).toString().padStart(2, "0"); + + // 获取日期 + let day = date.getDate().toString().padStart(2, "0"); + + // 获取小时 + let hours = date.getHours().toString().padStart(2, "0"); + + // 获取分钟 + let minutes = date.getMinutes().toString().padStart(2, "0"); + + // 返回指定格式 + return `${month}/${day} ${hours}:${minutes}`; + }, + timetype(time) { + if (time == 'hour') { + return '小时' + } else if (time == 'day') { + return '天' + } else if (time == 'week') { + return '周' + } else if (time == 'month') { + return '月' + } else if (time == 'quarter') { + return '季度' + } else if (time == 'year') { + return '年' + } + }, + typeReturn(num) { + if (num == 0) { + return '待支付' + } else if (num == 1) { + return '待取车' + } else if (num == 2) { + return '待送车' + } else if (num == 3) { + return '送车中' + } else if (num == 4) { + return '进行中' + } else if (num == 5) { + return '超时取消' + } else if (num == 6) { + return '已取消' + } else if (num == 1) { + return '已结束' + } + }, + mapFun() { + console.log('点击了'); + uni.openLocation({ + latitude: this.storeInfo.lat, + //纬度 - 目的地/坐标点 + longitude: this.storeInfo.lng, + //经度 - 目的地/坐标点 + // name: "荆门市", + address: this.storeInfo.simpleAddress + }); + }, + getstoreInfo() { + let data = { + storeId: this.orderInfo.storeId + } + this.$u.get(`app/getStore?`, data).then((res) => { + if (res.code == 200) { + this.storeInfo = res.data + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getmodelInfo() { + let data = { + modelId: this.orderInfo.modelId + } + this.$u.get(`app/getModelById?`, data).then((res) => { + if (res.code == 200) { + this.modelInfo = res.data + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + getAgent() { + let data = { + agentId: this.orderInfo.agentId + + } + this.$u.get(`app/getAgentByAgentId?`, data).then((res) => { + if (res.code == 200) { + this.agentInfo = res.data; + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + backDedu(info) { + if (info == 0) { + return '免费取消' + } else { + return '扣费' + info * 100 + '%' + } + }, + getOrderInfo() { + let data = { + orderNo: this.orderNo + }; + this.$u.get(`appVerify/orderInfo?`, data).then((res) => { + if (res.code === 200) { + this.orderInfo = res.data; + this.getstoreInfo() + this.getmodelInfo() + this.getAgent() + // 调用倒计时方法 + if (this.orderInfo.status == 0) { + this.startCountdown(this.orderInfo.autoCancelTime); + } + + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, + + startCountdown(autoCancelTime) { + // 清除之前的倒计时，防止多次调用导致冲突 + if (this.countdownTimer) { + clearInterval(this.countdownTimer); + } + + // 将时间字符串转为时间对象 + let cancelTime = new Date(autoCancelTime.replace(/-/g, "/")).getTime(); + + // 定时器，每秒更新一次倒计时 + this.countdownTimer = setInterval(() => { + let currentTime = new Date().getTime(); + + // 计算剩余的毫秒数 + let diff = cancelTime - currentTime; + + // 如果倒计时时间已到，清除定时器并设置倒计时为 "00:00" + if (diff <= 0) { + clearInterval(this.countdownTimer); + this.countdown = "00:00"; + return; + } + + // 计算小时、分钟和秒 + let hours = Math.floor(diff / (1000 * 60 * 60)); + let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + let seconds = Math.floor((diff % (1000 * 60)) / 1000); + + // 格式化显示 + if (hours > 0) { + this.countdown = `${hours}小时 ${minutes}分钟 ${seconds}秒`; + } else { + this.countdown = `${minutes}分钟 ${seconds}秒`; + } + }, 1000); + }, } } + + \ No newline at end of file diff --git a/pages.json b/pages.json index a97cd1e..b4faadd 100644 --- a/pages.json +++ b/pages.json @@ -30,15 +30,14 @@ "navigationStyle": "custom" } } - + ], "subPackages": [{ "root": "page_user", // 分包A的根目录 - "pages": [ - { + "pages": [{ "path": "upload", "style": { "navigationBarTitleText": "上传", @@ -47,82 +46,91 @@ } }, { - "path" : "carSelection", - "style" : - { + "path": "carSelection", + "style": { "navigationBarTitleText": "上传", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "carStore", - "style" : - { + "path": "carStore", + "style": { "navigationBarTitleText": "上传", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "mapSele", - "style" : - { + "path": "mapSele", + "style": { "navigationBarTitleText": "上传", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "idTest", - "style" : - { + "path": "idTest", + "style": { "navigationBarTitleText": "上传", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "ordder", - "style" : - { + "path": "ordder", + "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "user_order", - "style" : - { + "path": "user_order", + "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "carInfo", - "style" : - { + "path": "carInfo", + "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "renewCar", - "style" : - { + "path": "renewCar", + "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } }, { - "path" : "StoreManagement", - "style" : - { - "navigationBarTitleText" : "" + "path": "word", + "style": { + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "navigationStyle": "custom" + } + }, + { + "path": "tips", + "style": { + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "navigationStyle": "custom" + } + }, + { + "path": "idcard_test", + "style": { + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "navigationStyle": "custom" } } @@ -130,7 +138,7 @@ // ... 分包A的其他页面 ] } - + ], // "tabBar": { // "custom": true, diff --git a/pages/index/index.vue b/pages/index/index.vue index 23f7fb5..e81e882 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,6 +1,6 @@