<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<script src="../../assets/js/fontsize.js"></script>
<link rel="stylesheet" href="../../assets/css/api.css"/>
<link rel="stylesheet" href="../../assets/css/index.css">
<link rel="stylesheet" href="../../assets/css/doc.css">
<link rel="stylesheet" href="../../assets/icon/iconfont.css">
<style>
body {
background-color: #f2f2f2;
}
.tri {
width: 0.3rem;
margin-right: 0.1rem;
}
.doc_room {
display: flex;
align-items: center;
}
.doc_right .iconfont {
font-size: 12px;
color: #C2C1C3;
border: 0;
padding: 0 0 0 0.1rem;
}
.doc_room .icon-shouji1 {
margin-right: 0.1rem;
}
.swiper_item {
/*padding: 0.28rem 0.25rem;*/
}
</style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
<div class="swiper_item pack">
<div class="swiper_item_img"><img :src="goods.icon" alt=""></div>
<div class="swiper_item_right">
<div class="swiper_item_title">{{goods.post_title}}</div>
<div class="swiper_item_content">{{goods.other_title}}</div>
<div class="swiper_item_type">
<div class="swiper_item_type1" v-for="(item,index) in goods.tag" v-if="goods.tag">
<div class="icon_img">
<img :src="item.url" alt=""/>
</div>
<span>{{item.text}}</span>
</div>
<div class="swiper_item_type1" v-else>暂无信息</div>
</div>
<div class="swiper_item_money">￥{{goods.good_price?goods.good_price:0}}</div>
</div>
</div>
<div class="doc_item" @click="set_meal" v-if="cid==7||cid==5||cid==10">
<div class="doc_room"><span class="iconfont icon-taocan"></span><span>预约套餐</span></div>
<div class="doc_right">{{meal?meal:'选择套餐>'}}</div>
</div>
<div v-else>
<div class="doc_item" @click="dateSelect">
<div class="doc_room"><span class="iconfont icon-taocan"></span><span>预约参观</span></div>
<div class="doc_right" v-if="date_info">{{date_info}}</div>
<span v-else class="doc_right">请选择时间 <span class="iconfont icon-xiangyou"></span></span>
</div>
<div class="doc_item" @click="set_rank">
<div class="doc_room"><img src="../../assets/image/tri.png" alt="" class="tri"><span>选择入住</span></div>
<div class="doc_right" v-if="room">{{room}}</div>
<div class="doc_right" v-else>选择入住等级 <span class="iconfont icon-xiangyou"></span></div>
</div>
</div>
<div class="doc_form">
<div class="doc_form_title">联系人信息</div>
<div class="doc_item ">
<div class="doc_room"><span class="iconfont icon-yonghu"></span><span>姓名</span></div>
<div class="doc_right"><input type="text" placeholder="请输入姓名" v-model="name"></div>
</div>
<div class="doc_item ">
<div class="doc_room"><span class="iconfont icon-shouji1"></span><span>手机号</span></div>
<div class="doc_right"><input type="number" maxlength="11" placeholder="请输入联系电话" v-model="tel"
@focus="input_focus"></div>
</div>
</div>
<div class="doc_item ">
<div class="tips"><span class="iconfont icon-lababofang"></span><span>请正确选择和填写信息，以便后续提供更好品质服务。</span></div>
</div>
<footer class="doc_footer" id="footer" :style="{position: pos}">
<div class="doc_left"><span class="rmb">￥</span><span
class="doc_price">{{total}}</span><span
class="doc_qi">起</span>
</div>
<div class="doc_right"><span class="iconfont icon-kefu" @click="openSever"></span>
<span class="doc_appointment" @click="openDate" v-if="date_info">去 预 约</span>
<span class="doc_appointment" @click="openOrder" v-else>去 预 约</span>
</div>
</footer>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
meal: '选择套餐',
total: 0,
year: '',
month: '',
day: '',
hour: '',
minute: '',
date_info: '',
id: '',
cid: '',
room: '',
attribute: '',
goods: [],
real_price: '',
attribute_type: '',
name: '',
tel: '',
order_id: '',
user_info: [],
unit: '',
pos: 'fixed'
},
created: function () {
this.id = localStorage.getItem('id');
this.cid = localStorage.getItem('cid');
this.applyInfo();
this.getUserIndexInfo();
// api.addEventListener({
// name: 'meal'
// }, function (ret, err) {
// app.meal = ret.value.meal + ',' + ret.value.num + app.unit;
// app.total = parseFloat(ret.value.price) * (ret.value.num);
// app.attribute_id = ret.value.attribute_id;
// app.num = ret.value.num;
// // alert(JSON.stringify(ret.value));
// });
// api.addEventListener({
// name: 'room'
// }, function (ret, err) {
// app.room = ret.value.name_left + ',' + ret.value.name_right + ',' + ret.value.num + app.unit;
// // alert(JSON.stringify(ret.value));
// app.num = ret.value.num;
// app.attribute_id = ret.value.attribute_id;
// app.total = parseFloat(ret.value.price) * (ret.value.num)
// });
var client_h = window.innerHeight;
window.addEventListener('resize', function () {
if (window.innerHeight < client_h) {
app.pos = 'relative'
} else {
app.pos = 'fixed'
}
}, false);
},
methods: {
// 选择套餐
set_meal: function () {
var app = this;
openWin({
name: 'choose_meal_f',
url: './choose_meal_f.html',
pageParam: {
id: app.id,
attribute: app.attribute,
unit: app.unit
}
})
},
// 选择入住等级
set_rank: function () {
var app = this;
if (app.date_info) {
api.confirm({
title: '选择套餐',
msg: '预约参观和选择入住只能选择其中一类',
buttons: ['确定', '取消']
}, function (ret, err) {
var index = ret.buttonIndex;
if (index == 2) {
app.date_info = '';
app.room = '';
app.total = app.goods.good_price
}
});
} else {
api.openFrame({
bgColor: 'rgba(0,0,0,0.05)',
name: 'choose_room_f',
url: './choose_room_f.html',
bounces: false,
animation: {
type: "push",
subType: "from_bottom",
duration: 300
},
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
id: app.id,
attribute: app.attribute,
unit: app.unit
}
});
}
},
// 选择日期
dateSelect: function () {
var app = this;
if (app.room) {
api.confirm({
title: '选择套餐',
msg: '预约参观和选择入住只能选择其中一类',
buttons: ['取消', '确定']
}, function (ret, err) {
var index = ret.buttonIndex;
if (index == 1) {
app.date_info = '';
app.room = ''
}
});
} else {
// alert(getTimeDetil(72))
if (api.systemType == 'ios') {
api.openPicker({
type: 'date_time',
date: new Date(),
minDate: getTimeDetil(72),
title: '服务时间'
}, function (ret, err) {
if (ret) {
app.year = ret.year;
app.month = ret.month;
app.day = ret.day;
app.hour = ret.hour;
app.minute = ret.minute;
app.date_info = app.year + '-' + add0(app.month) + '-' + add0(app.day) + ' ' + add0(app.hour) + ':' + add0(app.minute);
if (checkDate(app.date_info, 3)) {
return app.date_info
} else {
toastMsg('服务时间请选择在3天以后');
return app.date_info = app.default_date
}
} else {
console.log(err)
}
});
}
else {
api.openPicker({
type: 'date',
title: '服务日期',
}, function (ret, err) {
if (ret) {
app.year = ret.year;
app.month = ret.month;
app.day = ret.day;
api.openPicker({
type: 'time',
title: '服务时间'
}, function (rets, errs) {
if (rets) {
app.hour = rets.hour;
app.minute = rets.minute;
app.date_info = app.year + '-' + add0(app.month) + '-' + add0(app.day) + ' ' + add0(app.hour) + ':' + add0(app.minute);
if (checkDate(app.date_info, 1)) {
return app.date_info
} else {
toastMsg('选择生日不能小于当前时间');
return app.date_info = app.default_date
}
} else {
console.log(errs)
}
});
} else {
console.log(err)
}
});
}
}
},
// 预约时间
openDate: function () {
var app = this;
if (app.date_info == '') {
toastMsg('入住时间')
} else if (app.name == '') {
toastMsg('请填写用户名')
} else if (!mobileReg.test(app.tel)) {
toastMsg('手机号不正确')
} else {
var post = {
book_time: app.date_info,
name: app.name,
tel: app.tel
};
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'portal/Goods/applyBook', post, header).then(function (res) {
if (res.data.code == 1) {
toastMsg(res.data.msg)
openView('doc_success', 'common/doc_success', '预约成功', 'doc_success', false, false);
} else {
toastMsg(res.data.msg)
}
})
}
},
// 获取订单详情
applyInfo: function () {
var app = this;
var post = {
gid: app.id
};
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'portal/Goods/applyInfo', post, header).then(function (res) {
// alert(JSON.stringify(res))
if (res.data.code == 1) {
app.attribute = res.data.data.attribute;
app.real_price = res.data.data.real_price;
app.price = res.data.data.price;
app.goods = res.data.data.goods;
app.attribute_type = res.data.data.attribute_type;
app.unit = res.data.data.unit;
loadEnd();
} else {
toastMsg(res.msg)
}
})
},
// 下单
openOrder: function () {
var app = this;
if (app.room == '' && app.meal == '') {
toastMsg('请选择套餐')
}
else if (app.name == '') {
toastMsg('请输入服务对象')
}
else if (!mobileReg.test(app.tel)) {
toastMsg('手机号不正确')
}
else {
var post = {
gid: app.id,
name: app.name,
tel: app.tel,
attribute_id: app.attribute_id,
num: app.num,
price: app.total,
};
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'portal/Goods/applyOrder', post, header).then(function (res) {
if (res.data.code == 1) {
app.order_id = res.data.data.oid;
openView('my_pay', 'my/my_pay', '支付', 'my_pay', false, {order_id: app.order_id});
} else {
toastMsg(res.data.msg)
}
})
}
},
// 客服
openSever: function () {
var app = this;
app.img_active = false;
app.getRongYunToken();
function callBack(ret, err) {
// alert("ret.type="+ret.type+"value="+ret.value+"ret.desc="+ret.desc);
if (ret.type == 1) {
api.closeWin();
}
}
var param = {
appkey: "1da38c74bc3746cea6b767727683ca83",
titleImgId: '#dbb25f',
themeColor: '#dbb25f',
backgroundColor: '#f8f9f8',
userId: app.userId,
customBannerColor: '#dbb25f',
nickName: app.user_info.name,
phone: "",
email: "",
customInfo: {"uname": app.user_info.name, 'avatarUrl': app.user_info.avatar},
transferKeyWord: '人工服务,人工,电话',
isShowEvaluate: true,
isSettingSkillSet: false,
skillSetId: "",
customUserOutWord: '欢迎再次咨询',
customAdminTipWord: '请稍等... 正在查询资料',
customAdminNonelineTitle: '人工客服忙~',
isShowTansfer: true,
titleFont: 18.0,
bottomLineColor: '#dbb25f',
goodsTitle: '56870',
goodsLabel: '123456',
goodsImage: '../../assets/image/head.png',
goodsFromUrl: 'http://www.baidu.com',
isDebugMode: 'YES'
};
var zhichi = api.require('zhiChiSobot');
zhichi.startZhiChiSobot(param, callBack);
api.sendEvent({
name: 'hide_menu',
extra: {
img_active: false
}
});
},
// 获取客服token
getRongYunToken: function () {
var app = this;
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'portal/RongYun/index', null, header).then(function (res) {
if (res.data.code == 1) {
app.rongYunToken = res.data.data.token;
app.userId = res.data.data.userId;
// app.rongyunInit();
} else {
toastMsg(res.data.msg)
}
})
},
// 获取个人信息
getUserIndexInfo: function () {
var app = this;
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'user/index/getUserIndexInfo', null, header).then(function (res) {
if (res.data.code == 1) {
app.user_info = res.data.data;
} else {
toastMsg(res.data.msg)
}
})
},
input_focus: function () {
var app = this;
setTimeout(function () {
document.body.scrollTop = document.body.scrollHeight;
}, 300);
}
}
})
</script>