strict_f.html 11.6 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <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/weui.min.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/swiper-3.4.2.min.css">
    <!--<link rel="stylesheet" href="http://at.alicdn.com/t/font_641470_jg64l6ijsg4lsor.css">-->
    <link rel="stylesheet" href="../../assets/css/my_f.css"/>
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <style>
        header {
            width: 100%;
            height: auto;
            font-size: 20px;
            /*background-color: #dbb25f;*/
        }

        .headers {
            background-color: #dbb25f;
        }

        .strict_box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 11px;
				color: #565656;
				padding: 0.26rem 0;
				background-color: #fff;
			}

			.strict_box .iconfont {
				color: #D8B25F;
				font-size: 15px;
				margin-right: 0.1rem;
			}

			.strict_box1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 11px;
				padding: 0.21rem 0.37rem;
				background-color: #fff;
			}

			.strict_box1_left {
				padding: 0.14rem 0.3rem;
				box-shadow: 0 0 3px #ccc;
				color: #686868;
				border-radius: 0.16rem;
			}

			.strict_box1_right {
				padding: 0.14rem 0.3rem;
				color: #FBA500;
				box-shadow: 0 0 3px rgba(251, 165, 0, 0.5);
				border-radius: 0.16rem;
			}

			.progress_box {
				margin: 0.1rem 0.26rem 0 0.26rem;
				background-color: #f5f5f5;
			}

			.progress {
				height: 0.08rem;
				background-color: #D8B25F;
				width: 0;
			}

			.target_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.46rem 0;
				box-shadow: 0 -3px 4px 0 #E4E4E4 inset;
				background-color: #fff;
			}

			.target_item {
				font-size: 17px;
				color: #060606;
				/*font-weight: 600;*/
				text-align: center;
				flex: 1;
				border-right: 1px solid #d9d9d9;
				padding: 0.2rem 0 0.1rem 0;
			}

			.target_item:last-child {
				border: 0;
			}

			.target_item_bottom {
				font-size: 12px;
				color: #565656;
			}

			.strict_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 17px;
				color: #000;
				padding: 0.35rem 0;
				background-color: #fff;
			}

			.strict_title span {
				flex: 1;
				text-align: center;
			}

			.strict_title .strict_title_item {
				border-right: 2px solid #D8B25F;
			}

			.strict_title .strict_title_item_active {
				color: #D8B25F;
			}

			.strict_content_title {
				padding: 0.32rem 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #060606;
				background-color: #fff;
			}

			.strict_content_title .quan {
				padding: 0.1rem 0;
				border-bottom: 1px solid #333;
			}

			.strict_box_img {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.strict_box_img img {
				width: 100%;
			}

			.strict_btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				padding: 0 0 0 0.57rem;
				/*margin: 0.08rem 0 0 0;*/
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				z-index: 2;
				/*border-top: 1px solid #fff;*/
			}

			.strict_btn_price {
				font-size: 18px;
				color: #E87139;
				flex: 1;
			}

			.strict_btn_right {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 10px;
				color: #333;
			}

			.goPay {
				padding: 0.28rem 0;
				background-color: #D8B25F;
				font-size: 15px;
				color: #fff;
				flex: 1;
				text-align: center;
			}

			.strict_btn_right_item {
				padding: 0 0.32rem;
				display: flex;
				align-items: center;
				flex-direction: column;
				border-left: 1px solid #E4E4E4
			}

			.rmb {
				font-size: 13px;
			}

			.index_on {
				background-color: #fff;
				border-bottom: 1px solid #f2f2f2;
			}

			.index_on .iconfont {
				color: #D8B25F;
			}
		/*flex布局*/
		[v-cloak]{
			display: none;
		}
    </style>
</head>
<body>
<div id="app" v-cloak>
	<div id="container"></div>
    <header :class="index===0?'headers':''">

        <div class="index1" v-else-if="index==1">
            <div class="index1_item index_on">
                <!--<div class="index1_item index_on">-->
                <div></div>
                <div class="iconfont icon-fenxiang-tianchong"></div>
            </div>
        </div>

    </header>
    <div class="warp" v-cloak>
			<div class="index1">
				<img :src="banner" alt="">
			</div>
			<div class="strict_box" id="main">
				<div><span class="iconfont icon-fenhong"></span><span>尊享分红收益</span></div>
				<div><span class="iconfont icon-xunzhang"></span><span>高额消费金额</span></div>
				<div><span class="iconfont icon-tishengfantaishuai"></span><span>提升健康水平</span></div>
			</div>
			<div class="strict_box1">
				<span class="strict_box1_left"><span v-if="state==1">开放认购中</span><span v-else>未开放认购</span></span>
				<span class="strict_box1_right">认购进度{{progress}}%</span>
			</div>
			<div class="progress_box">
				<div class="progress" :style="{width:progress+'%'}"></div>
			</div>
			<div class="target_box">
				<div class="target_item">
					<div>{{taget}}人</div>
					<div class="target_item_bottom">II期目标</div>
				</div>
				<div class="target_item">
					<div>{{num}}人</div>
					<div class="target_item_bottom">已认购</div>
				</div>
				<div class="target_item">
					<div>{{toWan(money)}}元起</div>
					<div class="target_item_bottom">起购金额</div>
				</div>
			</div>
			<div class="strict_title">
				<span :class="['strict_title_item',show_img?'strict_title_item_active':'']" @click="show_img=true">慈界介绍</span>
				<span @click="show_img=false" :class="{strict_title_item_active:!show_img}">权益方案</span>
			</div>
			<div class="strict_content_title" v-show="show_img">
				<div><span>慈</span><span class="quan">界介</span><span>绍</span></div>
			</div>
			<div class="strict_content_title" v-show="!show_img">
				<div><span>权</span><span class="quan">益方</span><span>案</span></div>
			</div>
			<div class="strict_box_img" v-show="show_img">
				<div v-html="introduce"></div>
				<!--<img src="../../assets/image/cjit_03.jpg" alt="">-->
			</div>
			<div class="strict_box_img" v-show="!show_img">
				<div v-html="scheme"></div>
				<!--<img src="../../assets/image/cjit_02.png" alt="">-->
			</div>
			<div class="strict_btn">
				<div class="strict_btn_price"><span class="rmb">￥</span>{{money}}元起</div>
				<div class="strict_btn_right">
					<div class="strict_btn_right_item" @click="openCli"><span class="iconfont icon-Fill"></span><span>进群</span>
					</div>
					<div class="goPay" @click="go_pay">去认购</div>
				</div>
			</div>
		</div>

    <footer>
        <div class="footer_item" :class="{footer_item_active:index==0}" @click="changeTab(0)">
            <i class="iconfont icon-yuanjiaojuxingkaobei"></i>
            <span>严选</span>
        </div>
        <div class="footer_item" :class="{footer_item_active:index==1}" @click="changeTab(1)">
            <i class="iconfont icon-xingzhuang"></i>
            <span>投资</span>
        </div>
        <div class="footer_item" :class="{footer_item_active:index==2}" @click="changeTab(2)">
            <i class="iconfont icon-wo"></i>
            <span>我的</span>
        </div>

    </footer>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.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 type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script>
    // window.onLoad = function () {
    //     var map = new AMap.Map('container');
    // };
    // var url = 'https://webapi.amap.com/maps?v=1.4.8&key=ef53760bd959a4df08b7d4587280e642&callback=onLoad';
    // var jsapi = document.createElement('script');
    // jsapi.charset = 'utf-8';
    // jsapi.src = url;
    // document.head.appendChild(jsapi);
    new FastClick(document.body);


    var app = new Vue({
        el: "#app",
        data: {
            index: 1,
            change_index: '',
			show_img: true,
			share_show: false,
			banner: '',
			state: 0, //开放状态
			taget: 0, //目标数量
			num: 0, //已认购
			progress: 0, //进度
			money: 0, //认购金额
			introduce: '', //介绍
			scheme: '', //方案
			wechat: '',
			top: '0'
        },
        created: function () {
			this.crowd(); //第三栏
        },
		mounted: function() {
			window.addEventListener('scroll', this.handleScroll)
		},
        methods: {
            // 我的消息
            // 去认购
			go_pay: function() {
				openView('strict_pay', 'strict/strict_pay', '认购')
			},
			// 分享
			share: function() {
				api.openFrame({
					bgColor: 'rgba(0,0,0,0.05)',
					name: 'share',
					url: '../common/share.html',
					bounces: false,
					animation: {
						type: "push",
						subType: "from_bottom",
						duration: 300
					},
					rect: {
						x: 0,
						y: 0,
						w: 'auto',
						h: 'auto'
					}
				});
			},
			// 展示微信号
			openCli: function() {
				api.openFrame({
					bgColor: 'rgba(0,0,0,0.05)',
					name: 'group',
					url: '../common/group.html',
					bounces: false,
					animation: {
						type: "reveal",
						subType: "from_bottom",
						duration: 300
					},
					pageParam: {
						wechat: app.wechat
					},
					rect: {
						x: 0,
						y: 0,
						w: 'auto',
						h: 'auto'
					}
				});
			},
			// 定位头部
			handleScroll: function() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				var offsetTop = document.querySelector('#main').offsetTop;
				if(scrollTop > offsetTop) {
					app.share_show = true
				} else {
					app.share_show = false
				}
			},
			// 移除监听事件
			destroyed: function() {
				window.removeEventListener('scroll', this.handleScroll)
			},
			// 获取详情
			crowd: function() {
			    var app = this;
				var header = {
					"XX-Device-Type": getDevice(),
					'XX-Token': getToken()
				};
				getRequest('post', 'portal/Goods/crowd', null, header).then(function(res) {
					// alert(JSON.stringify(res));
					if(res.data.code == 1) {
						app.banner = res.data.data.banner;
						app.state = res.data.data.state;
						app.taget = res.data.data.taget;
						app.num = res.data.data.num;
						app.progress = res.data.data.progress;
						app.money = res.data.data.money;
						app.introduce = res.data.data.introduce;
						app.scheme = res.data.data.scheme;
						app.wechat = res.data.data.wechat;
					} else {
						toastMsg(res.data.msg)
					}
					loadEnd();
				})
			},
            // 切换底部导航
            changeTab: function (res) {
                //跳转页面
            }
        }
    })
</script>