File: /var/www/dk/wp-content/themes/food/food-app/page-ranking_index.php
<?php
//ini_set('display_errors', 1); //错误信息
//ini_set('display_startup_errors', 1); //php启动错误信息
//error_reporting(-1);
/* Template Name: ranking_index */
get_header('food');
//show_php_error();
$user_info = get_login_user();
//print_r($user_info);
$user_id = $user_info['ID'];
//print_r($user_id);
$aid = CheckFunc::checkInputInt2('aid');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>投票</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<meta name="format-detection" content="telephone=NO">
<meta name="apple-touch-fullscreen" content="YES"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="HandheldFriendly" content="True">
<link rel="stylesheet" type="text/css" href="<?php showFoodAppPath('ranking/') ?>css/css.css"/>
<link rel="stylesheet" type="text/css" href="<?php showFoodAppPath('ranking/') ?>css/index.css"/>
<script src="<?php showFoodAppPath('ranking/') ?>js/vue.global.js"></script>
<script src="<?php showFoodAppPath('ranking/') ?>js/axios.min.js"></script>
<script>
(function (win, doc) {
function change() {
doc.documentElement.style.fontSize = 20 / 320 * doc.documentElement.clientWidth + 'px';
}
change();
win.addEventListener('resize', change, false);
})(window, document);
</script>
<style>
#topBanner {
width: 100%;
height: 400px;
background: linear-gradient(315deg, #00839B 0%, #1ABFBA 100%);
opacity: 1;
}
@media screen and (min-width:640px ) {
.Exhibition_block {
width: 28%;
height: 5rem;
font-size: 20px;
float: left;
background: #fff;
border: 1px solid #ebebeb;
margin: 4% 2% 0 3%;
}
.E_top {
width: 100%;
height: 45%;
margin: 0.1rem 0;
}
.E_bot p {
height: 0.5rem;
text-align: center;
font-size: 0.2rem;
line-height: 0.5rem;
font-weight: 600;
}
.E_bot p:nth-child(2) {
height: 1rem;
text-align: center;
font-size: 0.2rem;
line-height: 0.35rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /*设置对齐模式*/
-webkit-line-clamp: 3; /*设置多行的行数，示例为2行*/
}
.E_bot .sub {
width: 100%;
height: 0.6rem;
line-height: 0.6rem;
font-size: 0.25rem;
margin: 0.1rem auto;
border-radius: 3px;
background: -webkit-linear-gradient(left, orangered, orange);
background: -o-linear-gradient(right, orangered, orange);
background: -moz-linear-gradient(right, orangered, orange);
background: linear-gradient(to right, orangered, orange);
color: #fffeff;
}
.wrap_toupiao {
width: 75%;
margin: 0.2rem auto;
overflow: hidden;
text-align: center;
padding-left: 2.5%;
padding-right: 2.5%;
position: absolute;
bottom: -15px;
}
}
@media screen and (min-width:1024px ) {
#main {
width: 100%;
height: 83vh;
box-sizing: border-box;
position: fixed;
bottom: 0;
overflow: hidden;
overflow-y: scroll;
}
.Exhibition_block {
width: 20%;
height: 5rem;
font-size: 20px;
float: left;
background: #fff;
border: 1px solid #ebebeb;
margin: 4% 2% 0 3%;
}
.E_top {
width: 100%;
height: 45%;
margin: 0.1rem 0;
}
.E_bot p {
height: 0.5rem;
text-align: center;
font-size: 0.2rem;
line-height: 0.5rem;
font-weight: 600;
}
.E_bot p:nth-child(2) {
height: 1rem;
text-align: center;
font-size: 0.2rem;
line-height: 0.35rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /*设置对齐模式*/
-webkit-line-clamp: 3; /*设置多行的行数，示例为2行*/
}
.E_bot .sub {
width: 100%;
height: 0.6rem;
line-height: 0.6rem;
font-size: 0.25rem;
margin: 0.1rem auto;
border-radius: 3px;
background: -webkit-linear-gradient(left, orangered, orange);
background: -o-linear-gradient(right, orangered, orange);
background: -moz-linear-gradient(right, orangered, orange);
background: linear-gradient(to right, orangered, orange);
color: #fffeff;
}
.xiangqing .table {
width: 65%;
margin: 0 auto;
/*height: 19rem;*/
color: #555;
background-size: contain;
padding: 0.2rem 0;
line-height: 1.7rem;
color: #da2423;
font-weight: both;
margin-top: 0.5rem;
background: #fff;
position: relative;
border-radius: 3px;
}
.xiangqing .zuopin_title {
width: 60%;
height: 0.5rem;
line-height: 0.5rem;
margin: 0 auto;
text-align: center;
font-size: 0.4rem;
color: #222;
overflow: hidden;
}
.xiangqing .wrap_head {
width: 85%;
min-height: 3rem;
display: flex;
margin: 0.5rem auto;
}
.xiangqing .wrap_name {
height: auto;
line-height: 0.4rem;
display: block;
font-size: 0.3rem;
padding-left: 5%;
color: #222;
}
.sub_one {
width: 40%;
height: 0.8rem;
line-height: 0.8rem;
font-size: 0.4rem;
margin-left: 30px;
border-radius: 3px;
float: right;
}
}
</style>
</head>
<body>
<!-- <div id="topBanner" class="container mx-auto"></div>-->
<div id="app">
<div class="logo">
<div class="logo_but hd" v-on:click="showActive()">活动规则</div>
<div class="logo_but ph" v-on:click="rankingList()">排行榜</div>
<div class="logo_but ph" v-on:click="go_creating_activity_player_page()">參加比賽</div>
</div>
<div class="center" id="main">
<ul class="Exhibition">
<li v-for="(item, index) in players" :key="index" class="Exhibition_block">
<div class="E_center">
<div class="E_top" v-on:click="playerInfo(item.id)"><img :src="item.avatar"></div>
<div class="E_bot">
<p>{{ item.ref }}号：{{ item.nickname }} <span>{{ item.score }}</span>票</p>
<p >{{ item.declaration }}</p>
<P class="sub ba_color" v-on:click="vote(item.id)">为TA投票</p>
</div>
</div>
</li>
</ul>
</div>
<!-- 遮罩层 -->
<div id='mask'></div>
<!-- 透明遮罩层 -->
<div id='masks'></div>
<!-- 详情弹出层 -->
<div class="xiangqing" v-show="xqShow">
<div class="table">
<div class="table_scroll">
<div class="zuopin_title">{{ player.ref }}号</div>
<div class="wrap_head">
<div class="wrap_pic">
<img :src="player.avatar"/>
</div>
<div class="wrap_right">
<span class="wrap_name">昵称：<span>{{ player.nickname }}</span></span>
<span class="wrap_name wrap_name1">
<label>参赛宣言：</label>
<span>{{ player.declaration }}</span>
</span>
</div>
</div>
<div class="wrap_toupiao">
<div class="sub_one" v-on:click="closePlayerInfo()">关闭</div>
<div class="sub_one" v-on:click="editPlayerInfo(player.id)">编辑</div>
</div>
</div>
</div>
</div>
<!-- 排行 -->
<div class="paihang" v-show="rankingShow">
<div class="table">
<div class="wrap_paiming">
<img src="<?php showFoodAppPath('ranking/') ?>images/pic_ranking.png"/>
</div>
<ul class="table-tab">
<li class="table-wrap table_title">
<div class="table-left">排名</div>
<div class="table-right">姓名</div>
<div class="table-right">票数</div>
</li>
<li class="table-wrap" v-for="(item, index) in ranking" :key="index">
<div class="">{{ index + 1 }}</div>
<div class="">{{ item.nickname }}</div>
<div class="">{{ item.score }}</div>
</li>
</ul>
<div class="wrap_toupiao">
<div class="sub_one" v-on:click="closeRanking()">关闭</div>
</div>
</div>
</div>
<!-- 活动规则 -->
<div class="actives" v-show="activeShow">
<div class="center">
<div class="Title">
<p>活动规则</p>
</div>
<div class="active"></div>
<div class="text-active">{{ content }}</div>
<!-- <div class="text-active">1.选手可分享好友进行投票，每人每天每次可投1票；</div>-->
<!-- <div class="text-active">-->
<!-- 2.文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字-->
<!-- </div>-->
<!-- <div class="text-active">-->
<!-- 3.文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字-->
<!-- </div>-->
<div class="wrap_toupiao">
<div class="sub_one" v-on:click="closeActive()">关闭</div>
</div>
</div>
</div>
</div>
</body>
<script>
const {createApp} = Vue
createApp({
data() {
return {
aid: <?php echo $aid; ?>, //活动ID
players: [], //选手数据
ranking: [], //排行榜数据
xqShow: false, //选手详情弹出框
player: {}, //选手详情
activeShow: false, //规则弹出框
rankingShow: false, //排行榜弹出框
content:''
}
},
methods: {
initForm() {
axios({
method: 'post',
// url: '//dk.smart1space.site/api',
url: '/api',
data: Qs.stringify({
'module': 'ranking',
'action': 'index',
'a': 'getActivityListInfoByPage',
id: this.aid,
pageNum: 1,
pageSize: 1,
})
// , headers: {
// 'Authorization': 'Bearer ' + this.token,
// }
})
.then((response) => {
// console.log(response);
let data = response.data
// console.log(data);
console.log("data.rc => ", data.rc);
if (data.rc === 0) {
// console.log("post_data => ", data.data[0]);
var post_data = data.data[0];
this.id = post_data.id;
this.name = post_data.name;
this.content = post_data.content;
// console.log("post_content => ", this.post_content);
// var d = new Date(post_data.live_time * 1000);
// console.log("this.live_time date => ", d);
//
// let live_time = this.formatDate3(d, 'yyyy-mm-dd hh:ii:ss');
// console.log(live_time); // 2016-07-06 16:19
let start_date_db = post_data.start_date;
let start_date_arr = start_date_db.split(" ");
this.start_date = start_date_arr[0] + 'T' + start_date_arr[1]
// console.log("start_date => ", this.start_date);
// str="jpg|bmp|gif|ico|png";
//'2017-06-01T08:30:06'
this.end_date = this.date2Input(post_data.end_date);// post_data.end_date;
// console.log("end_date => ", this.end_date);
this.status = post_data.status;
this.radioValue = parseInt(this.status);
// console.log("status => ", this.status);
this.img_id = post_data.img_id;
this.img_url = post_data.img_url;
// var img_url = post_data.post.img1_url;
// if (img_url.startsWith('http')) {
// console.log("字符串是以http开头的！");
//
// this.img1_url = img_url.replace("http://", "https://")
// } else {
// this.img1_url = img_url;
// }
this.has_customize = true;
this.textFieldDisabled = false;
}
})
.catch(function (error) {
console.log(error);
});
},
getPlayers() {
//获取参赛选手
axios({
method: 'post',
headers: {'content-type': 'application/x-www-form-urlencoded'},
// url: '/api/player/list',
// url: 'https://store.jmwebseo.cn/no_auth_server',
url: '/api',
data: {
'module': 'ranking',
action: 'index',
'a': 'playerlist',
aid: this.aid,
}
}).then((res) => {
// console.log('res => ', res.data.data);
if (res.data.rc == 0) {
// let avatarDomain = 'https://store.jmwebseo.cn/gin-ranking-html/';
$outArr = [];
// forEach(res.data.data as item){
fLen = res.data.data.length;
$dataArr = res.data.data;
for (i = 0; i < fLen; i++) {
var newItem = $dataArr[i];
// console.log('newItem => ', newItem);
// newItem.avatar = avatarDomain + newItem.avatar;
$outArr.push(newItem);
}
console.log('$outArr => ', $outArr);
this.players = $outArr
// this.players = res.data.data
}
})
},
vote(id) {
//投票
var uid = <?php echo $user_id; ?> // localStorage.getItem('uid')
if (uid == null) {
alert("请先登录")
// window.location.href = "https://store.jmwebseo.cn/gin-ranking-html/login.html";
return false;
}
if (uid == "") {
alert("请先登录")
// window.location.href = "https://store.jmwebseo.cn/gin-ranking-html/login.html";
return false;
}
if (id == "") {
alert("请选择要操作的选手")
return false;
}
console.log('uid => ', uid);
axios({
method: 'post',
headers: {'content-type': 'application/x-www-form-urlencoded'},
// url: '/api/vote/add',
url: '/api',
// url: 'https://store.jmwebseo.cn/no_auth_server',
data: {
'module': 'ranking',
'action': 'index',
'a': 'UpdatePlayerScore',
'activity_id': '1',
'user_id': uid,
'player_id': id,
// userId: uid,
// playerId: id,
}
}).then((res) => {
if (res.data.rc == 0) {
this.getPlayers()
alert("投票成功")
} else {
alert("投票失败，" + res.data.msg)
return false;
}
})
},
playerInfo(id) {
//获取选手详情
this.xqShow = true
that = this
this.players.forEach(function (e) {
if (e.id == id) {
that.player = e
}
})
},
rankingList() {
//获取排行榜
axios({
method: 'post',
headers: {'content-type': 'application/x-www-form-urlencoded'},
// url: 'https://store.jmwebseo.cn/no_auth_server',
url: '/api/',
// url: '/api/ranking',
data: {
'module': 'ranking',
'action': 'index',
'a': 'playerlist',
aid: this.aid,
}
}).then((res) => {
console.log('res.data => ', res.data);
if (res.data.rc == 0) {
this.ranking = res.data.data
this.rankingShow = true
}
})
},
closePlayerInfo() {
//关闭详情
this.xqShow = false
this.player = {}
},
editPlayerInfo(id) {
console.log('editPlayerInfo id')
console.log(id)
//编辑详情
window.open('/creating_activity_player_page/?action=update&aid=<?php echo $aid;?>&id=' + id, '_blank');
this.xqShow = false
this.player = {}
},
showActive() {
//打开规则
this.activeShow = true
},
closeActive() {
//关闭规则
this.activeShow = false
},
closeRanking() {
//关闭排行榜
this.rankingShow = false
},
go_creating_activity_player_page() {
//去创建选手页面
window.open('/creating_activity_player_page/?action=add&id=0&aid='+'<?php echo $aid; ?>', '_blank');
}
},
mounted() {
this.aid = '<?php echo $aid;?>'
this.initForm()
//默认加载选手列表
this.getPlayers()
}
}).mount('#app')
</script>
</html>
<?php get_footer('food'); ?>