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.
427 lines
8.3 KiB
427 lines
8.3 KiB
<template>
|
|
<view class="wrap">
|
|
|
|
<view class="container">
|
|
<view class="user-info">
|
|
<view class="user-info-avatar">
|
|
<img class="avatar" :src="userInfo.headimgurl ? userInfo.headimgurl : logo" alt="">
|
|
|
|
</view>
|
|
|
|
<view class="user-info__text">
|
|
<view class="name">
|
|
{{ userInfo.name || 'xx' }}
|
|
</view>
|
|
<view class="club">
|
|
{{ userInfo.mobile ? userInfo.mobile : '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="panel1">
|
|
<view class="left">
|
|
<view class="num">{{answercount}}</view>
|
|
<view class="text">已答次数</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="num">{{ userInfo.quiz_total_score || 0 }}</view>
|
|
<view class="text">累计得分</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="panel2">
|
|
<view class="top">
|
|
<view @click="toanswer">
|
|
<u-icon name="edit-pen-fill" color="#de242f" size="60rpx"></u-icon>
|
|
<view class="text">参与答题</view>
|
|
</view>
|
|
<view @click='torecord'>
|
|
<u-icon name="calendar" color="#de242f" size="60rpx"></u-icon>
|
|
<view class="text">答题记录</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom">
|
|
<view class="row" @click="showtips=true">
|
|
<u-icon name="info-circle-fill" color="#de242f" size="40rpx"></u-icon>
|
|
<view class="text">活动须知</view>
|
|
<u-icon name="arrow-right" color="#333" size="38rpx"></u-icon>
|
|
</view>
|
|
<view class="row">
|
|
<u-icon name="gift-fill" :color="open_win?'#de242f':'#999999'" size="40rpx"></u-icon>
|
|
<view class="text">中奖情况</view>
|
|
<text v-if="open_win" @click='openWins'>查看</text>
|
|
<text v-else>暂未开始</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 获奖 -->
|
|
<u-popup v-model="showwin" mode="center">
|
|
<view class="tipwrap">
|
|
<view class="tiptitle">
|
|
获奖通知
|
|
</view>
|
|
<view class="tipcenter">
|
|
<view>{{userInfo.name?userInfo.name:''}}</view>
|
|
<view>请保持通话畅通，工作人员会与您联系</view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view @click="showwin=false">知道了</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 活动须知 -->
|
|
<u-popup v-model="showtips" mode="center">
|
|
<view class="tipwrap">
|
|
<view class="tiptitle">
|
|
活动须知
|
|
</view>
|
|
<view class="tipcenter">
|
|
<view>
|
|
<view v-html="active_tip"></view>
|
|
</view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view @click="showtips=false">知道了</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isNull,
|
|
toast
|
|
} from "@/common/util.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
logo:require('@/static/index_logo.png'),
|
|
userInfo: {},
|
|
answercount: 0,
|
|
showRecord: false,
|
|
showNowin: false,
|
|
showwin: false,
|
|
showtips: false,
|
|
winimg: '',
|
|
tiptitle: '',
|
|
isEnd: true,
|
|
active_tip: '',
|
|
maxCount: 2,
|
|
open_win: false,
|
|
today_ask_count: 0
|
|
};
|
|
},
|
|
methods: {
|
|
openWins() {
|
|
if (this.userInfo.pid === 1) {
|
|
this.showwin = true
|
|
} else {
|
|
toast('很遗憾，您未得奖')
|
|
}
|
|
},
|
|
toanswer() {
|
|
if (!this.isEnd) {
|
|
toast("活动已结束")
|
|
return
|
|
}
|
|
if (this.today_ask_count) {
|
|
toast(`您的今日答题次数已用完`)
|
|
return
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/answer/index'
|
|
})
|
|
}
|
|
},
|
|
torecord() {
|
|
|
|
uni.navigateTo({
|
|
url: '/pages/record/index'
|
|
})
|
|
|
|
},
|
|
async getUserInfo() {
|
|
const res = await this.$u.api.user()
|
|
this.$u.vuex('vuex_user', res);
|
|
this.userInfo = res;
|
|
if (isNull(res.mobile)) {
|
|
uni.redirectTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
}
|
|
},
|
|
async getQuestion() {
|
|
const res = await this.$u.api.questions()
|
|
this.today_ask_count = res.today_ask_count
|
|
this.answercount = res.ask?res.ask.length:0
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
this.getQuestion()
|
|
this.isEnd = uni.getStorageSync('isEnd')
|
|
this.active_tip = uni.getStorageSync('active_tip')
|
|
let configs = uni.getStorageSync("activeConfig") ? uni.getStorageSync("activeConfig").config : []
|
|
configs.map(item => {
|
|
if (item.key == 'open_win') {
|
|
this.open_win = item.value == 1 ? true : false
|
|
}
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-image: url('../../static/bg.jpg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
overflow: scroll;
|
|
}
|
|
|
|
|
|
.tipwrap {
|
|
width: 650rpx;
|
|
// background: #fff;
|
|
font-size: 28rpx;
|
|
padding:30rpx;
|
|
.tiptitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
|
|
}
|
|
.tipcenter {
|
|
background-color: #fff;
|
|
min-height: 200rpx;
|
|
line-height: 1.8;
|
|
width: 100%;
|
|
box-sizing: content-box;
|
|
margin-top: -5rpx;
|
|
|
|
&>view {
|
|
padding: 20px;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.answerBtn {
|
|
text-align: center;
|
|
padding-bottom: 40rpx;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: -5rpx;
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&>view {
|
|
box-shadow: 1rpx 7rpx 18rpx 0rpx #2754a5;
|
|
color: #333;
|
|
padding: 16rpx 70rpx;
|
|
margin: 10rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 10rpx;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
&>view:last-child {
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #2754a5, #2b83bb);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 82rpx 0 0 54rpx;
|
|
|
|
.user-info-avatar {
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
border-radius: 100%;
|
|
// object-fit: contain;
|
|
// border: 1rpx solid #fff;
|
|
// box-sizing: border-box;
|
|
}
|
|
|
|
.avatar {
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
border-radius: 100%;
|
|
// object-fit: contain;
|
|
// border: 1rpx solid #fff;
|
|
// box-sizing: border-box;
|
|
}
|
|
|
|
&__text {
|
|
color: #fff;
|
|
|
|
margin-left: 32rpx;
|
|
|
|
.name {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
word-break: keep-all;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.club {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
|
|
margin-top: 13rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin panel {
|
|
width: 658rpx;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 40rpx;
|
|
filter: drop-shadow(0 0 7.5px rgba(226, 54, 50, 0.1));
|
|
margin: auto;
|
|
|
|
.num {
|
|
font-size: 52rpx;
|
|
text-transform: uppercase;
|
|
color: #ff0000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.panel1 {
|
|
@include panel;
|
|
|
|
height: 164rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 73rpx auto 0 auto;
|
|
|
|
&>view {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&:nth-child(1) {
|
|
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 91rpx;
|
|
width: 2rpx;
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
transform: translateY(-50%);
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel2 {
|
|
@include panel;
|
|
height: 689rpx;
|
|
|
|
margin-top: 30rpx;
|
|
padding: 0 46rpx 0 42rpx;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding-top: 50rpx;
|
|
padding-bottom: 46rpx;
|
|
position: relative;
|
|
|
|
&>view {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
height: 60rpx;
|
|
object-fit: contain;
|
|
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
height: 2rpx;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding: 34rpx 4rpx 34rpx 23rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 2rpx;
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |