|
|
@@ -1,13 +1,308 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- 意见反馈详情
|
|
|
+ <view class="detail">
|
|
|
+ <view class="header-info">
|
|
|
+ <view class="title">反馈描述</view>
|
|
|
+ <view class="type">
|
|
|
+ <text>反馈类型:</text>
|
|
|
+ {{ detail.type }}
|
|
|
+ </view>
|
|
|
+ <view class="remarks">
|
|
|
+ <text>反馈描述:</text>
|
|
|
+ {{ detail.remarks }}
|
|
|
+ </view>
|
|
|
+ <view class="file-box">
|
|
|
+ <block v-for="item in detail.attinfos" :key="item.attachmentid">
|
|
|
+ <view v-if="item.fileType == 'image'" @click="viewImages(item.url)" class="item">
|
|
|
+ <u-image :src="item.url" :width="tovw(105)" :height="tovw(105)" :lazy-load="true" radius="5"></u-image>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.fileType == 'video'" class="item">
|
|
|
+ <video class="video" :style="{width:tovw(105),height:tovw(105)}" :poster="item.subfiles[0].url"
|
|
|
+ :src="item.url" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="message-header">
|
|
|
+ <text>回复</text>
|
|
|
+ <text>共{{ total }}条</text>
|
|
|
+ </view>
|
|
|
+ <My_listbox ref="List" @getlist="getComment">
|
|
|
+ <view class="content">
|
|
|
+ <view class="message-item" v-for="item in list" :key="item.sys_datacommentid">
|
|
|
+ <u-image :src="item.headpic ? item.headpic : 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" :width="tovw(32)" :height="tovw(32)" :lazy-load="true" radius="50%"></u-image>
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="name">{{ item.name }}</text>
|
|
|
+ <view class="message-text">
|
|
|
+ {{ item.content }}
|
|
|
+ </view>
|
|
|
+ <text class="time">{{ item.createdate }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </My_listbox>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view :style="{height:tovw(70)}"></view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="input-box" hover-class="navigator-hover">
|
|
|
+ <input class="input" type="text" placeholder="评论" :value="commentText" maxlength="499"
|
|
|
+ @input="changeComment" confirm-type="send" @confirm="onSend">
|
|
|
+ <icon v-if="commentText" class="icon" type="clear" size="3.733vw" @click="onClear" />
|
|
|
+ </view>
|
|
|
+ <view class="add-box">
|
|
|
+ <view class="add" hover-class="navigator-hover"
|
|
|
+ @click="loading ? '' : onSend()">
|
|
|
+ <u-loading-icon v-if="loading" />
|
|
|
+ <block v-else>
|
|
|
+ 发送
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { formattedFiles,viewImage } from "../../utils/settleFiles.js"
|
|
|
export default {
|
|
|
-
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ detail:{attinfos:[]},
|
|
|
+ "content": {
|
|
|
+ "sa_feedbackid": '',
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 20
|
|
|
+ },
|
|
|
+ list:[],
|
|
|
+ id:'',
|
|
|
+ commentText:'',
|
|
|
+ total:0,
|
|
|
+ loading:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getDetail(id) {
|
|
|
+ let res = await this.$Http.basic({
|
|
|
+ "id": 20240517102602,
|
|
|
+ "content": {
|
|
|
+ sa_feedbackid: id
|
|
|
+ },
|
|
|
+ })
|
|
|
+ res.data.attinfos = formattedFiles(res.data.attinfos)
|
|
|
+ this.detail = res.data
|
|
|
+ console.log(this.detail, '反馈信息');
|
|
|
+ },
|
|
|
+ async getComment (init = false) {
|
|
|
+ return new Promise(async (resolve, reject) => {
|
|
|
+ if (this.paging(this.content, init)) return resolve();
|
|
|
+ this.content.sa_feedbackid = this.id
|
|
|
+ await this.$Http.basic({
|
|
|
+ "id": 20240517103002,
|
|
|
+ content:this.content
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.List.RefreshToComplete()
|
|
|
+ resolve();
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
|
|
|
+ this.content = this.$refs.List.paging(this.content, res)
|
|
|
+ this.total = res.total;
|
|
|
+ this.$refs.List.setHeight()
|
|
|
+ console.log('回复列表',this.list);
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ /* 预览图片 */
|
|
|
+ viewImages (url) {
|
|
|
+ viewImage(url)
|
|
|
+ },
|
|
|
+ changeComment(e) {
|
|
|
+ this.commentText = e.detail.value;
|
|
|
+ },
|
|
|
+ onSend() {
|
|
|
+ if (this.commentText == '') return uni.showToast({
|
|
|
+ title: '还未输入评论内容!',
|
|
|
+ duration: 2000,
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ this.loading = true
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": 20240417161502,
|
|
|
+ "content": {
|
|
|
+ "ownertable": "sa_feedback",
|
|
|
+ "ownerid": this.id,
|
|
|
+ "contentstr": this.commentText
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ console.log("发送评论", res)
|
|
|
+ this.loading = false
|
|
|
+ if (this.cutoff(res.msg, '评论成功')) return;
|
|
|
+ this.commentText = '';
|
|
|
+ this.getComment(true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClear() {
|
|
|
+ let that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '是否确定清空评论?',
|
|
|
+ success: ({ confirm }) => {
|
|
|
+ if (confirm) that.commentText = ""
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad (options) {
|
|
|
+ this.id = options.id
|
|
|
+ this.getDetail(options.id)
|
|
|
+ this.getComment(true)
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style></style>
|
|
|
+<style lang="scss">
|
|
|
+.detail {
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ .header-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 15px 10px;
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ margin: 10px 0;
|
|
|
+ text {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .remarks {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .file-box {
|
|
|
+ display: block;
|
|
|
+ .item {
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ display: inline-block;
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message-box {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 12px 10px 0 10px;
|
|
|
+ .message-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content:space-between;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ text {
|
|
|
+ color: #333333;
|
|
|
+ &:first-child {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .message-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-self: self-start;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 10px;
|
|
|
+ .name {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .message-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 375px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
+ .add-box {
|
|
|
+ padding:0 20px 0 20px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 95px;
|
|
|
+ height: 45px;
|
|
|
+ background: #C30D23;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .input-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex:1;
|
|
|
+ height: 45px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ padding: 0 10px 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|