358 lines
8.3 KiB
Vue
358 lines
8.3 KiB
Vue
<template>
|
||
<view class="contai_warp">
|
||
<view class="top_area_warp">
|
||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="top_nav_warp">我的</view>
|
||
<view class="mine_area_warp">
|
||
<view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')">
|
||
<view class="mine_area_left" >
|
||
<image class="mine_avater" :src="'https://online.totustec.com/upload' + userInfo.avatar"></image>
|
||
<!-- <view class="mine_avater"></view> -->
|
||
<view class="mine_info_warp">
|
||
<view class="mine_info_txt1" v-if="userInfo.nikeName">{{
|
||
userInfo.nikeName
|
||
}}</view>
|
||
<view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view>
|
||
<view class="mine_info_txt2" >账户设置</view>
|
||
</view>
|
||
</view>
|
||
<image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="top_area_backimg">
|
||
<image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="function_area1_warp">
|
||
<view style="padding: 0 20rpx">
|
||
<view class="function_area1_content">
|
||
<view class="area1_content_title">常用工具</view>
|
||
<view class="area1_content_warp">
|
||
<view v-for="(item, index) in area1ContentList" :key="index" class="area1_content_item"
|
||
:style="index === 1 ? 'margin: 0 73rpx;' : ''" @click="toPage(item.text)">
|
||
<image class="area1_content_icon" :src="item.icon" mode="widthFix"></image>
|
||
<view class="area1_content_txt">{{ item.text }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="function_area2_warp">
|
||
<view class="function_area2_content">
|
||
<!-- <view class="function_area2_item" style="border-top-left-radius: 20rpx; border-top-right-radius: 20rpx">
|
||
<view class="area2_item_left">
|
||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon1.png">
|
||
</image>
|
||
<view class="area2_item_txt">使用向导</view>
|
||
</view>
|
||
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||
</view> -->
|
||
|
||
<!-- <view class="function_area2_item" style="
|
||
border-bottom-left-radius: 20rpx;
|
||
border-bottom-right-radius: 20rpx;
|
||
">
|
||
<view class="area2_item_left">
|
||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
|
||
</image>
|
||
<view class="area2_item_txt">分享小程序</view>
|
||
</view>
|
||
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <video style="width: 100%;height: 200rpx;" src="http://broadcasting.totustec.com/live/12345678.m3u8"></video> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
title: "Hello",
|
||
statusBarHeight: 0,
|
||
area1ContentList: [
|
||
{
|
||
icon: "https://online.totustec.com/upload/minePage/area1_content_icon1.png",
|
||
text: "设备管理",
|
||
},
|
||
{
|
||
icon: "https://online.totustec.com/upload/minePage/area1_content_icon2.png",
|
||
text: "预警管理",
|
||
},
|
||
// {
|
||
// icon: "https://online.totustec.com/upload/minePage/area1_content_icon3.png",
|
||
// text: "我的收藏",
|
||
// },
|
||
],
|
||
userInfo: {
|
||
},
|
||
};
|
||
},
|
||
onLoad () {
|
||
const systemInfo = wx.getSystemInfoSync();
|
||
const {
|
||
statusBarHeight, // 状态栏高度（单位：px）
|
||
} = systemInfo;
|
||
|
||
this.statusBarHeight = statusBarHeight;
|
||
|
||
// 页面加载时获取缓存用户信息
|
||
this.getUserInfoFromCache();
|
||
|
||
},
|
||
methods: {
|
||
getUserInfoFromCache () {
|
||
const userInfo = uni.getStorageSync("userInfo");
|
||
console.log('userInfo',userInfo);
|
||
|
||
if (userInfo) {
|
||
this.userInfo = userInfo;
|
||
}
|
||
},
|
||
toPage (pageName) {
|
||
if (pageName == "设备管理") {
|
||
uni.navigateTo({
|
||
url: "/pages/selectDevice/index",
|
||
});
|
||
}
|
||
},
|
||
|
||
navigateToAccountSettings(path) {
|
||
console.log("okk")
|
||
uni.navigateTo({
|
||
url: path,
|
||
});
|
||
},
|
||
getLoginCode () {
|
||
uni.login({
|
||
success: (res) => {
|
||
if (res.code) {
|
||
this.loginWithPhoneNumber(res.code);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
async loginWithPhoneNumber (code) {
|
||
try {
|
||
const res = await uni.request({
|
||
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
|
||
method: "POST",
|
||
data: { code },
|
||
header: {
|
||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||
},
|
||
});
|
||
|
||
if (res.statusCode == 200) {
|
||
this.userInfo = res.data;
|
||
console.log('this.userInfo', this.userInfo);
|
||
|
||
// 存储用户信息到本地缓存（uni-app接口）
|
||
uni.setStorageSync("userInfo", this.userInfo);
|
||
uni.showToast({ title: "登录成功" });
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({ title: "登录失败", icon: "none" });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- 临时样式 -->
|
||
<style scoped>
|
||
.area2_item_right {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.area2_item_txt {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
.area2_item_icon1 {
|
||
width: 30rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.area2_item_left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.function_area2_content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.function_area2_item {
|
||
height: 110rpx;
|
||
background-color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 23rpx 0 37rpx;
|
||
}
|
||
|
||
.function_area2_warp {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.area1_content_txt {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.area1_content_icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.area1_content_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.area1_content_warp {
|
||
display: flex;
|
||
margin-left: 38rpx;
|
||
align-items: center;
|
||
margin-top: 39rpx;
|
||
}
|
||
|
||
.area1_content_title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
margin: 19rpx 0 0 28rpx;
|
||
}
|
||
|
||
.function_area1_content {
|
||
width: 100%;
|
||
height: 238rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.function_area1_warp {
|
||
width: 100%;
|
||
margin-top: -20rpx;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.contai_warp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC !important;
|
||
min-height: 100vh;
|
||
background-color: #f1f6fc;
|
||
}
|
||
|
||
.top_area_warp {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.top_status_area {
|
||
width: 100%;
|
||
}
|
||
|
||
.top_nav_warp {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
position: relative;
|
||
z-index: 5;
|
||
}
|
||
|
||
.bg-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.top_area_backimg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.mine_area_right {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.mine_info_txt2 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.mine_info_txt1 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #030303;
|
||
}
|
||
|
||
.mine_info_warp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
.mine_avater {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.mine_area_left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.mimicry {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.mine_area_warp {
|
||
height: 229rpx;
|
||
padding: 26rpx 34rpx 0 47rpx;
|
||
position: relative;
|
||
z-index: 5;
|
||
}
|
||
</style>
|