367 行
15 KiB
HTML
可执行文件
367 行
15 KiB
HTML
可执行文件
<!--商品评价-->
|
|
<!--[1.8.50]-->
|
|
<link rel="stylesheet" href="/Public/Retail/css/evaluate.css">
|
|
<div id='evaluateApp' v-cloak>
|
|
<!-- 表单 -->
|
|
<el-form :inline="true" :model="form" class="demo-form-inline" size="small">
|
|
<el-form-item>
|
|
<el-input v-model="form.goods_name"
|
|
@keydown.enter.exact.native.prevent="onSubmit"
|
|
clearable placeholder="请输入商品名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="form.nickname"
|
|
@keydown.enter.exact.native.prevent="onSubmit"
|
|
clearable placeholder="请输入用户姓名/昵称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="form.isDisplay" clearable placeholder="显示状态">
|
|
<el-option label="显示" value="2"></el-option>
|
|
<el-option label="隐藏" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="form.stars" clearable placeholder="评价星级">
|
|
<el-option label="一星" value="1"></el-option>
|
|
<el-option label="二星" value="2"></el-option>
|
|
<el-option label="三星" value="3"></el-option>
|
|
<el-option label="四星" value="4"></el-option>
|
|
<el-option label="五星" value="5"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br>
|
|
<el-form-item>
|
|
<date-picker-range :date-time.sync="form.time"></date-picker-range>
|
|
</el-form-item>
|
|
<!-- 提交 -->
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- table显示区域 -->
|
|
<el-table :data="tableData" :border="true" style="width: 100%" size="small">
|
|
<el-table-column label="序号" align="center" width="50px">
|
|
<template slot-scope="scope">
|
|
{{scope.$index+1}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="goods_img" label="商品图片" align="center">
|
|
<template slot-scope="scope">
|
|
<img :src="scope.row.goods_img" class="goods_img">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="goods_name" label="商品名称" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="sku_name" label="商品规格" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="nickname" label="姓名/昵称" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="create_time" label="评价时间" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="stars" label="评价星级" align="center">
|
|
<template slot-scope="scope">
|
|
<p>
|
|
{{scope.row.stars==5?'五星':scope.row.stars==4?'四星':scope.row.stars==3?'三星':scope.row.stars==2?'二星':'一星'}}
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="content" label="评价内容" align="center" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<template v-if="scope.row.content">{{scope.row.content}}</template>
|
|
<span v-else style="color:#999;">用户未填写评价</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="is_hide" label="显示状态" align="center">
|
|
<template slot="header" slot-scope="scope">
|
|
<span>显示状态</span>
|
|
<el-tooltip class="item" effect="dark" content="关闭则不会在商城展示"
|
|
placement="top-start">
|
|
<i class="el-icon-question"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<el-switch v-model="scope.row.is_hide"
|
|
@change="updateHide(scope.row.evaluate_id)"
|
|
active-value="2"
|
|
inactive-value="1"
|
|
:disabled="!operate.operate">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="evaluate_id" label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<template v-if="operate.operate">
|
|
<el-button type="text" size="small" @click="toTop(scope.row.evaluate_id)">
|
|
{{scope.row.is_top==2?'置顶评价':'取消置顶'}}
|
|
</el-button>
|
|
<el-button type="text" @click="billDetail(scope.row.bill_id)" size="small">查看订单
|
|
</el-button>
|
|
</template>
|
|
<el-button type="text" size="small" @click="alertEvaluate(scope.row.evaluate_id)">评价详情
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination @current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10]"
|
|
:page-size="pagesize"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
</el-pagination>
|
|
<!-- 查看订单弹出层 -->
|
|
<el-dialog title="订单详情" :append-to-body="true" :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
|
|
<div>
|
|
<p style="font-weight:bold;font-size:15px">订单信息</p>
|
|
<p>订单号：{{order_no}}</p>
|
|
<p>下单时间：{{add_time}}</p>
|
|
</div>
|
|
<div>
|
|
<p style="font-weight:bold;font-size:15px">商品详情</p>
|
|
<!-- table显示区域 -->
|
|
<el-table :data="bills.goods_info" style="width: 100%" size="small">
|
|
<el-table-column prop="goods_name" label="商品名称" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="price" label="单价(元)" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="goods_img" label="图片" align="center">
|
|
<template slot-scope="scope">
|
|
<img :src="scope.row.goods_img" class="goods_img">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="original_price" label="原价(元)" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_discount" label="会员折扣" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="sell_number" label="商品数量" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="all_money" label="实付小计(元)" align="center">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 查看评价弹出层 -->
|
|
<el-dialog title="查看评价" :append-to-body="true" :visible.sync="dialogEvaluable" width="600px" :before-close="CloseEvaluable">
|
|
<div>
|
|
<p>商品评价: {{evaluate.content}}</p>
|
|
</div>
|
|
<div>
|
|
<span>评价图片: </span>
|
|
<span v-if="srcList.length==0">用户没有上传评价图片</span>
|
|
<span v-else class="demo-image__preview" v-for="(item,index) of evaluate.goods_img"
|
|
:key="index" class="evaluable_imgs">
|
|
<el-image style="width: 80px; height: 80px;vertical-align:text-top;padding-right: 20px;"
|
|
:src="item" :preview-src-list="srcList" fit="cover">
|
|
</el-image>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var evaluateApp = new Vue({
|
|
el: '#evaluateApp',
|
|
data: {
|
|
form: {
|
|
goods_name: '', //商品名
|
|
nickname: '', //用户昵称
|
|
isDisplay: '', //显示状态
|
|
evaluate_status: '', //评论状态
|
|
stars: '', //星星
|
|
start_time: '', //选择的开始日期
|
|
end_time: '', //选择的结束日期
|
|
time: '',
|
|
},
|
|
tableData: [], //table数据
|
|
total: 0, //总数据条数
|
|
value: true, //switch开关
|
|
pagesize: 10, //当前行显示的条数
|
|
currentPage: 1, //初始页
|
|
dialogVisible: false,
|
|
dialogEvaluable: false,
|
|
// 商品详情表
|
|
goods_detail: [],
|
|
evaluate: {}, // 评价信息
|
|
bills: {}, //订单详情
|
|
order_no: '',
|
|
add_time: '',
|
|
srcList: [], //查看大图
|
|
topValue: '',
|
|
stars: '',
|
|
operate: {
|
|
operate: false,
|
|
}
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
},
|
|
CloseEvaluable() {
|
|
this.dialogEvaluable = false;
|
|
},
|
|
// 订单详情
|
|
billDetail(bid) {
|
|
this.dialogVisible = true;
|
|
this.getBillDetails(bid)
|
|
},
|
|
// 置顶
|
|
evaluateTop(vid) {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "{:U('updateEvaluateTop')}",
|
|
data: {
|
|
evaluate_id: vid
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
message: '操作成功！',
|
|
type: 'success'
|
|
});
|
|
this.getOrderEvaluate()
|
|
} else {
|
|
this.$message({
|
|
message: '操作失败！',
|
|
type: 'error'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
toTop(vid) {
|
|
this.evaluateTop(vid)
|
|
},
|
|
// 评价详情
|
|
alertEvaluate(id) {
|
|
this.dialogEvaluable = true;
|
|
this.getEvaluateDetails(id)
|
|
},
|
|
//提交
|
|
onSubmit() {
|
|
this.currentPage = 1;
|
|
this.getOrderEvaluate()
|
|
},
|
|
//点击页数的时候触发
|
|
handleCurrentChange(val) {
|
|
console.log(val);
|
|
this.currentPage = val;
|
|
this.getOrderEvaluate()
|
|
},
|
|
//评价详情
|
|
getEvaluateDetails(id) {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "{:U('getEvaluateDetails')}",
|
|
data: {
|
|
evaluate_id: id
|
|
},
|
|
success: res => {
|
|
console.log(res)
|
|
if (res.status == 1) {
|
|
this.evaluate = res.data
|
|
this.srcList = res.data.goods_img
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
//后台商品评价
|
|
getOrderEvaluate() {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "{:U('getEvaluateByStore')}",
|
|
data: {
|
|
goods_name: this.form.goods_name,
|
|
nickname: this.form.nickname,
|
|
stars: this.form.stars,
|
|
is_hide: this.form.isDisplay,
|
|
page: this.currentPage,
|
|
pageSize: 10,
|
|
start_time: this.form.time ? (this.form.time[0] + ' 00:00:00') : '',
|
|
end_time: this.form.time ? (this.form.time[1] + ' 23:59:59') : '',
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.tableData = res.data.list
|
|
this.total = parseInt(res.data.total)
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 隐藏评论
|
|
updateHide(evaluate_id) {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "{:U('updateEvaluateHide')}",
|
|
data: {
|
|
evaluate_id
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
message: '操作成功！',
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
this.$message({
|
|
message: '操作失败！',
|
|
type: 'error'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//订单详情
|
|
getBillDetails(bid) {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: "{:U('getBillDetails')}",
|
|
data: {
|
|
bill_id: bid
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.bills = res.data
|
|
this.order_no = res.data.bill_info.order_no
|
|
this.add_time = res.data.bill_info.add_time
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getOrderEvaluate();
|
|
//获取操作权限
|
|
var auth_list = {
|
|
operate: '/index.php/Retail/OrderEvaluate/updateEvaluateTop',
|
|
};
|
|
$.ajax({
|
|
url: '/index.php/Retail/Component/checkOperateAuth',
|
|
type: "post",
|
|
data: {
|
|
auth_list: JSON.stringify(auth_list),
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.operate = res.data;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script> |