pay_form_f.html 26.8 KB

原文件审查历史永久链接

<!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;
        }
    </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>
        </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">
            <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>
</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>
    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: [],
            lon: '',
            lat: '',
            diagnosis: '',
            drug_recipe: '',
            drug: '',
            ill_case: '',
            unit: '',
            pos: 'fixed',

        },
        created: function () {
            apiready = function () {
                app.getUserIndexInfo();
                $api.rmStorage('city');
                app.id = api.pageParam.id;
                app.applyInfo();
                app.cityname = api.pageParam.cityname;
                api.setFrameAttr({
                    name: 'pay_form',
                    reload: true
                });
                api.addEventListener({
                    name: 'choose_city'
                }, function (ret, err) {
                    // 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 () {

                api.openWin({
                    name: 'getSev_w',
                    url: '../common/getSev_w.html'
                });
            },

            // 选择生日
            broSelect: function () {
                api.openWin({
                    name: 'getBro_w',
                    url: '../common/getBro_w.html'
                })
            },
            // 上传证明
            openProve: function () {
                openView('prove', 'index/prove', '上传就医证明','prove',false,false,false)
            }
            ,
            // 获取订单详情
            applyInfo: function () {
                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.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) {
                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) {
                        // alert(JSON.stringify(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 () {
                if (app.attribute_type == 1) {
                    api.openWin({
                        name: 'choose_meal_w.html',
                        url: './choose_meal_w.html',
                        pageParam: {
                            attribute: app.attribute,
                            id: app.id,
                            unit: app.unit
                        }
                    });
                } 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: {
                            attribute: app.attribute,
                            id: app.id,
                            unit: app.unit
                        }
                    });
                }
            }
            ,
            // 选择服务地址
            openMap: function () {
                openView('choose_address', 'common/choose_address', '选择服务地址', 'choose_address', false, {cityname: app.cityname});
            }
            ,
            // 获取协议
            openIsPro: function () {
                app.isPro = !app.isPro;
                api.openFrame({
                    bgColor: 'rgba(0,0,0,0.05)',
                    name: 'tool_fm',
                    url: '../common/tool_fm.html',
                    bounces: false,
                    animation: {
                        type: "push",
                        subType: "from_bottom",
                        duration: 300
                    },
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                })
            }
            ,
            // 去协议
            getAgreement: function (name, id) {
                openView('agree_content', 'common/agree_content', name, 'agree_content', false, {id: id})
            }
            ,
            // 去预约
            appointment: function () {
                // 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) {
                    if (res.data.code == 1) {
                        app.user_info = res.data.data;
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            }
            ,

        }
    })
</script>