php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(common): 新增我的消息和系统消息页面 

- 添加我的消息页面组件，用于展示用户消息列表
- 实现系统消息页面组件，展示系统通知列表
- 在线索页面添加跳转到我的消息的功能
- 新增拨打电话功能
- 更新页面配置，添加新的消息相关页面
master
liutong 1 year ago
parent
8e12a62a4d
commit
28abaed5c1
5 changed files with 451 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      pages.json
  2. 209
      pages/common/my_message.vue
  3. 206
      pages/common/sys_msg_list.vue
  4. 20
      pages/market/clue/index.vue
  5. BIN
      static/images/common/yong_hu.png

18
pages.json
View File

@ -99,6 +99,24 @@
"navigationBarTextStyle": "black"
}
},
{
"path" : "pages/common/my_message",
"style": {
"navigationBarTitleText": "我的消息",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
},
{
"path" : "pages/common/sys_msg_list",
"style": {
"navigationBarTitleText": "系统消息",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
},
{
"path" : "pages/student/my/update_pass",
"style": {

209
pages/common/my_message.vue
View File

@ -0,0 +1,209 @@
<!--我的消息-列表-->
<template>
<view class="main_box">
<view class="main_section">
<view class="section_1">
<view class="item" @click="openViewSysMsgList()">
<view class="left">
<image class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>
<view>系统消息</view>
</view>
<view class="right">
<view>99</view>
<fui-icon name="arrowright" :size="60"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">
<image class="pic" src="@/static/images/common/yong_hu.png"></image>
<view>张老师</view>
</view>
<view class="right">
<view>99</view>
<fui-icon name="arrowright" :size="60"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">
<image class="pic" src="@/static/images/common/yong_hu.png"></image>
<view>李老师</view>
</view>
<view class="right">
<view>99</view>
<fui-icon name="arrowright" :size="60"></fui-icon>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import memberApi from '@/api/member.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"
export default {
components: {
AQTabber,
AQUplodeImgMulti,
},
data() {
return {
formData: {
images_arr: [],
images: '',
content: '',
mailbox: '',
},
}
},
onLoad() {
},
methods: {
//######AQ上传文件组件相关######
// 上传文件回调
AQUploadSuccess(res) {
console.log('接收AQ上传回调xxx1', res)
// 使用 split 方法分割字符串
let _inputValue = []
if (res.filePathArr.length) {
_inputValue = res.filePathArr
}
this.formData[res.inputName] = _inputValue
// console.log('接收AQ上传回调xxx1',res)
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
},
async submitForm() {
let data = {...this.formData}
data.images = data.images_arr.join(',')
if (!data.content) {
//反馈内容为必填项
uni.showToast({
title: '反馈内容为必填项',
icon: 'none'
})
return
}
let res = await memberApi.setFeedback(data)
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
} else {
uni.showToast({
title: '提交成功',
icon: 'none'
})
//延迟1s执行
setTimeout(() => {
this.$util.openHomeView();
}, 1000);
}
},
//跳转页面-系统消息列表
openViewSysMsgList(){
uni.navigateTo({
url: `/pages/common/sys_msg_list`
})
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #292929;
}
//自定义导航栏
.navbar_section {
display: flex;
justify-content: center;
align-items: center;
background: #29d3b4;
.title {
padding: 20rpx 0;
font-size: 30rpx;
color: #315d55;
}
}
.main_section {
min-height: 100vh;
background: #292929 100%;
padding: 0 0rpx;
padding-top: 32rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.section {
background-color: #434544;
padding: 40rpx 40rpx;
}
.section_1{
padding: 0 24rpx;
display: flex;
flex-direction: column;
gap: 38rpx;
.item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 18rpx 36rpx;
border-radius: 14rpx;
background-color: rgba(255,255,255,1);
border: 2rpx solid rgba(187,187,187,1);
.left{
display: flex;
align-items: center;
gap: 16rpx;
.pic{
width: 68rpx;
height: 68rpx;
}
view{
color: #D9001B;
font-size: 32rpx;
}
}
.right{
display: flex;
align-items: center;
view{
padding: 5rpx;
border: 1px solid #BBBBBB;
border-radius: 50%;
color: #D9001B;
}
}
}
}
}
.describe {
color: #999999;
padding-left: 30rpx;
}
</style>

206
pages/common/sys_msg_list.vue
View File

@ -0,0 +1,206 @@
<!--系统消息-列表-->
<template>
<view class="main_box">
<view class="main_section">
<view class="section_1">
<view class="item">
<view class="title">吾悦校区停电通知</view>
<image
class="img_box"
:src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
model="aspectFit"
></image>
<view class="content">
李老师将张包子的跟进人设置为您，需要您
继续跟进，点击此消息查看张包子的信息，完
成后续跟进
</view>
<view class="time">2024-03-07 10:30:00</view>
</view>
<view class="item">
<view class="title">吾悦校区停电通知</view>
<image
class="img_box"
:src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
model="aspectFit"
></image>
<view class="time">2024-03-07 10:30:00</view>
</view>
<view class="item">
<view class="title">吾悦校区停电通知</view>
<image
class="img_box"
:src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
model="aspectFit"
></image>
<view class="content">
李老师将张包子的跟进人设置为您，需要您
继续跟进，点击此消息查看张包子的信息，完
成后续跟进
</view>
<view class="time">2024-03-07 10:30:00</view>
</view>
</view>
</view>
</view>
</template>
<script>
import memberApi from '@/api/member.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"
export default {
components: {
AQTabber,
AQUplodeImgMulti,
},
data() {
return {
formData: {
images_arr: [],
images: '',
content: '',
mailbox: '',
},
}
},
onLoad() {
},
methods: {
//######AQ上传文件组件相关######
// 上传文件回调
AQUploadSuccess(res) {
console.log('接收AQ上传回调xxx1', res)
// 使用 split 方法分割字符串
let _inputValue = []
if (res.filePathArr.length) {
_inputValue = res.filePathArr
}
this.formData[res.inputName] = _inputValue
// console.log('接收AQ上传回调xxx1',res)
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
},
async submitForm() {
let data = {...this.formData}
data.images = data.images_arr.join(',')
if (!data.content) {
//反馈内容为必填项
uni.showToast({
title: '反馈内容为必填项',
icon: 'none'
})
return
}
let res = await memberApi.setFeedback(data)
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
} else {
uni.showToast({
title: '提交成功',
icon: 'none'
})
//延迟1s执行
setTimeout(() => {
this.$util.openHomeView();
}, 1000);
}
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #292929;
}
//自定义导航栏
.navbar_section {
display: flex;
justify-content: center;
align-items: center;
background: #29d3b4;
.title {
padding: 20rpx 0;
font-size: 30rpx;
color: #315d55;
}
}
.main_section {
min-height: 100vh;
background: #292929 100%;
padding: 0 0rpx;
padding-top: 32rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.section {
background-color: #434544;
padding: 40rpx 40rpx;
}
.section_1{
padding: 0 24rpx;
display: flex;
flex-direction: column;
gap: 38rpx;
.item{
display: flex;
flex-direction: column;
padding: 32rpx 24rpx;
border-radius: 14rpx;
background-color: rgba(255,255,255,1);
border: 2rpx solid rgba(187,187,187,1);
color: #4F4F4F;
font-size: 32rpx;
.title{
}
.img_box{
margin-top: 30rpx;
width: 100%;
}
.content{
margin-top: 30rpx;
}
.time{
display: flex;
justify-content: flex-end;
margin-top: 36rpx;
}
}
}
}
.describe {
color: #999999;
padding-left: 30rpx;
}
</style>

20
pages/market/clue/index.vue
View File

@ -61,10 +61,10 @@
</view>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
<image src="@/static/images/index/message.png" class="image" @click="openViewMyMessage(v)"></image>
</view>
<view style="width: 15%;">
<image v-if="v.student_phone" src="@/static/images/index/phone.png" class="image"></image>
<image v-if="v.student_phone" src="@/static/images/index/phone.png" class="image" @click="dialTel(v)"></image>
</view>
</view>
</scroll-view>
@ -308,6 +308,22 @@ export default {
await this.getList()
},
//跳转页面-我的消息
openViewMyMessage(item) {
let user_id = item.user_id
uni.navigateTo({
url: `/pages/common/my_message?user_id=${user_id}`
})
},
//拨打电话
dialTel(item) {
let tel = item.phone
uni.makePhoneCall({
phoneNumber: tel
})
},
clue_info() {
uni.navigateTo({
url: '/pages/market/clue/clue_info'

BIN
static/images/common/yong_hu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 B

Write Preview
Loading…
Cancel
Save