@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class='wrap'>
|
||||
<view class="formwrap">
|
||||
<view class='logintitle'>
|
||||
<image src="@/static/index_logo.png" class="logo" alt="" />
|
||||
<image src="@/static/logo3.png" class="words" alt="" />
|
||||
<view class="subtitle">
|
||||
——排查身边灾害隐患</view>
|
||||
<view class='logintitletext'>
|
||||
<span>答题时间</span>
|
||||
<span>{{startTime}}至{{endTime}}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="loginform">
|
||||
<view>
|
||||
<u-input :placeholderStyle="'color:#999;font-size:30rpx'"
|
||||
:custom-style="{'background':'#fff','padding':'15rpx 30rpx','border-radius':'80rpx'}"
|
||||
v-model="form.name" placeholder="请输入姓名" :border="false" shape="circle" clearable></u-input>
|
||||
</view>
|
||||
<view>
|
||||
<u-input :placeholderStyle="'color:#999;font-size:30rpx'"
|
||||
:custom-style="{'background':'#fff','padding':'15rpx 30rpx','border-radius':'80rpx'}"
|
||||
v-model="form.mobile" placeholder="请输入手机号" :border="false" shape="circle" clearable></u-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loginbtn">
|
||||
<u-button size="mini" :throttle-time="2000" shape="circle" type="default" :custom-style="parStyle"
|
||||
@click="submit">提交</u-button>
|
||||
<image src="@/static/logintip.png" class="logintips" alt="" @click="showtips=true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动须知 -->
|
||||
<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 {
|
||||
parStyle: {
|
||||
'background': 'linear-gradient(to right, #2754a5, #2b83bb)',
|
||||
'color': '#fff',
|
||||
'font-size': '28rpx',
|
||||
'padding': '20rpx 30rpx',
|
||||
'margin-left': '15rpx',
|
||||
'margin-top': '80rpx',
|
||||
'width': '100%',
|
||||
'height': '80rpx'
|
||||
|
||||
},
|
||||
tip: '',
|
||||
form: {
|
||||
name: '',
|
||||
mobile: '',
|
||||
},
|
||||
|
||||
isEnd: true,
|
||||
showtips: false,
|
||||
tiptitle: '',
|
||||
active_tip: '',
|
||||
maskHeight: 0,
|
||||
windowHeight: 0,
|
||||
activeConfig: {},
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let user = this.vuex_user
|
||||
if (user) {
|
||||
if (!isNull(user.mobile)) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/me/me'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.isEnd = uni.getStorageSync('isEnd')
|
||||
this.active_tip = uni.getStorageSync('active_tip')
|
||||
console.log("uni.getStorageSync('active_tip')",uni.getStorageSync('active_tip'))
|
||||
this.activeConfig = uni.getStorageSync('activeConfig')
|
||||
if (this.activeConfig.start_time) {
|
||||
this.startTime = this.formatDateToMonthDay(this.activeConfig.start_time)
|
||||
}
|
||||
if (this.activeConfig.end_time) {
|
||||
this.endTime = this.formatDateToMonthDay(this.activeConfig.end_time)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDateToMonthDay(dateString) {
|
||||
const month = this.$moment(dateString).format('MM')
|
||||
const day = this.$moment(dateString).format('DD')
|
||||
return `${month}月${day}日`;
|
||||
},
|
||||
openTips() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.wrap').boundingClientRect(({
|
||||
height
|
||||
}) => {
|
||||
console.log("height", height);
|
||||
if (this.windowHeight > height) {
|
||||
this.maskHeight = this.windowHeight;
|
||||
} else {
|
||||
this.maskHeight = height;
|
||||
}
|
||||
}).exec();
|
||||
this.showtips = true
|
||||
// this.showSucess = true
|
||||
},
|
||||
|
||||
isOnlyChinese(str) {
|
||||
const chineseRegex = /^[\u4e00-\u9fa5]+$/;
|
||||
return chineseRegex.test(str);
|
||||
},
|
||||
submit() {
|
||||
if (!this.isEnd) {
|
||||
toast("活动已结束")
|
||||
return
|
||||
}
|
||||
if (isNull(this.form.name) || isNull(this.form.mobile)) {
|
||||
toast("请填写所有信息")
|
||||
return
|
||||
}
|
||||
if (!this.isOnlyChinese(this.form.name)) {
|
||||
toast("请输入中文姓名")
|
||||
return
|
||||
}
|
||||
if (!isNull(this.form.mobile) && !uni.$u.test.mobile(this.form.mobile)) {
|
||||
toast("请输入正确的手机号")
|
||||
return
|
||||
}
|
||||
this.$u.api.saveUser({
|
||||
...this.form
|
||||
}).then(res => {
|
||||
this.$u.vuex('vuex_user', res);
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'none',
|
||||
duration: 1500,
|
||||
success() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/me/me'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-image: url('../../static/bg.jpg');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
.formwrap {
|
||||
width: 90%;
|
||||
padding-top: 100rpx;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 120rpx
|
||||
}
|
||||
|
||||
.logintitle {
|
||||
.logo {
|
||||
width: 293rpx;
|
||||
height: 294rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.words {
|
||||
width: 702rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #2754a5;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.logintitletext {
|
||||
margin-top: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logintitletext span {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
border-radius: 0 60rpx 60rpx 0;
|
||||
background-color: #fff;
|
||||
padding: 10rpx 20rpx
|
||||
}
|
||||
|
||||
.logintitletext span:first-child {
|
||||
background-color: #0095e5;
|
||||
color: #fff;
|
||||
border-radius: 60rpx 0 0 60rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
padding: 20rpx 30rpx;
|
||||
padding-top: 0;
|
||||
|
||||
.logintips {
|
||||
width: 141rpx;
|
||||
height: 28rpx;
|
||||
margin: 20rpx auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginform {
|
||||
padding: 30rpx 20rpx;
|
||||
margin-top: 30rpx
|
||||
}
|
||||
|
||||
.loginform>view {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,257 @@
|
||||
<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 style="padding-bottom:40rpx">
|
||||
<view class="panel1 panel2" v-for="(item,index) in askList">
|
||||
<view class="left">
|
||||
<view class="num">
|
||||
{{item.score}}<span>分</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="num">第{{numberToChinese(index+1)}}次答题</view>
|
||||
<view class="text">{{item.created_at?item.created_at.substring(0,16):''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
isNull,
|
||||
toast
|
||||
} from "@/common/util.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logo:require('@/static/index_logo.png'),
|
||||
userInfo: {},
|
||||
answercount: 0,
|
||||
askList: [],
|
||||
countList: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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() {
|
||||
let that = this
|
||||
const res = await this.$u.api.questions()
|
||||
that.answercount = res.ask.length
|
||||
that.askList = res.ask
|
||||
},
|
||||
numberToChinese(num) {
|
||||
const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
||||
const chineseUnits = ['', '十', '百', '千', '万', '亿'];
|
||||
|
||||
const numStr = num.toString();
|
||||
const numLength = numStr.length;
|
||||
|
||||
let result = '';
|
||||
|
||||
for (let i = 0; i < numLength; i++) {
|
||||
const digit = parseInt(numStr[i]);
|
||||
const unit = chineseUnits[numLength - i - 1];
|
||||
|
||||
if (digit !== 0) {
|
||||
result += chineseDigits[digit] + unit;
|
||||
} else {
|
||||
if (unit === '十' || unit === '百' || unit === '千') {
|
||||
result += chineseDigits[digit];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQuestion()
|
||||
},
|
||||
onShow() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #fff;
|
||||
|
||||
margin-left: 32rpx;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
word-break: keep-all;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.club {
|
||||
font-size: 24rpx;
|
||||
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 {
|
||||
margin: 40rpx auto;
|
||||
|
||||
.left {
|
||||
flex: none;
|
||||
width: 30%;
|
||||
|
||||
.num {
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: left;
|
||||
padding: 0 60rpx;
|
||||
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 950 KiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 831 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 895 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 790 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 961 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 302 KiB After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 627 B |