File: /var/www/dk/wp-content/themes/food/page-creating_competition_player_page.php
<?php
/* Template Name: creating_competition_player_page */
get_header('competition');
//if( !is_page('about') && !is_user_logged_in() && !is_category( '7' ) && !in_category( '7' ) ){
if (!is_user_logged_in()) {
//auth_redirect(); //跳转到登录页面
// $HOMEURL = esc_url(home_url('login')) ;
$HOMEURL = esc_url(home_url('/'));
echo "<script>setTimeout(window.location='" . $HOMEURL . "',50)</script>";
exit();
}
$vueVersion = time();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比賽用戶</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/vue.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/vue.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/axios.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/qs.js"></script>
<link href="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/antd.min.css"
rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/moment.min.js"></script>
<style>
img {
max-width: 100%;
height: auto;
}
.form_section {
border: 1px solid #E6E6E6;
border-radius: 2px;
}
.title_div {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 20px;
}
.form_section .form_section_title {
margin-top: 20px;
margin-bottom: 20px;
height: 24px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 41px;
color: #333333;
}
</style>
</head>
<body>
<div id="app">
<yq-header :search_text="submit_info.search_text" @search="hdSearch"></yq-header>
<section class="text-gray-600 body-font relative ">
<div class="container px-1 pb-2 mx-auto form_section">
<div class=" md:w-2/3 mx-auto">
<button v-on:click="goBackPage()" class="mt-[0.1rem]"><img style="width: 32px;" src="<?php showFoodAppPath('/img/arrow.png') ?>"/></button>
<div class="flex flex-col text-center w-full title_div pb-1">
<h1 class="text-[0.2rem] font-bold title-font text-gray-900 form_section_title">比賽用戶</h1>
<!-- <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>-->
</div>
<div class="flex flex-wrap ">
<div class=" w-2/3">
<div class="relative">
<label for="name" class="leading-1 text-[0.2rem] font-bold text-gray-600">支持wmv、avi、mpg、mp4、rmvb、mov、mkv、vob格式文件
建議上傳mp4格式文件，轉碼速度會更快 需≤200M</label>
<div style="height: 10px"></div>
<video width="640" height="480" controls v-if="this.video_url != ''" :src="video_url" >
<!-- <source :src="video_url" type="video/mp4" :poster="img_url">-->
您的浏览器不支持 HTML5 video 标签。
</video>
<div style="height: 10px"></div>
<div>
<a-upload :file-list="videoFileList" :remove="handleRemoveVideo"
:before-upload="beforeUploadVideo">
<img v-if="this.video_url == ''" style="width: 320px"
src="<?php echo get_template_directory_uri(); ?>/food-app/img/mmc/video_upload.png"
class="mb-1"
/>
<a-button style="width:200px;">
Select Video
<a-icon type="upload"/>
</a-button>
</a-upload>
<a-button
type="danger"
:disabled="videoFileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="uploadHandleChangeVideo"
>
{{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
</div>
</div>
</div>
<div class=" w-2/3 text-[0.2rem] mt-[0.4rem]">
<div class="relative">
<label for="img_url" class=" font-bold text-gray-600">封面：JPG、JPEG、PNG格式圖片需≤10M</label>
<div class="py-[0.2rem] hidden">
<!-- <label for="start_date" class="leading-7 text-sm text-gray-600">Avatar：</label>-->
<input type="text" v-model="img_url"
class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 outline-none text-gray-700 px-1 transition-colors duration-200 ease-in-out">
</div>
<img class="my-[0.2rem]" alt="img_url" style="width: 350px" :src="img_url"/>
<div style="height: 10px"></div>
<div>
<a-upload :file-list="fileList" :remove="handleRemove"
:before-upload="beforeUpload">
<a-button style="width:200px;">
Select Image
<a-icon type="upload"/>
</a-button>
</a-upload>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="uploadHandleChangeImg"
>
{{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
</div>
</div>
</div>
<!-- <div class="p-2 w-1/3 relative " style="height: 350px">-->
<!-- <div class="absolute bottom-0 left-0 ">-->
<!-- -->
<!-- </div>-->
<!-- </div>-->
<div class=" w-1/2 text-[0.2rem] mt-[0.3rem]">
<div class="relative">
<label for="id" class="text-[0.2rem] font-bold text-gray-600">ID</label>
<input type="text" name="id" v-model="id" disabled
class="w-full bg-gray-100 bg-opacity-50 rounded-sm border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 outline-none text-gray-700 py-[0.1rem] px-1 transition-colors duration-200 ease-in-out">
</div>
</div>
<div class=" w-1/2"></div>
<div class=" w-full text-[0.2rem] mt-[0.3rem]">
<div class="relative">
<label for="nickname" class="font-bold text-gray-600">标题：</label>
<input type="text" v-model="nickname"
class="w-full bg-gray-100 bg-opacity-50 rounded-sm border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 outline-none text-gray-700 py-[0.1rem] px-1 transition-colors duration-200 ease-in-out">
</div>
</div>
<div class="text-[0.2rem] mt-[0.3rem] w-full">
<div class="relative">
<label for="content" class="font-bold text-gray-600">简介：</label>
<textarea style="height: 200px" v-model="content"
class="w-full bg-gray-100 bg-opacity-50 rounded-sm border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-64 outline-none text-gray-700 py-[0.1rem] px-1 resize-none leading-1 transition-colors duration-200 ease-in-out"></textarea>
</div>
</div>
<!-- <div class="p-2 w-1/2">-->
<!-- <div class="relative">-->
<!-- <label for="email" class="leading-7 text-sm text-gray-600">Status：</label>-->
<!-- <a-radio-group class="form-radio" v-model="radioValue" @change="onChange" :disabled="textFieldDisabled">-->
<!-- <a-radio :value="0">-->
<!-- 下架-->
<!-- </a-radio>-->
<!-- <a-radio :value="1">-->
<!-- 上架-->
<!-- </a-radio>-->
<!-- </a-radio-group>-->
<!-- </div>-->
<!-- </div>-->
<div class=" w-full mt-1">
<button @click="submitForm" style="padding-left: 10px;padding-right: 10px"
class=" inline-flex text-white bg-main-color border-0 py-1 px-1 focus:outline-none hover:bg-indigo-600 rounded-sm text-[0.2rem]">
Submission
</button>
</div>
<!-- <div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 text-center">-->
<!-- <a class="text-indigo-500">example@email.com</a>-->
<!-- <p class="leading-normal my-5">49 Smith St.-->
<!-- <br>Saint Cloud, MN 56301-->
<!-- </p>-->
<!-- <span class="inline-flex">-->
<!-- <a class="text-gray-500">-->
<!-- <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">-->
<!-- <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="ml-4 text-gray-500">-->
<!-- <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">-->
<!-- <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="ml-4 text-gray-500">-->
<!-- <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">-->
<!-- <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>-->
<!-- <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="ml-4 text-gray-500">-->
<!-- <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">-->
<!-- <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </span>-->
<!-- </div>-->
</div>
</div>
</div>
</section>
<div style="height: 50px"></div>
<yq-footer :year_text="year_text"></yq-footer>
</div>
<script>
const local_url = '<?php echo $local_url ?>'
const domain = '<?php echo esc_url(home_url('/')); ?>'
const app = {
el: "#app",
components: {
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header-competition.vue?v=' . $vueVersion) ?>'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer-competition.vue?v=' . $vueVersion) ?>'),
},
data() {
return {
token: '',
action: 'update',
aid: '0',
id: '0',
avatar: "/images/17.png",
// declaration: "很开心和大家见面，我喜欢书法，画画，希望大家能够喜欢我！"
nickname: "",
content: "",
start_date: "0000-00-00 00:00:00",
end_date: "0000-00-00 00:00:00",
score: "0",
status: "1",
user_id: "0",
user_name: "",
img_id: '0',
img_url: local_url + '/img/mmc/img_cover.png',
img_id_has_uploaded: false,
video_file_id: '0',
video_url: local_url + '/img/mmc/video_upload.png',
video_file_id_has_uploaded: false,
radioValue: 0,
has_customize: false,
textFieldDisabled: false,
fileList: [],
videoFileList: [],
uploading: false,
//page
year_text: <?php echo date("Y") ?>,
submit_info: {
price_pre: '0',
price_next: '0',
order_name: '日期',
//filter_cate: [<?php //echo $initCate; ?>//],
search_text: ''
},
}
},
computed: {
//自定义请求头
headers() {
return {
'Authorization': 'Bearer ' + this.token,
}
}
},
mounted() {
// let id = this.$route.query.id;
// this.type = this.getQueryString("type"); //参数名1
this.id = this.getQueryString("id"); //参数名1
console.log("id => ", this.id);
this.aid = this.getQueryString("aid"); //参数名1
console.log("aid => ", this.aid);
if (window.localStorage) {
console.log("This browser supports localStorage");
// alert('This browser supports localStorage');
} else {
alert('This browser does NOT support localStorage');
}
// localStorage.user_id = 3; // this.user_id;
this.user_id = localStorage.user_id;
// this.user_id = this.getQueryString("user_id");
console.log('user_id => ' + this.user_id);
this.user_name = localStorage.user_name;
console.log('user_name => ' + this.user_name);
// this.token = this.getQueryString("token");
// console.log('token => ' + this.token);
this.action = this.getQueryString("action");
console.log('action => ' + this.action);
if (this.action === 'update') {
this.initForm();
}
},
methods: {
changeFormState() {
this.textFieldDisabled = !this.textFieldDisabled;
},
submitForm() {
// this.status = this.radioValue
let up_img_id = this.img_id_has_uploaded ? this.img_id : null;
const up_video_id = this.video_file_id_has_uploaded ? this.video_file_id : null;
let formData = {
'module': 'ranking',
'action': 'index',
'a': 'setActivityPlayer',
'func_action': this.action,
'aid': this.aid,
'id': this.id,
'nickname': this.nickname,
'img_id': up_img_id,
'avatar': this.img_url,
'video_file_id': up_video_id,
'video_url': this.video_url,
'declaration': this.content,
'status': 1, // this.status,
'debugmod': 0,
}
if (this.action === 'add') {
formData['user_id'] = this.user_id;
}
console.log(' formData => ');
console.log(formData);
axios({
method: 'post',
// headers: {
// 'Authorization': 'Bearer ' + this.token,
// },
url: '/api/',
data: Qs.stringify(formData)
})
.then((response) => {
// console.log(response);
let data = response.data
if (data.rc === 0) {
if (this.action === 'add') {
// let backData = data.data;
this.id = data.id;
console.log('add done id =>' + this.id);
}
this.action = 'update';
antd.notification.success({
message: 'Submit Success',
});
this.initForm()
}
})
.catch(function (error) {
console.log(error);
});
},
initForm() {
axios({
method: 'post',
// url: '//dk.smart1space.site/api',
url: '/api',
data: Qs.stringify({
'module': 'ranking',
'action': 'index',
'a': 'playerlist',
aid: this.aid,
id: this.id,
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("current_player => ", data.data[0]);
var post_data = data.data[0];
this.id = post_data.id;
this.nickname = post_data.nickname;
this.content = post_data.declaration;
this.avatar = post_data.avatar;
this.img_id = post_data.img_id;
this.img_url = post_data.avatar;
this.video_file_id = post_data.video_file_id;
this.video_url = post_data.video_url;
// this.status = post_data.status;
//
// this.radioValue = parseInt(this.status);
// console.log("status => ", this.status);
// this.img1_id = post_data.post.img1Id;
// // this.img1_url = post_data.post.img1_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);
});
},
// 数据库格式日期 加T 2017-06-01 08:30:06 -> 2017-06-01T08:30:06
date2Input(inDate) {
let start_date_arr = inDate.split(" ");
return start_date_arr[0] + 'T' + start_date_arr[1]
},
// input 转 数据库格式日期 去T 2017-06-01T08:30:06 -> 2017-06-01 08:30:06
date2Db(inDate) {
let start_date_arr = inDate.split("T");
return start_date_arr[0] + ' ' + start_date_arr[1]
},
getQueryString(name) {
let reg = `(^|&)${name}=([^&]*)(&|$)`
let r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
,
onChange(e) {
console.log('radio checked', e.target.value);
},
beforeUploadVideo(file) {
// console.log('beforeUpload', file);
const isJpgOrPng = file.type === 'video/mp4';
if (!isJpgOrPng) {
this.$message.error('You can only upload Mp4 file!');
}
const isLt8M = file.size / 1024 / 1024 < 250;
if (!isLt8M) {
this.$message.error('Image must smaller than 250MB!');
}
// return isJpgOrPng && isLt8M;
this.videoFileList = [file]; // [...this.videoFileList, file];
// return false;
return isJpgOrPng && isLt8M;
},
handleRemoveVideo(file) {
const index = this.videoFileList.indexOf(file);
const newFileList = this.videoFileList.slice();
newFileList.splice(index, 1);
this.videoFileList = newFileList;
},
///视频文件上传
uploadHandleChangeVideo() {
this.uploadHandleChange(true);
},
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!');
}
const isLt8M = file.size / 1024 / 1024 < 8;
if (!isLt8M) {
this.$message.error('Image must smaller than 8MB!');
}
// return isJpgOrPng && isLt8M;
this.fileList = [...this.fileList, file];
// return false;
return isJpgOrPng && isLt8M;
}
,
handleRemove(file) {
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList;
},
///圖片文件上传
uploadHandleChangeImg() {
this.uploadHandleChange(false);
},
uploadHandleChange(isVideo = false) {
// const {fileList} = this;
// const formData = new FormData();
// fileList.forEach(file => {
// formData.append('files[]', file);
// });
this.uploading = true;
// let file = e.target.files[0]
var file = this.fileList[0]
if (isVideo) {
file = this.videoFileList[0];
}
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('images', file) // 通过append向form对象添加数据
param.append('user_id', this.user_id) // 添加form表单中其他数据
param.append('img_upload_verify', 'imgE5FCDG3HQA4B1NOPIJ2RSTUV67KL') // 添加form表单中其他数据
// console.log(param.get('tang_file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Authorization': 'Bearer ' + this.token}
}
// axios.post('https://app.tangchinese.org/api-app-data?module=upload&action=upload_app', param, config)
axios.post('<?php echo $domain_url; ?>' + '/wp_upload_img', param, config)
.then(response => {
// console.log(response)
console.log(response.data)
var model = response.data;
if (model.rc == 0) {
if (isVideo) {
this.video_file_id = model.id;
this.video_url = model.url;
this.video_file_id_has_uploaded = true;
} else {
this.img_id = model.id;
this.img_url = model.url;
this.img_id_has_uploaded = true;
}
this.uploading = false;
antd.notification.success({
message: 'upload successfully.',
});
} else {
antd.notification.error({
message: 'upload failed.',
});
}
})
.catch(error => {
console.log(error)
antd.notification.error({
message: 'upload failed.',
});
})
}
,
///page
searchSubmit() {
this.page_num = 1
this.get_product()
},
hdSearch(e) {
this.submit_info.search_text = e
this.searchSubmit()
},
goBackPage() {
console.log('goBackPage')
// history.back();
window.open('/competition_index/?aid=' + this.aid, '_self');
}
},
}
function init() {
new Vue(app)
}
</script>
<script src="<?php echo get_template_directory_uri(); ?>/food-app/ranking/creating_page_js/antd.min.js"
onload="init()"></script>
<!--<script crossorigin="anonymous" integrity="sha384-drFt50yMKg7m1EtWl1ZjDhAePoX+5g30w8Jkc8wnKfEx3GW1qZs2p5iAn03WbRIb" src="https://lib.baomitu.com/antd/1.11.6/antd.js" onload="init()"></script>-->
</body>
</html>
<?php get_footer('food'); ?>