|
|
@@ -2,14 +2,21 @@
|
|
|
<view class="children-container">
|
|
|
<!-- 标题 -->
|
|
|
<view class="tips">
|
|
|
- <view class="title">选择您的孩子</view>
|
|
|
- <button class="detail" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!show">获取您的孩子信息</button>
|
|
|
+ <view class="title" v-show="!show">欢迎您的使用</view>
|
|
|
+ <view style="font-weight: bold;font-size: 45rpx;color: #4169E1;margin-left: 40rpx;margin-top: 10rpx;"
|
|
|
+ v-show="!show">醍摩豆家长助您孩子成长</view>
|
|
|
+ <view class="title-sim" v-show="show">选择您的孩子</view>
|
|
|
+
|
|
|
+ <view class="detail-image" v-show="!show"></view>
|
|
|
+ <button class="detail-button" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
|
|
|
+ v-show="!show">获取您的孩子信息</button>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 孩子选择界面 -->
|
|
|
- <view class="children-item" v-if="show">
|
|
|
+ <view class="children-item" v-show="show">
|
|
|
<view class="com-box">
|
|
|
- <view class="item" v-for="(item,index) in parentdetail.childrenList" :key="index" @click="chooseChildren(item)">
|
|
|
+ <view class="item" v-for="(item,index) in parentdetail.childrenList" :key="index"
|
|
|
+ @click="chooseChildren(item)">
|
|
|
<view class="item-text">{{item.name}}</view>
|
|
|
<view class="avatar-box">
|
|
|
<u-avatar size="120" class="item-avatar" :src="item.avatar" mode="aspectFill"></u-avatar>
|
|
|
@@ -23,44 +30,50 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {mapState,mapMutations} from 'vuex'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
//引入解密工具
|
|
|
import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";
|
|
|
-
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
};
|
|
|
},
|
|
|
- computed:{
|
|
|
- ...mapState('m_parent',['parentdetail','token'])
|
|
|
+ computed: {
|
|
|
+ ...mapState('m_parent', ['parentdetail', 'token']),
|
|
|
+ ...mapState('m_children',['semesterList'])
|
|
|
},
|
|
|
- onLoad(){
|
|
|
+ onLoad() {
|
|
|
//判断用户信息
|
|
|
this.hasParentDetail()
|
|
|
},
|
|
|
- methods:{
|
|
|
- ...mapMutations('m_children',['updateChildrenInfo']),
|
|
|
- ...mapMutations('m_parent',['updateParentInfo']),
|
|
|
-
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('m_children', ['updateChildrenInfo','updateChildrenSemester']),
|
|
|
+ ...mapMutations('m_parent', ['updateParentInfo','updateParentDetail']),
|
|
|
+
|
|
|
//选择孩子并跳转首页传入id查询显示孩子信息
|
|
|
- chooseChildren(item){
|
|
|
+ chooseChildren(item) {
|
|
|
console.log(item.tmdid);
|
|
|
this.updateChildrenInfo(item)
|
|
|
+ //默认学期
|
|
|
+ this.updateChildrenSemester(this.semesterList[0][0])
|
|
|
uni.switchTab({
|
|
|
- url:'/pages/home/home'
|
|
|
+ url: '/pages/home/home'
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
//判断用户基本信息是否存在
|
|
|
- hasParentDetail(){
|
|
|
- if(uni.getStorageSync('parentdetail'))
|
|
|
+ hasParentDetail() {
|
|
|
+ if (uni.getStorageSync('parentdetail'))
|
|
|
this.show = true
|
|
|
else
|
|
|
this.show = false
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
//获取用户手机号
|
|
|
async getPhoneNumber(e) {
|
|
|
if (e.detail.errMsg !== "getPhoneNumber:ok") {
|
|
|
@@ -72,89 +85,123 @@
|
|
|
let numData = await proof.decryptData(e.detail.encryptedData, e.detail.iv)
|
|
|
console.log(numData.phoneNumber)
|
|
|
// const parentDetailData = await uni.$http.post('',numData.phoneNumber)
|
|
|
- // this.updateParentDetail(parentDetailData)
|
|
|
+ this.updateParentDetail({
|
|
|
+ phoneNumber: '17882237075',
|
|
|
+ name: '家长姓名',
|
|
|
+ childrenList: [{
|
|
|
+ avatar: '/static/default-icons/boy.png',
|
|
|
+ name: '张三',
|
|
|
+ classid: '0301',
|
|
|
+ class: '三年级一班',
|
|
|
+ tmdid: 'tmdid01',
|
|
|
+ schoolname: '研发学校'
|
|
|
+ }, {
|
|
|
+ avatar: '/static/default-icons/girl.png',
|
|
|
+ name: '张梅',
|
|
|
+ classid: '0504',
|
|
|
+ class: '五年级四班',
|
|
|
+ tmdid: 'tmdid03',
|
|
|
+ schoolname: '研发学校'
|
|
|
+ }, ]
|
|
|
+ })
|
|
|
this.show = true
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .children-container{
|
|
|
+ .children-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
-
|
|
|
+
|
|
|
.tips {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
z-index: 99;
|
|
|
-
|
|
|
+
|
|
|
.title {
|
|
|
- padding-top: 180rpx;
|
|
|
+ padding-top: 200rpx;
|
|
|
padding-left: 40rpx;
|
|
|
line-height: 70rpx;
|
|
|
- margin-bottom: 60rpx;
|
|
|
font-weight: bold;
|
|
|
- font-size: 60rpx;
|
|
|
+ font-size: 50rpx;
|
|
|
color: #4169E1;
|
|
|
- background-image: linear-gradient(to right, #506AE7, #87CEFA);
|
|
|
- background-clip: text;//裁剪成文字的前景色
|
|
|
- color: transparent;//文字颜色变成透明
|
|
|
- text-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
+ // background-clip: text; //裁剪成文字的前景色
|
|
|
+ // color: transparent; //文字颜色变成透明
|
|
|
}
|
|
|
- .detail{
|
|
|
- line-height: 70rpx;
|
|
|
+
|
|
|
+ .title-sim {
|
|
|
+ padding-top: 200rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 45rpx;
|
|
|
+ color: #4169E1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-image {
|
|
|
+ margin-top: 50rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background: $guide-back-base64;
|
|
|
+ background-size: cover; //背景图片自适应
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-button {
|
|
|
+ line-height: 100rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 40rpx;
|
|
|
- border-radius: 200rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
position: relative;
|
|
|
- margin: 180rpx auto;//relative相对定位居中
|
|
|
+ margin: 100rpx auto; //relative相对定位居中
|
|
|
border: none;
|
|
|
color: #FFFFFF;
|
|
|
background: linear-gradient(to right, #506AE7, #87CEFA);
|
|
|
- box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- .children-item{
|
|
|
- .com-box{
|
|
|
+
|
|
|
+ .children-item {
|
|
|
+ .com-box {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- flex-wrap: wrap;//元素换行
|
|
|
+ flex-wrap: wrap; //元素换行
|
|
|
|
|
|
-
|
|
|
- .item{
|
|
|
+ .item {
|
|
|
margin: 10rpx 20rpx 20rpx 20rpx;
|
|
|
padding: 20rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- background-color: #FFFFFF;
|
|
|
+ background-color: #f1f3f5;
|
|
|
border-radius: 20rpx;
|
|
|
width: 280rpx;
|
|
|
height: 320rpx;
|
|
|
z-index: 99;
|
|
|
-
|
|
|
- .item-text{
|
|
|
+
|
|
|
+ .item-text {
|
|
|
margin: -7rpx 0 20rpx 20rpx;
|
|
|
width: 100%;
|
|
|
line-height: 40rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 35rpx;
|
|
|
color: #696969;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .avatar-box{
|
|
|
- .item-avatar{
|
|
|
+
|
|
|
+ .avatar-box {
|
|
|
+ .item-avatar {
|
|
|
width: 220rpx;
|
|
|
height: 220rpx;
|
|
|
}
|
|
|
@@ -163,54 +210,58 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.ocean {
|
|
|
- display: flex;
|
|
|
+ display: flex;
|
|
|
margin-top: -600rpx;
|
|
|
- width: 1800rpx;
|
|
|
- height: 1800rpx;
|
|
|
- background-color: #4169E1;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- &::before,
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- margin-top: 870rpx;
|
|
|
- width: 1600rpx;
|
|
|
- height: 1600rpx;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- border-radius: 43%;
|
|
|
- background-color: #fafafa;
|
|
|
- transform: translate(-50%, -70%) rotate(0);
|
|
|
- animation: rotate 6s linear infinite;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-radius: 46%;
|
|
|
- background-color: #fafafa;
|
|
|
- opacity: 0.7;
|
|
|
- transform: translate(-50%, -70%) rotate(0);
|
|
|
- animation: rotate 10s linear -5s infinite;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- border-radius: 40%;
|
|
|
- background-color: #fafafa;
|
|
|
- opacity: 0.5;
|
|
|
- transform: translate(-50%, -70%) rotate(0);
|
|
|
- animation: rotate 10s linear -5s infinite;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
-
|
|
|
+ width: 1800rpx;
|
|
|
+ height: 1800rpx;
|
|
|
+ background-color: #4169E1;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 870rpx;
|
|
|
+ width: 1600rpx;
|
|
|
+ height: 1600rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ border-radius: 43%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 6s linear infinite;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-radius: 46%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ opacity: 0.7;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 10s linear -5s infinite;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-radius: 40%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ opacity: 0.5;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 10s linear -5s infinite;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
@keyframes rotate {
|
|
|
- 50% {
|
|
|
- transform: translate(-50%, -73%) rotate(180deg);
|
|
|
- } 100% {
|
|
|
- transform: translate(-50%, -70%) rotate(360deg);
|
|
|
- }
|
|
|
+ 50% {
|
|
|
+ transform: translate(-50%, -73%) rotate(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translate(-50%, -70%) rotate(360deg);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
KELECHUAN