|
|
@@ -1,60 +1,111 @@
|
|
|
<!DOCTYPE html>
|
|
|
<!--HTML5 doctype-->
|
|
|
-<html ng-app="myapp">
|
|
|
+<html ng-app="myapp">
|
|
|
<head>
|
|
|
<title>壹管家</title>
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<!--引入css文件-->
|
|
|
-<!-- <link rel="stylesheet" href="--><?php //echo Yii::app()->request->baseUrl; ?><!--/css/bootstrap.min.css">-->
|
|
|
- <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bootstrap-3.3.7.min.css">
|
|
|
<!--引入js文件-->
|
|
|
- <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-1.10.2.min.js"></script>
|
|
|
- <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
|
|
|
+ <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-3.1.1.min.js"></script>
|
|
|
+ <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/AngularJS v1.4.3.min.js"></script>
|
|
|
+ <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/bootstrap-3.3.7.min.js"></script>
|
|
|
+
|
|
|
</head>
|
|
|
<body ng-controller="myctrl">
|
|
|
-<!--
|
|
|
-<div align="center">
|
|
|
-<h1>扫码关注壹管家获取更多资讯</h1>
|
|
|
-<img src="<?php /*echo Yii::app()->request->baseUrl; */?>/images/qryiguanjia.jpg" class="index_logo" style="width: 100%"/>
|
|
|
-</div>-->
|
|
|
-<div class="container">
|
|
|
- <img style="width: 100%" src="http://odulvej8l.bkt.clouddn.com/%E6%B0%91%E5%AE%BF%E4%BF%9D%E6%B4%81%E8%AF%A6%E6%83%85%E9%A1%B5.jpg" alt="">
|
|
|
- <form action="" class="form-horizontal ng-valid ng-dirty ng-valid-parse">
|
|
|
- <div class="form-group">
|
|
|
- <label>姓名:</label>
|
|
|
- <input type="text" class="form-control" placeholder="请输入您的姓名">
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label>选择区域:</label>
|
|
|
- <select name="area" class="form-control" ng-model="Area" ng-init="Area=AreaList[5].id" ng-options="info.id as info.name for info in AreaList" id="">
|
|
|
- <option value="">--选择区域--</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label>地址:</label>
|
|
|
- <input type="text" class="form-control" placeholder="请输入您的详细地址">
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label>手机号码:</label>
|
|
|
- <input type="text" class="form-control" placeholder="请输入您的手机号码">
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <button class="btn btn-success col-xs-2" style="width: 100%">提交</button>
|
|
|
+<div class="">
|
|
|
+ <img style="width: 100%"
|
|
|
+ src="http://odulvej8l.bkt.clouddn.com/%E6%B0%91%E5%AE%BF%E4%BF%9D%E6%B4%81%E8%AF%A6%E6%83%85%E9%A1%B5.jpg"
|
|
|
+ alt="">
|
|
|
+ <form action="<?php echo Yii::app()->request->baseUrl; ?>" method = 'post' class="container form-horizontal ng-valid ng-dirty ng-valid-parse">
|
|
|
+ <div class="container">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>姓名:</label>
|
|
|
+ <input type="text" class="form-control" placeholder="请输入您的姓名" ng-model="username">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>手机号码:</label>
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="请输入您的手机号码" ng-model="phone"/>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>选择区域:</label>
|
|
|
+ <select name="area" class="form-control" ng-model="Area" ng-init="Area=AreaList[5-1].id"
|
|
|
+ ng-options="info.id as info.name for info in AreaList" id="">
|
|
|
+ <option value="">--选择区域--</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>地址:</label>
|
|
|
+ <input type="text" class="form-control" placeholder="请输入您的详细地址">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <button class="btn btn-success col-xs-12"
|
|
|
+ data-container="body"
|
|
|
+ data-toggle="popover"
|
|
|
+ data-placement="top"
|
|
|
+ data-content="{{btnContent}}">
|
|
|
+ 预约服务
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+<!--模态框-->
|
|
|
+<div class="model" style="width: 100%;position: fixed;top: 0;background: rgba(0,0,0,0.4)">
|
|
|
+ <!--错误提示容器-->
|
|
|
+ <div class="model-box"style="border-radius: 10px;height: 15%;display:none;width: 70%;background: #fff;margin: 0 auto;top:50%;left:15%;position: fixed;">
|
|
|
+ <div class="model-title" style="font-family: '微软雅黑', 'Microsoft YaHei', 'STHeiti Light';width: 100%;text-align: center;font-size: 2.2rem;margin-top: 5%;"></div>
|
|
|
+ <div class="model-content" style="font-family: '微软雅黑', 'Microsoft YaHei', 'STHeiti Light';margin: 0 auto;width: 80%;background: #007aff;font-size: 1.3rem;margin-top: 5%;color: #fff;text-align: center;padding: 5px 0 5px 0"></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
<script>
|
|
|
- var myapp=angular.module('myapp',[]);
|
|
|
- myapp.controller('myctrl',['$scope',function ($scope) {
|
|
|
-
|
|
|
+ var myapp = angular.module('myapp', []);
|
|
|
+ myapp.controller('myctrl', ['$scope', function ($scope) {
|
|
|
+
|
|
|
+ $('.model').on('click', function () {
|
|
|
+ $('.model').css('height', '0');
|
|
|
+ $('.model-box').css('display', 'none');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('button').on('click', function () {
|
|
|
+ /*调用模态框*/
|
|
|
+ /*姓名输入错误*/
|
|
|
+ /*验证手机号码*/
|
|
|
+ if(!(/^1[34578]\d{9}$/.test($scope.phone))){
|
|
|
+ model('请重填','手机号码有误');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ /*验证服务范围内*/
|
|
|
+ if ($scope.Area != 6) {
|
|
|
+ model('抱歉','您所在区域不再服务范围之内');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ /*model*/
|
|
|
+ function model(title,content) {
|
|
|
+ /* title=null;
|
|
|
+ content=null;*/
|
|
|
+ $('.model-box').css('display','inline');
|
|
|
+ $('.model').height(window.screen.height);
|
|
|
+ $('.model-title').html(title);
|
|
|
+ $('.model-content').html(content);
|
|
|
+ }
|
|
|
+ console.log($('.model'));
|
|
|
+// alert('测试');
|
|
|
+ });
|
|
|
+
|
|
|
$scope.AreaList = [
|
|
|
{'id': 1, 'name': '黄浦区', 'parent': 1, type: '2'},
|
|
|
{'id': 2, 'name': '徐汇区', 'parent': 1, type: '2'},
|
洪海涛