504 lines
26 KiB
PHP
504 lines
26 KiB
PHP
@extends('layouts.base')
|
|
@section('title', '评论详情')
|
|
@section('content')
|
|
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
|
|
<div class="all">
|
|
<div id="app" v-cloak>
|
|
<div class="vue-crumbs">
|
|
<a @click="goParent">评论管理</a> > 编辑评论
|
|
</div>
|
|
<div class="vue-main">
|
|
<div class="vue-main-title">
|
|
<div class="vue-main-title-left"></div>
|
|
<div class="vue-main-title-content">编辑评论</div>
|
|
</div>
|
|
<div class="vue-main-form">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="15%">
|
|
<el-form-item label="选择商品" prop="goods">
|
|
<el-input v-model="chooseGoodsItem.content" style="width:70%;" disabled></el-input>
|
|
<el-button @click="openGoods()" type="primary">选择商品</el-button>
|
|
<el-button type="primary" @click="clearGoods()" plain>清空</el-button>
|
|
<div style="width:150px;height:150px;position:relative;margin-top:10px" v-if="chooseGoodsItem.thumb">
|
|
<img :src="chooseGoodsItem.thumb" onerror="this.src='/addons/yun_shop/static/resource/images/nopic.jpg'; this.title='图片未找到.'" style="width:150px;height:150px">
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="用户头像" prop="head_img_url">
|
|
<!-- 1: 表示需要上传的类型是图片 -->
|
|
<div class="upload-box" @click="openUpload('head_img_url',1,'one')" v-if="!form.head_img_url_url">
|
|
<i class="el-icon-plus" style="font-size:32px"></i>
|
|
</div>
|
|
<div @click="openUpload('head_img_url',1,'one')" class="upload-boxed" v-if="form.head_img_url_url">
|
|
<img :src="form.head_img_url_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
|
|
<div class="upload-boxed-text">点击重新上传</div>
|
|
<i class="el-icon-close" @click="clearImg('head_img_url')" title="点击清除图片"></i>
|
|
</div>
|
|
<div class="tip">用户头像，如果不选择，默认从粉丝表中随机读取</div>
|
|
</el-form-item>
|
|
<el-form-item label="用户昵称" prop="nick_name">
|
|
<el-input v-model="form.nick_name" style="width:70%;"></el-input>
|
|
<div class="tip">用户昵称，如果不填写，默认从粉丝表中随机读取</div>
|
|
</el-form-item>
|
|
<el-form-item label="会员等级">
|
|
<template>
|
|
<el-select v-model="form.level_set" placeholder="请选择会员等级">
|
|
<el-option
|
|
v-for="(item,i) in levels"
|
|
:label="item.level_name"
|
|
:value="item.id"
|
|
:key="i">
|
|
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-form-item>
|
|
<el-form-item label="评分等级" prop="level">
|
|
<div style="padding-top:10px">
|
|
<el-rate v-model="form.level" show-score></el-rate>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-show="form.is_score_latitude" label="描述/包装" prop="score_latitude_describe">
|
|
<div style="padding-top:10px">
|
|
<el-rate v-model="form.score_latitude.score_latitude_describe" show-score></el-rate>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-show="form.is_score_latitude" label="物流服务/配送" prop="score_latitude_delivery">
|
|
<div style="padding-top:10px">
|
|
<el-rate v-model="form.score_latitude.score_latitude_delivery" show-score></el-rate>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-show="form.is_score_latitude" label="服务态度/质量" prop="score_latitude_service">
|
|
<div style="padding-top:10px">
|
|
<el-rate v-model="form.score_latitude.score_latitude_service" show-score></el-rate>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="设置评论时间">
|
|
<template><el-switch v-model="form.time_state" :active-value="1" :inactive-value="0"></el-switch></template>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.time_state == 1" label="评论时间" >
|
|
<el-date-picker
|
|
v-model="form.comment_time"
|
|
type="datetime"
|
|
placeholder="请输入自定义评论时间"
|
|
value-format="timestamp"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="首次评论" prop="content">
|
|
<el-input type="textarea" rows="5" v-model="form.content" style="width:70%;"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="评论图片" prop="alias">
|
|
|
|
<div class="upload-boxed-list">
|
|
<div class="upload-boxed-list-a" style="" v-for="(item,index) in form.images_url" :key="index">
|
|
<img :src="item" alt="" style="width:150px;height:150px;border-radius: 5px;">
|
|
<i class="el-icon-close" @click="clearImg('images','list',index)" title="点击清除图片"></i>
|
|
</div>
|
|
<div class="upload-box" @click="openUpload('images',1,'more')">
|
|
<i class="el-icon-plus" style="font-size:32px"></i>
|
|
</div>
|
|
<!-- <div class="upload-boxed-text">点击重新上传</div> -->
|
|
</div>
|
|
<!-- <el-input style="width:70%;" disabled></el-input>
|
|
<el-button @click="openListUpload('images')">选择图片</el-button>
|
|
<div v-if="form.images_url">
|
|
<div v-for="(item,index) in form.images_url" :key="index" style="display:inline-block;margin:5px;width:150px;height:150px;position:relative;margin-top:10px">
|
|
<img :src="item" alt="" style="width:150px;height:150px">
|
|
<i
|
|
class="el-icon-circle-close"
|
|
@click="clearImg('images','list',index)"
|
|
title="点击清除图片"
|
|
></i>
|
|
</div>
|
|
</div> -->
|
|
</el-form-item>
|
|
|
|
<el-form-item label="显示" prop="is_show">
|
|
<el-switch v-model="form.is_show" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="置顶" prop="is_top">
|
|
<el-switch v-model="form.is_top" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<div class="vue-page">
|
|
<div class="vue-center">
|
|
<el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
<el-button @click="goBack">返回</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img> -->
|
|
<!-- <upload-img-list :upload-list-show="uploadListShow" :name="chooseImgListName" @replace="changeListProp" @sure="sureImgList"></upload-img-list> -->
|
|
<upload-multimedia-img :upload-show="uploadShow" :type="type" :name="chooseImgName" :sel-Num="selNum" @replace="changeProp" @sure="sureImg"></upload-multimedia-img>
|
|
|
|
<el-dialog :visible.sync="goodsShow" width="60%" center title="选择商品">
|
|
<div v-loading="goods_loading">
|
|
<div>
|
|
<el-input v-model="keyword" style="width:70%"></el-input>
|
|
<el-button type="primary" @click="searchGoods()">搜索</el-button>
|
|
</div>
|
|
<el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto">
|
|
<el-table-column label="ID" prop="id" align="center" width="100px"></el-table-column>
|
|
<el-table-column label="商品信息">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row" style="display:flex;align-items: center">
|
|
<img v-if="scope.row.thumb" :src="scope.row.thumb" onerror="this.src='/addons/yun_shop/static/resource/images/nopic.jpg'; this.title='图片未找到.'" style="width:50px;height:50px"></img>
|
|
<div style="margin-left:10px">[[scope.row.title]]</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="refund_time" label="操作" align="center" width="320">
|
|
<template slot-scope="scope">
|
|
<el-button @click="sureGoods(scope.row)">
|
|
选择
|
|
</el-button>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="goodsShow = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!--end-->
|
|
</div>
|
|
</div>
|
|
<!-- @include('public.admin.uploadImg') -->
|
|
@include('public.admin.uploadMultimediaImg')
|
|
<!-- @include('public.admin.uploadImgList') -->
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el:"#app",
|
|
delimiters: ['[[', ']]'],
|
|
name: 'test',
|
|
data() {
|
|
let id = {!! $id?:0 !!};
|
|
let goods_id = {!! $goods_id?:0 !!};
|
|
let default_level = {!! json_encode($default_level) !!};
|
|
let levels = {!! json_encode($levels)?:'{}' !!}
|
|
console.log(id);
|
|
console.log(goods_id);
|
|
return{
|
|
id:id,
|
|
goods_id:goods_id,
|
|
form:{
|
|
level:5,
|
|
level_set:'',
|
|
content:'',
|
|
head_img_url:'',
|
|
head_img_url_url:'',
|
|
goods:'',
|
|
nick_name:'',
|
|
image:[],
|
|
image_url:[],
|
|
comment_time:new Date().getTime(),
|
|
time_state:0,
|
|
score_latitude:{
|
|
score_latitude_describe:5,
|
|
score_latitude_delivery:5,
|
|
score_latitude_service:5,
|
|
},
|
|
is_score_latitude:false,
|
|
is_show:0,
|
|
is_top:0
|
|
},
|
|
goods_list:[],
|
|
goodsShow:false,
|
|
chooseGoodsItem:{},//选中的商品
|
|
keyword:'',
|
|
submit_url:'',
|
|
showVisible:false,
|
|
default_level:default_level,
|
|
levels:levels,
|
|
uploadShow:false,
|
|
chooseImgName:'',
|
|
|
|
uploadListShow:false,
|
|
chooseImgListName:'',
|
|
|
|
|
|
goods_loading: false,
|
|
uploadImg1:'',
|
|
rules:{
|
|
content:{ required: true, message: '请输入评论内容',trigger: 'blur' }
|
|
},
|
|
type:'',
|
|
selNum:'',
|
|
}
|
|
},
|
|
created() {
|
|
console.log(this.level);
|
|
this.levels.unshift({
|
|
id:0,
|
|
level:0,
|
|
level_name:this.default_level
|
|
})
|
|
},
|
|
mounted() {
|
|
// this.getData();
|
|
if(this.id) {
|
|
this.submit_url = '{!! yzWebFullUrl('goods.comment.updated') !!}';
|
|
}
|
|
else {
|
|
this.submit_url = '{!! yzWebFullUrl('goods.comment.add-comment') !!}';
|
|
}
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
|
|
this.$http.post(this.submit_url,{id:this.id,goods_id:this.goods_id}).then(function (response) {
|
|
if (response.data.result){
|
|
this.form.nick_name = response.data.data.comment?response.data.data.comment.nick_name:'';
|
|
this.form.head_img_url = response.data.data.comment?response.data.data.comment.head_img_url:'';
|
|
this.form.head_img_url_url = response.data.data.comment?response.data.data.comment.head_img_url_url:'';
|
|
this.form.level = response.data.data.comment&&response.data.data.comment.level?response.data.data.comment.level:5;
|
|
this.form.content = response.data.data.comment?response.data.data.comment.content:'';
|
|
this.form.images = response.data.data.comment?response.data.data.comment.images:[];
|
|
this.form.images_url = response.data.data.comment?response.data.data.comment.images_url:[];
|
|
this.form.comment_time = response.data.data.comment ? response.data.data.comment.comment_time*1000 : new Date().getTime();
|
|
this.form.is_show = response.data.data.comment.is_show ? response.data.data.comment.is_show : 0;
|
|
this.form.is_top = response.data.data.comment.is_top ? response.data.data.comment.is_top : 0;
|
|
this.form.level_set = response.data.data.comment.level_set ? response.data.data.comment.level_set : 0;
|
|
console.log(response.data.data.score_latitude);
|
|
if (this.id) {
|
|
if (response.data.data.score_latitude) {
|
|
console.log(11);
|
|
this.form.score_latitude = response.data.data.score_latitude;
|
|
}
|
|
}
|
|
|
|
// this.form.score_latitude = response.data.data.score_latitude.length > 0 || response.data.data.score_latitude ? response.data.data.score_latitude : this.form.score_latitude;
|
|
// if (this.id && response.data.data.score_latitude) {
|
|
// this.form.score_latitude = response.data.data.score_latitude ? response.data.data.score_latitude : this.form.score_latitude;
|
|
// } else {
|
|
// this.form.score_latitude = response.data.data.score_latitude ? response.data.data.score_latitude : this.form.score_latitude;
|
|
// }
|
|
|
|
this.form.is_score_latitude = response.data.data.is_score_latitude ? response.data.data.is_score_latitude : false;
|
|
if(response.data.data.goods && response.data.data.goods.id && response.data.data.goods != [] && response.data.data.goods.length!=0) {
|
|
this.chooseGoodsItem = JSON.parse(JSON.stringify(response.data.data.goods));
|
|
this.chooseGoodsItem.title = this.escapeHTML(this.chooseGoodsItem.title);
|
|
this.chooseGoodsItem.content = `[`+this.chooseGoodsItem.id+`]`+this.chooseGoodsItem.title;
|
|
this.form.goods = this.chooseGoodsItem.id;
|
|
}
|
|
}
|
|
|
|
else {
|
|
this.$message({message: response.data.msg,type: 'error'});
|
|
}
|
|
loading.close();
|
|
},function (response) {
|
|
this.$message({message: response.data.msg,type: 'error'});
|
|
loading.close();
|
|
}
|
|
);
|
|
},
|
|
goParent() {
|
|
window.location.href = `{!! yzWebFullUrl('goods.comment.index') !!}`;
|
|
},
|
|
openGoods() {
|
|
this.goodsShow = true;
|
|
},
|
|
clearGoods() {
|
|
this.chooseGoodsItem = {};
|
|
this.form.goods = '';
|
|
},
|
|
searchGoods() {
|
|
let that = this;
|
|
this.goods_loading = true;
|
|
this.$http.post('{!! yzWebFullUrl('goods.comment.search-goods-v2') !!}',{keyword:this.keyword}).then(response => {
|
|
if (response.data.result) {
|
|
this.goods_list = response.data.data.goods;
|
|
this.goods_list.forEach((item,index) => {
|
|
if(item.title) {
|
|
item.title = this.escapeHTML(item.title);
|
|
}
|
|
});
|
|
} else {
|
|
this.$message({message: response.data.msg,type: 'error'});
|
|
}
|
|
this.goods_loading = false;
|
|
},response => {
|
|
this.goods_loading = false;
|
|
});
|
|
},
|
|
sureGoods(item) {
|
|
this.chooseGoodsItem = {};
|
|
this.chooseGoodsItem = JSON.parse(JSON.stringify(item));
|
|
this.chooseGoodsItem.content = `[`+item.id+`]`+item.title;
|
|
this.form.goods = item.id;
|
|
this.goodsShow = false;
|
|
},
|
|
submitForm(formName) {
|
|
let that = this;
|
|
if(!this.form.goods) {
|
|
this.$message.error("请选择商品")
|
|
return false;
|
|
}
|
|
let json = {
|
|
goods_id:this.form.goods,
|
|
comment:{
|
|
head_img_url:this.form.head_img_url,
|
|
nick_name:this.form.nick_name,
|
|
level:this.form.level,
|
|
level_set:this.form.level_set,
|
|
content:this.form.content,
|
|
images:this.form.images,
|
|
time_state:this.form.time_state,
|
|
comment_time:this.form.comment_time,
|
|
score_latitude:{
|
|
score_latitude_describe:this.form.score_latitude.score_latitude_describe,
|
|
score_latitude_delivery:this.form.score_latitude.score_latitude_delivery,
|
|
score_latitude_service:this.form.score_latitude.score_latitude_service
|
|
},
|
|
is_show:this.form.is_show,
|
|
is_top:this.form.is_top,
|
|
},
|
|
|
|
};
|
|
if(this.id) {
|
|
json.id = this.id
|
|
}
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
|
|
this.$http.post(this.submit_url,json).then(response => {
|
|
if (response.data.result) {
|
|
this.$message({type: 'success',message: '操作成功!'});
|
|
this.goBack();
|
|
} else {
|
|
this.$message({message: response.data.msg,type: 'error'});
|
|
}
|
|
loading.close();
|
|
},response => {
|
|
loading.close();
|
|
});
|
|
}
|
|
else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
goBack() {
|
|
history.go(-1)
|
|
},
|
|
openUpload(str,type,sel) {
|
|
this.chooseImgName = str;
|
|
this.uploadShow = true;
|
|
this.type = type//1图片类型
|
|
this.selNum = sel
|
|
},
|
|
changeProp(val) {
|
|
if(val == true) {
|
|
this.uploadShow = false;
|
|
}
|
|
else {
|
|
this.uploadShow = true;
|
|
}
|
|
},
|
|
// sureImg(name,image,image_url) {
|
|
// console.log(name)
|
|
// console.log(image)
|
|
// console.log(image_url)
|
|
// this.form[name] = image;
|
|
// this.form[name+'_url'] = image_url;
|
|
// },
|
|
sureImg(name,uploadShow,fileList) {
|
|
|
|
if(fileList.length <= 0) {
|
|
return
|
|
}
|
|
if(name == 'images') {//评论图片
|
|
if(!this.form[name] || !this.form[name+'_url']) {
|
|
this.form[name] = [];
|
|
this.form[name+'_url'] = [];
|
|
}
|
|
fileList.forEach((item,index) => {
|
|
this.form[name].push(item.attachment);
|
|
this.form[name+'_url'].push(item.url);
|
|
})
|
|
console.log(this.form[name],this.form[name+'_url'])
|
|
}
|
|
if(name == 'head_img_url') {//用户头像
|
|
this.form[name] =fileList[0].attachment;
|
|
this.form[name+'_url'] = fileList[0].url;
|
|
}
|
|
},
|
|
clearImg(str,type,index) {
|
|
if(!type) {
|
|
this.form[str] = "";
|
|
this.form[str+'_url'] = "";
|
|
}
|
|
else {
|
|
this.form[str].splice(index,1);
|
|
this.form[str+'_url'].splice(index,1);
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
openListUpload(str,type) {
|
|
// this.chooseImgListName = str;
|
|
// this.uploadShow = true;
|
|
// this.type = type;
|
|
this.chooseImgName = str;
|
|
this.uploadShow = true;
|
|
this.type = type//1图片类型
|
|
},
|
|
// changeListProp(val) {
|
|
// if(val == true) {
|
|
// this.uploadShow = false;
|
|
// }
|
|
// else {
|
|
// this.uploadShow = true;
|
|
// }
|
|
// },
|
|
// sureImgList(name,image,image_url) {
|
|
|
|
// console.log(name,'1111')
|
|
// console.log(image,'2222')
|
|
// console.log(image_url,'33333')
|
|
|
|
// return
|
|
// if(!this.form[name] || !this.form[name+'_url']) {
|
|
// this.form[name] = [];
|
|
// this.form[name+'_url'] = [];
|
|
// }
|
|
// image.forEach((item,index) => {
|
|
// this.form[name].push(item);
|
|
// this.form[name+'_url'].push(image_url[index]);
|
|
// })
|
|
// console.log(this.form)
|
|
// },
|
|
clearImgList(str) {
|
|
this.form[str] = "";
|
|
this.form[str+'_url'] = "";
|
|
this.$forceUpdate();
|
|
},
|
|
// 字符转义
|
|
escapeHTML(a) {
|
|
a = "" + a;
|
|
return a.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, "\"").replace(/'/g, "'");;
|
|
},
|
|
},
|
|
})
|
|
|
|
</script>
|
|
@endsection
|
|
|
|
|