You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
9.1 KiB
421 lines
9.1 KiB
<template>
|
|
<view class="container">
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
<view class="wrap">
|
|
<view class="me">
|
|
<image class="me-top" :src="base.imgHost('me-top.png')"></image>
|
|
<view class="me-name" @click="tourl(1)">
|
|
{{userInfo.username?userInfo.username:'-'}}
|
|
<u-icon name="arrow-right" size="32" style="margin-left:40rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="menu">
|
|
<view @click="tourl(2)">
|
|
<view>
|
|
<image :src="base.imgHost('me-icon1.png')" style="width:52rpx;height:48rpx;"></image>
|
|
<text>我的课程</text>
|
|
</view>
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
</view>
|
|
<view @click="tourl(3)">
|
|
<view>
|
|
<image :src="base.imgHost('me-icon2.png')" style="width:50rpx;height:50rpx;"></image>
|
|
<text>我的预约</text>
|
|
</view>
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
</view>
|
|
<view @click="refreshCode">
|
|
<view>
|
|
<image :src="base.imgHost('me-icon3.png')" style="width:51rpx;height:46rpx;"></image>
|
|
<text>电子校园卡</text>
|
|
</view>
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
</view>
|
|
<view @click="showGzh = true">
|
|
<view>
|
|
<image :src="base.imgHost('me-icon4.png')" style="width:50rpx;height:47rpx;"></image>
|
|
<text>关注公众号</text>
|
|
</view>
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 校友卡 -->
|
|
<view class="modal-wrap" v-if="showCard">
|
|
<view class="modal-image">
|
|
<view class="modal-close" @click="showCard = false">X</view>
|
|
<image mode="heightFix" :src="base.imgHost('me-xyk.png')"></image>
|
|
</view>
|
|
|
|
<view class="modal-xyk">
|
|
<view>
|
|
<view class="modal-xyk-item">
|
|
<view style="margin-bottom:60rpx">电子校园卡</view>
|
|
<view style="display: flex;justify-content: center;">
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" value="123" :sizeUnit="'rpx'" :size="200"
|
|
:options="{
|
|
margin: 10,
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
}"></uqrcode>
|
|
</view>
|
|
<view style="margin-top:20rpx;font-size:24rpx">点击二维码刷新</view>
|
|
</view>
|
|
<view class="modal-xyk-item modal-xyk-name">
|
|
<view>
|
|
<text>姓名：</text>
|
|
<text>{{userInfo.username}}</text>
|
|
</view>
|
|
<view>
|
|
<text>学籍：</text>
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 公众号 -->
|
|
<view class="modal-wrap" v-if="showGzh">
|
|
<view class="modal-image">
|
|
<view class="modal-close" @click="showGzh = false">X</view>
|
|
<image mode="heightFix" :show-menu-by-longpress="true" :src="base.imgHost('me-gzh.png')"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 进入后没有手机号的话 绑定 或者 注册 -->
|
|
<view class="modal">
|
|
<u-popup v-model="showRegister" mode="bottom">
|
|
<view>
|
|
<view class="modal-tip">提示</view>
|
|
<view class="modal-content">
|
|
<view>如您已是我方校友，请先绑定账号</view>
|
|
<view @click="goBind" class="modal-bind">
|
|
去绑定
|
|
</view>
|
|
<view>如您还不是我方校友，请先注册</view>
|
|
<view @click="toRegister" class="modal-register">
|
|
去注册
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="modal-btn">
|
|
<view @click="goBind" class="modal-btn-bind">
|
|
去绑定
|
|
</view>
|
|
<view @click="toRegister" class="modal-btn-register">
|
|
去注册
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
</u-popup>
|
|
</view>
|
|
|
|
<tabbar :currentPage="3"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
uqrcode
|
|
},
|
|
data() {
|
|
return {
|
|
showRegister: false,
|
|
type: 'register',
|
|
showGzh: false,
|
|
showCard: false,
|
|
userInfo: {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.showRegister = false
|
|
this.getUserInfo()
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
refreshCode() {
|
|
this.showCard = true
|
|
this.$refs.uqrcode.make({
|
|
success: () => {
|
|
console.log('生成成功');
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
});
|
|
|
|
},
|
|
tourl(type) {
|
|
if (type === 1) {
|
|
uni.navigateTo({
|
|
url: '/packages/my/index'
|
|
})
|
|
} else if (type === 2) {
|
|
uni.navigateTo({
|
|
url: '/packages/mycourse/index'
|
|
})
|
|
} else if (type === 3) {
|
|
uni.navigateTo({
|
|
url: '/packages/mybook/index'
|
|
})
|
|
}
|
|
},
|
|
getUserInfo() {
|
|
this.$u.api.user().then(res => {
|
|
console.log("res", res)
|
|
this.$u.vuex('vuex_user', res.user)
|
|
this.userInfo = res.user
|
|
if (this.base.isNull(res.user.mobile)) {
|
|
this.showRegister = true
|
|
} else {
|
|
this.showRegister = false
|
|
}
|
|
})
|
|
},
|
|
// 去绑定登录
|
|
goBind() {
|
|
console.log("qwe")
|
|
uni.navigateTo({
|
|
url: '/packages/register/login'
|
|
})
|
|
},
|
|
// 去注册
|
|
toRegister() {
|
|
uni.navigateTo({
|
|
url: '/packages/register/index'
|
|
})
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
padding: 30rpx;
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
.cbg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.wrap {
|
|
position: relative;
|
|
height: calc(100% - 60rpx);
|
|
|
|
.me {
|
|
width: 690rpx;
|
|
height: 435rpx;
|
|
position: relative;
|
|
|
|
&-top {
|
|
width: 690rpx;
|
|
height: 435rpx;
|
|
}
|
|
|
|
&-name {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
position: absolute;
|
|
top: 120rpx;
|
|
left: 30rpx;
|
|
}
|
|
}
|
|
|
|
// .me{
|
|
// background-color: #ceab8a;
|
|
// padding:30rpx;
|
|
// text-align: center;
|
|
// color:#fff;
|
|
// border-radius: 20rpx;
|
|
// }
|
|
.menu {
|
|
position: absolute;
|
|
top: 240rpx;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
// z-index: 999;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
height: calc(100% - 240rpx);
|
|
padding: 40rpx;
|
|
|
|
&>view {
|
|
padding: 30rpx;
|
|
color: #666;
|
|
border-bottom: 1px solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
margin-left: 20rpx
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
::v-deep .u-drawer-bottom {
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
&-tip {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
&-content {
|
|
height: 450rpx;
|
|
padding: 0 30rpx;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
|
|
&>view {
|
|
margin: 30rpx auto;
|
|
}
|
|
}
|
|
|
|
&-bind {
|
|
width: 45%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
}
|
|
|
|
&-register {
|
|
width: 45%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
}
|
|
|
|
&-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
|
|
&>view {
|
|
width: 45%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
&-bind {
|
|
width: 45%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
}
|
|
|
|
&-register {
|
|
width: 45%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 20rpx;
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-wrap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
.modal-close {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 80rpx;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
}
|
|
|
|
.modal-image {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 70%;
|
|
|
|
&>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.modal-xyk {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 70%;
|
|
color: #fff;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
&>view {
|
|
width: 50%;
|
|
}
|
|
|
|
&-item {
|
|
margin-bottom: 60rpx;
|
|
|
|
&>view {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&-name {
|
|
width: 70%;
|
|
|
|
&>view {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |