<!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"> <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: #f5f5f5; /*padding-bottom: 1rem;*/ } .care_title { /*display: flex;*/ /*align-items: center;*/ /*justify-content: space-between;*/ font-size: 19px; color: #424242; padding: 0.25rem 0.6rem; border-bottom: 1px solid #ebebeb; text-align: center; /*font-weight: bold;*/ position: relative; } .care_title .icon-ziyuan { position: absolute; right: 0.6rem; font-size: 15px; top: 19%; transform: rotate(-90deg); } .care_title .icon-shangla { position: absolute; right: 0.8rem; font-size: 15px; top: 34%; transform: rotate(180deg); } .img_p p { display: flex; align-items: center; justify-content: center; background-color: #fff; } .img_p { margin: 0 0 0.1rem 0; background-color: #fff; box-shadow: 0 0.05rem 0.05rem rgba(249, 249, 249, 0.75); } .img_p img { width: 100%; } .care_faq { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: #424242; padding: 0.25rem 0.4rem; background-color: #fff; box-shadow: 0 0.05rem 0.05rem RGBA(249, 249, 249, 0.75); margin: 0 0 1.15rem 0; } .care_faq .icon-xiangyou { color: #BCBCBC; font-size: 15px; } </style> </head> <body> <div id="loadStart"></div> <div id="app" v-cloak> <!--<header id="header">--> <!--<div class="index_header">--> <!--<div class="close_left" onclick="closeWindow()"><span class="iconfont icon-fanhui"></span></div>--> <!--<span>{{post_title}}</span>--> <!--<span class="iconfont icon-fenxiang-tianchong" ></span>--> <!--</div>--> <!--</header>--> <div class="warp"> <div class="nurse_banner" :style="{backgroundImage:'url(' + banner + ')'}"> <!--<div class="nurse_text">{{post_title}}</div>--> </div> <div class="img_p"> <div v-html="price_table"></div> </div> <div class="img_p"> <div v-html="problems"></div> </div> <div class="img_p"> <div class="care_title" @click="imgshow=!imgshow"><span>— 服务详情 —</span><span class="iconfont " :class="{'icon-ziyuan':imgshow,'icon-shangla':!imgshow}"></span> </div> <div v-html="service_info" v-show="imgshow"></div> </div> <div class="img_p"> <div class="care_title" @click="img_show=!img_show"><span>— 服务须知 —</span> <span class="iconfont" :class="{'icon-ziyuan':img_show,'icon-shangla':!img_show}"></span> </div> </div> <div v-show="!img_show"> <div class="img_p"> <div v-html="service_notice"></div> </div> </div> <div class="img_p"> <div v-html="advantage"></div> </div> <div class="img_p"> <div v-html="service_step"></div> </div> <div class="care_faq" @click="question"> <span>常见问题</span><span class="iconfont icon-xiangyou"></span> </div> </div> <footer class="doc_footer" id="footer"> <div class="doc_left"><span class="rmb">¥</span><span class="doc_price">{{price?price:0}}</span><span class="doc_qi">起</span> </div> <div class="doc_right"><span class="iconfont icon-kefu" @click="openSever"></span><span class="doc_appointment" @click="appointment()">去 预 约</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/axios.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script> var title = document.getElementsByTagName("title")[0] var app = new Vue({ el: '#app', data: { img_show: false, imgshow: false, id: '', cid: '', proCareInfoInfo_data: [], banner: '',//商品头图 price_table: '',//价格表单 service_info: '',//服务详情 service_notice: '',//服务须知 advantage: '',//我们的优势 service_step: '',//服务流程 price: 0, cityname: '', post_title: '', problems: '', rongYunToken: '', userId: '', }, created: function () { // alert('预约' + api.pageParam.id) this.cid = localStorage.getItem('cid'); this.id = localStorage.getItem('id'); this.care_name = localStorage.getItem('care_name'); this.cityname = localStorage.getItem('cityname'); this.proCareInfoInfo(); this.getUserIndexInfo(); }, methods: { // 去预约 appointment: function () { var app = this if (app.cid == 5 || app.cid == 7 || app.cid == 8 || app.cid == 10) { openView('doc_package_f', '../index/doc_package_f', app.care_name, 'doc_package_f', false, { id: app.id, cid: app.cid, cityname: app.cityname }) } else { openView('pay_form_f', '../index/pay_form_f', app.care_name, 'pay_form_f', false, { id: app.id, cityname: app.cityname, cid: app.cid }) } }, // 去常见问题 question: function () { var app = this openView('my_que', 'my/my_que', '常见问题', 'my_que', false, { id: app.id }) }, // 获取详情 proCareInfoInfo: function () { var app = this; var post = { id: app.id }; getRequest('post', 'portal/Goods/proCareInfo', post, null).then(function (res) { if (res.data.code == 1) { app.banner = res.data.data.banner; app.post_title = res.data.data.post_title; app.price_table = res.data.data.price_table; app.problems = res.data.data.problems; app.service_info = res.data.data.service_info; app.service_notice = res.data.data.service_notice; app.advantage = res.data.data.advantage; app.service_step = res.data.data.service_step; app.price = res.data.data.price ? res.data.data.price : 0; loadEnd(); // app.banner = app.proCareInfoInfo_data.banner } }) }, // 获取个人的基本信息 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) } }) }, // 打开客服 openSever: function () { var app = this api.openWin({ name: 'cs_win', url: '../common/cs_win.html' }); } }, watch:{ post_title(curVal,oldVal){ // title.innerText = this.post_title; document.title = this.post_title; } } }) </script>