# 代码汇总
```
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui2.1/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/reset_pika.css" />
<style type="text/css">
body{background: #FFFFFF;font-family: "微软雅黑";}
footer {
position: absolute;
width: 100%;
left: 0;
right:0;
bottom: 0;
top:0;
overflow: hidden;
z-index: 10;
padding: 0px;
background-color: #fafafa;
}
footer #ask-reply-box{
position: absolute;
bottom:0;
left:0;
right: 0;
}
/*文章*/
.aui-content-padded h2{line-height: 36px; border-bottom: 1px solid #dddddd;padding-bottom: 10px;}
.aui-content-padded img{margin-bottom: 15px;margin-top: 15px;}
.aui-content-padded p{line-height: 24px;}
/*提交按钮*/
.aui-bar-tab{background: #f4f5f6;}
.search-input {
height: 1.6rem;
line-height: 1.6rem;
background: #ffffff;
border-radius: 30px;
position: relative;
font-family:"aui_iconfont" !important;
text-align: left;
padding-left: 1.5rem;
color: #999999;
}
.search-input:after {
position: absolute;
left: 0;
padding-left: 0.5rem;
content: "\e615";
}
.fontred{color:#FF0000;}
/*底部切换栏 */
textarea {
width: 100%;
}
/*底部切换栏*/
.ask-input {
height: 32px;
line-height: 32px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
color: #999;
padding-left: 5px;
}
.ask-text {
height: 120px;
line-height: 30px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
color: #666;
overflow: hidden;
}
.ask-text textarea {
height: 100%;
padding: 5px;
margin: 0;
border: none;
}
.mark {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
width: 100%;
display: none;
z-index: 1;
}
.ask-reply-btn {
padding: 8px 0;
}
#ask-reply-box {
padding: 10px;
}
#aui-footer.show {
-webkit-animation: showIn .5s ease both;
animation: showIn .5s ease both;
}
@-webkit-keyframes showIn {
form {
height: 55px;
background: rgba(255, 255, 255, 0.5);
}
to {
height: 200px;
background: rgba(255, 255, 255, 1);
}
}
@-webkit-keyframes hideIn {
from {
opacity: 1;
top: 8px;
}
to {
opacity: 0;
top: -20px;
}
}
</style>
</head>
<body>
<!--文章/start-->
<div class="aui-content-padded" id="portal_article_html">
</div>
<!--文章/end-->
<!--评论列表/start-->
<div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">评论</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;" id="user_comment_html">
</ul>
</div>
<!--评论列表/end-->
<!--透明黑背景-->
<div class="mark" id="mark"></div>
<!--提交按钮/start-->
<footer class="aui-bar aui-bar-tab aui-margin-t-15" id="aui-footer">
<!--评论框-->
<div class="aui-bar-tab-item aui-padded-l-15 aui-padded-r-15" tapmode style="width: auto;" id="ask-input" onclick="showReply()">
<div class="search-input aui-font-size-14">请输入评论内容</div>
</div>
<!--弹出评论框-->
<div id="ask-reply-box">
<div class="ask-text" id="ask-text">
<textarea placeholder="请输入你的评论内容！" id="commentCon"></textarea>
</div>
<div class="aui-btn aui-btn-block aui-btn-info ask-reply-btn" onclick="present();">提交</div>
</div>
<!--评论图标，点进去是列表-->
<div class="aui-bar-tab-item" id="userComment" tapmode style="width: 2.2rem;" >
<i class="aui-iconfont aui-icon-comment" onclick="ancho('comment_list');"></i>
</div>
<!--收藏-->
<div class="aui-bar-tab-item" id="userStar" tapmode style="width: 2.2rem;">
</div>
<!--分享-->
<div class="aui-bar-tab-item" id="share" tapmode style="width: 2.2rem;" onclick="openSharebox()">
<i class="aui-iconfont aui-icon-share"></i>
</div>
</footer>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/newthink/load.js"></script>
<script type="text/javascript" src="../../script/assets/doT.min.js"></script>
<script type="text/javascript" src="../../script/newthink/common.js"></script>
<script type="text/javascript" src="../../script/newthink/user.js"></script>
<script type="text/javascript" src="../../script/aui/aui-popup-new.js" ></script>
<script type="text/javascript" src="../../script/aui/aui-sharebox.js" ></script>
<!--文章内容-->
<script id="portal_article_script" type="text/x-dot-template" >
<h2>{{=it.post_title}}</h2>
<div class="aui-font-size-14" style="color:#999999;padding-top:10px;">{{=it.post_date}} </div>
<div>
{{=it.post_content}}
</div>
</script>
<!--有评论-->
<script id="user_comment_script" type="text/x-dot-template" >
{{ for (var i = 0; i< it.length; i++){ }}
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="{{=it[i].avatar}}" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">{{=it[i].full_name}}</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
{{=it[i].content}}
</div>
<div class="aui-info">
{{=it[i].createtime}}
</div>
</div>
</div>
</li>
{{ } }}
</script>
<!--暂无评论-->
<script id="user_comment_null_script" type="text/x-dot-template" >
<li class="aui-list-item">
<div class="aui-list-item-text">
暂无评论
</div>
</li>
</script>
<!--收藏状态-->
<script id="collect_status" type="text/x-dot-template" >
{{ if(it.status == 1){ }}
<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>
{{ }else{ }}
<i class="aui-iconfont aui-icon-star" onclick="collectArticle();" ></i>
{{ }; }}
</script>
<script type="text/javascript">
//初始化评论框隐藏
$api.css($api.byId("ask-reply-box"),"display:none");
//打开评论框
function showReply(){
$api.css($api.dom(".mark"),"display:block");
$api.css($api.byId("ask-input"),"display:none");
$api.css($api.byId("userComment"),"display:none");
$api.css($api.byId("userStar"),"display:none");
$api.css($api.byId("share"),"display:none");
$api.css($api.byId("ask-reply-box"),"display:block");
$api.addCls($api.byId("aui-footer"),"show");
// 在输入框获取焦点, 键盘弹起后, 真的是一行代码 IOS下键盘滚动最下边
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
return;
}
apiready = function() {
api.parseTapmode();
//延迟获取页面的整个高度，这个好用
setTimeout( function(){
var bodyH = $api.dom('body');
var pageHeight = $api.offset(bodyH).h;
//alert(pageHeight);
$api.css($api.dom(".mark"),'height:'+pageHeight+'px');
}, 3000 );//延迟2000毫米
//加载后点击mark的事件
$api.addEvt($api.byId('mark'), 'click', clickMark);
portalArticle(); //文章内容
user_comment(); //文章评论
collectStatus(); //收藏状态
}
//点击背景一部分内容消失
function clickMark(){
$api.css($api.dom(".mark"),"display:none");
$api.css($api.byId("ask-input"),"display:table-cell");
$api.css($api.byId("userComment"),"display:table-cell");
$api.attr($api.byId('commentCon'),'autofocus','false');
//$api.removeAttr($api.byId('commentCon'),'autofocus');
$api.css($api.byId("ask-reply-box"),"display:none");
$api.css($api.byId("userStar"),"display:table-cell");
$api.css($api.byId("share"),"display:table-cell");
$api.css($api.byId("ask-reply-box"),"display:none");
$api.removeCls($api.byId("aui-footer"),"show");
clearInterval(interval);
}
//文章内容
function portalArticle(){
let object_id = api.pageParam.object_id;
let serverURL = Config.api.Portal_Article;
let data = {values:{id:object_id}};
let callback = function(ret){
if(ret.data.info){
set_doT(ret.data.info, 'portal_article_script', 'portal_article_html',true);
} else {
// alert(JSON.stringify(err));
api.toast({
msg: '网络错误' + '网络请求:' + err.statusCode + '错误码:' + err.code,
duration: 2000,
location: 'middle'
});
}
};
runAjax(serverURL, data,callback);
}
//文章评论 20条
function user_comment(){
let object_id = api.pageParam.object_id;
let serverURL = Config.api.User_Article_Comment;
let data = {values:{post_id:object_id}};
let callback = function(ret){
if(ret.data.status == 1){
set_doT(ret.data.info, 'user_comment_script', 'user_comment_html',true);
}else{
set_doT(ret.data.info, 'user_comment_null_script', 'user_comment_html',true);
}
}
runAjax(serverURL,data,callback);
}
//onclick锚点定位
function ancho(num) {
let url = window.location.href.substr(0, window.location.href.indexOf("#"));
window.location.href = url + '#' + num;
}
//收藏状态
function collectStatus(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect_Status;
let data = {
values:{
article_id:article_id,
uid:uid
}
};
var callback = function(ret){
if(ret.data){
dotTpl('collect_status','userStar',ret.data);
}else{
showToast('判断收藏状态错误', 2, 'bottom');
}
};
runAjax(serverURL,data,callback);
}
//取消收藏
function cancelCollectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Cancel_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();"></i>');
showToast('取消收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('取消收藏失败！', 2000, 'bottom');
}
}
runAjax(serverURL,data,callback);
}
//收藏
function collectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>');
showToast('收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('收藏失败！', 2000, 'bottom');
}
}
runAjax(serverURL,data,callback);
}
//提交评论
function present() {
if ($api.byId('commentCon').value == '') {
showToast('请填写评论内容', 2, 'bottom');
return;
}
let commentText = $api.val($api.byId('commentCon')),
uid = $api.getStorage('user').id, //用户id
article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Comment_Submit;
let data = {values:{
commentText:commentText,
uid:uid,
article_id:article_id,
}};
runAjax(serverURL,data,function(ret, err) {
if(ret.data.status == '1') {
api.toast({
msg: ret.data.msg,
duration: 2000,
location: 'middle'
});
$api.val($api.byId('commentCon'),'');
clickMark(); //评论框消失
user_comment(); //更新评论内容
ancho('comment_list'); //跳转到评论锚点
} else {
api.toast({
msg: ret.data.msg,
duration: 2000,
location: 'middle'
});
}
});
}
//拨打店内电话
var popup = new auiPopup();
function telShop(location){
popup.init({
frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
location:location,//位置，top(默认：顶部中间),top-left top-right,bottom,bottom-left,bottom-right
buttons:[{
image:'../../image/logo/pin.png',
text:'拨打平阳店啤咔店电话',
value:'0351-1234567'//可选
},{
image:'../../image/logo/xiao.png',
text:'小店啤咔店电话',
value:'0351-2345678'//可选
}],
},function(ret){
if(ret){
var tel = ret.buttonValue;
call_tel(tel);
}
})
}
//打开分享
var sharebox = new auiSharebox();
function openSharebox(){
sharebox.init({
frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
buttons:[{
image:'../../image/share/wx-circle.png',
text:'朋友圈',
value:'wx-circle'
}],
col:5,
cancelTitle:'关闭'//可选,当然也可以采用下面的方式使用图标
},function(ret){
if(ret){
//回调的使用
if (ret.buttonIndex == 1){
shareWebpage('timeline')
}
}
})
}
</script>
```
