File: /var/www/dk/wp-content/themes/food/page-creating_activity_player_page.php
<?php
/* Template Name: creating_activity_player_page */
//$tangDomain = "https://app.tangchinese.org/wp-content/themes/classapp/";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>creating_activity_player_page</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;
}
#app {
padding: 3px;
}
</style>
</head>
<body>
<div id="app">
<div style="height: 20px"></div>
<p>Id：</p>
<a-input v-model="id" disabled></a-input>
<div style="height: 20px"></div>
<p>Nickname：</p>
<a-input v-model="nickname" :disabled="textFieldDisabled"></a-input>
<div style="height: 20px"></div>
<p>简介：</p>
<a-input v-model="content" :disabled="textFieldDisabled"></a-input>
<div style="height: 20px"></div>
<p>Avatar：</p>
<a-input v-model="img_url" :disabled="textFieldDisabled"></a-input>
<div style="height: 20px"></div>
<p>Player Image：</p>
<img alt="img_url" style="width: 100%" :src="img_url"/>
<div style="height: 10px"></div>
<div class="clearfix">
<a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
<a-button style="width:200px;">
Select Image
<a-icon type="upload"/>
Select Image
</a-button>
</a-upload>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="uploadHandleChange"
>
{{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
</div>
<div style="height: 50px"></div>
<div style=" display: flex;
justify-content: center;
align-items: center;">
<!-- <a-button v-show="!has_customize" @click="submitForm" type="primary">Submit</a-button>-->
<!---->
<!-- <a-button @click="changeFormState" v-show="has_customize" :disabled="!textFieldDisabled">Edit Info</a-button>-->
<!-- <div style="width: 30px"></div>-->
<!-- <a-button @click="submitForm" v-show="has_customize" :disabled="textFieldDisabled" type="primary">Confirm-->
<!-- Submission-->
<!-- </a-button>-->
<a-button @click="submitForm" type="primary">Confirm Submission</a-button>
</div>
<div style="height: 50px"></div>
</div>
<script>
const app = {
el: "#app",
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: '',
img_id_has_uploaded: false,
radioValue: 0,
has_customize: false,
textFieldDisabled: false,
fileList: [],
uploading: false,
}
},
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;
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,
'declaration': this.content,
'status': 1, // this.status,
'debugmod': 0,
}
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("post_data => ", 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.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]
},
//相差日期
selectTime() {
var beginTime = $("#inTime").val();
var endTime = $("#outTime").val();
var date1 = new Date(beginTime)
var date2 = new Date(endTime)
console.log(Math.ceil((date2 - date1) / (86400 * 1000)) + "天")
},
formatDate(date, cut) {
var date = new Date(date);
var YY = date.getFullYear() + cut;
var MM =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + cut;
var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hh =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var mm =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return YY + MM + DD + " " + hh + mm + ss;
},
formatDate3(dateinit, format = 'yyyy-mm-dd hh:ii:ss') {
let format_str = format
if (dateinit === null || dateinit === 0 || dateinit === '' || dateinit === undefined) {
return ''
}
let date = new Date(dateinit)
//若改为let date = new Date(dateinit / 1000);则dateinit参数仅支持10位的时间戳
let date_str = {
'y+': date.getFullYear(),//年
'm+': date.getMonth() + 1, //月份
'd+': date.getDate(), //日
'h+': date.getHours(), //小时
'i+': date.getMinutes(), //分
's+': date.getSeconds() //秒
}
for (let item in date_str) {
if (new RegExp('(' + item + ')', 'i').test(format_str)) {
format_str = format_str.replace(
RegExp.$1,
date_str[item].toString().length < 2 ? '0' + date_str[item] : date_str[item]
)
}
}
return format_str
},
// -----------------------------------
// ©著作权归作者所有：来自51CTO博客作者a772304419的原创作品，请联系作者获取转载授权，否则将追究法律责任
// js日期格式化函数示例：将日期时间格式化成yyyy-mm-dd hh:ii:ss格式
// https://blog.51cto.com/zhangxueliang/5307568
/*
时间格式化
将 2019-01-01T12:00:00.000+0000 格式化成类似 2019-01-01 12:00:00
可以指定日期和时间分隔符
@param datetime 国际化日期格式
*/
formatWithSeperator(datetime, dateSeprator, timeSeprator) {
if (datetime != null) {
const dateMat = new Date(datetime)
const year = dateMat.getFullYear()
const month = dateMat.getMonth() + 1
const day = dateMat.getDate()
const hh = dateMat.getHours()
const mm = dateMat.getMinutes()
const ss = dateMat.getSeconds()
const timeFormat = year + dateSeprator + month + dateSeprator + day + ' ' + hh + timeSeprator + mm + timeSeprator + ss
return timeFormat
}
},
// 作者：Eirmood
// 链接：https://www.jianshu.com/p/4aef8a993013
// 来源：简书
// 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
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);
}
,
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;
}
,
uploadHandleChange() {
// const {fileList} = this;
// const formData = new FormData();
// fileList.forEach(file => {
// formData.append('files[]', file);
// });
this.uploading = true;
// let file = e.target.files[0]
let file = this.fileList[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) {
this.img_id = model.id;
this.img_url = model.url;
this.uploading = false;
this.img_id_has_uploaded = true;
antd.notification.success({
message: 'upload successfully.',
});
} else {
antd.notification.error({
message: 'upload failed.',
});
}
})
.catch(error => {
console.log(error)
antd.notification.error({
message: 'upload failed.',
});
})
}
,
},
}
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>