672 lines
15 KiB
Vue
672 lines
15 KiB
Vue
<template>
|
|
<Navigation :title_name="'个人中心'" :isReturn="person.userList&&person.userList.length>0?1:3"
|
|
:returnIcon="'../../static/education/add_user.png'" :color="'#000000'" :bgc="'#FFFFFF'"
|
|
@iconClick="jumpAddStudent" :isCenter="true" />
|
|
<view v-if="person.userList&&person.userList.length>0">
|
|
<view class="ech">
|
|
<view class="card-wrapper">
|
|
<view class="card-scroll">
|
|
<view v-for="(item,index) in person.userList" :key="index">
|
|
<CurrItem :datas="item" @onOpenStu="getOpenStu(item,index)" @onUnBind="getUnBind(item)"
|
|
:isChange="false" :bgIndex="index" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="option-list">
|
|
<view class="option-item" v-for="(op,opIndex) in person.optionList" :key="opIndex"
|
|
@click.stop="toRelated(op,opIndex)">
|
|
<image :src="op.icon" mode=""></image>
|
|
<view class="option-item-name">{{op.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 用户信息弹窗 -->
|
|
<view class="dio" v-if="showChangeStudent">
|
|
<view class="dio-contain">
|
|
<view class="dio-padding">
|
|
<view class="center" :style="{background:stuInfoBackground[backIndex]}">
|
|
<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode=""></image>
|
|
<view class="stu-name">{{showLookStudentInfo.name}}</view>
|
|
</view>
|
|
<view class="id-card">
|
|
<view class="number">{{showLookStudentInfo.number}}</view>
|
|
<view class="look-btn" :style="{color:stuInfoBackground[backIndex]}" @click="seePhone">查看</view>
|
|
</view>
|
|
</view>
|
|
<view class="cancel" @tap="showChangeStudent=false"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 联系客服弹窗 -->
|
|
<Popups :isShow="person.isShowService" :bgColor="'#fff'">
|
|
<view style="width: 250px;display: flex;flex-direction: column;align-items: center;">
|
|
<view class="popup_cont_des" style="font-size: 20px;margin-top: 25px;">
|
|
{{person.phoneNum}}
|
|
</view>
|
|
<view class="popup_add_btn">
|
|
<button class="flex" @tap="connectServe"
|
|
style="font-size: 16px;height: 35px;line-height: 35px;width: 100%;">
|
|
<image src="@/static/education/phone_icon.png" mode=""></image>
|
|
联系客服
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</Popups>
|
|
</view>
|
|
<view v-else>
|
|
<view class="empty_box">
|
|
<image src="@/static/null_icon.png" mode=""></image>
|
|
<text>暂无学生个人信息~</text>
|
|
</view>
|
|
<view class="add_btn">
|
|
<button open-type="getPhoneNumber" v-if="!showReactivePhone" @getphonenumber="getPhoneNumber">添加学生</button>
|
|
<button @tap="jumpAddStudent" v-else>添加学生</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 短信验证弹窗 -->
|
|
<Popups :isShow="showDioUnbindMseeage" :width="260" height="auto" :bgColor="'#fff'"
|
|
@cancelBtn="showDioUnbindMseeage=false">
|
|
<view class="p_cont">
|
|
<view class="popup_cont_title">
|
|
短信验证
|
|
</view>
|
|
<view class="popup_cont_list">
|
|
<view class="cont_list_item1">
|
|
<view style="font-size: 18px;">向{{unBindPhone}}发送验证信息<br />请输入验证码</view>
|
|
<view class="flex">
|
|
<input v-for="(item,index) in sendYZMCode" @input="inputLastNumber(index,$event)" :key="index"
|
|
:value="item.name" :focus="item.isFocus" @blur="preventFocus(index,$event)" @click="messageFocus(index,$event)"
|
|
placeholder-style="color:#BDBDBD;" type="number" maxlength="1"
|
|
:class="{'border-indey-message':item.isFocus,'border-error':errroYZM}"
|
|
:selection-start="(item.isFocus)?0:-1" :selection-end="(item.isFocus)?item.name.length:-1"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup_cont_tag flex">
|
|
<button v-if="timeLast>0" class="send-btn">{{timeLast}}秒后重发</button>
|
|
<button v-else @click="retrieAgain" class="send-btn"
|
|
style="font-size: 16px;">{{showMessageText?'再次获取':'获取验证码'}}</button>
|
|
</view>
|
|
<view class="popup_add_btn">
|
|
<button @click="okClickMessage" class="massage-btn" style="font-size: 18px;">确认</button>
|
|
</view>
|
|
</view>
|
|
</Popups>
|
|
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
watch,
|
|
nextTick
|
|
} from "vue";
|
|
import Popups from "@/components/popups/index.vue";
|
|
import CurrItem from "@/components/currItem/index.vue";
|
|
import {
|
|
getUserInfo,
|
|
getUserLogin,
|
|
getUserPhone,
|
|
getConfig,
|
|
postRegister,
|
|
getbindstudentList,
|
|
getSTudyReportInfo,
|
|
putUnBind,
|
|
LookStudentInfo,
|
|
bindMobile,
|
|
getSendTelphoneCode
|
|
} from "@/api/user";
|
|
import {
|
|
onShow,
|
|
onHide
|
|
} from "@dcloudio/uni-app";
|
|
import Navigation from '@/components/navigation/index.vue'
|
|
|
|
const showDioUnbindMseeage = ref(false) //解绑用户
|
|
const showMessageText = ref(false) //解绑倒计时显示文字
|
|
const unBindPhone = ref('')
|
|
const timeLast = ref(0)
|
|
const unBindParams = { //解绑用户参数
|
|
"StudentId": 0,
|
|
"Mobile": "0",
|
|
"SmsId": "0",
|
|
"SmsCode": "0"
|
|
}
|
|
const errroYZM=ref(false) //错误短信边框提示
|
|
const sendYZMCode = ref([ //短信验证6位数字
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
{
|
|
name: '',
|
|
isFocus: false
|
|
},
|
|
])
|
|
let person = reactive({
|
|
phoneNum: '18812545252',
|
|
phoneNumAll: '',
|
|
userList: [], // 用户列表
|
|
optionList: [{
|
|
name: '联系客服',
|
|
icon: '../../static/education/phone.png'
|
|
},
|
|
{
|
|
name: '关于',
|
|
icon: '../../static/education/about.png'
|
|
}
|
|
],
|
|
isShowService: false, // 是否显示联系客服
|
|
currStudent: {} // 当前学生
|
|
})
|
|
const showLookStudentInfo = reactive < {
|
|
number: string,
|
|
name: string
|
|
} > ({})
|
|
const webSrc = ref('') //webview 换取code 的UR了地址
|
|
const jumpHasConnentStudent = ref(false) //是否已有关联学生
|
|
const appId = ref('') //appId
|
|
const showStudentList = ref(false)
|
|
const showReactivePhone = ref(false) //和本机互动，展示是否授权获取手机号
|
|
const preventFocus = (index) => {
|
|
sendYZMCode.value[index].isFocus = false
|
|
}
|
|
|
|
const focstState=ref(false)
|
|
//输入框自动失焦获取聚焦
|
|
const inputLastNumber = (index, event) => {
|
|
sendYZMCode.value[index].name = event.detail.value
|
|
if(!focstState.value){
|
|
if (sendYZMCode.value[index].name) {
|
|
if (index < 5) {
|
|
sendYZMCode.value[index + 1].isFocus = true
|
|
}
|
|
}else{
|
|
if (index > 0) {
|
|
sendYZMCode.value[index - 1].isFocus = true
|
|
}
|
|
}
|
|
}else{
|
|
focstState.value=false //点击状态未真
|
|
}
|
|
}
|
|
const messageFocus=(index,event)=>{ //短信框输入聚焦
|
|
let name = sendYZMCode.value[index].name
|
|
if(!name){
|
|
focstState.value=false //点击状态未真
|
|
}else{
|
|
focstState.value=true //点击状态未真
|
|
}
|
|
errroYZM.value=false //关闭红色错误弹窗
|
|
sendYZMCode.value[index].isFocus=true
|
|
}
|
|
// 再次获取短信验证
|
|
const showTimer = ref(true) //是否60秒之后再次获取短信验证码
|
|
const timer = ref(0)
|
|
const retrieAgain = () => {
|
|
if (showTimer.value) {
|
|
showTimer.value = false
|
|
// let telephone = uni.getStorageSync('USER_PHONE')
|
|
showMessageText.value = true
|
|
timeLast.value = 60
|
|
timer.value = setInterval(() => {
|
|
timeLast.value--; // 时间减一秒
|
|
if (timeLast.value <= 0) { // 当倒计时结束时
|
|
clearInterval(timer.value); // 停止计时器
|
|
showTimer.value = true
|
|
}
|
|
}, 1000); // 每秒执行一次
|
|
console.log(unBindPhone.value);
|
|
getSendTelphoneCode(unBindPhone.value, 2).then(res => {
|
|
console.log(res);
|
|
if (res.Code == 200) {
|
|
unBindParams.SmsId = res.Data
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const okClickMessage = () => {
|
|
let messageCode = ''
|
|
sendYZMCode.value.forEach(item => {
|
|
messageCode += item.name
|
|
})
|
|
unBindParams.SmsCode = messageCode
|
|
putUnBind(unBindParams).then(res => {
|
|
console.log(res);
|
|
if (res.Code == 200) {
|
|
showDioUnbindMseeage.value = false
|
|
getStudentList() //重新刷新拉取学生列表
|
|
} else {
|
|
errroYZM.value=true
|
|
uni.showToast({
|
|
title:res.Message,
|
|
position:'bottom'
|
|
});
|
|
sendYZMCode.value.forEach(item => {
|
|
item.name=''
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// 解绑
|
|
const getUnBind = (item) => {
|
|
showDioUnbindMseeage.value = true
|
|
errroYZM.value=false
|
|
LookStudentInfo(item.Id).then(res => {
|
|
unBindParams.StudentId = item.Id
|
|
unBindParams.Mobile = res.Data.Telephone
|
|
unBindPhone.value = res.Data.Telephone
|
|
})
|
|
sendYZMCode.value.forEach(item => {
|
|
item.name = ''
|
|
})
|
|
}
|
|
onShow(() => {
|
|
getUserInfo().then(res => {
|
|
console.log('用户信息', res);
|
|
showReactivePhone.value = res.Data.BindMobile
|
|
})
|
|
getStudentList()
|
|
})
|
|
|
|
//查看
|
|
const showChangeStudent = ref(false)
|
|
const stuInfoBackground = ['#6B86FF', '#45CB9F', '#22C1F2']
|
|
const backIndex = ref(0)
|
|
const getOpenStu = (item, index) => {
|
|
showChangeStudent.value = true
|
|
person.currStudent = item
|
|
backIndex.value = index % 3
|
|
LookStudentInfo(item.Id).then(res => {
|
|
console.log(res);
|
|
showLookStudentInfo.name = res.Data.RealName
|
|
person.phoneNumAll = res.Data.Telephone
|
|
showLookStudentInfo.number = res.Data.Telephone.replace(res.Data.Telephone.substring(3, 7), '****')
|
|
})
|
|
}
|
|
// 号码查看
|
|
const seePhone = () => {
|
|
showLookStudentInfo.number = person.phoneNumAll
|
|
}
|
|
// 跳转关于
|
|
const toRelated = (item, index) => {
|
|
if (item.name === '关于') {
|
|
uni.navigateTo({
|
|
url: `/pages/userRelated/index`
|
|
})
|
|
} else if (item.name === '联系客服') {
|
|
person.isShowService = !person.isShowService
|
|
6000().then(res => {
|
|
console.log(res);
|
|
if (res.Code == 200) {
|
|
person.phoneNum = res.Data.ServiceNumber
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂无客服'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 添加学生跳转
|
|
const toAddStudent = (item, index) => {
|
|
console.log(99999);
|
|
}
|
|
|
|
|
|
//获取用户本机手机号
|
|
const getPhoneNumber = (e) => {
|
|
console.log(111, e.detail.code);
|
|
if (e.detail.errMsg == "getPhoneNumber:ok") {
|
|
bindMobile(e.detail.code).then(res => {
|
|
if (res.Code == 200) {
|
|
uni.navigateTo({
|
|
url: '/pages/userAddStudent/index'
|
|
})
|
|
} else {
|
|
console.log('未授权手机号')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const jumpAddStudent = (e) => {
|
|
uni.navigateTo({
|
|
url: '/pages/userAddStudent/index'
|
|
})
|
|
}
|
|
// 获取学生列表方法
|
|
const getStudentList = () => {
|
|
getbindstudentList().then(res => {
|
|
console.log('学生列表', res);
|
|
if (res.Code == 200) {
|
|
person.userList = res.Data
|
|
}
|
|
})
|
|
}
|
|
//监听获取token之后 发送请求学生列表
|
|
watch(() => showStudentList.value, () => {
|
|
console.log(showStudentList.value);
|
|
if (showStudentList.value) {
|
|
getStudentList()
|
|
}
|
|
})
|
|
|
|
//联系客服
|
|
const connectServe = () => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: person.phoneNum
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.empty_box {
|
|
z-index: 0;
|
|
}
|
|
|
|
page {
|
|
overflow: hidden;
|
|
position: inherit !important;
|
|
}
|
|
|
|
.popup_cont {
|
|
width: 211px;
|
|
}
|
|
|
|
.add_btn {
|
|
position: absolute;
|
|
bottom: 30%;
|
|
}
|
|
|
|
.ech {
|
|
width: 100vw;
|
|
position: relative;
|
|
top: 0px;
|
|
margin-bottom: 50px;
|
|
|
|
.card-wrapper {
|
|
background: #F5F5F5;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.option-list {
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #3D425B;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: 0.72px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #ECECEC;
|
|
|
|
&:last-child {
|
|
border-bottom: 0 !important;
|
|
}
|
|
|
|
image {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.option-item-name {
|
|
width: 92%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dio {
|
|
width: 100vw;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, 0.42);
|
|
z-index: 99;
|
|
|
|
.dio-contain {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dio-padding {
|
|
border-radius: 10px;
|
|
background: #FFF;
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cancel {
|
|
margin-top: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url('@/static/education/cancel.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 250px;
|
|
height: 200px;
|
|
border-radius: 10px;
|
|
background: #6B86FF;
|
|
|
|
image {
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.stu-name {
|
|
color: #FFF;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.72px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.id-card {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px 0 0 0;
|
|
color: #3D425B;
|
|
font-family: PingFang SC;
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: 0.72px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.look-btn {
|
|
color: #6B86FF;
|
|
}
|
|
}
|
|
|
|
.btn-add {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 10px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.p_cont {
|
|
// padding: 20px;
|
|
background: #fff;
|
|
border-radius: 30rpx;
|
|
|
|
.popup_cont_pic {
|
|
margin: 40rpx auto 20rpx auto;
|
|
background: #fff;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.popup_add_btn {
|
|
button {
|
|
width: 45%;
|
|
|
|
&:nth-child(1) {
|
|
width: 55%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup_cont_title {
|
|
font-size: 36rpx;
|
|
color: #575757;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.popup_cont_tag {
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
text-align: right;
|
|
margin-top: 20rpx;
|
|
|
|
button {
|
|
border: 2rpx solid #A5B5FA;
|
|
color: #A5B5FA;
|
|
font-size: 24rpx;
|
|
margin: 0;
|
|
padding: 0 20rpx;
|
|
background: #fff;
|
|
height: 45rpx;
|
|
line-height: 45rpx;
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup_cont_list {
|
|
text-align: left;
|
|
|
|
.cont_list_item {
|
|
font-size: 28rpx;
|
|
background: #F8F9FF;
|
|
border-radius: 8rpx;
|
|
padding: 32rpx;
|
|
margin-top: 30rpx;
|
|
|
|
&:first-child {
|
|
input {
|
|
width: 99%;
|
|
border: 0;
|
|
padding: 10rpx 0;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
input {
|
|
border: 2rpx solid #9C9C9C;
|
|
border-radius: 12rpx;
|
|
width: 16.6%;
|
|
padding: 15rpx 0;
|
|
color: #2C2C2C;
|
|
font-weight: 500;
|
|
margin-top: 20rpx;
|
|
margin-right: 10rpx;
|
|
text-align: center;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont_list_item1 {
|
|
font-size: 28rpx;
|
|
border-radius: 8rpx;
|
|
margin-top: 30rpx;
|
|
|
|
input {
|
|
border: 2rpx solid #9C9C9C;
|
|
border-radius: 12rpx;
|
|
width: 16.6%;
|
|
padding: 15rpx 0;
|
|
color: #2C2C2C;
|
|
font-weight: 500;
|
|
margin-top: 20rpx;
|
|
margin-right: 10rpx;
|
|
text-align: center;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.massage-btn {
|
|
width: 100% !important;
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 50% !important;
|
|
height: 30px !important;
|
|
line-height: 30px !important;
|
|
}
|
|
.border-indey-message{
|
|
border: 3px solid skyblue !important;
|
|
}
|
|
.border-error{
|
|
border: 1px solid #FF0000 !important;
|
|
}
|
|
</style> |