后端代码：
<?php
add_action( 'wp_enqueue_scripts', 'razzi_child_enqueue_scripts', 20 );
function razzi_child_enqueue_scripts() {
wp_enqueue_style( 'razzi-child-style', get_stylesheet_uri() );
}
add_action('wp_ajax_vote_post_lists','add_insert_posts');
add_action('wp_ajax_nopriv_vote_post_lists','add_insert_posts');
add_action('wp_ajax_vote_post_lists','select_insert_posts');
add_action('wp_ajax_nopriv_vote_post_lists','select_insert_posts');
add_action('wp_ajax_get_post_lists','get_insert_postses');
add_action('wp_ajax_nopriv_get_post_lists','get_insert_postses');
function add_insert_posts(){
if(isset($_POST['action']) && ($_POST['action'] == 'vote_post_lists')){
$post_json = json_decode(str_replace("\\","",$_POST['datas']));
$postarr = array(
'post_author' => 1, // (int)文章作者的ID，默认为当前登录的用户ID
'post_title' => $post_json->names, // (字符串)文章标题，默认为空.
'post_type' => 'yuyue', // (字符串)文章类型，默认为『post』.
);
$results = wp_insert_post($postarr);
update_post_meta($results,'timess',$post_json->datetimees);
update_post_meta($results,'timeuse',$post_json->titles);
wp_set_post_terms( $results, $post_json->serveType, 'categoryes', true );
wp_set_post_terms( $results, $post_json->jsName, 'jishi', true );
wp_set_post_terms( $results,$post_json->timeuse, 'worktimes', true );
$jishi = wp_get_post_terms( $results, 'jishi', true )[0];
$worktimes = wp_get_post_terms( $results, 'worktimes', true )[0];
$to = array(
'121180555@qq.com',
'koodiva1@gmail.com'
);
$subject = 'Appointment successful';
$body = "<p>Name：$post_json->names</p><p>technician：$jishi->name;</p><p>times：$post_json->datetimees $worktimes->name;</p>";
$headers = array('Content-Type: text/html; charset=UTF-8');
wp_mail( $to, $subject, $body, $headers );
$datas = array(
"code" => 1
);
echo json_encode($datas);
die;
}
}
function select_insert_posts(){
if(isset($_POST['action']) && ($_POST['action'] == 'vote_post_lists')){
$timeArr=get_terms('worktimes', array(
'orderby' => 'count',
'hide_empty' => 0
));
echo json_encode($timeArr);
die;
}
}
function get_insert_postses(){
if(isset($_POST['action']) && ($_POST['action'] == 'get_post_lists')){
$getdate = json_decode(str_replace("\\","",$_POST['datas']));
$timeArr=get_terms('worktimes', array(
'orderby' => 'count',
'hide_empty' => 0
));
$jishiId = $getdate->jishiId;
$datetimese = $getdate->datetimees;
$args = array(
'post_type' => 'yuyue',
'orderby'=>'date',
'order'=>'DESC',
'posts_per_page' => -1,
'tax_query' => array(
'relation' => 'OR',
array(
'taxonomy' => 'jishi',
'terms' => $jishiId
)
),
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'timess',
'value' => $datetimese
)
),
);
$result = new WP_Query($args);
foreach($timeArr as $a => $b){
$b->code = 2;
foreach($result->posts as $key){
$yuyuetimes = get_post_meta($key->ID,'timeuse',true);
if($b->name == $yuyuetimes){
array_splice($timeArr, $a, 1);
}
}
}
// print_r("<pre>");
// print_r($timeArr);
echo json_encode($timeArr);
die;
}
}前端代码：
<?php
get_header();
?>
<script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php';</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/vue.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/moment.js"></script>
<style>
.is-selected {
color: #1989FA;
}
body{
background:#b7948e1f;
}
.rili .selectses{
color: #333;
width: 100%;
height: 100%;
}
.rili .is-selected{
background-color: #b7948e1f!important;
}
.rili .noselectes:hover::after{
content: '-';
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
margin-top: 5px;
}
.rili .el-calendar-table thead th{
text-align: center!important;
background:#b7948e1f;
color:#333;
}
.rili .el-calendar-table tr td{
position: relative;
max-width: 30px!important;
}
.el-calendar-table .el-calendar-day{
height: 37px!important;
width: 37px;
margin: 0;
padding: 0!important;
}
.el-calendar-table .el-calendar-day p{
margin: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
margin-top: 12px;
}
.rili .el-calendar-table tr td .noselectes {
position: absolute;
background-color: #f1f1f1;
color:#c2cbd2;
width: 100%;
height: 100%;
line-height: 100%;
text-align: center;
left:0;
top:0;
padding-top: 21px;
margin:0;
}
.rili .el-calendar-table tr td .selectses{
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
padding: 0;
margin:0;
}
.rili .el-calendar-table .el-calendar-day:hover{
background: none!important;
}
.addtimes{
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin:0 20px 0 0;
}
.addtimes span{
border: 1px solid #eee;
padding: 8px 20px;
margin: 0 10px 10px 0;
display:block;
cursor: pointer;
}
.curtimes{
background-color: #007CBA;
color:#fff;
}
#continaes{
max-width:1140px;
margin:0 auto 80px auto;
background:#fff;
padding:30px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}
#continaes .typename{
display:flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
}
.el-calendar__body{
padding:0!important;
margin:0 0 20px 0;
}
.addtimes span.code2:after{
background:#b7948e1f!important;
color:#fff!important;
content:"可预约";
margin-left:5px;
color:red;
}
.typebox{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
background:#f1f1f1;
border-radius:5px;
padding:15px;
}
.typename{
flex:0 0 43%;
margin:10px 20px;
}
.typename select ,.typename input{
height: 42px;
line-height: 23px;
border:1px solid #eee;
border-radius:3px;
width:77%;
}
.submites button{
margin-left:10px;
width:120px;
height:45px;
line-height:45px;
}
.toprows{
margin-top:60px;
}
.buchongText{
display:flex;
flex-direction:column;
}
.buchongText span{
margin-bottom:15px;
}
.buchongText textarea{
width:100%;
max-height:100px;
margin-bottom:20px;
border:1px solid #EBEEF5;
}
.submites button{
padding-left:0;
margin-left:0;
}
@media screen and (max-width:767px) {
.addtimes{
display:flex;
flex-direction:row;
margin:0 0 20px 0;
}
.addtimes span{
flex:none;
width:46%;
display:block;
}
.typename select ,.typename input{
width:90%!important;
max-width:100%;
height:40px;
line-height:20px;
}
#continaes{
max-width:1440px;
margin: 50px auto;
padding:10px;
}
#continaes .typebox{
display:flex;
flex-direction:column!important;
justify-content: flex-start;
align-items: flex-start;
padding:10px;
}
#continaes .typename{
display:flex;
flex-direction:column!important;
justify-content: flex-start;
align-items: flex-start;
width:100%;
flex:none;
margin:0 20px;
}
/* .addtimes{
margin-left:10px;
} */
.submites button{
margin-left:10px;
width:120px;
height:45px;
line-height:45px;
}
}
</style>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div class="row toprows">
<div class="col-lg-10 offset-lg-1">
<div class="section-title mb-40 text-center">
<h2 class="tra-header txt-color-02">Our Services</h2>
<h3 class="h3-xl txt-color-01">Reservation system</h3>
</div>
</div>
</div>
<div id="continaes">
<div class="typebox">
<div class="typename">
Service type：<select name="fuwu" v-model="serveType" >
<option value="">请选择</option>
<?php
$categories = get_terms( 'categoryes', array(
'orderby' => 'count',
'hide_empty' => 0
) );
foreach($categories as $key){
?>
<option value="<?php echo $key->term_id;?>"><?php echo $key->name;?></option>
<?php
}
?>
</select>
</div>
<div class="typename">
Choose a technician：<select name="jishi" v-model="jsName" @change="changeJs($event.target.value)" >
<option value="">请选择</option>
<?php
$categories = get_terms( 'jishi', array(
'orderby' => 'count',
'hide_empty' => 0
) );
foreach($categories as $key){
?>
<option value="<?php echo $key->term_id;?>"><?php echo $key->name;?></option>
<?php
}
?>
</select>
</div>
<div class="typename" >
Phone：<input type="text" v-model="phone" name="phone" >
</div>
<div class="typename" >
Enter name：<input type="text" v-model="names" name="names" >
</div>
</div>
<div class="rili">
<el-calendar v-model="datatimesz">
<template
slot="dateCell"
slot-scope="{date, data}">
<p @click="changeDataarr(date,data)" :class="changeDatashow(date)">
<!-- {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}} -->
{{ data.day.split('-').slice(2).join('-') }}
</p>
</template>
</el-calendar>
</div>
<div class="addtimes">
<span v-for="items in lists" :key="items.term_id" @click="gettimes(items.name,items.term_id,items.code)" :class="curDatetimes(items.name,items.code)">{{items.name}}</span>
</div>
<div class="buchongText">
<!-- <span>Message:</span> -->
<textarea placeholder="Message" v-model="message"></textarea>
</div>
<div class="submites">
<button type="button" @click="submitDatas">提交预约</button>
</div>
</div>
<script>
new Vue({
el:'#continaes',
data(){
return {
datatimesz:new Date(),
times:'',
names:'',
serveType:'',
jsName:'',
titles:'',
lists:[],
code:'',
message:'',
phone:''
}
},
created(){
var _this = this;
var datas = {
jishiId:this.jsName,
datetimees:moment(this.datatimesz).format('YYYY-MM-DD')
}
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'get_post_lists',
'datas':JSON.stringify(datas)
},
success:function(result){
_this.lists=result;
console.log(result);
}
})
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
},
methods:{
changeDataarr(date,data){
var _this = this;
console.log(date.getDay());
// if(date > new Date()-24*60*60*1000 && date.getDay()!==0 && date.getDay()!==6){
if(date > new Date()-24*60*60*1000){
this.datatimesz = data.day;
var datas = {
jishiId:this.jsName,
datetimees:moment(this.datatimesz).format('YYYY-MM-DD')
}
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'get_post_lists',
'datas':JSON.stringify(datas)
},
success:function(result){
_this.lists =result;
console.log(_this.lists);
}
})
}else{
return
}
},
changeDatashow(obj){
return [
{
//周末除外
//['noselectes']: obj < new Date((new Date().getTime() - 24*60*60*1000)) || obj.getDay()==0 || obj.getDay() == 6
['noselectes']: obj < new Date((new Date().getTime() - 24*60*60*1000))
}
]
},
gettimes(obj,data,code){
console.log(obj);
console.log(code);
this.titles = obj;
this.code = code;
if(code == 1){
this.times = '';
}else{
this.times = data;
}
},
curDatetimes(obj,codes){
return [
{
'curtimes': obj == this.titles && codes == 2,
'code1':codes == 1,
'code2':codes == 2
}
]
},
submitDatas(){
var _this = this;
if(this.serveType == ''){
this.$message('请选择服务类型');
$("select[name=fuwu]").focus();
return
}
// if(this.jsName == ''){
// this.$message('请选择技师');
// $("select[name=jishi]").focus();
// return
// }
if(this.datatimesz == ''){
this.$message('请选择时间');
return
}
if(this.phone == ''){
this.$message('请输入phone');
$("input[name=phone]").focus();
return
}
if(this.names == ''){
this.$message('请输入姓名');
$("input[name=names]").focus();
return
}
if(this.lists == [] || this.lists.length == 0){
this.$message('该技师已经安排满了，换一位吧！');
return
}
let datas = {
names:this.names,
datetimees:moment(this.datatimesz).format('YYYY-MM-DD'),
timeuse:this.times,
serveType:this.serveType,
jsName:this.jsName,
titles:this.titles,
message:this.message,
phone:this.phone
}
if(confirm("确实要提交吗？")){
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'vote_post_lists',
'datas':JSON.stringify(datas)
},
success:function(result){
_this.$message("预约成功");
_this.datatimesz=new Date();
_this.times='';
_this.names='';
_this.serveType='';
_this.jsName='';
_this.titles='';
_this.message='';
_this.phone = '';
}
})
}else {
}
},
changeJs(obj){
var _this = this;
var datas = {
jishiId:obj,
datetimees:moment(this.datatimesz).format('YYYY-MM-DD')
}
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'get_post_lists',
'datas':JSON.stringify(datas)
},
success:function(result){
_this.lists =result;
console.log(_this.lists);
}
})
}
}
})
</script>
<?php
get_footer();
?>