chore(代码复制):调整页面、对接登录、我的、修改密码页面

This commit is contained in:
fhysy 2025-02-11 09:22:05 +08:00
parent 1de84a9f3c
commit 45d08abd36
12 changed files with 721 additions and 163 deletions

View File

@ -49,7 +49,7 @@
@import url("static/fonts/iconfont.css");
page>view {
background: linear-gradient(to bottom,#CEDCFF,#F0F0F0 554rpx);
/* background: linear-gradient(to bottom,#CEDCFF,#F0F0F0 554rpx); */
min-height: 100%;
}

View File

@ -11,8 +11,13 @@ export default{
// imgUrl: 'https://digital-core.dieruen-iot.com',
// wsUrl: 'wss://digital-core.dieruen-iot.com',
// 谷云正式
baseUrl: 'https://digital-core.drgyen.com',
imgUrl: 'https://digital-core.drgyen.com',
// baseUrl: 'https://digital-core.drgyen.com',
// imgUrl: 'https://digital-core.drgyen.com',
// wsUrl: 'wss://digital-core.drgyen.com',
// 商城本地测试环境
baseUrl: 'http://192.168.1.17:8080',
imgUrl: 'http://192.168.1.17:8080',
wsUrl: 'wss://digital-core.drgyen.com',
// 长城
// baseUrl: 'https://zhny.snc.cn/prod-api/',
@ -41,4 +46,6 @@ export default{
// mqttUrl:'ws://192.168.18.139:8083/mqtt',
// mqttUrl:'wx://iot.gkiiot.com:8083/mqtt',
// #endif
// 客户端id
clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
}

View File

@ -20,7 +20,8 @@ request.interceptors.request.use((request) => {
request.baseURL = config.baseUrl;
const userToken = uni.getStorageSync('userToken');
if(userToken){
request.headers["Authorization"] = userToken;
request.headers["Authorization"] = 'Bearer ' + userToken;
request.headers["Clientid"] = config.clientId;
}
// 防止缓存
if (request.method === 'POST' && request.headers['Content-Type'] !== 'multipart/form-data') {

View File

@ -3,7 +3,13 @@
//
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
"pages": [{
"path": "pages/auth/passwordLogin",
"style": {
"navigationBarTitleText": "密码登录",
"navigationBarBackgroundColor": "#1890ff"
}
},
{
"path": "pages/auth/login",
"style": {
@ -12,36 +18,13 @@
}
},
{
"path": "pages/auth/defalut",
"path": "pages/tabBar/new",
"style": {
"navigationBarTitleText": "项目"
"navigationBarTitleText": "消息",
"enablePullDownRefresh": true
// "navigationStyle": "custom"
}
},
{
"path": "pages/auth/passwordLogin",
"style": {
"navigationBarTitleText": "密码登录",
"navigationBarBackgroundColor": "#1890ff"
}
},
{
"path": "pages/auth/companyRegister",
"style": {
"navigationBarTitleText": "企业注册"
}
},
// {
// "path": "pages/index/enter",
// "style": {
// "navigationBarTitleText": "综合能源管理"
// }
// },
// {
// "path": "pages/index/guidePage",
// "style": {
// "navigationBarTitleText": "综合能源管理"
// }
// },
{
"path": "pages/tabBar/order",
"style": {
@ -73,21 +56,8 @@
"navigationBarTitleText": "我的"
// "navigationStyle": "custom",
}
}, {
"path": "pages/tabBar/scan",
"style": {
"navigationBarTitleText": "添加设备"
// "navigationStyle": "custom",
}
}
// , {
// "path": "pages/oneselfUser/index",
// "style": {
// "navigationBarTitleText": "个人用户",
// "enablePullDownRefresh": true
// // "navigationStyle": "custom"
// }
// }
],
"subPackages": [
// {
@ -154,11 +124,6 @@
"navigationBarTitleText": "设置"
// "navigationStyle": "custom"
}
}, {
"path": "passwordModify",
"style": {
"navigationBarTitleText": "修改密码"
}
}, {
"path": "maintenanceRecord",
"style": {
@ -606,7 +571,7 @@
}
}]
},
{
{
"root": "pages/user/",
"pages": [{
"path": "renew",
@ -640,6 +605,11 @@
"navigationBarTitleText": "帮助中心",
"navigationBarBackgroundColor": "#fff"
}
}, {
"path": "passwordModify",
"style": {
"navigationBarTitleText": "修改密码"
}
}]
}
],
@ -648,44 +618,32 @@
"selectedColor": "#0066cc",
"backgroundColor": "#FFFFFF",
"list": [{
"pagePath": "pages/tabBar/home",
"text": "首页",
"iconPath": "static/images/toolbar/home.png",
"selectedIconPath": "static/images/toolbar/home-active.png"
}, {
"pagePath": "pages/tabBar/project",
"text": "项目",
"iconPath": "static/images/toolbar/project.png",
"selectedIconPath": "static/images/toolbar/project-active.png"
}, {
"pagePath": "pages/tabBar/scan",
"text": "扫一扫",
"iconPath": "static/images/toolbar/scan.png",
"selectedIconPath": "static/images/toolbar/scan-active.png"
}, {
"pagePath": "pages/tabBar/alarm",
"text": "报警",
"iconPath": "static/images/toolbar/alarm.png",
"selectedIconPath": "static/images/toolbar/alarm-active.png"
}, {
"pagePath": "pages/tabBar/my",
"text": "我的",
"iconPath": "static/images/toolbar/my.png",
"selectedIconPath": "static/images/toolbar/my-active.png"
}
]
"pagePath": "pages/tabBar/new",
"text": "消息",
"iconPath": "static/images/toolbar/new.png",
"selectedIconPath": "static/images/toolbar/new-active.png"
}, {
"pagePath": "pages/tabBar/order",
"text": "订单",
"iconPath": "static/images/toolbar/order.png",
"selectedIconPath": "static/images/toolbar/order-active.png"
}, {
"pagePath": "pages/tabBar/my",
"text": "我的",
"iconPath": "static/images/toolbar/my.png",
"selectedIconPath": "static/images/toolbar/my-active.png"
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#CEDCFF",
"navigationBarBackgroundColor": "#f5f5f5",
// "navigationBarBackgroundColor": "#11BF96",
"backgroundColor": "#F0F0F0"
},
"condition": { //
"current": 0, //(list )
"list": [
{
"list": [{
"path": "pages/auth/passwordLogin",
"name": "默认页面" //
},
@ -699,44 +657,44 @@
},
{
"path": "pages/auth/passwordLogin",
"name": "密码登录" ,//
"name": "密码登录", //
"query": "mode=1&user=17859911022&pwd=888888"
},
{
"path": "pages/home/wisdomElectricity/realTime/parameterSetup",
"name": "设备参数调整" ,//
"name": "设备参数调整", //
"query": "deviceId=ed41e7462f5041aa98780ce3062765d0&deviceKey=1267240812100022"
},
{
"path": "pages/project/space/index",
"name": "标签管理" ,//
"name": "标签管理", //
// "query": "projectId=62&projectRole=root&typeName=设备组"
"query": "projectId=62&projectRole=root&typeName=空间"
},
{
"path": "pages/project/space/deviceList",
"name": "空间设备管理" ,//
"name": "空间设备管理", //
"query": "labelCode=16&projectId=63&projectRole=root&tagType=57135cfcdfa74d39b05aa04237893121&isDefault=Y"
},
{
"path": "pages/project/deviceGroup/index",
"name": "设备分组" ,//
"name": "设备分组", //
"query": "projectId=62"
},
{
"path": "pages/project/space/addDeviceList",
"name": "空间设备添加" ,//
"name": "空间设备添加", //
"query": "labelCode=16"
},
{
"path": "pages/home/wisdomElectricity/realTime/alarmConfig",
"name": "告警配置" ,//
"name": "告警配置", //
"query": "deviceKey=1267240812100027"
},
{
"path": "pages/tabBar/scan",
"name": "扫码" //
},{
}, {
"path": "pages/tabBar/home",
"name": "首页" //
},
@ -746,7 +704,7 @@
},
{
"path": "pages/project/index",
"name": "项目详情" ,//
"name": "项目详情", //
"query": "projectId=62&projectCode=bd80a3c80c394dae8a2d8138713f2bcf"
},
{
@ -759,12 +717,12 @@
},
{
"path": "pages/project/equipmentStatus/status",
"name": "设备列表" ,//
"name": "设备列表", //
"query": "projectId=62&adminFlag=true&projectRole=root"
},
{
"path": "pages/project/projectUser",
"name": "用户列表" ,//
"name": "用户列表", //
"query": "projectId=56"
},
{
@ -810,4 +768,4 @@
}
]
}
}
}

View File

@ -151,6 +151,13 @@ padding-top: 500rpx;
<view class="login-form-ctn">
<view class="login-form">
<u-form :model="form" :rules="rules" ref="uForm">
<u-form-item label=" " label-width="60" prop="tenantId" left-icon="account"
:left-icon-style="{ color: '#ccc', fontSize: '30rpx' }">
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;" @click="tenantShow=true">
<text>{{activeTenantObj.companyName}}</text>
<u-icon name="arrow-down"></u-icon>
</view>
</u-form-item>
<u-form-item label=" " label-width="60" prop="username" left-icon="account"
:left-icon-style="{ color: '#ccc', fontSize: '30rpx' }">
<u-input v-model="form.username" placeholder="请输入手机号/账号" />
@ -176,14 +183,14 @@ padding-top: 500rpx;
<view class="protocol-box">
<u-checkbox v-model="protocolStatus">阅读并同意以下协议<text @click.stop="goPolicy">用户协议</text></u-checkbox>
</view>
<view class="other-login-box">
<!-- <view class="other-login-box">
<view class="other-login-item" @click="goWxLogin">
<view class="other-login-bg">
<u-icon name="weixin-fill" color="#fff" size="56"></u-icon>
</view>
<text class="other-login-name">微信登录</text>
</view>
</view>
</view> -->
</view>
</view>
@ -191,6 +198,7 @@ padding-top: 500rpx;
<view>Copyright 2022-2024 {{appConfig.companyName}} Powered By DSservice</view>
<view>{{appConfig.contractRecordNumber || ''}}</view>
</view>
<u-select v-model="tenantShow" :list="tenantList" label-name="companyName" value-name="tenantId" @confirm="changeTenant"></u-select>
<u-toast ref="uToast" />
</view>
</template>
@ -213,9 +221,12 @@ padding-top: 500rpx;
captchaData: null,
current: 0,
form: {
clientId: "",
grantType: "password",
rememberMe: false,
tenantId: "",
username: "",
password: "",
code: ""
password: ""
},
mode:null,
rules: {
@ -224,7 +235,7 @@ padding-top: 500rpx;
required: true,
message: '请输入手机号/账号',
trigger: ['change', 'blur'],
}, ],
}],
password: [{
required: true,
message: '请输入密码',
@ -235,6 +246,15 @@ padding-top: 500rpx;
message: '请输入验证码',
trigger: ['change', 'blur'],
}]
},
tenantShow:false,
tenantList:[],
activeTenantObj:{
tenantId: "",
companyName: "",
domain: "",
logo: null,
registerEnable: false
}
}
},
@ -254,6 +274,7 @@ padding-top: 500rpx;
if(e.mode){
this.mode = e.mode;
}
this.getTenantList();
if(e.mode == '1'){ //mode:1
this.form.username = e.user || '';
this.form.password = e.pwd || '';
@ -263,7 +284,7 @@ padding-top: 500rpx;
console.log("userToken", userToken)
if (userToken) {
uni.switchTab({
url: "../tabBar/project"
url: "../tabBar/order"
})
} else {
// this.getCodeImageFn();
@ -297,6 +318,39 @@ padding-top: 500rpx;
this.$refs.uForm.setRules(this.rules);
},
methods: {
getTenantList(){
uni.request({
url: config.baseUrl + "/auth/tenant/list",
method: "GET",
data: {},
header: {
Clientid: config.clientId
},
success: (res) => {
console.log("res11",res);
if(res.data.code == 200){
this.tenantList = res.data.data.voList || [];
if(res.data.data.voList!=[]){
this.activeTenantObj = res.data.data.voList[0];
this.form.tenantId = res.data.data.voList[0].tenantId;
}
}
}
});
},
changeTenant(e){
console.log("e",e)
this.tenantList.forEach((item) => {
if (item.tenantId == e[0].value) {
this.activeTenantObj = item;
this.form.tenantId = item.tenantId;
this.appConfig.logo = item.logo;
this.appConfig.name = item.companyName;
}
});
},
GetWxMiniProgramUrlParam(url) {
let theRequest = {};
if (url.indexOf("#") != -1) {
@ -347,7 +401,7 @@ padding-top: 500rpx;
password: this.form.password,
},
header: {
UserType: this.usetTypeValue == "普通用户" ? "PERSONAL" : "TENANT"
UserType: this.usetTypeValue == "普通用户" ? "PERSONAL" : "TENANT",
},
success: (res) => {
console.log(res);
@ -378,7 +432,7 @@ padding-top: 500rpx;
})
} else {
uni.switchTab({
url: "../tabBar/project"
url: "../tabBar/order"
})
}
}, 1000)
@ -400,25 +454,23 @@ padding-top: 500rpx;
this.$refs.uForm.validate(valid => {
if (valid) {
uni.request({
url: config.baseUrl + "/login",
url: config.baseUrl + "/auth/login",
method: "POST",
data: {
username: this.form.username,
password: this.form.password,
// code: this.form.code,
// uuid: this.captchaData.uuid,
...this.form,
clientId: config.clientId,
},
header: {
UserType: this.usetTypeValue == "普通用户" ? "PERSONAL" : "TENANT"
Clientid: config.clientId
},
success: (res) => {
console.log(res);
if (res.data.token) {
if (res.data.code == 200 && res.data.data.access_token) {
this.$refs.uToast.show({
title: '登录成功',
type: 'success',
})
this.$store.dispatch('setLogin', res.data.token);
this.$store.dispatch('setLogin', res.data.data.access_token);
uni.setStorage({
key: 'userType',
data: this.usetTypeValue,
@ -440,7 +492,7 @@ padding-top: 500rpx;
})
} else {
uni.switchTab({
url: "../tabBar/project"
url: "../tabBar/order"
})
}
}, 1000)

169
pages/my/passwordModify.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<view class="register-ctn">
<view class="login-bg">
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
</view>
<view class="login-header">
<view class="">
<!-- #ifdef APP-PLUS -->
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
<!-- #endif -->
</view>
<!-- <view class="login-header-text">综合能源管理</view> -->
</view>
<view class="register-form">
<view class="login-form-title">修改密码</view>
<u-form :model="form" :rules="rules" ref="uForm">
<u-form-item label="旧密码" label-width="170" prop="oldPassword" left-icon="lock">
<u-input v-model="form.oldPassword" type="password" placeholder="请输入旧密码"/>
</u-form-item>
<u-form-item label="新密码" label-width="170" prop="password" left-icon="lock">
<u-input v-model="form.password" type="password" placeholder="请输入新密码"/>
</u-form-item>
<u-form-item label="确认密码" label-width="170" prop="rePassword" left-icon="lock">
<u-input v-model="form.rePassword" type="password" placeholder="请确认密码"/>
</u-form-item>
</u-form>
<view class="mt30">
<u-button @click="confirmEditFn" type="primary" shape="circle">确认修改</u-button>
</view>
<u-modal ref="uModal" v-model="isSuccess" content="密码修改成功" confirm-text="好的" @confirm="confirmGoPage" :async-close="true"></u-modal>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form:{
oldPassword: '',
password: '',
rePassword: ''
},
rules: {
oldPassword:[{
required:true,
message: '请输入旧密码',
trigger: 'blur',
}],
password:[{
required:true,
message: '请输入新密码',
trigger: 'blur',
},{
min:6,
max:18,
message: '请输入6-18位新密码',
trigger: 'blur',
}],
rePassword:[{
required:true,
message: '请再次输入新密码',
trigger: 'blur',
},{
validator: (rule, value, callback) => {
return value === this.form.password;
},
message: '两次输入的密码不相等',
trigger: ['change','blur']
}]
},
isSuccess: false
}
},
computed:{
appConfig() {
return this.$store.state.app.appConfig
},
},
onReady(){
this.$refs.uForm.setRules(this.rules);
},
methods: {
//
confirmEditFn(){
this.$refs.uForm.validate(valid => {
console.log(valid,"valid")
if (valid) {
this.$put(`/system/user/profile/updatePwd`,{
newPassword:this.form.password,
oldPassword:this.form.oldPassword,
})
.then((res)=>{
if(res.code==200){
this.isSuccess = true;
}else{
this.$tui.toast(res.msg, 3000);
}
})
} else {
console.log('验证失败');
}
});
},
confirmGoPage() {
this.isSuccess = true;
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style lang="scss" scoped>
.register-ctn{
width: 100%;
height: 100%;
padding: 0 60rpx;
:not(not) {
box-sizing: border-box;
}
}
.register-form{
background-color: #fff;
border-radius: $uni-border-radius-lg;
padding: 40rpx;
box-shadow: $box-shadow;
margin-top: 30rpx;
margin-bottom: 40rpx;
}
.login-bg{
width: 100%;
height: 500rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
image{
width: 100%;
height: 100%;
}
}
.login-header{
text-align: center;
&-img{
width: 160rpx;
height: 160rpx;
margin-top: 40rpx;
}
&-text{
font-size: 46rpx;
font-family: Source Han Sans CN;
font-weight: 800;
color: #FFFFFF;
margin-top: 20rpx;
}
}
.login-form-title{
text-align: center;
font-size: 40rpx;
font-family: Source Han Sans CN;
font-weight: 800;
color: #262626;
}
</style>

View File

@ -1,64 +1,43 @@
<template>
<view class="my-box">
<!-- 个人信息 -->
<view class="header-box">
<!-- 顶部用户信息区域 -->
<view class="user-info">
<view class="avatar-box">
<template v-if="userInfo.avatar">
<u-image width="122rpx" height="122rpx" :src="getUrl(userInfo.avatar)" shape="circle"></u-image>
</template>
<template v-else>
<u-image width="122rpx" height="122rpx" src="http://static.drgyen.com/app/hc-app-power/images/my/avatar.png" shape="circle"></u-image>
</template>
<u-image v-if="userInfo.avatar" width="122rpx" height="122rpx" :src="userInfo.avatar" shape="circle"></u-image>
<u-image v-else width="122rpx" height="122rpx" src="http://static.drgyen.com/app/hc-app-power/images/my/avatar.png" shape="circle"></u-image>
</view>
<view class="userinfo-box">
<view class="header-userinfo-name">{{userInfo && userInfo.nickName || userInfo.userName}}</view>
<view class="header-userinfo-company">{{tenantInfo && tenantInfo.tenantName || "-"}}</view>
<view class="info-content">
<view class="nickname">{{ userInfo.nickName }}</view>
<view class="user-id">手机号{{ userInfo.phonenumber }}</view>
</view>
</view>
<!-- 菜单 -->
<view class="menu-box">
<view class="home-menu-item menu-item" v-for="(item,index) in menuList" :key="index"
@click="goRouterFn(item.url)">
<view class="home-menu-item-header">
<view class="home-menu-item-left">
<view class="home-menu-item-name">
{{item.name}}
</view>
<view class="home-menu-item-remark">
{{item.remark}}
</view>
</view>
<view class="home-menu-item-right">
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
</view>
<!-- 功能列表区域 -->
<view class="function-list">
<view class="list-item" @click="goRouterFn('/pages/my/passwordModify')">
<view class="item-left">
<u-icon name="lock" color="#666666" size="32"></u-icon>
<text class="item-title">修改密码</text>
</view>
<view class="item-right">
<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
</view>
<view class="home-menu-item-bg" :class="['diconfont',item.icon]" :style="{backgroundImage:item.background}"></view>
<view class="home-menu-item-bg-two" :class="['diconfont',item.icon]" :style="{color:item.twoColor}"></view>
</view>
<view class="home-menu-item menu-item">
<view class="home-menu-item-header">
<view class="home-menu-item-left">
<view class="home-menu-item-name">
版本号
</view>
<view class="home-menu-item-remark">
当前软件版本
</view>
</view>
<!-- <view class="home-menu-item-right">
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
</view> -->
</view>
<view class="home-menu-item-value">
{{version?'V' + version:''}}
</view>
<view class="home-menu-item-bg" :class="['diconfont','dicon-icon_banbenhao']" :style="{backgroundImage:'linear-gradient(0deg, #95684B, #F9BA98)'}"></view>
<view class="home-menu-item-bg-two" :class="['diconfont','dicon-icon_banbenhao']" :style="{color:'rgba(160,94,29,0.1)'}"></view>
<view class="list-item">
<view class="item-left">
<u-icon name="integral" color="#666666" size="32"></u-icon>
<text class="item-title">版本号</text>
</view>
<view class="item-right">
<text class="item-value">v1.0.0</text>
</view>
</view>
</view>
<!-- 退出 -->
<view class="btn-box">
<u-button shape="square" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',borderRadius:'20rpx' }" @click="outLoginFn" type="primary" >退出登录</u-button>
<u-button shape="circle" @click="outLoginFn" type="primary" >退出登录</u-button>
</view>
</view>
</template>
@ -152,12 +131,12 @@
// let userToken = uni.getStorageSync("userToken");
let userType = uni.getStorageSync("userType");
// let getUserInfoUrl = userType === ""?"/system/personal/profile":"/system/user/profile";
let getUserInfoUrl = "/system/user/profile";
let getUserInfoUrl = "/system/user/getInfo";
this.$get(getUserInfoUrl).then((res) => {
console.log(res, "res");
if (!res.data) return;
this.userInfo = res.data;
this.userInfo = res.data.user;
this.tenantInfo = res.data.tenant;
uni.setStorageSync("tenantInfo", res.data.tenant)
uni.setStorageSync("userInfo", this.userInfo)
@ -181,20 +160,91 @@
// uni.clearStorageSync();
uni.removeStorageSync('userToken');
uni.reLaunch({
url:"../auth/login"
url:"../auth/passwordLogin"
})
},
}
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
background-color: #F5F5F5;
}
.my-box {
width: 100%;
padding: 10rpx 45rpx 0;
// padding: 10rpx 45rpx 0;
font-family: Source Han Sans CN;
:not(not) {
box-sizing: border-box;
}
.user-info {
padding: 40rpx 32rpx;
background-color: #FFFFFF;
display: flex;
align-items: center;
}
.avatar-box {
margin-right: 24rpx;
}
.info-content {
flex: 1;
}
.nickname {
font-size: 16px;
color: #333333;
font-weight: 500;
margin-bottom: 8rpx;
}
.user-id {
font-size: 14px;
color: #999999;
}
.function-list {
margin-top: 20rpx;
background-color: #FFFFFF;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-bottom: 1px solid #EEEEEE;
}
.list-item:last-child {
border-bottom: none;
}
.item-left {
display: flex;
align-items: center;
}
.item-title {
font-size: 14px;
color: #333333;
margin-left: 16rpx;
}
.item-right {
display: flex;
align-items: center;
}
.item-value {
font-size: 14px;
color: #999999;
margin-right: 8rpx;
}
.header-box {
width: 660rpx;
@ -301,6 +351,8 @@
}
.btn-box{
margin-top: 100rpx;
padding: 0 20rpx;
}
}

319
pages/tabBar/new.vue Normal file
View File

@ -0,0 +1,319 @@
<template>
<view class="new-box">
<mescroll-body class="new-mescroll u-skeleton" ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
<view class="new-list" v-if="newsList && newsList.length > 0">
<view class="new-list-item " v-for="(item,index) in newsList" :key="index" @tap="goDetail(index)">
<view class="item-icon-box u-skeleton-circle" :class="item.readType=='yes'?'':'unread'">
<view v-if="item.type=='urgent'" class="item-icon bg-error">
<u-icon name="bell" color="#fff" size="54"></u-icon>
</view>
<view v-else-if="item.type=='warning'" class="item-icon bg-warning">
<u-icon name="error" color="#fff" size="54"></u-icon>
</view>
<view v-else class="item-icon bg-info">
<u-icon name="chat" color="#fff" size="54"></u-icon>
</view>
</view>
<view class="item-content">
<view class="item-content-top">
<text class="item-title u-line-1 u-skeleton-fillet">{{item.title}}</text>
<text class="item-time u-skeleton-fillet">{{item.createdAt}}</text>
</view>
<view class="item-content-txt u-line-1 u-skeleton-fillet">{{item.message}}</view>
</view>
</view>
</view>
</mescroll-body>
<!--引用组件-->
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
</view>
</template>
<script>
let list = [
{
id:0,
type:'warning',
title:'机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警机柜告警',
message:'电池长时间没充电',
params:'id=xxxx',
createdAt:'2020-10-26 10:50:49',
status:false
},
{
id:1,
type:'warning',
title:'电池告警',
message:'短路保护',
params:'id=xxxx',
createdAt:'2020-10-26 10:40:49',
status:false
},
{
id:2,
type:'approval',
title:'租金审批',
message:'XXX有一笔租金需要审批',
params:'id=xxxx',
createdAt:'2020-10-26 10:30:49',
status:false
},
{
id:3,
type:'approval',
title:'改装维修审批',
message:'XXX有一笔改装维修需要审批',
params:'id=xxxx',
createdAt:'2020-10-26 10:20:49',
status:true
},
{
id:4,
type:'new',
title:'通知消息',
message:'XXX下午开会XXX下午开会XXX下午开会XXX下午开会XXX下午开会',
params:'id=xxxx',
createdAt:'2020-10-26 10:20:49',
status:true
}
]
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
newsList:list,
unreadNewIdList:[],
loading: true, //
upOption:{
page:{
num : 0 ,
size : 12 ,
time : null
},
noMoreSize: 4,
empty:{
icon:'https://fast.gk-hd.com/resource/app-sec/new.png',
use : true ,
tip: '~ 消息列表为空 ~',
fixed: true,
top: "200rpx",
},
bgColor:"#f5f5f5"
},
isToken:false,
tabList:[{
name: '我的信息',
count: 0
}, {
name: '系统公告',
count: 0
}],
tabIndex: 0
}
},
mixins:[MescrollMixin],
onShow() {
console.log("消息页show")
this.isToken = uni.getStorageSync('token');
this.mescroll.resetUpScroll(false);
if(this.isToken){
this.getUnreadNewNum();
}
// this.getUnreadNewNum();
},
methods:{
tabChange(index) {
this.tabIndex = index;
this.mescroll.resetUpScroll(false);
},
/*上拉加载的回调*/
upCallback(page) {
console.log("查询数据",page)
let pageNum = page.num; // , 1
let pageSize = page.size; // , 10
let obj = {
page:pageNum,
limit:pageSize,
msgType:this.tabIndex==0?'private':'public'
}
if (this.isToken) {
this.$api.getNewList(obj).then((res)=>{
console.log("当前获取到消息",res)
if (res.data.rows && res.data.rows.length>0) {
// ()
let curPageData = res.data.rows;
// (26,8,curPageLen=8)
let curPageLen = curPageData && curPageData.length;
//
console.log(curPageLen,res.data.total);
if(pageNum == 1){
this.newsList = []; //
// this.getUnreadNewIdList(); //
this.getUnreadNewNum();
}
this.newsList = this.newsList.concat(curPageData); //
this.mescroll.endBySize(curPageLen, res.data.total); //
this.loading = false;
console.log("newsList",this.newsList)
} else{
this.newsList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
// this.mescroll.endUpScroll(true)
}
}).catch(()=>{
this.$u.toast('服务器开小差了呢,请您稍后再试')
this.newsList = [];
//,
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
})
}else{
this.newsList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
}
},
//
goDetail(index){
console.log("当前点击消息",this.newsList[index])
let obj = JSON.stringify(this.newsList[index]);
uni.navigateTo({
url: '../new/detail?obj=' + encodeURIComponent(obj)
})
},
getUnreadNewNum(){
this.$api.getUnreadNewNum({}).then((res)=>{
console.log("当前获取未读消息数量",res)
if(res.code == 1){
if(res.data.count){
uni.showTabBarRedDot({
index: 2
})
}else{
uni.hideTabBarRedDot({
index: 2
})
}
this.tabList[0].count = res.data.privateCount;
this.tabList[1].count = res.data.publicCount;
}else{
uni.showToast({
title: res.msg,
icon:"none",
duration: 2000
});
}
}).catch(()=>{
this.$u.toast('服务器开小差了呢,请您稍后再试')
})
},
// getUnreadNewIdList(){
// this.$api.getUnreadNewIdList({}).then((res)=>{
// console.log("id",res)
// if (res.data.ids && res.data.ids.length>0) {
// this.unreadNewIdList = res.data.ids;
// } else{
// this.unreadNewIdList = [];
// }
// }).catch(()=>{
// })
// }
}
}
</script>
<style lang="scss" scoped>
.bg-error{
background-color: $u-type-error;
}
.bg-warning{
background-color: $u-type-warning;
}
.bg-info{
background-color: $u-type-info;
}
.tabs-box{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.new-box{
height: 100%;
.new-list{
.new-list-item{
display: flex;
align-items: center;
padding: 15rpx 30rpx;
border-bottom: 1px solid #f2f2f2;
.item-icon-box{
position: relative;
margin-right: 20rpx;
&.unread::after{
content: '';
position: absolute;
top: 0rpx;
right: 0rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
border: 1px solid #fff;
background-color: red;
}
.item-icon{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
-webkit-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
-moz-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
.iconfont-gx{
color: #fff;
font-size: 54rpx;
}
}
}
.item-content{
flex: 1;
width: 0;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.item-content-top{
display: flex;
justify-content: space-between;
align-items: center;
.item-title{
font-weight: bold;
font-size: 30rpx;
width: 320rpx;
}
.item-time{
color: $u-tips-color;
font-size: 24rpx;
}
}
.item-content-txt{
width: 100%;
color: $u-tips-color;
font-size: 24rpx;
}
}
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 992 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1009 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB