vipqy.html 12.4 KB
<!DOCTYPE html >
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的权益</title>
		<include file="public/header" />
		<link href="/static/js/layer/need/layer.css" type="text/css" rel="styleSheet" id="layermcss">
		<style>
			.xmlist{ line-height: 36px; padding: 10px 20px;}
			.xmlist .xmtitle{  font-size: 14px;border-bottom: #eee solid 1px; font-weight: bold}
			.xmlist .xmtitle1{  font-size: 14px;border-bottom: #eee solid 1px;background-color: #fff}
			.xmlist span { float: left;}
			.btn{ border-radius: 2px; background-color: #eee6ee; border: solid 1px #ccc; width: 60px; line-height: 24px; margin: 5px 0 5px 0; text-align: center }
			.btn1{ border-radius: 2px; background-color: #ccc; border: solid 1px #ccc; width: 60px; line-height: 24px; margin: 5px 0 5px 0; text-align: center;
				color: #fff; }


			.couponImg {
				width: 150px;
				position: absolute;
				left: 50%;
				top: -70px;
				margin-left: -75px;
			}
			.obtain {
				font-size: 18px;
				color: #4e220b;
				margin-top: 55px;
			}
			.select {
				width: 100%;
				background-color: #C4182E;
				color: #FFFFFF;
				font-size: 16px;
				margin-top: 20px;
				padding: 15px 0;
				border-bottom-left-radius: 16px;
				border-bottom-right-radius: 16px;
				-moz-border-radius-bottomleft: 16px;
				-moz-border-radius-bottomright: 16px;
				-webkit-border-bottom-left-radius: 16px;
				-webkit-border-bottom-right-radius: 16px;
			}
			.moneyTit {
				font-size: 14px;
				color: #878787;
				margin: auto;
				border-bottom: 2px solid #EEEEEE;
			}
			a, input, textarea {
				text-decoration: none;
				outline: 0;
			}
			a {
				color: #C4182E;
				text-decoration: none;
				blr: expression(this.onFocus=this.blur());
			}
			.moneyTit div {
				width: 49%;
				vertical-align: top;
				display: inline-block;
				float: left;
				text-align: center;
				border-right: none;
			}
			.moneyTit div p.on {
				border-bottom: 3px solid #C4182E;
				color: #C4182E;
			}
			.moneyTit div p {
				vertical-align: top;
				display: inline-block;
				width: 90%;
				padding: 5px;}
			.bor1{
				border-right: 2px solid #eeeeee; border-bottom: 2px solid #EEEEEE;
			}

		</style>
		<body>

			<div id="tbh5v0">
				<img src="__STATIC__/images/qyizy.jpg" style="width: 100%" />
				<div class="user_com">
					<ul class="Wallet_ul" style="background-color: #fff">

						<if condition="$pm_erpid">
						<!--<li id="gourl" class="down">-->

								<!--<span  class="cut vam" style="display:inline-block;width:70%;font-size: 16px">剩余服务次数({$xmnum}项)</span>-->

						<!--</li>-->

							<div class="moneyTit">
								<a id="ky_a"  onclick="showPowe(0)"><div  style="border-right: 2px solid #eeeeee;"><p class="on">服务项目</p></div></a>
								<a id="nky_a"  onclick="showPowe(1)"><div class="bor1"><p>代金券</p></div></a>
							</div>
							<div class="clear"></div>
							<div style="background-color: #fff" id="xmshow" class="">

								<Div class="xmlist">
									<span class="xmtitle" style=" width: 30%;">项目名称</span>
									<span class="xmtitle"  style=" width: 30%;">有效期</span>
									<span id="use1" class="xmtitle"  style=" width: 20%;text-align: center;">剩余次数</span>
									<span id="use2" class="xmtitle  dn"  style=" width: 20%;text-align: center;">剩余数量</span>
									<span id="use3" class="xmtitle"  style=" width: 20%;text-align: center;">使用</span>
									<span id="use4" class="xmtitle dn"  style=" width: 20%;text-align: center;">领取</span>
									<div class="clear"></div>
									<div id="fList" class="fList" >
									<empty name="list">
										<span  class="xmtitle1" style=" width: 100%; text-align: center ">暂无项目</span>
										<else/>
									<foreach name="list" item="v" key="k">
									<span  class="xmtitle1" style=" width: 30%; ">{$v.ItemName}</span>
									<span class="xmtitle1" style=" width: 30%;">{$v.EndDate|substr=0,10}</span>
									<span class="xmtitle1"  style=" width: 20%; text-align: center">{$v.Qty}</span>
									<span class="xmtitle1"  style=" width: 20%; text-align: center">
										<if condition="$v['Qty'] neq 0">
										<image style="width: 14px;height: 14px;margin-left: 8px" src="__STATIC__/images/qyiewm1.png" id="openwx" onclick="openewm(this)" ewm="^{$geterpvipid}|{$v.ItemId}|TY01|" ></image>
									    <else/>
										<image style="width: 14px;height: 14px;margin-left: 8px" src="__STATIC__/images/qyiewm2.png" id="openwx" onclick="warn(0)" ></image>
										</if>
									</span>
									<div class="clear"></div>
									</foreach>
									</empty>
									</div>
									<div id="qList" class="qList dn" >
									<empty name="qlist">
										<span  class="xmtitle1" style=" width: 100%; text-align: center ">暂无项目</span>
										<else/>
									<foreach name="qlist" item="v" key="k">
										<span  class="xmtitle1" style=" width: 30%; overflow: hidden;white-space:nowrap;text-overflow:ellipsis; ">{$v.CouponName}</span>
										<span class="xmtitle1" style=" width: 30%;">{$v.EndDate|default='不限'}</span>
										<span class="xmtitle1" style=" width: 20%;text-align: center;">{$v['SecondNo']}</span>
										<if condition="$v['SecondNo'] neq 0">
										<span class="xmtitle1 "  style=" width: 20%; text-align: center;" onclick="okqy('{$v.ID}','{$v.CouponName}',this);">
											<!--<span class="btn">立即领取</span>-->
											<image style="width: 20px;height: 20px;" src="__STATIC__/images/qyilq1.png"  ></image>
										</span>
										<else/>
											<span class="xmtitle1 "  style=" width: 20%; text-align: center;">
											<!--<span class="btn1">已领取</span>-->
											<image style="width: 20px;height: 20px;" src="__STATIC__/images/qyilq2.png"  onclick="warn(1)" ></image>
										</span>
										</if>
										<div class="clear"></div>
									</foreach>
									</empty>
									</div>
								</Div>
							</div>



							<Div class="clear"></Div>
							<li id="downshow" class="down">
									<span  class="cut vam" style="display:inline-block;width:70%; font-size: 16px">会员专项特权</span>

							</li>
							<Div style="padding: 10px 20px 10px 20px" id="zxsm" class="">
								{$vipqy_remark}

							</Div>

						</if>

					</ul>
				</div>
			</div>
			<include file="public/footer_nav" />
			<input type="hidden" id="hidstoid" name="hidstoid" value="{$Think.request.stoid}">

			<div class="layermbox layermbox_lin dn" onclick="hide1()">
				<div class="laymshade"></div>
				<div class="layermmain">
					<div class="section">
						<div class="layermchild  layermanim">
							<div class="layermcont" style="padding: 0;">
								<img class="couponImg" src="__STATIC__/images/integral/coupon.png" />
								<p class="obtain">恭喜您获得20元优惠券</p>
								<p class="select">查看我的优惠券</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--弹窗 20170414二维码-->
			<div class="layercode layermbox layermbox0_1 dn" onclick="hide()">
				<div class="laymshade"></div>
				<div class="layermmain">
					<div class="ewmbox">
						<div class="codeImg">
							<img  id="ewm_img" />
						</div>
						<p class="txt">扫一扫上面的二维码,即可使用</p>
					</div>
				</div>
			</div>
		</body>
		<script type="text/javascript">

			function warn($a) {
			    if ($a==0){
                    layer.open({content:'剩余次数为0,不能使用!',time:2});
				}else {
                    layer.open({content:'剩余数量为0,不能领取!',time:2});
				}
            }
			
            function showPowe($t) {
				var ii=layer.open({type:2});
                setTimeout(function () {
                    layer.close(ii);
                    if($t==0){
                        $("#ky_a").find("div").removeClass("bor1");
                        $("#ky_a").find("div").find("p").addClass("on");
                        $("#nky_a").find("div").addClass("bor1");
                        $("#nky_a").find("div").find("p").removeClass("on");
                        $("#qList").addClass("dn");
                        $("#fList").removeClass("dn");
                        $("#use1").removeClass("dn");
                        $("#use2").addClass("dn");
                        $("#use3").removeClass("dn");
                        $("#use4").addClass("dn");
                    } else{
                        $("#ky_a").find("div").addClass("bor1");
                        $("#ky_a").find("div").find("p").removeClass("on");
                        $("#nky_a").find("div").removeClass("bor1");
                        $("#nky_a").find("div").find("p").addClass("on");
                        $("#fList").addClass("dn");
                        $("#qList").removeClass("dn");
                        $("#use2").removeClass("dn");
                        $("#use1").addClass("dn");
                        $("#use4").removeClass("dn");
                        $("#use3").addClass("dn");
                    }
                },800);
            }

            /* 获取当前时间*/
            function getNow(s) {
                return s < 10 ? '0' + s: s;
            }
            //打开二维码
            function openewm (ob) {
                var myDate = new Date();
				//获取当前年
                var year=myDate.getFullYear();
				//获取当前月
                var month=myDate.getMonth()+1;
				//获取当前日
                var date=myDate.getDate();
                var h=myDate.getHours();       //获取当前小时数(0-23)
                var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                var s=myDate.getSeconds();

                var now=year+'-'+getNow(month)+"-"+getNow(date)+" "+getNow(h)+':'+getNow(m)+":"+getNow(s);
                var url="/index.php?m=Home&c=Index&a=qr_code&data=";
                var ewmlist= $(ob).attr("ewm");
                ewmlist+=now;
                $("#ewm_img").attr("src",url + ewmlist);
               
                $(".layercode").show();
            }
//            $("#openwx").click(function () {
//                var url="/index.php?m=Home&c=Index&a=qr_code&data=";
//                var emalist= $("#openwx").attr("ewm");
//                alert(url + emalist);
//                $("#ewm_img").attr("src",url + emalist);;
//                $(".layercode").show();
//            })
            //点击二维码,关闭二维码弹窗
            $(".layercode").click(function(){
                $(".layercode").hide();
            });

            var getstoid={$Request.param.stoid};
            function hide(){
                $(".layermbox_lin").addClass("dn");
                 location.href=location.href;
            }

            function hide1(){
                $(".layermbox_lin").addClass("dn");
            }

            $(".select").click(function (event) {
                event.stopPropagation();
                window.location.href="/index.php/mobile/User/coupon/stoid/"+getstoid;
            })

			$("#downshow").click(function () {
				$(this).toggleClass("down");
				if ($(this).hasClass("down"))
				{
				    $("#zxsm").show();
				}
				else {
                    $("#zxsm").hide();
				}
            })

            $("#gourl").click(function () {
                $(this).toggleClass("down");
                if ($(this).hasClass("down"))
                {
                    $("#xmshow").show();
                }
                else {
                    $("#xmshow").hide();
                }
            })

			function okqy(sid,qname,ob) {
                var ii=layer.open({type:2});
                $.ajax({
                    type: 'get',
                        url: "/index.php?m=Mobile&c=User&a=vipqy_sumbit&stoid="+$("#hidstoid").val()+"&sid="+sid,
                    data: {},
                dataType: 'json',
                    success: function(data) {

                    layer.close(ii);
                    if(data.code == 0) {
                        $(".obtain").text("恭喜您获得【"+qname+"】优惠券");
                        $(".layermbox_lin").removeClass("dn");
                        var txt= $(ob).prev().text();
                        txt=parseFloat(txt)-1;
                        $(ob).prev().text(txt);

                        //如果次数都已经没有了
                        if(txt==0){
                            $(ob).find("img").attr("src","__STATIC__/images/qyilq2.png");
						}

                    }
                    else
					{
                        layer.open({content:data.msg,time:3});
                        return false;
					}
                }
            })
            }

		</script>

</html>