<!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;*/ } .meal { display: flex; flex-direction: column; justify-content: flex-end; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,.5); } .meal_title { text-align: center; color: #424242; font-size: 15px; font-weight: bold; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem; } .meal_price_box { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #424242; padding: 0.25rem 10% 0 10%; } .meal_price { color: #d8b25f; font-size: 9px; margin-left: 0.1rem; } .incer { color: #ccc; font-size: 9px; padding: 0 10%; } .sever_list { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 0.25rem 10%; } .sever_list span { background-color: #f2f2f2; padding: 0.1rem 0.2rem; margin: 0 0.2rem 0.2rem 0; border-radius: 0.07rem; } .sever_list .span_active { background-color: #dbb25f; color: #fff; } .meal_item { background-color: #fff; } .pay_box { display: flex; align-items: center; justify-content: space-between; padding: 0 10% 0.25rem 10%; } .pay_num { font-size: 12px; color: #424242; } .pay_btn_box { display: flex; align-items: center; } .pay_btn_box .iconfont { font-size: 20px; color: #ccc; } .pay_btn_box input { width: 0.5rem; text-align: center; border: 0; outline: none; font-size: 15px; } .pay_num .limit { padding: 0; font-size: 9px; color: #ccc; } .price { flex: 1; text-align: right; } .price .meal_price { font-size: 12px; } .price .old_price { text-decoration: line-through; color: #ccc; margin-left: 0.1rem; } .pay_btn { font-size: 15px; color: #fff; background-color: #dbb25f; text-align: center; padding: 0.2rem 0; } .icon-cuohao { font-size: 15px; color: #424242; } .save_btn { text-align: center; font-size: 0.36rem; color: #fff; padding: 0.15rem 0; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 100; background-color: #dbb25f; } .moreoul { width: 100%; } .moreoul li { width: 100%; padding: 0.3rem 0; line-height: 0.3rem; font-size: 16px; border-bottom: 1px solid #f0f0f0; text-align: center; } .nodata { font-size: 16px; color: #c0c0c0; text-align: center; padding: 0.5rem 0; width: 100% !important; } .weui-picker__indicator:after { border-bottom: 1px solid #dbb25f; } .weui-picker__indicator:before { border-top: 1px solid #dbb25f; } .weui-picker__action { padding: 0.2rem 0; font-size: 13px; text-align: center; } .weui-picker__action:first-child { color: #333; text-align: center; } .weui-picker__action:last-child { color: #fff; text-align: center; background-color: #dbb25f; } .weui-picker__hd { padding: 0; } .weui-picker__item { font-size: 13px; } .close_left { position: relative; } .close_left::before { position: absolute; left: -0.1rem; right: -0.1rem; top: -0.1rem; bottom: -0.1rem; content: ''; } .mint-popup-bottom { width: 100%; } .weui-check__label:active { background: transparent; } .weui-cells_checkbox .weui-icon-checked:before { /*content: '';*/ } .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before { color: #dbb25f } .weui-cell__hd { position: relative; } .weui-cell__hd::before { content: ''; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; } .mold_index { position: fixed; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.05); /*background-color: #000;*/ left: 0; top: 0; bottom: 0; z-index: 10; } .weui-mask, .weui-mask_transparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .weui-toast { position: fixed; z-index: 5000; width: 40%; min-width: 20%; min-height: auto; height: auto; top: 50%; left: 0; right: 0; margin: 0 auto; /*margin-left: -3.8em;*/ background: hsla(0, 0%, 7%, .7); text-align: center; border-radius: 5px; color: #fff; font-size: 14px; } .weui-icon_toast { margin: 0; /*display: block*/ } .weui-toast__content { margin: 0; padding: 0.1rem 0; } .weui-icon_toast.weui-icon-success-no-circle { font-size: 0; } .weui-icon_toast.weui-icon-success-no-circle:before { color: #fff; font-size: 0; margin: 0; } </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 @click="close" class="meal" v-if="room"> <div class="meal_item" @click.stop> <div class="meal_title"> <span></span> <span>入住选择</span> <span class="iconfont icon-cuohao" @click="close"></span> </div> <div class="room_box"> <div class="room_left"> <div><span>服务价格</span><span class="youhui">优惠¥{{price_info.count?price_info.count:0}}</span></div> </div> <div class="room_right"> <span>¥{{price_info.price?price_info.price:0}}</span> <span class="old_price">原价{{price_info.o_price?price_info.o_price:0}}</span> </div> </div> <div class="room_tips">此价格包含护理、房间、用餐费用</div> <div class="price_box"> <div class="price_left"> <span :class="{'span_active':index==active_index}" v-for="(item,index) in attribute[0]" @click="choose_left(index)">{{item}}</span> </div> <div class="price_right"> <span :class="{'span_active':index==active_index2}" v-for="(item,index) in attribute[1]" @click="choose_right(index)">{{item}}</span> </div> </div> <div class="pay_box"> <span class="pay_num">入住周期 <span class="limit">({{price_info.limit_num?price_info.limit_num:0}}{{unit}})</span></span> <div class="pay_btn_box"> <span class="iconfont icon-jian" @click="reduce"></span> <input type="number" placeholder="" value="1" v-model="num"> <span class="iconfont icon-jikediancanicon09" @click="plus"></span> </div> </div> <div class="pay_btn" @click.stop="pay_go">确定</div> </div> </div> <div @click="close" class="meal" v-if="taocan"> <div class="meal_item" @click.stop> <div class="meal_title"><span></span><span>选择套餐</span><span class="iconfont icon-cuohao" @click="close"></span></div> <div class="meal_price_box"> <div><span>服务价格</span><span class="meal_price">优惠价格¥{{Math.abs(priceList.count)?Math.abs(priceList.count):0}}</span> </div> <div class="price"><span class="meal_price">¥{{priceList.o_price?priceList.o_price:0}}</span><span class="old_price">原价¥{{priceList.price?priceList.price:0}}</span></div> </div> <div class="incer">此服务由慈界平台优质服务商提供</div> <div class="sever_list"><span :class="{'span_active':index==active_index}" v-for="(item,index) in attribute" @click="t_choose_sever(item,index)">{{item}}</span></div> <div class="pay_box"> <span class="pay_num">购买数量 <span class="limit">(限购<span>{{priceList.limit_num?priceList.limit_num:0}}</span>{{unit}})</span></span> <div class="pay_btn_box"> <span class="iconfont icon-jian" @click="t_reduce"></span> <input type="number" placeholder="" value="1" v-model="num"> <span class="iconfont icon-jikediancanicon09" @click="t_plus"></span> </div> </div> <div class="pay_btn" @click="t_pay_go">确定</div> </div> </div> </div> </body> </html> <script type="text/javascript" src="../../assets/js/api.js"></script> <script type="text/javascript" src="../../assets/js/weui.min.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: '', cid: '', room: '', goods: [], real_price: '', attribute_type: '', name: '', tel: '', order_id: '', user_info: [], pos: 'fixed', num: 1, sever_list: [], active_index: -1, active_name: '', priceList: [], attribute: [], id: '', unit: '', taocan: false }, 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; app.taocan = true; // 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); }, //套餐选择2 close: function () { // api.closeWin({ // name: 'choose_meal_w' // }); this.taocan = false this.room = false }, t_choose_sever: function (attr, index) { var app = this; app.active_index = index; app.active_name = app.attribute[index]; app.attribute_id = app.attribute[index].id; var post = { id: app.id, attribute: attr }; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'portal/Goods/getPrice', post, header).then(function (res) { // alert(JSON.stringify(res)) if (res.data.code == 1) { app.priceList = res.data.data; } else { toastMsg(res.msg) } }); app.num = 1; app.meal = app.active_name + app.num + app.unit; app.total = parseFloat(app.priceList.price) * (app.num); }, t_reduce: function () { var app = this; if (app.num > 1) { app.num-- } app.total = parseFloat(app.priceList.price) * (app.num); app.meal = app.active_name + app.num + app.unit; }, t_plus: function () { var app = this; if (app.num < app.priceList.limit_num) { app.num++ } else { toastMsg('不能超过最大限购哦') } app.total = parseFloat(app.priceList.price) * (app.num); app.meal = app.active_name + app.num + app.unit; }, t_pay_go: function () { var app = this; if (app.active_name != '') { app.close() } else { toastMsg('请选择套餐类型') } }, choose_left: function (index) { app.active_index = index; app.active_left = app.attribute[0][index]; app.num = app.price_info.limit_num; app.getPrice(); }, choose_right: function (index) { app.active_index2 = index; app.active_right = app.attribute[1][index]; app.getPrice(); app.num = app.price_info.limit_num; }, reduce: function () { if (app.price_info.limit_num) { if (app.num > app.price_info.limit_num) { app.num-- } else { toastMsg('不能低于' + app.price_info.limit_num + '个月哦') } }else { toastMsg('请选择入住类型') } }, plus: function () { if (app.num < app.price_info.limit_num) { } else { app.num++ } }, getPrice: function () { if (app.active_left && app.active_right) { var post = { attribute: app.active_left + '_' + app.active_right, id: app.id }; getRequest('post', 'portal/Goods/getPrice', post, null).then(function (res) { if (res.data.code == 1) { app.price_info = res.data.data; app.num = app.price_info.limit_num; app.attribute_id = app.price_info.attribute_id } }) } else { toastMsg('请选择入住类型') } }, pay_go: function () { if (app.active_left && app.active_right) { api.sendEvent({ name: 'room', extra: { name_left: app.active_left, name_right: app.active_right, num: app.num, price: app.price_info.price, attribute_id: app.attribute_id } }); app.close() } else { toastMsg('请选择入住类型') } } } }) </script>