|
|
<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-wrap">
|
|
|
<view class="me-name">
|
|
|
<image mode="widthFix" :src="base.imgHost('login-logo.png')"></image>
|
|
|
<view>
|
|
|
<view class="userinfo">
|
|
|
<view class="usersigns">
|
|
|
<text>姓名：</text>
|
|
|
<text>{{userInfo.username?userInfo.username:'-'}}</text>
|
|
|
</view>
|
|
|
<view class="usersigns" v-if="course_signs.length>0">
|
|
|
<text>学籍：</text>
|
|
|
<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="usercode">
|
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="userInfo.code" :sizeUnit="'rpx'"
|
|
|
:size="160" :options="{
|
|
|
margin: 10,
|
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
|
}"></uqrcode>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="menu">
|
|
|
<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="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="toUrl(5)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon6.png')" style="width:47rpx;height:50rpx;"></image>
|
|
|
<text>我要捐赠</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
|
|
|
</view>
|
|
|
<view @click="toUrl(1)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon7.png')" style="width:48rpx;height:52rpx;"></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 @click="toUrl(4)">
|
|
|
<view>
|
|
|
<image :src="base.imgHost('me-icon5.png')" style="width:48rpx;height:52rpx;"></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="widthFix" :src="base.imgHost('me-xyk1.png')"></image>
|
|
|
</view>
|
|
|
|
|
|
<view class="modal-xyk">
|
|
|
<view>
|
|
|
|
|
|
<!-- <view style="margin-bottom:40rpx;text-align: center;">电子校园卡</view> -->
|
|
|
<view class="modal-xyk-between">
|
|
|
<view class="modal-xyk-item">
|
|
|
<view style="display: flex;justify-content: center;" @click="refreshCode">
|
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="userInfo.code" :sizeUnit="'rpx'"
|
|
|
:size="160" :options="{
|
|
|
margin: 10,
|
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
|
}"></uqrcode>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-xyk-item modal-xyk-name">
|
|
|
<view class="modal-xyk-name-course">
|
|
|
<text>姓名：</text>
|
|
|
<text>{{userInfo.username}}</text>
|
|
|
</view>
|
|
|
<view class="modal-xyk-name-course" v-if="course_signs.length>0">
|
|
|
<text>学籍：</text>
|
|
|
<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-xyk-item-reload" @click="refreshCode">
|
|
|
<image :src="base.imgHost('me-reload.png')"></image>
|
|
|
<view>点击二维码刷新</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 公众号 -->
|
|
|
<view class="modal-wrap" v-if="showGzh">
|
|
|
<view class="modal-image" style="height:68%;text-align: center;">
|
|
|
<view class="modal-close" @click="showGzh = false">X</view>
|
|
|
<image mode="heightFix" style="height:100%" show-menu-by-longpress :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>
|
|
|
|
|
|
</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: {},
|
|
|
hasMobile: false,
|
|
|
course_signs: []
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onShareTimeline() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
this.showRegister = false
|
|
|
this.getUserInfo()
|
|
|
},
|
|
|
onLoad() {},
|
|
|
methods: {
|
|
|
refreshCode() {
|
|
|
if (!this.hasMobile) {
|
|
|
this.base.toast("请先绑定或注册")
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
}
|
|
|
this.showCard = true
|
|
|
this.$refs.uqrcode.make({
|
|
|
success: () => {
|
|
|
console.log('生成成功');
|
|
|
},
|
|
|
fail: err => {
|
|
|
console.log(err)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
toUrl(type) {
|
|
|
if (type === 1 || type === 2 || type === 3) {
|
|
|
if (!this.hasMobile) {
|
|
|
this.base.toast("请先绑定或注册")
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
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'
|
|
|
})
|
|
|
} else if (type === 4) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/webview/index?type=4'
|
|
|
})
|
|
|
} else if (type === 5) {
|
|
|
// uni.navigateTo({
|
|
|
// url: '/packages/webview/index?type=4'
|
|
|
// })
|
|
|
}
|
|
|
},
|
|
|
getUserInfo() {
|
|
|
this.$u.api.user().then(res => {
|
|
|
console.log("res", res)
|
|
|
this.$u.vuex('vuex_user', res.user)
|
|
|
this.userInfo = res.user
|
|
|
this.course_signs = res.user.course_signs ? res.user.course_signs : []
|
|
|
if (this.base.isNull(res.user.mobile)) {
|
|
|
this.showRegister = true
|
|
|
this.hasMobile = false
|
|
|
} else {
|
|
|
this.showRegister = false
|
|
|
this.hasMobile = true
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 去绑定登录
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
&-wrap {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
top: 0rpx;
|
|
|
left: 0;
|
|
|
padding: 30rpx;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
&-name {
|
|
|
width: 100%;
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
image {
|
|
|
width: 200rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
// height: 110rpx;
|
|
|
// margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
&>view {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
|
|
|
.userinfo {
|
|
|
width: calc(100% - 200rpx);
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.usersigns {
|
|
|
display: flex;
|
|
|
|
|
|
&>text:first-child {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
|
|
|
&>text:last-child {
|
|
|
width: calc(100% - 100rpx);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.usercode {
|
|
|
width: 160rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.menu {
|
|
|
position: absolute;
|
|
|
top: 320rpx;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
// z-index: 999;
|
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
|
height: calc(100% - 320rpx);
|
|
|
padding: 40rpx;
|
|
|
overflow: scroll;
|
|
|
|
|
|
&>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);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal-wrap {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
|
.modal-close {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
color: #fff;
|
|
|
background: #6e6e77;
|
|
|
border-radius: 80rpx;
|
|
|
position: absolute;
|
|
|
top: -90rpx;
|
|
|
right: 0rpx;
|
|
|
}
|
|
|
|
|
|
.modal-image {
|
|
|
position: absolute;
|
|
|
top: 48%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
// height: 60%;
|
|
|
width: calc(100% - 60rpx);
|
|
|
|
|
|
&>image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.modal-xyk {
|
|
|
position: absolute;
|
|
|
top: 57%;
|
|
|
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: 100%;
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
|
|
|
&-between {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 60rpx;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
// margin-bottom: 60rpx;
|
|
|
width: 160rpx;
|
|
|
margin-right: 60rpx;
|
|
|
|
|
|
&>view {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
&-reload {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 10rpx 40rpx;
|
|
|
font-size:24rpx;
|
|
|
|
|
|
image {
|
|
|
width: 27rpx;
|
|
|
height: 25rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-name {
|
|
|
width: calc(100% - 220rpx);
|
|
|
margin-right: 0;
|
|
|
|
|
|
&>view {
|
|
|
text-align: left;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
&-course {
|
|
|
display: flex;
|
|
|
|
|
|
&>text:first-child {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
|
|
|
&>text:last-child {
|
|
|
width: calc(100% - 100rpx);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
