diff --git a/App.vue b/App.vue index 14cb274..b929757 100644 --- a/App.vue +++ b/App.vue @@ -10,7 +10,10 @@ } from '@dcloudio/uni-app'; import { getCurrentInstance - } from 'vue' + } from 'vue'; + import { + Storelogin + } from '@/stores/user.js'; const { proxy } = getCurrentInstance() @@ -18,7 +21,15 @@ onLaunch(async () => { // 标记应用启动完成 const store = useNavbarStore(); - store.initNavbarHeight(); + await store.initNavbarHeight(); + // #ifndef H5 + try { + const storelogin = Storelogin(); + await storelogin.actionslogin() + } catch (error) { + console.log(error) + } + // #endif try { uni.getLocation({ type: 'wgs84', @@ -27,40 +38,43 @@ lng: res.longitude, lat: res.latitude, }) - if (successres.code == 0) { + if (successres) { let datastorage = { - country: successres.data.addressComponent.country, // "中国" - province: successres.data.addressComponent + country: successres.addressComponent.country, // "中国" + province: successres.addressComponent .province, //province: "陕西省" - address: successres.data.addressComponent.city, //district: "西安市" - district: successres.data.addressComponent - .district, //district: "未央区" + address: successres.addressComponent.city, //district: "西安市" + district: successres.addressComponent.district, //district: "未央区" lng: res.longitude, lat: res.latitude, } uni.cache.set('getLocationstorage', datastorage); + // 登录 proxy.$isResolve() } }, }); } catch (error) { - let successres = await APIgeocodelocation({ - lng: '', - lat: '', - }) - if (successres.code == 0) { - let datastorage = { - country: successres.data.addressComponent.country, // "中国" - province: successres.data.addressComponent - .province, //province: "陕西省" - address: successres.data.addressComponent.city, //district: "西安市" - district: successres.data.addressComponent - .district, //district: "未央区" - lng: res.longitude, - lat: res.latitude, + try { + let successres = await APIgeocodelocation({ + lng: '', + lat: '', + }) + if (successres) { + let datastorage = { + country: successres.addressComponent.country, // "中国" + province: successres.addressComponent + .province, //province: "陕西省" + address: successres.addressComponent.city, //district: "西安市" + district: successres.addressComponent.district, //district: "未央区" + lng: res.longitude, + lat: res.latitude, + } + uni.cache.set('getLocationstorage', datastorage); + proxy.$isResolve() } - uni.cache.set('getLocationstorage', datastorage); + } catch (error) { proxy.$isResolve() } } diff --git a/common/api/api.js b/common/api/api.js index 696728d..727ac77 100644 --- a/common/api/api.js +++ b/common/api/api.js @@ -1,20 +1,33 @@ // 引入 request 文件 import request from '@/common/api/request.js' - +const url = '/account' //根据经纬度获取信息 export const APIgeocodelocation = (data) => { return request({ - url: '/location/geocode', + url: url + '/user/geo/geocode', method: 'get', data: data, toast: false }) } -//根据经纬度获取信息 -export const APIcustomlogin = (data) => { + +//登录 +export const APIuserlogin = (data) => { return request({ - url: '/login/auth/custom/login', + url: url + '/user/login', method: 'post', - data: data + data: data, + toast: false }) -} \ No newline at end of file +} + + +//用户信息获取 +export const APIuser = (data) => { + return request({ + url: url + '/user', + method: 'get', + data: data, + toast: false + }) +} diff --git a/common/api/index/coupons.js b/common/api/index/coupons.js index 284107c..22e1111 100644 --- a/common/api/index/coupons.js +++ b/common/api/index/coupons.js @@ -1,9 +1,10 @@ // 引入 request 文件 import request from '@/common/api/request.js' //获取优惠券参数列表 +const url = '/account' export const APIordergetYhqPara = (data) => { return request({ - url: '/order/getYhqPara', + url: url + '/order/getYhqPara', method: 'get', data: data }) @@ -11,7 +12,7 @@ export const APIordergetYhqPara = (data) => { //系统优惠券 export const APIorderfindCoupons = (data) => { return request({ - url: '/order/findCoupons', + url: url + '/order/findCoupons', method: 'get', data: data }) @@ -19,7 +20,7 @@ export const APIorderfindCoupons = (data) => { // 我的优惠券 export const APIordermineCoupons = (data) => { return request({ - url: '/order/mineCoupons', + url: url + '/order/mineCoupons', method: 'post', data: data, toast: false diff --git a/common/api/index/index.js b/common/api/index/index.js index 908bfbe..07989d9 100644 --- a/common/api/index/index.js +++ b/common/api/index/index.js @@ -1,44 +1,28 @@ // 引入 request 文件 +const url = '/account' import request from '@/common/api/request.js' //首页上半部分 export const APIhomehomePageUp = (data) => { return request({ - url: '/home/homePageUp', - method: 'post', + url: url + '/user/home/homePageUp', + method: 'GET', data: data }) } -//首页上半部分 +//首页xia半部分 export const APIhome = (data) => { return request({ - url: '/home', - method: 'post', - data: data, - toast: false - }) -} -//首页上半部分 -export const APIshopUserInfo = (data) => { - return request({ - url: '/user/shopUserInfo', - method: 'get', - data: data, - toast: false - }) -} -//首页上半部分 -export const APIgeocodelocation = (data) => { - return request({ - url: '/location/geocode', - method: 'get', + url: url + '/user/home/home', + method: 'GET', data: data, toast: false }) } + ///商户登录后 shopId和autokey export const APIshopExtend = (data) => { return request({ - url: '/common/shopExtend', + url: url + '/common/shopExtend', method: 'post', data: data, toast: false diff --git a/common/api/index/tothestore.js b/common/api/index/tothestore.js index 5b2c188..e27b17e 100644 --- a/common/api/index/tothestore.js +++ b/common/api/index/tothestore.js @@ -1,9 +1,10 @@ // 引入 request 文件 import request from '@/common/api/request.js' +const url = '/account' //获取top部分(店铺列表) export const APIdistiricttopCommon = (data) => { return request({ - url: '/distirict/topCommon', + url: url + '/distirict/topCommon', method: 'get', data: data }) @@ -11,7 +12,7 @@ export const APIdistiricttopCommon = (data) => { //预约到店(店铺列表) export const APIdistirictsubShopList = (data) => { return request({ - url: '/distirict/subShopList', + url: url + '/distirict/subShopList', method: 'get', data: data }) diff --git a/common/api/order/index.js b/common/api/order/index.js new file mode 100644 index 0000000..a3d6385 --- /dev/null +++ b/common/api/order/index.js @@ -0,0 +1,11 @@ +// 引入 request 文件 +import request from '@/common/api/request.js' +const url = '/order' +//订单列表 +export const APIuserorder = (data) => { + return request({ + url: url + '/user/order', + method: 'post', + data: data + }) +} \ No newline at end of file diff --git a/common/api/product/product.js b/common/api/product/product.js index ef683c1..4648944 100644 --- a/common/api/product/product.js +++ b/common/api/product/product.js @@ -1,10 +1,66 @@ // 引入 request 文件 import request from '@/common/api/request.js' - -//通过桌码获取店铺信息 +const urlAccount = '/account' +const urlProduct = '/product' +const urlOrder = '/order' +//桌码换取详细店铺信息 export const APIproductqueryShop = (data) => { return request({ - url: '/product/queryShop', + url: urlAccount + '/user/shopInfo', + method: 'get', + data: data + }) +} + +// 获取登录用户店铺会员信息 +export const APIshopUserInfo = (data) => { + return request({ + url: urlAccount + '/user/shopUser', + method: 'get', + data: data, + toast: false + }) +} + +//获取商品列表数据 +export const APIproductqueryProduct = (data) => { + return request({ + url: urlProduct + '/user/product/miniApp/home/queryProduct', + method: 'get', + data: data + }) +} + +//小程序点餐-热销商品查询 +export const productminiApphotsquery = (data) => { + return request({ + url: urlProduct + '/user/product/miniApp/hots/query', + method: 'get', + data: data + }) +} + +//小程序点餐-分组商品列表 +export const APIgroupquery = (data) => { + return request({ + url: urlProduct + '/user/product/miniApp/group/query', + method: 'get', + data: data + }) +} + +//小程序点餐-分组商品列表 +export const APIminiAppinfo = (data) => { + return request({ + url: urlProduct + '/user/product/miniApp/info/' + data, + method: 'get' + }) +} + +//小程序点餐-分组商品列表 +export const APIminiAppskuinfo = (data) => { + return request({ + url: urlProduct + '/user/product/miniApp/sku/info', method: 'get', data: data }) diff --git a/common/api/request.js b/common/api/request.js index 8c90c9f..24ba65a 100644 --- a/common/api/request.js +++ b/common/api/request.js @@ -19,11 +19,10 @@ export default (params) => { // #ifdef MP-ALIPAY environment: 'alipay', // #endif - token: uni.cache.get('token'), - openId: uni.cache.get('miniAppOpenId'), - id: uni.cache.get('userInfo').id, - shopId: uni.cache.get('shopId'), - userId: uni.cache.get('userInfo').id, + token: uni.cache.get('token') || '', + id: uni.cache.get('userInfo').id || '', + shopId: uni.cache.get('shopId') || '', + userId: uni.cache.get('userInfo').id || '', } if (toast) { uni.showLoading({ @@ -41,10 +40,10 @@ export default (params) => { const res = response.data // 根据返回的状态码做出对应的操作 //获取成功 - if (res.code == 0) { + if (res.code == 200) { uni.hideLoading(); uni.hideToast(); - resolve(res); + resolve(res.data); } else { switch (res.code) { case '-4': diff --git a/common/js/websocket.js b/common/js/websocket.js index de6ffd8..d011d2d 100644 --- a/common/js/websocket.js +++ b/common/js/websocket.js @@ -1,231 +1,301 @@ -class webSocketUtils { - constructor(url, time, params) { - this.socketTask = null; - this.is_open_socket = false; //避免重复连接 - this.url = url; - this.params = params ? params : null; ////是否初始化请求 - this.connectNum = 1; // 重连次数 - //这个参数是防止重连失败之后onClose方法会重复执行reconnect方法，导致重连定时器出问题 - //连接并打开之后可重连，且只执行重连方法一次 - this.canReconnect = false; // 是否可以重连 - //心跳检测 - this.timeout = time ? time : 5000; //多少秒执行检测 - this.heartbeatInterval = null; //检测服务器端是否还活着 - this.reconnectTimeOut = null; //重连之后多久再次重连 - try { - - return this.connectSocketInit({ - data: this.params, - type: 'connectSocketInit', - }); - } catch (e) { - // console.log('catch'); - this.reconnect(); - } - } - // 进入这个页面的时候创建websocket连接【整个页面随时使用】 - connectSocketInit(data) { - let _this = this; - this.data = data; - // #ifdef MP-WEIXIN - this.socketTask = uni.connectSocket({ - // #endif - // #ifdef MP-ALIPAY - my.connectSocket({ - // #endif - url: this.url, - success: (res) => { - console.log('创建websocketc成功...'); - // uni.hideLoading(); - // 返回实例 - return this.socketTask; - }, - fail: (res) => { - } - }); - - // #ifdef MP-WEIXIN - this.socketTask.onOpen((res) => { - // #endif - // #ifdef MP-ALIPAY - my.onSocketOpen((res) => { - // #endif - uni.hideLoading() - this.connectNum = 1; - console.log('WebSocket连接正常！==',res); - if (this.params) { //是否初始化请求 - this.send(this.params); - } - clearInterval(this.reconnectTimeOut); - clearInterval(this.heartbeatInterval); - this.is_open_socket = true; - this.canReconnect = true; - this.start(); - // 注：只有连接正常打开中 ，才能正常收到消息 - // #ifdef MP-WEIXIN - this.socketTask.onMessage((e) => { - // #endif - // #ifdef MP-ALIPAY - my.onSocketMessage((e)=>{ - // #endif - // 字符串转json - let res = JSON.parse(e.data); - uni.$emit('message', res) - // 普通socket信息处理 TODO - }); - }); - - // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接 - // #ifdef MP-WEIXIN - uni.onSocketError((res) => { - // #endif - // #ifdef MP-ALIPAY - my.onSocketError((res) => { - // #endif - console.log('网络断开，请检查！'); - this.socketTask = null; - this.is_open_socket = false; - // this.Close() - this.canReconnect = true; - clearInterval(this.heartbeatInterval); - clearInterval(this.reconnectTimeOut); - try { - if (this.connectNum <= 10) { - // uni.showLoading({ - // title: `网络连接失败，正尝试第${this.connectNum}次连接`, - // mask: true - // }) - uni.$emit('message', 1) //进行重连 - uni.showToast({ - title: `网络连接失败，正尝试第${this.connectNum}次连接`, - icon: 'none', - }); - this.reconnect(); - this.connectNum += 1; - } else { - // uni.$emit('connectError'); - uni.showToast({ - title: `网络连接失败，请检查网络！`, - icon: 'none', - }); - this.connectNum = 1; - this.canReconnect = false; - this.Close() - setTimeout(res => { - uni.switchTab({ - url: '/pages/index/index' - }) - uni.hideLoading() - }, 1000) +import { + ref, + onMounted, + onBeforeUnmount +} from 'vue'; + +const useWebSocket = (options = {}) => { + const { + heartbeatInterval = 10000, //心跳是10秒一次 + reconnectInterval = 3000, //重新连接间隔时间的一个参数 + maxReconnectAttempts = 3, //最大重连接次数 + initialReconnectInterval = 3000, // 初始重连间隔 + initMessage, + initMessageRetryCount = 3, // 新增：初始化消息发送重试次数 + initMessageRetryInterval = 2000, // 新增：初始化消息重试间隔 + maxReconnectDuration = Infinity + } = options; + + const autoReconnect = ref(true); //是否自动重新连接 + const socketTask = ref(null); + const isConnected = ref(false); //表示是否已连接上。 + const heartbeatTimer = ref(null); //心跳定时器 + const reconnectTimer = ref(null); //重连定时器 + const reconnectAttempts = ref(0); //重连的尝试次数 + const isNetworkConnected = ref(true); //监听当前网络连接状态 + const isManuallyClosed = ref(false); //是否是被手动关闭的 + const receivedMessages = ref([]); //储从 WebSocket 服务器接收到的消息 + const initMessageSendAttempts = ref(0); //初始化连接多少次 + const reconnectStartTime = ref(0); //新增：记录重连开始时间 + + // 关闭现有连接并清理资源 + const closeExistingConnection = () => { + if (socketTask.value) { + // 关闭 WebSocket 连接 + socketTask.value.close({ + success: () => { + console.log('WebSocket 连接已关闭'); + }, + fail: (err) => { + console.error('关闭 WebSocket 连接失败:', err); } - } catch (e) { - //TODO handle the exception - } - }); - // 这里仅是事件监听【如果socket关闭了会执行】 - // #ifdef MP-WEIXIN - this.socketTask.onClose(() => { - // #endif - // #ifdef MP-ALIPAY - my.onSocketClose((res) => { - // #endif - console.log("socket关闭了") - this.socketTask = null; - clearInterval(this.heartbeatInterval); - clearInterval(this.reconnectTimeOut); - // #ifdef MP-ALIPAY - // 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败 - my.offSocketMessage(); - my.offSocketError(); - my.offSocketOpen(); - my.offSocketClose(); - // #endif - this.is_open_socket = false; - if (this.canReconnect) { - this.reconnect(); - this.canReconnect = false; - } - }); - } - // 主动关闭socket连接 - Close() { - this.is_open_socket = true; - this.canReconnect = false; - - // #ifdef MP-WEIXIN - if (this.socketTask) { - this.socketTask.close({ - success(res) { - console.log('手动关闭成功'); - }, }); + + // 清除心跳定时器 + clearInterval(heartbeatTimer.value); + heartbeatTimer.value = null; + + // 清除重连定时器 + clearTimeout(reconnectTimer.value); + reconnectTimer.value = null; + + // 标记连接已断开 + isConnected.value = false; } - // #endif - // #ifdef MP-ALIPAY - my.closeSocket({ - success(res) { - console.log('手动关闭成功'); - // #ifdef MP-ALIPAY - // 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败 - my.offSocketMessage(); - my.offSocketError(); - my.offSocketOpen(); - my.offSocketClose(); - // #endif - + }; + + // 连接 WebSocket + const connect = () => { + if (!isNetworkConnected.value) { + console.log('网络未连接，暂不尝试连接 WebSocket'); + return; + } + + // 关闭现有连接并清理资源 + closeExistingConnection(); + + socketTask.value = uni.connectSocket({ + url: uni.conf.baseUrlwws, + success: (res) => { + isConnected.value = true; + reconnectAttempts.value = 0; + // 监听初始化成功在开启心跳 + // startHeartbeat(); }, - fail: (res) => { - console.log('手动关闭失败==',res); + fail: () => { + console.error('WebSocket 连接失败，尝试重连'); + if (autoReconnect.value) { + handleReconnect(); + } } }); - // #endif - } - //发送消息 - send(data) { - // console.log("发送消息---------->", data); - // 注：只有连接正常打开中 ，才能正常成功发送消息 - - // #ifdef MP-WEIXIN - if (this.socketTask) { - this.socketTask.send({ + + if (socketTask.value) { + socketTask.value.onOpen(() => { + // 初始化 初始购物车 + sendMessage(initMessage) + }); + socketTask.value.onMessage((res) => { + // console.log(res, 'receivedMessages.value') + let list = JSON.parse(res.data) + receivedMessages.value.push(list); + if (list.type == 'p') { + console.log('心跳响应正常'); + // 心跳正常，重置重连尝试次数 + reconnectAttempts.value = 0; + clearTimeout(reconnectTimer.value); + } + }); + + socketTask.value.onClose((res) => { + console.log(res, 'WebSocket 连接已关闭，尝试重连'); + isConnected.value = false; + clearInterval(heartbeatTimer.value); // 停止心跳定时器 + clearTimeout(reconnectTimer.value); // 清除重连定时器 + if (res.code == '1006') { + console.log('服务器正常关闭，停止重连'); + autoReconnect.value = false; + return false; + } + if (autoReconnect.value && !isManuallyClosed.value) { + handleReconnect(); + } + }); + + socketTask.value.onError((err) => { + console.error('WebSocket 连接发生错误:', err); + isConnected.value = false; + clearInterval(heartbeatTimer.value); + if (autoReconnect.value && !isManuallyClosed.value) { + handleReconnect(); + } + }); + } else { + console.error('socketTask 未正确初始化'); + } + }; + + // 启动心跳机制 + const startHeartbeat = () => { + if (!isNetworkConnected.value) { + console.log('网络未连接，暂停心跳'); + return; + } + heartbeatTimer.value = setInterval(() => { + if (isConnected.value) { + socketTask.value.send({ + data: JSON.stringify({ + type: 'pong' + }), + success: () => { + console.log('心跳消息发送成功'); + const pongTimer = setTimeout(() => { + console.error('心跳超时，未收到响应，尝试重连'); + clearInterval(heartbeatTimer.value); + if (autoReconnect) { + handleReconnect(); + } + }, heartbeatInterval * 1.2); + + socketTask.value.onMessage((res) => { + if (res.data === 'ping') { + clearTimeout(pongTimer); + } + }); + }, + fail: () => { + console.error('心跳消息发送失败，尝试重连'); + clearInterval(heartbeatTimer.value); + if (autoReconnect) { + handleReconnect(); + } + } + }); + } + }, heartbeatInterval); + }; + + // 手动关闭连接 + const closeSocket = () => { + isManuallyClosed.value = true; + closeExistingConnection(); + }; + + // 发送消息 + const sendMessage = async (data) => { + if (isConnected.value) { + await socketTask.value.send({ data: JSON.stringify(data), - async success() { - // console.log("消息发送成功"); + success: () => { + // console.log('消息发送成功'); }, + fail: () => { + // console.error('消息发送失败'); + } + }); + } else { + console.error('WebSocket 未连接，无法发送消息'); + } + }; + + // 处理重连逻辑 + const handleReconnect = () => { + if (!isNetworkConnected.value) { + console.log('网络未连接，暂停重连'); + return; + } + if (isManuallyClosed.value) { + console.log('手动关闭连接，不进行重连'); + return; + } + + if (reconnectAttempts.value < maxReconnectAttempts) { + reconnectAttempts.value++; + const reconnectInterval = initialReconnectInterval * Math.pow(2, reconnectAttempts.value - 1); + const randomizedInterval = reconnectInterval + Math.floor(Math.random() * 1000); + console.log(`尝试第 ${reconnectAttempts.value} 次重连，重连间隔: ${randomizedInterval}ms...`); + reconnectTimer.value = setTimeout(() => { + connect(); + }, randomizedInterval); + } else { + console.error('重连次数达到上限，停止重连'); + uni.showToast({ + title: '重连次数达到上限，停止重连', + icon: 'none' }); } - // #endif - // #ifdef MP-ALIPAY - my.sendSocketMessage({ - data: JSON.stringify(data), - success(res) { - // console.log("消息发送成功"); + }; + + // 发送初始化消息 + const sendInitMessage = async () => { + if (initMessageSendAttempts.value < initMessageRetryCount) { + initMessageSendAttempts.value++; + await socketTask.value.send({ + data: JSON.stringify(initMessage), + success: () => { + console.log('初始化消息发送成功'); + initMessageSendAttempts.value = 0; // 重置尝试次数 + }, + fail: () => { + console.log( + `初始化消息发送失败，第 ${initMessageSendAttempts.value} 次尝试，将在 ${initMessageRetryInterval} 后重试` + ); + setTimeout(() => { + sendInitMessage(); + }, initMessageRetryInterval); + } + }); + } else { + console.error('初始化消息发送失败，已达到最大重试次数'); + // initMessageSendAttempts.value = 0; // 重置尝试次数 + } + }; + + + // 网络状态监听 + const initNetworkListener = () => { + uni.getSystemInfo({ + success: (res) => { + if (res.platform !== 'devtools') { + uni.onNetworkStatusChange((statusRes) => { + isNetworkConnected.value = statusRes.isConnected; + if (statusRes.isConnected && !isManuallyClosed.value) { + console.log('网络已连接，尝试重新连接 WebSocket'); + if (!isConnected.value && autoReconnect.value) { + connect(); + } + } else if (!statusRes.isConnected) { + console.log('网络已断开，暂停 WebSocket 操作'); + clearInterval(heartbeatTimer.value); + clearTimeout(reconnectTimer.value); + if (socketTask.value) { + socketTask.value.close(); + isConnected.value = false; + } + } + }); + } }, + fail: (err) => { + console.error('获取系统信息失败:', err); + } }); - // #endif - } - //开启心跳检测 - start(data) { - // console.log('开启心跳检测', data) - this.heartbeatInterval = setInterval(() => { - this.send({ - data: '心跳检测', - type: 'heartbeat', - }); - }, this.timeout); - } - //重新连接 - reconnect() { - //停止发送心跳 - clearInterval(this.heartbeatInterval); - //如果不是人为关闭的话，进行重连 - if (!this.is_open_socket) { - console.log('进行重连'); - this.canReconnect = true; - this.reconnectTimeOut = setInterval(() => { - this.connectSocketInit(this.data); - }, this.timeout); - } - } -} -module.exports = webSocketUtils; \ No newline at end of file + + uni.getNetworkType({ + success: (res) => { + isNetworkConnected.value = res.networkType !== 'none'; + if (!isNetworkConnected.value) { + console.log('初始网络未连接，暂不尝试连接 WebSocket'); + } + } + }); + }; + + onMounted(() => { + initNetworkListener(); + connect(); + }); + + onBeforeUnmount(() => { + closeSocket(); + }); + + return { + isConnected, + sendMessage, + closeSocket, + receivedMessages + }; +}; + +export default useWebSocket; \ No newline at end of file diff --git a/components/CustomNavbar.vue b/components/CustomNavbar.vue index ac43e8f..d3d16f1 100644 --- a/components/CustomNavbar.vue +++ b/components/CustomNavbar.vue @@ -33,19 +33,22 @@ reactive, watch, onMounted, - computed + computed, + toRefs } from 'vue'; const store = useNavbarStore(); const { showBack, rightText, + showSearch, + title, isTransparent, height, - hasPlaceholder - } = store; - const showSearch = computed(() => store.showSearch); - const title = computed(() => store.title); + hasPlaceholder, + scrollTop + } = toRefs(store); + const keyword = ref() const goBack = () => { @@ -60,7 +63,7 @@ const navbarStyle = computed(() => { return { - height: `${height}px`, + // height: `${height}px`, backgroundColor: store.scrollTop >= 44 ? '#fff' : 'transparent' }; }); @@ -70,21 +73,21 @@ towStyle: {} }); onMounted(() => { - // #ifdef MP-WEIXIN + // #ifdef MP-WEIXIN || MP-ALIPAY const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); const systemInfo = uni.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight; - console.log(menuButtonInfo) // 计算标题的垂直偏移量 + const verticalOffset = menuButtonInfo.top; // const verticalOffset = menuButtonInfo.top - statusBarHeight; - const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs( - menuButtonInfo.top - menuButtonInfo.height) + // const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs( + // menuButtonInfo.top - menuButtonInfo.height) const titleHeight = menuButtonInfo.height; centerContentStyle.oneStyle = { paddingTop: `${verticalOffset}px`, paddingRight: `${menuButtonInfo.width +20}px`, // paddingTeft: `${menuButtonInfo.width +20}px`, - height: `${height}px`, + // height: `${height}px`, boxSizing: 'border-box', }; centerContentStyle.towStyle = { diff --git a/components/indexnav.vue b/components/indexnav.vue index 9b5fe3a..b997475 100644 --- a/components/indexnav.vue +++ b/components/indexnav.vue @@ -29,16 +29,16 @@ diff --git a/pages/index/text.vue b/pages/index/text.vue index 6535954..edf7123 100644 --- a/pages/index/text.vue +++ b/pages/index/text.vue @@ -1,6 +1,6 @@