html部分:
<div class="evaluate_main">
<div class="evaluate_title">
<div class="line"></div>
我的评价
</div>
<div class="evaluateP_info">
<div class="info_tit">
<span style="color: #404040;">订单号:</span>
<span style="color: #9E9E9E;">2768294387409328020</span>
</div>
<div class="info_main">
<div class="left">
<div class="imgWrap">
<img src="" alt="">
</div>
<div class="description">
【现货发】正宗福建茂谷柑水果橘子京东生鲜净重 5斤装
当季新鲜水果胜沃柑皇帝柑 茂谷柑3斤中果
</div>
<div class="price">
<span>¥ 31</span>
<span>.00</span>
</div>
<div class="specification">5斤装×1</div>
</div>
<div class="right">
<div class="right_tit">商品评分</div>
<div class="evaluate_div">
<div>
<span>描述相符:</span>
<ul class="rating-level" id="stars1">
<!-- start:value 即设置当前星数的分值 -->
<li><a class="one-star" star:value="100" href="#">100</a></li>
<li><a class="two-stars" star:value="200" href="#">200</a></li>
<li><a class="three-stars" star:value="300" href="#">300</a></li>
<li><a class="four-stars" star:value="400" href="#">400</a></li>
<li><a class="five-stars" star:value="500" href="#">500</a></li>
</ul>
<span class="result" id="stars1-tips"></span>
<input type="hidden" id="stars1-input" name="a" value="" size="2" />
</div>
<div>
<span>服务态度:</span>
<ul class="rating-level" id="stars2">
<!-- start:value 即设置当前星数的分值 -->
<li><a class="one-star" star:value="100" href="#">100</a></li>
<li><a class="two-stars" star:value="200" href="#">200</a></li>
<li><a class="three-stars" star:value="300" href="#">300</a></li>
<li><a class="four-stars" star:value="400" href="#">400</a></li>
<li><a class="five-stars" star:value="500" href="#">500</a></li>
</ul>
<span class="result" id="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="a" value="" size="2" />
</div>
<div>
<span>发货速度:</span>
<ul class="rating-level" id="stars3">
<!-- start:value 即设置当前星数的分值 -->
<li><a class="one-star" star:value="100" href="#">100</a></li>
<li><a class="two-stars" star:value="200" href="#">200</a></li>
<li><a class="three-stars" star:value="300" href="#">300</a></li>
<li><a class="four-stars" star:value="400" href="#">400</a></li>
<li><a class="five-stars" star:value="500" href="#">500</a></li>
</ul>
<span class="result" id="stars3-tips"></span>
<input type="hidden" id="stars3-input" name="a" value="" size="2" />
</div>
</div>
<form action="">
<div class="form-check form-check-inline" style="margin-right: 30px;">
<input class="form-check-input" type="radio" name="evaluate" value="3" id="good">
<label class="form-check-label">好评</label>
</div>
<div class="form-check form-check-inline" style="margin-right: 30px;">
<input class="form-check-input" type="radio" name="evaluate" value="2" checked id="soso">
<label class="form-check-label">中评</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="evaluate" value="1" id="bad">
<label class="form-check-label">差评</label>
</div>
<div class="form-group" style="display: flex;margin: 23px 0;">
<label style="width: 80px;flex-shrink: 0;">问题描述:</label>
<textarea class="form-control" rows="4" style="resize: none;width: 348px;"></textarea>
</div>
<div class="form-group" style="display: flex">
<label style="width: 80px;flex-shrink: 0;">上传凭证:</label>
<div class="imgList">
<div class="imgWrap"><img
src="../resources/style/system/front/default/images/default.png" alt=""></div>
<div class="imgWrap"><img
src="../resources/style/system/front/default/images/default.png" alt=""></div>
<div class="imgWrap"><img
src="../resources/style/system/front/default/images/default.png" alt=""></div>
<div class="chooseFile">选择文件</div>
<small id="imgHelp"
class="form-text text-muted">最多可上传3张图片,每张图片大小不超过5M,支持bmp,gif,jpg,png,jpeg格式文件</small>
<input id="upload" name="file" accept="image/*" type="file" style="display: none">
<script>
// 上传的方法
$(function () {
$(".chooseFile").click(function () {
$("#upload").click(); //隐藏了input:file样式后,点击头像就可以本地上传
$("#upload").on("change", function () {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径
console.log(objUrl, '输出图片路径')
if (objUrl) {
// $("#pic").attr("src", objUrl); //将图片路径存入src中,显示出图片
upimg();
}
});
});
});
//建立一?可存取到?file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
//上传头像到服务器
function upimg() {
console.log(344)
var pic = $('#upload')[0].files[0];
var file = new FormData();
file.append('image', pic);
$.ajax({
url: "/uploadImg",
type: "post",
data: file,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
var res = data;
// $("#resimg").append("<img src='/" + res + "'>")
}
});
}
</script>
</div>
</div>
<div class="submit_evaluate">提交</div>
</form>
</div>
</div>
</div>
</div>
js部分:
// 提交按钮
function submit_evaluate(){
// 输出描述相符、服务态度、发货速度的评星value值
console.log(document.getElementById("stars1-input").value)
console.log(document.getElementById("stars2-input").value)
console.log(document.getElementById("stars3-input").value)
}
var Class = {
create: function () {
return function () { this.initialize.apply(this, arguments); }
}
}
var Extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}
/**
* 星星打分组件
*
*/
var Stars = Class.create();
Stars.prototype = {
initialize: function (star, options) {
this.SetOptions(options); //默认属性
var flag = 999; //定义全局指针
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star + "-input"); // 输出结果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star + "-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
var tipsTxt = this.options.tipsTxt; // 定义提示文案
var len = starlist.length; //星星数量
for (i = 0; i < len; i++) { // 绑定事件 点击 鼠标滑过
starlist[i].value = i;
starlist[i].onclick = function (e) {
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function () {
if (flag < 999) {
var reg = RegExp(nowClass, "g");
starlist[flag].className = starlist[flag].className.replace(reg, "")
}
}
starlist[i].onmouseout = function () {
if (flag < 999) {
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE) { //FIX IE下样式错误
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c) {
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//设置默认属性
SetOptions: function (options) {
this.options = {//默认值
Input: "",//设置触保存分数的INPUT
Tips: "",//设置提示文案容器
nowClass: "current-rating",//选中的样式名
tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"]//提示文案
};
Extend(this.options, options || {});
}
}
/* For TEST */
// function teststars() {
// alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
// }
var Stars1 = new Stars("stars1", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })
var Stars2 = new Stars("stars2", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })
var Stars3 = new Stars("stars3", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })
其他引入的资源:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/reset.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/common.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
css部分:
.evaluate_main{
background: #fff;
padding: 14.5px 19px;
width: 1192px;
margin: 0 auto;
padding-bottom: 28px;
margin-bottom: 20px;
}
.evaluate_title{
font-size: 18px;
color: #1E1E1E;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
}
.evaluate_title .line{
width: 4px;
height: 16px;
background: #F5B937;
margin-right: 6px;
}
.evaluateP_info{
border: 1px solid rgba(231,231,231,1);
}
.evaluateP_info .info_tit{
padding: 6px 8.5px;
background: #F5F5F5;
font-size: 7px;
}
.info_main{
display: flex;
justify-content: space-between;
}
.info_main .left {
padding: 31.5px 55px;
padding-top: 63px;
flex-shrink: 0;
border-right: 1px solid #E7E7E7;
}
.info_main .left .imgWrap{
width: 282px;
margin: 0 auto;
margin-bottom: 15px;
border: 1px solid #000;
}
.info_main .left .imgWrap img{
height: 220px;
width: 100%;
}
.info_main .left .description{
color: #232323;
font-weight: 400;
font-size: 7px;
margin-bottom: 22px;
width: 341px;
text-align: center;
line-height: 22.79px;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 代表第几行进行超出部分省略的操作 */
-webkit-line-clamp: 3;
overflow: hidden;
}
.info_main .left .price{
color: #E1251B;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 23px;
}
.info_main .left .price span:nth-child(1){
font-size: 18px;
}
.info_main .left .price span:nth-child(2){
font-size: 14px;
}
.info_main .left .specification{
color: #9C9C9C;
font-size: 14px;
text-align: center;
}
.info_main .right{
padding: 27px 35px;
flex:1
}
.info_main .right .right_tit{
font-size: 18px;
color: #161616;
font-weight: 400;
}
.info_main .right .evaluate_div{
font-size: 14px;
color: #727272;
padding: 16px 0;
}
.info_main .right .evaluate_div div{
margin: 8px 0;
display: flex;
align-items: center;
}
.info_main .right input:focus,
.info_main .right textarea:focus,
.info_main .right .form-control:focus{
box-shadow: none;
border-color: #ced4da;
}
.info_main .right textarea{
background: #F4F4F4;
}
.info_main .right .imgList{
flex: 1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: wrap;
}
.info_main .right .imgList .imgWrap{
display: inline-block;
width: 85px;
height: 80px;
margin-right: 10px;
}
.info_main .right .imgList .imgWrap img{
width: 100%;
height: 100%;
}
.chooseFile{
vertical-align: baseline;
padding: 6px 10px;
color: #F5B937;
border: 1px solid #F5B937;
display: inline-block;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
}
#imgHelp{
font-size: 10px;
color: #C6C6C6;
margin-top: 13px;
}
.submit_evaluate{
background:rgba(245,185,55,1);
border-radius:4px;
font-size:14px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(255,255,255,1);
display: inline-block;
padding: 0px 20px;
margin-top: 40px;
margin-left: 110px;
margin-bottom: 41px;
cursor: pointer;
line-height: 36px;
}
input::placeholder,
select::placeholder,
textarea::placeholder{
font-size: 14px!important;
}
input,select,textarea{
font-size: 14px!important;
background: #F4F4F4!important;
border:1px solid rgba(228,228,228,1)!important
}
/* 星级评分 */
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0px;
position: relative;
z-index: 999;
}
.shop-rating span {
height: 23px;
display: block;
line-height: 23px;
float: left;
}
.shop-rating span.title {
width: 125px;
text-align: right;
margin-right: 5px;
}
.shop-rating ul {
float: left;
margin: 0;
padding: 0
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.shop-rating .result strong {
color: #666666;
font-weight: normal;
}
.rating-level,
.rating-level a {
background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
margin-right: 10px;
}
.rating-level li {
display: inline;
}
.rating-level a {
line-height: 23px;
height: 23px;
position: absolute;
top: 0px;
left: 0px;
text-indent: -999em;
*zoom: 1;
outline: none;
}
.rating-level a.one-star {
width: 20%;
z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
width: 60%;
z-index: 4;
}
.rating-level a.four-stars {
width: 80%;
z-index: 3;
}
.rating-level a.five-stars {
width: 100%;
z-index: 2;
}
.rating-level .current-rating,
.rating-level a:hover {
background-position: 0 -28px;
}
.rating-level a.one-star:hover,
.rating-level a.two-stars:hover,
.rating-level a.one-star.current-rating,
.rating-level a.two-stars.current-rating {
background-position: 0 -116px;
}
.rating-level .three-stars .current-rating,
.rating-level .four-stars .current-rating,
.rating-level .five-stars .current-rating {
background-position: 0 -28px;
}