完成短信入口及导航栏

.hbuilderx/launch.json

@@ -6,8 +6,8 @@
             "type" : "uni-app:app-ios"
         },
         {
-            "customPlaygroundType" : "device",
+            "customPlaygroundType" : "local",
-            "playground" : "standard",
+            "playground" : "custom",
             "type" : "uni-app:app-android"
         }
     ]

components/message/message-nav-bar.vue

@@ -0,0 +1,510 @@
+<template>
+    <view :class="`${phone}-style`">
+        <!-- 导航样式 -->
+        <NavBar :isBack="false">
+            <!-- 左侧文字图标 -->
+            <template v-slot:left>
+                <view v-if="phone == 'iphone'" class="flex flex-align-center">
+                    <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/ios/back.png"
+                        mode=""></image>
+                    <text class="left-text">过滤条件</text>
+                </view>
+                <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
+                    <text class="left-text">信息</text>
+                </view>
+            </template>
+            <!-- 中间标题 -->
+            <template v-slot:center>
+                <view v-if="phone == 'iphone' && isScroll" class="center-text">
+                    信息
+                </view>
+            </template>
+            <!-- 右侧图标 -->
+            <template v-slot:right>
+                <!-- iphone -->
+                <view v-if="phone == 'iphone'">
+                    <image class="right-icon mg-r-30" src="/static/image/phone-message/ios/more.png" mode=""></image>
+                    <image class="right-icon mg-r-5" src="/static/image/phone-message/ios/edit.png" mode=""></image>
+                </view>
+                <!-- mi -->
+                <view v-if="phone == 'mi'">
+                    <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
+                </view>
+                <!-- oppo -->
+                <view v-if="phone == 'oppo'">
+                    <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode=""></image>
+                    <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode=""></image>
+                </view>
+                <!-- huawei -->
+                <view v-if="phone == 'huawei'">
+                    <image v-if="isScroll" class="right-icon" src="/static/image/phone-message/huawei/nav-search.png"
+                        mode="">
+                    </image>
+                    <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
+                    <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
+                </view>
+                <!-- vivo -->
+                <view v-if="phone == 'vivo'">
+                    <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
+                    </image>
+                    <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
+                    <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode=""></image>
+                </view>
+            </template>
+        </NavBar>
+        <!-- 主体内容 -->
+        <view class="main-container">
+            <!-- 顶部搜索栏样式 -->
+            <view class="top-box">
+                <view v-if="showInfo.text" class="text">{{ showInfo.text }}</view>
+                <view v-if="showInfo.secondText" class="second-text">{{ showInfo.secondText }}</view>
+                <view v-if="showInfo.placeholder" class="search-box flex flex-align-center">
+                    <image class="icon" :src="`/static/image/phone-message/${props.phone}/search.png`">
+                    </image>
+                    <input class="input flex-1" :placeholder="showInfo.placeholder" type="text">
+                    <image class="icon" :src="`/static/image/phone-message/${props.phone}/mic.png`"></image>
+                </view>
+            </view>
+            <slot>
+            </slot>
+        </view>
+        <!-- 底部样式 -->
+        <template v-if="phone == 'mi' || phone == 'oppo'">
+            <image class="add-message" :src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
+            <view class="bottom-box flex">
+                <view class="item flex-1 h100">
+                    <image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-left.png`"></image>
+                    <text>{{ showInfo.bottomLtext }}</text>
+                </view>
+                <view class="item flex-1 h100">
+                    <image class="icon" :src="`/static/image/phone-message/${props.phone}/bottom-right.png`"></image>
+                    <text class="grey">{{ showInfo.bottomRtext }}</text>
+                </view>
+            </view>
+        </template>
+
+    </view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import {
+    ref,
+    reactive,
+    computed
+} from 'vue'
+import {
+    util
+} from '@/utils/common.js';
+
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    // 是否向下滚动
+    isScroll: {
+        type: Boolean,
+        default: false
+    }
+})
+
+// 展示文字信息
+const showInfo = computed(() => {
+    let text, placeholder, secondText, bottomLtext, bottomRtext
+    switch (props.phone) {
+        case "iphone":
+            text = "信息"
+            placeholder = '搜索'
+            break;
+        case "mi":
+            text = "主要"
+            placeholder = '搜索短信'
+            bottomLtext = "主要"
+            bottomRtext = "推广"
+            break;
+        case "oppo":
+            text = "消息"
+            placeholder = ''
+            bottomLtext = "消息"
+            bottomRtext = "通知"
+            break;
+        case "huawei":
+            text = "信息"
+            placeholder = '搜索信息'
+            secondText = "388 条未读"
+            break;
+        case "vivo":
+            placeholder = '搜索信息'
+            break;
+        default:
+            break;
+    }
+    return { text, placeholder, secondText, bottomLtext, bottomRtext }
+})
+
+const data = reactive({
+    navBar: {
+        title: '信息',
+        bgColor: '#FFFFFF',
+    }
+})
+</script>
+
+<style>
+@import '@/common/main.css';
+
+page {
+    background-color: #FFFFFF;
+}
+</style>
+<style lang="less">
+::v-deep .uni-navbar__header-btns {
+    width: 100px !important;
+    flex: 1;
+}
+
+::v-deep .uni-navbar__header {
+    align-items: center !important;
+}
+
+.bottom-box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 120rpx;
+    border-top: 1rpx solid #E7E7E7;
+    background-color: #ffffff;
+
+    .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            width: 44rpx;
+            height: 44rpx;
+        }
+
+        text {
+            font-size: 20rpx;
+            color: #333;
+        }
+
+        .grey {
+            color: #999999;
+        }
+    }
+}
+
+// 苹果机型样式
+.iphone-style {
+    .mg-r-30 {
+        margin-right: 60rpx;
+    }
+
+    .mg-r-5 {
+        margin-right: 10rpx;
+    }
+
+    .left-icon {
+        width: 40rpx;
+        height: 40rpx;
+    }
+
+    .right-icon {
+        width: 48rpx;
+        height: 48rpx;
+    }
+
+    .left-text {
+        font-size: 32rpx;
+        color: #0278E2;
+        margin-left: 10rpx;
+    }
+
+    .center-text {
+        font-size: 32rpx;
+        color: #1a1a1a;
+    }
+
+    .main-container {
+        padding: 20rpx 32rpx;
+
+        .top-box {
+            .text {
+                color: #1A1A1A;
+                font-size: 64rpx;
+                font-weight: 700;
+            }
+
+            .search-box {
+                margin-top: 20rpx;
+                background-color: #EEEEF0;
+                height: 68rpx;
+                border-radius: 24rpx;
+                padding: 0 16rpx;
+
+                .icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                }
+
+                .input {
+                    margin: 0 14rpx;
+
+                    ::v-deep .input-placeholder {
+                        color: #838383;
+                        font-size: 32rpx;
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+// 小米机型样式
+.mi-style {
+    .right-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 30rpx;
+    }
+
+    .main-container {
+        padding: 0 22rpx;
+
+        .top-box {
+            .text {
+                color: #1A1A1A;
+                font-size: 60rpx;
+                font-weight: 500;
+            }
+
+            .search-box {
+                margin-top: 32rpx;
+                background-color: #F0F0F0;
+                height: 84rpx;
+                border-radius: 42rpx;
+                padding: 0 34rpx;
+
+                .icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                }
+
+                .input {
+                    margin: 0 18rpx;
+
+                    ::v-deep .input-placeholder {
+                        color: #A9A9A9;
+                        font-size: 32rpx;
+                    }
+                }
+            }
+        }
+    }
+
+    .add-message {
+        position: fixed;
+        bottom: 168rpx;
+        right: 44rpx;
+        width: 120rpx;
+        height: 120rpx;
+    }
+
+
+}
+
+// oppo机型
+.oppo-style {
+    .mg-r-52 {
+        margin-right: 52rpx;
+    }
+
+    .mg-r-14 {
+        margin-right: 14rpx;
+    }
+
+    .right-icon {
+        width: 48rpx;
+        height: 48rpx;
+    }
+
+    .main-container {
+        padding: 16rpx 34rpx;
+
+        .top-box {
+            margin-bottom: 50rpx;
+
+            .text {
+                color: #1A1A1A;
+                font-size: 64rpx;
+                font-weight: 900;
+            }
+        }
+    }
+
+    .add-message {
+        width: 116rpx;
+        height: 116rpx;
+        position: fixed;
+        bottom: 200rpx;
+        right: 46rpx;
+    }
+
+    .bottom-box {
+        height: 148rpx;
+        background-color: #FAFAFA;
+        border-top: 1rpx solid #DCDCDC;
+
+        .item {
+            .icon {
+                width: 48rpx;
+                height: 48rpx;
+                margin-bottom: 12rpx;
+            }
+
+            text {
+                color: #191919;
+            }
+
+            .grey {
+                color: #717171;
+            }
+        }
+    }
+
+}
+
+// 华为机型
+.huawei-style {
+
+    ::v-deep .uni-navbar__header-container {
+        flex: 0;
+    }
+
+    .left-text {
+        color: #1a1a1a;
+        font-size: 50rpx;
+        font-weight: 700;
+        margin-left: 10rpx;
+    }
+
+    .right-icon {
+        width: 76rpx;
+        height: 76rpx;
+        margin: 0 8rpx;
+    }
+
+    .main-container {
+        padding: 40rpx 34rpx;
+
+        .top-box {
+            .text {
+                color: #1A1A1A;
+                font-size: 60rpx;
+                font-weight: 700;
+                line-height: 60rpx;
+            }
+
+            .second-text {
+                color: #646464;
+                font-size: 28rpx;
+                margin-top: 10rpx;
+            }
+
+            .search-box {
+                margin-top: 40rpx;
+                background-color: #F4F4F4;
+                height: 76rpx;
+                border-radius: 38rpx;
+                padding: 0 24rpx;
+
+                .icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                }
+
+                .input {
+                    margin: 0 14rpx;
+
+                    ::v-deep .input-placeholder {
+                        color: #646464;
+                        font-size: 32rpx;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// vivo机型
+.vivo-style {
+    ::v-deep .uni-navbar__header-container {
+        flex: 0;
+    }
+
+    .m-r-34 {
+        margin-right: 34rpx !important;
+    }
+
+    .right-icon {
+        width: 44rpx;
+        height: 44rpx;
+        margin-right: 52rpx;
+    }
+
+    .left-text {
+        font-size: 54rpx;
+        color: #1A1A1A;
+        font-weight: 700;
+        margin-left: 30rpx;
+    }
+
+    .main-container {
+
+
+        .top-box {
+            padding: 0 46rpx;
+
+            .search-box {
+                position: relative;
+                margin-top: 70rpx;
+                background-color: #ffffff;
+                height: 76rpx;
+                border-radius: 38rpx;
+                padding: 0 10rpx;
+
+                .icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                }
+
+                .input {
+                    margin: 0 20rpx;
+
+                    ::v-deep .input-placeholder {
+                        color: #646464;
+                        font-size: 32rpx;
+                    }
+                }
+            }
+
+            .search-box::after {
+                position: absolute;
+                content: '';
+                width: 100%;
+                height: 12rpx;
+                background-color: #F0F0F0;
+                bottom: 0;
+                left: 0;
+            }
+        }
+    }
+}
+</style>

components/nav-bar/nav-bar.vue

@@ -13,7 +13,7 @@
 					<template v-slot:left>
 						<view class="nav-bar-left">
 							<slot name="left">
-								<view class="left-icon" @click.stop="onBack">
+								<view v-if="isBack" class="left-icon" @click.stop="onBack">
 									<image class="nav-icon-back"
 										:src="`/static/image/nav-bar/back-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
 										mode="">
@@ -130,6 +130,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
+	isBack: {
+		type: Boolean,
+		default: true
+	},
 	tipLayerText: {
 		type: String,
 		default: ''

pages.json

@@ -10,8 +10,7 @@
 		}
 	],
 
-	"subPackages": [
+	"subPackages": [{
-		{
 			"root": "pages/call-log",
 			"pages": [{
 				"path": "call",
@@ -19,8 +18,17 @@
 					"navigationBarTitleText": "通话记录页面",
 					"navigationStyle": "custom"
 				}
+			}]
+		},
+		{
+			"root": "pages/message",
+			"pages": [{
+				"path": "list-index",
+				"style": {
+					"navigationBarTitleText": "短信列表首页",
+					"navigationStyle": "custom"
 				}
-					]
+			}]
 		},
 		{
 			"root": "pages/balance",
@@ -237,6 +245,13 @@
 						"navigationBarTitleText": "充值页",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "call-and-message-entry/call-and-message-entry",
+					"style": {
+						"navigationBarTitleText": "呼叫和短信入口",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}
@@ -250,7 +265,9 @@
 				"pages/common",
 				"pages/finance-management",
 				"pages/ant-credit-pay",
-				"pages/other"
+				"pages/other",
+				"pages/message",
+				"pages/call-log"
 			]
 		}
 	},

pages/common/call-and-message-entry/call-and-message-entry.vue

@@ -0,0 +1,164 @@
+<template>
+	<view>
+		<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
+		<view class="list-container">
+			<view class="item" v-for="item in source" :key="item.id"
+				:style="{ background: `linear-gradient( -270deg, ${item.color.bgColor} 0%, #FFFFFF 70%), #FFFFFF` }">
+				<view class="content flex flex-align-center">
+					<image class="logo" :src="`/static/image/common/phone/${item.icon}.png`" mode=""></image>
+					<view class="name flex-1">{{ item.name }}机型</view>
+					<view class="right-button" :style="{ background: item.color.buttonColor }"
+						@click="goPage(data.type == 'message' ? item.messageUrl : item.callUrl)">立即进入</view>
+				</view>
+				<view class="line" :style="{ background: item.color.lineColor }"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import {
+	ref,
+	reactive
+} from 'vue'
+import {
+	onLoad
+} from "@dcloudio/uni-app";
+import {
+	util
+} from '@/utils/common.js';
+
+// 列表
+const source = ref([{
+	name: '苹果',
+	color: {
+		bgColor: '#F3EAFF',
+		lineColor: '#B78EF5',
+		buttonColor: '#BA8DFF',
+	},
+	icon: 'iphone',
+	messageUrl: "/pages/message/list-index?phone=iphone",
+	callUrl: ""
+},
+{
+	name: '华为',
+	color: {
+		bgColor: '#FFE9E9',
+		lineColor: '#FF6969',
+		buttonColor: '#FB6767',
+	},
+	icon: 'huawei',
+	messageUrl: "/pages/message/list-index?phone=huawei",
+	callUrl: ""
+},
+{
+	name: '小米',
+	color: {
+		bgColor: '#FFF0DD',
+		lineColor: '#FFA143',
+		buttonColor: '#FFA64D',
+	},
+	icon: 'mi',
+	messageUrl: "/pages/message/list-index?phone=mi",
+	callUrl: ""
+},
+{
+	name: 'oppo',
+	color: {
+		bgColor: '#E0FFD9',
+		lineColor: '#56B745',
+		buttonColor: '#5DCD49',
+	},
+	icon: 'oppo',
+	messageUrl: "/pages/message/list-index?phone=oppo",
+	callUrl: ""
+}, {
+	name: 'vivo',
+	color: {
+		bgColor: '#D4F4FF',
+		lineColor: '#52C2FF',
+		buttonColor: '#50C1FE',
+	},
+	icon: 'vivo',
+	messageUrl: "/pages/message/list-index?phone=vivo",
+	callUrl: ""
+},
+])
+
+const data = reactive({
+	navBar: {
+		title: '选择机型',
+		bgColor: '#F0F4F9',
+	},
+	type: "message"
+})
+
+onLoad((options) => {
+	if (options.type) {
+		data.type = options.type
+	}
+})
+
+function goPage(url) {
+	if (url) {
+		util.goPage(url)
+	} else {
+		uni.showToast({
+			title: '开发中',
+			icon: 'none'
+		})
+	}
+}
+</script>
+
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less">
+.list-container {
+	background-color: #F0F4F9;
+	padding: 24rpx 32rpx;
+}
+
+.item {
+	width: 100%;
+	height: 188rpx;
+	border-radius: 24rpx;
+	margin-bottom: 24rpx;
+	padding: 40rpx 36rpx 24rpx 28rpx;
+
+	.content {
+		.logo {
+			width: 96rpx;
+			height: 96rpx;
+			flex-shrink: 0;
+		}
+
+		.name {
+			margin-left: 32rpx;
+			color: #1A1A1A;
+			font-size: 36rpx;
+			font-weight: 500;
+		}
+
+		.right-button {
+			width: 140rpx;
+			height: 64rpx;
+			border-radius: 16rpx;
+			color: #ffffff;
+			font-size: 28rpx;
+			line-height: 64rpx;
+			text-align: center;
+		}
+	}
+
+	.line {
+		width: 100rpx;
+		height: 8rpx;
+		filter: blur(5px);
+		opacity: 0.5;
+		margin-top: 4rpx;
+	}
+}
+</style>

pages/index/index.nvue

@@ -79,7 +79,7 @@
 					<view class="group-box">
 						<image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image>
 						<view class="video-help-box">
-							<view class="video-help-item" :style="{ width: (windowWidth - 50) / 4 + 'px' }"
+							<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
 								v-for="item in videoHelpList" :key="item.id" @click="clickVideoHelp(item)">
 								<image class="video-help-img" :src="item.icon"></image>
 								<text class="video-help-title">{{ item.text }}</text>
@@ -114,7 +114,7 @@
 					<view class="group-box">
 						<image class="title-img" src="/static/image/index/qita.png"></image>
 						<view class="video-help-box">
-							<view class="video-help-item" :style="{ width: (windowWidth - 50) / 4 + 'px' }"
+							<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
 								v-for="item in otherList" :key="item.id" @click="clickMenu(item)">
 								<image class="video-help-img" :src="item.icon"></image>
 								<text class="video-help-title">{{ item.name }}</text>
@@ -136,42 +136,42 @@
 	</view>
 </template>
 <script setup>
-import {
+	import {
 		util,
 		uiUtil
-} from '@/utils/common.js'
+	} from '@/utils/common.js'
-import {
+	import {
 		storage
-} from '@/utils/storage.js'
+	} from '@/utils/storage.js'
-import {
+	import {
 		get,
 		postJson
-} from '@/utils/requests.js'
+	} from '@/utils/requests.js'
-import {
+	import {
 		ref,
 		reactive,
 		toRefs
-} from 'vue';
+	} from 'vue';
 
-import {
+	import {
 		onLoad,
 		onShow,
 		onHide,
 		onUnload,
 		onReady
-} from '@dcloudio/uni-app';
+	} from '@dcloudio/uni-app';
 
-onReady(() => {
+	onReady(() => {
 		// NVUE 挂载极快，但给它 100~200ms 的喘息让原生视图确认渲染
 		setTimeout(() => {
 			// #ifdef APP-PLUS
 			plus.navigator.closeSplashscreen();
 			// #endif
 		}, 150);
-});
+	});
 
-// 内部埋点方法
+	// 内部埋点方法
-const apiUserEvent = async (type, adminData) => {
+	const apiUserEvent = async (type, adminData) => {
 		let uni_version = uni.getStorageSync("version")
 		if (type != 'uni') {
 			await postJson('a', 'api/user/event', {
@@ -184,10 +184,10 @@ const apiUserEvent = async (type, adminData) => {
 				}),
 			})
 		}
-}
+	}
 
-// 内部跳转充值页方法
+	// 内部跳转充值页方法
-const goRechargePage = () => {
+	const goRechargePage = () => {
 		// 进入页面
 		apiUserEvent('all', {
 			type: "event",
@@ -200,64 +200,69 @@ const goRechargePage = () => {
 		uni.navigateTo({
 			url: '/pages/common/recharge/index'
 		});
-}
+	}
 
-// 菜单列表
+	// 菜单列表
-const menuList = [{
+	const menuList = [{
 			icon: "yuemoni",
 			name: "余额模拟",
 			isHot: false,
 			path: "/pages/balance/index"
-},
+		},
-{
+		{
 			icon: "zhangdanshencheng",
 			name: "账单生成",
 			isHot: false,
 			path: "/pages/bill/bill-list/bill-list"
-},
+		},
-{
+		{
 			icon: "licaiheika",
 			name: "理财黑卡",
 			isHot: true,
 			path: "/pages/finance-management/index"
 			// path: ""
-},
+		},
-{
+		{
 			icon: "huabei",
 			name: "花呗",
 			isHot: false,
 			path: "/pages/ant-credit-pay/index"
-},
+		},
-]
+	]
-const otherList = [{
+	const otherList = [{
 			icon: "/static/image/index/qita/jipiao.png",
 			name: "机票",
 			path: "/pages/other/tickets-app/index?type=airTicket"
-},
+		},
-{
+		{
 			icon: "/static/image/index/qita/huochepiao.png",
 			name: "火车票",
 			// path: "/pages/other/train-tickets/12306-tickets/12306-tickets"
 			path: "/pages/other/tickets-app/index?type=trainTicket"
-},
+		},
-{
+		{
 			icon: "/static/image/index/qita/gongzidan.png",
 			name: "工资单",
 			path: "/pages/other/splash/splash"
-},
+		},
-{
+		{
 			icon: "/static/image/index/qita/shipinqunliao.png",
 			name: "视频群聊",
 			path: "/pages/other/video-group-chat/video-group-chat"
-},
+		},
-{
+		{
 			icon: "/static/image/index/qita/card.png",
 			name: "身份证",
 			path: "/pages/other/card/card"
-},
+		},
-]
+		{
+			icon: "/static/image/index/qita/card.png",
+			name: "短信",
+			path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
+		},
+	]
 
-const data = reactive({
+	const data = reactive({
 		navBarBgColor: 'transparent',
 		statusBarHeight: 0,
 		windowWidth: 0,
@@ -268,9 +273,9 @@ const data = reactive({
 		vision: "",
 		platform: '', // 添加平台信息,
 		qqgroup: {}
-})
+	})
 
-const {
+	const {
 		statusBarHeight,
 		windowWidth,
 		windowHeight,
@@ -280,12 +285,12 @@ const {
 		vision,
 		platform,
 		qqgroup
-} = toRefs(data);
+	} = toRefs(data);
 
-/**
+	/**
 	 * 处理页面滚动事件
 	 */
-const handleScroll = (e) => {
+	const handleScroll = (e) => {
 		const scrollTop = e.detail.scrollTop
 		// 滚动超过20px时显示蓝色背景，否则显示透明背景
 		if (scrollTop > 20) {
@@ -293,16 +298,16 @@ const handleScroll = (e) => {
 		} else {
 			data.navBarBgColor = 'transparent'
 		}
-}
+	}
 
-onLoad(async () => {
+	onLoad(async () => {
 		// 获取平台信息
 		const systemInfo = uni.getSystemInfoSync()
 		data.platform = systemInfo.platform
 		data.vision = uni.getStorageSync('version')
-})
+	})
 
-onShow(() => {
+	onShow(() => {
 		// 启动时获取数据
 		fetchUserData()
 		// 每次显示时刷新数据
@@ -318,12 +323,12 @@ onShow(() => {
 			plus.navigator.setStatusBarStyle("dark");
 		}, 500)
 		// #endif
-})
+	})
 
-/**
+	/**
 	 * 获取用户数据(从服务器)
 	 */
-const fetchUserData = async () => {
+	const fetchUserData = async () => {
 		try {
 			// 先设置默认值,避免页面显示异常
 			setUserData()
@@ -363,12 +368,12 @@ const fetchUserData = async () => {
 		} catch (error) {
 			console.error('获取用户数据异常:', error)
 		}
-}
+	}
 
-/**
+	/**
 	 * 获取用户信息
 	 */
-const fetchUserInfo = async () => {
+	const fetchUserInfo = async () => {
 		const data = await get('', 'api/user', {})
 		if (data.code === 0) {
 			uni.setStorageSync('userInfo', data.data)
@@ -376,12 +381,12 @@ const fetchUserInfo = async () => {
 		} else {
 			throw new Error(data.message || '获取用户信息失败')
 		}
-}
+	}
 
-/**
+	/**
 	 * 获取用户配置
 	 */
-const fetchUserConfig = async () => {
+	const fetchUserConfig = async () => {
 		const data = await get('', 'api/user/config', {})
 		if (data.code === 0) {
 			uni.setStorageSync('config', data.data)
@@ -389,13 +394,13 @@ const fetchUserConfig = async () => {
 		} else {
 			throw new Error(data.message || '获取用户配置失败')
 		}
-}
+	}
 
 
-/**
+	/**
 	 * 设置用户数据(从本地存储读取)
 	 */
-const setUserData = () => {
+	const setUserData = () => {
 		// 用户信息 - 提供默认值
 		const userInfoData = storage.get("userInfo")
 		data.userInfo = userInfoData || {
@@ -437,9 +442,9 @@ const setUserData = () => {
 			}
 			data.videoHelpList = []
 		}
-}
+	}
 
-const clickMenu = (item) => {
+	const clickMenu = (item) => {
 		if (!item.path) {
 			uiUtil.showError('开发中')
 		} else {
@@ -450,61 +455,61 @@ const clickMenu = (item) => {
 			}
 			util.goPage(url)
 		}
-}
+	}
 
 
-// 开通vip
+	// 开通vip
-const openVip = () => {
+	const openVip = () => {
 		goRechargePage()
-}
+	}
 
-/**
+	/**
 	 * 点击视频教程
 	 * @param item 
 	 */
-const clickVideoHelp = (item) => {
+	const clickVideoHelp = (item) => {
 		const url = item.url
 		util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
-}
+	}
 
-/**
+	/**
 	 * 点击公告
 	 */
-const clickNotice = () => {
+	const clickNotice = () => {
 		console.log("点击公告", noticeInfo.value)
 		if (!noticeInfo.value.url) return
 		const url = noticeInfo.value.url + `&uni_id=${userInfo.value.user_id}`
 		util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${noticeInfo.value.title}`)
-}
+	}
 
-/**
+	/**
 	 * 终极兼容版复制函数
 	 */
-const copyNumber = (number) => {
+	const copyNumber = (number) => {
 		if (!number) return;
 		const text = String(number);
 		uni.setClipboardData({
 			data: text,
-		success: function () {
+			success: function() {
 				uni.showToast({
 					title: '复制成功',
 					icon: 'none'
 				});
 			},
-		fail: function () {
+			fail: function() {
 				uni.showToast({
 					title: '复制失败',
 					icon: 'none'
 				});
 			}
 		});
-}
+	}
 
 
-/**
+	/**
 	 * 退出模拟器
 	 */
-const exit = () => {
+	const exit = () => {
 		console.log("退出模拟器")
 		// 判断是否为 iOS 环境
 		if (uni.getSystemInfoSync().platform === 'ios') {
@@ -514,25 +519,25 @@ const exit = () => {
 		} else {
 			plus.runtime.quit();
 		}
-}
+	}
 
-const noticeContainer = ref(null);
+	const noticeContainer = ref(null);
-const noticeInner = ref(null);
+	const noticeInner = ref(null);
-const noticeBox = ref(null);
+	const noticeBox = ref(null);
 
-// #ifndef H5
+	// #ifndef H5
-const animation = uni.requireNativePlugin('animation');
+	const animation = uni.requireNativePlugin('animation');
-const dom = uni.requireNativePlugin('dom');
+	const dom = uni.requireNativePlugin('dom');
-// #endif
+	// #endif
 
-let marqueeTimer = null;
+	let marqueeTimer = null;
-const currentMarqueeId = ref(0);
+	const currentMarqueeId = ref(0);
-const lastMarqueeText = ref('');
+	const lastMarqueeText = ref('');
 
-/**
+	/**
 	 * 开始走马灯
 	 */
-const startMarquee = () => {
+	const startMarquee = () => {
 		// 避免不必要的重置：如果文本没有变化且正在运行，则忽略
 		if (lastMarqueeText.value === noticeInfo.value.text && currentMarqueeId.value > 0) {
 			return;
@@ -580,12 +585,12 @@ const startMarquee = () => {
 				});
 			});
 		}, 1000); // 增加延时确保渲染
-}
+	}
 
-/**
+	/**
 	 * 执行滚动动画循环
 	 */
-const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
+	const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
 		// ID 校验：如果当前ID不匹配，说明已被新动画取代，停止递归
 		if (myId !== currentMarqueeId.value) return;
 		if (!noticeInner.value) return;
@@ -622,12 +627,12 @@ const runMarqueeAnimation = (containerWidth, textWidth, myId) => {
 				runMarqueeAnimation(containerWidth, textWidth, myId);
 			});
 		});
-}
+	}
 
-/**
+	/**
 	 * 停止走马灯
 	 */
-const stopMarquee = () => {
+	const stopMarquee = () => {
 		// 清除定时器
 		if (marqueeTimer) {
 			clearTimeout(marqueeTimer);
@@ -635,42 +640,42 @@ const stopMarquee = () => {
 		}
 		// 增加ID使其失效
 		currentMarqueeId.value++;
-}
+	}
 
-onHide(() => {
+	onHide(() => {
 		stopMarquee();
-})
+	})
 
-onUnload(() => {
+	onUnload(() => {
 		stopMarquee();
-})
+	})
 </script>
 <style>
-.container {
+	.container {
 		background-color: #F0F4F9;
-}
+	}
 
-.margin-l-6 {
+	.margin-l-6 {
 		margin-left: 6px;
-}
+	}
 
-.index-bg-img {
+	.index-bg-img {
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: 0;
-}
+	}
 
-.nav-bar-box {
+	.nav-bar-box {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		z-index: 9999;
 		background-color: transparent;
-}
+	}
 
-.content-box {
+	.content-box {
 		position: fixed;
 		top: 0rpx;
 		left: 0;
@@ -680,29 +685,29 @@ onUnload(() => {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-}
+	}
 
 
-::v-deep .uni-scroll-view-content {
+	::v-deep .uni-scroll-view-content {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-}
+	}
 
-.status-box {
+	.status-box {
 		width: 100%;
-}
+	}
 
-.nav-box {
+	.nav-box {
 		height: 44px;
 		background-color: transparent;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-}
+	}
 
-.left-box {
+	.left-box {
 		width: 60px;
 		height: 44px;
 		background-color: transparent;
@@ -711,9 +716,9 @@ onUnload(() => {
 		justify-content: center;
 		position: relative;
 		z-index: 10;
-}
+	}
 
-.title {
+	.title {
 		flex: 1;
 		height: 44px;
 		font-size: 32rpx;
@@ -724,33 +729,33 @@ onUnload(() => {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-}
+	}
 
-.right-box {
+	.right-box {
 		width: 60px;
 		height: 44px;
 		background-color: transparent;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-}
+	}
 
-.user-box {
+	.user-box {
 		position: relative;
 		margin: 24rpx 32rpx 0;
 		height: 120rpx;
 		z-index: 10;
-}
+	}
 
-.user-bg {
+	.user-bg {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 120rpx;
-}
+	}
 
-.user-info-box {
+	.user-info-box {
 		position: absolute;
 		display: flex;
 		flex-direction: row;
@@ -762,49 +767,49 @@ onUnload(() => {
 		width: 100%;
 		height: 120rpx;
 		z-index: 1;
-}
+	}
 
-.user-info {
+	.user-info {
 		flex: 1;
-}
+	}
 
-.user-avatar {
+	.user-avatar {
 		width: 72rpx;
 		height: 72rpx;
 		border-radius: 50%;
 		margin-right: 20rpx;
-}
+	}
 
-.name-box {
+	.name-box {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-}
+	}
 
-.phone-text {
+	.phone-text {
 		font-size: 28rpx;
 		color: #FFFFFF;
 		font-weight: bold;
 		margin-right: 12rpx;
-}
+	}
 
-.vip-logo {
+	.vip-logo {
 		width: 60rpx;
 		height: 20rpx;
-}
+	}
 
-.vip-end-time {
+	.vip-end-time {
 		font-size: 24rpx;
 		color: #FFFFFF;
 		margin-top: 8rpx;
-}
+	}
 
-.open-vip-btn {
+	.open-vip-btn {
 		height: 40rpx;
 		width: 116rpx;
-}
+	}
 
-.notice-box {
+	.notice-box {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
@@ -814,9 +819,9 @@ onUnload(() => {
 		padding: 0 16rpx;
 		height: 64rpx;
 		overflow: hidden;
-}
+	}
 
-.sound-box {
+	.sound-box {
 		height: 64rpx;
 		width: 50rpx;
 		display: flex;
@@ -824,86 +829,86 @@ onUnload(() => {
 		justify-content: center;
 		position: relative;
 		z-index: 10;
-}
+	}
 
-.notice-content-wrapper {
+	.notice-content-wrapper {
 		flex: 1;
 		flex-direction: row;
 		overflow: hidden;
-}
+	}
 
-.notice-inner {
+	.notice-inner {
 		flex-direction: row;
 		align-items: center;
-}
+	}
 
-.notice-content {
+	.notice-content {
 		font-size: 24rpx;
 		color: #767676;
-}
+	}
 
-.group-box {
+	.group-box {
-	margin: 32rpx;
+		margin: 16px;
 		margin-bottom: 0;
-}
+	}
 
-.title-img {
+	.title-img {
 		width: 140rpx;
 		height: 44rpx;
-}
+	}
 
-.video-help-box {
+	.video-help-box {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-	justify-content: space-between;
+		justify-content: flex-start;
 		background-color: #FFFFFF;
 		padding: 24rpx 0;
 		border-radius: 24rpx;
 		margin-top: 16rpx;
 		flex-wrap: wrap;
 		padding-top: 8rpx;
-}
+	}
 
-.video-help-item {
+	.video-help-item {
 		margin-top: 16rpx;
 		width: 25%;
 		text-align: center;
 		flex-direction: column;
 		display: flex;
 		align-items: center;
-}
+	}
 
-.video-help-img {
+	.video-help-img {
 		width: 96rpx;
 		height: 96rpx;
-}
+	}
 
-.video-help-title {
+	.video-help-title {
 		font-size: 24rpx;
 		color: #1A1A1A;
 		text-align: center;
-}
+	}
 
-.menu-box {
+	.menu-box {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 		flex-wrap: wrap;
 		margin-top: 16rpx;
-}
+	}
 
-.item-box {
+	.item-box {
 		position: relative;
 		height: 156rpx;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-end;
 		margin-bottom: 32rpx;
-}
+	}
 
-.menu-item {
+	.menu-item {
 		display: flex;
 		position: relative;
 		flex-direction: row;
@@ -913,47 +918,47 @@ onUnload(() => {
 		border-radius: 16rpx;
 		padding: 16rpx 32rpx;
 		height: 140rpx;
-}
+	}
 
 
-.menu-item-name {
+	.menu-item-name {
 		font-weight: bold;
 		font-size: 32rpx;
 		color: #000000;
-}
+	}
 
-.name-img {
+	.name-img {
 		height: 28rpx;
-}
+	}
 
-.hot-icon {
+	.hot-icon {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 68rpx;
 		height: 30rpx;
 		z-index: 99;
-}
+	}
 
-.activity-box {
+	.activity-box {
 		margin: 0 32rpx;
-}
+	}
 
-.footer-box {
+	.footer-box {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
 		margin-top: 40rpx;
 		margin-bottom: 10rpx;
-}
+	}
 
-.vision-text {
+	.vision-text {
 		font-size: 24rpx;
 		color: #767676;
-}
+	}
 
-.ios-padding-bottom {
+	.ios-padding-bottom {
 		margin-bottom: 50rpx;
-}
+	}
 </style>

pages/message/list-index.vue

@@ -0,0 +1,100 @@
+<template>
+	<view>
+		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
+			<view v-for="index in 100">{{ index }}</view>
+		</MessageNavBar>
+	</view>
+</template>
+
+<script setup>
+import MessageNavBar from '@/components/message/message-nav-bar.vue'
+import {
+	ref,
+	reactive
+} from 'vue'
+import {
+	onLoad,
+	onPageScroll
+} from "@dcloudio/uni-app";
+import {
+	util
+} from '@/utils/common.js';
+
+const data = reactive({
+	navBar: {
+		title: '信息',
+		bgColor: '#FFFFFF',
+	},
+	phone: 'iphone',
+	isScroll: false
+})
+
+onLoad((options) => {
+	if (options.phone) {
+		data.phone = options.phone
+	}
+})
+
+onPageScroll((e) => {
+	console.log(e.scrollTop)
+	if (e.scrollTop > 60) {
+		data.isScroll = true
+	} else {
+		data.isScroll = false
+	}
+})
+
+</script>
+
+<style>
+@import '@/common/main.css';
+
+page {
+	background-color: #FFFFFF;
+}
+</style>
+<style lang="less">
+::v-deep .uni-navbar__header-btns {
+	width: 100px !important;
+	flex: 1;
+}
+
+.iphone-style {
+	.mg-r-30 {
+		margin-right: 60rpx;
+	}
+
+	.mg-r-5 {
+		margin-right: 10rpx;
+	}
+
+	.left-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.right-icon {
+		width: 48rpx;
+		height: 48rpx;
+	}
+
+	.left-text {
+		font-size: 32rpx;
+		color: #0278E2;
+		margin-left: 10rpx;
+	}
+
+	.center-text {
+		font-size: 32rpx;
+		color: #1a1a1a;
+	}
+}
+
+.mi-style {
+	.right-icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 30rpx;
+	}
+}
+</style>