minsu_goodsmonent_manage/pages/goods/evaluate.vue

<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container padding_b_0">
			<!-- <div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">用户名称：</div>
					<el-input v-model="req.member_name" placeholder="请输入" @keyup.enter.native="loadData" class="search_input"></el-input>
				</div>
				<el-button size="mini" class="search_btn margin_b_20 margin_r_40" @click="loadData">搜索</el-button>
			</div> -->
		</div>
		<div class="container use-table">
			 <!-- :height="tblHeight" -->
			<el-table :data="tableDatas" highlight-current-row>
				<el-table-column label="用户" align="center" width="200">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<el-image class="headimg_small" :src="scope.row.userImg || require('static/img/touxiang.png')" :preview-src-list="scope.row.imgs" fit="contain"></el-image>
							<div class="margin_l_5">{{ scope.row.userId || '未知' }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column property="reviewContent" label="评价内容" width="400" align="center"></el-table-column>
				<el-table-column property="createTime" label="评价时间" width="200" align="center"></el-table-column>
				<el-table-column label="评价图片" width="300" align="center">
					<template slot-scope="scope">
						<div class="dflex">
							<!-- (scope.row.reviewImgs).slipt(',') -->
							 <!-- v-if="scope.row.reviewImgs.search(',')==(-1)" -->
							<el-image style="width: 100px; height: 80px;" :preview-src-list="scope.row.reviewImgs" :src="scope.row.reviewImgs || require('static/img/noimage.png')" fit="contain"></el-image>
							<!-- <el-image v-else style="width: 100px; height: 80px;" :preview-src-list="scope.row.reviewImgs" :src="((scope.row.reviewImgs).substring(0, ((scope.row.reviewImgs).indexOf(',')))) || require('static/img/noimage.png')" fit="contain"></el-image> -->
							
							<!-- <div class="margin_r_10" v-for="(item, i) in (scope.row.reviewImgs)" :key="i">
								<el-image style="width: 100px; height: 80px;" :preview-src-list="scope.row.reviewImgs" :src="item" fit="contain"></el-image>
							</div> -->
						</div>
					</template>
				</el-table-column>
				<el-table-column label="商品评分" width="200" align="center">
					<template slot-scope="scope">
						<el-rate v-model="scope.row.reviewCnt" :colors="colors" disabled show-text :texts="['差评', '中评', '中评', '好评', '好评']"></el-rate>
					</template>
				</el-table-column>
				<el-table-column property="createTime" label="评价时间" align="center"></el-table-column>
				<el-table-column label="状态" align="center" width="100">
					<template slot-scope="scope">
						<el-tooltip :content="scope.row.state == '1' ? '点击隐藏' : '点击显示'" placement="top" :hide-after="1000" :enterable="false" effect="light">
							<el-switch
								v-model="scope.row.state"
								active-color="#ff6a6c"
								inactive-color="#bbb"
								active-value="1"
								inactive-value="0"
								@change="stateChange(scope.row)"
							></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="100">
					<template slot-scope="scope">
						<!-- <div v-if="!scope.row.replay_content">
							<el-tooltip content="回复" placement="top" :hide-after="1000" :enterable="false" effect="light">
								<el-button type="text" icon="el-icon-chat-dot-round" class="bbb" @click="reply(scope.row._id)"></el-button>
							</el-tooltip>
						</div> -->
						<el-tooltip content="删除" placement="top" :hide-after="1000" :enterable="false" effect="light">
							<el-button type="text" icon="iconfont iconshanchu" class="bbb"
								@click="remove(scope.row.id)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
		<el-drawer title="回复内容" :visible.sync="replyDrawer" direction="rtl" :append-to-body="true">
			<el-form class="add_edit" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
				<el-form-item label="回复内容" prop="reply" ref="reply"><el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.reply"></el-input></el-form-item>
				<el-form-item>
					<el-button class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
					<el-button @click="replyDrawer = false">返回列表</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
const __name = 'usemall-goods-comment';
import {
		delPingjia
	} from '@/util/loginJie.js'
export default {
	data() {
		return {
			req: {
				page: 1,
				rows: 10,
				orderby: 'sort asc',
				member_name: ''
			},
			colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
			replyDrawer: false,
			replyId: '',
			form: {
				reply: ''
			},
			rules: {
				reply: [
					{
						required: true,
						message: '请输入回复内容',
						trigger: 'change'
					}
				]
			},
			tblHeight: 0,
			tableDatas: [],
			tableTotal: 0
		};
	},
	methods: {
		loadData() {
			this.$axios.get("/goodsComment/admin/list",
			{
				params:{
					'curPage':this.req.page,
					'pageSize':this.req.rows,
					// 'orderField':'sort',
					'order':'asc'
				},
				headers:{
					'Mall-Token': uni.getStorageSync("token")
				}
			}).then(response => {
				let res = response
				if (res.success) {
					res.data.list.forEach((row, idx) => {
						row.imgs = [row.reviewImgs];
						row.createTime = new Date(row.createTime).format();
					});
					this.tableDatas = res.data.list;
					console.log(this.tableDatas)
					this.tableTotal = res.data.totalCount;
				} else {
				}
			}).catch(res =>{
			});	
		},
		reply(id) {
			this.replyDrawer = true;
			this.replyId = id;
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid, obj) => {
				this.$api.set_unvalidated_form_focus(this, obj);
				if (valid) {
					this.$db[__name].update(this.replyId, { replay_content: this.form.reply }).then(res => {
						if (res.code == 200) {
							this.replyDrawer = false;
							this.loadData();
						}
					});
				}
			});
		},
		remove(id) {
			var data=[id]
			var headers={
				'Content-Type': 'application/json; charset=utf-8',
				"Mall-Token": uni.getStorageSync('token')
			}
			this.$confirm('此操作将永久删除该数据！', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delPingjia(data,headers).then((res) => {
					if (res.success) {
						this.loadData();
					}
				})
			});
		},
		stateChange(row) {
			this.$axios.put(`/goodsComment/admin/${row.id}/${row.state}`,
			{},
			{
				headers:{
					'Mall-Token': uni.getStorageSync("token")
				}
			}).then(response => {
				let res = response
				if (res.success) {
					this.loadData()
				} else {
					alert(res.message)
				}
			})
			// this.$db[__name].update(row._id, { state: row.state }).then(res => {
			// 	if (res.code == 200) this.loadData();
			// });
		},
		sizeChange(size) {
			this.req.rows = size;
			this.loadData();
		},
		currentChange(current) {
			this.req.page = current;
			this.loadData();
		}
	},
	created() {
		this.loadData();
	},
	updated() {
		// // if (!this.tblHeight) {
		// // 	this.tblHeight = this.$refs.tbl.tblHeight;
		// // }
	}
};
</script>

<style>
.add_edit .el-textarea {
	width: 90%;
}
</style>