727 lines
14 KiB
Vue
727 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="" style="width:100%">
|
||
<view class="top" v-show="top"></view>
|
||
<view class="nicheng" v-if="login">
|
||
<view class="tx-w">
|
||
<view class="tx">
|
||
<image class="tx-img" :src="yonghuwx.avatarUrl"></image>
|
||
<view class="zx"></view>
|
||
</view>
|
||
<view class="infos">
|
||
<view class="studentName">姓名：{{parentList.parentName}}</view>
|
||
<view class="name">昵称：{{yonghuwx.nickName}} </view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="nicheng2" v-else>
|
||
<view class="tx-w" @tap='wxGetUserInfo'>
|
||
<view class="tx" style="margin-left: 130rpx;">
|
||
<image class="tx-img" src="/static/dl.png"></image>
|
||
<view class="zx"></view>
|
||
</view>
|
||
<view class="login" style="margin-left:45% ;">
|
||
<view class="" :src="yonghuwx.avatarUrl">
|
||
暂未登录
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top2" v-show="top2"></view>
|
||
<view class="tip" v-show="tip">
|
||
<button @tap='wxGetUserInfo'>授权登录</button>
|
||
</view>
|
||
<view class="stuinfos" v-show="stuinfos">
|
||
<view class="student">
|
||
<view class="stinfo">
|
||
<img src="/static/student.png" alt="" sizes="" srcset="">
|
||
<view class="st">学生信息</view>
|
||
|
||
</view>
|
||
<view class="th">
|
||
|
||
<view class="stname">姓名</view>
|
||
<view class="sex">性别</view>
|
||
<view class="age">年龄</view>
|
||
<view class="class">班级</view>
|
||
<view class="score">成绩</view>
|
||
|
||
</view>
|
||
<view class="tr" v-for="item in studentList">
|
||
<view class="stname">{{item.studentName}}</view>
|
||
<view class="sex">{{item.studentSex | formatSex}} </view>
|
||
<view class="age">{{item.studentAge}}</view>
|
||
<view class="class">{{item.className}}</view>
|
||
<view class="read">
|
||
<navigator :url="`/pages/home/home?studentId=${item.studentId}`
|
||
">查看</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="kindergarten">
|
||
<view class="stinfo">
|
||
<img src="/static/children.png" alt="" sizes="" srcset="">
|
||
<text>幼儿园信息</text>
|
||
|
||
</view>
|
||
<view class="th">
|
||
<view class="kinderclass">幼儿园</view>
|
||
<view class="teacher">班主任</view>
|
||
</view>
|
||
<view class="tr" v-for="item in classList">
|
||
<view class="kinderclass">{{item.kindergartenName}}</view>
|
||
<view class="teacher">{{item.classTeacher}}</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="parentinfo">
|
||
<view class="stinfo">
|
||
<img src="/static/parent.png" alt="" sizes="" srcset="">
|
||
<text>家长信息</text>
|
||
</view>
|
||
<view class="th">
|
||
<view class="parent">家长</view>
|
||
<view class="phone">电话</view>
|
||
</view>
|
||
<view class="tr">
|
||
<view class="parent">{{parentList.parentName}}</view>
|
||
<view class="phone">{{parentList.phone}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="masks" style="" v-if="mask">
|
||
<view class="mask">
|
||
<view class="title">
|
||
提示
|
||
</view>
|
||
<view class="text">
|
||
您的手机号不符合，请更改信息
|
||
</view>
|
||
<view class="btns">
|
||
<view class="btn1" @tap='mask=false'>取消</view>
|
||
<view class="btn2" @tap='gophone()'>确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="masks" style="" v-if="mask2">
|
||
<view class="mask2">
|
||
<view class="title">
|
||
微信授权
|
||
</view>
|
||
<view class="sq">
|
||
<!-- <img src="/static/sq.png" alt="" sizes="" srcset=""> -->
|
||
<img src="/static/sq1.png" alt="" sizes="" srcset="">
|
||
</view>
|
||
|
||
<view class="text">
|
||
授权绑定您的手机号码
|
||
</view>
|
||
<view class="btns">
|
||
<button class="btn1" @tap='mask2=false'>拒绝</button>
|
||
<!-- <view class="btn1" @tap='mask=false'>拒绝</view> -->
|
||
<button class="btn2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberp">允许</button>
|
||
<!-- <view class="btn2" @tap='gophone()'>确定</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getPreOrderById,
|
||
getInfoByPhone
|
||
} from '@/api/index/index.js'
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
top: true,
|
||
top2: false,
|
||
login: false,
|
||
mask: false,
|
||
mask2: false,
|
||
before: false,
|
||
stuinfos: false,
|
||
tip: true,
|
||
yonghuwx: [],
|
||
logincode: '',
|
||
phonecode: '',
|
||
phone: '',
|
||
studentList: [],
|
||
classList: [],
|
||
parentList: [],
|
||
msg: '',
|
||
openId: '',
|
||
}
|
||
},
|
||
methods: {
|
||
setitem() {
|
||
let that = this;
|
||
uni.getStorage({
|
||
key: 'user',
|
||
success: function(res) {
|
||
that.yonghuwx = res.data
|
||
console.log(that.yonghuwx);
|
||
that.login = true
|
||
that.stuinfos = true
|
||
that.tip = false
|
||
that.top2 = true
|
||
that.top = false
|
||
that.getPreOrderById();
|
||
// that.mask = true
|
||
}
|
||
});
|
||
},
|
||
gophone() {
|
||
const openid = this.openId
|
||
uni.navigateTo({
|
||
url: `/pages/phone/phone?openId=${openid}`
|
||
})
|
||
this.mask=false;
|
||
},
|
||
getPreOrderById() {
|
||
getPreOrderById(this.logincode, this.phonecode).then(res => {
|
||
console.log((res))
|
||
if (res.code == 200) {
|
||
if (res.data.flag == "EMPTY") {
|
||
this.mask = true;
|
||
this.openId = res.data.openId
|
||
} else {
|
||
// this.mask = true;
|
||
this.phone = res.data.phone
|
||
uni.setStorage({
|
||
key: 'phone',
|
||
data: res.data.phone
|
||
});
|
||
if (this.phone != '') {
|
||
this.getInfoByPhoneinfo()
|
||
}
|
||
this.login = true
|
||
this.stuinfos = true
|
||
this.tip = false
|
||
this.top2 = true
|
||
this.top = false
|
||
this.mask2 = false;
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
getPhoneNumberp(val) {
|
||
this.phonecode = val.detail.code
|
||
console.log(val)
|
||
let that = this;
|
||
wx.login({
|
||
provider: 'weixin',
|
||
success: function(loginRes) {
|
||
console.log(loginRes)
|
||
that.logincode = loginRes.code
|
||
console.log(that.logincode)
|
||
that.getPreOrderById();
|
||
that.mask2 = false;
|
||
}
|
||
});
|
||
},
|
||
wxGetUserInfo() {
|
||
let that = this;
|
||
uni.getUserProfile({
|
||
desc: "获取用户信息",
|
||
lang: "zh_CN",
|
||
success(res) {
|
||
console.log(res)
|
||
that.yonghuwx = res.userInfo
|
||
uni.setStorage({
|
||
key: 'user',
|
||
data: res.userInfo
|
||
});
|
||
that.mask2 = true
|
||
},
|
||
fail(res) {
|
||
//失败则返回home页面
|
||
},
|
||
});
|
||
|
||
},
|
||
|
||
getInfoByPhoneinfo() {
|
||
|
||
getInfoByPhone(this.phone).then(res => {
|
||
if (res.code == 200) {
|
||
console.log(res)
|
||
this.studentList = res.data.studentInfoList;
|
||
this.classList = res.data.classInfoList;
|
||
this.parentList = res.data;
|
||
// this.mask = true;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
filters: {
|
||
// 格式化性别
|
||
formatSex(str) {
|
||
const sexEnum = {
|
||
"FAMELE": "女",
|
||
"MALE": "男",
|
||
}
|
||
|
||
return sexEnum[str];
|
||
},
|
||
},
|
||
onShow(){
|
||
},
|
||
onLoad(options) {
|
||
let that = this;
|
||
uni.getStorage({
|
||
key: 'phone',
|
||
success: function(res) {
|
||
that.phone = res.data
|
||
// that.mask = true
|
||
that.getInfoByPhoneinfo();
|
||
}
|
||
});
|
||
uni.getStorage({
|
||
key: 'user',
|
||
success: function(res) {
|
||
that.yonghuwx = res.data
|
||
console.log(that.yonghuwx);
|
||
that.login = true
|
||
that.stuinfos = true
|
||
that.tip = false
|
||
that.top2 = true
|
||
that.top = false
|
||
// that.mask = true
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// this.yonghuwx = JSON.parse(options.userinfo)
|
||
// console.log(this.yonghuwx)
|
||
// uni.request({
|
||
// url: '/kindergarten/applet/appletLogin', //仅为示例，并非真实接口地址。
|
||
// method:'GET'
|
||
// data: {
|
||
// text: 'uni.request'
|
||
// },
|
||
|
||
// success: (res) => {
|
||
// console.log(res.data);
|
||
// this.text = 'request success';
|
||
// }
|
||
// });
|
||
|
||
|
||
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.btns {}
|
||
|
||
.btn1,
|
||
.btn2 {
|
||
width: 50%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
display: inline-block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.btn2 {
|
||
border-top: 1px solid #eeeeee;
|
||
/* background-color: #4486e8; */
|
||
right: 0;
|
||
}
|
||
|
||
.btn1 {
|
||
border-top: 1px solid #eeeeee;
|
||
border-right: 1px solid #eeeeee;
|
||
background-color: #4486e8;
|
||
color: #fff;
|
||
left: 0;
|
||
}
|
||
|
||
.masks {
|
||
background-color: #f0f0f0;
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
opacity: 0.9;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.mask2 {
|
||
width: 70%;
|
||
height: 400rpx;
|
||
background-color: #fff;
|
||
margin: 200rpx auto;
|
||
position: relative;
|
||
}
|
||
|
||
.sq {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
/* background-color: red; */
|
||
margin: 0 auto;
|
||
padding-top: 25rpx;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.masks img {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 30rpx;
|
||
width: 100%;
|
||
text-align: left;
|
||
/* padding-top: 40rpx; */
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.title {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
border-bottom: 1px solid #eeeeee;
|
||
/* background-color: red; */
|
||
font-size: 36rpx;
|
||
margin: 0px auto;
|
||
width: 100%;
|
||
text-align: center;
|
||
/* line-height: 80rpx; */
|
||
}
|
||
|
||
.mask {
|
||
width: 70%;
|
||
height: 300rpx;
|
||
background-color: #fff;
|
||
margin: 200rpx auto;
|
||
position: relative;
|
||
}
|
||
|
||
.content {
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
|
||
.top {
|
||
/* background-color: #4486e8; */
|
||
/* background: url(@/static/bjt.png) no-repeat; */
|
||
background-image: linear-gradient(#55C5E3, #fff);
|
||
width: 100%;
|
||
height: 600rpx;
|
||
float: left;
|
||
/* display:inline-block; */
|
||
}
|
||
|
||
.top2 {
|
||
/* background-color: #4486e8; */
|
||
background-image: linear-gradient(#55C5E3, #fff);
|
||
width: 100%;
|
||
height: 400rpx;
|
||
float: left;
|
||
|
||
}
|
||
|
||
|
||
.info {
|
||
color: #eeeeee;
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* 头像 */
|
||
.tx-w {
|
||
margin-top: 50rpx;
|
||
|
||
}
|
||
|
||
.tx {
|
||
margin-left: 90rpx;
|
||
}
|
||
|
||
.tx image {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
}
|
||
|
||
.studentName {
|
||
margin-left: 280rpx;
|
||
}
|
||
|
||
.infos {
|
||
margin-top: -100rpx;
|
||
color: #707374;
|
||
}
|
||
|
||
.name {
|
||
margin-left: 280rpx;
|
||
}
|
||
|
||
.name-qm {
|
||
margin-left: ;
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
.nicheng {
|
||
width: 700rpx;
|
||
height: 240rpx;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
position: absolute;
|
||
margin-top: 50px;
|
||
margin-left: 3.3%;
|
||
/* display: flex;
|
||
flex-direction: column; */
|
||
|
||
/* box-shadow: 0rpx 2rpx 0rpx 0rpx #a9caf5; */
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.nicheng2 {
|
||
width: 90%;
|
||
height: 240rpx;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
position: absolute;
|
||
margin-top: 150rpx;
|
||
margin-left: 5%;
|
||
/* display: flex;
|
||
flex-direction: column; */
|
||
|
||
/* box-shadow: 0rpx 2rpx 0rpx 0rpx #a9caf5; */
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
/* 登陆 */
|
||
.login {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
/* background-color: red; */
|
||
margin: 0 auto;
|
||
margin-top: -100rpx;
|
||
margin-left: 40%;
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.stuinfos {
|
||
margin-left: 3.3%;
|
||
}
|
||
|
||
.tip button {
|
||
background-color: #79E7E1;
|
||
color: #fff;
|
||
}
|
||
|
||
.tip {
|
||
width: 450rpx;
|
||
height: 70rpx;
|
||
/* background-color:orchid; */
|
||
font-size: 50rpx;
|
||
margin: 0 auto;
|
||
color: #515151;
|
||
margin-top: 100%;
|
||
}
|
||
|
||
/* 学生信息 */
|
||
.student {
|
||
width: 700rpx;
|
||
/* height: 180px; */
|
||
|
||
margin-top: 360rpx;
|
||
box-shadow: 0rpx 2rpx 0rpx 0rpx #e6ebfe;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 16rpx;
|
||
/* color: cornflowerblue; */
|
||
background-color: #eef9fc;
|
||
color: #707374;
|
||
/* display: flex; */
|
||
/* flex-direction: row; */
|
||
}
|
||
|
||
img {
|
||
/* margin-top: 10px; */
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
/* margin-top: 9px; */
|
||
margin-right: 30rpx;
|
||
margin-bottom: -4rpx;
|
||
}
|
||
|
||
.st {
|
||
display: inline-block;
|
||
margin-bottom: 3rpx;
|
||
/* width: 20px;
|
||
height: 20px; */
|
||
/* margin-top: 10px; */
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.stinfo {
|
||
/* height: 30px; */
|
||
margin-left: 30rpx;
|
||
font-size: 40rpx;
|
||
color: #4486e8;
|
||
/* border-bottom: #eeecec 1px solid; */
|
||
/* text-align: center; */
|
||
font-weight: 500;
|
||
}
|
||
|
||
.th {
|
||
/* background-color: orange; */
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
border-top: lightsteelblue 2rpx solid;
|
||
|
||
}
|
||
|
||
.tr {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.stname {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: red; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
|
||
|
||
|
||
}
|
||
|
||
.sex {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: blueviolet; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
}
|
||
|
||
.age {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: burlywood; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
}
|
||
|
||
.class {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: orange; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
}
|
||
|
||
/* 幼儿园 */
|
||
.kindergarten {
|
||
width: 700rpx;
|
||
background-color: #eef9fc;
|
||
box-shadow: 0rpx 2rpx 0px 0px #e6ebfe;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 16rpx;
|
||
color: #707374;
|
||
}
|
||
|
||
.kinderclass {
|
||
width: 340rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: red; */
|
||
border-bottom: lightsteelblue 1px solid;
|
||
|
||
}
|
||
|
||
.teacher {
|
||
width: 360rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: red; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
/* padding-left: 50px; */
|
||
}
|
||
|
||
|
||
.score {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
|
||
}
|
||
|
||
.read {
|
||
width: 140rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
color: cornflowerblue;
|
||
}
|
||
|
||
/* 家长信息 */
|
||
.parentinfo {
|
||
/* position: absolute; */
|
||
width: 700rpx;
|
||
/* height: 106px; */
|
||
/* margin-top: 510px; */
|
||
background-color: #eef9fc;
|
||
box-shadow: 0rpx 2rpx 0rpx 0rpx #e6ebfe;
|
||
border-radius: 20rpx;
|
||
color: #707374;
|
||
}
|
||
|
||
.parent {
|
||
width: 350rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: red; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
}
|
||
|
||
.phone {
|
||
width: 350rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
/* background-color: red; */
|
||
border-bottom: lightsteelblue 2rpx solid;
|
||
}
|
||
</style>
|