an_xiao/police_uniapp/pages/index/index.vue

384 lines
8.2 KiB
Vue
Raw Permalink Normal View History

2024-07-25 16:03:08 +08:00
<template>
<view class="message">
<!-- 有数据的 -->
<view class="login-container" @click="loginContainer">
<!-- 登录用户的信息 -->
<!-- <button class="buttonchoose" type="balanced" open-type="chooseAvatar" @chooseavatar="onchooseavatar" > -->
<view class="contact">
<!-- <image :src="avatarUrl" mode="scaleToFill" class="image" /> -->
<image src="@/static/login/avatar1.png" mode="scaleToFill" class="image" />
</view>
<!-- </button> -->
<view class="tips-text">
<view style="font-size: 15px;">{{ userInfo.name ? userInfo.name : '未登录' }}</view>
<view style="font-size: 12px;">
<text style="margin-right: 5px">
{{ userInfo.personType ? (userInfo.personType == 'policeman' ? '' : userInfo.personType == 'school.manager' ? '教育部门' :userInfo.personType == 'police.manager' ? '公安部门':userInfo.personType == 'guarder' ? '保安人员': '志愿者') : 'ID:' }}
</text>
<text>{{ userInfo.title ? userInfo.title : '未知' }}</text>---<text>{{ userInfo.station ? userInfo.station : '未选择学校' }}</text>
</view>
</view>
</view>
<!-- 用户信息 -->
<view class="userIdexn">
<view class="exit" @click="addExit(item.value)" v-for="(item, index) in datalist" :key="item.value">
<view class="exitItem">
<view class="exitItemindex">
<image :src="item.url" mode="scaleToFill" class="image" />
</view>
<text style="margin-left: 30rpx;font-size: 12px;">{{ item.name }}</text>
</view>
<view style="margin-right: 40rpx">
<text class="iconoscope"></text>
</view>
</view>
</view>
<view>
<u-modal @cancel="show = false" zoom @confirm="confirm" :show="show" :asyncClose="true"
:showCancelButton="true" width="500rpx" content='是否确认退出登录?'></u-modal>
</view>
<!-- <u-modal @confirm="confirmPrivacy" :show="showPrivacy" :title="title" width="300px">
<view>在使用芙蓉安校服务之前,请仔细阅读<text style="color: skyblue;"
@click="OpenPrivacyContract">{{ContractName}}</text>如果同意该指引,请点击同意开始使用本小程序
</view>
</u-modal> -->
</view>
</template>
<script>
import {
mapGetters,
mapMutations
} from 'vuex';
import quit from '../../static/login/quit.png';
import uploading from '../../static/login/uploading.png';
import opinions from '../../static/login/opinions.png';
import {
timestampFormatTime
} from '@/utils/index.js';
export default {
data() {
return {
avatarUrl: '',
datalist: [
// {
// value: 1,
// name: '小程序简介',
// url: uploading
// },
{
value: 0,
name: '退出登录',
url: quit
},
{
value: 2,
name: '修改用户信息',
url: uploading
},
{
value: 3,
name: '意见收集',
url: opinions
},
],
baseURl: 'https://www.lonsungsh.com:8083',
remark: '',
show: false,
showLogin: true,
showPrivacy: false,
title: '用户隐私保护提示',
ContractName: '',
};
},
computed: {
// 拿取vuex数据
...mapGetters({
userInfo: 'users/getLoginInfo',
})
},
onLoad() {},
created() {
this.showLogin = true
},
mounted() {},
onShow() {
if (this.userInfo.name) {
uni.authorize({
scope: "scope.userLocation",
success: (res) => {
wx.getPrivacySetting({
success: (res) => {
console.log(res);
if (res.needAuthorization) {
this.ContractName = res.privacyContractName
setTimeout(() => {
this.showPrivacy = true
}, 100)
}
// this.ContractName = res.privacyContractName
},
})
}
})
}
},
methods: {
...mapMutations({
clearuserInforma: 'users/clearuserInforma'
}),
// 获取用户的基本信息 授权之后
// 点击退出跳转到登录页
addExit(val) {
switch (val) {
case 0:
if (this.userInfo.name) {
this.show = true
} else {
uni.showToast({
title: '无权限'
});
}
break;
case 1:
uni.showToast({
title: '还在编写中'
});
break;
case 2:
if (this.userInfo.name) {
uni.navigateTo({
url: `/pagesD/edituserinfo/edituserinfo`
});
} else {
uni.showToast({
title: '无权限'
});
}
break;
case 3:
if (this.userInfo.name) {
console.log(1111);
uni.navigateTo({
url: `/pagesD/collection/collection`
});
} else {
uni.showToast({
title: '无权限'
});
}
break;
}
},
confirm() {
setTimeout(() => {
// 2秒后自动关闭
this.show = false;
uni.navigateTo({
url: '/pages/login/index'
});
this.clearuserInforma()
uni.removeStorage({
key: 'starLevel'
})
}, 1000)
},
loginContainer() {
if (!this.userInfo.name) {
uni.navigateTo({
url: `/pages/login/index`
});
}
},
close() {
this.showLogin = false;
},
OpenPrivacyContract() {
// 打开隐私协议页面
wx.openPrivacyContract({
success: (res) => {
console.log(res);
}, // 打开成功
fail: () => {}, // 打开失败
complete: () => {}
})
},
confirmPrivacy() {
console.log(123123);
},
onchooseavatar(e) {
var that = this;
const picUploadData = {
creator: that.userInfo.name,
business: 'school.revise',
type: 'image',
deviceid: that.userInfo.id,
createtime: timestampFormatTime(),
description: '',
comment: ''
};
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: that.baseURl + '/mdev/picture/upload',
filePath: e.detail.avatarUrl,
name: 'file',
header: {
'Content-Type': 'multipart/form-data;charset=utf-8'
},
formData: {
jsondata: JSON.stringify(picUploadData),
},
success: (res) => {
setTimeout(() => {
const resImage = JSON.parse(res.data)?.data.uri;
that.avatarUrl = that.baseURl + resImage
console.log(that.avatarUrl);
// if (!that.imageUrlsDate.includes(resImage.uri)) {
// that.imageUrlsDate.push(resImage.uri);
// }
resolve(that.avatarUrl)
}, 1000)
}
});
})
},
}
};
</script>
<style scoped lang="scss">
.message {
// padding: 20rpx;
height: 100vh;
background-color: #fff;
}
.login-container {
height: 280rpx;
display: flex;
align-items: center;
background-image: url('../../static/login/banner.png');
background-repeat: no-repeat;
background-position: right;
overflow: hidden;
padding: 45rpx;
box-sizing: border-box;
.buttonchoose {
margin: 0;
border: none;
background: transparent;
outline: none;
padding: 0;
}
.contact {
height: 75rpx;
width: 75rpx;
border-radius: 50%;
border: solid 1px gray;
.image {
width: 100%;
height: 100%;
}
}
.tips-text {
display: flex;
font-size: 28rpx;
color: #fff;
line-height: 50rpx;
margin-left: 20rpx;
flex-direction: column;
justify-content: space-evenly;
}
}
.userIdexn {
// background-color: #fff;
// height: 700rpx;
}
.exit {
height: 100rpx;
line-height: 40px;
border-bottom: solid 0.5px #ebebf7;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 30rpx;
color: #7d7d7d;
.exitItem {
display: flex;
align-items: center;
margin-left: 30rpx;
}
.exitItemindex {
height: 40rpx;
width: 40rpx;
border-radius: 50%;
// border: solid 1px gray;
display: block;
line-height: 48rpx;
image {
width: 100%;
height: 100%;
}
}
.iconoscope {
width: 8px;
height: 8px;
display: inline-block;
border: solid 2px #ccc;
/* margin-left: 10px; */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom: white;
border-left: white;
}
}
.clickLogin {
height: 200rpx;
text-align: center;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.clickLoginIndex {
width: 80%;
}
}
.showPrivacy {
width: 80%;
height: 200px;
border: 1px solid skyblue;
}
</style>