Files
littleTiger/template/mobile/rainbow/order/add_comment.html
2019-02-28 19:48:21 +08:00

343 lines
14 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<include file="public/header" title="评论晒单" body="g4"/>
<form id="add_comment" method="post" enctype="multipart/form-data">
<input type="hidden" name="prom_type" value="{$order_info['prom_type']}">
<input type="hidden" name="rec_id" value="{$rec_id}">
<!--顶部-s-->
<div class="classreturn loginsignup">
<div class="content">
<div class="ds-in-bl return">
<a href="javascript:history.back(-1);"><img src="__STATIC__/images/return.png" alt="返回"></a>
</div>
<div class="ds-in-bl search ">
<span>评价晒单</span>
</div>
<div class="ds-in-bl menu">
<a class="submit_com" href="javascript:void(0);" onclick="validate_comment(this)">提交</a>
</div>
</div>
</div>
<!--顶部-e-->
<!--评分-s-->
<div class="sp_idear">
<div class="maleri30">
<img src="{$order_goods.goods_id|goods_thum_images=100,100}"/>
<div class="com_igy p">
<p class="confine-wsp">{$order_goods.goods_name}</p>
<p class="confine-wsp shuxg">{$order_goods.spec_key_name}</p>
</div>
</div>
</div>
<!--评分-e-->
<!--评论-s-->
<div class="customer-messa comm_text_goods">
<div class="maleri30">
<textarea class="tapassa" onkeyup="checkfilltextarea('.tapassa','200')" d id="content_13" maxlength="200" name="content" placeholder="写下购买体会和使用感受来帮助其他小伙伴~"></textarea>
<span class="xianzd"><em id="zero">200</em>/200</span>
</div>
</div>
<!--评论-e-->
<!--上传图片-s-->
<div class="seravetype">
<div class="maleri30">
<ul id="imglen">
<label>
<li class="file">
<div class="shcph" id="fileList0">
<img src="__STATIC__/images/camera.png">
</div>
<input type="file" accept="image/*" name="comment_img_file[]" onchange="handleFiles(this,0)" style="display:none">
</li>
</label>
<label>
<li class="file">
<div class="shcph" id="fileList1">
<img src="__STATIC__/images/camera.png">
</div>
<input type="file" accept="image/*" name="comment_img_file[]" onchange="handleFiles(this,1)" style="display:none">
</li>
</label>
<label>
<li class="file">
<div class="shcph" id="fileList2">
<img src="__STATIC__/images/camera.png">
</div>
<input type="file" accept="image/*" name="comment_img_file[]" onchange="handleFiles(this,2)" style="display:none">
</li>
</label>
<label>
<li class="file">
<div class="shcph" id="fileList3">
<img src="__STATIC__/images/camera.png">
</div>
<input type="file" accept="image/*" name="comment_img_file[]" onchange="handleFiles(this,3)" style="display:none">
</li>
</label>
<label>
<li class="file">
<div class="shcph" id="fileList4">
<img src="__STATIC__/images/camera.png">
</div>
<input type="file" accept="image/*" name="comment_img_file[]" onchange="handleFiles(this,4)" style="display:none">
</li>
</label>
</ul>
<div class="inspectrepot p">
<div class="radio">
<span class="che" onclick="hideUserName(this)">
<input type="checkbox" name="hide_username" style="display:none;" id="hide_username" value="0">
<i></i>
<span>匿名评价</span>
</span>
</div>
</div>
</div>
</div>
<!--上传图片-e-->
<!--服务评价-s-->
<div class="wlcomenser ma-to-20">
<div class="maleri30">
<div class="p_zyft p">
<p class="fl">评分</p>
<p class="fr lifi">满意请给5分哦</p>
</div>
</div>
</div>
<div class="thirs_commen jsstar">
<div class="maleri30">
<div class="al_comentaid p">
<div class="taidh">商品符合度</div>
<div class="star_click">
<span class="comment-item-star_wr" title="1">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="2">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="3">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="4">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="5">
<span class="real-star_wr" ></span>
</span>
<input name="goods_rank" value="0" type="hidden">
</div>
</div>
<div class="al_comentaid p">
<div class="taidh">店家服务态度</div>
<div class="star_click">
<span class="comment-item-star_wr" title="1">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="2">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="3">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="4">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="5">
<span class="real-star_wr" ></span>
</span>
<input name="service_rank" value="0" type="hidden">
</div>
</div>
<if condition="$order_info['prom_type'] neq 5">
<div class="al_comentaid p">
<div class="taidh">物流发货速度</div>
<div class="star_click">
<span class="comment-item-star_wr" title="1">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="2">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="3">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="4">
<span class="real-star_wr" ></span>
</span>
<span class="comment-item-star_wr" title="5">
<span class="real-star_wr" ></span>
</span>
<input name="deliver_rank" value="0" type="hidden">
</div>
</div>
</if>
</div>
</div>
<!--服务评价-e-->
<input type="hidden" name="order_id" value="{$order_goods.order_id}">
<input type="hidden" name="goods_id" value="{$order_goods.goods_id}">
</form>
<script type="text/javascript">
/**
* 留言字数限制
* tea 要限制数字的class名
* nums :允许输入的最大值
* zero 输入时改变数值的ID
*/
function checkfilltextarea(tea,nums){
var len = $(tea).val().length;
if(len > nums){
$(tea).val($(tea).val().substring(0,nums));
}
var num = nums - len;
num <= 0 ? $("#zero").text(0): $("#zero").text(num); //防止出现负数
}
$(function(){
$(".jsstar input").val('');
//评分
$('.comment-item-star_wr').click(function(e){
var obj = $(this);
obj.find('span').addClass('comment-stars-width5');
obj.prevAll().find('span').addClass('comment-stars-width5').parent();
obj.nextAll().find('span').removeClass('comment-stars-width5');
obj.siblings('input').val(obj.attr('title'));
})
})
function hideUserName(obj){
if($(obj).hasClass('check_t')){
$('#hide_username').prop('checked',false);
$('#hide_username').val('0');
}else{
$('#hide_username').prop('checked',true);
$('#hide_username').val('1');
}
}
function validate_comment(obj){
$(obj).attr('disabled',true);
var content = $("#content_13").val();
var error = [];
var img_num = 0;
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";//全部图片格式类型
$(".file input").each(function(index){
FileExt = this.value.substr(this.value.lastIndexOf(".")).toLowerCase();
if(this.value!=''){
img_num++;
if(AllImgExt.indexOf(FileExt+"|")==-1){
error.push("第"+(index+1)+"张图片格式错误");
}
}
});
$(".jsstar input").each(function(index,e){
if(e.value == '0' || e.value == ''){
if(e.name == 'goods_rank'){
error.push('请给描述评分!');
};
if(e.name == 'service_rank'){
error.push('请给服务评分!');
};
if(e.name == 'deliver_rank'){
error.push('请给物流评分!');
};
}
});
if(content == ''){
error.push('请填写评价内容');
}
if(content.length < 10){
error.push('评论内容最少10个字符');
}
if(content.length>500){
error.push('评价内容长度超过限制');
}
if(error.length>0){
$(obj).attr('disabled',false);
showErrorMsg(error);
return false;
}else{
// var formObj = document.getElementById("add_comment");
var formData = new FormData();//表单id
$('#add_comment').find('input').each(function () {
if($(this).attr('name')=='comment_img_file[]'){
formData.append('comment_img_file[]', $(this)[0].files[0]);
}else{
formData.append($(this).attr('name'), $(this).val());
}
})
formData.append("content", $("textarea[name='content']").val());
$.ajax({
type: "POST",
url: "{:U('Mobile/Order/add_comment')}",
data: formData,
dataType: "json",
async: false,
cache: false, //上传文件不需要缓存
contentType: false,
processData: false, //因为data值是FormData对象不需要对数据做处理
error: function (data) {
alert(JSON.stringify(data));
$(obj).attr('disabled',false);
layer.open({content:"服务器繁忙, 请联系管理员!",time:2});
},
success: function (data) {
$(obj).attr('disabled',false);
if (data.status == 1) {
layer.open({content:data.msg,time:2,end:function () {
location.href = data.url;
}});
}else {
layer.open({content: data.msg, time: 2});
}
}
});
}
}
//显示上传照片
window.URL = window.URL || window.webkitURL;
function handleFiles(obj,id) {
fileList = document.getElementById("fileList"+id);
var files = obj.files;
img = new Image();
if(window.URL){
img.src = window.URL.createObjectURL(files[0]); //创建一个object URL并不是你的本地路径
img.width = 60;
img.height = 60;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src); //图片加载后释放object URL
}
if(fileList.firstElementChild){
fileList.removeChild(fileList.firstElementChild);
}
fileList.appendChild(img);
}else if(window.FileReader){
//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
img.src = this.result;
img.width = 60;
img.height = 60;
fileList.appendChild(img);
}
}else
{
//ie
obj.select();
obj.blur();
var nfile = document.selection.createRange().text;
document.selection.empty();
img.src = nfile;
img.width = 60;
img.height = 60;
img.onload=function(){
}
fileList.appendChild(img);
}
}
</script>
</body>
</html>