<!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/weui.min.css"> <link rel="stylesheet" href="../../assets/css/api.css"/> <link rel="stylesheet" href="../../assets/css/style.css"> <link rel="stylesheet" href="../../assets/css/index.css"> <link rel="stylesheet" href="../../assets/css/doc.css"> <link rel="stylesheet" href="../../assets/css/pay_form_f.css"> <link rel="stylesheet" href="../../assets/icon/iconfont.css"> <style> body { background-color: #f2f2f2; padding-bottom: 1.5rem; } .imgList { display: flex; align-items: center; flex-wrap: wrap; background-color: #fff; padding: 0.2rem; } .imgList .img_item { width: 31%; height: 1.85rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin: 0 0.1rem 0.2rem 0; } .imgList .img_item img { width: 100%; } .imgList .img_item .iconfont_qx_box { position: absolute; top: 0; right: 0; font-size: 15px; color: #999; } /*.pay_form {*/ /*position: relative;*/ /*}*/ .tool_box { display: flex; align-items: center; justify-content: center; width: 50%; margin: 0 auto; } .tool_box img { width: 100%; } .swiper_item { padding: 0.28rem 0.25rem; } .contract { display: inline; } .agreetit span { display: inline; } .pinganbox .icon-wenhao { color: #59b6fd; } .doc_footer { z-index: 0; } /*地址样式*/ .city_top { position: fixed; left: 0; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem; font-size: 0.3rem; color: #333; border: 1px solid #f5f5f5; background-color: #fff; } .city_name_box { display: flex; align-items: center; flex: 1; } .city_name_box .iconfont { margin: 0 0.1rem 0 0; } .city_input { flex: 3; margin: 0 0.1rem 0 0.1rem; background-color: #f2f2f2; padding: 0 0 0 0.2rem; border-radius: 0.1rem; } .city_input input { width: 100%; padding: 0.2rem 0.25rem; color: #333; font-size: 0.26rem; } .city_input input::-webkit-input-placeholder { color: #aaa; } .city_item { padding: 0.3rem 0.25rem; color: #999; font-size: 0.26rem; display: flex; justify-content: space-between; } .choose_box { display: flex; align-items: center; justify-content: space-between; font-size: 0.24rem; color: #333; padding: 0.2rem 0.25rem; border-bottom: 1px solid #f2f2f2; margin-top: 1.3rem; } .position { display: flex; align-items: center; } .position span { margin-left: 0.2rem; } .city_name { color: #333; font-size: 0.3rem; } .city_address { font-size: 0.26rem; } .my_address { margin: 0.25rem; } .my_address .iconfont { margin: 0 0.1rem 0 0; color: #ccc; } .address_title { font-size: 14px; color: #999; } .choose_city { font-size: 18px; } .address_item { color: #424242; font-size: 16px; padding: 0.26rem 0.5rem 0.26rem 0.2rem; border-bottom: 1px solid #f2f2f2; } .city_container{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 15; background-color: #FFF; overflow-y: auto; } /*套餐选择*/ .meal { display: flex; flex-direction: column; justify-content: flex-end; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,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_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: 12px; color: #ccc; } .pay_btn { font-size: 15px; color: #fff; background-color: #dbb25f; text-align: center; padding: 0.2rem 0; } .room_box, .price_box { display: flex; /*align-items: center;*/ justify-content: space-between; padding: 0.2rem 0.4rem 0 0.4rem; } .room_left { font-size: 15px; color: #424242; } .youhui { color: #d8b25f; font-size: 12px; margin-left: 0.1rem; } .room_right { color: #dbb25f; font-size: 15px; } .old_price { text-decoration: line-through; color: #ccc; margin-left: 0.1rem; } .room_tips { color: #ccc; font-size: 12px; padding: 0 0.4rem; } .price_left, .price_right { display: flex; /*align-items: center;*/ flex-wrap: wrap; flex: 1; } .price_left span, .price_right span { background-color: #f2f2f2; color: #424242; padding: 0 0.2rem; font-size: 14px; margin: 0 0.2rem 0.2rem 0; border-radius: 0.05rem; cursor: pointer; min-width: 0.88rem; text-align: center; height: 0.48rem; display: flex; align-items: center; justify-content: center; } .icon-cuohao { font-size: 15px; color: #424242; } .price_box .span_active { background-color: #dbb25f; color: #fff; } .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; } /*图片上传*/ #photoBox{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; } .auth2_title { font-size: 14px; color: #424242; margin: 0.57rem 0.62rem 0 0.62rem; } .photos { display: flex; align-items: center; /*justify-content: space-around;*/ flex-wrap: wrap; font-size: 14px; color: #424242; } .photo_item { display: flex; align-items: center; flex-direction: column; margin: 0.84rem 0 0 0; /*flex: 1;*/ width: 50%; } .photo_item_img { height: 1.92rem; width: 2.46rem; border: 1px dashed #dcdcdc; display: flex; align-items: center; justify-content: center; border-radius: 0.1rem; overflow: hidden; margin-bottom: 0.28rem; position: relative; } .photo_item_img input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .photo_item_img .iconfont { font-size: 33px; color: #c1c1c1; } .photo_item_img img { width: 100%; } .idcard_box input { padding: 0.28rem 0; width: 100%; text-align: right; } .idcard_box .iconfont { color: #E3C88D; margin-right: 0.1rem; } .photo_re { color: #AAAAAA; font-size: 14px; text-align: right; margin: 0 0 0.47rem 0; padding-right: 1.3rem; } .auth2_tips { text-align: center; font-size: 10px; color: #AAAAAA; margin-bottom: 0.65rem; } .save_btn { position: relative; width: 84%; margin: 0.91rem auto 0.3rem auto; border-radius: 0.1rem; font-size: 15px; } </style> <body> <div id="loadStart"></div> <div id="app" v-cloak> <div class="swiper_item margin0"> <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"> <div class="icon_img"><img :src="item.url" alt=""></div> <span>{{item.text}}</span> </div> </div> <div class="swiper_item_money">¥{{goods.good_price}}</div> </div> </div> <div class="service">服务信息</div> <div class="service_his"> <div class="nodata" v-if="person.length==0">暂无亲友</div> <span :class="{active_span:ind==index}" @click="tab_person(index,item.personal_id)" v-for="(item,index) in person" v-else>{{item.name}}</span> </div> <form action=""> <div class="service_input_box"> <div class="service_icon"><span class="iconfont icon-yonghu"></span><span>服务对象</span></div> <div class="service_input"><input type="text" placeholder="请输入姓名" v-model.trim="user_name"></div> </div> <div class="service_input_box" @click.stop="dateSelect" id="sever" > <div class="service_icon"><span class="iconfont icon-shijian1"></span><span>服务时间</span></div> <div class="service_input"><span v-if="date_info" class="date_info">{{date_info}}</span><span v-else>{{default_date}}</span></div> <!--<input id="sever" autofocus placeholder="1" type="hidden">--> </div> <div class="service_input_box"> <div class="service_icon"><span class="iconfont icon-dianhua-1"></span><span>联系电话</span></div> <div class="service_input"><input type="number" placeholder="请输入电话" v-model.trim="user_phone" maxlength="11"></div> </div> <div class="service_input_box"> <div class="service_icon"><span class="iconfont icon-xingbie"></span><span>性别</span></div> <div class="service_input sex_box"> <div class="female"> <input type="radio" id="male" name="sex" :checked="checked_male" @click="checked_male=!checked_male"/> <label for="male">男</label> </div> <div class="male"> <input type="radio" id="female" name="sex" :checked="!checked_male" @click="checked_male=!checked_male"/> <label for="female">女</label> </div> </div> </div> <div class="service_input_box" @click="broSelect" id="broDate"> <div class="service_icon"> <span class="iconfont icon-baoyuefuwux"></span><span>出生日期</span></div> <div class="service_input"><span v-if="broth_info" class="date_info">{{broth_info}}</span><span v-else>{{default_bro}}</span> </div> </div> <div class="service_input_box" @click="openMap"> <div class="service_icon"><span class="iconfont icon-dizhi"></span><span>服务地址</span></div> <div class="service_input"> <span class="clamp1 date_info" v-if="user_address">{{user_address}}</span> <span class="clamp1" v-else>请输入详细地址</span> </div> </div> <div class="service_input_box"> <div class="service_icon"><span class="iconfont icon-tianxie"></span><span>详细地址</span></div> <div class="service_input"> <input type="text" placeholder="街道、小区、楼层门牌号信息" v-model.trim="user_address_detail" tapmode> </div> </div> <div> <div v-if="is_idcard==0"></div> <div v-else> <div class="service_input_box"> <div class="service_icon"><span class="iconfont icon-credentials_icon"></span><span>身份证号</span></div> <div class="service_input"><input type="text" placeholder="输入身份证号码我们将为您投保" v-model.trim="user_id_card" maxlength="18"> </div> </div> <div class="service_input_box pinganbox" @click="getAgreement('平安意外保险',8)" v-if="is_idcard==1"> <div class="service_icon"><img src="../../assets/image/pingan.png" alt=""></div> <div class="service_input"> <div class="right_content">免费为您投保平安医护责任险</div> <div class='iconfont icon-wenhao'></div> </div> </div> </div> </div> <div class="service_input_box" @click="chooseMeal"> <div class="service_icon"><span class="iconfont icon-xinjia"></span><span>预约套餐</span></div> <div class="service_input" v-if="meal==''"> <div> <span>选择套餐</span> <span class="iconfont icon-xiangyou"></span> </div> </div> <div v-else class="service_input"><span class="date_info">{{meal}}</span></div> </div> <div class="service_text_box"> <div class="service_text"> <span class="iconfont icon-tianxie"></span> <textarea name="" id="" cols="30" rows="10" placeholder="请详细描述您的疑问或症状,疾病和身体情况。(最多支持输入200字)" maxlength="200" v-model="user_content"></textarea> </div> </div> <div> <div v-if="is_toolbar==0"></div> <div v-else class="service_input_box"> <div class="service_icon"><span class="iconfont icon-tool_active"></span><span>是否有护理工具</span></div> <div class="service_input sex_box"> <div class="female"> <input type="radio" id="pro" name="protect" :checked="isPro" @click="isPro=!isPro"/> <label for="pro">是</label> </div> <div class="male"> <input type="radio" id="nopro" name="protect" :checked="!isPro" @click="openIsPro"/> <label for="nopro">否</label> </div> </div> </div> </div> <!--<div v-show="!isPro" class="tool_box">--> <!--<img src="../../assets/image/price.png" alt="">--> <!--</div>--> <div> <div v-if="is_prove==0"></div> <div v-else> <div class="service_input_box" @click="openProve"> <div class="service_icon"><span class="iconfont icon-shenfenzhengming"></span><span>上传证明</span> </div> <div class="service_input"> <span class="clamp1" v-if="diagnosis==''&&drug_recipe==''&&drug==''">请上传医属、处方、病例、药品材料以便提供服务 </span> <span class="clamp1" v-else>上传完成</span> <span class="iconfont icon-yiliao"></span> </div> </div> <div class="imgList"> <div class="img_item" v-for="(item,index) in imglist"> <img :src="item" alt=""> <div class="iconfont_qx_box" @click="removeImg(index)"> <span class="iconfont icon-quxiao" v-show="item"></span></div> </div> </div> </div> </div> </form> <div class="agree_box"> <div class="agreetit"> <input class='tgl tgl-light' id='cb1' type='checkbox' :checked="push_btn" @click="push_btn=!push_btn"> <label class='tgl-btn' for='cb1'></label> <span class="contract" @click="getAgreement('慈界服务合同',3)"><span>本人或接受上门服务的人以充分知晓</span> <span class="contract_item">《慈界服务合同》</span><span>所有内容,同意合同并接受上门服务。</span> </span> </div> </div> <div class="doc_footer pay_form" id="footer" :style="{position:pos}"> <div class="doc_left"><span class="rmb">¥</span><span class="doc_price">{{price}}</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> </div> <!--地址选择--> <div class="city_container" v-if="city"> <div v-cloak> <div id="container"></div> <div class="city_top"> <div class="city_name_box" @click="choose_city_fun"> <span class="iconfont icon-dizhi"></span> <div class="clamp1">{{cityname}}</div> </div>: <div class="city_input"><input type="search" placeholder="请输入你的服务地址" v-model="keyword" @input="getCity"></div> <div class="main_color" @click="search_word">搜索</div> </div> <div class="choose_box" @click="choose_now"> <span class="choose_city">{{street}}</span> <div class="main_color position"><span class="iconfont icon-zhongxindingwei"></span><span>重新定位</span></div> </div> <div v-if="address_show"> <div class="my_address"> <div class="address_title"><span class="iconfont icon-shouye"></span><span> 我的服务地址</span></div> <div class="address_item nodata" v-if="user_address_list.length==0">暂无服务地址</div> <div class="address_item" v-for="(item,index) in user_address_list" @click="choose_address(item.pname,item.address,item.address_info,item.lon,item.lat)" v-else> <span>{{item.address}}{{item.address_info}}</span> </div> </div> <div class="my_address"> <div class="address_title"><span class="iconfont icon-dizhi"></span><span>我的附近地址</span></div> <div class="address_item" v-for="(item,index) in nearList" @click="choose_address(item.pname,item.address,'',item.lon,item.lat)"> <span>{{item.address}}</span> </div> </div> </div> <div v-for="(item,index) in keywords" class="city_item" @click="choose_address(item.cityname,item.address,item.name,item.lon,item.lat)" v-else> <div> <div class="city_name">{{item.name}}</div> <div class="city_address">{{item.address}}</div> </div> </div> </div> </div> <!--选择套餐--> <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.price?priceList.price:0}}</span><span class="old_price">原价¥{{priceList.o_price?priceList.o_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 id="photoBox" v-cloak v-if="photoUpload"> <div class="auth2_title">请上传就医证明,以便订单审核(为您保密)</div> <div class="photos"> <div class="photo_item"> <div class="photo_item_img" > <img v-if="img1" :src="img1"/> <span v-else class="iconfont icon-xiangji"></span> <input type="file" accept="image/*" @change="addPic" id="a"> </div> <div class="photo_type">诊断证明/医疗处置单</div> </div> <div class="photo_item"> <div class="photo_item_img" @click="popupVisible1=true"> <img v-if="img2" :src="img2"/> <span v-else class="iconfont icon-xiangji"></span> <input type="file" accept="image/*" @change="addPic" id="b"> </div> <div class="photo_type">药品处方</div> </div> <div class="photo_item"> <div class="photo_item_img" @click="popupVisible2=true"> <img v-if="img3" :src="img3"/> <span v-else class="iconfont icon-xiangji"></span> <input type="file" accept="image/*" @change="addPic" id="c"> </div> <div class="photo_type">药品照片</div> </div> <div class="photo_item"> <div class="photo_item_img" @click="popupVisible3=true"> <img v-if="img4" :src="img4"/> <span v-else class="iconfont icon-xiangji"></span> <input type="file" accept="image/*" @change="addPic" id="d"> </div> <div class="photo_type"> <div>病例</div> </div> </div> </div> <div class="photo_re">(选填)</div> <div class="save_btn" @click="auth_next">提交</div> <div class="auth2_tips">为提高审核速度,请最少上传1张清晰的图片</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/vue.min.js"></script> <script type="text/javascript" src="../../assets/js/index.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/axios.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script type="text/javascript" src="../../assets/js/datePicker.js"></script> <script type="text/javascript" src = 'https://webapi.amap.com/maps?v=1.4.4&test=true&key=ef53760bd959a4df08b7d4587280e642&&plugin=AMap.ToolBar,AMap.IndoorMap'></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script> var app = new Vue({ el: '#app', data: { img_show: true, imgshow: true, id: '',//商品id care_name: '', year: '', month: '', day: '', hour: '', minute: '', date_info: '', default_date: '请选择时间', default_bro: '请选择生日', bro_year: '', bro_month: '', bro_day: '', broth_info: '', checked_male: true, isPro: true, push_btn: true, user_name: '',//用户姓名 user_phone: '',//手机号 user_address: '',//地址 user_address_detail: '',//详细地址 user_id_card: '',//身份证号 user_content: '',//详细描述 popupVisible: false,//相机显示 img: '',//上传证明 imgs: [], meal: '',//套餐 num: 0,//套餐数量 price: '',//套餐价格 person: [],//亲友名单 ind: -1, is_idcard: 0, is_toolbar: 0, is_prove: 0, cityname: '', real_price: '', goods: [], imglist: [], attribute_id: '', attribute_type: '', user_info: [], diagnosis: '', drug_recipe: '', drug: '', ill_case: '', unit: '', pos: 'fixed', city: false, keyword: '', keywords: [], cities: [], street: '', nearList: [], user_address_list: [], address_show: true, lon: '', lat: '', latitude: '', longitude: '', //经度 lng: '', //纬度 lat: '', map: {}, //经纬度 centerPoint: [], // 套餐选择 active_left: '', active_right: '', attribute: [], price_info: [], active_index: -1, active_index2: -1, taocan: false, room: false, // 套餐选择2 sever_list: [], priceList: [], // 图片上传 photoUpload: true, img1: '', img2: '', img3: '', img4: '', popupVisible: false, popupVisible1: false, popupVisible2: false, popupVisible3: false, configinfo: [] }, created: function () { var app = this; this.id = localStorage.getItem('id'); this.cityname = localStorage.getItem('cityName'); this.getUserIndexInfo(); this.applyInfo(); //获取当前地址 this.get_city(); //获取已经上传的图片 if ($api.getStorage('img1') || ($api.getStorage('img2')) || ($api.getStorage('img3')) || ($api.getStorage('img4'))) { app.img1 = $api.getStorage('img1'); app.img2 = $api.getStorage('img2'); app.img3 = $api.getStorage('img3'); app.img4 = $api.getStorage('img4') } // api.addEventListener({ // name: 'choose_city' // }, function (ret, err) { // // console.log(JSON.stringify(ret)) // // alert(JSON.stringify(ret)); // // app.user_address = ret.value.city + ' ' + ret.value.address; // app.user_address = ret.value.address; // app.user_address_detail = ret.value.name; // app.lon = ret.value.longitude; // app.lat = ret.value.latitude; // }); // api.addEventListener({ // name: 'meal' // }, function (ret, err) { // app.meal = ret.value.meal + ret.value.num + app.unit; // app.num = ret.value.num; // app.price = parseFloat(ret.value.price) * (ret.value.num); // app.attribute_id = ret.value.attribute_id // // alert(JSON.stringify(ret.value)); // }); // api.addEventListener({ // name: 'room' // }, function (ret, err) { // // alert(JSON.stringify(ret)); // app.meal = ret.value.name_left + ',' + ret.value.name_right + ',' + ret.value.num + '个月'; // app.num = ret.value.num; // app.price = parseFloat(ret.value.price) * (ret.value.num); // app.attribute_id = ret.value.attribute_id // // alert(JSON.stringify(ret.value)); // }); // 上传证明事件 // api.addEventListener({ // name: 'prove' // }, function (ret, err) { // // alert(JSON.stringify(ret.value)); // app.diagnosis = ret.value.diagnosis; // app.drug_recipe = ret.value.drug_recipe; // app.drug = ret.value.drug; // app.ill_case = ret.value.ill_case; // }); var client_h = window.innerHeight; window.addEventListener('resize', function () { if (window.innerHeight < client_h) { app.pos = 'relative' } else { app.pos = 'fixed' } }, false); // api.addEventListener({ // name: 'sev_time' // }, function (ret, err) { // if (ret) { // app.date_info = ret.value.dateinfo; // } else { // toastMsg('请重试') // } // }); // api.addEventListener({ // name: 'bro_time' // }, function (ret, err) { // if (ret) { // app.broth_info = ret.value.broinfo; // } else { // toastMsg('请重试') // } // }); // app.name=api.pageParam.name; }, methods: { // 选择服务日期 dateSelect: function () { var calendar = new datePicker(); calendar.init({ 'trigger': '#sever', /*按钮选择器,用于触发弹出插件*/ 'type': 'datetime', /*模式:date日期;datetime日期时间;time时间;ym年月;*/ // 'minDate':getTimeDetil(3), /*最小日期*/ 'minDate': formatDate(new Date(getTimeDetil(3)), 1), /*最小日期*/ 'maxDate': '', /*最大日期*/ 'onSubmit': function () {/*确认时触发事件*/ console.log(calendar.value); if (checkDate(calendar.value, 1)) { app.date_info = calendar.value; calendar.onClose() } else { toastMsg('请选择3小时之后到7天之内的服务时间'); } }, 'onClose': function () {/*取消时触发事件*/ // api.closeWin(); } }); }, // 选择生日 broSelect: function () { var calendar = new datePicker(); calendar.init({ 'trigger': '#broDate', /*按钮选择器,用于触发弹出插件*/ 'type': 'date', /*模式:date日期;datetime日期时间;time时间;ym年月;*/ // 'minDate':getTimeDetil(3), /*最小日期*/ 'minDate': '', /*最小日期*/ 'maxDate': formatDate(new Date(), 1), /*最大日期*/ 'onSubmit': function () {/*确认时触发事件*/ console.log(calendar.value); if (calendar.value) { app.broth_info = calendar.value; calendar.onClose() } }, 'onClose': function () {/*取消时触发事件*/ // api.closeWin(); } }) }, // 上传证明 openProve: function () { openView('prove', '../index/prove', '上传就医证明','prove',false,false,false) }, // 获取订单详情 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) { if (res.data.code == 1) { app.is_idcard = res.data.data.is_idcard; app.is_toolbar = res.data.data.is_toolbar; app.is_prove = res.data.data.is_prove; app.person = res.data.data.person; app.attribute = res.data.data.attribute; app.unit = res.data.data.unit; 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; loadEnd(); } else { toastMsg(res.msg) } }) }, // 切换亲友信息 tab_person: function (index, rid) { var app = this; if (app.ind == index) { app.ind = -1; app.user_name = ''; app.checked_male = true; app.user_phone = ''; app.broth_info = ''; app.user_id_card = ''; app.user_address = ''; } else { app.ind = index; var post = { id: rid }; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'portal/Goods/getPersonal', post, header).then(function (res) { if (res.data.code == 1) { app.user_name = res.data.data.name; app.checked_male = res.data.data.sex == 1 ? true : false; app.user_phone = res.data.data.mobile; app.broth_info = timestampToTime(res.data.data.birthday, 1); app.user_id_card = res.data.data.idcard; app.user_address = res.data.address ? res.data.data.address.server + res.data.data.address.info : ''; } else { // toastMsg(res.data.msg) } }) } }, // 选择套餐 chooseMeal: function () { var app = this; if (app.attribute_type == 1) { app.taocan = true; app.room = false; } else { app.room = true; app.taocan = false; } }, // 选择服务地址 openMap: function () { this.city = true; // openView('choose_address', '../common/choose_address', '选择服务地址', 'choose_address', false, {cityname: app.cityname}); }, // 获取协议 openIsPro: function () { var app = this; app.isPro = !app.isPro; window.location.href = '../common/tool_fm.html'; }, // 去协议 getAgreement: function (name, id) { openView('agree_content', 'common/agree_content', name, 'agree_content', false, {id: id}) }, //地址方法 // 获取我的服务地址 getUsedAddress: function() { var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; console.log(header) getRequest('post', 'portal/Goods/getUsedAddress', null, header).then(function(res) { //alert(JSON.stringify(res)); if(res.data.code == 1) { app.user_address_list = res.data.data; toastMsg(res.data.msg) } loadEnd(); }) }, // 重新获取当前定位信息 choose_now: function() { var app = this; toastMsg('正在重新定位'); app.get_city(); setTimeout(function() { // api.hideProgress(); }, 2000); }, // 定位当前城市 get_city: function() { var app = this ; map = new AMap.Map('container', {}); map.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位,默认:true enableHighAccuracy: true, // 设置定位超时时间,默认:无穷大 timeout: 10000 }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) function onComplete(data) { // app.cityname = data.addressComponent.province; console.log(app.cityname); app.lng = data.position.lng; app.lat = data.position.lat; app.street = data.addressComponent.street; // console.log(app.lng); // console.log(app.lat); // // 获取附近地址 app.map = new AMap.Map('container', {}); AMap.service(["AMap.PlaceSearch"], function() { var placeSearch = new AMap.PlaceSearch({ pageSize: 10, // 每页10条 pageIndex: 1, // 获取第一页 city: app.cityname // 指定城市名(如果你获取不到城市名称,这个参数也可以不传,注释掉) }); // 第一个参数是关键字,这里传入的空表示不需要根据关键字过滤 // 第二个参数是经纬度,数组类型 // 第三个参数是半径,周边的范围 // 第四个参数为回调函数 placeSearch.searchNearBy(app.cityname, [app.lng, app.lat], 1000, function(status, result) { console.log(JSON.stringify(status)) if(result.info === 'OK') { var locationList = result.poiList.pois; // 周边地标建筑列表 console.log(locationList) app.nearList = locationList // 生成地址列表html // createLocationHtml(locationList); } else { console.log('获取位置信息失败!'); } }); }); } function onError(erro) { console.log(erro) // 定位出错 toastMsg('请开启定位功能') } }) }, //获取当前坐标 getNowCity(){ mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }); mapObj.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); function onComplete(obj){ var res = '经纬度:' + obj.position + '\n精度范围:' + obj.accuracy + '米\n定位结果的来源:' + obj.location_type + '\n状态信息:' + obj.info + '\n地址:' + obj.formattedAddress + '\n地址信息:' + JSON.stringify(obj.addressComponent, null, 4); alert(res); } function onError(obj) { alert(obj.info + '--' + obj.message); console.log(obj); } }, // 获取搜索地址 getCity: function() { var app = this; if(app.keyword == '') { app.address_show = true; } else { app.address_show = false; var aMap = api.require('aMap'); var placeSearchOptions = { //构造地点查询类 pageSize: 10, pageIndex: 1, city: app.cityname //城市 }; var placeSearch = new AMap.PlaceSearch(placeSearchOptions); //关键字查询,您如果想修改结果展现效果,请参考页面:https://lbs.amap.com/fn/css-style/ placeSearch.search(app.keyword, callback); var placeSearchRender = new Lib.AMap.PlaceSearchRender(); function callback(status, result) { locationList = result.poiList.pois // console.log(JSON.stringify(result)); app.keywords = locationList; if(status === 'complete' && result.info === 'OK') { placeSearchRender.autoRender({ placeSearchInstance: placeSearch, methodName: "search", methodArgumments: [app.keyword, callback], data: result, map: map, panel: "panel" }); } } } }, // 搜索地址 search_word: function() { var app = this; if(app.keyword == '') { toastMsg('请输入搜索内容') } else { app.getCity(); } }, // 选择地址 choose_address: function(cityname,address, name, longitude, latitude) { this.cityname = cityname; this.user_address = address; this.user_address_detail = name; this.lon = longitude; this.lat = latitude; this.city = false; }, // 切换城市 choose_city_fun: function() { api.openWin({ url: '../index/city_win.html', name: 'city_win' }); $api.rmStorage('city') }, getName: function(lon, lat) { var aMap = api.require('aMap'); aMap.getNameFromCoords({ lon: lon, lat: lat, }, function(ret, err) { if(ret.status) { // alert(JSON.stringify(ret)) app.cityname = ret.city } else { // toastMsg(err.code); } }); }, //套餐选择 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('请选择入住类型') } }, //套餐选择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; }, t_reduce: function () { var app = this; if (app.num > 1) { app.num-- } app.price = 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.price = 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('请选择套餐类型') } }, //证明上传 addPic(event){ var file = event.target.files[0]; console.log(file) var formData = new FormData(); formData.append('file', file); var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'portal/Goods/uploadProve', formData, header).then(function (res) { alert(JSON.stringify(res)) if (res.data.code == 1) { app.priceList = res.data.data; } else { toastMsg(res.msg) } }); }, //诊断证明/医疗处置单 // 药品处方 auth2: function (type) { app.popupVisible1 = false; }, // 药品照片 auth3: function (type) { app.popupVisible2 = false; }, // 病例 auth4: function (type) { app.popupVisible3 = false; }, auth_next: function () { if (app.img1 == '') { toastMsg('请上传诊断证明/医疗处置单') } else if (app.img2 == '') { toastMsg('请上传药品处方') } else if (app.img3 == '') { toastMsg('请上传药品照片') } else { api.sendEvent({ name: 'prove', extra: { diagnosis: app.img1, drug_recipe: app.img2, drug: app.img3, ill_case: app.img4 } }); api.closeWin(); } }, // 去预约 appointment: function () { var app = this; // alert(app.date_info); if (app.user_name == '') { toastMsg('请输入服务对象') } else if (app.date_info == '') { toastMsg('请选择服务时间') } else if (!mobileReg.test(app.user_phone)) { toastMsg('联系电话不正确') } else if (app.broth_info == '') { toastMsg('请选择出生日期') } else if (app.user_address_detail == '' && app.user_address == '') { toastMsg('请输入详细地址') } else if (!id_card.test(app.user_id_card) && app.is_idcard == 1) { toastMsg('身份证号码不正确') } else if (app.meal == '' && app.num == '' && app.attribute_id == '') { toastMsg('请选择套餐') } else if (app.user_content == '') { toastMsg('请描述疑问和症状') } else if (app.is_prove == 1 && app.diagnosis == '' && app.drug_recipe == '' && app.drug == '') { toastMsg('请上传证明') } else if (app.push_btn == false) { toastMsg('请同意慈界服务合同') } else { var post = { gid: app.id, name: app.user_name, service_time: app.date_info, tel: app.user_phone, sex: app.checked_male ? 1 : 0, birthday: app.broth_info, address: app.user_address, address_info: app.user_address_detail, idcard: app.user_id_card, attribute_id: app.attribute_id, num: app.num, price: app.price, // price: 100, remark: app.user_content, need_tool: app.isPro == true ? 1 : 0, latitude: app.lat, longitude: app.lon, diagnosis: app.diagnosis, drug_recipe: app.drug_recipe, drug: app.drug, ill_case: app.ill_case }; 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}); window.location.reload(); $api.rmStorage('img1'); $api.rmStorage('img2'); $api.rmStorage('img3'); $api.rmStorage('img4'); } else { toastMsg(res.data.msg) } }) } }, // 客服 openSever: function () { }, // 获取个人信息 getUserIndexInfo: function () { var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'user/index/getUserIndexInfo', null, header).then(function (res) { console.log(res) if (res.data.code === '1') { app.user_info = res.data.data; } else { toastMsg(res.data.msg) } }) }, } }) </script>