425 lines
10 KiB
HTML
425 lines
10 KiB
HTML
{extend name="base"/}
|
||
{block name="resources"}
|
||
<!-- <link rel="stylesheet" href="SHOP_SUPPLY_LOCAL_CSS/order.css"> -->
|
||
{/block}
|
||
{block name="body"}
|
||
|
||
<style>
|
||
.evaluate{width: 100%;background: #ffffff;padding: 0 20px;box-sizing: border-box;}
|
||
.goods-list{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
border-bottom: 1px solid #eeeeee;
|
||
padding: 20px 0;
|
||
}
|
||
.goods-list .goods-image-content{
|
||
width: 200px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 11px;
|
||
}
|
||
.goods-list .goods-image{
|
||
width: 125px;
|
||
height: 125px;
|
||
}
|
||
.goods-list .goods-name{
|
||
width: 125px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
line-height: 25px;
|
||
margin: 10px 0 0;
|
||
}
|
||
.goods-list .goods-price{
|
||
width: 125px;
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-evaluate-box{
|
||
flex: 1;
|
||
height: 100%;
|
||
}
|
||
.goods-evaluate-scores{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.explain_type{
|
||
margin-left: 30px;
|
||
}
|
||
.explain_type .good{
|
||
color: #ff547b;
|
||
}
|
||
.evaluate-text{
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 140px;
|
||
border-radius: 5px;
|
||
background: #ffffff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border: 1px solid #DCDFE6;
|
||
|
||
}
|
||
.upload-image-list{
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.upload-image-li{
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 1px dashed #c0ccda;
|
||
margin-right: 10px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
}
|
||
.upload-image-li.add{
|
||
text-align: center;
|
||
line-height: 80px;
|
||
font-size: 40px;
|
||
color: #8c939d;
|
||
}
|
||
.upload-image-li-box{
|
||
width: 80px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.upload-image-li-box .delete{
|
||
font-size: 20px;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
color: #CCCCCC;
|
||
}
|
||
.upload-image-li img{
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.shop-rate{
|
||
width: 100%;
|
||
padding: 20px 0;
|
||
padding-left: 220px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
}
|
||
.shop-name{
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
.shop-service{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.shop-desc{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.shop-attitude{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.save-box{
|
||
width: 100%;
|
||
padding-left: 200px;
|
||
}
|
||
.save{
|
||
width: 70px;
|
||
height: 35px;
|
||
border-radius: 8px;
|
||
background: #ff547b;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<!-- 顶部html文件-->
|
||
<div class="ns-supply-wrap">
|
||
<div class="ns-supply-wrap-con">
|
||
{include file="addon/supply/shop/view/market_head.html"/}
|
||
|
||
<div class="ns-supply-order">
|
||
<div class="order-menu">
|
||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:;">交易中心</a>
|
||
<dl class="layui-nav-child">
|
||
<dd class="layui-this"><a href="{:addon_url('supply://shop/order/lists')}">我的订单</a></dd>
|
||
<dd><a href="{:addon_url('supply://shop/orderrefund/lists')}">退款/售后</a></dd>
|
||
<dd><a href="{:addon_url('supply://shop/purchase/purchase')}">我的求购单</a></dd>
|
||
</dl>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="order-list" id="evaluate">
|
||
<div class="order-list-title">订单评价</div>
|
||
|
||
<div class="evaluate">
|
||
{foreach $detail.list as $key=>$v}
|
||
<div class="goods-list">
|
||
<div class="goods-image-content">
|
||
<img src={:img($v.sku_image)} onerror="this.src='SHOP_SUPPLY_LOCAL_IMG/default_goods.png'" class="goods-image">
|
||
<div class="goods-name" title="{$v.sku_name}">
|
||
{$v.sku_name}
|
||
</div>
|
||
<div class="goods-price">
|
||
￥{$v.price}
|
||
</div>
|
||
</div>
|
||
<div class="goods-evaluate-box">
|
||
<div class="goods-evaluate-scores">
|
||
<span>
|
||
描述相符：
|
||
</span>
|
||
<div id="score{$key}"></div>
|
||
<div class="explain_type">
|
||
<i class="iconfont iconhaoping1 good"></i>
|
||
<span class="good">好评</span>
|
||
</div>
|
||
</div>
|
||
<div class="evaluate-text-box">
|
||
<textarea class="evaluate-text" autocomplete="off" onchange="change({$key})" rows="5" placeholder="请在此处输入您的评价"
|
||
maxlength="200" class="el-textarea__inner" style="min-height: 33px;"></textarea>
|
||
</div>
|
||
<div class="upload-image-list">
|
||
<div class="upload-image-li add ns-upload-default uploadImage" data-num="{$key}">
|
||
<div class="upload-image-li-box">
|
||
+
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="picture-number">
|
||
总共6张，还可以上传6张
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
|
||
|
||
<div class="shop-rate">
|
||
<div class="shop-name">
|
||
{$detail.site_name}
|
||
</div>
|
||
<div class="shop-service">
|
||
配送服务： <div id="rate1"></div>
|
||
</div>
|
||
<div class="shop-desc">
|
||
描述相符： <div id="rate2"></div>
|
||
</div>
|
||
<div class="shop-attitude">
|
||
服务态度： <div id="rate3"></div>
|
||
</div>
|
||
<div class="ispublic">
|
||
<div class="mui-input-row mui-checkbox ">
|
||
<input name="Checkbox" type="checkbox" checked>
|
||
<label>匿名</label>
|
||
</div>
|
||
</div>
|
||
<div class="save-box">
|
||
<div class="save" onclick="save()">
|
||
提交
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
|
||
|
||
{block name="script"}
|
||
<script src="__STATIC__/js/vue.js"></script>
|
||
<script>
|
||
/*
|
||
explain_type:
|
||
*/
|
||
let data = JSON.parse('{:json_encode($detail, JSON_UNESCAPED_UNICODE)}');
|
||
data.list.forEach(function(v){
|
||
if(v.scores==undefined){
|
||
v.scores=5;
|
||
}
|
||
if(v.explain_type==undefined){
|
||
v.explain_type=1;
|
||
}
|
||
})
|
||
let rateInfo={
|
||
supply_deliverycredit: 5,
|
||
supply_desccredit: 5,
|
||
supply_servicecredit: 5,
|
||
}
|
||
|
||
function change(e){
|
||
data.list[e].content=$("textarea")[e].value.trim()
|
||
};
|
||
|
||
//绑定评分
|
||
layui.use(['upload','rate'], function(){
|
||
var rate = layui.rate;
|
||
var upload = layui.upload;
|
||
|
||
for(let i=0;i<data.list.length;i++){
|
||
let id="#score"+i;
|
||
rate.render({
|
||
elem: id,
|
||
value: 5,
|
||
choose: function(value){
|
||
data.list[i].scores=value;
|
||
if(value>=4){
|
||
data.list[i].explain_type=1
|
||
}else if(value>1 && value<4){
|
||
data.list[i].explain_type=2
|
||
}else{
|
||
data.list[i].explain_type=3
|
||
}
|
||
|
||
$($('.explain_type')[i]).find('i').removeClass()
|
||
$($('.explain_type')[i]).find('span').removeClass()
|
||
if(data.list[i].explain_type==3){
|
||
$($('.explain_type')[i]).find('i').addClass("iconfont iconzhongchaping")
|
||
$($('.explain_type')[i]).find('span').text("差评")
|
||
}else if(data.list[i].explain_type==2){
|
||
$($('.explain_type')[i]).find('i').addClass("iconfont iconzhongchaping good")
|
||
$($('.explain_type')[i]).find('span').addClass("good")
|
||
$($('.explain_type')[i]).find('span').text("中评")
|
||
}else if(data.list[i].explain_type==1){
|
||
$($('.explain_type')[i]).find('i').addClass("iconfont iconhaoping1 good")
|
||
$($('.explain_type')[i]).find('span').addClass("good")
|
||
$($('.explain_type')[i]).find('span').text("好评")
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
//渲染
|
||
rate.render({
|
||
elem: '#rate1' ,//绑定元素
|
||
value: rateInfo.supply_deliverycredit,
|
||
choose: function(value){
|
||
rateInfo.supply_deliverycredit=value;
|
||
}
|
||
});
|
||
rate.render({
|
||
elem: '#rate2' ,//绑定元素
|
||
value: rateInfo.supply_desccredit,
|
||
choose: function(value){
|
||
rateInfo.supply_desccredit=value;
|
||
}
|
||
});
|
||
rate.render({
|
||
elem: '#rate3' ,//绑定元素
|
||
value: rateInfo.supply_servicecredit,
|
||
choose: function(value){
|
||
rateInfo.supply_servicecredit=value;
|
||
}
|
||
});
|
||
|
||
upload.render({
|
||
elem: '.uploadImage',
|
||
url: '{:addon_url("shop/upload/image")}', //必填项
|
||
number: 6,
|
||
multiple:true,
|
||
done: function(res, index, upload){
|
||
//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
|
||
let key=Number(this.item.attr("data-num"));
|
||
if(data.list[key].goodsImgs&&data.list[key].goodsImgs.length>=6) return;
|
||
if(data.list[key].goodsImgs){
|
||
data.list[key].goodsImgs.push(res.data.pic_path)
|
||
}else{
|
||
let arr=[];
|
||
arr.push(res.data.pic_path);
|
||
data.list[key].goodsImgs=arr;
|
||
}
|
||
showImage(key)
|
||
}
|
||
})
|
||
});
|
||
//图片被修改过之后，刷新图片
|
||
function showImage(index){
|
||
console.log(data)
|
||
$($('.upload-image-list')[index]).find(".add-img").remove();
|
||
let list=data.list[index].goodsImgs;
|
||
console.log(list)
|
||
if(list){
|
||
let html="";
|
||
for (var i = 0; i < list.length; i++) {
|
||
console.log(ns.img(list[i]))
|
||
html+="<div class='upload-image-li add-img'><div class='upload-image-li-box'>"
|
||
html+="<img src='" + ns.img(list[i]) + "'>"
|
||
html+="<i class='delete iconfont iconcuo' onclick='deleteImage("+ index +',' + i +")'></i>"
|
||
html+="</div></div>"
|
||
}
|
||
$('.upload-image-list').eq(index).append(html);
|
||
let text="总共6张，还可以上传"+ (6-list.length) +"张"
|
||
$('.picture-number').eq(index).text(text);
|
||
}
|
||
}
|
||
//删除图片
|
||
function deleteImage(e,f){
|
||
let arr=data.list[e].goodsImgs;
|
||
arr.splice(f,1)
|
||
data.list[e].goodsImgs=arr;
|
||
showImage(e);
|
||
}
|
||
//保存
|
||
function save(){
|
||
for(let i=0;i<data.list.length;i++){
|
||
if(!data.list[i].content||!data.list[i].content.trim()){
|
||
layer.msg('评价不能为空');
|
||
return;
|
||
}
|
||
if(data.list[i].images){
|
||
data.list[i].images=data.list[i].goodsImgs.toString()
|
||
}else{
|
||
data.list[i].images=""
|
||
}
|
||
}
|
||
|
||
let newData={
|
||
order_id: data.list[0].order_id,
|
||
order_no: data.list[0].order_no,
|
||
is_anonymous:$('input[name="Checkbox"]')[0].checked?1:0,
|
||
goods_evaluate:JSON.stringify(data.list)
|
||
}
|
||
Object.assign(newData,rateInfo)
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:addon_url('supply://shop/Goodsevaluate/evaluate')}",
|
||
data: newData,
|
||
dataType: "JSON",
|
||
success: function(res) {
|
||
if(checkLogin(res)) {
|
||
if (res.code == 0) {
|
||
layer.msg('评价成功', {
|
||
anim: 5,
|
||
time: 1000
|
||
}, function () {
|
||
location.href = ns.url("supply://shop/order/lists")
|
||
})
|
||
} else {
|
||
layer.msg(res.message);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
</script>
|
||
{/block}
|