Browse Source

创建了自定义的我的自选页面;点击添加自选股跳转到行情页面;

maziyang/feature-20251025172218-智能客服中台
宋杰 4 weeks ago
parent
commit
a60d29b0f2
  1. 11
      pages.json
  2. 127
      pages/customStockList/customStockList.vue
  3. 9
      pages/home/home.vue

11
pages.json

@ -350,7 +350,16 @@
"path" : "pages/customStockList/customStockList", "path" : "pages/customStockList/customStockList",
"style" : "style" :
{ {
"navigationBarTitleText" : "我的自选"
"navigationBarTitleText" : "我的自选",
"app-plus": {
"titleNView": false
},
"h5": {
"titleNView": false
},
"mp-weixin": {
"navigationStyle": "custom"
}
} }
} }

127
pages/customStockList/customStockList.vue

@ -1,6 +1,39 @@
<!-- 自选股页面 -->
<template> <template>
<view>
<view class="container">
<!-- 自定义导航栏 -->
<view class="custom-navbar">
<view class="navbar-content">
<view class="navbar-left">
<view class="back-btn" @click="goBack">
<text class="back-icon"></text>
</view>
</view>
<view class="navbar-center">
<text class="navbar-title">我的自选</text>
</view>
<view class="navbar-right">
<image
class="navbar-btn"
src="https://d31zlh4on95l9h.cloudfront.net/images/ba5c8a2eda065274e868bcd9b2d7d914.png"
@click="onFirstButtonClick"
mode="aspectFit"
></image>
<image
class="navbar-btn"
src="https://d31zlh4on95l9h.cloudfront.net/images/a4ae8952aeae90dac6d2b4c221c65fa9.png"
@click="onSecondButtonClick"
mode="aspectFit"
></image>
</view>
</view>
</view>
<!-- 页面内容 -->
<view class="page-content">
</view>
</view> </view>
</template> </template>
@ -12,11 +45,103 @@
} }
}, },
methods: { methods: {
//
goBack() {
uni.navigateBack()
},
//
onFirstButtonClick() {
console.log('第一个按钮被点击')
//
},
//
onSecondButtonClick() {
console.log('第二个按钮被点击')
//
}
} }
} }
</script> </script>
<style> <style>
.container {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
}
/* 自定义导航栏 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: #ffffff;
border-bottom: 1px solid #e5e5e5;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 15px;
/* 适配状态栏高度 */
padding-top: var(--status-bar-height, 20px);
min-height: calc(44px + var(--status-bar-height, 20px));
}
.navbar-left {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.back-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.back-icon {
font-size: 24px;
color: #333333;
font-weight: bold;
}
.navbar-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.navbar-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
}
.navbar-btn {
width: 24px;
height: 24px;
}
/* 页面内容 */
.page-content {
padding-top: calc(44px + var(--status-bar-height, 20px) + 1px);
min-height: calc(100vh - 44px - var(--status-bar-height, 20px) - 1px);
}
</style> </style>

9
pages/home/home.vue

@ -81,7 +81,7 @@
<view class="section-header-container"> <view class="section-header-container">
<view class="section-header"> <view class="section-header">
<text class="section-title">我的自选</text> <text class="section-title">我的自选</text>
<text class="more-btn">添加自选股</text>
<text class="more-btn" @click="goToMarketSituation">添加自选股</text>
</view> </view>
<!-- 我的自选TCP连接状态和控制 --> <!-- 我的自选TCP连接状态和控制 -->
<!-- <view class="my-stocks-tcp-control"> <!-- <view class="my-stocks-tcp-control">
@ -437,6 +437,13 @@ export default {
}) })
}, },
//
goToMarketSituation() {
uni.navigateTo({
url: '/pages/marketSituation/marketSituation'
})
},
// //
goToAnalysisInstitutionalTrends() { goToAnalysisInstitutionalTrends() {
uni.navigateTo({ uni.navigateTo({

Loading…
Cancel
Save