qichexitong/car_client_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4-消息

Browse Source
This commit is contained in:
DL
2024-01-09 19:09:41 +08:00
parent d3edf21544
commit bd4047d0cf
10 changed files with 299 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages.json
View File

@@ -27,6 +27,18 @@
"navigationBarTitleText": "服务"
}
}, {
"path": "pages/serve/message/m_display",
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "pages/mine/wallet/wallet",
"style": {
"navigationBarTitleText" : "",

9
pages/serve/index.vue
View File

@@ -7,7 +7,7 @@
<view class="l_txt">杭州啊啊啊啊</view>
<image class="l_imgfoot" src="@/static/images/app/serve/serve_blackr.png" mode=""></image>
</view>
<view class="posi_r">
<view class="posi_r" @click="toDisplayPages">
<image class="r_img" src="@/static/images/app/serve/serve_message.png" mode=""></image>
<view class="r_num">
3
@@ -104,6 +104,13 @@
return {
price:198
};
},
methods:{
toDisplayPages(){
uni.navigateTo({
url:`/pages/serve/message/m_display`
})
}
}
}
</script>

279
pages/serve/message/m_display.vue Normal file
View File

@@ -0,0 +1,279 @@
<template>
<view class="m_display">
<!-- <view class="clearView" @click="openClear">
<image class="clear_img" src="@/static/images/app/serve/m_xiaochu.png" mode=""></image>
</view> -->
<view class="viewBox">
<view class="box">
<view class="box_l">
<image class="box_l_img" src="@/static/images/app/serve/m_one.png" mode=""></image>
<view class="box_l_txt"> 系统消息 </view>
</view>
<view class="box_r">
<view class="box_r_txt"> 1 </view>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</view>
<view class="box">
<view class="box_l">
<image class="box_l_img" src="@/static/images/app/serve/m_two.png" mode=""></image>
<view class="box_l_txt"> 订单消息 </view>
</view>
<view class="box_r">
<view class="box_r_txt"> 1 </view>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</view>
<view class="box">
<view class="box_l">
<image class="box_l_img" src="@/static/images/app/serve/m_three.png" mode=""></image>
<view class="box_l_txt"> 评论 </view>
</view>
<view class="box_r">
<view class="box_r_txt"> 1 </view>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</view>
<view class="box">
<view class="box_l">
<image class="box_l_img" src="@/static/images/app/serve/m_four.png" mode=""></image>
<view class="box_l_txt"> 收到的赞 </view>
</view>
<view class="box_r">
<view class="box_r_txt"> 1 </view>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</view>
<view class="box">
<view class="box_l">
<image class="box_l_img" src="@/static/images/app/serve/m_five.png" mode=""></image>
<view class="box_l_txt"> 陌生人的消息 </view>
</view>
<view class="box_r">
<view class="box_r_txt"> 1 </view>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</view>
</view>
<view class="chatView">
<view class="chat">
<view class="chat_l">
<image class="chat_l_img" src="@/static/images/app/serve/m_liuyan.png" mode=""></image>
<view class="chat_l_txt">
<view class="txt_up"> BYD </view>
<view class="txt_down"> 已经通过了~ </view>
</view>
</view>
<view class="chat_r">
<view class="chat_r_txt"> 1 </view>
</view>
</view>
</view>
<u-popup :show="showClear" mode="center" @close="showClear=false" :safeAreaInsetBottom='false'>
<view class="allView">
<view class="big_txt"> 标记已读 </view>
<view class="small_txt"> 是否把所有消息标记为已读？ </view>
<view class="is_sure">
<view class="quxiao" @click="showClear=false"> 取消 </view>
<view class="queren" @click="sureClear"> 确认 </view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default{
data(){
return{
showClear:false, // 是否清除
}
},
methods:{
openClear(){
this.showClear=true
},
sureClear(){
this.showClear=false
}
}
}
</script>
<style lang="scss">
.allView {
display: flex;
flex-direction: column;
align-items: center;
.big_txt {
font-size: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
margin-top: 64rpx;
}
.small_txt {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #222222;
margin-top: 32rpx;
}
.is_sure {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 64rpx;
.quxiao {
padding: 20rpx 96rpx;
border: 2rpx solid #EDEDED;
font-size: 34rpx;
font-family: Noto Sans SC, Noto Sans SC;
font-weight: 400;
color: #222222;
}
.queren {
padding: 20rpx 96rpx;
border: 2rpx solid #13AFA8;
background: #13AFA8;
border-radius: 0rpx 0rpx 0rpx 0rpx;
font-size: 34rpx;
font-family: Noto Sans SC, Noto Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
.clearView {
background: #FFFFFF;
display: flex ;
justify-content: flex-end;
padding: 0 36rpx;
.clear_img {
width: 40rpx;
height: 40rpx;
}
}
.chatView {
margin-top: 16rpx;
background: #FFFFFF;
.chat {
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 24rpx;
.chat_l {
display: flex;
justify-content: space-between;
align-items: center;
.chat_l_img {
width: 104rpx;
height: 104rpx;
}
.chat_l_txt {
margin-left: 36rpx;
.txt_up{
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
}
.txt_down{
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #666666;
margin-top: 15rpx;
}
}
}
.chat_r {
.chat_r_txt {
width: 40rpx;
height: 40rpx;
border-radius:50%;
font-size: 22rpx;
text-align: center;
line-height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
background: #13AFA8;
color: #FFFFFF;
margin-right: 16rpx;
}
}
}
}
.viewBox {
background: #FFFFFF;
.box {
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 24rpx;
.box_l {
display: flex;
justify-content: space-between;
align-items: center;
.box_l_img {
width: 104rpx;
height: 104rpx;
}
.box_l_txt {
font-size: 36rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #111111;
margin-left: 36rpx;
}
}
.box_r {
display: flex;
justify-content: space-between;
align-items: center;
.box_r_txt {
width: 40rpx;
height: 40rpx;
border-radius:50%;
font-size: 22rpx;
text-align: center;
line-height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
background: #13AFA8;
color: #FFFFFF;
margin-right: 16rpx;
}
}
}
}
.m_display {
background: #F5F5F5;
opacity: 1;
padding: 14rpx 0;
height: 100vh;
}
</style>

BIN
static/images/app/serve/m_five.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/images/app/serve/m_four.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
static/images/app/serve/m_liuyan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
static/images/app/serve/m_one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
static/images/app/serve/m_three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/images/app/serve/m_two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/images/app/serve/m_xiaochu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 862 B