www_fpvone_cn/application/index/view/user/index.html

454 lines
20 KiB
HTML
Raw Normal View History

2024-12-20 12:29:51 +08:00
<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/door/css/flyer.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/door/css/home.css?v={$site.version}">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/door/css/public.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/door/layui-v2.9.3/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/door/font/door/iconfont.css">
<link rel="stylesheet" href="/assets/css/intlTelInput.css">
<script src="/assets/js/intlTelInput.js"></script>
<style>
.disabled {
pointer-events: none;
background-color: rgba(0, 0, 0, .5) !important;
}
.home-wrap{
display: block;
}
.newbox{
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.layui-form-check{
display: flex;
padding: 0!important;
align-items: center;
font-size: 14px!important;
height: 40px;
margin-top: 30px!important;
}
.layui-form-check .isopen{
margin-right: 10px;
width: 110px;
}
.layui-form-onswitch{
background: #000;
}
.layui-layer-btn .layui-layer-btn0{
background: #000;
}
.codebox{
padding: 40px;
text-align: center;
}
.codebox img{
margin: 15px 0;
}
.dialCode{
box-shadow: none;
border-color: #eee;
}
@media screen and (max-width: 768px){
.newbox{
display: block;
}
.ident{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
.ident .home-box{
justify-content: flex-start;
display: block;
margin-right: 15px;
width: auto;
}
.ident .home-box .home-name{
text-align: left;
}
.layui-form-check{
margin-top: 0!important;
}
.layui-form-check .isopen{
font-size: 12px;
width: 140px;
margin-right: 0;
}
}
</style>
<div class="fly-right">
<div class="home-head">
<div class="home-wrap">
<div class="home-info">
<div>
<img src="{$user.avatar|cdnurl}">
</div>
<div class="newbox">
<div class="ident">
<div class="home-box">
<p class="home-name">
{$user.nickname|htmlentities}
</p>
<p>
<span class="home-no">No.</span>
<span class="home-num">{$user.member_number}</span>
</p>
</div>
{if $user_type == 1}
<div class="home-rz">飞手</div>
{elseif $user_type==2}
<div class="home-rz">队伍</div>
{else}
<div class="home-rz">游客</div>
{/if}
</div>
{if $user_type == 1||$user_type == 2}
<div class="layui-form layui-form-check">
<p class="isopen">开启微信通知</p>
<div class="layui-input-block">
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switch1" title="ON|OFF" {if $is_notice}checked{/if}>
</div>
</div>
{/if}
</div>
</div>
<!--<div class="icons-box">-->
<!-- <div>-->
<!-- <div class="icons-tb">-->
<!-- <p class="jifen icons-num">{$user.score}</p>-->
<!-- </div>-->
<!-- <div>-->
<!-- <i class="iconfont icon-jifen"></i>-->
<!-- <span class="icons-text">我的积分</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="icons-tb">-->
<!-- <p class="icons-num">暂无</p>-->
<!-- </div>-->
<!-- <div>-->
<!-- <i class="iconfont icon-paiming1"></i>-->
<!-- <span class="icons-text">积分排名</span>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
</div>
</div>
<!--<div class="statistical">-->
<!-- <ul>-->
<!-- <li>-->
<!-- <p>-->
<!-- <i class="iconfont icon-v"></i>-->
<!-- <span>飞手等级</span>-->
<!-- </p>-->
<!-- <p>新人</p>-->
<!-- </li>-->
<!-- 其他身份目前只有参赛次数这个参数 -->
<!-- <li>-->
<!-- <p>-->
<!-- <i class="iconfont icon-jiangbei-"></i>-->
<!-- <span>报名场次</span>-->
<!-- </p>-->
<!-- <p class="stati-num">0</p>-->
<!-- </li>-->
<!-- <li>-->
<!-- <p>-->
<!-- <i class="iconfont icon-shoucang"></i>-->
<!-- <span>赛事得分</span>-->
<!-- </p>-->
<!-- <p>暂无</p>-->
<!-- </li>-->
<!-- <li>-->
<!-- <p>-->
<!-- <i class="iconfont icon-paiming1"></i>-->
<!-- <span>赛事排名</span>-->
<!-- </p>-->
<!-- <p>暂无</p>-->
<!-- </li>-->
<!-- </ul>-->
<!--</div>-->
<form class="layui-form" id="memberForm">
<div class="layui-form-item">
<label>昵称</label>
<div class="layui-input-block">
<input type="text" name="nick_name" lay-verify="required" autocomplete="off" class="layui-input"
value="{$userinfo.nickname|htmlentities}" lay-reqtext="昵称不能为空">
</div>
<p class="ename dw-eng">UserName</p>
</div>
<div class="layui-form-item">
<label>手机号</label>
<div class="layui-input-block changepnumber">
<input type="text" class="layui-input" value="{$user.mobile}" lay-reqtext="手机号不能为空" disabled>
<span class="changebtn">更改手机号</span>
</div>
<p class="ename dw-eng">Phone Number</p>
</div>
<div class="layui-form-item">
<label>密码</label>
<a href="{:url('user/changepwd')}">密码修改</a>
<p class="ename">Password</p>
</div>
{if $playerinfo}
<div class="layui-form-item faibox">
<label>FAI许可证编号</label>
<div class="layui-input-block">
<input type="text" name="fai_number" class="layui-input" autocomplete="off" value="{$playerinfo.fai_number}">
</div>
<p class="ename dw-eng">FAI license number</p>
</div>
{/if}
<div class="layui-form-item">
<label>微信</label>
<div class="layui-input-block">
<input type="text" name="vx" class="layui-input" autocomplete="off" value="{$userinfo.wechat}">
</div>
<p class="ename dw-eng">WeChat</p>
</div>
<div class="layui-form-item">
<label>头像</label>
<div class="layui-input-block up" input-id="avater">
{if $user.avatar == ''}
<div class="layui-upload-drag">
<i class="layui-icon"></i>
<p>上传照片</p>
</div>
{else /}
<img width="170" height="144" src="{$user.avatar|cdnurl}">
{/if}
</div>
<input type="hidden" name="avater" id="avater" value="{$user.avatar}">
</div>
<div class="btn-box">
<button class="savebtn" lay-submit="">
<p>保存</p>
<p>Save</p>
</button>
</div>
</form>
</div>
<script src="__CDN__/assets/css/door/js/jquery.form.min.js"></script>
<script src="__CDN__/assets/css/door/layui-v2.9.3/layui/layui.js"></script>
<!-- <script src="__CDN__/assets/css/door/js/user/index.js"></script>-->
<script src="__CDN__/assets/js/jquery.cookie.js"></script>
<script>
// 设置token
let params=new URLSearchParams(window.location.search)
let token=params.get('token')
if(token){
localStorage.setItem('isdy',true);
$.cookie('token',token,{path: '/'})
}
layui.use(['form', 'laydate', 'upload', 'layer'], function () {
//普通图片上传
const form = layui.form, layer = layui.layer;
upload = layui.upload;
upload.render({
elem: '.up'
, url: '{:url("/api/common/upload")}'
, multiple: true
, accept: "images"
, data: { _token: '{{ csrf_token() }}' }
, done: function (res) {
layer.msg('上传成功');
var element = this.item[0];
var input = element.getAttribute("input-id");
element.innerHTML = "<img width=170 height=144' src=" + res.data.fullurl + ">";
$("#" + input).val(res.data.fullurl);
layer.closeAll('loading');
}
, error: function (index, upload) {
layer.msg('上传失败');
layer.closeAll('loading');
}
});
// 是否开启微信通知
let getini='';
let flag=true;
form.on('switch(switch1)', function(data){
let val=data.elem.checked ? true : false;
if(val){
$.ajax({
url:'/inback.php/shopro/wechat/admin/getleagueQrcode',
data:{event:'bind',user_id:$('#userId').text()},
success:function(res){
console.log('请求二维码',res)
if(res.code==1){
layer.open({
title:false,
type:1,
content:`
<div class="codebox">
<p>开启微信通知</p>
<img src="${res.data.url}" height="180">
<p>扫码绑定即可享受通知提醒等便捷服务<p>
</div>
`,
shadeClose: true,
closeBtn:0,
end:function(){
clearInterval(getini)
if(flag){
console.log('flag',flag)
data.elem.checked=false;
form.render()
}
}
})
getini=setInterval(function(){
$.ajax({
url:'/inback.php/shopro/wechat/admin/checkLeagueScan',
data:{event:'bind',user_id:$('#userId').text(),eventId:res.data.eventId},
success:function(res){
if(res.code==0){
clearInterval(getini)
data.elem.checked=false;
form.render()
layer.closeAll()
}else if(res.code==1){
flag=false;
clearInterval(getini)
layer.closeAll()
}
}
})
},2000)
}
}
})
}else{
layer.confirm('您确定要关闭微信通知吗?关闭后将不再接收到系统通知。',{
title:'',
closeBtn:0
},function(){
$.ajax({
url:'/inback.php/shopro/wechat/admin/leagueunbind',
data:{user_id:$('#userId').text()},
success:function(res){
if(res.code==1){
layer.closeAll()
}
}
})
},function(){
data.elem.checked=true;
form.render()
})
}
});
// 更改手机号
$('.changebtn').click(function () {
layer.open({
type: 1,
area: ['50%','350px'],
resize: false,
shadeClose: true,
title: '更改手机号',
zIndex: 90,
content: `
<div class="layui-form" lay-filter="reset-phone" style="margin: 16px;">
<div class="demo-login-container">
<div class="layui-form-item" style="margin-left:0;margin-right:0;">
<div class="layui-input-wrap" style="width:100%;">
<input id="validate-phone" type="text" name="mobile" value="" lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-left:0;margin-right:0;">
<div class="layui-input-wrap" style="width:100%;display:flex;">
<input style="flex:1;" type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
<span class="getcaptcha" style="background-color: #000;color:#fff;padding:0 5px;cursor: pointer;">发送验证码</span>
</div>
</div>
<div class="layui-form-item" style="margin-left:0;margin-right:0;">
<button style="width:100%;background-color: #000;" class="layui-btn layui-btn-fluid" lay-submit lay-filter="resetnumber">确定</button>
</div>
</div>
</div>
`,
success: function () {
var phone = $("#validate-phone");
console.log(phone)
phone.intlTelInput({
});
$('.dialCode').val("+1");
phone.on("countrychange", function(e, countryData) {
// 获取选中的国家代码和区号
var dialCode = countryData.dialCode;
$('.dialCode').val("+"+dialCode);
$('#phone').val($('#phone').val());
});
$('.getcaptcha').click(function () {
var isValid = form.validate('#validate-phone');
let timer = '';
if (isValid) {
$.post('/api/sms/send', {
mobile: $('#validate-phone').val(),
event: 'changemobile',
dialCode:$('#dialCode').val()
}, function (res) {
if (res.code) {
clearInterval(timer);
let seconds = 60;
timer = setInterval(function () {
seconds--;
if (seconds <= 0) {
clearInterval(timer);
$('.getcaptcha').removeClass("disabled").text("发送验证码");
} else {
$('.getcaptcha').addClass("disabled").text(seconds + "秒后可再次发送");
}
}, 1000);
} else {
layer.msg(res.msg);
}
})
}
})
form.on('submit(resetnumber)', function (data) {
var field = data.field;
$.post('/api/user/changemobile', field, function (res) {
if(res.code){
location.reload()
}else{
layer.msg(res.msg);
}
})
return false;
});
}
});
})
$("#memberForm").submit(function () {
$(this).ajaxSubmit({
type: "POST",
url: "{:url('user/updateuser')}",
data: $(this).formSerialize(),
dataType: "json",
success: function (data) {
layer.msg(data.msg, { icon: 1 });
setTimeout(function () {
location.reload();
}, 2000);
},
error: function (data) {
var errors = data.responseJSON.errors;
if (errors) {
for (var index in errors) {
layer.msg(errors[index][0], { icon: 2 });
break;
}
} else {
layer.msg(data.responseJSON.message, { icon: 2 });
}
}
});
return false;
});
});
</script>